Good Source Code VS Ugly Source Code

 


We need to break 99% of the students of the "initial nasty source code" infliction.  Here are two examples ... you should be able to see the difference.  Is this important?  You bet!  It  is more important than the actual HTML stuff.  As the pages get more difficult  ... you will thank me.  I learned the hard ... debugging is easier if your source code is 'clean'.

Good, Clean Source Code

<html>

<head>

<title>Lists</title>

</head>

<body bgcolor="FFFFFF">

<center>
<h1>The Ever-Popular List(s)</h1>
</center>

<hr>

<p>
There are three basics lists which are widely used. They include ordered, unordered and definition.
</p>

So what is the difference?? 

<br><br>

<u>Unordered Lists</u> - Use the popular bullet icons. There are three types which is designated through the 'type' attribute. They are disc (default), square, circle. 

  <ul>This is an example of using the default. Check the page source to view the nice structure.
     <li>Yo</li>
     <li>Yo</li>
     <li>Yo</li>
  </ul>

  <ul type=square>Here is an example of using the type attribute with the ul tag.
     <li>Yo</li>
     <li>Yo</li>
     <li>Yo</li>
  </ul>

  <ul>Here is an example of using the type attribute with the li tag.
     <li type=square>Yo</li>
     <li type=circle>Yo</li>
     <li type=disc>Yo</li>
  </ul>

<hr>

</body>

</html>

Nasty, Unacceptable Source Code

<html>
<head><title>Lists</title></head>
<body bgcolor="FFFFFF">
<center><h1>The Ever-Popular List(s)</h1></center>
<hr><p>
There are three basics lists which are widely used. They 
include ordered, unordered and definition.
</p>So what is the difference?? <br><br>
<u>Unordered Lists</u> - Use the popular bullet icons. There
are three types which is designated through the 'type' 
attribute. They are disc (default), square, circle. 
<ul>This is an example of using the default. Check the page source to view the nice structure.<li>Yo</li><li>Yo</li><li>Yo</li></ul>
<ul type=square>Here is an example of using the type
attribute with the ul tag.<li>Yo</li><li>Yo</li><li>Yo</li></ul>
<ul>Here is an example of using the type attribute
with the li tag.
<li type=square>Yo</li>
<li type=circle>Yo</li>
<li type=disc>Yo</li>
</ul>
<hr>
<u>Ordered Lists</u> - This list is based upon the number
system. There are five types which is designated through the 'type' 
attribute. They are 1 (default), A, a, I, i. 
<ol>This is an example of using the default. Check the page source to view the nice structure.
<li>Yo</li><li>Yo</li><li>Yo</li></ol>
<ol type=A>Here is an example of using the typeattribute with the ul tag.
<li>Yo</li>
<li>Yo</li>
<li>Yo</li>
</ol>
<ol>Here is an example of using the type attribute with the li tag.
<li type=1>Yo</li>
<li type=I>Yo</li>
<li type=A>Yo</li>
</ol>
</body>
</html>

Which one would you rather debug???





Copyright © 2000 - Indiana University Purdue University - Indianapolis