How to create Web sites easily

The most complete guide for the Web page builder
All you'll ever need to know about homepages and HTML

Character and document formatting

So, now that you know how to define paragraphs, you are ready to ask about the character formatting. How do they do to create all those text effects and fancy stuff, just with text? Simple, too. This part of the document is intended to help you enhance the look of your info by using font and color effects attractive to people. See my Tips and tricks on style section for info about what to do and what not to do with these invaluable resources.

Italics/bold face

You saw the tag and its matching end tag, isn't that true? The text between these tags is rendered in italics. The and tags make the text between them appear in bold. Keep reading to know more about headings and fonts

Titles/headings

You want to create headings in your documents? Oh man, that is easy to do. Just begin with an <Hx> tag, where x is the heading level you want. End the heading with a closing tag (</Hx>). That's all. But remember, there are other means to enhance text than this one. Keep reading!

Background/text colors in the entire document

If you want to change the color of all the text in the page, put in you beginning <BODY> tag a TEXT=color parameter, where color is a color represented in RGB hex value (complicated?). In some browsers, a color name will work too, for example, <BODY TEXT="white"> and <BODY TEXT="#FFFFFF"> both would yield the same results. To change the background color, add a BGCOLOR= parameter, in the same form as the TEXT= parameter. To change the color of the not-yet-visited links, use the ALINK= parameter, and change the color of the already-visited-links with the LINK= parameter. You can specify a color for the active links (that point to the page you are currently visiting) with the VLINK= parameter.

Example:

<BODY TEXT="#FFFFFF" BGCOLOR="#000000" ALINK="#0000FF"
 VLINK="#FF0000">

as a body tag would render the background of a page black, the text white, the links blue, and the visited links in red.

Specifying a base font face

Tip posted by Ryan Peterson. Visit him on his homepage: http://www.oocities.org/TimesSquare/Arcade/1086

You can specify a base font so that all text in your page renders with that specific font. Do it with the <BASEFONT> tag. This tag accepts the following parameters:

FACE="Font name", where "Font name" is the name of the font
COLOR="Colorindex", where "Colorindex" is the name or color index of a color
SIZE="Size", where you specify the base font size.

The SIZE parameter specifies the base size for the font, being 3 the default, 1 the smallest and 7 the largest font size. Normally all parameters requiring a font size use this rank of values.

This tag should be before the <BODY> tag. For example, if you wanted all your text to render in Arial font, you would put the following:

<BASEFONT FACE="Arial">
<BODY>
Here goes your text....
</BODY>

and so on....

Font face and size changes

Probably you want to change the font of some certain part of your document: put around that part the and tags. If you want to use Arial in a part of your document, insert this tag before the text: . Restore the original formatting with a closing tag. As you can see, you can specify any font on the FACE= parameter. This tag accepts all the parameters of the <BASEFONT> tag.

You can change the color of the text with , where "colorname" is a color like "white", "red" or "black", or a hexadecimal value in RGB format (click here for a list of colors in RGB notation). Change the font with the tag, where SIZE is between 1 and 7 (7 is the largest). If you specify a plus or a minus before the number, you are telling the browser that you want a relative font size. Example:

Original text<BR>
<FONT SIZE=+1>Augmentated one size,<BR>
</FONT> restored,<BR>
<FONT SIZE=-1> diminished,<BR>
</FONT> again restored.

would render as:

Original text
Augmentated one size,
restored,
diminished,
again restored.

You can specify text colors with the COLOR= attribute in the tag. You have to specify a color name or number, in RGB format. Click here if you want to learn more about specifying colors.

You can sum the attributes in one single tag, like , to apply those attributes to the same text, and you just put one single ending tag.

The <DIV> tag: controlling the alignment of a section

To align text to the right, surround the text you want to align with a <DIV ALIGN=RIGHT> tag, and the corresponding closing </DIV> tag. DIV stands for division. It means the section between the two DIV tags share the alignment attributes you specify in it. It is the only way to specify a section of text as right-aligned. You can put in it ALIGN=JUSTIFY to justify the portion of text.

Centering portions of text easily

To center some text quickly, put around it a <CENTER> and the corresponding </CENTER> tag. That will center the text enclosed in the container of the tags (the text between the CENTER tags).

Changing the alignment of certain paragraphs only

To change the alignment of only one paragraph, put in its tag (the one with which the paragraph begins) an attribute ALIGN=xxx. xxx depends on what you want: you can choose between RIGHT, which will align the paragraph to the right, LEFT which will align the paragraph to the left, JUSTIFY which will justify the text, or CENTER which will center it.

Block quotes/extra text margins

To quote a textm you normally use bigger left and right margins, in HTML markup there's a way to do it easier: the <BLOCKQUOTE>/</BLOCKQUOTE> tag. Begin you quote with a <BLOCKQUOTE> tag, type your text, and end it with the closing </BLOCKQUOTE>. There are examples of this across the document. Are you able to identify them?

Preformatted and example text

Some times, it's worth to put some text in fixed-width text (letters are all the same size) and use standard carriage returns, for example when putting a text extract. Use the <PRE> tag, that displays the text in fixed-width type (like a teletype). The carriage returns are the ones you put between the tags, there is no auto line wrapping. Close the fixed-width type with the </PRE> tag. All of the example texts in this document are rendered this way. To put the special signs like < and > you should check the HTML Entities list, which gives you a mean to display EVERY single special character.

Background images

Put in your <BODY> tag a BACKGROUND="image.gif" parameter, where "image.gif" is the path to the file you want to put. For example:

<BODY BACKGROUND="starwars.gif">

tells the browser to put the image "starwars.gif" as a background image, behind the text.

Watermarks with background images

In the <BODY> tag, along with the BACKGROUND= attribute put another attribute that says BGPROPERTIES=FIXED and that will fix the background image.

Member of the ILE

Free Home Pages at GeoCities

[Main page] [HTML help] [MIDI page] [Murphy's Laws] [More information]
[Feedback form to email me] [Sign guestbook] [Mail me!]