1 / 39

CTEC1414 Lecture 19

phones off (please). CTEC1414 Lecture 19. XHTML and CSS Introduction to XHTML and CSS Bharti Patel. Overview. Definition of a webpage Xhtml page structure Elements i d and class attributes Style Sheets Cascading Style Sheets Inline, internal and external style sheets Style rules.

lam
Download Presentation

CTEC1414 Lecture 19

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  2. 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

  3. 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

  4. 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

  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 <h1> • An end tag looks like </h1> • An element looks like <h1> text goes here </h1>

  6. 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

  7. 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

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

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

  10. 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>

  11. Logical Elements include • Images • Hyperlinks • Tables • Forms • multimedia objects • NOT frames

  12. Physical Elements • Bold • <b></b> • Strong • <strong></strong> • Italic • <i></i> • Headings are also physical – • h1,h2 … h6 changes the size of the text

  13. 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

  14. 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.

  15. 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

  16. 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>

  17. 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>

  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

  19. Cascading Style Sheets

  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}

  21. 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)

  22. 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

  23. 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}

  24. 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”}

  25. 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

  26. 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

  27. 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>

  28. 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

  29. 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>

  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

  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 internalstylesheet • transfer to an external stylesheet

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

  33. 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}

  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

  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-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

  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}

  37. 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

  38. 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

  39. 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

More Related