Before we get going on
dealing with text on a Web page, we need to consider the fundamental
elements of a Web page. They include three types of actions:
• Displaying text
• Loading and displaying graphics
• Linking to other pages
To display text, all you need to do is type it on the page in the <body> container.
Loading and displaying graphics uses the <img> tag with the following format:
<img src=”imageName.png”>
You can use only .jpg, .png, or .gif files with the img element. The src attribute refers to the source of the graphic. The img element has other attributes, but all you need to get an image on the page is the src attribute so that the file can be located.
The term URL is often used to
refer to a file’s location — no matter what type of file is involved.
URL stands for Uniform Resource Locator and refers to a standard
protocol for finding and using different types of files.
Finally, a link to another page uses the following format:
<a href=”anotherPage.html”>Link abel</a>
The href refers to the linked page’s
hypertext reference, or more simply put, its address. Like an image’s
source locations, you’ll see the term url used for a linked page’s
address as well.
One more thing you need to know before continuing. The document type declaration (<!DOCTYPE HTML>)
in the very first line is important — don’t ever leave it out. However,
an equally important line is declaring the character encoding. This is
used to tell the Web browser which character set of letters to use, such
as the A to Z alphabet, Hebrew characters, Japanese, Cryllic, or some
other set.
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>
You always should specify character encoding. Although using the <meta>
tag is a bit long, you can just cut and paste it in all your Web pages.
If you don’t, you can run into security vulnerabilities, and nobody
wants that.
Throwing a Web page together works fine 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 1, everything is jumbled.
The 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 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 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-left 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
A line break (<br>) forces a
break in the lines of text. You can think of it as a single space
between lines, or if you’re old school, a carriage return. HTML5 has
added something new called a line break opportunity. Sometimes you’ll
have a very long word, especially in URLs and e-mail addresses. The wbr element doesn’t force a line break, but you can place the <wbr>
tag where you would like a word to break in case the page is
compressed. This consideration is especially important for mobile
devices because they have small screens. For example, suppose you have a
very long URL that is being shown as a non-linking description like,
www.eatatjoesfinerestaurant.com
If the link name is not broken up, and if the page
is compressed, you’ll see a big gap in the text or the word broken where
you don’t want it to be. The <wbr> tag helps you keep your text broken where you want it. Consider the following script, which uses both of the line-breaking tags:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>
<title>Adding ine Breaks and ine Break Opportunities</title>
</head>
<body>
<img src=”logo.png”><br>
This is text. You don’t need a tag for Plain Old Text (POT).<br>
<br>
He said, “Sometimes you have extremely long
words, and you want to make sure that they break at appropriate places.
For example, you have a long name for a URL like www.eat<wbr>at<wbr>joes<wbr>fine<wbr>restaurant<wbr>.com, and if it has to break, you want the break to appear in a particular place.”<br><br>
He said, “Sometimes you have extremely long
words, and you want to make sure that they break at appropriate places.
For example, you have a long name for a URL like
www.eatatjoesfinerestaurant.com, and if it has to break, you want the
break to appear in a particular place.”<br><br>
<a href=”anotherPage.html”> Click here for another page </a>
</body>
</html>
By adding the two line-break tags, the page looks much better. The paragraph that does not use the <wbr>
tag has a big gap in it where the long URL was not divided up into
sensible break points. Figure 2 shows how the page now appears.
Although it’s still not perfect, it’s a lot better
than the original, even though two more paragraphs were added. The
graphic is in the upper-left corner (as most logos are), the paragraphs
are separated by line breaks, and in the first paragraph using the long
URL, the breaks are where the <wbr> tag specified.
Figure 2: Adding line breaks.
Thinking about structure
At this point, more thought should go into
structure. With the ability to add text, graphics, and links, the page
can have far more features and much more content. So, you should begin
thinking about things like headings, navigation, and positioning beyond
the logo in the upper-left-hand corner. Start with a simple sketch. Use a
scrap of paper to jot down an idea of a Web page. (Use paper, not your
graphic tools just yet.) Figure 3 shows an example:
Figure 3: Sketch a structure for your site.
Given the tags discussed so far, will you be able to
create a page based on the sketch? The only attribute lacking is one to
wrap the text around the image. The align attribute of the img element
will do that. In this case, the image will be to the left and the text
to the right, so the following line will do the trick:
<img src=”kid.png” alt=”kid” align=”left”>
You may have noticed that the alt attribute was also included. That attribute lets users know what to expect if the image takes a while to load.
So, now, with just a few tags and an added
attribute, this next script does a fair job of creating the page with
the structure in the sketch in Figure 3-3.
As you’ll see in the following code , I’ve used a pound sign (#)
instead of an actual URL in the navigation links. The pound sign acts
as a placeholder while we’re working on the structure; it works just
like a real URL except that it doesn’t go anywhere or cause an error
message.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>
<title>Sketch to Web</title>
</head>
<body>
<img src=”logo.png” alt=”logo”><br>
<a href=”#”>Toys</a> | <a href=”#”>Clothes</a> | <a href=”#”>Sports</a> <br>
<br>
A Good Place for Kids <br>
<br>
<img src=”kid.png” alt=”kid” align=”left”> Kids are serious business.
They need toys that are both safe and educational. Toys need to be fun
and allow children’s minds to create beyond any functionality the toy
has. There is no reason that they cannot be both safe and fun. Children
need lots of clothes because they grow so fast. And they need sports to
offset childhood obesity and the illnesses associated with obesity. <br>
<br>
<a href=”#”>Toys</a> | <a href=”#”>Clothes</a> | <a href=”#”>Sports</a>
</body>
</html>
Figure 4 shows how close the page came to the sketch in Figure 3.
Figure 4: A page with a basic structure.
Now the Web page shown in
Figure 3-4 has more structure than any of the previous examples. The
navigation bars at the top and bottom are helpful to the user, but
perhaps they’d look better centered on the page. Maybe the top
navigation bar should be at the very top of the page in the center,
right next to the logo. Also, the text is jammed right next to the image
and could use some space. Of course, the heading should be in a
different style, weight, size, and font. Also, it’s pretty boring —
especially since it’s for kids. However, because the structure is coming
along, you can address those other details when you learn to use more
styling tools.
