In our previous lesson we have discussed about the significance of HTML standards and the difference between the 3 existing versions. And now that we all are well versed with the basics of HTML, it's time that we start focusing upon ways to create a HTML document.
Welcome to Lesson 2 - Creating HTML Documents.
This tutorial is NOT a comprehensive synopsis of HTML, but it is well-designed to let you categorize the connotation and rationales of the HTML tags, setting up your own workspace for creating a new HTML document, the employment of text editors, insertion of comment tags for your later reference and also opening up your very own created HTML document in the web browser.
As discussed earlier, HTML is the argot of the World Wide Web. A series of tags incorporated into a text document to specify the layout of the requisite text information over the internet, HTML tags are purely a left angle bracket ( < ) followed by an edict or some more parameters closed by a right angle bracket ( > ). The text information / content being displayed over the internet are read by the web browser from a plain text file by interpreting the commands recorded within the special codes or what is technically termed as "tags". Following is the format of HTML tags:
<tag_name>the text information / content</tag_name>
An example, the lesson starts off with a small paragraph followed by the title that employs a header tag –
<p>In our previous lesson we have discussed about the importance of <b>HTML</b> standards and the difference between the 3 existing versions. And now that we all are well-versed with the basics of HTML, it's time that we start focusing upon ways to create a HTML document.
<h1>Welcome to Lesson 2 - Creating HTML Documents</h1>
Now this particular tag commands the web browser to display the introductory paragraph over the document title, and the title has to be displayed as a header text - "Welcome to Lesson 2 - Creating HTML Documents". As is apparent from the example above, the header tag is denoted by <h>... </h>, and depending upon the header level it is followed by 1, 2, 3 and so on; <p>... </p> denotes the paragraph and <b>.. </b> is the tag for bold cases. In a similar fashion HTML tags can also prompt the web browsers to italicize the text info or to put in an underline, display it as a second header, or make it a hyperlink to another web page. Regardless of your tagging cases i.e. upper case or lower case (<p> ... </p> or <P> ... </P>), the web page displays your document exactly the way you want it to be.
Remember, tags always move in pairs. Every time you use an opening tag – say <h>, <p>, <b>, <i> - you must also close it off with its corresponding closing tag - </h>, </p>, </b<, </i>. And as for the slash (/), it tells apart a closing tag and an opening tag. It is the slash that commands the web browser to stop tagging the text. And in case you skip it off, the tagging continues for the rest of the text information in your document, thus delivering detrimental domino effect. The best thing about creating a HTML document is, you make a typographical error and the same will be reflected in your web page. Rectifying the wrongly written code is quite quick and easy. You go inside the HTML and make the necessary change… that’s all!
Prior to creating a HTML document, it is important that you create a workspace for yourself. Following are the steps of setting up your work space:
- From your browser go to the File menu -> New Tab/ New Browser. This will bring up a second window/ tab. Assume the first window to be your "textbook" and make the second one your "workspace" for understanding the HTML lessons.
- Next, minimize the browser and go to your desktop to open the text editor program.
With the text editor program opened up, now you can go ahead and start writing your set of HTML codes. When creating a basic HTML page, begin with the <html> tags. In between the tags, the file comprises of two sections – the header and the body. The header – enclosed by the <head> and </head> tags – contains information about a page that won't appear on the page itself, such as the title. The body – enclosed within the <body> tags is the place for all actions. Everything that appears on the page is contained within these tags.
Following is the format of a basic document:
<Html>
<Head>
<Title> Enter the document title </Title>
<! -- Header info used to contain extra information about
This document, not displayed on the page -->
</head>
<Body>
<! -- All the HTML for display -->
: :
: :
: :
</Body>
</Html>
It is within the <html>...</html> tags that all your HTML texts will remain enclosed. First comes the <head>...</head>, followed by the <body>...</body> segment. The text information enclosed within the comment tags (<! -- -->) are NEVER displayed in the web page. Comment tags are just for your information that might be of use to you or anyone else taking a quick look beyond the web pages. When your web pages get complicated with loads of tables, frames and other stuff, these comment tags will be of great help in understanding and updating the pages.
Once you’re done with writing the HTML codes, save the file as filename.html. It is by the file extension name - .html – that the browser will know that the file text has to be read as HTML, and the content will be properly displayed over the web page.
Finally it’s the time for you to view your newly created web page! Go back to your workspace. Click on “Open File” from the “File” menu, select the file using the “browse” feature or the dialogue box and you should now see your web page being displayed in front of you!
Original Authors: Rajat
Edit Update Authors: M.A.Harris
Updated On: 22/04/2009
