Download presentation
Presentation is loading. Please wait.
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 Data goes here
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
XHTML & CSS syntax General StructureExample Content element { property: value; … } ESPN h1 { font-size: 10pt; color: red; }
6
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
7
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.
8
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.
9
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
10
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
11
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 />
12
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)
13
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.
14
Basic XHTML document <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN… Title Displays in Browser’s Top Bar Page content here
15
Text Structure (blocks) Most Important Header A paragraph in the literal sense. Sub-heading Smaller Sub-heading … Smallest Sub-heading
16
Lists Ordered Lists (ol)Unordered Lists (ul) Item 1 Item 2 Item 3 Item 4 Item 1 Item 2 Item 3 Item 4
17
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
18
Text Formatting (style) Teletype text Italic text Bold text Big text Small text
19
Text identity (semantic) Emphasized text Strong text Definition term Computer code text Sample computer code Keyboard text Variable Citation
20
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?
21
Elements we’ll learn about later Tables Forms Forms Frames Deprecated! Frames Deprecated!
22
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
23
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.
24
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.
Similar presentations
