HTML and CSS Reference
h rowing a Web page together works i ne but may leave much to be desired in terms of what
the user sees and whether she wants to visit the site again. Let's look at a Web page with no
structure but with the fundamental elements of a Web page:
<! DOCTYPE HTML >
< html >
< head >
< meta http - equiv = ”Content-Type” content = ”text/html; charset=UTF-8” >
< title > Fundamentals </ title >
</ head >
< body >
This is text. You don't need a tag for Plain Old Text (POT).
< a href = ”anotherPage.html” > Click here for another page </ a >
< img src = ”logo.png” >
</ body >
</ html >
As you can see in Figure 3-1, everything is jumbled. h e image appears right in the middle of
the link (blue underlined text), the image appears right in the middle of the page, and
generally it doesn't make much sense.
Figure 3-1: The most basic Web elements.
When you're organizing a Web page, the links should be organized into a navigation system that's
easy for those looking at your Web page to use. In the page shown in Figure 3-1, the link is
broken up by the graphic and seems to be part of the text rather than part of a navigation system.
A LITTLE MORE ORGANIZATION
One of the basic conventions in Web design is placing the logo in the upper-let corner of the
page. Likewise, Web pages place links organized into a coherent system of navigation. By
adding two more tags, you can go a long way toward organizing your page:
<br> : Generates a single-space line break
<wbr> : Generates a line break opportunity