1 / 9

Chapter 2 Horizontal Rules & Lists

Chapter 2 Horizontal Rules & Lists. Dreamweaver for College & Business. Adding Horizontal Rules. <hr> This tag places a horizontal rule or line across the width of the page (browser window) Does not need to be paired It can have an “ attribute ”

mitchellcheryl
Download Presentation

Chapter 2 Horizontal Rules & Lists

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. Chapter 2Horizontal Rules & Lists Dreamweaver forCollege & Business

  2. Adding Horizontal Rules • <hr> • This tag places a horizontal rule or line across the width of the page (browser window) • Does not need to be paired • It can have an “attribute” • An attribute is placed in the start tag and set to a value that modifies the element <hr width=“50%”> VALUE ATTRIBUTE ELEMENT

  3. Practice Setting Up a Horizontal Rule • Type the following code (refer to your handout) • Add two more horizontal rules that YOU determine the attributes for! <html> <head> <title>Rules</title> </head> <body> <hr> <hr width=400> <center><hr width=250></center> <hr size="4" width="50%" color="blue" align="center"> <hr size=“2” width=77% color=“red”> ADD YOUR OWN HERE </body> </html> Mrs. Wilson

  4. Bulleted and Numbered Lists unordered list ordered list

  5. Bulleted and Numbered Lists • The two tags that you will use for the unordered list are: • <ul> </ul> • <li> </li> • The two tags that you will use for the ordered list are: • <ol> </ol> • <li> </li>

  6. Definition Lists • Created using the DL element, generally consist of a series of term/definition pairs (although definition lists may have other applications). • Thus, when advertising a product, one might use a definition list: Lower cost The new version of this product costs significantly less than the previous one! Easier to use We've changed the product so that it's much easier to use! Safe for kids You can leave your kids alone in a room with this product.

  7. Defined in HTML as: <dl> <dt><strong>Lower cost</strong></dt> <dd>The new version of this product costs significantly less than the previous one!</dd> <dt><strong>Easier to use</strong></dt> <dd>We've changed the product so that it's much easier to use!</dd> <dt><strong>Safe for kids</strong></dt> <dd>You can leave your kids alone in a room with this product and they won't get hurt (not a guarantee).</dd> </dl>

  8. Adding Comments • Comments are used to explain or clarify the HTML to the reader of the HTML document • THEY DO NOT APPEAR IN THE BROWSER WINDOW • Comments start with an angle bracket, followed by an exclamation mark and two hyphens <!--This is my comment-->

  9. Assignment • Open a Notepad document • Begin typing your basic HTML code using the provided handout • Submit this completed assignment—code and typed version—tomorrow.

More Related