Fonts, Colors, Characters, Displays Rules and Images

Fonts

HTML allows you to specify the fonts you want to use in your document. We have already seen that using the header tags change the size and boldness of text. First we will look at some pre-designed changes and then at the font tag.

There are a set of tags that mark a section of text as special. These usually show up as different font characteristics on the display. Let's look at some examples of each. The book refers to these as logical character tags. That's because they more state what kind of thing the text is, rather than what it should look like.


This is the em or emphasis tag This is used to draw attention to some text, like the words logical character above.
This is the strong tag Use to draw even more attention.
This is the code tag This would be wrapped around a section of program source code in a document.
This is the kbd or keyboard tag Intended to look like keyboard input. Used to show off examples.
This is the cite tag This is wrapped around references in papers.

These can be combined by nesting the tags.
Strong code would look like this.
and would be written like this.
<strong><code>Strong code would look like.</code></strong>

Note that some of these look alike. These tags are marking off sections of text based on the kind of thing they are. What they look like when displayed by the browser is another matter. For some of these, the default fonts by using the appearance is the same. When we get to style sheets, we will see how to alter some of this.

There are also a set of tags that generate explicit font effects.
This is the b or bold tag Switches to a bold font.
This is the i or italics tag Switches to a italic font.
This is the tt or teletype or typewriter tag Switches to a font that resembles a typewriter.
This is the big tag Make the font larger.
This is the small tag Makes the font smaller.
This is the s or strike tag This prints the text with lines through it.
This is the u, or underline tag Underlines the text, which can make it look like a link.
This is the sup or superscript tag Superscript font.
This is the sub or superscript tag Subscript font.

You can combine these as well.
Some, like big, superscript don't work.
but big, bold and italic does.

There is another one, but don't use it. The blink tag is really annoying. And it only works in Netscape.

We can get more control over fonts using the font tag. There are many attributes to the tag. The face attribute tells what kind of font we want. You give it a list of font names. For example, Arial, courier, times-roman. The browser will go down the list until it finds one that is installed on the machine. The list is separated by commas and contained in quotes.

The size attribute controls the point size of the font. Font sizes are given in points, a point is 1/72 of an inch. The size could be an absolute value like size="12" or a relative value like size="+3". The first sets the font size to 12 and the second increases it by 3 points.

The color attribute can be used to change the color of the text. Only the text inside the font tags is effected by the tag. Now for a few examples.
<font face="arial" size="14" color="green">This is green 14 point Arial text</font>
This is green 14 point Arial text
<font face="bazooka,arial" size="12" color="blue">This is blue 12 point Bazooka or Arial text</font>
This is blue 12 point Bazooka or Arial text
<font color="red">This is red text</font>
This is red text
<font size="+3" color="red">This is red +3 text</font>
This is red +3 text
Here is a way to get the kind of text sometimes used in books and magazines where the first character is larger than the rest.
This looks like illuminated text.

Colors

Reading Pages 1430-1432

A diversion into how colors are used on the web and in HTML. A typical computer display can show millions of colors. But only about 200 of them will look the same everywhere. These colors make up the safe palette. If you stick to these colors, your pages will look the same everywhere.

Colors in HTML can be referred to either by name or a number. Not all colors have names, but many common ones do. The color number is a set of 3 2 digit hexadecimal numbers. Hexadecimal is a base 16 numbering system where the digits go from 0 to 15, rather than 0 to 9 as in decimal. We use letters to represent the digits past 9. The correspondence looks like this.

Decimal 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
Hexadecimal 0 1 2 3 4 5 6 7 8 9 A B C D E F

The 3 2 digit numbers represent the amount of the colors red, blue and green that go into the color we are making. So, the color number "#FF0000" (not the pound sign) would be all red, not blue and no green. This has a name assigned and it is "red". These two words should be the same color.
red
red
I can make it a little blue like this.
bluish red
This is the statement that did that. This doesn't look very blue since red and blue make yellow.
<font size="+6" color="#FFB800">bluish red</font> Most web page tools will help you pick colors and there are tools on the web to do this.

Characters

Reading Pages 95-97

There are some characters that can't be simply typed into the computer. Or they have special meaning to the browser. For example, it is hard to show the code for the examples because the browser interprets them and displays the results, not the source. Or things like the German umlaut don't appear on most keyboards. SGML and also HTML provide a solution in the form of character entities. These are special character sequences that the browser interprets and cause it to display the special characters. To show some HTML code, I can replace the '<' and '>' characters with '&lt;' and '&gt;'. A few common ones are also '&amp;', the ampersand, and '&nbsp', the non-breaking space. We'll see that more in tables. Here is a table with a lot of them. I copied this from here.

Rules and line breaks

Reading Page 97,94

