Internet & World Wide Web: How to Program by Deitel and Deitel
XHTML Structural Basics – Part 3 of Chapter 4
1
To read between the lines was easier than to follow the text. —Henry James
High thoughts must have high language. —Aristophanes
Yea, from the table of my memory II’llll wipe away all trivial fond records records. —William Shakespeare
He had a wonderful talent for packing thought close, and rendering it portable. —Thomas Babington Macaulay
2
OBJECTIVES In this chapter you will learn: To understand important components of XHTML documents. To use XHTML to create formatted web pages. To add images g to web pages. g To create and use hyperlinks to navigate web pages. To mark up lists of information. To create tables with rows and columns of data and control table formatting. To create and use forms to get user input. To make web pages accessible to search engines using tags.
3
1
Chapter 4 Sections
4.8 Special Characters and Horizontal Rules 4.9 Lists 4.10 Tables 4.13 meta Elements
4
Special Characters XHTML provides ways to display special characters that would be interpreted incorrectly by the browser (possibly) otherwise Format is &code code can be: – word abbreviations – numbers • decimal • hexadecimal 5
Special Character Example & (ampersand) character is represented by: – & – & (decimal) – & (hexadecimal)
One of many web resources with lists of special character codes is – http://www.digitalmediaminute.com/reference/ entity/index.php 6
2
Horizontal Rules Most browsers render a tag as a horizontal line hr stands for horizontal rule Helps break up a page into sections hr element also inserts a line break above and below the horizontal rule
Unordered Lists Unordered list element – (tag) – creates a bulleted list – each h ititem iin th the lilistt b begins i with ith a b bullet ll t symbol (called a disc)
List item element creates members of the list – (tag) 12
4
Unordered Lists – item 1 – item 2
Most web browsers render these list items with a line break and a bullet symbol at the beginning of the line 13
Unordered List Containing Hyperlinks
Creates an unordered list
Makes hyperlinked elements into individual list items 14
Unordered List Containing Hyperlinks
15
5
Ordered Lists The ordered list element ol creates a list in which each item begins with a number Lists may be nested to represent hi hierarchical hi l data d t relationships l ti hi Remember – NO overlapping elements!
16
Nested and Ordered Lists Here is what we want to create.
17
Nested and Ordered Lists Here is the code it takes to create it – Page 1.
18
6
Nested and Ordered Lists Here is the code it takes to create it – Page 2.
19
Tables table element – Defines a table in XHTML
Optional attribute summary – summarizes table’s contents – is used by text-to-speech devices to make the table more accessible to users with visual impairments
20
Tables caption element describes the table’s content – text inside element is rendered above the table in most browsers
21
7
Tables Table can be split into three distinct sections: – head (thead element) • table titles, column headers
– body (tbody element) • primary table data
– foot (tfoot element) • calculation results, footnotes • Above body section in the code, but displays at the bottom in the page
22
Tables Element tr – Defines individual table rows – Element th • Defines a header cell
– Element td • Contains table data elements
23
Creating a basic table Page 1
24
8
Creating a basic table Page 2
25
Creating a basic table Page 3
26
How it Looks
9
Tables You can merge data cells with the rowspan and colspan attributes – The values of these attributes specify the number of rows or columns occupied by the cell – Can be placed inside any data cell or table header cell
28
Complex XHTML table Page 1
29
Complex XHTML table Page 2
30
10
Complex XHTML table Page 3
31
Complex XHTML Table
32
Tables Historically, tables were used for page layout Now we have CSS instead Still used db by some ffor page llayoutt
11
meta Elements One way that search engines catalog pages is by reading the meta element’s contents
34
meta Element Attributes The name attribute identifies the type of meta element
35
meta Element Attributes The content attribute – Of a keywords meta element: provides search engines with a list of words that page, g , which are compared p with describe a p words in search requests – Of a description meta element: provides a three- to four-line description of a site in sentence form, used by search engines to catalog your site. This text is sometimes displayed as part of the search result 36
12
meta Elements Provide Keywords and a Description of a Page
Provides keywords describing the page for a search engine Provides the site’s description in sentence form for a search engine
37
meta
Elements Are Not Displayed
38
Internet & World Wide Web: How to Program by Deitel and Deitel
End of Part 3 of Chapter 4 – XHTML Structural Basics
