HyperText Markup Language is the alphabet of the World Wide Web. Web browsers decode information written in HTML into pictures, formatted texts and other features of a web page design. Analogous to a newspaper's editor, HTML transforms text and coded information through web design into a better, more readable form fit for consumption by internet users around the world.
The only way one can learn any programming language outside a classroom is by using it and learning its intricacies while using it. Thus, I urge you, the reader, to perform this small web-building exercise to better know the internet's language: HTML.
Open notepad and paste this entire section of code:
<html>
<head>
<title>My website</title>
</head>
<body>
<h2>My Header</h2>
<p>
This is the opening paragraph. This is preformed by the “p” tag or the paragraph tag. Here we see how we can <b>emphasise</b> text using the “b” tag, or the bold tag, or even <i>italicise</i> it using the “i” or the “italics” tag. As you can see, the browser does not display the tags, rather it formats the tags according to the instructions it has received and makes it into a formatted piece of rich text.
</p>
<p>
This is the second paragraph. This is an independent paragraph as can be seen by the double space separation. This makes the entire body look well written and formatted. You can use bulleted lists:
<ul>
<li>Like</li>
<li>this</li>
</ul>
Using HTML as well!
</p>
<p>What is your favourite meal?
<select>
<option>Burgers</option>
<option>Pepperoni</option>
<option>Macaroni and Cheese</option>
</select>
</body>
</html>
Save this piece of code as a .HTML file and open it using a web browser (such as Internet Explorer or Mozilla Firefox) You will see a completely new page with great formatting that looks completely different from what you coded, except for the content itself.
Here I explain what the different tags mean:
<HTML>: This tag defines that the document presented is in HTML format. All HTML tags have a starting tag such as <x> and an ending tag </x> (a forward slash preceding the tag name). The attributes of that tag are applied to the content between it. Thus all attributes of the tag HTML are applied to the content within it.
<HEAD>: The head tag forms the header of the web page. This contains a short introduction to the website and is found atop the page.
<TITLE>: This tag has a short bio of the website and is found under the <head> tags because it does not directly come to play within the website's content. It is found on the active window bar as the page's title in your web browser.
<BODY>: This tag contains content that is actually readable or usable by the visitor. It is not ephemeral like the <head> tag. All the processes inside a web page occur within this tag.
<P><B><I><UL><LI>: Explained in the document itself. Figure it out!
<SELECT>/<OPTION>: These two tags create a drop-box with the question contained within the <select> tag and the options inside individual <option> tags nestled within these <select> tags (much like a <ul>/<li> partnership).
Learning HTML is not too hard - it's actually quite enjoyable. It also forms the stepping stone of web design wherein you can go for much more complex designs when your fundamentals are rock solid. Javascript, PHP, Ruby and ASP are all based upon HTML's basics and are much easier to learn once you know this bread-and-butter language!
Website designers put a lot of work and effort into their work and the results are in the design and usability of the site. To maximise your web site design there are lots of tips and techniques available to your web site optimisation.