The First HTML Document

Farlando Diengdoh 27 Feb 2015

The First HTML Document

So, you’ve chosen to learn HTML? Here is the first lesson. HTML is a markup language – meaning you markup the structure and the browser will display accordingly. So the start off – every HTML page should have a start and an end. The start of html is denoted by tag and ends with . Lets start by creating a new folder named MyWeb in any location you wish. Then go ahead open a text editor (Notepad in Windows, TextEdit in Mac OS and Linux has a variety of them) and add the following codes.

<html>
    <head>
        <title>My First HTML</title>
    </head>
    <body>
        <p>Hello World</p>
    </body>
</html>

Save the file in the folder we’ve just created, and give it a name say index.html. (index is always the first file that is displayed when visiting a website.)

Now open the folder and open the index.html file. You should now see in your browser something like this:

First HTML Doc

Now you might think what’s with all those codes? The first line with the tag <html> tells the browser that it is the start of an HTML page, the last tag </html> tells that it is the end. The beginning tag and end tag is known as the Element of HTML. Then everything within the <head>…</head> is known as the head element which could includes many important elements and one being the <title>…</title> element. The next that follows is the <body>…</body> element. Here all the content of your website will go in. And in the <body> tag you can add other elements of HTML. The following is a list of different elements you can add:

<h1>…</h1> – Heading Level 1
<h2>…</h2> – Heading Level 2
<h3>…</h3> – Heading Level 3 and so on up to <h6>…</h6>
<p>…</p> – is for paragraph.
<strong>…</strong> to bold a text.
<em>…</em> – to emphasize text.

Go ahead and try to use the above elements inside the <body>…</body> element. Here I’ll explain the two types of Elements in HTML.

Block Level Elements: These types of elements will create a line space between one and the other. The heading and paragraph elements are block level elements.
Inline Elements: These elements will not break the line when used but rather will stay in line. <strong>…</strong> and <em>…</em> are such types of elements.

Try this code and see the results

<html>
    <head>
        <title>My First HTML</title>
    </head>
    <body>
        <h1>Heading 1</h1>
        <h2>Heading 2</h2>
        <p>Hello World</p>
        <p>This is a second paragraph and I'm putting <strong>Bold</strong> and <em>Emphasis</em> just to see if it works
        </p>
    </body>
</html>

You should get something like this:

my first html