Start building your website

Alright. You've installed the software you need?

You should now have a text editor to create your website and at least one web browser to test it.

In this chapter, we are going to start the actual coding of your website.

We will cover the basics of the HTML language and create our first web page.

Let's go!

Your first HTML page

As I said, you should now have a text editor installed. It doesn't matter if you use Brackets, Visual Studio, Sublime Text or even Notepad.

For this tutorial we will use Brackets but process will be similar whichever text editor you use.

Now open it.

Some editors will automatically create a new document for you. With brackets, you will have a "demo" HTML page already filled with HTML code.

Erase everything so you have a blank page.

If you don't see the demo HTML page, just create a new document under File > New.

So how do we write HTML code?

That's up to you. I suggest you type "Welcome to my first HTML page!" or whatever else you want to write.

All that's left to do is to save our web page and load it in the browser.

To save an HTML document, go to File > Save as you would do with any program.

Save the file where you want, for example on your Desktop or in a folder, and give it the name you want. The only requirement is that it must end with .html. By default under Brackets it will be named index.html.

Now go to your Desktop or the folder in which you saved your file and simply double-click on it.

It will show up in your browser (you should see "Welcome to my first HTML page!" or whatever text you decided to type).

Hitherto, nothing too complicated.

Yes, but wait... if that was all there was, it wouldn't be any fun.

In addition to simply typing text as we've done, we also need to send instructions to the browser about what exactly is going on in our web page. For example, we need a way to tell the browser: "this is text", "this is an image", "this is a link"...

The way we do that is by using HTML tags.

HTML tags and attributes

As we mentioned, HTML code isn't used only to display text. You need to be able to send data to the browser.

To do this in HTML, you use tags.

HTML tags

On an HTML page, in addition to text, you'll find another element: HTML tags.

These tags are not seen on the screen by the end user but are necessary to communicate information about the page to the web browser.

HTML tags are easily recognizable: they start with < and end with > (angle/pointy brackets).

For example: <siteraw>.

There is no <siteraw> tag in HTML (yet?). It's a fictitious example. We'll find out about real HTML tags in just a moment.

Tags serve many functions, from indicating the type of text they surround to layering your web page... they can even ask the browser to fetch another document: a Javascript script, a CSS style sheet, a video... or even another HTML page altogether.

HTML tags give instructions to the browser

We distinguish two types of tags in HTML: paired tags and standalone tags.

Paired tags

Also called double tags, these are the most common.

They are opened, very often contain some text in the middle, and are closed by writing the same tag with a slash "/".

Example:

<siteraw>SiteRaw</siteraw>

The first <siteraw> indicates the opening of the tag, and it is closed further on with </siteraw>.

Everything between the two is considered belonging to the fictitious "siteraw" tag.

Similarly, anything not between the tags doesn't belong to it.

Welcome to <siteraw>SiteRaw</siteraw>, enjoy your stay.

These tags go by pairs, hence the name paired tags.

Standalone tags

Standalone tags, often called single tags, orphan tags or self-closing tags, are generally used to insert an element (image, video, line break) into a web page.

There is no need to delineate the start and end of an image, to take the most common example of their use. You just want to tell the browser "I want an image here".

This type of tag also ends with a slash "/", but this time the slash is at the end of the tag.

Example:

<siteraw />

Note that since HTML5, the use of ending slashes "/" for standalone tags is in no way compulsory. You could very well write <siteraw />, <siteraw/> or <siteraw>.

I recommend to always add the slash.

First because it provides a visual clue that allows you to instantly identify paired tags and standalone tags.

And second because it's good programming practice to do so, as it is required in most markup languages (XML, xHTML...).

The space before the slash is always optional.

HTML attributes

Now that you know about HTML tags, let's talk about their attributes.

I say "their" attributes, because as you'll see HTML attributes always accompany HTML tags (the reverse isn't true as you can have tags with no attributes).

Just like tags, attributes are used to transmit information to the browser. But where tags send instructions about either the web page or elements thereof, attributes give information about the tags they belong to.

There are two components of an HTML attribute: the name and the value.

Here is how they are used.

<website name="SiteRaw" />

