ISIT206 Web Technologies

SISAT, UOW Autumn, Autumn 2011

Lecture Sc edu e (subject to variation) ectu e Schedule a at o )

L1. Subject Introduction, Introduction Fundamentals of the Web L2. L2 Client-side programming: HTML L3. More on HTML L4. L4 Cascading Style Sheet

L5. Javascript p

L6. Dynamic HTML y

L7. More on DHTML

L8. XML

L9. More on XML

L10. Introduction to flash

L11. Introduction to PHP

L12. Database access L13. Subject L13 S bj t review i

HTML and page layout

HTML was originally intended for q g y quick information sharing A range of techniques have been utilised to control h t l how t t appears and how th page text dh the elements are layed out: e.g. <font> These techniques require word by word word-by-word formatting which leads to complexity and can confuse content with presentation p Style was introduced in HTML 3.2 to define the appearance of a document element The collection of styles for a Web page or a Web site is known as a style sheet
3

Introducing CSS
Cascading Style Sheet (CSS) separates presentation and content Styles allow several attributes to be assigned at once to all elements on a page that are marked with a particular tag Styles
Save time by reducing the amount of HTML required Allow global changes over entire pages or sites R d Reduce f formatting errors tti Allow more variety in formatting beyond that of standard HTML Allow a common format to be defined in one place for an entire site

Introducing CSS
The CSS1 specification was developed in 1996 p p CSS2 was released in 1998 CSS3 is on its way CSSs provide the means to control and change presentation of HTML documents CSS is not technically HTML but can be embedded i i t t h i ll HTML, b t b b dd d in HTML documents Style sheets allow you to impose a standard style on a whole document, or even a whole collection of documents Style is specified for a tag by the values of its properties

Cascading style sheets

CSS1 introduced styles for the following document features:
Fonts Text Color Backgrounds Block-level Elements

Cascading style sheets

CSS2 introduced styles for the following document features:
Positioning Visual Formatting Media Types yp Interfaces

CSS 2.1 did not add any new features to the language g g
7

Cascading style sheets

CSS3 (which is still in development) will introduce styles for the following document features:
User Interfaces Accessibility Columnar layout y International Features M bil D i Mobile Devices Scalable Vector Graphics
8

Levels of style sheets

There are three levels of style sheets
1. Inline - specified for a specific occurrence of a tag and apply only to that tag
This is fine-grain style, which defeats the purpose of style sheets uniform style if t l

2. Document-level style sheets - apply to the whole document in which they appear 3. External style sheets - can be applied to any number of documents

When more than one style sheet applies to a specific tag in a document, the lowest level style sheet has precedence In a sense, the browser searches for a style property spec, starting with inline, until it finds one (or there isnt one)

Inline styles
Inline styles are applied to individual sections of text Inline style sheets appear in the tag itself <element style=style1:value1; style2:value2; style3:value3;>

10

Embedded styles
You can embed style definitions in a document head using the following form: <style type=text/css> style declarations </style> Where style declarations are the declarations of the different styles to be applied to the document
11

External style sheet

Because an embedded sty e s eet o y app es to t e ecause a e bedded style sheet only applies the content of one file, you need to place a style declaration in an external style sheet to apply to the rest of the Web site An external style sheet is a text file that contains style d l ti t l declarations
It can be linked to any page in the site, allowing the same style declaration to be applied to the entire site

12

External style sheet

External style sheets are in separate files, potentially on any server ser er on the Internet
Written as text files with the MIME type text/css A <link> tag is used to specify that the browser is to fetch and use g p y an external style sheet file

<link rel = "stylesheet" type = "text/css" href = "http://www.wherever.org/termpaper.css"> </link> An alternative way to reference an external style sheet: @ p @import url(filename); ( )
Appears at the beginning of the content of a style element (later)

External style sheets can be validated

htt //ji http://jigsaw.w3.org/css-validator/validator-upload.html 3 / lid t / lid t l d ht l

13

External style sheet

You can add style comments as you develop an external style sheet /* / comment */ / Use the link element to link a Web page to an external style sheet Y can i You import th content of one style t the t t f t l sheet into another

14

U de sta d g cascading order Understanding cascad g o de

You ca link a s g e sty e s eet to multiple ou can single style sheet utpe documents in your Web site by using the link element or the @import element You can also link a single document to several style sheets

15

Style inheritance
If a style is not specified for an element it element, inherits the style of its parent element. This is called style inheritance body {color: blue} p {color: red} In the above example, the body element is p y the parent element

16

Style specification formats

Inline:
Style sheet appears as the value of the style attribute General form:

style = "property_1: value_1; property_2: value_2; property_n: value_n" Document level: Document-level:
Style sheet appears as a list of rules that are the content of a <style> tag The <style> tag must include the type attribute, set to "text/css" The list of rules must be placed in an HTML comment, because it is not HTML Comments in the rule list must have a different form - use C comments (/**/) General form:
<style type = "text/css"> <!-rule list

