Find
Great Courses
Create
a Course

This course will become read-only in the near future. Tell us at community.p2pu.org if that is a problem.

Outlining the basic elements of HTML web pages.

This course offers foundational instruction in HTML. Topics include tag structure, file encoding, web browsers, DOCTYPEs, common HTML elements, hyperlinks, images, video, tables, forms, and sections.

Additionally, we will touch base on CSS in order for students to transition to other Webcraft courses.

People

Tasks

External Links

Lists and Links

Learning Objectives

Arrange several items in an unordered list
Arrange several items in an ordered list
Distinguish ordered and unordered lists
Describe similarities between ordered and unordered lists
Create a hyperlink to a section within your document
Link your document to external content
Summarize the purpose of hyperlinks (anchor tags)
Create a diagram depicting two hyperlinked documents
Share your diagram with this study group

Task Materials

Lists

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.

Unordered List

First the grocery list. Creating an unordered list has three steps:

Open the unordered list: <ul>
List items are surrounded by <li> tags
Close the unordered list: </ul>

Lets see an unordered list in its entirety:

<ul>
  <li>Asparigus</li>
  <li>Milk</li>
  <li>Tempeh</li>
</ul>

Ordered List

Secondly, we will list the checkout steps.

Open the ordered list: <ol>
Insert the steps as list items: <li>Item</li>
Close the ordered list tag: </ol>

<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

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".

Task Discussion

aussiend98 Jan. 24, 2013, 7:16 p.m.

my example:

https://etherpad.mozilla.org/TestPage
Gerardo Muñoz Asca Jan. 20, 2013, 8:56 p.m.

My example:

https://thimble.webmaker.org/p/fkwg

Traducción al español:

http://p2p4-html5yuichi.blogspot.com/2013/01/listas-y-enlaces.html
Aranike Jan. 15, 2013, 11:47 a.m.

Ready with lists and links.

See: https://thimble.webmaker.org/p/fk4g
Juan Pablo Zafra Jan. 15, 2013, 8:05 a.m.

List and links completed

https://etherpad.mozilla.org/thwg7ZTXT4
EcologicalHumanist Dec. 7, 2012, 7:03 p.m.

I think this has everything: https://thimble.webmaker.org/p/fjrg
ameera0303 Oct. 22, 2012, 2:09 p.m.

Check out my list here: http://htmlpad.org/lists/
Courtney Elizabeth Oct. 21, 2012, 3:51 p.m.

Completed task here: https://etherpad.mozilla.org/Lists
lesabre721 Oct. 16, 2012, 4:42 p.m.

My unordered list, ordered list and hyperlink can be found here: http://htmlpad.org/listsAndLinks/
Joris Pekel Oct. 10, 2012, 4:37 a.m.

All can be found here
RachelRaccuia Oct. 3, 2012, 11:19 p.m.

This section is added at the bottom of my previous code!

<!DOCTYPE html>

<html>

<meta charset="utf-8">

<head>

<title>This is What Happens on the Tab</title>

</head>

<body>

<h1>This is a header </h1> This is just normal text. But if I want to make a paragraph I would do this: <p>And now this is indented.</p>

<h3> This is a small header </h3>

<p>Creativity was never my strong suit.</p>

<h2><p> And now I'm going to make a list of things I like:</p></h2>

<ul>

<li> Traveling. </li>

<li> Kickboxing. </li>

<li> The Celtics. </li>

</ul>

<h2><p> Here is a list of things I need to do, in this particular order:</p></h2>

<ol>

<li> FIND A NEW JOB. </li>

<li> FIND A NEW JOB. </li>

<li> FIND A NEW JOB. </li>

</ol>

<p> In the meantime, I'll continue to fruitlessly search Indeed.com for relevant positions. You can access this website using this hyperlink here: <a href="http://www.indeed.com"> Good luck. </a> </p>

</body>

</html>
marcmars Oct. 2, 2012, 1:12 a.m.

My first web page at : http://htmlpad.org/myfirstwebpage/
Sreeram Boyapati Sept. 23, 2012, 11:40 a.m.

http://htmlpad.org/traveller/
Garrison Snelling Sept. 19, 2012, 10:42 a.m.

<ol>

    <li>Roll Tide</li>

    <li>War Eagle</li>

    <li>Go Dogs</li>

</ol>

<ul>

    <li>Apples</li>

    <li>Bacon</li>

    <li>KRISPY KREME</li>

</ul>
mkII_gti_vr6T Sept. 11, 2012, 11:25 p.m.

Ordered and unorded list
blah
blah

blah
blah

seefoosam Aug. 26, 2012, 2:33 p.m.

Hi,

Task #3

shuniata Aug. 23, 2012, 8:31 a.m.

Here is mine: http://htmlpad.org/WC-ListsandLinks/

manypieces Aug. 19, 2012, 1:57 a.m.

Apparently jsfiddle doesn't let me show lists the right way so it's on thimble

https://thimble.webmaker.org/p/opp

al read Aug. 19, 2012, 1:59 a.m.
In Reply To: manypieces Aug. 19, 2012, 1:57 a.m.

Thanks for your message. I will be out of the office on annual leave until Monday 20th August If your enquiry is urgent, please SMS me on my mobile. Kind regards, Alan Read Head of Learning Technologies Learning Technologies Group Pearson UK +44 (0) 7703 750913 This email was sent by a company owned by Pearson plc, registered office at 80 Strand, London WC2R 0RL. Registered in England and Wales with company number 53723

Danedeer Aug. 17, 2012, 5:43 a.m.

https://thimble.webmaker.org/p/o0g

Thimble didn't like it when I nested an ordered list within an ordered list but there aren't any exclamation marks left now so it must be OK? Is it?

Cheers folks. It's great to have so many folk learning together

al read Aug. 17, 2012, 5:46 a.m.
In Reply To: Danedeer Aug. 17, 2012, 5:43 a.m.

saravanan Aug. 18, 2012, 1:31 a.m.
In Reply To: Danedeer Aug. 17, 2012, 5:43 a.m.

Thimble shows exclamation if you open any tag if you dont close it immediately. It is error correction. It is ok----you opened two <ol> tags and you closed it at the right line.

al read Aug. 18, 2012, 1:33 a.m.
In Reply To: saravanan Aug. 18, 2012, 1:31 a.m.