Right off the bat, here's one of the most valuable tips for learning HTML that you'll ever read:

File > Save Page As...

When you see a website that makes you say "I really like that design!" go to File > Save Page As..., and then open up the page in an HTML editor like CoffeeCup HTML Editor. You can learn more by checking out other people's code than any book could teach you. After all, there are seasoned professionals creating these great pages, so why not take a look at what they're doing?

What it all comes down to is understanding that HTML is two things: text and tags. Text is all the words you see. Tags define the way the text and images are presented. For example, if you want the word COFFEE to be in bold, you would put it between the <b> and </b> tags. The end result looks like this:

We drink <b>COFFEE</b> to wake up.

Yeah, it's that simple. In essence, a webpage is a text document. Web browsers like Internet Explorer and Firefox read the text document and format the text as described by the HTML tags it contains.

Tags

A very simple webpage would consist of the following text and tags:

<html>
<body>
This is my webpage!
</body>
</html>

The html tag tells the browser that the document is an HTML page. The body tag tells the browser where the body of the page begins and ends.

Most tags consist of an opening tag and a closing tag. The opening tag consists of <> characters, and the closing tag consists of the </> characters. Here's an example:

There is a <b>cup</b> on my webpage.

The <b> tag tells the browser to start formatting the text in bold. The </b> tag tells the browser to stop formatting text in bold. As a result, the word "cup" is formatted in bold.

Attributes

Attributes are parts of HTML tags that tell the browser additional properties of the tag. Attributes are typically formatted like this: attribute="value", but they occasionally consist of just a single word, like this: noshade.

Attributes are placed after the tag name and are prefixed with a space. For example:

<p align="right">My Paragraph.</p>

The tag name is p, and the attribute is align="right". This tells the browser that the paragraph is to be aligned to the right.

Adding Images

You probably want to include images in your webpage. Since HTML files are text, though, you'll need to link to the location of the image you want to add. You can use one of two different kinds of links: absolute or relative. An absolute link points to the full URL for a file such as an image or webpage, whereas a relative link points to part of the URL and lets the browser fill in the rest. How does the browser know what to fill in? Well, relative links can only be used when linking to files within your Website, so it uses the information you provide in the link to track down the location of the file. Generally, you'll want to use a relative URL when linking to files within your website. You'll always want to use absolute URLs when linking to external sites.

Here's an example:

<img src="myimage.png">

First off, let's identify the HTML tag and the attribute. In this bit of code, img is the HTML tag. It tells the browser that an image should go here. src="myimage.png" is an attribute. It tells the browser where to find the image and what the image is called.

In this example, only the filename is specified. When the browser reads this, it looks for the image in the same directory (folder) as the HTML page containing the code. If the image was in a subfolder of the directory where the HTML page was stored, you would have to specify the folder name, like so:

<img src="myimages/myimage.png">

This tells the browser to look in the myimages folder for the image.

What if your image is stored in a directory above the current directory? You'd precede the filename with two periods and a slash (../), like this:

<img src="../myimage.png">

Links

To link to another webpage, use the anchor tag (<a>) and specify the URL with the href attribute. (In case you're wondering, href stands for hypertext reference.) The code for a link looks like this:

<a href="about.html">Here's a relative link to my About page.</a>

Or, if you're using an absolute link, it would look like this:

<a href="https://www.coffeecup.com">Here's a link to my friend's Webpage.</a>

What if you want to link to a location on the same page? You would first have to specify the location you wish to link to using the anchor tag and the name attribute. For example, if you wanted to link to the top of your page, you could specify the top of the page using this code:

<a name="top">This is the first line in my page.</a>

Here, we've named this section of our page top, but you can choose any name you like. Now, to link to this section of the page, you would specify the anchor name, preceded by the # character in the href attribute, like this:

<a href="#top">Here's a link to the top of my page.</a>

Conclusion

That's all there is to it! Well... okay, so there's still a lot more to learn. But remember the helpful tip we shared at the beginning:

File > Save Page As...

Knowing what you know now, you can probably follow some of the webpages you love the most and maintain a decent grasp of what's going on.

For a more in-depth look into HTML, check out this article: Learn HTML.