Lesson 1 - Introduction to HTML and your first website

Welcome to the first lesson of the "First website, step by step" HTML course! The HTML language is the foundation of what you need to know in order to start making websites. The language itself is pretty simple and every single website uses it. More complex websites mix HTML with several other languages, which we will cover later on in the course. First thing's first, we'll get you acquainted with HTML, help you make your first web page and upload it to the Internet.

Editor

We won't be using Notepad to code our websites because it lacks many of the most important features we need to do things properly. Mainly syntax highlighting, or bad Unicode encoding and line endings support. For our intents and purposes, we will need a "smarter" editor. The Notepad++ editor should do the trick: https://notepad-plus-plus.org/, if you don't already have it installed, go ahead and do so. For more complex projects, you will also need what is known as an IDE. An IDE is an advanced editor, that even autocompletes your markup, checks your code, and so on. I highly recommend JetBrains' IDEs (which we use here at ICT.social). One of which is WebStorm mainly used for HTML or PhpStorm, if you plan on later incorporating PHP to your code.

Run Notepad++ and create a new file (File menu -> New). Make sure you've selected the "UTF-8 without BOM" option in the "Encoding" menu.

We've set the encoding mainly so that it properly displays accent characters. Even if your country doesn't use them, it's still a good idea to use UTF-8 encoding because of other plugins, ones that you'll use in future might require it. All well-written websites use UTF-8 encoding. Unfortunately, Windows doesn't have UTF set as default. Therefore, it is very important to only use editors that support UTF-8, otherwise, accent characters would mess everything up. In other words, it is a very bad idea to create a website in Notepad++ and later modify in Notepad.

First website

Making HTML pages is relatively easy. Essentially, all HTML pages are, is text files. Select HTML in the "Language" menu so that your code is highlighted properly.

Always start by doing this, or else you will be missing out on helpful features that Notepad++ provides.

HTML consists of tags. Which allow specific meaning to be added to an element or a website. Back in the old days, tags were used to style websites as well. However, the websites back then were rather confusing, so modern tags have been limited to web content.

Tags also help wrap text, i.e. add meaning to it. As a matter of fact, what I'm writing now is a heading is nice and organized thanks to tags. We write tags using angle brackets. Probably, the most important tags are "a" links which help us browse through different pages (it is literally a link to other web pages). Just so you know, the term "HTML" is derived from it - HyperText MarkUp Language (HyperText is text that contains links to other texts).

HTML files have a specific structure that they have to follow. The first thing we have to add is the doctype at the very beginning of the file:

<!DOCTYPE html>

Doing so, we have defined the text file as an HTML document. Don't let the exclamation mark confuse you, that's just how it has to be done Next, we'll define the actual HTML document. HTML documents are split up into two parts - the head and the body. The head contains information for the browser and search engines to use. The body contains the website's content.

Modify your file to make it look like this:

<!DOCTYPE html>

<html lang="en">
    <head>
    </head>

    <body>
    </body>
</html>

On the next line, open the <html> tag. In other words, you are declaring that your HTML page starts there.

Then the head follows, which is represented by the <head> tag. Notice that the end of the head is the same, but with an added forward slash. Paired tags are opened and closed that way. We call them paired because there are 2 of them, the opening tag and the closing tag. In between the two, you define their contents, which in this case is head's content. The same goes for the body (the <body> tag) where we define its opening tag as is and its closing tag with a slash. After which we close the HTML web page.

Notice the lang attribute in the <html> tag. What it does, is define the webpage's language. Attributes are additional information that can be added to HTML elements. In this case, we have set our HTML webpage's language to English. Attributes values are to be placed in quotes, but we won't need any more of them right here and now (we'll get back to them later).

Let's move to the head and insert the required encoding information between its opening and closing tags. We do that by a meta tag with the following syntax:

<meta charset="utf-8" />

Notice the slash at the end of the tag, we close unpaired tags like that. Unpaired tags are those who only need a single tag (aka self-closing tags). The <meta> tag is one of them. I'll let you know whether a tag is paired or unpaired every time I introduce you to a new one. What we did here, is set the document's encoding to UTF-8.

In the next line, add a title to the head. To do so, all that is needed is a paired <title> tag and a text in between.

<title>My first website</title>

Our entire HTML document should now look like this:

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>My first website</title>
    </head>

    <body>
    </body>
</html>

Out head is done for now. Let's move to the body, which is the part of a page that can be seen in a web browser.

We'll start by adding two text paragraphs into the body. Use the paired <p> tag to do just that (p stands for a paragraph). In HTML, everything is an element, text can't just be thrown in. You have to wrap it in individual paragraphs.

<p>This is my first website. It's empty so far, but still, I'm satisfied with it.</p>
<p>This is the second paragraph.</p>

Create a folder on your hard drive (e.g. FirstWebsite), save the file in it, and name it index.html.

Now, when you open the file in your web browser, you should be able to see your very first website in all of its glory! It will look something like the picture below If it looks any different, don't worry, you can download the file we worked on at the end of the article. Then, check back and find out what you did wrong.

My first website

index.html

In the next lesson, Basic HTML tags, I'll introduce you to a couple of new tags, as well as add some more features to our website.

Note: HTML pages can be defined in multiple ways. I'm sure you'll encounter other definitions along the way, and there is nothing necessarily wrong with any of them. The one we used is just the shortest and the most modern.

Did you have a problem with anything? Download the sample application below and compare it with your project, you will find the error easily.

Download

By downloading the following file, you agree to the license terms

Downloaded 185x (1 kB)
Application includes source codes in language HTML

Article has been written for you by David Capka Hartinger

User rating:

8 votes

The author is a programmer, who likes web technologies and being the lead/chief article writer at ICT.social. He shares his knowledge with the community and is always looking to improve. He believes that anyone can do what they set their mind to.

David learned IT at the Unicorn University - a prestigious college providing education on IT and economics.

Activities