--></style> Form of the rules: selector {li of property/values} l {list f / l } each property/value pair has the form: property: value Pairs are separated by semicolons, just as in the value of a <style> tag

17

Style specification formats

External style sheets
Form is a list of style rules, as in the content of a <style> tag for document-level style sheets

18

Selector forms
Simple Selector Forms
The selector is a tag name or a list of tag names separated by commas names, Examples: h1, h3 p Used to allow different occurrences of the same tag to use different style specifications A style class has a name, which is attached to a tag name For example, p.narrow {property/value list} p.wide {property/value list} The class you want on a particular occurrence of a tag is specified with the class attribute of the tag For example, <p class = "narrow"> ... </p> <p class = "wide"> ... </p>

Class Selectors

19

Selector forms
Generic Selectors
A generic class can be defined if you want a style to apply to more than one kind of tag A generic class must be named, and the name must begin with a period Example, .sale { } Use it as if it were a normal style class <h1 class = "sale"> Weekend Sale </h1> ... <p class = "sale"> </p>

20

Selector forms
id Selectors
An id selector allow the application of a style to one specific element General form: #specific-id {property-value list} p {p p y } Example: #section14 {font-size: 20}

Universal Selectors
* {color: red;} Applies to all elements in the document

21

Property value forms

There are 60 different properties in 7 categories:
Fonts Lists Alignment of text Margins Colors Backgrounds Borders

22

Defining text and background colors g g

Background color definition:
background-color: color

T Text color definition: l d fi i i

color: color where color is either the color value or the color name

You can apply text and background colors to any page element l t

23

Working with fonts and text styles o g t o ts a d te t sty es

A specific font is a font such as Times New Roman, Arial, p , , or Garamond. The font is installed on a users computer A generic font refers to the fonts general appearance
Generic fonts

24

Working with fonts and text styles o g t o ts a d te t sty es

CSS allows you to specify a list of specific fonts along with a generic font If the browser cannot find any of the specific fonts listed, it uses the generic font font-family: Arial, Helvetica, Trebuchet MS, sans-serif

25

Setting the font size

The style to change the font size of text within y g an element is:
font-size: length where length is a length of measure

Absolute units define a font size using one of five t d d it f fi standard units of measurement: t
Millimeters (mm) Centimeters (cm) Inches (in) Points (pt) Picas (pc)
26

Setting the font size

Many Web page des g e s opt to use relative u ts, a y eb designers e at e units, which are expressed relative to the size of other objects within the Web page
Em unit Percentages Relative keywords
Larger g Smaller

27

Spacing and indentation

Kerning is the amount of space between characters
l tt letter-spacing: value i l

Tracking is the amount of space between words and phrases d d h

word-spacing: value

Leading is the space between lines of text

line height: length line-height:

28

Applying font features

To specify font styles, use the following style: styles
font-style: type

T control f To l font weight f any page element, i h for l use the following style:
font-weight: weight

To change the appearance of your text, use the following style:

text decoration: type text-decoration:

29

Applying font features

Underline overline: Underline,
text-decoration: underline overline

Capitalize:
text-transform: capitalize

Uppercase letters, small font:

f t font-variant: t i t type

30

Aligning text vertically

Use the vertical-align attribute

31 31

Combining All Text Formatting in a Single Style g g g y

You can combine most of them into a single declaration, using the style
font: font-style font-variant font-weight fontsize/lineheight font-family

32 32

List properties
On <li>, list-style-type applies to just that item
<h3> S Some C Common Si l E i Aircraft </h3> Single-Engine Ai ft
<ul> <li style = "list-style-type: disc"> Cessna Skyhawk </li> <li style = "list-style-type: square"> Beechcraft Bonanza </li> <li style = "list-style-type: circle"> Piper Cherokee </li> </ul>

33

List properties
Could use an image for the bullets in an unordered list Example: <li style = "list-style-image: url(bird.jpg)">

On ordered lists - list-style-type can be used to change the sequence values

Property value decimal upper-alpha lower-alpha upper-roman lower-roman Sequence type Arabic numerals Uc letters Lc letters Uc Roman Lc Roman First four 1, 2, 3, 4 A, B, C, D a, b, c, d I, II, III, IV i, ii, iii, iv

34

Formatting Backgrounds
The syntax for inserting a background image is: background-image: url(url)
URL i th l is the location and fil ti d filename of th graphic fil f the hi file you want to use for the background of the Web page

35

Background image options

By default, bac g ou d images a e t ed bot y de au t, background ages are tiled both horizontally and vertically until the entire background of the element is filled up You can specify the direction of the tiling using the style: background-repeat: type

36

Background image options

37

The background style

You can combine the various background styles into the following single style: i l t l background: color url(url) repeat attachment horizontal vertical

