Lesson 2: Adding more tags to your web page. Paragraphs, lists and links.
Getting Started
In lesson 1, we laid out our first web page. Today, we’re going to add some more HTML tags to give our website more content and structure. After that, we’d add links so you can connect your web page to the entire World Wide Web. As our subject, we’re going to mimic a blog post, detailing some of what you’ve learned, and add some lists of things that tell us more about you. Open up our text editor and we can begin.
Create paragraphs
Let’s layout our main webpage again, as we did in lesson one. If you remember, we will start out with the <html>, <head> and <body> tags. Let’s also set the title to “Day 2: Learning new tags”. Let’s also set an <h1> tag with “Today’s Blog Entry”.
<html>
<head> </head>
<body> </body>
</html>
From here, we’re going to learn a few new tags. One of the most common tags on any website is the paragraph tag, or <p>. Paragraphs are used just like they are when you’re writing an email, an essay, or a blog post. We will add a header to describe our page, and a paragraph just below.
...
<body>
<h1>Today's blog post</h1>
<p>I started my second tutorial today. I'm learning how to make paragraphs to start. Later today, maybe I'll go for a walk, or watch a movie.</p>
</body>
...Once again, we need an opening tag <p>, and a closing tag </p> to let the browser know when our paragraph begins and ends.
Save your work, and let’s run it in the browser. You should see a title in your tab, a header and a paragraph with smaller text that mirrors what you wrote above.
Create lists
Now, that we’ve added some content, let’s use another common web page element, called lists.
There are two kinds of lists. Ordered lists, <ol>, which show a numbered list. Use this when you are listing something in a specific order. That order can be importance, ranking, or even chronological.
Unordered lists, or <ul>, will not show numbers, they will show bullet points. Use this when you are listing something where order doesn’t particularly matter. The example used below is a grocery list.
Inside each of these lists, we’ll have list items, or <li>. Let’s include this under our closing paragraph tag. We’ll also use secondary headers, or <h2> as labels for our lists. I’ve added spaces between HTML sections to make the code more easily readable. Adding spaces like this will not affect how the HTML is rendered in the browser. It’s just meant to make it easier on anyone reading the code.
...
<p>I started my second tutorial today. I'm learning how to make paragraphs to start. Later today, maybe I'll go for a walk, or watch a movie.</p>
<h2>My favorite movies are</h2> <ol>
<li>Toy story</li>
<li>Up!</li>
<li>Transcendence</li>
<ol>
<h2>Grocery list</h2>
<ul>
<li>Milk</li>
<li>Carrots</li>
<li>Avocados</li>
<li>Ice cream</li>
</ul>
...
Notice the indentation. As you have seen before, you can include tags inside of other tags. This is when indentation should be used. The <li> tags are within both <ul> and <ol> so they are indented. Similarly, the <head> and <body> tags are within <html>, so they are indented two spaces themselves.
Open the file in your browser, and you should see that the first list is numbered, and the second list has bullet points.
We have one more task in today’s lesson, and it’s one I really enjoyed learning how to do. Linking your page to the rest of the Internet.
Add links and use our first ‘attribute’
One of my favorite moments when I first learned programming, was adding my first link. It linked my work to the entire Internet, and allowed me to create a page that was a launching pad for anything I wanted to share, anywhere on the Web.
In between our <h2> tags and lists, we will include a link to allow users to find more information. To do this, we will write a paragraph, using <p>, which says “For more great movies, check out IMDB.”. We will make just the letters “IMDB” become a link, using the <a> tag. A stands for anchor, which is old Internet terminology.
For our movie list, let’s add a link to IMDB, so our users can find more great movies.
...
<h2>My favorite movies are</h2>
<p>For more great movies, check out <a href="http://www.imdb.com">IMDB</a></p> <ol>
The first thing you may have noticed, is that within the <a> tag, we have something called ‘href’ and we set it equal to the IMDB web address. Href stands for “Hypertext Reference”, and acts as a reference for another site on the Internet. Also known as a ‘link’.
You can turn any word or set of words into a link using <a href=”link goes here”>Words here</a>. You can embed <a> in a paragraph, as we did above, or in almost any other tag. Including <h2> and <li>. Here, we don’t indent <a>, we just include it in the same line. Remember, these rules are arbitrary, and are considered best practices, but won’t affect how the browser renders the code. Once you’ve seen and created enough HTML, these little rules of thumb will become second nature.
Why don’t we find the link on IMDB for Toy Story, and add it to our list. Go to IMDB, search for Toy Story. When you click on the Toy Story page, just copy and paste the web address and add it inside of an anchor tag to the proper list element. It should look like this.
...
<li><a href="http://www.imdb.com/title/tt0114709/?ref_=nv_sr_3">Toy Story</a></li>
...Our file should now look something like this.
<html>
<head>
<title>Day 2: Learning new tags</title>
</head>
<body>
<h1>Today's Blog Entry</h1> <p>I started my second tutorial today. I'm learning how to make paragraphs to start. Later today, maybe I'll go for a walk, or watch a movie.</p> <h2>My favorite movies are</h2> <p>For more great movies, check out <a href="http://www.imdb.com">IMDB</a></p> <ol>
<li><a href="http://www.imdb.com/title/tt0114709/?ref_=nv_sr_3">Toy Story</a></li>
<li>Up!</li>
<li>Transcendence</li>
</ol> <h2>Grocery list</h2> <ul>
<li>Milk</li>
<li>Carrots</li>
<li>Avocados</li>
<li>Ice cream</li>
</ul> </body>
</html>
Open your HTML file in the browser. If you’re having trouble, don’t be afraid to copy and paste from above. Although looking for code differences is a good skill to have. For now, I’d rather not have you get frustrated. So let’s focus on progress now, finding code differences another day. The important thing for now, is that you learn basic tags and basic structure.
Once you open the file in the browser, you should see a title in the tab, a main header. 2 subheaders, and 2 lists. The links should be functional.
How cool is that? Once we get a little farther, and you start making your own websites online, you can link it to anything, anywhere on the web. This is a powerful ability. I’m sure you’ll do awesome things with it.
Add more links
To end this section, why don’t you try to find the links to the two other movies, and add them. The format will be the same as above. Go to the IMDB website, search for the correct movie, and copy and paste the link into the href attribute. The format is shown below.
<li><a href="LINK">MOVIE</a></li>Feel free to copy and paste this, and just change where it says “LINK” and “MOVIE”.
Once you’ve done it, open the html file in the browser.
Did you get it? Congratulations! You have now connected your document with the largest repository of human knowledge ever created. The sky is the limit on what you can do from here!
Summary
In this lesson, you learned how to make paragraphs, lists and links. You also learned about tag attributes, and how to set them to get your desired functionality. This will come in handy for all sorts of things later on.
Take a moment and congratulate yourself. You’re well on your way to learning how to create full, rich web pages. This will open up whole new ways to communicate with the world around you.
When you’re ready, we can move on to lesson 3. Don’t rush though. Sometimes it’s best to take your time, and make sure all of this new information sinks in. I often went too fast when I was trying to learn programming, and I’d find that all of the information I learned would soon be forgotten if I went too quickly. If you’ve done both lesson 1 and lesson 2 today, be sure to take a break and maybe even wait a day. Let your brain rest, and soak in the new information. Come back next time with a clear mind and we’ll keep moving right along.
See you soon!
