A crash course in HTML

HTML (Hypertext Markup Language) is a series of elements that define the structure of a web page.

In this lesson, we will ignore HTML5 for the time being, since this will be a simple introduction to the world of HTML. If you would like to learn about the new features of HTML5 after this article, check out w3schools’ course, or follow my upcoming postings.

An element, sometimes referenced as a tag, is a small piece of code that wraps around text, or other elements, and defines how they function on a web page. An example of this is the <a> tag. The purpose of this tag is to create links to other pages. Without CSS styling, these links show as the standard, underlined, blue text.

There is a large series of HTML tags, and even more so with the advancement of HTML5. However, from my experience, I’ve only ever used a dozen or two of these tags, so don’t fret about remembering all of them. Here’s a list of HTML tags that we will be using:

<div>...</div>
<p>...</p>
<a>...</a>
<ul>...</ul>
<li>...</li>

As you can see, this is not a long list of elements. If you would like to view a full list of elements, check out this page from w3schools’.

Now that we have seen some basic HTML tags, let’s explain them a little bit, along with other general concepts in terms of crafting an HTML sheet. Web pages should be thought as a series of boxes stacked together.

Web page broken into separate boxes.

As you can see above, I have broken a small piece of a web page into several boxes, outlining different items that make up a web page. A good way to manage and separate these boxes is with the <div> tag. Inside of these <div> tags, lies a multitude of <p> and <a> tags that host plain text and links to other web pages, respectively. The navigation links towards the top of the image, e.g. newest, frequent, votes, etc., could be written as a list — which uses the <ul> tag to wrap around the list, much like how <div> tags wrap around other elements, and a <li> tag to dignify the list elements.

Now that we have learned about basic HTML tags, and how they collaborate with each other, let’s write our first HTML sheet!

In a text editor of choice, create a file named `index.html`. For our sake, it does not matter much what you name the file, as long as it ends with the .html file extension.

On the first line of the file, it is extremely important that one declares the document type.

<!DOCTYPE html>

This must be done in order to let a web browser know what version of HTML the page is written in. The declaration above is used for HTML 5 documents, but it can be used for our example as well.

Next, you must include the <html> tag, and wrap that around the chunk of your code, like so:

<!DOCTYPE html>
<html>
</html>

As you can see, nearly all elements have opening and closing tags. This is because elements are generally nested, or rather, they wrap around one another.

<!DOCTYPE html>
<html>
<head></head>
<body></body>
</html>

HTML sheets are broken into a couple parts. The head contains information about the document, namely its character sets, title of the page, links to CSS style sheets, author accreditation, and more. The body contains the rest of our web page, including a majority of our elements.

We now have a HTML sheet, but it still doesn’t do anything. Let’s have it read out “Hello World!” for us.

<!DOCTYPE html>
<html>
<head></head>
<body>
<div>
<p>Hello World!</p>
</div>
</body>
</html>

As you can see above, we added a <div> element to wrap around our text, which is the standard practice, and a <p> element nested inside to display our text. It is not 100% necessary to include the paragraph tag to display text, simply writing “Hello World!” in between your <div> tags will show the message as well. However, if you want to specify styling for the text, and not the container around it, you should use the <p> tag.

Navigate to the folder in which you have saved this file, double click it, and it will open to your default web browser. You should be seeing something like this:

Your first web page!

You may notice the address is the local route to your HTML file; obviously this is not live on the web.

Let’s finish up our page by adding a list of our favorite colors. The document should read:

<!DOCTYPE html>
<html>
<head></head>
<body>
<div>
<p>Hello World!</p>
</div>
<div>
<p>My favorite colors:</p>
<ul>
<li>Blue</li>
<li>Red</li>
<li>Green</li>
</ul>
</div>
</body>
</html>

We’ve added another <div> tag to wrap around our list, a <p> tag to identify a title to our list, a <ul> tag to wrap around our list elements, and a few <li> tags to mark our list items.

Our page now looks like:

In my next post, we will be putting together a more comprehensive, and in-depth, tutorial into HTML. We will also be introducing the use of CSS style sheets. If you have any questions, feel free to contact me through the email listed on my profile page: “staticcoffee@programmer.net”.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.