1 / 12

More HTML

Learn about the three types of lists in HTML - unordered, ordered, and definition lists, and how to style them using basic CSS.

jamesheath
Télécharger la présentation

More HTML

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. More HTML Lists and Basic CSS

  2. Lists Three Types: • Unordered • Ordered • Definition

  3. Unordered List • 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. • Inside a list item you can put paragraphs, line breaks, images, links, other lists, etc.

  4. You Try It! • Open a Notepad Document and create an html document with the following in an unordered list. Save the document as listTypes.txt and as an htm file in your web pages folder. Some of the most famous snowboarders are: • Shawn White • Danny Kass • JP Walker • Ross Rebagliati

  5. Ordered List • 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. • Inside a list item you can put paragraphs, line breaks, images, links, other lists, etc.

  6. You Try It! Add the following paragraph and ordered list to your notepad document, be sure to test it: Steps for waxing a snowboard: • Clean off the old wax with a citrus wax remover • Heat wax stick with an iron and drip wax over the board. • Smooth wax onto base with iron • Scrape off excess and buff.

  7. Definition List • A definition list is not a list of single items. It is a list of items (terms), with a description of each item (term). • A definition list starts with a <dl> tag (definition list). • Each term starts with a <dt> tag (definition term). • Each description starts with a <dd> tag (definition description).

  8. Code: <dl><dt>Coffee</dt><dd>Black hot drink</dd><dt>Milk</dt><dd>White cold drink</dd> </dl> Browser: Coffee Black hot drink Milk White cold drink Definition List

  9. You Try It Add the following definitions to your notepad document: FakieRiding backwards, meaning the opposite direction than your usual stance. JibTo ride on a non-snow surface, e.g. rails, logs etc. TrannyThe initial curved part of a halfpipe wall between the flat of the bottom and the vertical section of the wall.

  10. Basic CSS • Making your page look good! • Use CSS – Cascading Style Sheets • Check out the following link: http://www.w3schools.com/css/ • Look at the CSS Example and click on the Try it Yourself button.

  11. Stump the Chump #1 • Write the html code for creating an ordered list with Uppercase letters that would produce the following example. Save it in you firsthtml folder as stump1.html • Use http://www.w3schools.com/css/css_list.asp • It should look like this: There are 3 main types of ordered lists: • Numbered list • Upper case and lower case letters list • Upper case and lower case roman numerals list

  12. Stump the Chump #2 • Write the html code for creating an unordered list with bullets that are open circles. Save it in your firsthtml folder as stump2.html • It should look like this: There are 3 main types of bulleted lists: • Disc bullet lists • Circle bullet lists • Square bullet lists

More Related