Sometimes you want a visual separation between part of the text. Like the one at the bottom of the page, separating the date information. This is called rule. We get it by using the hr tag. It draws a line across the width of the page. Like this.


It has two attributes of interest. The size attribute specifies the width (vertically) of the line in pixels. The width attribute tells how wide to make it as a percentage of the screen. So to put a thick line halfway across, do this.
<hr size='30', width='50%' noshade>


the noshade attribute makes it black. Without it it would look like.

Here is an interesting effect. <HR width=3 size="100"> produces


You can also use images as rules. This is done with specially created graphics that are long and narrow. These are handled just like other images and don't involve the hr tag. Here is an example. Funny Rule Notice this is kind of short. Let's try making it longer.
Funny Rule So try these out before you use them.

We have another tag to break up the text. This is the br or break tag. It works like a paragraph tag except there isn't a blank line inserted. So if we had two line separated by paragraph markers, we get.
Here is line one.

Here is line two.

Now with break tags.


Here is line one.
Here is line two.

Images

Reading Pages 91-94

Images are pretty easy to put in a document. There is an image tag, ('<img>') that does this. The most common formats of images are GIF (graphics interchange format) or JPEG (Joint Photographic Experts Group). What's the difference, you ask? Well, a lot but as a quick rule of thumb, use GIF for simple graphics, icons, buttons, dots, the rule above. GIF files tend to be much smaller, but with less colors and such. Use JPEG for pictures.

To include a picture, you just put an image tag and tell it where to find the picture. So, to include my picture of Jellyfish (more properly called jellies, they aren't fish) here, we would use,
<img src="../images/jelly3.jpg" alt="Jellies" width="200" height="150"> The source (src) attribute tells the browser where to find the picture. This can be any URL. The alt attribute will be displayed in browsers that don't support graphics or have graphics turned off. The height and width attributes tell the browser how much space to allocate for the picture. This can speed up the rendering and download process. It is a good idea to always have these attributes on your image tags.
Jellies Also, notice where this text ended up.

Half Dome in Yosemite Let's try another image and see what we can do about the text placement. <img align="left" src="../images/halfdome.jpg" alt="Half Dome in Yosemite" width="200" height="150"> That big open space on the right is unpleasant. There is an align attribute that can help with this. This is a picture of Half Dome at sunset in Yosemite National Park. It was taken in August 2002 on a digital camera. The picture was taken near the entrance to Curry Village. This text should be at the right of the picture which should be flush to the left side. Now there isn't any of the empty space on the right.
Vernal Falls in Yosemite In the next example, we will do two things. We will flush the picture to the right and also put a little space around the picture so the text doesn't brush up against the picture so much. This picture was taken near the base of Vernal Falls. The water flow is greatly reduced in August. In spring, there is much more water there. This picture is longer than the others. Also notice that there is more space between the text and the picture. The command for this is
<img align="right" vspace="2" hspace="9" src="../images/vernfallsbot.jpg" alt="Vernal Falls in Yosemite" width="200" height="267">
Vernal Falls in Yosemite This last picture is of sea lions in the San Francisco Harbor. They started to gather here after the 1989 earthquake. People aren't quite sure what attracted them to Pier 39, but there are lot of them. The lack of predators probably has something to do with it. This is much like the others, except that I added a border to the picture. The command for this example is.
<img align="left" border="6" vspace="2" hspace="9" src="../images/seals2.jpg" alt="Vernal Falls in Yosemite" width="200" height="166">

All the size values in the image tag, like height, width, border, vspace and hspace are given in pixels. Pixels are picture elements. Each one is a dot on the screen that can be one of many colors. The size of the screen the user sees when looking at your web page is dependent on the resolution of the computer display. That resolution is expressed in pixels.

If the user has a display at 800x600 pixels, the area available on the browser window without scrolling is only about 717x390 pixels. You should take this into account when designing your page. In this case, I shrunk the pictures down to a width of 200 pixels so they would fit easily.

I shrunk them in a picture editing program, rather than just by setting the width and height attributes. While setting the attributes would have made the pictures smaller on the browser, they would have remained very large on server. And all that would have been downloaded. So, shrinking the images before display saves download time and disk space. In this case, the Yosemite pictures were originally over 300K with a resolution of something like 2000x1500. After being shrunk, they were only about 9K.

Displays

Web pages are different than paper. They have no set length and the width is variable depending on the monitor settings. These days, it is probably save to assume that most users have a display of about 800 by 600 pixels. Size on a web page is measured not in inches but in pixels. These are the individual dots that make up the display. Each one can display many colors. So you should look at the size in these terms, not as if it was a piece of paper. To make it more complicated, the user can change the shape of the display area at any time by resizing the browser window. With the resolution above, the browser window is only about 717x580 pixels. Users don't mind scrolling up and down, but dislike scrolling sideways. So organize you pages to be longer than they are wide.