Introduction into HTML

Introduction into HTML

In this toturial i want to explain the most common basics of HTML. As everybody we also make misstakes, so wenn ever you find them we are happy when you contact us!


And as usual, it's good when you just try out and play with the things! You can learn a lot with that!

What is HTML ?

HTML (Hypertext Markup Language) is a Language that is used to write Websites. The language describes with so called Tags, how a page should look. The Browser parses these Tags und displays the page to the user. There are a lot of tags for different tasks, a simple one for example is to embbed an image into a site or to mark a part in the text as bold or important.

 

HTML was created by Tim Bernes Lee. He has created HTML 1990 to publish document on the web and link them with each other. These links are also called hyperlinks. What was started 1990 as a small thing is now the biggest part of the internet and every webpage is based on HTML.

 

How do I start creating a website with HTML?

To create a website or blog there are a lot of tools and services. With these tools or services you can create websites with a grafical user interface without learning anything about HTML. I n general there is nothing against that.

But! When you want to create websites in a professional way, you need to undestand what is happening behind the scenes and really understand how things work. A solid knowledge of HTML is a create plus and really required when you want to implement big complex websites or you used server side programming and script languages like PHP.

For getting started a simple text editor like notepad, or vi is good enough. When it is getting more complex we can use a more advanced tool :)

 

You first HTML site

Now let's start! Open the editor of you choice and write or copy the following lines into it:

<html>
   <head>
      <title>Hallo Titel</title>
   </head>
   <body>
      Hallo Welt
   </body>
</html>

We save this text as "my-first-website.htm". The file ending ".htm" is pretty important here, because our computer will open these HTML files with a browser.


Now we go to the place in the file system where the website was save and open it.
If your browser does not open it automatically open the browser and choose the file with "File -> open"

 

When you've opened the page successful you should see the following page:

 

The HTML Tags

Creating our first website was really quick wasn't it?You might have asked your self what all these brackets "<" are? These things are called Tags. Tags are intructions for the browser how to display the stuff inside the tag.Most of the tags have an opening and a closing part. Opening and closing tag are nearly same. The closing tag as just and additional "/" behind the "<".

 

Example:

 

Opening body:  "<body>"
Closing body: "</body>"




Some tags are self closing because there could nothing be inside of this tag.
An example is "<hr/>" that is used to display a horizontal rule.


HTML Tags can be nested and this gives you fexible possibility to structure your website. HTML should be used to structure you side, there are also tags available to visually style your site, but they are avaialble for historical reasons. For styling, we will use CSS (Cascading Stylesheets) later.



But let's come back to our website and discover what the used tags are about:

<html>

This tag is telling your browser "Hey browser, here starts a HTML document" How will this be closed??? By "</html>" exactlly!

<head>

This tag is telling the browser: Here is the start of the head of the HTML document. The head is used to place meta information of the page. It can be used to place a headline, or information for search engines. This part is not visible on the website directly.


Because we don't want to write anything into the head by now, we can close it directly.

 

</head>

The head of our HTML document is done, but we want to have content on our website. This can be done in the "body" of the page. To introduce the browser, that the real content of the website begins we need to add the starting tag of the body:

<body>

Now we add the content of our website into the body tag. The content is: 



Hello World


And for sure we now need to close the body and all other open tags.

 

</body>

Because the body of our HTML document is closed and we have nothing more to add, we need to close the html tag in our HTML document as well.

 

</html>

Creating an HTML website is not that hard? right?


To refresh what we have learned, a short overview of the tags that we have used:

  • Opening Tag: <html> Closing Tag: </html>
  • Opening Tag: <head> Closing Tag: </head>
  • Opening Tag: <body> Closing Tag: </body>


Much to remeber? Yes but you can write comments directly into your html file that are not visible for the user.

In the next part we will learn, how you can add comments to the html code and how your can structure your test by adding headlines to your content.

Navigation