1 / 16

HTML Lesson 5

HTML Lesson 5. H yper T ext M arkup L anguage. 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.

iolana
Download Presentation

HTML Lesson 5

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTML Lesson 5 Hyper Text Markup Language

  2. 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…

  3. 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…

  4. 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.

  5. HTML Lists • HTML supports ordered, unordered and definition lists.

  6. 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>

  7. 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.

  8. <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>

  9. Disc bullets list: • Apples • Bananas • Lemons • Oranges Circle bullets list: • Apples • Bananas • Lemons • Oranges Square bullets list: • Apples • Bananas • Lemons • Oranges

  10. 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>

  11. 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.

  12. <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>

  13. Numbered list: • Apples • Bananas • Lemons • Oranges Letters list: • Apples • Bananas • Lemons • Oranges Lowercase letters list: • Apples • Bananas • Lemons • Oranges Roman numbers list: • Apples • Bananas • Lemons • Oranges Lowercase Roman numbers list: • Apples • Bananas • Lemons • Oranges

  14. 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>

  15. 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.

  16. 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.

More Related