CTEC1414 Lecture 19

CTEC1414 Lecture 19

CTEC1414Lecture 19XHTML and CSSIntroduction to XHTML and CSSBharti Patel

1phones off (please)Definition of a webpageXhtml page structureElementsid and class attributesStyle SheetsCascading Style SheetsInline, internal and external style sheetsStyle rules

OverviewWhat is a Web Page?A web page is a simple text file could be written in Notepad we use JPadProThe text is structured using markup (xhtml)markup simply means adding annotationxhtml markup comprises elementsthere is a set of elements that we can useThe elements represent common features for structure and appearanceThese include paragraphs, images, headingsThe pages appearance is set in a CSS

Cascading Style SheetXML) HyperText Markup LanguageWhat 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 / grammarThe xhtml must be correct The xhtml can be validated

CSS has a strict syntax / grammarThe CSS must be correct The CSS can be validated

What is a Web PageText with coded messages telling a browser what to display.Text is coded using start and an end tagThe tags and content is called an elementA start tag looks like An end tag looks like An element looks like text goes here xhtml page structurehtml, head and body elements

Title

JPadPro creates a web page with this basic structure so you do not need to remember or type it inadd your page content with its markup hereBasic 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 taga tag comprisesa < (less than symbol)the tag name in lower casea > (greater than symbol)more page content with its markup goes here7Common Elementsdivisions / layersheadingsparagraphslistshyperlinksmedia - images, videos, soundtablesformsElementsLogical elementsadd a logical structure to the text in the page

Physical elementsaffect the appearance of the text Logical Elements includeHeadingstext goes hereParagraphsthis is a paragraph related text as in EnglishDivisionsThis is a div a chunk of other elements Spansa small piece of special textLogical Elements includeImagesHyperlinksTablesFormsmultimedia objectsNOT frames

Physical ElementsBold Strong

ItalicHeadings 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 saragraphs 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 CommentsComments do not get displayed

Anne Other has taught mathematics and computing..... Since 1975 Anne has....

Designing page structureSingle pageSimply use logic to identify the blocksuse id and class as needed

Multiple pages a web sitePlan shape of each pagegive each page an identical structure even if not every page has content in each elementmake id and class consistent on all pages

Cascading Style SheetsStyle SheetsStyles are used to define the appearance and layout of the page

Appearance = color, font, borders etcLayout = positioning, visual structure

Styles are associated with elementsStyles are defined in Style RulesStyle rules have a format: {property:value}Cascading Style Seets CSSCSS are file used to contain style rulesCascading because styles cascade downBrowser defaultare 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)In-line style rulesuse ONLY for a one-off style changestyle element is in the xhtml pageoriginal elementone-off heading

styled element one-off heading style change

The style is linked to ONE elementin this case a single elementnote 2 sets of quotessingle to contain the font family namedouble " to contain the attribute value Stylesheets (internal and external)Affect groups of elements

When using internal and external stylesheets we associate an element with a style rule (property:value)

Notationelement {property:value}

Style rulesAffecting a single property

{property:value}e.g{text-align: right}{letter-spacing: 0.5cm}{font-family: "Comic Sans MS}

Quotes needed herebecause of the spacesin the font family namenote the use of the colon to separate property from valueStyle ruleAffecting 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 toseparate each property setting pairNote that when setting the colour of text it is also necessary to setthe background colourNote when setting multiple propertiesthis one-per-line layout is easier to readStyling elementselement {property:value}e.gh1 {font-family: "Comic Sans MS"}

This will affect ALL elementselement {property:value; property:value}e.gbody {color:red; background-color:white}This will affect the whole body of the pagethe style rule for the elementthe element we want to styleInternal stylesheetUse when styles apply to one page only

this page h1 {font-family:"Comic Sans MS"} headings on this page

External StylesheetUse when styles apply to many pagesDefine styles in separate css file

save as file named:my_styles.cssContents: h1 {font-family:"Comic Sans MS"}

add link in xhtml page to css filesee next slide

External stylesheet the web pageuse when styles apply to many pages

this page