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. 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.
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.
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 '<' and '>'. A few common ones are also '&', the ampersand, and ' ', 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.
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>
Here is an interesting effect. <HR width=3 size="100"> produces
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.
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.
Also, notice where this text ended up.
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.
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.