XHTML and CSS Introduction to XHTML and CSS Bharti Patel 1
phones off (please)
Slide 2
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
Slide 3
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
Slide 4
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
Slide 5
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
Slide 6 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
Slide 7 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
Slide 8
Common Elements divisions / layers headings paragraphs lists
hyperlinks media - images, videos, sound tables forms
Slide 9
Elements Logical elements add a logical structure to the text
in the page Physical elements affect the appearance of the
text
Slide 10
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
Slide 11
Logical Elements include Images Hyperlinks Tables Forms
multimedia objects NOT frames
Slide 12
Physical Elements Bold Strong Italic Headings are also physical
h1,h2 h6 changes the size of the text
Slide 13
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
Slide 14
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.
Slide 15
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
Slide 16
divs and paragraphs (elements) id and class (attributes) Anne
Other has taught mathematics and computing..... Since 1975 Anne
has....
Slide 17
Adding XHTML Comments Comments do not get displayed Anne Other
has taught mathematics and computing..... Since 1975 Anne
has....
Slide 18
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
Slide 19
Cascading Style Sheets
Slide 20
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}
Slide 21
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)
Slide 22
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
Slide 25
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
Slide 29 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
Slide 30
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
Slide 31
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
Slide 32
Colo(u)r Always set BOTH color text background-color background
element {color:your-text-color;
background-color:your-background-color}
Slide 33
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}
Slide 34
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
Slide 35
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
Slide 36
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}