38

Floating an element
The syntax for the float style is: float: position

39

Floating an element
To float an element use the style element, float: position where position is none (to turn off floating), floating) left or right To display an element clear of a floating element, use th style l t the t l clear: position p where position is none, left, right, or both
40

Alignment of text
The text-indent property allows indentation p p y
Takes either a length or a % value

The text align property has the possible text-align values, left (the default), center, right, or justify Sometimes we want text to flow around another element - the float property
The float property has the possible values, left, right, and none (th d f lt) i ht d (the default) If we have an element we want on the right, with text flowing on its left we use the default text align left, text-align value (left) for the text and the right value for float on the element we want on the right
41

Alignment of text
<img src = "c210.jpg" style = "float: right" /> g jpg y g -- Some text with the default alignment - left

42

Working with the box model

The box model describes the structure of page elements as they are laid out on the Web page:
The margin between the element and other page content The border of the box containing the element content t t The padding between the elements content and the box border The content of the element itself
43

Working with the box model

44

Margin styles
Control you margins with t e following four sty es Co t o your a g s t the o o g ou styles:
margin-top: length margin-right: length margin right: margin-bottom: length margin left: length margin-left:

Margin values can also be negative. This creates an overlay effect by forcing the browser to render one element on top of another You can also combine the four margin styles into a single style:
margin: top right bottom left g p g
45

Padding styles
Styles to set padding are similar to styles to set margins:
padding-top: value padding right: value padding-right: padding-bottom: value padding-left: value

46

Border styles
bo de top dt e gt border-top-width: length border-right-width: length border bottom width: border-bottom-width: length border-left-width: length border width: border-width: top right bottom left border-top-color: color border right color: border-right-color: color border-bottom-color: color border-left-color: color border-color: top right bottom left

47

Border styles
border-top-style: type border-right-style: type border-bottom-style: type border left style: border-left-style: type border-style: top right bottom left

48

Border styles

49

Example
<img src = "c210 jpg " style = "float: right; c210.jpg float: margin-left: 0.35in; margin-bottom: 0.35in" / i b tt 0 35i " />

50

Width and height styles

51

Width and height styles

To set the box model width, use o t e bo ode dt , width: length where length is the width of the box content in one of the CSS units of measure. (Note that Internet Explorer applies the width value to the box model content, padding space, and border) To set the box model height, use g height: length where length is the height of the box content in one of the CSS units of measure

52

Pseudo classes
CSS pseudo-classes are used to add special effects to some selectors. selectors
selector:pseudo-class {property:value;} selector.class:pseudo-class {property:value;} p {p p y ;} :active Adds a style to an element that is activated :first-child Adds a style to an element that is the first child of another element :focus Adds a style to an element that has keyboard input focus :hover Adds a style to an element when you mouse over it :lang Adds a style to an element with a specific lang attribute :link Adds a style to an unvisited link :visited Add a style t a visited li k i it d Adds t l to i it d link

53

<span> and <div> tags p g

One problem with the font properties is that they apply to whole elements, which are often t large hi h ft too l Solution: a new tag to define an g element in the content of a larger element - <span> The default meaning of <span> is to leave th content as it is l the t t i

54

<span> and <div> tags p g

<p> p p Now is the <span> best time </span> ever! </p>

- Use <span> to apply a document style sheet to its content <style type = "text/css"> .bigred {font-size: 24pt; font-family: Ariel; color: red} </style> ... <p> p Now is the <span class = "bigred"> best time </span> ever! </p>

55

<span> and <div> tags p g

The <span> tag is similar to other HTML tags, they can be nested and they have id and class attributes Another tag that is useful for style specifications: <div>
Used to create document sections (or ( divisions) for which style can be specified e g A section of five paragraphs for which e.g., you want some particular style

56

Conflict resolution
conflict occurs when there are two or more values for the same property propert on the same element
Sources of conflict:
Conflicting values between levels of style sheets g y Within one style sheet Inheritance can cause conflicts Property values can come from style sheets written by the document author, the browser user, and the browser defaults

Resolution mechanisms:
Precedence rules for the different levels of style sheets Source of the property value The specificity of the selector used to set the property value Property value specifications can be marked to indicate their weight (importance)

57

Conflict resolution
Weight is assigned to a property value by attaching !important to the value Conflict resolution is a multistage process called the cascade: process,
Gather all of the style specs from the different levels of style sheets All available specs, from all sources, are sorted by origin and weight, using the following rules, which are g g given in p precedence order:
Important declarations with user origin Important declarations with author origin Normal declarations with author origin Normal declarations with user origin Any declarations with browser (or other user agent) origin id selectors Class and pseudo-class selectors Contextual selectors Universal selectors

If any conflicts remain, sort them by specificity:

If there are still conflicts resol e them b precedence to the most recently seen conflicts, resolve by recentl specification

58