Overview
Let's go!
<html>
Welcome to the Internet!
</html>
Spoiler alert: every web page on the Internet is secretly written in HyperText Markup
Language, otherwise known as "HTML." So why don't you see code and markup everywhere?
Well, your browser reads HTML for you and just shows you the pretty version. It is sheltering
you!
In this course, you will get your hands dirty with the basics of HTML. We will show you
formatting, links, and images so you can make a simple but ugly webpage. If you want to make
it pretty, stick around for the Cascading Style Sheet (CSS) lessons.
HTML has been around for many years but best practices have changed considerably, so if
you're still using <font> and laying out your pages with the table tag, these courses will update
your skills.
Let's start by exploring this tool, so you know how all the buttons work.
Buttons, buttons everywhere
<html>
<p>Why did the programmer chicken cross the road?</p>
<p>Because cross_road() was called from get_other_side().</p>
</html>
Instructions
1. Look at the Results tab to see how the markup in the HTML tab is interpreted. Try
changing the text and see how it changes the resulting web page.
2. What do you think <p> means?
3. When you're done playing around proceed to the next lesson.
Give me some more on HTML
<html>
<p>Someday, I will become a real webpage. With links and everything.</p>
<p>I'm like the Pinocchio of web pages.</p>
<p>Is this thing on...?</p>
</html>
So what are all these letters in "HTML"?
HTML stands for "HyperText Markup Language."
1. HyperText means it's a type of text that supports (hyper) links between pages.
2. Markup means we have taken a document and marked it up with code to tell something
(in this case, a browser) how to interpret the page.
HTML, combined with CSS and JavaScript will make beautiful and interactive web pages.
Instructions
Lines 2-4 each add a new paragraph to the webpage. What HTML does each paragraph start
and end with?
1. Try adding a new paragraph.
2. Try deleting a paragraph.
3. There is no wrong answer for this exercise! Play around and get a feel of HTML.
4. When you're done, proceed to the next lesson.
Ready, Set, Go.
Open It, Close It.
HTML consists of HTML elements which are denoted by angled brackets. These are called tags.
<html> is a tag.
<html> is referred to as a start tag—and if you start something, you need to end it. The end tag
is exactly the same as the start tag with a cute forward slash after the '<'. Consequently, the end
tag for <html> is </html>.
The set of <html> and </html> tags tell the browser where the HTML starts and stops. Every
HTML file must begin and end with the html tags.
Instructions
1. Create your first HTML page! Start by adding in a start <html> tag.
2. Finish it with an end </html> tag.
3. Write some words in between the tags.
4. Save your Code and see your words in any web browser!
HTML Begins at the Head
<html>
<head>
I am in the head!
</html>
We know all HTML documents begin and end with the html tags. What else are in HTML
documents?
HTML documents contain two important parts:
1. head - contains information about the document that is not displayed on the screen
2. body - contains everything else that is displayed as part of the web page.
Consequently, head and body are two different HTML tags. Because we're dealing with more
than one tag at a time, it's important to realize that HTML tags have to be nested. If you
introduce a start tag, you can't close any other tag until you close the last tag you started.
Instructions
1. Our head is missing an end tag! Add an end head tag to properly close it.
Naming Your Document
<html>
<head>
<title>HTML - One O' One</title>
</head>
</html>
Now we need to add information to the head section. We first want to give our document a
name. For that, you use the <title> and </title> tags to set it.
If you look at the HTML code, you will see that the title is already set to "HTML - One O' One",
which is the title of this page.
Whatever you put between the <title> tags will go in the menu bar of the browser window.
Instructions
1. Change the title to whatever you like.
2. Save your Code and open it in any web browser, notice that your title has changed.
3. Note: When we put your HTML in a browser, the title you choose will be at the top of
the browser window!
A Floating Head? No, It Needs a Body!
<html>
<head>
<title>HTML - One O' One</title>
</head>
<body>
<p>The body of your document goes here.</p>
</body>
</html>
The second part of an HTML document is the body. Things in here will be displayed on the
webpage.
By using the <body> and </body> tags, we create a place where we can freely enter elements to
be viewed by the user—the body of the page, if you will.
In the body, we often want to have text and put them in different paragraphs. This is when we
use the <p> tags we saw before. Whenever you want to define a paragraph, just wrap <p> and
</p> around it. This must be within the body section or else we won't see it!
Instructions
1. Add another paragraph to the document.
2. Remember to close every tag that you open.
3. Study the structure of the HTML document and note where the html, head and body tags
are placed.
Headings!
What Are Headings?
<html>
<head>
<title>HTML - One O' One</title>
</head>
<body>
Most Important
Very Important
Important
Less Important
Still Less Important
Least Important
</body>
</html>
Headings are a way to order the content in the body in relative importance:
Most Important
Very Important
Important
Less Important
... and so on.
You do this by using the heading tags.
Let's start with the <h1> tag which marks something as most important. For example, <h1>Most
Important</h1>
Instructions
1. Make the words 'Most Important' as more important than the other words in the body
by using the h1 tag.
How Do I Define Headings?
<html>
<head>
<title>HTML - One O' One</title>
</head>
<body>
<h1>Most Important</h1>
Very Important
Important
Less Important
Still Less Important
Least Important
</body>
</html>
With tags! You use the h1 to h6 tags to define them.
h1 is the "most important," and then these tags denote gradually less "important" headings
until you reach the h6. Run it and see the difference in the results tab.
Instructions
1. Let's mark two more items. Mark the "Very Important" item with a h2 tag.
2. Then mark the "Important" item with a h3 tag.
Conclusion
<html>
<head>
<title>HTML - One O' One</title>
</head>
<body>
</body>
</html>
As you may have guessed, headings can be used in things such as blogs and articles to
distinguish between titles and paragraphs. And that's why they play a large role in HTML.
Instructions
1. Write at least one heading between the body tags. It'd be great if you wrote many!
Notice how different they look in your web browser.
Hyperlinks
Hyperlink? Say What?
<html>
<head>
<title>HTML - One O' One</title>
</head>
<body>
</body>
</html>
In this section, we're going to discuss hyperlinks (what we normally refer to as links). Links are
text that, when clicked, redirect you to another page.
The tag for hyperlinks is really simple and short: <a>. But heads up! We need these tags, and
some other stuff, to make the link actually work.
Instructions
1. Add an a tag (opening and closing) to the HTML body and put a link between these tags.
Save your Code.
2. What do you see? Your link is just like regular text! What gives?! Continue on to learn
more!
Attributes
<html>
<head>
<title>HTML - One O' One</title>
</head>
<body>
<a href="http://www.google.com.ph">Click here to go to Google</a>
</body>
</html>
We want the link to actually work! To do so, we need to use attributes. Think of attributes as
extra information we give to tags. Attributes always go in start tags. Attributes are followed by
an equals sign then an attribute value in quotes (i.e., " ").
Say we want the link to go to Google's home page. We will use the href attribute to define the
page that the user will go to when they click the link. See line 8 for how this is done.
But we don’t want to see the words "www.google.com.ph"! So put the text that you wish to
appear (the underlined text that you can click) between the start and ending a tags.
Instructions
1. Notice that you have an opening a tag (with a href attribute and a link). Then some
words you wish to see that is clickable. Then the closing a tag.
2. Open it in your web browser to see what it all looks like.
3. Add another link to the page. It can link to any page. You must use http:// and put the
URL in quotes or the link won't work.
4. Click on your link and test if it works. (You may need to open it in a new window or tab)
Describing a Link
<html>
<head>
<title>HTML - One O' One</title>
</head>
<body>
<a href="http://www.google.com.ph" title="This will send you to Google!">Go to
Google.com.ph</a>
</body>
</html>
Let's say you want to describe a link so people know where the link is taking them to. To see it
in action, place your cursor over this link and wait for 2 seconds (don't actually click it!). You
should see a small description come up.
To accomplish this we use the title attribute for the a tag.
Instructions
1. Add your own hyperlink that both links to a new page and has a description.
2. Click on the link you created in your web browser.
Images
Images and Attributes and Tags, Oh My!
<html>
<head>
<title>HTML - One O' One</title>
</head>
<body>
</body>
</html>
You’ve added words and links to your page. HTML also allows you to add images! It's fairly
simple too! Ready to learn?
First of all, let's meet the image tag. It's quite simple really, and short! The image tag is <img>
(which stands for image).
Like paragraphs and links, it also goes in the body section.
Instructions
1. Add an image tag to the body. Closing image tag is optional depending on the document
type definition (DTD).
The First Attribute
<html>
<head>
<title>HTML - One O' One</title>
</head>
<body>
<img src="http://www.mt-soft.com.ar/wordpress/wp-content/uploads/2007/07/html-logo.jpg">
</body>
</html>
Second of all, we are going to introduce the most important attribute for the image tag, which
sets the location of the image that we are going to show.
For that, we use the src attribute, which stands for "source" and tells the browser the URL of the
image so it knows where to look.
Instructions
1. Open it in the web browser to see what this img tag does!
2. Try changing the src attribute to another image address. Such as this one
"http://placekitten.com/g/300/300"
Height and Width
<html>
<head>
<title>HTML - One O' One</title>
</head>
<body>
<img src="http://www.mt-soft.com.ar/wordpress/wp-content/uploads/2007/07/html-logo.jpg"
width="100">
</body>
</html>
Third of all, HTML gives you the flexibility to manipulate your image and change its width and
height!
For that, we use the height and width attributes (creative, no?). Let's say we want it to have a
width of 100px and a height of 50px.
Note: Another (better) way to set the dimensions of an image is through CSS, but you'll learn
that method in time!
Instructions
1. We have already set the width of the image in the HTML. Your mission: make the height
of the image 50px.
End Tag?
<html>
<head>
<title>HTML - One O' One</title>
</head>
<body>
<img src="http://www.mt-soft.com.ar/wordpress/wp-content/uploads/2007/07/html-logo.jpg">
</body>
</html>
Finally, you should have noticed that I did not include an ending tag for the image tag.
The image tag is different from other tags such as the hyperlink tag. The hyperlink tag has a
start and ending tag because it needs to contain text between its tags.
The image tag, however, does not need to contain text in the same way. But we still need to
"close" it, so we add a slash to close it. It looks like this:
<img src="some image" width="number" />
Make sure you include a space between the last attribute and the / but no spaces between /
and >. Note that the slash is inside the <img> tag—there is NO separate closing tag.
Instructions
1. Add the forward slash to properly close the img tag.
Clickable Images
The Intro
<html>
<head>
<title>HTML - One O' One</title>
</head>
<body>
</body>
</html>
Now, let's combine images and links.
In this section, we will learn how we can make an image a clickable hyperlink that can redirect
to another website.
We're going to use Google for this example.
Instructions
1. Add an image tag to the body of the document. Don't worry about an image source,
width, or height.
2. Then Save your code.
Adding the Image
<html>
<head>
<title>HTML One O' One - Bonus Section</title>
</head>
<body>
<img />
</body>
</html>
Before making it a link, we first have to actually add the image, don't we?
As you have learned before, we need to set the src attribute of the img tag, and a fixed width and
height would be nice as well.
Instructions
1. Set the src attribute of the given img tag to this image URL.
2. Give the image a width of 400px and height of 200px.
Making It a Link
<html>
<head>
<title>HTML One O' One - Bonus Section</title>
</head>
<body>
<img src="http://cdn.codecademy.com/assets/courses/cnn.gif" height="82" width="119" />
</body>
</html>
Time to make the image an actual link.
It's fairly simple too! Remember how surrounding text with an <a> tag turned it into a link?
What do you think will happen if we surround an <img /> tag with <a> tags?
Instructions
1. Surround the supplied <img /> tag with <a> and </a>.
2. Give your <a> tag a href attribute that has a value of "http://cnn.com". Remember, href
goes inside the opening a tag.
3. When your markup is correct, try clicking on the image and see what happens!
What Are My Next Steps?
What can you do now?
1. Write an HTML document.
2. This document can be read by a browser like Firefox or IE and look like a real webpage.
3. This webpage will have:
o a title in the head
o a body filled with paragraphs of text, images and links
What can I look forward to?
1. Make this webpage look pretty—need to learn some CSS
2. Make this webpage interactive and have animation—need to use some JavaScript
3. Have your website viewable by the whole world—need to upload your file to a server
