HTML and its Basic Structure
Hyper Text Mark-up Language (HTML) is the very basic language used in displaying a website. It is the most basic language still used widely to built websites.Html is about to stay in World Wide Web for decades to come. Html is not a programming language, instead it is called as the Mark Up language. Programming language is something, were we write source codes to develop applications in the way we want, whereas Mark-Up language already consist of pre written Mark Up Tags. I said Mark-Up language (HTML) is made of Tags. So what is a Tag? For example consider there is a Reception Hall in an organisation, were there is a common entrance in the front, a reception cabin in the side, a stair case in the center. It means while building the hall, engineers planned and decided front goes for entrance, center goes for staircase etc. So they already tagged well before constructions, what goes were. Similarly in HTML, everything is pre written in the form of Tags. Our job is to use those Tags in appropriate places of the web page along with the contents we planned to put in our web site.
Hope this gives a clear picture of what an Html is made up off. In simple terms Html is made up of Tags and nothing more than that. So, we will spend rest of the time concentrating on the available Html Tags, how they can be effectively used along with practical examples.
Basic Structure
Well, the basic structure of Html is noting but the way, we write the Html Tags. Have a look at the Html Structure below.
| <html> <head> <title> Name or Title of the web page goes here. </title> </head> <body> Contents for the body of the web page goes here </body> </html> |
Every web page created with Html will definitely look like this. Note the first line. It starts with Html Tag <html>. Also note the last line, the Html page ends with forward slash followed by Html inside the Tag</html>. Now have a look at the second and fourth line with the head tag <head> </head>. This place is used for header related operations, variable declarations for use by scripts and also to include the title of the webpage.
So what is a Title Tag?
When we open any application in windows or Linux or in any operating system, just say for example, that we are opening Ms Word in Window, at the top left corner of your application just above the menu bar, you will find the Name_of_the_document – Microsoft word (If you are opening a new word document, there will be default name “Document1-Microsoft word”). So this is actually what we call the title. Just open any webpage in the internet, you will find a name for that particular webpage at the top left corner which best describes about the content inside the webpage and we call this as the title of that web page. So, whatever we write between the Title Tag <title> Web page Title </title> , it will be appearing in the top left corner of the web page as the title for that particular web page.
Next to the header is the body tag <body>. So, what is the Body Tag?
Well, whatever wee write in between the body tag <body> contents </body> , that will be displayed in the body of the webpage. Shortly speaking, actual contents, what we would like to put in our webpage.
We just had a brief look at the structure of the Html webpage. Please remember that, when ever we open a Tag < > in Html it should also be closed with appropriate closing Tag < />.
Sample Tutorial
So, we are going to write a small Html web page. Where do we type the Html code for our web page?. You can use a simple text editor to do that. I am using a notepad here.
| <html> <head> <title> My First Webpage </title> </head> <body> Hello, I just created my first Html web page and it looks embarrassing, but soon, I goanna develop my skills and design web pages which would look awesome. </body> </html> |
After finished typing the above in Notepad save the file in any convenient location of your choice. I am going to save in my desktop. While you save from the Notepad in the save dialog box, give a file name to your web page plus don’t forget to type dot html (file_name.html). I am saving as test.html, close your Notepad, go to the location, were you saved your file, it will appear as a web page file with icon of Internet Explorer or Firefox (depends on what is set as the default browser in your PC).Open the web page and you will get a display like this.
Output
Not bad huh?. We just demonstrated a simple form of webpage, where in real world application, this is far from nothing. What we did is just a demonstration, but to make it as real web page, we need to do lot of formatting. So from here onwards, we will start concentrating on how to format our web page and fine tune it to perfection in the next topic “HTML Tags for formatting”.