Portfolio Tutorial | Basics of HTML

What you will learn:

How to use elements called "tags"
How to use the "head" tag
How to add a title to your document
A little about whitespace
How to create lists
How to add an image
How to create a link

HTML

HTML can be called "the language of the internet". It is what is called a "markup" programming language. HTML stands for "Hyper Text Markup Language".

Elements

The elements that make up HTML are really very simple. Let's start with the syntax (what it looks like). It looks like this: <body>. This is called an opening tag. For a closing tag, simply add a backslash just before the descriptor, just like this: </body>. Nearly every element needs an opening and closing tag (the ones that don't, we'll get to later). Lets recreate the basic HTML page that we made in "The Text Editor" section of the first chapter, and then I will explain the various elements—the tags:

Ok, again, this is the simplest form of webpage that you can have. It contains all of the most important elements: 1) An <html> tag telling the browser that this is the beginning of an HTML document. 2) And a <body> tag indicating where the content will go; it is inside this tag that we put everything that we want the user to see. See it! video

"So what else is there," you might ask? Well, what if we add a paragraph to our document. It would look like this: <p>Confucius say: He who stands on toilet, is high on pot.</p>. Here, we can see that the tag for a paragraph is a "p"—for paragraph. Makes sense, doesn't it?

Go ahead and open the document my-first-webpage.html that you created in the Beginning chapter, and add a paragraph. It could say something like, "Say hello to my little friend!" Once, you have done this, continue typing—anything you like—so that it carries to the next line.

Now, if you were to copy this paragraph and paste another one underneath it, you would see how paragraphs work: the sentence/s within a paragraph have only a small space between them vertically, whereas there is an extra amount of space between any two paragraphs. What you are reading right now is a paragraph. And you can tell when another paragraph begins because there is extra space. Also note that there is no indentation for the first line of a paragraph. See it! video

Let's try another tag. How about the "bold" tag? What do you think this would be? You guessed it: <b> for "bold". Try it on one of your words. In your code, it should look something like: <b>World</b>

Italics works the same way: <i>Here is an italicized sentence.</i> See it! video

Another one we can do is the "heading" tag. There are actually six of these, each starting with an "h" as follows:

Each one from "h1" down starts big, and shrinks as you go down the list. So h1 is larger than h2, and h2 is larger than h3, and so on. The chapter sub-headings, and then section headings, of this tutorial would be an example of this. Try it out in your own document, if you like. An example would be: <h1>I'm a Heading!</h1>
<h2>And I'm a smaller Heading!</h2>

The Head Tag

One unique tag that we can use is called the "head" tag. It looks like this: <head>. The head tag is not like the paragraph tag or the heading tag. It is used to store special information that doesn't necessarilly need to be seen by the user, but is to be read by the browser or a search engine. Ever wonder how a webpage knows what info to give google in the description of a search result? It all happens within this element. Now, this can get really complicated really fast, so we won't go any farther into that. Instead, let's play some more with our my-first-webpage.html document.

Go ahead and add a heading to your first paragraph, right above it. Use any number heading tag that you like, up to six. No problem, you say? Now how about adding a head tag? Go ahead and add that. Ok, good. Within the head tag, we can now give our document a "title". The tag for a title is simple enough. It goes: <title>My Super Duper Cool Title</title> Here is an example of all of this put together, to help you:

Once you have your document completed, save it and test it. When you save it, make sure it stays saved with the extension .html at the end.

With your document opened in a web browser, hopefully everything worked out just fine, and you see what you would expect to see. If you don't, double-check that you have all of your tags opened and closed correctly and that your placement, in order of each element is correct; like the opening html tag first, then the opening head tag, the title—both opened and closed, the closing head tag, and then the opening body tag, and etc. (Note: You can view this example, if you need to.)

With your document working properly, you can look up at the very top of your browser window, above the actual view of the webpage, and you will see something: your "title". In fact, if you look up at the top of this very tutorial that you're reading, you should see the title Portfolio Tutorial | Basics of HTML. That's one of the many cool things that the "head" tag can do. Pretty neat, aye?

