Download presentation
Presentation is loading. Please wait.
1
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
2
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.
3
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.
4
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)
5
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> </ol>
6
Practice – Add to myfirstwebpage.html
Add a paragraph after your lists of items about school that says I can also create lists using numbers and bullets. Here is an example of a list with numbers: Then add a numbered 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.
7
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 ( ) John Adams ( ) Thomas Jefferson ( ) James Madison ( ) James Monroe ( )
8
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.
9
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
Similar presentations
