HTML Tutorial

[Return to Website Development Tools] [Return to English 303 homepage]

What you'll find here isn't a full tutorial on HTML. There are plenty of those on the web. However, I will go through enough HTML to help you get your website up and running and allow you to post response papers (assuming you're in one of the classes in which I'm dictatorially forcing you to do that sort of thing...).

We'll be looking at 4 topics:

The parts of an HTML page

Modifying text with paragraphs, blockquotes, and headings .

Creating links to other pages and to named anchors.

Adding images.

What
is
HTML?
HTML is simply a "Markup Language," which means that you mark up a text document (either a new one you've created or an old one you have laying around) with things called "tags" that tell a browser how to display them. And a webpage is simply a plain text document that has HTML in it. A browser like Netscape or Internet Explorer is what renders it all into something graphical and (every so often) magical. It's that easy.

Tags
Tags are special keywords that are placed inside '<' and '>' brackets. The following are all tags:

<p>

<title>

<script>

They tell the browser what to do with the text that follows. But in order to tell the browser how long to keep treating what follows as a "p" or a "title" or a "script," we must close the tags. A closing tag looks similar but has a '/' inside it:

</p>

</title>

</script>

So tags always appear in pairs. Always. If you see an opening tag, eventually you'll see a matching closing tag. Always.

Special
Parts
Each HTML page has certain sections that the browser needs to see, but that won't necessarily show up on the webpage. In particular, it needs the following tags (paired eventually, of course, with corresponding closing tags):

<html> (to tell the browser this is an HTML page)

<head> (a section at the top for certain kinds of special instructions, which are often optional)

<title> (the title of the page — this page's is "HTML Tutorial" — look at the top of your browser window)

<body> (where all the stuff that gets displayed is located)

General
Structure
And so the general structure of your basic HTML page looks something like this:

<html>
<head>
<title></title>

</head>
<body>

</body>
</html>

Notice that certain sections are "nested" inside other ones. The title section, for example, is completely self-contained within the head section, and everything is enclosed within the html section. That's because the quality of "being HTML" applies to absolutely everything in the document. All web pages have this same general structure.

But what's with the spacing above? Why do some tags appear on the same line while others have gaps? Ignore it. It's just convention. Go ahead and put your information between the appropriate opening and closing tags — it doesn't matter if they're on the same line, different lines, or separated by 1000 lines. As long as the general pattern remains ordered and intact, you're fine. Want to title your page "Goofi R Us"? Type it between the title tags. Have some text to add to your page? Put it between the body tags. That's it.

Reading
Everyone's
HTML Browsers will let you look at the source HTML for any page you visit. In Internet Explorer, for example, choose "Source" from under the "View" menu, and the HTML source code will open up for you. I look at HTML so often that I've added a special button on my toolbar so that I can see HTML with just one click. If you'd like, check out this barebones HTML page (completely barebones — there's no text on it at all, so you'll have to use your Back button to return) and look at its source. There's nothing on that page that you haven't already seen.

And now,
for something
completely
similar. Ever notice how text is broken up into paragraphs? Yep, I would have guessed. Well, text on a webpage is no different. Text gets broken up into paragraphs all the time. On a webpage, though, a simple tab or a pummeling of the spacebar a few times is not enough to create a paragraph. Just like everything we've seen so far, a paragraph needs tags. And you've probably already guessed that the <p> tag is the one we're looking for. And — surprise! — </p> is the closing paragraph tag. Every paragraph ends with a closing paragraph tag.

But we can add qualities to our paragraphs so that they don't all look the same. We can change their placement on the page, change their color, and a whole host of other options. These options are called "attributes" and they can be specified inside the opening <p> tag.

Attributes
For example, here's how we can move our paragraph over to the right margin, just like a "right justify" click in a word processor would do:

<p align="right">

Notice that no special characters are required in order to identify an attribute. A simple space after the p is all that's needed to tell the browser that the next thing it encounters will be an attribute. The attribute we've used here is align and its value is "right". Notice that values are inserted in double quotes and there are no spaces between the attribute, the equals sign, or the value. You can string together any number of attribute assignments simply by separating them with spaces.

What would <p align="center"> do? Find out.

Blockquotes Ever cite a lengthy passage of Dickens or Wordsworth or some other painfully loquacious author? MLA style dictates that we must indent those passages into special formatting called a "block quote." In HTML, you can achieve the same effect with the <blockquote> tag.

Anything between the opening <blockquote> and the closing </blockquote> will get indented from both the left and right margins (which are usually the window's edges when viewed in a browser). We'll see what it looks like in just a moment.

Headers Sometimes when you're writing, you'd like to place a header at the top of a section. Making some text a little bigger and a little bolder is a great way to call attention to it. Fortunately, HTML has built-in tags for headers, too.

Headers range in size from the largest <h1> to the smallest <h6>. Select any size you'd like. Add any of the paragraph attributes that you'd like. Easy as pie; just remember to close the header tag. Here's a little sampling:

Header Size 1

Header Size 2

Header Size 3

Header Size 4

Header Size 5

Header Size 6

Here's a sample page that includes headers and blockquotes. Look at the source so that you can see how the tags affect the text.

The "HT"
in HTML But what makes HTML so special is the ability to click on some text or on an image and jump to someplace completely different. That's the magic of HyperText — the "HT" in HTML. The notion of hyper-jumping-around wasn't born in the 1990s when Tim Berners-Lee invented the World Wide Web, though. H. G. Wells thought in the 1930s that something like it could be done with microfilm, and Vannevar Bush described the notion of the "memex" in his 1945 article, "As We May Think".

Neither Wells nor Bush were HTML savvy, though, so the sheer simplicity of using plain text to incorporate links into our web pages would perhaps have surprised them — because, as you may have guessed, a link is nothing more than another kind of tag.

URL You probably already know, too, that you can identify where you are in webspace by citing a Uniform Resource Locator — a URL. The University of Alberta's URL, for instance, is www.ualberta.ca. It's a code that tells computers precisely where to go in the vast sea of the world wide web. I won't spend much time on URL's because I'll assume that you already know how they work.

Anchor
Tags But in a shifting sea of swirling, dynamic webspace, we need certain elements that are stable. Just like sea-farin' folks, we call these things anchors, and HTML anchors are used as places we jump to or places we jump from. And (probably no surprise here), the anchor tag looks like this: <a>

The browser needs more information, though, in order to launch us off towards where we want to go. Adding attributes to the anchor tag is the way to do this. In particular, we can add a "hypertext reference" attribute to create a link:

<a href="http://www.ualberta.ca">

Notice the same pattern: an HTML tag (<a> in this case), followed by an attribute (href= in this case), followed by a value in double quotes ("http://www.ualberta.ca" in this case). That's it; you've just created a link.

Remember, though, that opening tags must be balanced by closing tags. The <a> anchor is no different. A closing </a> must follow it. And just like other HTML tags, we can put something useful that our visitor can see in between the opening and closing tags. It might look like this:

<a href="http://www.ualberta.ca">University of Alberta</a>

Want to see what that looks like?

Named
Anchors Sometimes, though, you don't want to jump to someplace completely different. Sometimes you might want your user to jump to someplace else on the same page. This page, in fact, uses this technique. Up at the top of the page, I told you we'd be looking at four different HTML topics, and the list was simply a series of links to take you to the proper spots on this page. In this case, you've been jumping to named anchors — an invisible landmark here on the page. You can't see these anchors when you're viewing the page, but your browser can see them and it uses them to help you jump around.

A named anchor gives a precise name to a position on the page. You as the webpage author get to select the name and as long as you're consistent in how you refer to it, the browser will never get confused. A named anchor looks like this:

<a name="images"></a>

That's the anchor for the next section on this very page, in fact. Notice that the attribute here is name and that the value doesn't look like a URL. That's OK. Here, the value is simply the word "images" (in quotes). And notice that it has its requisite closing tag, and also that there's nothing between the opening and the closing. That's what makes it invisible on the page. If we put text or a graphic between the opening and closing tags, it wouldn't be invisible. But that's OK too.

A link to a named anchor looks quite similar to a regular URL link, except that it uses the special # character to let the browser know it should look for a named anchor. So the link at the top of the page that sends you down to the Images section of this document looks like this:

<a href="#images">Adding images</a>

A Picture
is worth
1K words
Another great quality of the Web and of HTML is the easy incorporation of graphics into your work. You can borrow graphics (as long as you're not violating a copyright), you can use clip art or you can even create your own graphics. I've created many graphics for this website using Adobe Photoshop, and this website includes a little tutorial on graphics. For our purposes here, I'll assume that by hook or by crook, you've managed to get your hands on a graphic — a .gif file or a .jpg file or a .png file.

Graphics are included in a web page with the <img> tag, which is one of the tags that needs no closing counterpart. This makes sense, really, because you can't include other information "in the middle of a graphic" (it's already self-contained), and so there can be no other text or information to form a boundary around. The picture is either there or it isn't. One tag is enough to perform that job.

However, the <img> tag needs an attribute that can tell the browser which graphic goes in this spot and where it's located. That's the source attribute, which looks like this: src=. Predictably, it's followed by a value that appears in double quotes. The tag for the stenciled IMAGES graphic just above is this:

<img src="images/images.gif">

This tag tells the browser to insert a graphic of type .gif which is named images and is located in the folder (or directory) also called images. The "/" tells the browser that the name on the left is the name of a folder and that the name on the right is the name of a file.

Size
matters —
kinda Many <img> tags also tell the browser how big the graphic is, measured in pixels (one pixel is one dot on your monitor). Doing this is a good idea, not just because it seems polite, but because the browser can actually draw the web page faster if it knows how big everything is. In the olden days (the '90s), HTML designers often had to figure out how big a graphic was by counting pixels with a magnifying glass. Nowadays, drag-n-drop editors like Dreamweaver are smart enough to figure this out on their own, and you don't have to worry about it.

In fact, the real tag for the IMAGES graphic above looks like this:

<img src="images/images.gif" width="109" height="26">

How do I know that the image is 109 pixels wide and 26 pixels tall? (I told you. I counted them. Painstakingly. Cautiously. Repeatedly. Urgh.)

Notice that the <img> tag has three attributes: src= and width= and height=. Each attribute has a value that is enclosed in double quotes: "images/images.gif" and "109" and "26". The attribute/value pairs are separated by spaces. Once you become accustomed to this repeated pattern (perhaps you already are), it will be second nature to read and write attributes this way.

Go
Forth and
Be
Fruitful
That's it for the HTML 101 lessons. Hope they helped, and that you learned enough to get those first few pages up and running. There's much more to learn, of course, but you'll pick up those things as you need them. Good luck!

[Return to Top]

What is HTML?	HTML is simply a "Markup Language," which means that you mark up a text document (either a new one you've created or an old one you have laying around) with things called "tags" that tell a browser how to display them. And a webpage is simply a plain text document that has HTML in it. A browser like Netscape or Internet Explorer is what renders it all into something graphical and (every so often) magical. It's that easy.

Tags	Tags are special keywords that are placed inside '<' and '>' brackets. The following are all tags: <p> <title> <script>
	They tell the browser what to do with the text that follows. But in order to tell the browser how long to keep treating what follows as a "p" or a "title" or a "script," we must close the tags. A closing tag looks similar but has a '/' inside it: </p> </title> </script> So tags always appear in pairs. Always. If you see an opening tag, eventually you'll see a matching closing tag. Always.

Special Parts	Each HTML page has certain sections that the browser needs to see, but that won't necessarily show up on the webpage. In particular, it needs the following tags (paired eventually, of course, with corresponding closing tags): <html> (to tell the browser this is an HTML page) <head> (a section at the top for certain kinds of special instructions, which are often optional) <title> (the title of the page — this page's is "HTML Tutorial" — look at the top of your browser window) <body> (where all the stuff that gets displayed is located)

General Structure	And so the general structure of your basic HTML page looks something like this: <html> <head> <title></title> </head> <body> </body> </html> Notice that certain sections are "nested" inside other ones. The title section, for example, is completely self-contained within the head section, and everything is enclosed within the html section. That's because the quality of "being HTML" applies to absolutely everything in the document. All web pages have this same general structure.
	But what's with the spacing above? Why do some tags appear on the same line while others have gaps? Ignore it. It's just convention. Go ahead and put your information between the appropriate opening and closing tags — it doesn't matter if they're on the same line, different lines, or separated by 1000 lines. As long as the general pattern remains ordered and intact, you're fine. Want to title your page "Goofi R Us"? Type it between the title tags. Have some text to add to your page? Put it between the body tags. That's it.

Reading Everyone's HTML	Browsers will let you look at the source HTML for any page you visit. In Internet Explorer, for example, choose "Source" from under the "View" menu, and the HTML source code will open up for you. I look at HTML so often that I've added a special button on my toolbar so that I can see HTML with just one click. If you'd like, check out this barebones HTML page (completely barebones — there's no text on it at all, so you'll have to use your Back button to return) and look at its source. There's nothing on that page that you haven't already seen.

And now, for something completely similar.	Ever notice how text is broken up into paragraphs? Yep, I would have guessed. Well, text on a webpage is no different. Text gets broken up into paragraphs all the time. On a webpage, though, a simple tab or a pummeling of the spacebar a few times is not enough to create a paragraph. Just like everything we've seen so far, a paragraph needs tags. And you've probably already guessed that the <p> tag is the one we're looking for. And — surprise! — </p> is the closing paragraph tag. Every paragraph ends with a closing paragraph tag.
	But we can add qualities to our paragraphs so that they don't all look the same. We can change their placement on the page, change their color, and a whole host of other options. These options are called "attributes" and they can be specified inside the opening <p> tag.

Attributes	For example, here's how we can move our paragraph over to the right margin, just like a "right justify" click in a word processor would do: <p align="right"> Notice that no special characters are required in order to identify an attribute. A simple space after the p is all that's needed to tell the browser that the next thing it encounters will be an attribute. The attribute we've used here is align and its value is "right". Notice that values are inserted in double quotes and there are no spaces between the attribute, the equals sign, or the value. You can string together any number of attribute assignments simply by separating them with spaces.
	What would <p align="center"> do? Find out.

Blockquotes	Ever cite a lengthy passage of Dickens or Wordsworth or some other painfully loquacious author? MLA style dictates that we must indent those passages into special formatting called a "block quote." In HTML, you can achieve the same effect with the <blockquote> tag.
	Anything between the opening <blockquote> and the closing </blockquote> will get indented from both the left and right margins (which are usually the window's edges when viewed in a browser). We'll see what it looks like in just a moment.

Headers	Sometimes when you're writing, you'd like to place a header at the top of a section. Making some text a little bigger and a little bolder is a great way to call attention to it. Fortunately, HTML has built-in tags for headers, too.
	Headers range in size from the largest <h1> to the smallest <h6>. Select any size you'd like. Add any of the paragraph attributes that you'd like. Easy as pie; just remember to close the header tag. Here's a little sampling:
	Header Size 1 Header Size 2 Header Size 3 Header Size 4 Header Size 5 Header Size 6
	Here's a sample page that includes headers and blockquotes. Look at the source so that you can see how the tags affect the text.

The "HT" in HTML	But what makes HTML so special is the ability to click on some text or on an image and jump to someplace completely different. That's the magic of HyperText — the "HT" in HTML. The notion of hyper-jumping-around wasn't born in the 1990s when Tim Berners-Lee invented the World Wide Web, though. H. G. Wells thought in the 1930s that something like it could be done with microfilm, and Vannevar Bush described the notion of the "memex" in his 1945 article, "As We May Think".
	Neither Wells nor Bush were HTML savvy, though, so the sheer simplicity of using plain text to incorporate links into our web pages would perhaps have surprised them — because, as you may have guessed, a link is nothing more than another kind of tag.

URL	You probably already know, too, that you can identify where you are in webspace by citing a Uniform Resource Locator — a URL. The University of Alberta's URL, for instance, is www.ualberta.ca. It's a code that tells computers precisely where to go in the vast sea of the world wide web. I won't spend much time on URL's because I'll assume that you already know how they work.
Anchor Tags	But in a shifting sea of swirling, dynamic webspace, we need certain elements that are stable. Just like sea-farin' folks, we call these things anchors, and HTML anchors are used as places we jump to or places we jump from. And (probably no surprise here), the anchor tag looks like this: <a>
	The browser needs more information, though, in order to launch us off towards where we want to go. Adding attributes to the anchor tag is the way to do this. In particular, we can add a "hypertext reference" attribute to create a link: <a href="http://www.ualberta.ca">
	Notice the same pattern: an HTML tag (<a> in this case), followed by an attribute (href= in this case), followed by a value in double quotes ("http://www.ualberta.ca" in this case). That's it; you've just created a link.
	Remember, though, that opening tags must be balanced by closing tags. The <a> anchor is no different. A closing </a> must follow it. And just like other HTML tags, we can put something useful that our visitor can see in between the opening and closing tags. It might look like this: <a href="http://www.ualberta.ca">University of Alberta</a> Want to see what that looks like?

Named Anchors	Sometimes, though, you don't want to jump to someplace completely different. Sometimes you might want your user to jump to someplace else on the same page. This page, in fact, uses this technique. Up at the top of the page, I told you we'd be looking at four different HTML topics, and the list was simply a series of links to take you to the proper spots on this page. In this case, you've been jumping to named anchors — an invisible landmark here on the page. You can't see these anchors when you're viewing the page, but your browser can see them and it uses them to help you jump around.
	A named anchor gives a precise name to a position on the page. You as the webpage author get to select the name and as long as you're consistent in how you refer to it, the browser will never get confused. A named anchor looks like this: <a name="images"></a> That's the anchor for the next section on this very page, in fact. Notice that the attribute here is name and that the value doesn't look like a URL. That's OK. Here, the value is simply the word "images" (in quotes). And notice that it has its requisite closing tag, and also that there's nothing between the opening and the closing. That's what makes it invisible on the page. If we put text or a graphic between the opening and closing tags, it wouldn't be invisible. But that's OK too.
	A link to a named anchor looks quite similar to a regular URL link, except that it uses the special # character to let the browser know it should look for a named anchor. So the link at the top of the page that sends you down to the Images section of this document looks like this: <a href="#images">Adding images</a>

A Picture is worth 1K words	Another great quality of the Web and of HTML is the easy incorporation of graphics into your work. You can borrow graphics (as long as you're not violating a copyright), you can use clip art or you can even create your own graphics. I've created many graphics for this website using Adobe Photoshop, and this website includes a little tutorial on graphics. For our purposes here, I'll assume that by hook or by crook, you've managed to get your hands on a graphic — a .gif file or a .jpg file or a .png file.
	Graphics are included in a web page with the <img> tag, which is one of the tags that needs no closing counterpart. This makes sense, really, because you can't include other information "in the middle of a graphic" (it's already self-contained), and so there can be no other text or information to form a boundary around. The picture is either there or it isn't. One tag is enough to perform that job.
	However, the <img> tag needs an attribute that can tell the browser which graphic goes in this spot and where it's located. That's the source attribute, which looks like this: src=. Predictably, it's followed by a value that appears in double quotes. The tag for the stenciled IMAGES graphic just above is this: <img src="images/images.gif"> This tag tells the browser to insert a graphic of type .gif which is named images and is located in the folder (or directory) also called images. The "/" tells the browser that the name on the left is the name of a folder and that the name on the right is the name of a file.

Size matters — kinda	Many <img> tags also tell the browser how big the graphic is, measured in pixels (one pixel is one dot on your monitor). Doing this is a good idea, not just because it seems polite, but because the browser can actually draw the web page faster if it knows how big everything is. In the olden days (the '90s), HTML designers often had to figure out how big a graphic was by counting pixels with a magnifying glass. Nowadays, drag-n-drop editors like Dreamweaver are smart enough to figure this out on their own, and you don't have to worry about it.
	In fact, the real tag for the IMAGES graphic above looks like this: <img src="images/images.gif" width="109" height="26"> How do I know that the image is 109 pixels wide and 26 pixels tall? (I told you. I counted them. Painstakingly. Cautiously. Repeatedly. Urgh.)
	Notice that the <img> tag has three attributes: src= and width= and height=. Each attribute has a value that is enclosed in double quotes: "images/images.gif" and "109" and "26". The attribute/value pairs are separated by spaces. Once you become accustomed to this repeated pattern (perhaps you already are), it will be second nature to read and write attributes this way.

Go Forth and Be Fruitful	That's it for the HTML 101 lessons. Hope they helped, and that you learned enough to get those first few pages up and running. There's much more to learn, of course, but you'll pick up those things as you need them. Good luck!