v.plonk!

The language used to create websites is HTML (HyperText Markup Language) a very simple language to markup certain parts of the website in order to give it some kind of sense. The marker are called tags, they are written inside of angle brackets and always work the same way: There is an opening and a closing tag (shown by additionally using a slash) around the content part:

<TAG>some content</TAG>

If there isn't any content it is also possible to merge the opening and closing tag into just one tag:

<TAG />

This happens to images, linebreaks (<br />) or horizontal rulers (<hr />) for example.

Next thing you need to know is that you can nest tags into each other or in other words you can put tags into other tags:

<TAG>
    <AN_INNER_TAG>some content</AN_INNER_TAG>
    <ANOTHER_INNER_TAG>
        <AN_INNER_INNER_TAG>some more content</AN_INNER_INNER_TAG>
    </ANOTHER_INNER_TAG>
</TAG>

Now that you've seen how HTML actually works, we'll have a look at the most common tags:

Links
The so called A-Tag is one of the most used tags. Usually it links its content to a different website:

<a href="http://my.opera.com/">My Opera</a>

It is also capable to directly link to your email client:

<a href="mailto:jane_doe@unknown-person.com">write an email to Jane Doe</a>

Furthermore it can handle some additional functions, like opening the next page of a list of pages in the same browser window:

<a href="page9.html" target="_self" rel="next">go to next page</a>

Images
The IMG-Tag is one of the few tags that do not contain any further content. All it does is opening the image given as source and additionally providing alternative information (alt="...") about the image for those who can't see the image, like blind people or text browsers:

<img src="images/my_photo.jpg" alt="a photo of Jane Doe" />

The file formats that can be handled by browsers are JPG/JPEG, PNG and GIF. Furthermore modern browsers support the SVG file format.

Headlines
Headline or H-Tags are used for text formatting. There are usually 6 different levels (h1, h2, ... h6) that tell the browser (and search engines) what's the most important information on the website or the following content. There isn't much else you can do with it, but it is important to know this tag:

<h1>very important headline</h1>
What this site is all about...

<h2>less important headline</h2>
What the following text is about...

DIV-Containers
For styling your website the DIV-Tags - also called div-containers or div-blocks - will be one of the most important tags. It allows you to put content into imaginary boxes, that you can place, move around and style afterwards:

<div>some content</div>
<div>
    <div>
        <h2>a headline</h2>
        A small text...
    </div>
</div>

Remember this tag, as you will use it very often when styling your websites later on.

Forms
The last important tag is also one of the most complex as it needs certain inner tags to work: the FORM-Tag. The tag itself just defines a form, but without any fields to use, so you need at least a button to submit the form and some kind of form fields. I won't go much deeper, so I just show you a very simple example of a form that gets send via email:

<form action="mailto:jane_doe@unknown-person.com">
    Your email: <input name="visitors_email" type="text" size="50" maxlength="50" />
    Your text: <textarea name="visitors_text" cols="50" rows="10"></textarea>
    <input type="submit" value=" Send form " />
</form>

Okay, that's it so far. This small lesson will be the first basis for us to finally start styling our websites and blogs.