Hyper text markup Language Basic HTML Hyper text markup Language
Re-cap Code hygiene Attention to detail!!!!!! Save as HTML Correct alignment of code. makes code easy to understand Makes Debugging easier
Lesson Overview In this lesson, you will learn to: Create Lists Horizontal rule (line) Create a page for a recipe http://commons.wikimedia.org/wiki/Main_Page
Types of Lists Three types of lists which will be covered in this lesson: Unordered lists Ordered lists Definition lists Lists may not look like what you’re used to.
example of unordered lists
Class assignment 9 Unordered Lists
Create a new file it in Web Design, name it after your recipe Create a new file it in Web Design, name it after your recipe. For example,“PeanutButterSandwich.html” Add an HTML, header, title, and body tag to your page Get a list of ingredients for your recipe.
Unordered lists <ul> <li>two slices of bread.</li> <li>jar of peanut butter.</li> <li>jar of jelly.</li> </ul>
Ordered lists <ol> <li>Get a slice of bread.</li> <li>Open a jar of peanut butter.</li> <li>Spread peanut butter</li> <li>Get the second slice of bread.</li> <li>Open a jar of jelly.</li> <li>Spread jelly</li> <li>Put the two slices together</li> <li>Eat the sandwich.</li> </ol>
Ordered HTML Lists - The Type Attribute Ordered list cont… Ordered HTML Lists - The Type Attribute A type attribute can be added to an ordered list, to define the type of the marker: Type Description type="1" The list items will be numbered with numbers (default) type="A" The list items will be numbered with uppercase letters type="a" The list items will be numbered with lowercase letters type="I" The list items will be numbered with uppercase roman numbers type="i" The list items will be numbered with lowercase roman numbers Numbers: <ol type="1"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> Uppercase Letters: <ol type="A"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> Lowercase Letters: <ol type="a"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol>
Class assignment 10 Definition Lists
Definition Lists <dl>….</dl> defines the definition list <dt>….</dt> defines an item in definition list <dd>…</dd> describes the item in the list
Definition List Sample
Class assignment 11 Lists
In your recipe add definitions for the ingredients that your food takes Example:
Class assignment 12 Horizontal Rule
Horizontal rule <h1>Sample header</h1> <hr > Used to create divide space on the page
Horizontal rule Use the horizontal rule to break up the sections in your recipe
Class assignment 13 Adding in Comments
Adding comments to your code <html> <head> <!-– Comments not shown on page--> <title>Tags and Attributes</title> </head> <body> <!–- This section has headers--> <h1>This creates large text</h1> <h6>This is the smallest</h6> </body> </html>
Comments help others and yourself Used to remind you what you were thinking when you wrote that code Helps someone who is reading your code understand what you were thinking
Tell yourself what you learned Use comments to describe the element we learned about today