Learning HTML5

Introduction to HTML

HTML stands for “Hypertext Markup Language” , this markup language gives a website developer a way of structuring a web page by using a set of an agreed upon  words or vocabularies (standardized by W3C or World wide web consortium ) to mark the structure of the document understood by a web browser. The construction of HTML gives ability to link pages from different computers where each page can link to a page and that page can link to another page and so on. This page linking forms a view of a spider-web and this is why you hear the term web or website (which means a group of linked HTML pages that form a website).

The concept of World Wide Web

What is an HTML document?

An HTML document is simply a web based document (not Microsoft document) which its structure is understood by a program called a “web browser”, and the web browser translates (renders) this structure into a visual content displayed on a computer’s screen.  The content is what you see on screen such as photos /pictures, graphs, text/ words, tables, fill-up forms, videos, audio/music, animation carton, and so on.

A web browser understands that this is an image or video simply by reading the tags (more on tags in the next section) used to compose the structure of the page. Please refer to Figure 8 and see how a web page is displayed in Firefox web browser.

In the following sections we are going to introduce to you the elements that form the structure of a web page.

A web browser translates the structure of an HTML document into a visual content displayed on a computer’s screen

What is An HTML tag

The HTML document defines a particular structure that gives meaning to its content (e.g. text, images, audio, video, graphs, tables, forms and many others) by using what is known as “tags” and the tags constitute what is known as “HTML Element”. Remember that the tags are simply reserved words or vocabularies (e.g. HTML, head, and img, among others) standardized by W3C that make it possible to markup the structure.  Below is the construct of an HTML tag:

How to Create an HTML document

Hands on the keyboard

This is a practical guide section that demonstrates the concepts you are about to study in the next sections of this chapter.

What we are going to do in this practical guide:

  1. creating the working folder
  2. creating an HTML document
  3. Using a text editor program to write HTML document
  4. Typing HTML code
  5. previewing our HTML document in a web browser

If you never wrote an HTML document before, don’t worry I will treat you as a new comer in this field.  The first thing to do is to create a folder where to store the files that we will be creating.

Creating the working folder

  • Step 1:  Open your computer drive by clicking the computer icon  on your desktop (for windows 7).
  • Step 2: On the left site of the pane, find a folder called libraries and click on documents.
The library folder on Windows
  • Step 3: create a new folder by clicking New Folder button on the toolbar and name the new folder lesson-01.

Tip on naming a folder: select the folder you have just created and press F2 on your keyboard and then type the new name of your folder.

how to create a new folder on Windows

Creating an HTML document

Now that you have created a working folder, it is time to create our first html document which will help us understand the concepts we are going to study in this chapter.

  • Step 1: double-click the lesson-01 folder you created   in order to open it and place you mouse pointer somewhere in the folder and right-click in order to get the following popup menu:
How to create a new text document on Windows

After clicking Text Document on the sub-menu, you should get the following new file ready to be renamed:

  • Step 2: type “html-document-structure” as the new name of our new file and remove the “.txt” the  last part of the name and type “.html “ and the complete file name should be ( html-document-structure.html ) .

And the complete new file after renaming should look like the following:

Tip on changing file extension:  On windows 7, the last part of a file name such us (.txt) might not be visible depending on the settings of your computer. If this is the case for you, then follow the following guide to make the file extension visible:

  • Step 1:  click the Organize button on the toolbar.
  • Step 2: show file extensions

Now that you have created your HTML file, let us write some HTML code in it and see what will be our study in this chapter.

Using a text editor program to write HTML document

What is a text editor program?

A text editor program is a program used to edit plain text document  which doesn’t feature any drawings (only text allowed), no too much formatting (e.g. text alignment, letter spacing, borders, and underline) and usually the font style used is at the same width (e.g. courier New) . On Windows 7, Notepad is one of the plain text document editor programs that you can use to write html files and other computer code related files.  You should never use Word editor programs such as Microsoft Word Document program to edit computer code files. This kind of word editors add more hidden code that you don’t see which helps the program to render styles, drawings, and formatting of the content within the document.

Example of a plain text document editor