We have our HTML tag <website /> (a standalone tag ~~for retards~~ if you've already forgotten), and one attribute.

Our attribute has the very creative name "name" and the value "SiteRaw".

You aren't limited to just one attribute per tag. An HTML tag can have as many attributes as you want.

<siteraw name="SiteRaw" type="website" />

One, two, three, ten or even zero. You can add as many attributes as you want.

But what about paired tags? Do they also have attributes?

Yes.

In the case of paired tags, the attributes are only placed in the opening tag and not the closing tag.

Going back to our previous example.

<website name="SiteRaw" >SiteRaw</website>

Some HTML tags share attributes between each other, others have attributes designed strictly for their use.

As I mentioned, none of these tags or attributes are real. Remember the principles, not the actual (stupid) examples.

You may have seen attributes with a name but no value, in the format <tag attribute />. If there is no visible value, it's because the attribute takes a default value if none is specified. These cases are rare and there are usually only a few choices of values, such as a Boolean (true or false).

Proper HTML tag practices

View the source code of any website, even those professionally designed, and you're bound to see the same errors appear again and again.

These mistakes are often bad habits picked up when learn to code that have stuck around due to lack of clarification.

Throughout this course we will see the proper habits to acquire to produce semantically correct HTML code.

In addition, I will also highlight the most common instances of bad HTML practices.

Here are two unfortunately common examples.

Unclosed tags

As we saw in the last section, writing a standalone tag as either <tag />, <tag/> or <tag> makes very little difference (although I advise against the last syntax).

But if you're using paired tags, don't forget to close them!

Not only is it required for semantically valid HTML, but having missing closing tags can seriously mess up the way your web page is rendered by the browser as it won't know where one element start and another ends, and which parts of each element belong to which tag.

BAD: ~~<siteraw>Hello World!~~
GOOD: <siteraw>Hello World!</siteraw>

Overlapping tags

When we use several HTML tags simultaneously (inevitable), say <siteraw> and <website> from one of our previous examples, it is imperative to respect the hierarchy of tags: the first one to open is the last one to close.

Having intertwined tags is an incorrect practice.

BAD: ~~<website>Welcome to <siteraw>SiteRaw</website></siteraw>~~
GOOD: <website>Welcome to <siteraw>SiteRaw</siteraw></website>

The structure of an HTML page

Let's start building our first true web page.

From now on we will use real HTML tags and attributes.

Open your text editor and write the following code.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>SiteRaw</title>
    </head>

    <body>


    </body>
</html>

I added spaces at the start of some lines to make the code more readable. This practice is called indentation and has no effect on how the page is rendered, it only serves to make your code easier on the eye.

You can get the same result by pressing the Tab key before each line.

This is what you should get in your text editor.

Remember the rule about using multiple HTML tags synchronously? To avoid overlaps, the first tag to open is the last tag to close.

What are all these tags and what do they do?

As mentioned just above, from now on we will be using real HTML tags and attributes.

The code I gave you can be considered the starting point or the blueprint for any web page.

In other words, this is the minimal code you will need to include to produce a semantically valid HTML document (a web page).

Here is a detailed explanation of every element on this page, one line at a time.

The doctype

Remember when I said that everything in an HTML document is either a tag or included in at least one tag?

A doctype, short for document type declaration, is not an actual HTML tag (it's the lone exception that confirms the rule).

<!DOCTYPE html>

The doctype is an instruction that associates a specific markup document (in our case, a web page) with a document type definition (DTD).

In short, it tells the web browser what type of document it's accessing. For us it will be an HTML web page.

There are many types of doctypes and some can get rather long and complicated. Luckily, HTML5 doctypes are very short and easy to remember. This wasn't always the case when building websites.

As a rule, the first line of your web page will always be reserved for the doctype.

The HTML tag

Next comes the <html> tag.

This tags encloses the entire HTML document. Everything except the doctype is placed within this tag.

<html> [...] </html>

As you can see, there is nothing after the last </html>.

The header and body

A web page is divided in two essential components:

The header (<head>), which contains information that is not usually rendered by the browser.
The body (<body>), which is where the main content of your web page will be located.

Save for the doctype, any content present on your web page should be included in either the <head> or <body> tags, which are themselves includes in the <html> tag.

Meta tags

Meta tags (plural) are invariably included in the header of your web page.

These tags describe the metadata of your document.

If you want a concrete example, meta elements are typically used to specify a web page's description, keywords, author, the date last modified and so forth.

There are quite a lot of meta tags in the HTML language, most of which vary between circumstantially practical and completely useless.

However, I did include one in our blueprint: the charset.

<meta charset="utf-8" />

The charset, short for character set, is the encoding of your document.

It specifies to the web browser how special characters, such as symbols, accents or non-Latin characters, are to be displayed.

There are many forms of character encoding, usually with incomprehensible names such as ISO-8859-1 or Windows-1253.

I suggest you always use UTF-8. This encoding method allows you to display almost every character you can think of, without having to modify your page's encoding each time.

This is the charset I include in our blueprint.

The charset meta tag does not modify the encoding of your file. It simply helps the browser determine what character set your page is using. Brackets automatically saves your files in UTF-8, but for other text editors you need to specify your character set. With Sublime Text for instance, you need to go to File > Save with Encoding > UTF-8 to encode your document in UTF-8. If you get any errors while trying to display accents, make sure the character set in the meta tag matches the encoding of your document.

The title tag

The title tag contains, unsurprisingly, the title of your web page.

In our demo the title is "SiteRaw", but it's up to you to modify it and give you page a more relevant name.

It's advisable to keep the title fairly short with no more than 120 characters.

<title>SiteRaw</title>

As with most header tags, the content of your title tag doesn't appear on your web page.

It is nonetheless a very important tag. For example, most browsers will show the text contained within your title tag at the top of each page, usually in a browser tab.

In addition, the content of your title tag will be displayed in search results on most search engines.

Your page title appears in search results

That concludes our review of the basic HTML tags.

You are free to edit your demo page as much as you want, just make sure that your code follows the model.

This blueprint should be the backbone of every page you create as it contains every essential HTML component.

But... my web page is empty :( I opened it with my browser and it just shows a blank page!

That's because we haven't added anything in the <body> tag yet.

Starting next chapter we will begin to create the actual content of our website.

HTML Comments

Before concluding this chapter and moving on to building your website, let's talk a bit about HTML comments.

A comment in HTML is information you write for you, the web developer. Think of it as a memo or a bookmark.

Comments are not rendered, they are not read by the browser and they do not alter the display of the page.

So they're useless?

Somewhat.

But they do come in handy.

You can use comments to document your code, mark guidelines if your page is very large, or even leave indications on what purpose each elements serves in case you forget after a while.

How to insert a comment

To write a comment in HTML, you simply wrap the text you want around two markers: .

For example:

<!-- This is a comment -->

You can add comments wherever you want in your page.

To go back to our demo page:

<!DOCTYPE html>
<html>

    <head> <!-- Header -->

        <meta charset="utf-8" />
        <title>SiteRaw</title>

    </head>

    <body> <!-- Body -->

        <!-- so empty :( -->

    </body>

</html>

As I said, comments are ignored by the browser. There is no difference in display between this code and the commentless one above.

Comments are not used very often in HTML but I wanted to show them to you so you're not surprised if you see them from time to time.

I will occasionally use them within my examples to remind you of certain guidelines or to give you a quick explanation without interruption the code.

How to view the source code

HTML comments differ from those of most computer languages.

In general, comments are annotations that are readable by the developer or developers but disappear once the program is compiled or interpreted. As such, they don't appear in the end product.

Not so in HTML.

The reason is simple: HTML pages aren't compiled or interpreted, they are simply sent "as is" to the web browser.

What that means is that once your website is online, anyone who visits it can see your comments... and not just your comments either, anyone who access your website can view the source code.

The term source code is just a fancy name for the HTML code of your web page.

Try it for yourself.

Right-click anywhere on this page and select View Page Source. Most browsers have this function in the right click drop-down menu, although the exact text may vary.

That's the HTML code that gave you the web page you're currently browsing.

Don't panic if you don't understand the code of every website you run into. All websites are not written in HTML5, and most don't even follow the proper coding standards of whatever obsolete version they are trying to use.

Enjoyed this HTML & CSS course?

If you liked this lesson, you can find the book "How to Build a Website in HTML and CSS" from the same authors, available on SiteRaw, in bookstores and in online libraries in either digital or paperback format. You will find a complete HTML & CSS workshop with many exclusive bonus chapters.

More information

< Summary >