HTML - Absolute Basics
HTML is a markup language used to create web sites which are displayed in web browser like Internet Explorer, Firefox, Chrome, Opera, Safari (Apple Macintosh users).
H = Hyper
T = Text
M = Markup
L = Language
The basic, minimum requiered HTML for a browser to be able to display a page looks like this:
<html>
<head></head>
<body></body>
</html>
Open NotePad, write the code into a new file. Save it and give it the extension .htm.
Note: When naming a file for the web don't use any spaces between words and no special characters. You can substitue a sapce with -.
A browser can handle spaces but will replace them with %20 and it looks ugly. Just don't use spaces in filenames for the web.
Open the saved document in your browser (double click the document).
You should see nothing... basically a white page.
That's because we haven't "published" any text, only html code.
Add the text This is my first web page!, like it shows below, between the <body></body> tags.
<html>
<head></head>
<body>This is my first web page!</body>
</html>
Save your document and refresh your browser (or open the document again if you have closed it before).
Congratulations! You are now able to built websites.
You can write as much text as you like and in the next mnutes you will learn how to make it easier to read by adding some formatting tags.
To make your page easier to read there are only a few basics to cover:
Paragraphs: The <p></p> tag creates a paragraph for you. There will be a gap.
Make the changes to your html document as you see them below. The changes are shown in bold.
<html>
<head></head>
<body>
<p>This is my first web page!<p>
<p>Writing text in paragraphes makes it easier to read.</p>
</body>
</html>
Line breaks: The <br /> tag produces a line break.
As you might have noticed, the <br /> is not written <br></br> as it doesn't contain any data. It's a "one-off" tag and the "/" gives the command to end the tag.
Make the changes to your html document as you see them below. The changes are shown in bold.
<html>
<head></head>
<body>
<p>This is my first web page!<p>
<p>Writing text in paragraphes makes it easier to read.<br />This comes after the line break.</p>
</body>
</html>
Bold: The <strong></strong> tag shows the letters/words in bold.
In the old days the bold tag was written <b></b>. This is no longer in use and has been replaced by the <strong></strong> tag.
Make the changes to your html document as you see them below. The changes are shown in bold.
<html>
<head></head>
<body>
<p>This is my first web page!<p>
<p>Writing text in paragraphes makes it easier to read.<br />This comes after the line break.</p>
<p><strong>This text is formatted with the strong tag</strong></p>
</body>
</html>
Giving some text more importance with the heading tag: The <h1></h1> tag.
The <h..> tags is needed to get your keywords used in the heading into the search engines. It has proven to be right, that the use of the <h1></h1> tag helps to get better results in Google, Bing, Yahoo, etc.
As you may imagine, there is also a <h2></h2>, <h3></h3>, etc. tag. I have never tried to figure out how high I could go with the numbering as I never had the need of more then 4 or 5.
Make the changes to your html document as you see them below. The changes are shown in bold. I have replaced the <p></p> tag for the first line within the <bod></body> tag with the <h1></h1> tag.
<html>
<head></head>
<body>
<h1>This is my first web page!</h1>
<p>Writing text in paragraphes makes it easier to read.<br />This comes after the line break.</p>
<p><strong>This text is formatted with the strong tag</strong></p>
</body>
</html>
Your web page should now look like the screenshot below:
Bookmark this page by using: