Download presentation
Presentation is loading. Please wait.
1
Hyper text markup Language
Basic HTML Hyper text markup Language
2
Re-cap Code hygiene Attention to detail!!!!!! Save as HTML
Correct alignment of code. makes code easy to understand Makes Debugging easier
3
Lesson Overview In this lesson, you will learn to: Create Lists
Horizontal rule (line) Create a page for a recipe
4
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.
5
example of unordered lists
6
Class assignment 9 Unordered Lists
7
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.
9
Unordered lists <ul> <li>two slices of bread.</li> <li>jar of peanut butter.</li> <li>jar of jelly.</li> </ul>
10
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>
12
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>
13
Class assignment 10 Definition Lists
14
Definition Lists <dl>….</dl> defines the definition list
<dt>….</dt> defines an item in definition list <dd>…</dd> describes the item in the list
15
Definition List Sample
16
Class assignment 11 Lists
17
In your recipe add definitions for the ingredients that your food takes
Example:
18
Class assignment 12 Horizontal Rule
19
Horizontal rule <h1>Sample header</h1> <hr >
Used to create divide space on the page
20
Horizontal rule Use the horizontal rule to break up the sections in your recipe
21
Class assignment 13 Adding in Comments
22
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>
23
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
24
Tell yourself what you learned
Use comments to describe the element we learned about today
Similar presentations
