Did you ever think how is all the websites made? Many pupils out there are really curious about creating their own site. Well you cannot simply build a website of your own without knowing some basic languages. Here comes the importance of HTML a.k.a Hyper Text Markup Language. You can make a basic web page with html only (though there are other type of advanced languages needed, such as PHP, Java etceteras, they are discussed later on). When you open a page in your browser, you are actually opening a HTML file. The file is as same as an MP3 music file or an AVI video file. But as you can see it comes with some different functions. An mp3 file needs a media player to run the file, a doc file needs MS Word to run it, whereas an HTML file requires a web browser to run. The basic principle of opening a website is: at first build one or more HTML file(s) and then host it at some web servers. For ease to understand you can consider the server as an online storage where you can simply store HTML files and anyone from the world can access it through it's address (i.e. the url). Servers and stuffs will be discussed later. Hope I succeeded clarifying the basic concept behind web developing. So let us begin our incredible journey towards learning HTML.
History of the language:
Ti's the boring part of this post. Everyone usually skip this part, but I recommend strongly that you should have a brief look at the history of a new thing that you're going to learn today.
HTML was written by a well known physicist, Tim Berners-Lee at the late 1990s. Since then many versions of HTML has been published. The revolution that started with HTML 2.0 at 1995, went on to HTML 3.2 1997 followed by HTML 4.0 lately at the same year and HTML 4.01 at the end of 1999 and lastly HTML 5 at 2012. In between these years XHTML, XML were also discovered and researched upon, but that doesn't come to our consideration now. So that was the history of the markup language that we're talking about. Enough for the history, now lets concentrate on how is it actually done!
Creating an HTML file:
Usually an html file is called a web page. The file contains some coding. Those coding are done with some html tags. HTML tags are some specialized keywords (which are prebuilt by experts). These tags are written in between angle brackets (< & >). For example, <body>, <head> etc. Normally, when you start a tag you've to end it somewhere. E.g. <body> Hey there </body>. The first tag is called Start tag and the last tag is called Close tag. As you can see, the start tag comes with a Front Slash in it's beginning. As these comes in pairs you can call it paired tags. On the other hand there are some tags that comes alone (like <br /> tag). You can call these lone tags.
All tags have some function of it's own. The stuffs written in between the start tag and close tag are called HTML Elements. In short, you say the browser what to display by the HTML elements and how to display by the HTML tags. The work of all the HTML tags will be covered in the next chapters. So for now lets see how to create an html page.
Example:
First of all open notepad and type/copy-paste the following code.
<!DOCTYPE html>
<html>
<head>
<title>
My first HTML coding.
</title>
</head>
<body>
<p>Hello world.</p>
</body>
</html>
Now save that file with a .html or .htm extension. For example, samplepage.html. After saving it open the file (by double clicking). This will open the file with the default browser. Here's a screenshot of the output of the previous code.
The Code Explained:
Here the coding started with a tag called <!DOCTYPE html>. This is used to notify the document type to the browser so that it can display the web page correctly in all browsers. This example is for HTML5. But for HTML 4.01 it should be like —
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
Then we can see the tag <html>. It is rule to write the coding in between <html> & </html>.
The <title> & </title> describes the title of the document, which you can see at the top of the browser window while opening it. This tag should always be written in between <head> and </head> tag.
The most important tag of a web page is <body> tag. Whatever visible content does the page has, it got to be into <body> and </body>. All other tags like <p>,<font><br /> etc. can come into this parent tag. So you can call it mother of all tags.
The stuffs between the <p> and </p> tags are utilized to display any text as paragraph.
So these were the basics of HTML documentation. Later you'll learn about these tags in more detail.
At the end, here's a basic block diagram of a html document. Download it and keep it for offline reference.
Lastly, to learn any coding language the main key is: Practice, Practice & Practice. So go try this of your own. You may fail at first. But don't worry that's how people learn. I'll be posting more articles soon. Till then, #Peace.
Photocredit: Slavik_V via PhotoPin licensed under Creative Commons 2.0
