XHTML and CSS Overview

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 Data goes here

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.

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.

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

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.

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

Semantic vs Style Semantic = Has Meaning Style = Specifies Appearance

Semantic vs Style Semantic  Meaning This is a picture of a tiger A caption is meaningful. Images typically have a caption that describes the image. Style   Appearance This is a picture of a tiger Here, we specify how to display the caption but not the fact that it’s actually a caption.

Semantics + CSS is better! Figure 1 Figure 2 Figure 3 … Figure 99.caption { font-size: 10pt; font-style: italic; }

This is why the font tag sucks! (it’s a style tag) Figure 1 Figure 2 Figure 3 … Figure 999 Sub-title Imaging if you wanted to change the font size to 12pt for all image captions? Good luck!

XHTML & CSS syntax General StructureExample Content element { property: value; … } ESPN h1 { font-size: 10pt; color: red; }

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

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.

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

XHTML Rules Content content 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 Here is paragraph with no ending tag Here is another paragraph

HTML single tags HTML has a few tags that are standalone, i.e., no closing tag. Image: Line break: Link: ◦ Used to link/insert a Cascading Style Sheet

XHTML single tags To meet XML guidelines HTML single tags must to closed with a /> 1. Image: 2. Line break: 3. Link: Note the space before the />

Attributes content XHTML requires that all attribute values be enclosed in quotes. HTML: XHTML: Forgiving browsers don’t care about the quotes (Follow XHTML; quotes matter to us)

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.

Basic XHTML document <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN… Title Displays in Browser’s Top Bar Page content here

Text Structure (blocks) Most Important Header A paragraph in the literal sense. Sub-heading Smaller Sub-heading … Smallest Sub-heading

Lists Ordered Lists (ol)Unordered Lists (ul) Item 1 Item 2 Item 3 Item 4 Item 1 Item 2 Item 3 Item 4

Terms and Definitions ExampleMeaning Coffee black hot drink Milk white cold drink 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

Text Formatting (style) Teletype text Italic text Bold text Big text Small text

Text identity (semantic) Emphasized text Strong text Definition term Computer code text Sample computer code Keyboard text Variable Citation

Hyperlinks Called the anchor tag ESPN href stands for hypertext reference What is the element name? What is the attribute? What is the attribute’s value What is the content?

Elements we’ll learn about later Tables Forms Forms Frames Deprecated! Frames Deprecated!

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

Divisions and Spans Divisions used to break your webpage into logical blocks or boxes Spans 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. Table 2.4 is a lovely table.

CSS Attributes TEXT BOXES (usually 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.