Lesson 2: Understanding the HTML Basics  

    Meaning of HTML, Elements, Tags & Attributes    

First of all, let´s take a look at some terms you should know:

HTML stands for Hyper Text Markup Language. It´s a markup language that can be interpreted by different softwares like a web browser that reads and translates the HTML code and displays a webpage to the user according to the commands given in the HTML code.

HTML is a very easy and comprehensive markup language as you will see in a moment. The "World Wide Web Consortium" (W3C.org) is the international organization who develops web standards, web technologies and also defines the HTML specifications.

An HTML document is structured with elements, which represent different parts of the document. Most elements consist of three parts: an opening tag, some content and a closing tag. To illustrate the different parts of an element, let´s take a look at the element used for text paragraphs - P.

The opening tag contains the element name "P" within angle brackets "<" and ">". Hence, in the example above, "<p>" is the opening tag. Next comes the content (any text you like) and finally the closing tag which is similar to the opening tag but includes one forward slash "/" right before the element name.

So the function of tags is to tell a browser where a given element starts and where it ends and how it should handle the content within this element.

Important to know is that the element names are case-insensitive, which means that it makes no difference whether you use "<p>" or "<P>" inside your HTML code.

Empty Tags (also called "stand-alone tags") are elements which only consist of an opening tag. They don´t have neither content, nor a closing tag. You will get to know an empty tag in the next lesson.

Attributes are parameters used to further define and format the content of an element. They are included only inside the opening tags, behind the element name, in the following syntax:
Attribute-Name="Attribute-Value".

While the attribute names are case-insensitive (just like the element names), some of their values might be case-sensitive, so in order to avoid confusion and to stay on the safe side I recommended you use always lower case letters.

Here´s an example for an attribute.

You see, the name of the attribute is "align" and its value in the above example is "center". And you guess what its function is ...
... you´re right - displaying all content within this paragraph in the center of the web page.

Display Example: This is how it looks like in your browser.

    The basic structure of an HTML document    

Watch the video to learn the very basic structure of an HTML document.

Video button not working ? Click Here

Display Example: This is how it looks like in your browser. ( just a blank page )

Now it´s time to get active yourself and create your first HTML document. We´re going to use this document in the following lessons to play around with HTML code. Watch the video and follow me through these steps:

• open your text editor
• copy and paste the above code in a new blank document
• create a new folder for your website on a local drive of your computer and save the HTML document as "1stwebpage.html" in this folder.

Video button not working ? Click Here

In the next lesson I´m going to show you the bare minimum of information that you need to include in the HEAD section of your HTML documents. We´ll keep this very short and simple.