Post on 03-Jan-2016
HTML Lesson 5
Hyper Text Markup Language
Assignment 4
Create a new HTML page called index.htm and save it in your HTML_Folder
Use the same format which we have used on the last three assignments.
Use this page to introduce yourself as this will be the first page viewers will see. It is referred to as your home page.
Continued…
Assignment 4 Continued…
Add links to each of the other three assignments which we have done
At the end of each of those assignments, add links back to your home page.
On your home page, add three links. District web page Newport High School page Mr. Thompson’s SharePoint Site
Assignment 4 Continued…
Assignment 4 Continued…
For grading purposes, do not print anything out for this assignment until your instructor has check all of your links.
You will only print your home page (index.htm) from your browser after it has been OK’d.
HTML Lists
HTML supports ordered, unordered and definition lists.
Unordered Lists
An unordered list is a list of items. The list items are marked with bullets (typically small black circles).
An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.<ul> <li>Coffee</li> <li>Milk</li> </ul>
Here is how it looks in a browser: Coffee Milk
Inside a list item you can put paragraphs, line breaks, images, links, other lists, etc.
<html><body><h4>Disc bullets list:</h4><ul type="disc"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li></ul> <h4>Circle bullets list:</h4><ul type="circle"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li></ul> <h4>Square bullets list:</h4><ul type="square"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li></ul> </body></html>
Disc bullets list:• Apples • Bananas • Lemons • Oranges Circle bullets list:o Apples o Bananas o Lemons o Oranges Square bullets list: Apples Bananas Lemons Oranges
Ordered Lists
An ordered list is also a list of items. The list items are marked with numbers.
An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.<ol> <li>Coffee</li> <li>Milk</li> </ol>
Here is how it looks in a browser:1. Coffee 2. Milk
Inside a list item you can put paragraphs, line breaks, images, links, other lists, etc.
<html><body><h4>Numbered list:</h4><ol> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li></ol> <h4>Letters list:</h4><ol type="A"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li></ol> <h4>Lowercase letters list:</h4><ol type="a"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li></ol> <h4>Roman numbers list:</h4><ol type="I"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li></ol> <h4>Lowercase Roman numbers list:</h4><ol type="i"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li></ol> </body></html>
Numbered list:1. Apples 2. Bananas 3. Lemons 4. Oranges Letters list:A. Apples B. Bananas C. Lemons D. Oranges Lowercase letters list:a. Apples b. Bananas c. Lemons d. Oranges Roman numbers list:I. Apples II. Bananas III. Lemons IV. Oranges Lowercase Roman numbers list:i. Apples ii. Bananas iii. Lemons iv. Oranges
Definition Lists A definition list is not a list of items. This is
a list of terms and explanation of the terms. A definition list starts with the <dl> tag.
Each definition-list term starts with the <dt> tag. Each definition-list definition starts with the <dd> tag.<dl> <dt>Coffee</dt> <dd>Black hot drink</dd> <dt>Milk</dt> <dd>White cold drink</dd> </dl>
Here is how it looks in a browser:Coffee
Black hot drink
Milk White cold drink
Inside a definition-list definition (the <dd> tag) you can put paragraphs, line breaks, images, links, other lists, etc.
Assignment 5
Using your index.htm file from Assignment 4, convert your three assignments into an unordered list using square bullets.
Convert the three external links to an ordered list using Roman numbers.