Download
1 / 39
390 likes | 523 Vues
This lecture provides a comprehensive introduction to XHTML and CSS, essential concepts for web development. It covers the definition and structure of a web page, including elements, id, and class attributes. The session explains how to use style sheets (internal, external, and inline) to enhance the appearance of web content. Key topics include the strict syntax of XHTML, the function of browsers in interpreting markup, and common web elements such as headings, paragraphs, and images. Learn how to create a visually appealing and structured web page using XHTML and CSS.
E N D
phones off(please) CTEC1414Lecture 19 XHTML and CSS Introduction to XHTML and CSS Bharti Patel
Overview • 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
XML) HyperTextMarkupLanguage 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 annotation xhtmlmarkup 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 page’s appearance is set in a CSS Cascading Style Sheet
What is a Web Page? • Browsers (Internet Explorer, Firefox, Crome) interpret the xhtmlmarkup with the CSS in order to determine how to display the content • The xhtml has a strict syntax / grammar The xhtmlmust be correct The xhtmlcan 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 <h1> • An end tag looks like </h1> • An element looks like <h1> text goes here </h1>
xhtml page structurehtml, head and body elements <?xml version="1.0" encoding="ISO-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns = "http://www.w3.org/1999/xhtml" xml:lang ="en"lang = "en"> <head> <title>Title</title> </head> <body> </body> </html> 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 it’s markup here
Basic Structure of a Web Page • an element looks like: • <div>text goes here</div> • the content is between the 2 tags • <div>is a start tag • </div> is an end tag • a tag comprises • a <(less than symbol) • the tag name in lower case • a >(greater than symbol) <?xml version="1.0" encoding="ISO-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> "> <htmlxmlns="http://www.w3.org/1999/xhtml"xml:lang="en"lang="en"> <head> <title>Title</title> </head> <body> <div> This is a division element which is usually a large section of your page ..... </div> </body> </html> more page content with it’s 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 <h1>text goes here</h1> • Paragraphs <p>this is a paragraph – related text as in English</p> • Divisions <div>This is a div – a chunk of other elements </div> • Spans <span>a small piece of special text</span>
Logical Elements include • Images • Hyperlinks • Tables • Forms • multimedia objects • NOT frames
Physical Elements • Bold • <b></b> • Strong • <strong></strong> • Italic • <i></i> • Headings are also physical – • h1,h2 … h6 changes the size of the text
divs and paragraphs (elements) <div>s are elements for marking up larger chunks (compare with book, chapter) <div>s can contain <p>aragraphs, <h1>eadings and other <div>s <p>aragraphs are elements for marking up a smaller chunk of connected content – as in English. <p>aragraphs can contain <spans>s
h1)eadings and spans (elements) <h1>eadings are for marking up headings at six levels h1 (largest) to h6 (smallest) <span>s are for marking up small chunks of particular significance <h1>eadings and <span>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 idis an attribute used to uniquelyidentify elements class is an attribute used to identify a group of similar elements
divs and paragraphs (elements)id and class (attributes) <div id="main"> <p class="p1">Anne Other has taught mathematics and computing..... </p> <p class="p2">Since 1975 Anne has.... </p> </div>
Adding XHTML CommentsComments – do not get displayed <!--details correct as of 24-02-12 --> <body> <div id="main"> <p class="p1">Anne Other has taught mathematics and computing..... </p> <p class="p2">Since 1975 Anne has.... </p> </div> </body>
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
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 defaultare browsers style the same? • External CSS (over-ride browserstyles) • Internal CSS (over-ride browserstyles) (over-ride externalCSS styles) • In-line style (over-ride browserstyles) (over-ride externalCSS styles) (over-ride internalCSS styles)
In-line style rules use ONLY for a one-off style change • style element is in the xhtml page original element <h1>one-off heading</h1> styled element <h1 style ="font-family: ‘Comic Sans MS’" > one-off heading style change </h1> The style is linked to ONE element in this case a single <h1> element note 2 sets of quotes single ‘ to contain the font family name double " to contain the attribute value
Stylesheets(internal and external) • Affect groups of elements • When using internal and externalstylesheets we associate an element with a style rule (property:value) • Notation element {property:value}
note the use of the colon to separate property from value Style rules Quotes needed here because of the spaces in the font family name Affecting a single property {property:value} e.g {text-align: right} {letter-spacing: 0.5cm} {font-family: "Comic Sans MS”}
Note the use of the semi-colon to separate each property setting pair 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 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
Styling elements element {property:value} e.g h1 {font-family: "Comic Sans MS"} This will affect ALL <h1>elements element {property:value;property:value} e.g body {color:red; background-color:white} This will affect the whole body of the page the elementwe want to style the style rule for the element
Internal stylesheet • Use when styles apply to one page only <html> <head> <title>this page</title> <style type = "text/css"> h1 {font-family:"Comic Sans MS"} </style> </head> <body> <h1>headings on this page</h1> </body> </html>
External Stylesheet • Use when styles apply to many pages • Define styles in separate css file save as file named: my_styles.css Contents: h1 {font-family:"Comic Sans MS"} • add link in xhtml page to css file • see next slide
External stylesheet – the web page • use when styles apply to many pages <html> <head> <title>this page</title> <linkrel = "stylesheet" type = "text/css“ href = "../css/my_styles.css"/> </head> <body> <h1>heading on all pages look like this</h1> </body> </html>
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 internalstylesheet • 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 names cyan, blue, redetc (limited number) rgbvalues (0-255) or percentages Color codes #rrggbbred 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-variant small-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}
Text • text-decoration underline, • text-align left, right, center • text-transform capitalize, lower-case Setting more than one element to the same style Setting h1 and h2 to have the same font h1,h2 {font-family: Arial} Note the comma to separate the 2 elements
Style in named divs • We have used the id attribute to uniquely identify elements • This code sets the colours of the element with id = "main" (a div) • #main{color: red; background-color:white} Note the # symbol references an id
Styles for classes • We have used the class attribute to identify related elements • This code sets the colours of the element with class = "name" (a div) • .name{font-style: italic} Note the . (full stop) symbol references a class
