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

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



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.

Documents

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