Thursday, April 26, 2012

BASICS OF WEB DESIGN: HTML Comments and Indentation

       In this tutorial, we'll learn about comments. This tag is used to add comments that aids in making HTML code understandable not just to others, but also to the writer. A comment in HTML is enclosed between <!-- and -->, anything whatsoever between those isn't rendered by the browser. Just like in programming, an uncommented HTML document (especially voluminous ones) is very hard to edit even to the writer.
Open the file "first.html" we created before in notepad and then add the comment (in green) after the html tag and then save the document and close notepad (NB: Comments can be placed anywhere in a HTML code).

<html>
<!--this is my first comment -->
<head>
<title>the world is ending</title>
</head>
<body bgcolor="ffff00">is the letters showing?
</body>
</html>

      When we open it up in a browser, apparently nothing changed and there wasn't even an error yet we added something to our code

     Apart from adding description that explains a code, comments is also used to prevent a block of code from being rendered without deleting it. For instance i can make the text in the web page disappear using a comment tag without having to delete it physically. To achieve This, just open the the page with a notepad, remove the previous comments we added above (if you ) and then enclose the text in the body of the page within a comment tag and save. Open the HTML document with a web browser and SHAZAM! The text is gone without you deleting it. This practice is known as "commenting out" a code and is used when debugging a HTML file manually to detect a problematic code.

<html>
<head>
<title>the world is ending</title>
</head>
<body bgcolor="yellow"><!--is the letters showing?-->
</body>
</html>


     Another practice that makes a code easy to read and more beautiful is Indentation. indenting your codes makes it look nice and you can easily dictate which tag contains which. In a nested tags (tags containing other tags), the opening tag and the closing tag of the daughter tags starts after a few spaces from the parent tag and maintains the margin till it's the tag is closed. The code above when indented looks as illustrated below:

<html>
   <head>
      <title>the world is ending</title>
   </head>
   <body bgcolor="yellow"><!--is the letters showing?-->
   </body>
</html>

No comments:

Post a Comment