How To Make A Website Part I: Understanding And Writing HTML

Everyone lives at least a little bit of their life on the web, and whether you develop web pages for a living or you want more control over how your comments show up on websites, having an understanding of HTML at your command is invaluable. With that in mind, in our first lesson on how to make a website, we’re covering the top-level basics of HTML — the predominant markup language of the web.Nowadays it’s easy to put together a web presence using social media and a personal landing page, but if you want to actually make your own website you’re going to need to learn HTML and CSS. Fortunately, we can help.

The video above will get you set up with a text editor, walk you through the basic structure of an HTML document, and introduce you to a few things about HTML you’re going to want to know right away. By the end of the lesson you’ll know how to create a basic HTML page. If you forget something or want a little additional reference material, check out the text below. It’ll provide you with the basic information about HTML that you’ll need.

What You’ll Need

• A plain text editor to write your HTML
• Your web browser of choice to test your HTML
• A desire to beef up your knowledge of how the web works

As you can see, you really don’t need much to get started.

Getting a Plain Text Editor

In order to write HTML, you need a plain text editor. This video uses a plain text editor called Textmate, but that’ll cost you. If you want something free, you’ve got a lot of great options, including Notepad++ (Windows), Kod (Mac), or Sublime Text for either Windows and Mac. There are several other text editors out there, so you can use whatever you want so long as it is a plain text editor. While the term plain text is kind of a misnomer (here’s why), it’s basically used to describe text that doesn’t have any style and is simply letters, numbers and symbols. This means no bold, no italics, no different sizes, etc. While your plain text editor may have syntax highlighting — a feature that changes colours of the text based on what you type to make your code easier to read — this is just something you’ll see in your text editor and something that is not saved into the file. Basically, you need a text editor that doesn’t save anything but the text (which means you don’t want to use something like Microsoft Word).

Note: For the purposes of this lesson, you should save all the files you create in your text editor with .html as your file extension — for example, “my_first_web_page.html”. You can edit a .html document in your plain-text editor of choice, but you can also view it in your browser. What you see when you open it in your browser will be very different than what you see when you open it in your text editor.

What Is a HTML Document?

If you read the above section, you may have guessed that HTML — which stands for HyperText Markup Language — is just a bunch of text saved as a document type that your browser identifies as using HTML. If you see an image on a web page, it’s simply referenced in the text of an HTML document and not physically included as part of the file. All an HTML document really does is provide a set of text-based instructions that a web browser can interpret. It does this by encapsulating the page’s text in tags, which we’ll learn more about in a minute. It also uses these tags to tell the web browser to do things like display images, add line breaks and more. Going further, HTML can be styled using CSS — which stands for cascading stylesheets — which we’ll learn about in the next lesson. For now, just understand that HTML is a set of instructions for your browser that you are going to write.

What Are Tags?

Tags are used in HTML to specify certain elements on the page so the web browser knows how to render them. Here’s what a set of tags look like:

[imgclear]

The above tags are the HTML tags. Your entire HTML document goes inside of those tags. All tags start with a less than symbol and end with a greater than symbol. They’re called tags, in part, because those symbols make them look like tags. The starting tag simply has the term HTML inside of it, but you’ll notice that the ending tag has a / before the term HTML. The / is what designates it is the closing tag. This tag tells your web browser that the first HTML tag is the start of the HTML document and the second /HTML closing tag is the end. Most tags look like this. For example, if you want to make text bold you might see this:

[imgclear]

Note: There are other ways to make text bold too, so be sure to watch the video for a full explanation as these differences can sometimes be very important.

You’ll also see tags that look like this:

The above tag is an image tag. You’ve probably figured this out already, but its job is to display an image. There are two noteworthy things that are different about this tag. First, it doesn’t have an ending tag. This is because the img tag is a self-closing tag. It doesn’t need an ending tag because there is nothing that would go between a starting tag and an ending tag. You’ll notice a / at the end of the img tag, however, and that’s to designate the end. Back in the early days of HTML you didn’t need to add that / to an image tag, and technically you still don’t, but it’s “proper form” to do so$ The other difference you’ll notice is that the tag has a bunch of attributes. Attributes are things like src=”” and height=””, and they contain information describing more about the tag; in the case of the img tag, the source (src) attribute is always necessary.

The src attribute specifies that the image file we want to display is image.jpg. Because we’re just listing the file name, the browser will assume we’re keeping that image file in the exact same location as our HTML document. If you had a folder called images in the same place as your HTML document and kept the image in there, you’d set src to “images/image.jpg” because the / designates that we’re going into a folder. If you wanted to load an image from an external website, you could just put the full URL to the image (e.g. http://website.com/image.jpg). The other attributes simply specify the height and width of your image. Only the src attribute is required for the image tag, but if you don’t specify the height and width of your image the browser won’t know how much space to leave and it’ll keep readjusting the page as it load. This looks kind of weird, so it’s always better to specify the height and width in your img tags.

For a quick reference of some of the basic tag elements you can use in your document, this cheatsheet is a good place to start.

The Structure of a Basic HTML Document

Now that you’ve got basic tag structure down, let’s take a look at a basic HTML document’s structure. You should know this is a very basic look and doesn’t include absolutely everything you’ll probably find in a fully developed HTML document, but it works just fine and keeps things nice and simple. Here’s the very basic structure:

You’ll notice that inside the HTML tags are HEAD and BODY tags. The HEAD tag encapsulates information that’s not necessarily going to directly display on the page, such as the page title (which shows up as the window or tab title on your web browser), CSS styles, and other metadata. The BODY tag encapsulates information that will display on the page — your text, images and rich media. The resulting HTML document opened in your web browser (just double-click the saved file or drag it into a browser window) will look like this:

As you can see from the example, the body tag has a few things inside of it. First there’s a DIV tag with an ID of header. DIV tags are used to contain bits of content so you can style them and move them around with CSS. You’ll learn more about this when we dive into CSS in the next lesson.

Inside the header DIV tag is some text. The first part of the text is inside an H1 tag. H1, H2, H3, H4, H5 and H6 tags are all used to create header text. H1 is the largest and H6 is the smallest. By default they result in bold, larger text, but you can style them however you like using CSS. Because this HTML document has no CSS style information, the H1 tag will make the text My Page look bold. This effect is very similar to the big section title text you see in this post.

Below the H1 text is just some regular, un-styled text. Most browsers render un-styled text in the Times New Roman font at a size of 12pt. When you start adding CSS styles you’ll be able to style this text however you like by setting a default style.

That’s all you really need to know about basic HTML. In our next lesson, we’ll be taking a look at basic CSS. After that we’ll look at combining those skills to make a website and then wrap up with additional resources to help you learn more about web site creation. See you tomorrow!