What Is a Tag?
A tag is a method of formatting HTML documents.
With tags you can create italic or bold characters, make things blink, and can control the color and size of the lettering.
Tags can be "nested". This means that you can make something bold and italic and green and blinking by simply surrounding the previous tag with the next.
Tags can be used to insert pictures and graphics.
Tags can be used to create bulleted lists like this one, or numbered lists.
Tags look something like this: <b> chosen text </b> .
All tags use the < and > (less-than and greater-than symbols) to signal the browser. These are located above the comma and period keys.
Within a tag, capitalization doesn't matter. <FONT> is the same as <font> or <Font> . I usually don't bother capitalizing when I use tags. Below, I have used capital letters when I felt that the number "1" and the letter "l" might be confused.
It is essential to always close the tags! If not, the formatting will contaminate everything that follows it. But don't panic, closing tags is very easy, and even the most experienced surfers sometimes forget.
Italics
To make italics surround the chosen text with these tags:
<i> chosen text </i>
The "/i" tag is essential; this will close the tag and stop the italics. If this is not done, all the text which follows the first, <i> , tag will appear italicized.
Bold Lettering
To make letters bold surround the chosen text with these tags:
<b> chosen text </b>
The "/b" tag is essential; this will close the tag and stop the bold lettering. If this is not done, all the text which follows the first, <b> , tag will appear in bold.
Changing Font Size
There are three different ways to change the size of the font. Method 1, Method 2, and Method 3.
Also see below on how to change both the size and the color of the font at the same time.
The first method is to use the "big" and "small" tags.
For example, to increase the font by one degree surround the text with the following tags:
<big> chosen text </big>
If you want to make it even bigger, you surround it again:
<big> <big> chosen text </big> </big>
To make the font small, surround it with the small tag:
<small> chosen text </small>
If you want to make it even smaller, surround it with the tag again:
<small> <small> chosen text </small> </small>
The "/big" and "/small" tags are essential; they will close the tag and stop the special formatting. If this is not done, all the text which follows the first, <big> or <small> , tag will appear in the altered size.
The second method is to directly change the font size.
You can use + and - along with a number to shrink and grow the font:
<font size=+2> chosen text </font>
<font size=+1> chosen text </font> .........(same as <big> )
<font size=+0> chosen text </font> .........(plain text)
<font size=-1> chosen text </font> .........(same as <small> )
<font size=-2> chosen text </font>
Notice that when you get to larger fonts they tend to appear bold.
The " /font " tag is essential; it will close the tag and define the end of the specialized formatting. If this is not done, all the text which follows the first, <font size=> , tag will appear in the altered size.
The third method is to use what are called headers.
Headers are abbreviated with the letter "h" and a number from 1 to 6. For example:
<h5> chosen text </h5>
Along with the tag, I will demonstrate the result for each:
<h1> chosen text </h1>
<h2> chosen text </h2>
<h3> chosen text </h3>
<h4> chosen text </h4>
<h5> chosen text </h5>
<h6> chosen text </h6>
Notice that the header method also utilizes a bold font.
The "/h# " tag is essential; it will close the tag and define the end of the specialized formatting. If this is not done, all the text which follows the first, <h#> , tag will appear in the altered size.
Blinking Text
To make text blink surround the chosen text with these tags:
<blink> chosen text </blink>
Note: This will not show up if you are using Microsoft Explorer (Blame it on Bill Gates!).
The "/blink" tag is essential; this will close the tag and signal the end of the special formatting. If this is not done, all the text which follows the first, <blink> , tag will blink.
Use this sparingly, it can get a bit obnoxious if used overfrequently.
Changing Text Color
To change the color of the text surround the chosen text with the following tags:
<font color="color name"> chosen text </font>
The "/font" tag is essential; this will close the tag and signal the end of the colored text. If this is not done, all the text which follows the first, <font color=> , tag will appear in the altered color.
The "color name" can be one of two things. If you only want to use a common color, you can simply put in the name of that color. This works for the following colors:
| <font color="black"> | Black | | </font> |
| <font color="white"> | White | (White) | </font> |
| <font color="yellow"> | Yellow | (Yellow) | </font> |
| <font color="orange"> | Orange | | </font> |
| <font color="pink"> | Pink | (Pink) | </font> |
| <font color="red"> | Red | | </font> |
| <font color="green"> | Green | | </font> |
| <font color="blue"> | Blue | | </font> |
| <font color="purple"> | Purple | | </font> |
| <font color="cyan"> | Cyan | (Cyan) | </font> |
| <font color="magenta"> | Magenta | | </font> |
| <font color="maroon"> | Maroon | | </font> |
| <font color="brown"> | Brown | | </font> |
The second thing you can use as a "color name" is a numeric code for the color. This allows you to fine tune the color more than you can with the fixed colors listed above. For example you can have a deeper shade of blue, or a lighter brown.
To use this option you type:
<font color="#rrggbb"> chosen text </font>
Where "#rrggbb" is the code for a color. Don't forget the quotation marks or the # sign--they are necessary.
The "/font" tag is essential; this will close the tag and signal the end of the colored text. If this is not done, all the text which follows the first, <font color=> , tag will appear in the altered color.
Here is a short list of some of basic colors:
Here is a yellow color whose hex-code number is-- # f f f f 0 0 . (# f f f f 0 0)
Here is a red color whose hex-code number is-- # f f 0 0 0 0 . (# f f 0 0 0 0)
Here is a green color whose hex-code number is-- # 0 0 f f 0 0 . (# 0 0 f f 0 0)
Here is a light-blue color whose hex-code number is-- # 0 0 f f f f . (# 0 0 f f f f)
Here is another blue color whose hex-code number is-- # 1 f 8 1 a 6 . (# 1 f 8 1 a 6)
Here is a blue color whose hex-code number is-- # 0 0 0 0 f f . (# 0 0 0 0 f f)
Here is a purple color whose hex-code number is-- # f f 0 0 f f . (# f f 0 0 f f)
Changing Text Font
Changing the font of text online is one of the most frustrating parts of formatting for the web, because you never know what the person on the other end is going to see.
The reason for this is that the fonts you choose to use must already be loaded on the other person's computer. If they aren't, then they will just see their default font.
For example, if you really, really want to use "Tigerteeth ICG", because you think it looks great and is perfect for your site, you probably shouldn't bother. Few people will have "Tigerteeth" loaded on their machine, and only those who do will see it--everyone else will just see their default font (usually something like Times New Roman). To make matters even more complicated, Mac users will usually have a completely different set of fonts, so you need to think of them when choosing your font. There seems to be little or no standardization of fonts, some machines will contain one set, while another could have a very different set.
So, is it hopeless? Not entirely. If you want to use a really fancy font, which may be rare, or which you might have downloaded from a font website, then don't bother or find another way. But if you want to use a fixed-width font instead of a varying one, or if you want to use a sans serif font (one without those tiny little cross pieces which finish off letters) instead of one with them, you can do it. In other words, if you want a bit of a change, but aren't particular about what that change is, go ahead.
If you want to use less common fonts, you can go ahead and do so. The trick then is to pick several different fonts and use them all. This is similar to choosing the font you most want, then the second most-wanted one, then the third most-wanted, etc. When someone views your page, if they have the first font, that's what they'll see. If they don't, then they might have the second, and that is what they'll see. If not the second, then maybe they will have the third. With several fonts listed, you increase the possiblity that the other person will at least have one of them.
So, here's how to do it. Surround the chosen text with the following tags:
<font face="font name 1, font name 2, font name 3"> chosen text </font>
Notice where the quotation marks are--outside the entire list of fonts, not around each font.
The "/font" tag is essential; this will close the tag and signal the end of the colored text. If this is not done, all the text which follows the first, <font face=> , tag will appear in the altered font.
The "font name" is the name of the font, for example: Times New Roman, Arial, Verdana, Helvetica, or sans serif.
Examples:
<font face="Verdana, Arial, Helvetica, sans serif" size=2>"...The respect created by the conviction of his valuable qualities, though at first unwillingly admitted, had for some time ceased to be repugnant to her feeling; and it was now heightened into somewhat a friendlier nature, by the testimony so highly in his favor, and bringing forward his disposition in so amiable a light, which yesterday had produced. But above all, above respect and esteem, there was a motive within her of goodwill which could not be overlooked. It was gratitude; gratitude, not merely for having once loved her, but for living her still well enough to forgive all the petulance and acrimony of her manner in rejecting him, and all the unjust accusations accompanying her rejection..."
--Jane Austen, Pride and Prejudice</font>
<font face="Lucida Calligraphy, Lucida Handwriting, WhisperWrite, Brush Script MT" size=4 color=008080> Pride and Prejudice and Sense and Sensibility. </font>
Now, what if you really, really, really want to use a fancy font?
Well, if you have a large section of text, you might want to give up, but if you want to use a fancy font for titles on your page, or to make a small part of your page stand out, then you may try to use an image program to turn them into pictures:
One thing to keep in mind with images is the length of time they take to load into someone's browser. An entire page shouldn't be longer than about 75 KBs, text and images included. So, if you want to use a large image you will have little left for other items on the page. The image I just used above is about 4 KBs, so it won't take long to load and isn't a problem.
Nesting Tags
As can be seen above in the first method for changing font size, tags can be used together, or "nested".
For example, to make something both bold and italic use the following tags:
<b> <i> chosen text </i> </b>
or big and red:
<font color="#ff0000"> <big>chosen text </big> </font>
If you want to change both the color and the size of the font at the same time, it is easiest to do both in the same tag. For example:
<font size=+2 color="#0000ff"> chosen text </font>
As you can see, both the color and the size tags can be combined into one, when you use the <font> tag. It does not matter what order you use, <font color="#ff0000" size=+2> is the same as <font size=+2 color="#ff0000">.
Of course, you can add a font too:
<font size=+2 color="#0000ff" face="verdana, arial, helvetica, sans serif"> chosen text </font>
Again don't forget the </font> to close the tag.
How To Draw A Line Across The Screen
In this tutorial the different sections are divided by lines, or rules or bars, which cross the entire screen. This is very easy to do and needs only a single tag (no closing tag is necessary).
To draw a line across the page type:
<hr>
this stands for "horizontal rule", and the result will look like:
I have added a blank space above and below the horizantal rule, but usually the text would appear directly above
and below the line without any extra space, as I have just shown.
You can modify the bar in several ways.
You can make the line go across only a part of the page by specifying the width with a percentage, where 100% would mean the bar goes across the entire screen, smaller percentages make the line cross less of the screen:
<hr width=75%>
results in:
You can make the line thicker by specifying the size of the bar; the larger the number the wider the bar:
<hr size=10>
Results in:
You can also make the bar look solid by adding the word "noshade" to the tag:
<hr size=10 noshade>
Results in:
and
<hr noshade>
Results in:
If you use the width command to specify how much of the screen the bar will cross, then you can also tell the browser where you want the bar to appear: in the center of the screen, to the left or to the right. If you do not specify where you want the bar to appear, it will appear centered in the screen. This can be done with by adding "align=" to the tag:
<hr width=50% align=left>
results in:
<hr width=50% align=center>
results in:
<hr width=50% align=right>
results in:
Again, the <hr> tag is a very easy one, because you only need to put in a single tag and you do not need a second one to close the first.
How To Add Graphic Smiley Faces and Images
If you wish to add graphics such as
or
, the tag looks a bit complicated but I will try to explain it.
First, here is what the tag for the yellow smiley-face looks like:
=
<IMG SRC="http://www.austen.com/tutorial/smiley.gif">
What this means:
- IMG -- This stands for "image" and tells the browser that you are putting in a picture.
- SRC -- This stands for "source" and refers to the location on the internet where the browser can find the image. (As said above, capitalization is unnecessary.)
- http://www.austen.com/tutorial/ -- This is the location on the internet of the computer and directory in which the picture is stored.
- smiley.gif -- Is the name of the actual file for
frown.gif -- is the name of the actual file for .
- Notice that this tag stands alone, you do not need a second tag to close the first.
Note: The quotation marks around the file location (http etc.) are essential!
So the tag for pictures is: <img src="internet location"> , where "internet location" is the web address of the picture. This works with any picture or graphic on the web, not just those listed here.
How To Copy The Location Of An Image
If you see a picture somewhere on the web that you would like to use, and if you are using Netscape, you can automatically copy the location of the image. That is to say you can copy a location, such as http://www.austen.com/tutorial/smiley.gif, so that you can paste it into the tag without typing it all out. If you are using MSExplorer, it is not such a simple thing to do (blame it on Bill Gates!) .
Here, I will show what to do in the case of Netscape (it differs slightly depending on whether you live in the Mac world or the PC world).
For PC users,
Point at the image you want to use, and
Click the right mouse button (not the left, the right mouse button).
This will cause a menu to appear. One of the options in the menu is "Copy Image Location".
If you sellect this option, you can then paste the location (such as http://www.austen.com/tutorial/smiley.gif) into your tag.
For Mac users,
Point at the image you want to use, and
Click and hold down the mouse button.
This will cause a menu to appear. One of the options in the menu is "Copy Image Location".
If you sellect this option, you can then paste the location (such as http://www.austen.com/tutorial/smiley.gif) into your tag.
If you are using MSExplorer, the best way to find the URL, is to use load the image on its own page. Use the same methods listed for Netscape, but choose the "View Image" option. Once the image is loaded all by itself onto the browser, the "Location" line at the very top of the page will contain the full URL. You can highlight it and copy it from there, then paste it wherever you want.
Pictures on the web are sometimes copyrighted, so you should be careful to make sure that they are available for general use, or you have permission from the owner to use them. All of the graphics listed here can be used freely.
Advanced Graphics Information
For more advanced information of manipulating the appearence of a graphic on a page, see Manipulating Graphics With Text
How To Make a Link To Another Web Site
Making a link, such as Jane Austen Information Page, is very similar to inserting a graphic. One major difference is that there must be a second tag to close the first one. The Jane Austen link I just used looks like:
<a href="http://www.pemberley.com/janeinfo/janeinfo.html">Jane Austen Information Page</a>
The first tag consists of three basic parts:
The a stands for "anchor", and is the term used in HTML to refer to links.
The href stands for "hypertext-reference" (I think), and tells the browser you are making a link to another web site.
As in the case of graphics, the full internet location of the web site you are refering to is then inserted in quotation marks after an =. The web address, http://www.pemberley.com/janeinfo/janeinfo.html, is the location of Henry Churchyard's Jane Austen page. The address for the page you are currently looking at is (probably) http://www.austen.com/tutorial/index.html.
Once this first tag is complete, anything typed after it will appear as an underlined link until you insert the second, closing, tag </a>. For example, I could write the above link as
<a href="http://www.pemberley.com/janeinfo/janeinfo.html">Henry's Jane Austen Page </a>
or
<a href="http://www.pemberley.com/janeinfo/janeinfo.html">Hey guys! Click here </a>
If you do not close the tag, with the </a>, then everything that follows will appear as an underlined link.
How To Indent a Section Of Text
Sometimes when quoting text or when you want to set one section of the text apart from the rest, it is useful to be able to indent it. This technique is used frequently in writing to denote long passages of quoted material. To indent a block of text surround it with the tags:
<blockquote>chosen text</blockquote>
The blockquote tag also automatically inserts a blank line above and below the chosen text.
For example:
<blockquote>"...The respect created by the conviction of his valuable qualities, though at first unwillingly admitted, had for some time ceased to be repugnant to her feeling; and it was now heightened into somewhat a friendlier nature, by the testimony so highly in his favor, and bringing forward his disposition in so amiable a light, which yesterday had produced. But above all, above respect and esteem, there was a motive within her of goodwill which could not be overlooked. It was gratitude; gratitude, not merely for having once loved her, but for living her still well enough to forgive all the petulance and acrimony of her manner in rejecting him, and all the unjust accusations accompanying her rejection..."</blockquote>
--Jane Austen, Pride and Prejudice
Once again it is very important to stop the indentation with the </blockquote> tag.
How To Center a Section Of Text
Being able to center text or images comes in handy.
<center>chosen text</center>
The center tag also automatically inserts a blank line above and below the chosen text.
For example:
<center>"...The respect created by the conviction of his valuable qualities, though at first unwillingly admitted, had for some time ceased to be repugnant to her feeling; and it was now heightened into somewhat a friendlier nature, by the testimony so highly in his favor, and bringing forward his disposition in so amiable a light, which yesterday had produced. But above all, above respect and esteem, there was a motive within her of goodwill which could not be overlooked. It was gratitude; gratitude, not merely for having once loved her, but for living her still well enough to forgive all the petulance and acrimony of her manner in rejecting him, and all the unjust accusations accompanying her rejection..."</center>
--Jane Austen, Pride and Prejudice
Once again it is very important to stop the centering with the </center> tag.
How To Right-Justify a Section Of Text
Since we're doing paragraph formatting, let's do right-justifying. This one is a little different, since it uses the <p> tag to make the formatting.
<p align=right>chosen text</p>
The big thing to notice here is that the paragraph tag must be opened and closed like other tags (usually you don't need to close a paragraph tag, but here you do, since you have to tell the browser when to stop the formatting.)
For example:
<p align=right>"...The respect created by the conviction of his valuable qualities, though at first unwillingly admitted, had for some time ceased to be repugnant to her feeling; and it was now heightened into somewhat a friendlier nature, by the testimony so highly in his favor, and bringing forward his disposition in so amiable a light, which yesterday had produced. But above all, above respect and esteem, there was a motive within her of goodwill which could not be overlooked. It was gratitude; gratitude, not merely for having once loved her, but for living her still well enough to forgive all the petulance and acrimony of her manner in rejecting him, and all the unjust accusations accompanying her rejection..."</p>
--Jane Austen, Pride and Prejudice
Once again it is very important to stop the justification with the </p> tag.
As you might be able to guess, this works with align=center as well as align=right.
In addition, you can justify both sides of text by using align=justify. This will cause the browser to space the words differently, so that they line up with the right margin:
<p align=justify>"...The respect created by the conviction of his valuable qualities, though at first unwillingly admitted, had for some time ceased to be repugnant to her feeling; and it was now heightened into somewhat a friendlier nature, by the testimony so highly in his favor, and bringing forward his disposition in so amiable a light, which yesterday had produced. But above all, above respect and esteem, there was a motive within her of goodwill which could not be overlooked. It was gratitude; gratitude, not merely for having once loved her, but for living her still well enough to forgive all the petulance and acrimony of her manner in rejecting him, and all the unjust accusations accompanying her rejection..."</p>
--Jane Austen, Pride and Prejudice
How To Make Bulleted Lists
First you must tell the browser you are making an unnumbered list by typing:
<UL>
Then you must denote the start of each item in the list by typing:
<LI>
in front of the item.
Then you must tell the browser that the list is complete by closing the list tag:
</UL>
Notice that the <LI> tags do not need to be closed.
Here is an example:
<UL>
<LI> Item one on list.
<LI> Item two on list.
<LI> Item three on list.
</UL>
Results in the following list:
- Item one on list.
- Item two on list.
- Item three on list.
The method for making numbered lists is identical to that for bulleted lists. The only difference is that instead of an unnumbered list (UL) it is an ordered list (OL). So just replace the "UL's" in the last section with "OL's" and you have it:
Here is an example:
<OL>
<LI> Item one on list.
<LI> Item two on list.
<LI> Item three on list.
</OL>
Results in the following list:
- Item one on list.
- Item two on list.
- Item three on list.
Again the list is automatically indented.
It is also possible to change the style of the numbers from 1. 2. 3., to A. B. C., a. b. c., I. II. III., or i. ii. iii.
- For capital letters add type=A to the starting tag: <OL type=A>.
- For lower-case letters add type=a to the starting tag: <OL type=a>.
- For capital Roman numerals add type=I to the starting tag: <OL type=I>.
- For lower-case Roman numerals add type=i to the starting tag: <OL type=i>.
Note: This is one of the few cases in HTML where capitilization is necessary: types "A" and "a" give different results, and "I" and "i" give different results.
For example (I'll only show one of these):
<OL type=i>
<LI> Item one on list.
<LI> Item two on list.
<LI> Item three on list.
</OL>
Results in the following list:
- Item one on list.
- Item two on list.
- Item three on list.
Using these techniques and by nesting the lists, it is possible to create outlines:
- Introduction
- The Basics
- What is an HTML tag?
- Formatting text
- Syntax
- Uses <and>
- Usually used in pairs.
- The second tag closes the first
- Capitalization
- Italics
- Bold
- Size of font
- Font attribute
- Headers
- Big and Small attributes
- Color of font
- Advanced
- Inserting Graphics
- Inserting Links
- Conclusion
