Tell a Friend About Our Cool Software
Chapter 2: Review and Practice
It's time to take what you have learned and see it in action. In this section I'll present a complete if basic Web page that uses only tags presented in this chapter. By examining the HTML code and looking at the rendered page you will get a better feel for how all the elements of an HTML document come together to create the final product. Then in later chapters, as you learn more HTML tags, we will improve and expand the page.
The project that we will tackle is a Web page for an amateur photographer. It will be a one page site, at least for now, and because it is a photographer's site it will include lots of images, providing good practice for this important part of Web design. I'll be using my own images for the examples--if you want to work through it yourself you will have to locate some images to use.
What are the goals for the page? It's usually a good idea to think about this before you get started. For now, our goals are fairly simple:
- A title or heading at the top of the page that gives the photographer's name.
- A list of the types of photographs that he specializes in.
- A small selection of photographs to tempt prospective customers.
- At the bottom of the page a brief resume of the photographer's education and experience.
- Near the top of the page, a link that takes the user to the resume.
- <title> and meta tags that describe the page.
I'll warn you now that this page will not be finished in any sense--you would not want to put in on the Web! But that's okay, you're just getting started. We will improve the page in later chapters.
Listing 2 shows the HTML for this first try at a Web page. This HTML uses only the tags you learned about in this chapter. The result is shown in Figure 2.
<html>
<head>
<title>Dave Davison Photographer</title>
<meta name="keywords" content="photography,
photographer" />
</head>
<body>
<p>Dave Davidson, Photographer</p>
<p><a href="#resume">View my resume</a></p>
<img src="image01.jpg" />
<img src="image02.jpg" />
<img src="image03.jpg" />
<img src="image04.jpg" />
<ul>
<li>Fine Art</li>
<li>Landscapes</li>
<li>Architecture</li>
</ul>
<p><a name="resume">Resume</a></p>
<p>Dave Davidson has been an active photographer
since 1992. He specializes in
portraits and fine art prints.</p>
<p>Education</p>
<ul>
<li>BS, Art History, University of Pennsylvania,
1988</li>
<li>MS, Photography, Chicago School of Design,
1991</li>
</ul>
<p>Exhibitions</p>
<ul>
<li>Images From Nature, Smith Gallery, Los Angeles,
1994</li>
<li>Dave Davidson, Photographer in Nature, Oak Creek
Center, Houston, 1996</li>
<li>Architecture of Manhattan, Bowles Museum, New
York, 1999</li>
</ul>
</body>
</html>
Figure 2-8. The first try at the photographer's Web page.
Looking at this Web page, several problems are immediately apparent. The most obvious ones are:
- The text is all the same, with no differences between headings, regular text, and so on.
- The images are just lined up with no attention to their placement relative to each other and the text.
- The white background does not look particularly attractive.
CoffeeCup Software started in a real Coffee House 1996. Our first program was the HTML Editor. Over the last 10 years we have created a lot more Web Design & Flash Software. Our philosophy has always been to create software and services so you can make better Websites. We are dedicated to helping you by offering extraordinary support so we can succeed together. Consider us a partner and a friend, because we really are about Fresh Software and Warm People.
