Create your first HTML page
The first thing to learn about web development is to learn HTML markup language. HTML forms the structure of pages and contains many important elements, such as creating forms, including images and links on the page, and so on. These will be covered in later articles.
First you need a text editor for HTML markup. A normal word processor is not suitable for this, because it adds its own markup to the file. Good editors is Notepad and Visual Studio. I personally use Kate text editor.
HTML page can be so simple as code below. We do not focus in this article what is before <body> tag, I describe headers (html, head, title tags and more) next article. Content comes always between <body></body> tags. But let see simple example:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>Page Heading</h1>
<p>First paragraph.</p>
</body>
</html>
What's in the example above? Let's go through the example piece by piece.
Like before mentioned, all content comes between <body></body> tags.
Next we have <h1>Page Heading</h1>. Between those tags is your page heading. Headings can be several and different headings tell how important heading is. Same like Word or other else word processor. Headings can be:
<h1>Heading</h1>
<h2>Heading</h2>
<h3>Heading</h3>
<h4>Heading</h4>
<h5>Heading</h5>
<h6>Heading</h6>
And headings looks like:
Heading
Heading
Heading
Heading
Heading
Heading
Next, we have the <p></p> tags in the file. Between those tags comes the text content itself. The <p> tag stands for paragraph. This is one of the most practical tags that can be used to format text in any way you want, such as text placement on the page, color, font size, etc.
This is where CSS styles come in, and styles are often used for formatting, which we will discuss in later articles.
The last tag in the file is the </html> tag. An HTML page must always start with the <html> tag and end with the </html> tag.
Before this, there is only <!DOCTYPE html> tag, which defines that this document is an HTML5 document.
Now save the file as mypage.html, where the html file extension tells the browser and also the computer that this file should be displayed in the browser. Open the file in the browser or double-click on the file, you have made your first web page! Congratulations :)
Let's style the page a little, but not go too far yet. Write the following additions to your file:
<!DOCTYPE html>
<html>
<head>
<title>My Homepage</title>
</head>
<body>
<div style="background-color:black;">
<h1 style="color:white;">My Homepage</h1>
</div>
<div>
<h3>About Me</h3>
<p style="margin-left:10px;">Hello there, I'm just learning HTML.</p>
</div>
</body>
</html>
Your page should looks like that:
My Homepage
About Me
Hello there, I'm just learning HTML.
In the example above, we can see how easily we can change the appearance of a page with just a few changes. The div tags in the example are blocks or sections that are used to structure the page. The style attribute inside the tag modifies the properties of the element, such as color and indentation in this example.
More on these next time, hopefully this helped you get started in the world of web development.