Mark page headings, paragraphs, block quotes, and addresses
Create unordered and ordered lists
Apply an external style sheet to a Web page
Run a JavaScript program
Mark text-level elements including strong emphasized text
Insert inline images and line breaks
Insert special characters from extended character sets
Overview of Terms
Working with Grouping Elements
You're now ready to begin entering content into the body of Dave's Web page. The first elements you'll add are grouping elements, which are elements that contain content that is viewed as a distinct block within the Web page. Paragraphs, which were presented in the last session, are one example of a grouping element, as are page divisions marked using the div element. Here are some commonly used grouping elements:
Marking Content Headings
The first grouping elements you'll explore are heading elements, which contain the text of main headings on a web page. They're often used for introducing new topics or for dividing the page into topical sections. The syntax to mark a heading element is:
<hn>content</hn>
The "n" stands for an integer 1-6. Content marked with <h1> tags is considered a major heading, and is usually displayed in a large bold text. Content marked with a larger number is used for subheadings, and is usually displayed in progressively smaller bold text.
Marking a Block Quote
You can use a blockquote to mark extended quotes within the HTML page. This uses the syntax:
<blockquote>content</blockquote>
where the content is the text of the quote. Most browsers render block quotes by indenting them to make it easier for readers to separate quoted material from the author's own words.
Marking an Address
Content information such as addresses can be marked using the address element. This uses the syntax:
<address>content<address>
where content is the contact information. Most browsers render addresses in italic.
Marking a List
Ordered Lists
This type of list is used for items that follow some sort of defined sequential order, such as lists ordered from smallest to greatest or oldest to youngest. The beginning of an ordered list is marked by the <ol> tag. Each item within an ordered list is marked using the <li> or list item tag. The structure is therefore:
<ol> <li> item 1 </li> <li> item 2 </li> </ol>
where item1, item2, and so forth are the items in the list.
Unordered Lists
To mark a list in which the items are not expected to occur in any specific order, you create an unordered list. the structure of ordered and unordered lists is the same, except that the list items for an unordered list are nested within the <ul> tags. The structure is therefore:
<ul> <li> item 1 </li> <li> item 2 </li> </ul>
Description Lists (sometimes called data)
A third type of list is the description list, which contains a list of terms each followed by its description. The structure is therefore:
<dl> <dt> term 1 </dt> <dd>description1 </dd> <dd> term 2 </dd> <dd>description2 </dd> </dl>
where term1, term2 etc are the terms in the list and description1, description2 are the descriptions associated with the terms. Note that description ists must follow a specific order with dt(definition term) element followed by one or more dd(definition description) elements.
Applying an External Style Sheet
Style sheets are written in the Cascading Style Sheet (CSS) language. Like HTML files, CSS files are text files and can be created and edited using a simple text editor. A style sheet file has the file extension .css, which distinguishes it from an HTML file.
Linking to an External Style Sheet
To apply an external style sheet to a Web page, you create a link within the document head to the style sheet file using the link element: <link href="file" rel="stylesheet" type="text/css"/>
where file is the filename and location of the styles sheet file. when a browser loads the page, it substitutes the style from the external style sheet file for its own internal style sheet. *Note: Like all other files, the style sheet must be in the same folder as your html to work properly!*