Html 5


How many of us have felt puzzled each time we try to analyze HTML. When you open any HTML document, you are hit with an angle bracket, an exclamation mark, some text with a stroke and angle bracket you don’t apprehend, killing the getting to know zeal in you. Sometimes you get discouraged and cease gaining knowledge. The good news is mastering Hyper Text Markup Language doesn’t have to be perplexing. With the proper information and guide, you could learn what you need to recognise about Hyper Text Markup Language within a short period.
In an earlier post, I pointed out the concept of web design and web development and languages that all current web sites are constructed on. In the post I said website are designed with Hyper Text Markup Language, Cascading Style Sheet and Bootstrap and then developed with JavaScript, PHP and SQL. You can examine this manual to learn how websites are made. 
In this tutorial I will explain everything you need to know about Hyper Text Markup Language, HTML tags, web browsers, HTML web page structure and HTML editors. At the end of this tutorial you will be able to create your first web page.

What’s HTML?

HTML stands for Hyper Text Markup Language. It is a language for describing web document. A markup language is a set of markup tag and HTML documents are described by HTML tags. Hyper Text Markup Language was created in the late 1991 by Berneer Lee with HTML being the first was published in 1995. Since the early days of the web, there have been many versions of Hyper Text Mark up Language which are HTML 2.0, Html 3.2, HTML 4.0.1, XHTML and HTML 5 which is the trendy and better model of HTML. Hyper Text Markup Language describes the structure of web pages and they're the building blocks of websites. An instance of a Hyper Text Markup Language document is shown below.
<!DOCTYPE html>
     <html>
<head>
<title>The Page Title</title>
</head>
<body>
<h1>This is my first Heading</h1>
<p>This is my first paragraph.</p>
</body>
</html>
I’m positive you're wondering what the above example means and how they are used to construct web sites.
The <!DOCTYPE html> must only appear once in your web document.
 It helps the browser to display web pages correctly. It also shows that the markup language is written in HTML 5
The <html> suggests it’s a Hyper Text Markup Language document.
The <head> gives consists of metadata about the document describes.
The textual content between <title> and </title> specifies a title for the web page.
The text between <body> and </body> contains the visible page content.
The <h1 describes a heading.
The <p>describes a paragraph.


In designing any website from scratch you need to begin with the layout below. Using this layout, a web browser can show an internet web page correctly.

     <html>
<head>
<title>The Page Title</title>
</head>
<body>


</body>
</html>

What is HTML tags?

HTML tags are element names enclosed in an angle bracket.
<tag name></tag name>
HTML tags always come in pairs. The first tag in a pair is the start tag while the second tag is the end tag. The end tag is written like the first tag, but with a forward slash before the tag name.


Note: when opening an HTML tag don’t forget to close the tag. This is to keep away from mistakes on your output show while regard with the web browser.

Web browsers

The purpose of web browsers is to read HTML files and show them. Examples of internet browsers include Google chrome, Mozilla Firefox, safari, etc. They determine how HTML document are displayed.

web browser

Html web page structure

A visualization of an html web page structure is shown below:

web-page-structure
Only the <body> region (the white place) is displayed via the browser. The grey areas are the non visible areas of the web page i.e. they're not displayed by the browsers however they decide the way to show the document on a browser. 

HTML Editors

Web pages are created and modified using professional text editors. However, for studying it’s encouraged you use a simple text editor like Notepad for windows and Text Edit for Mac, the usage of a simple text editor is a simple way to learn html.
Follow the approaches underneath to create your first web page.

For Mac users

 Open Text Edit

Open finder, navigate to application and click on Text Edit

Note: you need to change a few preferences to get the application to save files correctly. To do this, go to preference, navigate to format and select “plain textual content”.

Then under “Open and Save”, check the “Display HTML files as Html code instead of formatted text” box. Now open a new file to place the code

Write a few codes

write some html into the text editor. You may write the code below into your text editor
<!DOCTYPE html>
<html>
<head>
<title>The Page Title</title>
</head>
<body>
<h1>Hello World</h1>
<h2>This is my first web page</h2>
</body>
</html>

For window user

Window 8 or later
Open the Start Screen. Type Notepad and launch it

Window 7 or earlier
Click on the start button click on programs go to accessories and click on Notepad

Write a few codes
Write or copy some HTML into the text editor. You can write the code below into your text editor.
<!DOCTYPE html>
<html>
<head>
<title>The Page Title</title>
</head>
<body>
<h1>Hello World</h1>
<h2>This is my first web page</h2>
</body>
</html>

Save the HTML page

Save the file on your computer. Select file, click on save as in the text editor menu. Name the file”index.html” and set the encoding to UTF-8
Note: In building Websites the first page of the website is called the index page additionally when saving your web page always change the encoding option to UTF-8 which is the preferred encoding for HTML files.
View your HTML page in your browser.
After saving, open the html files in your preferred browser, the end result have to look similar to this.

Now we know the basic of Hyper Text Markup Language, It doesn’t have to be daunting learning. In our next post I will be talking about HTML elements.

If you find this article useful, share in your preferred social network.