HTML Tutorial 101: Basics

HTML - HyperText Markup LanguageRequirements for the HTML Tutorials:
– a good freeware HTML editor or at least Notepad (not recommended though)
– a place to upload your files, although you can also test your HTML pages on your PC
—————————————–

What is HTML?
HTML stands for HyperText Markup Language and it is the code which is used to create the websites you see.

Since HTML4.01 is less used these days, I will only talk about XHTML1.0 from now on. For a HTML4.01 Tutorial I can only advise you to visit the W3Schools website

So…then what is XHTML?
Basically it is like HTML4.01 although the „X“ stands for „EXtensible“.
XHTML is the latest HTML standard and consists of HTML4.01 which was reformulated in XML.

Hey, I know HTML4.01 and I love it! Why should I use XHTML?
My personal opinion:
XHTML is the future of webcoding and it is easier to write valid HTML code. I’m sure you know the famous info texts on older webpages, stating „Optimized for IE“ or any other browser. You have less problems to write valid code as all current browsers treat XHTML the same way.
No more „browser-optimizing“!
Even better, XHTML is backwards compatible, meaning the page is displayed the same in IE7 and IE5 or older.

So switch to XHTML, it is really easy 🙂

Well, what are the basics you should know about XHTML. Let me explain it two ways:

1. HTML4.01 experienced coder
good (valid) code would look like this:

<h3>Heading</h3>
some text
<br />
some more <b>text</b>

wrong (invalid) code could look like this:

<H3>Heading
some text
<br>
some more <B>text</B>

So what is the difference? You can say that all tags have to be closed; the „h3“ needs its closing „/h3“ and tags without a closing tag, like „br“ or „img“ are now auto-closing, so the old <br> turns into <br />.
Also all the code is written in non-capitals. There is no „H3“ or so, only „h3“.

That’s basically everything which is changing. Have a look at the W3schools XHTML1.0 Reference for more details.

2. readers without experience with HTML
These tutorials are the right thing for you…I hope…so let’s get started! 🙂

A website consists of a four basic tags which cannot be left out or the page would not validate.
These tags are:
– <html>
– <head>
– <title>
– <body>

Now let’s build our first website!

<html>
<head>
<title>Hello world!</title>
</head>
<body>
Hello World!
<br />
This is my first website.
</body>
</html>

Create a HTML file and copy the code into it, save it and open it in your browser (e.g. Firefox)
If you don’t have a HTML editor, create a new txt-file and open it with Notepad. Copy the code, save the file, then rename it to foo.html (or a name you prefere).
Congratulation, you just wrote your first website!

So, let’s explain each tag 🙂

The <html> let the browser know that you are opening a HTML file, so it interprets the code and displays your content.
The <head> is the place where you will later add meta, link and style tags/content. I will get into more detail in another tutorial.
In the <head> you also have the <title> tag. This tag allows you to give your page a title which is displayed at the upper left of your browser. Feel free to edit the „Hello World“ title to something else 🙂

Last but not least we have the <body> tag. Inside the the body-tags you will write whatever you want to have on your website.
If you are wondering what the <br /> means, it just creates a line break, so the „Hello World!“ and the „This is my first website.“ are on different lines. The more „br“s you add, the more space you will get between the lines.

Now feel free to play with the HTML code you just learned…

WAIT, I almost forgot one important thing!
Please make sure your code is properly nested. The html-tag is the first tag and its closing tag the last tag in the code (see the example above). After the opening html-tag follows the head-tag, with the title-tag inside. After the closing head-tag follows the body tag. Inside of it you have all your website content. Please also check the <br /> if it really looks like this <br />.
I will tell you the reason for this with the next tutorial, where I will talk about other common html-tags and their usage/function.
I will talk about the reason in a later tutorial.

Update: Example of the final result

Continue to: HTML Tutorial 102: Tags and Validation

Schreibe einen Kommentar