This article would describe the coding or marking up of a simple but valid HTML page. It does not cover all the HTML tags and for such a requirement, the HTML specifications at the W3C may be referred.
Introduction
HTML is Hyper Text Markup Language. It was designed for creation of web pages that would be served over the internet to the browsers of the visitors of websites. The HTML is used to markup the content with headings, emphasis, underlines, paragraphs and other things. The complete specification of the HTML is maintained by the World Wide Web Consortium (W3C).
Here we will try to create a simple web page that would have a heading, about two paragraphs, with some of the text with in it underlined and some emphasized. By following this write up, one should be in a position to read and understand the specifications provided by the W3C and proceed to build more complex web pages and websites.
Structure
The structure of a HTML page is quite straight forward. It contains the following:
- Document Type Definition
- The "Head"
- The "Body"
Document Type Definition or DTD is not necessary for a document to render in the modern day browsers, as the browsers take a default option and renders the document anyway - but having a DTD make it a valid HTML page. The "Head" and the "Body" form the actual content of the HTML page.
Document Type Definition
It would be a good idea to put some effort in understanding the DTD since it makes a considerable parameter in designing a valid HTML page. DTD owes its roots to XML (Extensible Markup Language). XML is a markup language like HTML but forms a super set to it. In other words, HTML is just a subset of XML.
DTD is a term used to the element that describes on which set of rules the document is written. Thus, a DTD in a HTML page specifies which version of the W3C HTML Standards the page follows.
For simplicity, we will look into the two types of DTDs used in HTML pages.
- Strict: As the name suggests, it is a strict standard for HTML. It excludes the presentation attributes and elements from the markup that would go into Cascading Style Sheets (CSS). To have this as a standard, the first line on the page would be
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
- Transitional: This includes the presentation attributes and elements with in its definitions. To have this as a Standard for the HTML, one would include the following markup code as the first line of the page
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
It is understandable for a beginner to skip the study of DTD due to the complexity involved, and hence a general advice for the beginners would be to just include the Transitional DTD.
Mark it up
Now that the DTD is out of the way, we may start looking into the actual markup. It is as follows:
<html>
<head>
...
</head>
<body>
...
</body>
</html>
The markup is composed of tags in HTML as with any other XML. And like in XML, all tags must have a start and an end, and they may not overlap each other.
Here, as we can see, the content is enclosed with in the and tags. The content is separated into two parts - the "Head" and the "Body". For a simple page, the
is not very necessary, but we may include a
tag. The string within the <title> tags is displayed in the top bar of the browser window.</p>
<p><code><head><br />
<title>A Simple Page</title><br />
</head></code></p>
<p>Now as we move on to the "Body" we are given a numerous number of options by the HTML specifications. We will look at some of them:
<ul>
<li>Headings: These are just that. The tags range from <h1> to <h6> which are the various levels of headings available.</li>
<li>Emphasis: This emphasizes the text within it, and most of the browsers choose to italicize the text when emphasized. The tag is <em>. (Note: It is advisable to avoid the italicize tag <i> as we are aiming at a semantically valid HTML page)</li>
<li>Strong: This tag, <strong> usually makes the text bolder in most of the browser. (Note: Again, avoid using the <b> tag to achieve a semantically marked up content)</li>
<li>Paragraphs: A paragraph is marked up by the <p> and </p> tag.</li>
</ul>
<p><strong>Complete marked up content</strong><br />
For sake of display, I have taken up the content "Lorem ipsum" that are usually used by most web designers for dummy content. Contrary to what one may assume, it is not a random text. It finds its roots in a piece of Latin literature.</p>
<p>Here is the HTML code for a simple HTML Page:<br />
<code><br />
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><br />
<html></p>
<p><head><br />
<title>A Simple Page</title><br />
</head></p>
<p><body><br />
<h1>Morbi sit amet sem consequat</h1></p>
<p><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla euismod. Nam suscipit, eros nec scelerisque placerat, metus purus blandit justo, id pretium dui elit quis risus. Aenean sollicitudin, erat eget lobortis congue, sapien mi vehicula erat, vulputate aliquet lacus mi a felis. <em>Sed quis metus eget</em> odio congue vehicula. Vestibulum ultricies, nisi non accumsan tempus, diam sapien facilisis odio, et pulvinar massa mauris porttitor est. Curabitur in risus ut quam convallis lobortis. Pellentesque iaculis sem vitae mi dignissim consectetuer. Nam ut orci egestas sem vehicula viverra. Mauris eu dui eget dui aliquam rutrum. Sed at diam a sem facilisis scelerisque.</p> </p>
<p><p>Nunc aliquam. Praesent mattis nunc vulputate neque. In hac habitasse platea dictumst. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. <strong>Integer enim</strong>. Praesent mollis, ipsum a feugiat ornare, augue tellus egestas tellus, sit amet ullamcorper nunc ante in odio. Fusce sed tellus et sem consequat viverra. Morbi porttitor, libero non lacinia tempus, turpis dui faucibus dui, ut pretium eros mauris nec sapien. Proin a elit non diam tempus blandit. Curabitur sit amet pede a nisi tristique ullamcorper. Mauris at nulla. Aliquam sed lorem id lacus ornare porta. Etiam ac diam. Praesent laoreet posuere tellus. Suspendisse tellus nunc, cursus a, mollis eget, euismod nec, elit. Quisque accumsan, velit sed sodales faucibus, neque nunc semper mauris, nec egestas risus pede aliquet sapien. </p></p>
<p></body></p>
<p></html><br />
</code><br />
That would be all that it takes to create a simple HTML page. Note the use of <h1>, <p>, <em> and <strong> tags with in the <body> tags.</p>
<p>Copy or write the above text into a simple text editor and save it as a .htm or .html page. Then you may open it sing your HTML browser, and you can see the result.</p>
<p>You may check the page at: <a href='http://k.mahesh.bhat.googlepages.com/simple.html'>A Simple Page</a></p>
<p><strong>Further study</strong><br />
As stated earlier, this is not the exhaustive display of all the HTML tags. An important tag, the anchor or hyperlink text has been not discussed in this article and would be the next step for any who wish to pursue more on HTML page creation. Also, there are further topics on presentation that make use of Cascading Style Sheets (CSS) that would require extensive study of it.</p>
<br class="clear"/><!--adsense: cached-->
<div class="adsense">
<script type="text/javascript"><!--
google_ad_client = "pub-5063503058823735";
google_ad_type = "text_image";
google_ad_channel = "9102475783";
google_ad_width = 468;
google_ad_height = 60;
google_ad_format = "468x60_as";
google_color_border = "000011";
google_color_bg = "FFFFFF";
google_color_link = "336699";
google_color_url = "3399FF";
google_color_text = "111111";
//--></script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
<!-- google_ad_section_end --> </div>
<div class="clear-block clear">
<div class="meta">
<div class="terms"><ul class="links inline"><li class="first last taxonomy_term_1"><a href="/topics/technology" rel="tag" title="" class="taxonomy_term_1">Technology</a></li>
</ul></div>
</div>
<div class="links"><ul class="links inline"><li class="first last comment_add"><a href="/comment/reply/5#comment-form" title="Share your thoughts and opinions related to this posting." class="comment_add">Add new comment</a></li>
</ul></div>
</div>
</div> <span class="clear"></span>
<div id="footer">
<div id="block-block-1" class="clear-block block block-block">
<div class="content"><p>WiseTome © 2006-2008</p>
</div>
</div>
</div>
</div></div></div></div> <!-- /.left-corner, /.right-corner, /#squeeze, /#center -->
<div id="sidebar-right" class="sidebar">
<div id="block-node-0" class="clear-block block block-node">
<h2>Syndicate</h2>
<div class="content"><a href="/rss.xml" class="feed-icon"><img src="/misc/feed.png" alt="Syndicate content" title="Syndicate content" width="16" height="16" /></a></div>
</div>
<div id="block-adsense-1" class="clear-block block block-adsense">
<div class="content"><!--adsense: cached-->
<div class="adsense">
<script type="text/javascript"><!--
google_ad_client = "pub-5063503058823735";
google_ad_type = "text_image";
google_ad_channel = "9102475783";
google_ad_width = 160;
google_ad_height = 600;
google_ad_format = "160x600_as";
google_color_border = "000011";
google_color_bg = "FFFFFF";
google_color_link = "336699";
google_color_url = "3399FF";
google_color_text = "111111";
//--></script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
</div>
</div>
</div>
</div> <!-- /container -->
</div>
<!-- /layout -->
<script type="text/javascript" src="/modules/adsense/adsense_click.js"></script>
<script type="text/javascript" src="/files/googleanalytics/urchin.js"></script>
<script type="text/javascript">
_uacct = "UA-583452-1";urchinTracker();
</script>
<script type="text/javascript" src="/modules/google_analytics/downloadtracker.js"></script>
</body>
</html>