link to the page you are looking for.
Lesson 3
TEXT
ow, let's talk about text.
First let's learn to set the color. The browser has default settings for text color, link color, active link color and visited link color in addition to the background color. These are defined inside your BODY tag. The defaults are...
Links are blue.
Active link is red.
Visited link is purple
You must set your text and link colors inside your BODY tag if you want something other than the default colors. (More on links and linking them later) Text="#FFFFFF" gives us white text. This is one of the attributes that goes inside your Body Tag. Your link colors are set the same way inside the BODY tag. You write link="#FF0000" for a red link or alink="#0000ff" for a blue active link and so on with your visited links. This will change the default colors and give you what you want. Check out the hex chart. You may need it in the future if you're going to be building web pages. Don't forget to bookmark it. Now look closely at the example.
These are hex colors and you can find a color chart here.
kay, this is not something that is mandatory, but you may want to do it anyway. If you do not set the BASEFONT size and FONTFACE, then your browser will simply set it to default. So here it is just in case you decide you want to set it yourself: To set the BASEFONT size, you place it just below the Body tag. That sets the font size for the majority of the page unless you set it otherwise. Default size is 3.
<BASEFONT SIZE="3">
Generally, you will use a font size between 1 and 7 from smallest to largest. This will display a small or large font. The fontface for the majority of the page can also be set and you do that like this:
<FONTFACE="Old English Text MT, Arial">
You will notice that there are two fonts in that tag. The reason for this is that if you happen to specify a particular font that your readers browser doesn't recognize, then you need to also specify a common font to be sure that everyone can see the text on your page. Arial, Helvetica, or Verdana is a good choice here. Now, on to FONTS!
n your FONT tag, you can also change the color of the text here and there on your page just by adding the color attribute (like those shown in the example below) inside the font tag. This tag is not the same as when you set the FONTFACE or BASEFONT. It is used wherever you need it to change font color, size, etc. You can change the color to anything your little heart desires. You can use it to change the color of one word or one letter or one sentence. Just remember to keep the # sign in front of the hex number.
<FONT Color="#0000ff">This makes this text blue!</FONT>
<FONT Color="#00cc00">This makes this text green!</FONT>
Just a bit about size: You use the same method to set your font size. In the font tag you write: size=3 or whatever you decide to set it at. Here's an example:
To set both size and color, like anything else, you place them both inside the FONT tag, like this:
lright now, if you have a HEADING that you want to show up on your page, it also goes between the BODY tags. H1 is the largest heading; H6, the smallest. You can use the FONT tags to change the colors. This is how you write it:
<H1>WELCOME TO MY PAGE</H1>
<H2>Welcome to my Page</H2>
<H3>Welcome to my Page</H3>
<H4>Welcome to my Page</H4>
<H5>Welcome to my Page</H5>
<H6>Welcome to my Page</H6>
Here's a few other little tricks you'll need when writing your text:
You can create Bold text by using these tags around your text, like so:
<B>Welcome to my homepage!</B>
This can be really helpful especially on backgrounds that are textured. Bold text can make it easier to read in some cases.
To create Italic text, you write it like this:
<I>This is italic text.</I>
You can underline text by using these tags: <U></U>, like so:
ow let's set the alignment.
You can use this tag to begin a new paragraph:
You can also use it to space your text. The <P> tag will break a line of text for you with extra space just as line breaks can be inserted where you want your text to begin on another line. This, by the way, is an example of a tag that you do not use a closing tag for. This is the way you write a line break in HTML: <BR>
Take a look at this example:
There is a <P> between that sentence and this one.
But there is only a <BR> tag between these two.
If you need more space between paragraphs or for any reason, you can use one of these <P>, <BR> along with &non breaking spaces which is a special character that is written like this: . Look at this example:
<br> <br> <br>
And this is another sentence.
nd this is how that would look:
And this is another sentence.
really easy way to set the margins on your page is to use this CSS tag. You can set the margin for each paragraph by changing the parameters set by the tag from 1 inch to whatever is needed. With bordered backgrounds, this one seems to work fairly well for me.
<P STYLE="margin-left: 1in; margin-right: 1in">
To go a little further, you can add the 'justify' element to this like so:
<P STYLE="margin-left: 1in; margin-right: 1in" align="justify">
This makes your text justified on the page with neat margins.
Note: Earlier versions of Netscape may ignore this tag because it won't understand it, but it works fine for Internet Explorer and all the latest versions.
You can also use the Blockquote Tags to better center your text. Here is an example using text from one of my other sites.
<BLOCKQUOTE> One of the main and lasting effects of the Great Famine of 1845-47 was emigration. The ‘Coffin Ships’ carried tens of thousands of the poorest Irish people who fled Ireland to avoid starvation. They created a new Irish nation within America whilst remembering the injustice of the English occupation of their homeland as well as harboring a deeply felt hatred of landlords and evictions. A Clann na Gael source estimated that there were over one and one half million people of Irish birth in America towards the end of the nineteenth century. </BLOCKQUOTE>
reformatted text is another way used by HTML to format your text. By using these tags your browsers
will recognize the carriage returns that you put in the text yourself.
<PRE></PRE>
Aligning Text using a Table
|
This text is centered nicely on the screen. It has
adjusted itself to consume 75% of the screen- no matter what the
size of the browser. This means that you will have 25% on each
side of the page free of text. You can adjust the percentage in your favor.
Don't forget that your text
area will be shorter on high resolution displays and longer on
low ones. (We will learn more about tables in an upcoming lesson.)
|
his is easy to do using the CENTER tags along with a minimal
TABLE. Do not set the border to "0" as some browsers may set the default border to 1.
<center>
<TABLE WIDTH="75%">
<TR>
<TD>
This is where your text goes!
Adjust the percentage to suit yourself.
</TD>
</TR>
</TABLE>
</center>
Now let's try out an exercise: Ex.3 Not too hard now, was it? In lesson 4, I will show you another way to align your text, at the same time, we will learn to align text with images. Until then...