XHTML and CSS

1. XHTML and CSS Overview

2. Hypertext Markup Language • A set of markup tags and associated syntax rules • Unlike a programming language, you cannot describe actions or logic • You can only describe information structure and context • Markup tags also called elements • <element>Data goes here</element>

3. Cascading Style Sheets • Used to define attributes of elements in HTML and XML • Common attributes: height, width, font-size, alignment, color, etc. • Documents can have multiple style sheets with overlapping and sometimes conflicting definitions • Cascading refers to the set of rules for resolving conflicts.

4. Cascading • Priority is given to the most specific definitions and then the definitions or rules cascade down to the less specific rules. • Priority is also given to definitions that are “closer” to the content, i.e., embedded and inline styles can be used to override global or attached styles.

5. HTML • HTML was supposed to be a structural or “semantic” language, • But, the Browser Wars lead to the introduction of “style” or formatting tags. • “style” tags are bad! • They are being removed from the HTML standards (called deprecation).

6. CSS • Cascading Style Sheets • Used to specify the style/appearance of structural elements (HTML tags). • CSS was part of the original design of the web, • but its use was almost entirely abandoned between 1997 and 2003.

7. Why are “style” tags bad? • The best answer is very complicated • Short Answer: • Leads to bloated HTML code that is hard to maintain.

8. Semantic = Has Meaning Style =Specifies Appearance Semantic vs Style

9. Semantic  Meaning <img src=“tiger.jpg”> <span class=“caption”> This is a picture of a tiger </span> A caption is meaningful. Images typically have a caption that describes the image. Style   Appearance <img src=“tiger.jpg”> <font type=“Arial” style=“italic” size=“10pt”> This is a picture of a tiger </font> Here, we specify how to display the caption but not the fact that it’s actually a caption. Semantic vs Style

10. Semantics + CSS is better! <span class=“caption”>Figure 1</span> <span class=“caption”>Figure 2</span> <span class=“caption”>Figure 3</span> … <span class=“caption”>Figure 99</span> .caption { font-size: 10pt; font-style: italic; }

11. This is why the font tag sucks!(it’s a style tag) <font type=“Arial” style=“italic” size=“10pt”> Figure 1 </font> <font type=“Arial” style=“italic” size=“10pt”> Figure 2 </font> <font type=“Arial” style=“italic” size=“10pt”> Figure 3 </font> … <font type=“Arial” style=“italic” size=“10pt”> Figure 999 </font> <font type=“Arial” style=“bold” size=“10pt”> Sub-title </font> Imaging if you wanted to change the font size to 12pt for all image captions? Good luck!

12. General Structure Example <element>Content</element> element { property: value; property: value; … } <h1>ESPN</h1> h1 { font-size: 10pt; color: red; } XHTML & CSS syntax

13. Extensible HTML  XHTML • XHTML is a reformulation of HTML according to XML standards. • Only four differences • Inclusion of an XML header • Single tags end with />, instead of just > • Attribute values must have quotes: “value” • Tags must be in lowercase

14. Why use XHTML? • It is the recommended standard (W3C) since 1999 • HTML 4.01 (1998) • XHTML 1.0 (1999) • Allows your web page to be parsed by a general XML parser. • Lots of applications support XML parsing.

15. Web’s 4 Commandments • Make sure your code validates as XHTML • Use Semantic Markup • Use tags that describe the content, not the content’s appearance • Structure Documents Logically • The HTML code should be in a logical order; Style sheets can reposition items for presentation • Use CSS, not <font> or <table> to layout and decorate your pages.

16. XHTML Rules <elementname> Content content</elementname> • In XHTML all element names must be lower case. • In HTML tag case didn’t matter. • In XHTML all element must have a closing tag • Most web browsers are forgiving about closing tags, which makes it possible to forget about them • Example <p>Here is paragraph with no ending tag<p>Here is another paragraph</p>

17. HTML single tags • HTML has a few tags that are standalone, i.e., no closing tag. • Image: <imgsrc=“imagename.jpg”> • Line break: <br> • Link: <link type="text/css”> • Used to link/insert a Cascading Style Sheet

18. XHTML single tags • To meet XML guidelines HTML single tags must to closed with a /> • Image: <imgsrc=“imagename.jpg” /> • Line break: <br /> • Link: <link type="text/css" /> • Note the space before the />

19. Attributes <element attribute=“value”> content </element> XHTML requires that all attribute values be enclosed in quotes. HTML: <imgsrc=tiger.jpg> XHTML: <imgsrc=“tiger.jpg” /> Forgiving browsers don’t care about the quotes (Follow XHTML; quotes matter to us)

20. Browsers ignore whitespace • An XHTML document is an ASCII Text document. • XHTML renderers ignores, tabs, spaces and line breaks • Allows a web designer to format XHTML code without having an effect on the web page’s rendered appearance. • To render tabs, spaces, and line breaks requires using tags and style sheets.

21. Basic XHTML document <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN… <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title> Title Displays in Browser’s Top Bar </title> <link type="text/css" href="part5.css" rel="stylesheet"/> </head> <body> Page content here </body> </html>

22. Text Structure (blocks) <h1>Most Important Header</h1> <p>A paragraph in the literal sense.</p> <h2>Sub-heading</h2> <h3>Smaller Sub-heading</h3> … <h6>Smallest Sub-heading</h6>

23. Ordered Lists (ol) Unordered Lists (ul) <ol> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> </ol> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> </ul> Lists

24. Example Meaning <dl> <dt>Coffee</dt> <dd>black hot drink</dd> <dt>Milk</dt> <dd>white cold drink</dd> </dl> dl – definition list dt – definition term dd – definition description Used heavily in early HTML documents which were most scientific papers with lost of definitions and terms Terms and Definitions

25. Text Formatting (style) <tt> Teletype text </tt> <i> Italic text </i> <b> Bold text </b> <big> Big text </big> <small> Small text </small>

26. Text identity (semantic) <em> Emphasized text </em> <strong> Strong text </strong> <dfn> Definition term </dfn> <code> Computer code text </code> <samp> Sample computer code </samp> <kbd> Keyboard text </kbd> <var> Variable </var> <cite> Citation </cite>

27. Hyperlinks • Called the anchor tag <a href=“http://www.espn.com”>ESPN</a> • href stands for hypertext reference • What is the element name? • What is the attribute? • What is the attribute’s value • What is the content?

28. Elements we’ll learn about later Tables <table> <tr><td></td></tr> <tr><td></td></tr> </table> Forms <form action=“program.php”> <input type=“text”> <input type=“submit”> </form> Frames • Deprecated!

29. Deprecation • Removed from the standard • Most browsers will still render deprecated tags • However, browsers do not have to according to the standards • Do not use deprecated tags unless you have no choice

30. Divisions and Spans • Divisions <div> used to break your webpage into logical blocks or boxes • Spans<span> used to create custom in-line tags, i.e., within the flow of a paragraph of text. Example: • This is paragraph with a table reference. <span class=“tableref”>Table 2.4</span> is a lovely table.

31. TEXT BOXES (usually <div> elements) • Font family, • size, • alignment, • weight, • sytle, • variant, • line-height, • indent, spacing, • direction • Height, • width, • margins, • padding, • borders, • border color, • border styles, • background color, • background image. CSS Attributes