|
Line Breaks
|
Putting all your code in one solid mass, without whitespace between sections,
can make it difficult to identify important sections quickly and easily.
Compare these two examples:
| Poor |
<?xml version="1.0"
encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Hello!</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
</head>
<body>
<p>Hello, World </p>
</body>
</html> |
| Better |
<?xml version="1.0"
encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Hello!</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
</head>
<body>
<p>Hello, World </p>
</body>
</html> |
The simple addition of blank lines separating the major sections (the
Prolog, the Head, and the Body) make it much easier to find relevant parts
of the code.
think about it...
- What are some other parts of code you could separate to
make things clearer?
- Are blank lines better for separating parts of a file, or
are lines of characters, such as
<!-- ----------------------------------------- -->
more effective? Why?
|
Do it...
- Edit your template file (from module X10i).
- Separate the Prolog, the Head, and the Body by putting in
blank lines or rows of characters.
|
Another way in which line breaks can be used is to line up structures
that are similar.
| Poor |
| <p>We can create
millions of colors on Web pages, the most popular of which are <span
style="color: red;">red</span>, <span style="color:
yellow;">yellow</span>, <span style="color:
green;">green</span>, and <span style="color:
blue;">blue</span>. </p> |
| Better |
<p>We can create millions of colors on
Web pages, the most popular of which are
<span style="color:
red; ">red</span>,
<span
style="color: yellow;">yellow</span>,
<span
style="color: green; ">green</span>,
and
<span style="color: blue; ">blue</span>.
</p> |
| Browser Display (of both) |
|
We can create millions of colors on Web pages, the most popular of which are
red,
yellow,
green,
and
blue.
|
think about it...
- What makes the second arrangement of code better than the
first?
- Are there other coding situations you've worked with where
lining similar items up helps? If so, what are they?
|
Do it...
- Create a new XHTML file using your template file.
- Paste this code into it, and line the code up for clarity:
<p> <span style="font-size: 6px;">Example
text, 6 pixel height</span><br /> <span style="font-size:
6px;">Example text, 11 pixel height</span><br />
<span style="font-size: 6px;">Example text, 16 pixel
height</span><br /> <span style="font-size:
6px;">Example text, 21 pixel height</span><br />
<span style="font-size: 6px;">Example text, 26 pixel
height</span><br /> </p> |
|
|
Indenting
|
Indenting lines of code is another way - perhaps the most useful way
- of making your code clear. Here's the general idea:
- When one (X)HTML block entity contains another, the one inside should
be indented.
- When an entity has more than two or three lines of code, line up the
start and end tags so there is a clear line of sight
between them. This is done by indenting the lines between the start
and end tags.
| Better |
<?xml version="1.0"
encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Hello!</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
</head>
<body>
<p>Hello, World </p>
</body>
</html> |
| Best |
<?xml version="1.0"
encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Hello!</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
</head>
<body>
<p>Hello, World </p>
</body>
</html> |
Do it...
- Edit your template file again.
- Indent tags in the Head and tags in the Body, as shown above.
|
The benefit of indenting becomes more obvious as the HTML structures
become more complex. Even if you're not yet familiar with more complex
structures like tables and lists, you may be able to appreciate the clarity
of the better code in the following example, which uses nested lists.
Key:
- <ul> = Unordered List
- <li> = List Item
| Browser Display (of both) |
Grocery List
- Produce
- Lettuce
- Carrots
- Asparagus
- Dairy
- Milk
- Cheese
- Mozzarella
- Monterrey Jack
- Eggs
|
| Poor |
<body><h1>Grocery List</h1>
<ul>
<li>Produce
<ul>
<li>Lettuce</li>
<li>Carrots</li>
<li>Asparagus</li>
</ul>
</li>
<li>Dairy
<ul>
<li>Milk</li>
<li>Cheese
<ul>
<li>Mozzarella</li>
<li>Monterey Jack</li>
</ul>
</li>
<li> Eggs</li>
</ul>
</li>
</ul>
<body> |
| Better |
<h1>Grocery List</h1>
<ul>
<li>Produce
<ul>
<li>Lettuce</li>
<li>Carrots</li>
<li>Asparagus</li>
</ul>
</li>
<li>Dairy
<ul>
<li>Milk</li>
<li>Cheese
<ul>
<li>Mozzarella</li>
<li>Monterey Jack</li>
</ul>
</li>
<li> Eggs</li>
</ul>
</li>
</ul>
|
think about it...
- Is the second arrangement really easier to read than the
first? If so, why?
- Looking at the example above, how would you explain when
to indent a line of code?
- How would you explain when to un-indent a line of code?
|
General rules for indenting HTML code:
-
When two starting tags occur with no ending
tag between them, indent the second tag.
-
When two ending tags occur with no starting
tag between them, out-dent the second tag.
-
A self-closing tag is neither indented not out-dented.
-
All other tags should line up with one another.
|
|
Comments
|
Comments can be used to guide you to the part of the code you need to
work with. They're especially important in (X)HTML when you're working
with long sections of repetitious code, such as large tables and lists.
Comments are critical when using tables for layout (see module W24e).
A comment in code is a statement that is visible to coders, but "invisible"
to the software that runs the code. In (X)HTML, comments are made "invisible"
by putting them in these tags:
<!-- -->
You need a space between the markers and your actual comments:
| Wrong |
Right |
<!--Main Section--> |
<!-- Main Section --> |
This example improves on the previous one by adding comments:
| Better |
<h1>Grocery List</h1>
<ul>
<li>Produce
<ul>
<li>Lettuce</li>
<li>Carrots</li>
<li>Asparagus</li>
</ul>
</li>
<li>Dairy
<ul>
<li>Milk</li>
<li>Cheese
<ul>
<li>Mozzarella</li>
<li>Monterey Jack</li>
</ul>
</li>
<li> Eggs</li>
</ul>
</li>
</ul> |
| Best |
<h1>Grocery List</h1>
<ul> <!-- Begin main list -->
<li>Produce
<ul> <!-- Begin produce list -->
<li>Lettuce</li>
<li>Carrots</li>
<li>Asparagus</li>
</ul> <!-- End produce list -->
</li>
<li>Dairy
<ul> <!-- Begin dairy list -->
<li>Milk</li>
<li>Cheese
<ul> <!-- Begin cheese list -->
<li>Mozzarella</li>
<li>Monterey Jack</li>
</ul> <!-- End cheese list -->
</li>
<li> Eggs</li>
</ul> <!-- End dairy list -->
</li>
</ul> <!-- End main list -->
|
Pointers for comments
- Place comments so they don't interfere with the indentation.
- Commenting the end of an entity is just as important as commenting
the beginning - particularly if it helps you see what the end-tag is
the end of.
- Don't comment obvious things - that is, where the code is already
clear (like the beginning and end of the Head and Body sections).
|
|
Copy-and-Paste
|
When you're entering code by hand in a text editor, let the computer
do the repetition by using copy-and-paste rather than re-typing. This
is "working smart" for several reasons:
- The obvious reason: it's quicker than re-typing the same
thing over and over;
- It cuts down on errors - both the normal ones, and the ones
caused by boredom;
- It makes it easier to be consistent. Consistency makes it
easier to spot errors, and easier to correct them.
|
|
Re-use Existing Code
|
Software development in general is slow because so much software is written
"from scratch" - starting from the beginning.
One of the best things you can do is to create a template for your work.
In addition to the basic XHTML template described in module X10i,
you can create specialized templates for particular kinds of pages. When
you do a large site, template files are especially important to help achieve
site-wide consistency.
Of course, this means use your own work - not that of others.
It's not an invitation for cheating and copyright violation! |
