4.5 Writing HTML
Now, let's render this layout in HTML; I always write HTML with a simple text editor, but you can use a tool like Mozilla composer if you prefer. Such tools often create a very complicated HTML, full of useless tags, so it will be much harder to handle. This is not a limitation of the Mozilla composer of course: a web page should adapt itself to the browser, so a WYSIWYG editor is not a good way to create it. If you decide to use it, you have a price to pay in term of complexity and page size.
HTML code is rendered by your browser with text and images flowing from top to bottom and from left to right; there is no way to define a given layout for your pages. In fact, HTML is a mark-up language: you decide what the elements are, not how they should look. This decision is left to the browser. As an example, when you write '<h1>title</h1>' in your HTML file, you are saying that 'title' is a 'level 1 heading' and your browser will display it according to its concept of heading: visual browsers will use very large fonts while browsers with speech output will probably read it louder than other text. Cascading style sheets (CSS) allow the author to get control over page appearance. As an example a CSS allows to say that h1 means 16 point Helvetica font, blue color, left aligned.
These commonly used stylesheets (called level 1 CSS) don't allow to get control over elements placement: as an example you can't place a navigation bar on the left of page contents. For these tasks you need another type of style sheets: level 2 CSS.
A common trick used to gain control on page layout consists in placing elements in a table. A table is a grid and every element can be placed in a cell (or in a group of contiguous cells) so you can decide exactly where to place elements. Of course you'll create a table with no borders so the underlying structure is hidden.
Even if almost all sites use this technique, remember it's a trick: HTML was not intended to define layout and tables were not intended to store page elements, but tabular data. The main disadvantage can be found in a lack of accessibility from text browsers; later in the tutorial (Section 5.4) we will see how to create an alternate layout accessible to everyone.
After this long prologue, let's create our HTML layout.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <link rel="stylesheet" type="text/css" href="css/style.css"> <title>Title</title> </head> <body> <div id="header"> Logo </div> <div id="menu"> <!-- Begin Main Menu --> Main menu <!-- End Main Menu --> </div> <div id="submenu"> <!-- Begin Submenu --> Submenu <!-- End Submenu --> <p> Quotation --Author </p> </div> <div id="content"> <p id="stack"> History Stack </p> <h1>Title</h1> <p>Page content goes here.</p> <p>Page content goes here.</p> <p>Page content goes here.</p> <p>Page content goes here.</p> <p>Page content goes here.</p> <p>Page content goes here.</p> <p id="revision"> Revision date </p> </div> <div id="footer"> This is a sample site created with <a href="http://www.g-cows.org" target="_blank" class="menuactive">G-Cows</a>. </div> </body> </html>
Note: This page needs a CSS (style.css included at the beginning) to be displayed correctly. This is a very long file and we don't need to look at it now. You'll find it in the example files if you need it.
Here is how it looks from the Mozilla browser:
Now, let's replace labels Logo, Main Navigation Bar etc. with HTML code in order to reproduce the screenshot representing a given page (let's say Vegetarianism > World Hunger).
This is the HTML page.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link rel="stylesheet" type="text/css"
href="../css/style.css">
<title>Animal Rights -- Correlation between meat eating and world hunger.</title>
</head>
<body>
<div id="header">
<img src="../images/logo.png" alt="Animal Rights Site" />
</div>
<div id="menu">
<!-- Begin Main Menu -->
<a href="../index.html">Home Page</a> |
<a href="../vegetarianism/index.html" class="menuactive">Vegetarianism</a> |
<a href="../vivisection/index.html">Vivisection</a> |
<a href="../furs_leather/index.html">Furs and leather</a> |
<a href="../hunting/index.html">Hunting</a> |
<a href="../entertainment/index.html">Animals in entertainment</a>
<!-- End Main Menu -->
</div>
<div id="submenu">
<!-- Begin Submenu -->
<ul>
<li><a href='../vegetarianism/suffering.html'>Animal suffering</a></li>
<li><a href='../vegetarianism/health.html'>Your Health</a></li>
<li>World Hunger</li>
<li><a href='../vegetarianism/act.html'>What You Can Do</a></li>
</ul>
<!-- End Submenu -->
<p>
Many things made me become a vegetarian, among them, the higher food
yield as a solution to world hunger.
--John Denver
</p>
</div>
<div id="content">
<p id="stack">
<a href="../index.html">Home</a>: <a href="../vegetarianism/index.html">Vegetarianism</a>: World Hunger
</p>
<h1>Correlation between meat eating and world hunger.</h1>
<p>
Every day, lots of people experience hunger and die of starvation and
we accept it as an unavoidable fact thinking there's not enough food
for everyone.
</p>
<p>
If you look at the data, however, our lands give us enough food for
everyone. If we directly ate vegetable products, we could feed
everybody in the world and free one billion people from starvation.
</p>
<p>
But luckily we can also process natural products in order to get nice,
tasty food. Rearrangement leads to a small waste of course, but there
would still be enough food for everyone.
</p>
<p>
Problems arise when we come to meat and other animal products; you need
over 10 pounds of grain to produce one pound of beef ! Moreover, grain
used to feed livestocks comes from poor countries, while meat is produced
for the richest ones.
</p>
<p>
That's way one billion people suffer for starvation. Estimations tell us
that if 10 percent of people became vegetarian, there would be enough
grain to save 60 million people from hunger and starvation.
</p>
<p>
If you care for those people, you have another good reason to become
vegetarian.
</p>
<p id="revision">
Last revision: March 31, 2006
</p>
</div>
<div id="footer">
This is a sample site created with <a href="http://www.g-cows.org"
target="_blank" class="menuactive">G-Cows</a>.
</div>
</body>
</html>
And here, how it looks from the Mozilla browser:
As you can see, we have reproduced the original image but now we have links, and the page correctly resizes according to window's size. Images have been cut from the picture created before.
This HTML file won't be used directly with G-Cows; we created it to clearly state our aim: for each page we want this structure and these informations. This step is not mandatory: the more you're familiar with web site creation, the less you'll need it.