Embed Size (px)
Citation preview
Lesson 3: Organizing your material
Create a numbered or unordered (bulleted) list
Unordered list tag is <ul> to begin and </ul> to indicate the beginning and ending of your list
A numbered or ordered list needs the tags <ol> and </ol> to indicate the beginning and ending of your
Items in the List
Each item in the list needs a tag <li> and an ending tag at the end of each item </li>
Line tags are nested within the ordered or unordered tags.
Example of code for unordered list
<ul><li>This is item 1.</li><li>This is item 2.</li><li>This is item 3.</li><li>This is item, etc.</li></ul>
This will create a bulleted list.
Creating a numbered list Also called an ordered list Code is <ol> The code for each item in the list is still <li> Example of ordered list code<ol><li>This is item 1.</li><li>This is item 2.</li><li>This is item 3.</li><li>This is item, etc.</li></ol>This list will be numbered (1, 2, 3)
Student action:
Let’s try creating both Begin a new html page entitled Lists. Add the codes for creating a numbered list and a
bulleted list between the body tags.<ul><li>This is item 1.</li><li>This is item 2.</li><li>This is item 3.</li></ul><ol><li>This is item 1.</li><li>This is item 2.</li><li>This is item 3.</li></ol>
Practice – myfirstwebpage.html
Pull up myfirstwebpage.html in notepad
Place your cursor right before the ending body tag.
Add a
Practice – Add to myfirstwebpage.html
Add a paragraph before the ending body code that says:
I can also create lists using numbers and bullets. Here is an example of a list with bullets:
Then add a bulleted list that says: This is my first item on the list. This is my second item on the list. This is my third item on the list. This is my fourth item on the list.
Practice Let’s add an ordered list to your Gettysburg address
page. Create an ordered list of the first five presidents. Here is
the information you should include:
The first five Presidents of the United States, in order, were
George Washington (1789-1797)John Adams (1797-1802)Thomas Jefferson (1801-1809)James Madison (1809-1817)James Monroe (1817-1825)
Let’s Review
You will need to take a short quiz to assess your understanding.
You will need to prepare an “HTML Cheat Sheet” for the code we know so far. The best way to do this is in a table in Microsoft Word.
As you use these codes, they get easier and easier to remember.
Example of study sheet/quiz It’s time to review what we have learned so far. Angled brackets < and > surround HTML tags. The words between the angle brackets are called
elements. There are two kinds of tags: container tags come in sets with a beginning and an end empty tags stand alone All HTML documents should have the primary tags: <html>…</html> HTML file tag <head>…</head> General information tag <title>…</title> Title tag <body>…</body> Body tag Headlines come in six sizes: <h1> being the largest and <h6> being the smallest. To create space between paragraphs use the container paragraph tag: <p>…</p> To create a line break use the empty break tag:
<br> To make a line use the empty horizontal rule tag: <hr> Lists are usually numbered or bulleted. HTML lists are nested with the listed item tag nested within the
ordered or unordered container tag:
<ol>…</ol> Ordered list tag <ul>…</ul> Unordered list tag <li>…</li> Listed items tag
