Click Here for Lists and Links Homework Assignment
I am working at this, let me know if it looks right to you!
This course will become read-only in the near future. Tell us at community.p2pu.org if that is a problem.
Lets take a look at ways to itemize lists, link to other documents, and insert multimedia into our pages.
Lists come in two flavors ordered and unordered. Ordered lists flow in sequence while unordered lists have no required, or meaningful, order. For example, a shopping list may be considered as an unordered list as you are not concerened with the order in which you find the items in the store.
The <ol> tag is used to create ordered lists, while the <ul> tag denotes unordered lists.
Lets create two lists one will be a grocery list and the other wil be instructions describing how to check out at the market.
First the grocery list. Creating an unordered list has three steps:
Lets see an unordered list in its entirety:
<ul> <li>Asparigus</li> <li>Milk</li> <li>Tempeh</li> </ul>
Secondly, we will list the checkout steps.
<ol> <li>Unload your shopping basket</li> <li>Greet the cashier</li> <li>Smile at the cute baby next to you in line</li> <li>Pay the cashier</li> <li>Gather your groceries and leave</li> </ol>
Hyperlinks are interconnections between pages and resources on the World Wide Web. Creating hyperlinks requires another aspect of HTML tags called attributes. Attributes are descriptive text elements within the HTML tag enclosures (the < & >). Attributes are associated with values. For example:
<tag attribute="value">
The anchor tag <a> is how we create links both within a document and to external resources. An anchor tag has an attribute called 'href' which stands for hypertext reference. The hypertext reference is the internal or external element to which the link points. For example:
<a href="http://mozilla.org">Mozilla Website</a>
This link points to mozilla.org with the helpful link text "Mozilla Website".
I am working at this, let me know if it looks right to you!
Nice one !!! Now you must try nested lists. Use this code
<h2>My Hobbies</h2>
<ol type='A'>
<li>Sports
<ul type="square">
<li>Tennis
<li>Football
<li>Cricket
</ul>
<li> Music
<ul>
<li>Rock
<li>Classical
<li>Country Music
</ul>
<li> Books
<ul>
<li>Fiction
<li>Thrillers
<li>Comics
</ul>
</ol>
You can nest more ..as you like
Thanks Joe ! I have edited and tested the code after making changes . the url is
http://pad.p2pu.org/p/htmllists
Very good! I ran it in jsfiddle, I had to uncheck the "normalized css" box to see it runwith color, but I don't know why. Can I see it run on the pad you used? I don't know how to run on that. There is a new short course for jsfiddle here that has a badge I think, go for it you can do it in 10 minutes! I click on the chain globe (bottom left above, blue/gray) to paste in a link, thanks!
http://p2pu.org/en/groups/first-challenge-3/
http://jsfiddle.net/hZa5U/1/
Where is the closing tag </li> ?
I have seen countless tutorials out there that are available to teach new developers how to code HTML and they almost always leave their tags open such as image tags or break tags. This not only affects the new generation of developers, but it is a terrible practice. Browsers will always attempt to close them for you causing errors and unwanted results, so save yourself from bad practices, and make closing the HTML tags a habit as you do with closing your doors when you leave your home.
Here is my list assignment - http://gregjoss.com/assignment_2.html
Este es el mío., Lists and links
http://htmlpad.org/Beticos/
Carlos Fernandez
Triana
Este es el mío., Lists and links
http://htmlpad.org/Beticos/
Carlos Fernandez
Triana
I just finished the task #3, Lists and Links. See here!
My latest and greatest........
JRB
You can find my work using lists and links at http://htmlpad.org/pannekeet/. It is in Dutch so let me know if you need translation!
I'm re-posting my Lists and Links assignment in a different spot so that you can pull up the sourcecode. Hope this works!
Excellant! Look at other peoples work also after you do yours.
thanks just noticed i forgot the external link though. duh!!! :)
Here is the results of my first assignment
Looks good!
I think I have it better. I didn't do the hgroup tags like in Dan's but I got the !DOCTYPE and other things. Thanks!
Here's my assignment for the lists and links assignment
You can find my work at
Here is my lists and hyperlink assignment
Here is my brand new assignment: http://htmlpad.org/Lists-and-links/
Please, could anyone tell me where is the assignment for this task? Thanks.
You will make two grocery lists. The assignments are in the reading, if you use the links to the side, they get moved around and may not be in order. May be better to hit the HTML5 logo on the left top, than the tasks appear in a numbered order at the top of the page. This is task 5.
I put the assignment on htmlpad: http://htmlpad.org/ordered-unorded-list/
You mis-used the <header> tag in your example. When there is only one <h> tag within the <header> tag, the <header> tag is not necessary. The <header> tag is not meant to be used in that way.
Also, whenever you use more than one <h> tag one after another, as you have done with <h2> and <h3>, you need to wrap them in the <hgroup> tag. This is to mask the <h3> element from the HTML5 outline algorithm.
Both <header> and <hgroup> are new features of HTML5.
bit late, but here it is anyway!
http://dl.dropbox.com/u/25152284/Shopping%20List.html
didnt work for me in chrome
Broken link