HTML is such fun to learn. All you need for this tutorial is a text editor such as Notepad or Notepad++ and a browser and you will see results instantly!
In this tutorial:
Required knowledge:
It is critical that you can view file extensions in the File Explorer when you are creating the files for your website! You must be 100% certain that your file is not called
index.html.txt!
File Extension
An HTML file is a text file with the extension .html:
- Save a blank text file as
index.html. - Your computer probably opens HTML files with a browser by default, so if you double left-click on the file you just saved it will open in your default browser. It will display a blank webpage.
Text
- Open
index.htmlin your text editor. - Type
Hello World!in the first line of your HTML file, press Enter and typeMy first web page.on the second line. - Save the file, switch back to your browser, and press f5 on the keyboard to refresh the page.
- Note that although the text in your source file (the text file) is typed on two separate lines, the text appears continuously as one paragraph when displayed in the browser.
Hello World! My first web page.
Tag
HTML tags describe the text on the web page:
- Switch back to your text editor. At the beginning of the first line, before the text, type
<h1>. - Press End on the keyboard and type
</h1>. - Save the text file, switch back to your browser and refresh your page.
- Note that the first line is now a heading (font size is larger and bold) and the remaining text is “normal” and in a new paragraph of its own
<h1>Hello World!</h1> My first web page.
Correct
Read more about “nesting” in the Nesting tags correctly in HTML tutorial.
Just because it works, it does not mean it is correct.
- Switch back to your text editor.
- “Nest” the second line of text between
<p>(paragraph) tags. - Save your source file and view the final code in your browser.
<h1>Hello World!</h1> <p>My first web page.</p>
All the extra stuff
Your basic HTML website page requires several additional tags to be syntactically correct:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
<p>My first web page.</p>
</body>
</html>
More about these tags (and more of them) in the An HTML5 boilerplate tutorial.
Next steps
Learn more about the basics:
Then move on to the following skills:
- creating (hyper)links: HTML <a> tag
- adding horizontal lines: HTML’s <hr> tag
- adding images: Mastering lists in HTML
- adding tabulated data: Mastering tables in HTML
- changing fonts: Mastering font faces in HTML
- use the correct technique for Sub- and superscript in HTML as well as HTML entities