Whitespace

This may be a good time to point out that "whitespace," or space between tags does not matter in HTML. Whitespace can include returns, tabs and extra spaces. To better illustrate this, let's take the HMTL document that you just created, copy a paragraph in it, and then paste it underneath the first one. Now, let's fiddle with them a bit.

First place the cursor at the beginning of the first paragraph, just before the <p> tag. Now hit your tab key several times. Then, put your cursor at the end of the first paragraph, right after the </p> tag and hit enter several times. Now save your document, and open it in a browser. Notice how it still looks the same in your browser; there is no additional space added "visually," but we know it's there in the code. As you work with HTML more, you will gain a better feel for how this principle works. (Note: you don't need to save the whitespace changes that we just made to your document.) See it! video

With this behavior of HTML in mind, we can use it to "improve" the readability of our code. For example, most programmers, will use tabs to group their opening and closing tags vertically. This is because when the code is scanned vertically, an opening tag and it's closing tag counterpart will line right up. View the example below:

If you notice from the example, it is now easier to see what is contained within what—for example, what's contained within the head tag, what's contained within the body and so on. This is just another tool you can use to help your process along. It does nothing to your final result, but when going back and viewing the code, you can see where your opening and closing tags should line up. Doing this has helped me find missing closing tags in my own HTML.

A Small Note:

Before we go on to lists, I would like to say a little more about the bold tag. Technically, it is better to use the <strong> tag for bold and the <em>, rather than the <i> tag, for italics. I started off with b and i, so that it would be easier for you to make the association and understand how logical HTML tagging really is. You can still use <b> and <i> if you wish, but I wanted you to be aware that it is considered more "appropriate" to use <strong> and <em> for reasons that go beyond this tutorial.

On to Lists!

There are actually three types of lists: Ordered, unorderd and definition. The ordered list contains numbers—in order—and begins with this tag: <ol>, for "ordered list". Next on the, eh hem, "list" is the unordered list which creates a bulleted list. That's the one that I use above for the "What You Will Learn" summary. It begins with the <ul> tag for, you guessed it, "unordered list". Then every item in a list, gets contained within it's own opening and closing li tag, like so: <li>here is a list item</li>. The whole convoluted mess looks like this:

And renders like this:

Plug in amp
Crank volume way up
Hold your "rock" stance
Wait for it . . .
. . . wait for it . . .
Rock Out!

Milk
Eggs
bread
cheese
uranium
hazmat suit

Note: Notice how I used an empty paragraph to create space between the two lists.

Now, onto definition lists; these are a little trickier. Definition lists have three components: 1) it starts with a "dl" tag; 2) has a definition term, or "dt"; 3) and then has a definition description, or "dd". Below is an example:

HTML: Language used to create Web pages. A Web client interprets HTML and displays documents and graphics accordingly.

And the code for this example is:

See it! video

Man, we're cruisin'. So, are you ready for the big stuff? Let's go ahead and throw in some images and links.

Images and Links

Congratulations. You've done a great job so far. And as a reward, I'm gonna teach you how to add images and links to your webpage. We'll start with an image:

You Oughta be in Pictures

Pictures are fun to do. There is more to an image tag then, say, a paragraph tag, but the principles are pretty straight-forward. First of all, an image tag is called an "image source". The tag name shortens to "img src". So an image tag is actually "<img src>". That's the first part. The second part is telling the browser where to find the image file. We use what's called a file path. It could go something like this:

users/Bigfoot/pictures/sneakup.jpg

So, here we have an image called "sneakup.jpg," found in the "pictures" folder, in a user's folder named "Bigfoot"(P.S. On your own computer, your name would be here, instead of "Bigfoot"). Well, what does it all mean? It means that the file path, from hard drive to file is laid out right before your very eyes. It's the same as saying, "First, go to the home folder in the finder; open the pictures folder; and, look for the file called 'sneakup.jpg'". It's really pretty cool. Now, if a file is contained in the same general location as the file doing the calling, then the path shortens to whatever pertinent info is needed in the file path. Lost ya? Try this: images/sneakup.jpg.

