xhtml and css introduction to xhtml and css bharti patel 1 phones off (please)

XHTML and CSS Introduction to XHTML and CSS Bharti Patel 1 phones off (please)

Definition of a webpage Xhtml page structure Elements id and class attributes Style Sheets Cascading Style Sheets Inline, internal and external style sheets Style rules Overview

What is a Web Page? A web page is a simple text file could be written in Notepad we use JPadPro The text is structured using markup (xhtml) markup simply means adding annotati on xhtml markup comprises elements there is a set of elements that we can use The elements represent common features for structure and appearance These include paragraphs, images, headings The pages appearance is set in a CSS Cascading Style Sheet XML) HyperText Markup Language

What is a Web Page? Browsers (Internet Explorer, Firefox, Crome) interpret the xhtml markup with the CSS in order to determine how to display the content The xhtml has a strict syntax / grammar The xhtml must be correct The xhtml can be validated CSS has a strict syntax / grammar The CSS must be correct The CSS can be validated

What is a Web Page Text with coded messages telling a browser what to display. Text is coded using start and an end tag The tags and content is called an element A start tag looks like An end tag looks like An element looks like text goes here

Title JPadPro creates a we"> Title JPadPro creates a web page with this basic structure so you do not need to remember or type it in add your page content with its markup here"> Title JPadPro creates a we" title="xhtml page structure html, head and body elements Title JPadPro creates a we">

xhtml page structure html, head and body elements Title JPadPro creates a web page with this basic structure so you do not need to remember or type it in add your page content with its markup here

Title This is a division element which is usually a large section of your page..... an element looks like: text goes "> Title This is a division element which is usually a large section of your page..... an element looks like: text goes here the content is between the 2 tags is a start tag is an end tag a tag comprises a < (less than symbol) the tag name in lower case a > (greater than symbol) more page content with its markup goes here"> Title This is a division element which is usually a large section of your page..... an element looks like: text goes " title="Basic Structure of a Web Page "> Title This is a division element which is usually a large section of your page..... an element looks like: text goes ">

Basic Structure of a Web Page "> Title This is a division element which is usually a large section of your page..... an element looks like: text goes here the content is between the 2 tags is a start tag is an end tag a tag comprises a < (less than symbol) the tag name in lower case a > (greater than symbol) more page content with its markup goes here

Common Elements divisions / layers headings paragraphs lists hyperlinks media - images, videos, sound tables forms

Elements Logical elements add a logical structure to the text in the page Physical elements affect the appearance of the text

Logical Elements include Headings text goes here Paragraphs this is a paragraph related text as in English Divisions This is a div a chunk of other elements Spans a small piece of special text

Logical Elements include Images Hyperlinks Tables Forms multimedia objects NOT frames

Physical Elements Bold Strong Italic Headings are also physical h1,h2 h6 changes the size of the text

divs and paragraphs (elements) s are elements for marking up larger chunks (compare with book, chapter) s can contain aragraphs, eadings and other s aragraphs are elements for marking up a smaller chunk of connected content as in English. aragraphs can contain s

h1)eadings and spans (elements) eadings are for marking up headings at six levels h1 (largest) to h6 (smallest) s are for marking up small chunks of particular significance eadings and s cannot contain larger chunks - div, paragraphs etc.

id and class (attributes) A page may contain many divs and paragraphs so we use attributes to name these id is an attribute used to uniquely identify elements class is an attribute used to identify a group of similar elements

divs and paragraphs (elements) id and class (attributes) Anne Other has taught mathematics and computing..... Since 1975 Anne has....

Adding XHTML Comments Comments do not get displayed Anne Other has taught mathematics and computing..... Since 1975 Anne has....

Designing page structure Single page Simply use logic to identify the blocks use id and class as needed Multiple pages a web site Plan shape of each page give each page an identical structure even if not every page has content in each element make id and class consistent on all pages

Cascading Style Sheets

Style Sheets Styles are used to define the appearance and layout of the page Appearance = color, font, borders etc Layout = positioning, visual structure Styles are associated with elements Styles are defined in Style Rules Style rules have a format: {property:value}

Cascading Style Seets CSS CSS are file used to contain style rules Cascading because styles cascade down Browser default are browsers style the same? External CSS (over-ride browser styles) Internal CSS (over-ride browser styles) (over-ride external CSS styles) In-line style (over-ride browser styles) (over-ride external CSS styles) (over-ride internal CSS styles)

Style rules Affecting a single property {property:value} e.g {text-align: right} {letter-spacing: 0.5cm} {font-family: "Comic Sans MS} Quotes needed here because of the spaces in the font family name note the use of the colon to separate property from value

Style rule Affecting a multiple properties {property:value ;property:value; property:value} e.g {color:red;background-color:white} {font-size: 110%; text-align: right; text-transform: capitalize} Note the use of the semi-colon to separate each property setting pair Note that when setting the colour of text it is also necessary to set the background colour Note when setting multiple properties this one-per-line layout is easier to read

heading on all pages look like this">

External stylesheet the web page use when styles apply to many pages this page heading on all pages look like this

Why use external stylesheets? Content is separate from appearance. One developer does content, one appearance A stylesheet can affect all pages on a site The site has a common coherent appearance A Stylesheet can be validated In-line styles cannot be validated Multiple external stylesheets can be used One for colour, font, text One for layout positioning

Why use internal stylesheet and inline styles? Allows style changes to be made for one page. An individual developer can customise one page OR can customise an element, class, id Can be used to try out styles quickly test via in-line copy into an internal stylesheet transfer to an external stylesheet

Colo(u)r Always set BOTH color text background-color background element {color:your-text-color; background-color:your-background-color}

Adding color names and codes Color namescyan, blue, red etc (limited number) rgbvalues (0-255) or percentages Color codes #rrggbb red green blue h1 {color:cyan; background-color:blue} h1 {color:rgb(0,255,255);background-color:rgb(0%,0%,100%)} h1 {color:#00FFFF; background-color:#0000FF}

Help to choose colors http://www.december.com/html/spec/colorspottable.html http://web.forret.com/tools/color_palette.asp http://ficml.org/jemimap/style/color/wheel.html http://www.w3schools.com/css/css_colors.asp http://www.wellstyled.com/tools/colorscheme2/index-en.html

Changing Fonts font-family cursive, sans-serif, serif font-family Arial, Times New Roman ", Comic Sans MS " font-size 10pt, 20%, 1.5em, large, smaller font-style italic, normal font-weight bold, bolder.. 100,500, normal font-variantsmall-caps, normal font: normal, cursive, small-caps,1.5em Fonts that work in all browsers http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html

Examples /* for all text */ body {color:#FF99CC; background-color:#660099; font-family:"Comic Sans MS"} /* for a class = date */.date {color:#FFCCFF; background-color:#660099} /* for an id = heading */ #heading {color:#660099; background-color:#CC99FF; font-size:18pt}

xhtml and css introduction to xhtml and css bharti patel 1 phones off (please)

Documents