Put a border around the image to make it stand out. Images should be in either the gif or jpg format. Note the "/" at the end of the non-enclosing IMG tag.HTML documents are plain-text (ASCII) files that can be created in Pico or Notepad or in any other text editor. The markup tags within the document define the structure and formatting of the document that is interpreted and displayed by the browser. You have already learned about the "required" elements in a web page when you constructed your basic page. The examples below show you how to change the appearance of the text, insert images, links, and other elements.
Within the BODY tag, you can choose the color of your background (or choose a background image), your text, links, and visited links. You can use simple color names, too (red, blue, etc.). Notice how quotation marks are used to define attributes within the tag.
Use paragraph tags for breaks in the text. HTML doesn't recognize multiple
spaces or blank lines. Experiment with using the paragraph tag (requires opening
and closing) and the forced line break tag
that does not need a closing tag (one of the few).
Start a paragraph. The BLOCKQUOTE tag is useful for indenting text. You can change the font face. You can change the font color. You can change the font size. You can change the font style to italics or to bold or to underline. You can change them all at the same time. Font color and size are specified within the font tag, but italics and bold are outside a font tag. A new way to code italics is the "em" (for emphasis) tag and the new way to code bold is the "strong" tag.
If you want it very plain, use preformatted text, just the way
you typed it
in your text processor.
You can center the sentences in a paragraph (or just one sentence).
You can left-justify or right-justify the sentences.
Very important to chemistry majors -- super- and subscripts. Not fast to code, but essential. 2K+(SO4)2-
If you need to keep a numbered (ordered) list, you can:
If you want to insert an image, you have to tell the browser where to find it; it's not "here".
Put a border around the image to make it stand out. Images should be in either the gif or jpg format. Note the "/" at the end of the non-enclosing IMG tag.
It is important not to distort an image. You can define the width and height of the image, but be careful that the specified dimensions match those of the image.
Links to an outside site take a little longer to type than a link within your own site directory. Outside links require the full URL (path) to the target file. The path to a target document (or image) within the site is relative to the source file (the current page).
You can link to an image as well as to text.
Pay attention to text placement around images,
vertical and horizontal. Notice the difference in the borders for the two images: the first has a border because it is linked and the second has a defined border.
An easy way to go directly to a line in a long HTML document is to place a "named anchor" at the line, name it, and link it to another place in the document (or even another document). If you click on the link, you'll go immediately to a specific point in this document.
Don't forget to include a "mailto" tag on your homepage so visitors can e-mail you. Send me mail (please)!
Tables work well not only as tables, but to organize page space as well. It looks like tabs and margins have been set -- something that is practically impossible to do with plain HTML.
| beaker | balance | graduated cylinder |
| test tube | thermometer | buret |
| Erlenmeyer flask | manometer | volumetric flask |
In Notepad, take this file and change the settings for cell border, padding and spacing to see what happens to the appearance of the table.
| beaker | balance | graduated cylinder |
|
thermometer | buret |
| Erlenmeyer flask | manometer | volumetric flask |
Remember how much work can be done by copying and pasting: