|
In the simplest of pages, we might now use a HEADING tag to announce our page. HTML basic headings are available in 6 sizes with H1 being the largest and H6 the tiniest. All are bold, in a default Roman font.
produces
Welcome to My WebNotice that turned the heading tag on, then turned it off with a slash. The browser default for headings is left justified, but maybe you'd like that heading to be centered? Just add that instruction align="center" to your heading.
The simple
still turns the heading OFF.
If a whole paragraph leaves too much space between lines, you can use a BREAK tag to just break to the next line without skipping a line:
SAMPLE:
This is my line of text. This is a second paragraph.
Now we will break a paragraph at a specific point A paragraph tag
is best used for general narrative text.
(Upper or lowercase does not matter.)
|
NOTE:This page is produced in a slightly more
complicated way, so the default browser text is not being used
for most of the instructions. I will use default text in the examples
so that you will see what you expect to see.
|
There are many ways to control text in HTML including:
The MAKEPAGEhtml.txt template page shows sample code for tables and lists that you an experiment with, and the template is built within a table for good display purposes. One issue to remember when building pages using tables is that the page will not fully display until the first ENTIRE table is displayed. Therefore, it is wise to break long pages into several tables, so users can be looking at the first material while additional materials are loading. FONTS: You may be tempted to use some fancy fonts that your find on your system when you add a nifty graphics package. ONLY use unusual fonts if you are creating a graphic. Otherwise, browsers convert your delightful fancy font face into something "related" that your viewer has on their system. You need to know two terms about type faces: Serif: The characters have tiny flourishes, decorations, or little extra lines on them. That little "foot" or base under an "r" is a good example. Times New Roman and Times are Serif fonts. Using the designation "Serif" will provide a generic Serif face. Sans Serif:The characters have no extra lines. Notice the "r" has only a vertical line extending to the baseline. Arial and Helvetica are Sans Serif fonts. (from the French, "without Serif") You get the benefit of a default monospaced font when you use special HTML, such as
for "preformatted" and
for "typewriter."
Monospace is useful in aligning characters, such as completing a list of financial entries. The following type faces are installed with Internet Explorer on both PC and Macintosh operating systems. Sans serif: Arial, Arial Narrow, Arial Black, Arial Black,Verdana Serif: Georgia, Times New Roman Monospace: Andale Mono, Courier New Since these are Microsoft's True Type Fonts, the generic font faces are likely to be used when viewers are using Netscape, for example. I've noticed that many of the older Macs use Helvetica and Times, so I include those as options when I specify fonts. I've also noticed that Verdana is very large and round. If I'm tight for spacing, I don't include Verdana. If I want to show off the size, I use Verdana, realizing that not all viewers will see Verdana, but might see one of the less preferred options. |
|
For quick starts, we will go on to images: The primary forms of graphic images used on web pages are the Compuserve Graphic Interchange Format - .gif images for drawings and simple artwork, and Joint Photographic Export Group - .jpg for photographs. .gif files can also be made "transparent" so that a peculiar shape can look as if it sits right on a colored or sophisticated background, and the .gif can be "animated" - switching between drawings in slightly different positions or configurations so they look like they are moving. .jpg files do not have this versatility, but show photos sharply with great color control in small files. Bitmap files, extension .bmp, will often display in the more popular browsers, but can be slower to load. | File size can be a really big issue if users are on dial-up internet access. |
The following graphic, designed for the Air Capital Barbershop chorus, is
already on the server, so we'll use it for our example: |
This code is read as IMAGE SOURCE equals URL/filename.extension WIDTH in pixels, HEIGHT in pixels, ALT is a title to display especially if the user is not seeing the graphic. I include the native graphic size in pixels in my filenames for MY information is design, and make ONLY minor size adjustments if necessary when displaying. |
imagesInsert an image by reference and define size by height and width. Defining final size in the document tells the browser how much space to allow for the graphic, and thereby to allow the rest of the page to load while the potentially slow image is still downloading.It is often wise to put graphic files together in a single subdirectory: most use a directory named "images" at the base URL. |
When the image is in the same directory as the HTML document calling it, and we
choose to center this graphic, so the opening and closing <center> tag is used:
 When the image is in an images directory at the same level as the HTML document calling it:
When the image is in an images directory at a level closer to the root when the HTML
document calling it is in a subdirectory, the 2 dots and slash indicate a directory shift toward
the root before entry into the images directory:
| |
RESOURCESThe WERBACH BAREBONES document will be used for quick reference.You can download from this site: text file to keep open while editing pages. zip file with text and formatted versions, and commentary or you can go to Werbach's site. Lots of advertising, but he deserves anything he can get for all the work and the contribution he's made over the years: http://werbach.com/barebones/ Dr. Joe Burns' HTML Goodies site (and book of the same name) is highly recommended for quickly getting up to speed on the entire breadth of HTML related programming, but it does take some time to be able to use the site to it's fullest. Be patient, walk the tutorials at your pace, and become an expert. http://www.htmlgoodies.com/ If acronyms or terminology get you down, or just peak your curiousity, one great resource is from New Zealand The Motive Internet Glossary, and they'll accept your suggestions for additions. |
|
SuggestionsAt the outset, you will want to use comments to yourself throughout your documents; anything written in lieu of, or in addition to, the word "comment" below will not display on your page, but will be in your source for your convenience. Sometimes dashes will confuse some browsers, so avoid special characters in your comments.
|
|
MORE COLOR CHOICES See the Color Named Chart |
|
Coaching program under development by M.C. "Mac" Yarnell at Eaglecliff Incorporated, Wichita, KS |