Now, what did I just call? Look below and you will see:

Instead of calling up the entire file path, I simply used the pertinent information. If you go to the images folder of this tutorial folder, you will find that very path. The path I used is "images/sneakup.jpg". Because this file and the image file are contained in the same root folder, even with the shortened path, the browser knows where to grab the file. Now, if this html file that you're currently reading were in another file, say, the documents folder, and the image were in the pictures folder, a folder outside of the documents folder, then this path "shorthand" would not work. One more thing: on a site, you can also step "back" to the root folder, from anywhere by placing a "slash" in front of the path, like so: /images/sneakup.jpg.

To add this information to the image source, place an equals sign right after the tag name, like so: <img src=>. We are now telling the image source what it is equal to: a path to the file. From there, contain the entire path inside quotations, so that it looks like this: <img src="images/sneakup.jpg">.

Another attribute that we can add to the image tag is the "alt" attribute. The alt attribute give the image a description should the image not load correctly in someone's browser. When this occurs, the description text shows up in its place. This is also used in some handheld devices, where images are disabled. The alt attribute works just like the "img src" tag, in that you use an equals sign after the attribute name to start off the text, and then contain all of the text to be seen inside quotations.

A third attribute you can use is the "title" attribute. This gives your image a popup message whenever someone rests their cursor on it for a few seconds. Try it with the image below:

When you rested your cursor on the image above, the message "bad idea!" should have popped up. The title attribute is a good one to use for adding additional instructions to an action or link.

The final attributes are the "dimension" attributes, or "width" and "height". They work the same way, each one being handled individually, like so: <width="50" height="100"> With these particular attributes, there is no need to stipulate that the measurement is in pixels; it is assumed. (Later, when you learn CSS, however, it will be necessary to specify the measurement being used.) One thing to note, is that if the dimensions of the image are different than the measurements given within the image tag, then the image itself will be morphed, or "stretched". For example, the image that we used above measures, 300 pixels by 252 pixels, but what happens if we change that to 100 x 400? Refer to the image below:

We can see clearly the distortion that this can create. One thing that you can do when just needing to "shrink" an image is to only give it one dimension or the other, either "height" or "width". Then any auto-resizing is left up to the browser. Bear in mind, though, that this is considered "sloppy code" for two reasons:

Some browsers may not support this behavior.
Though the image is smaller, the file size remains the same as the large version, so it may take longer for the page to load than is necessary.

The best policy is to always prepare any different sized image in a program, such as Photoshop, as it's own file. Bear this in mind, when you create your thumb gallery later, for your portfolio.

And finally, to close up the image tag, we are going to do something a little bit different. Since everything that we need for an image tag is contained within the first, or opening tag, then we don't technically need a closing tag. Since this is the case, we then close up the image tag within itself, like this:


				<img src="images/polarbear-penguin.jpg" width="100" height="400" alt="Penguin surprises Polar Bear" />

Link it Up!

With images out of the way, let's move on to links.

The link tag is actually called an "anchor" tag—it anchors one page, or area, to another area. Anchor tags act like image tags, in that we use some sort of file "path". The file path is referred to as the "HTML" reference, or "href" for short. A simple example of an anchor tag goes as follows:

<a href="http://www.monkeybyte.net">blog</a>

And the resulting link would be this: blog

One thing that you will notice, is that the href includes the http:// part of a web address. In other words, you need the entire address. But this is only for external links. To link to internal files, you follow the same rule as the "image path," meaning that you only include pertenant information in your path. For example, you are already at the Portfolio Tutorial site, so if I want to make a link to one of the chapters within this tutorial, all I have to do is point you to that particular page, such as basics_of_html.html. If, however, there was a file called "bonus.html" inside a deeper folder called "extras", then the file path would be extras/bonus.html. See it!

In the next chapter, we will cover some more detailed attributes of html, and some special tags.

[Next]

Basics of HTML

Table of Contents