Let's get started!
Bold, Italics and
Underline
Breaks and Paragraphs
Although your
typed text may contain carriage returns, tabs and extra
spaces, browsers will not see them. You will have to use
tags in order to create blank space in your HTML
documents.
<br> creates a break
between one line and another. You can use several of
these tags together to create blank space.
| This line is <br> broken. |
This line is
broken.
|
<p> creates an extra
space between two lines of text. If you place <br>
in a line of text, it will only break the line; if you
use <p>, it will both break the line and create an
extra space.
| This line is <p> spaced. |
This line is
spaced. |
<hr>creates a
horizontal rule, or horizontal line.
| This is a horizontal rule: <hr> |
This is a horizontal rule:
|
|
Tabs
There is no formal HTML tag
to create a "tab" within a document. Many Web
designers create tables or use blank images to
create space (tables and images are explained
later in this article). One way to indent text is
to use the tag <ul>
to make the browser think you are about to
create a "list." A list automatically indents
text. Close with a </ul> to "end" the
indentation. The tags <blockquote>...</blockquote> will also
indent text.
Another alternative is the <pre> tag. This tag is
used to display preformatted text -- text
displayed "as is." Any spacing created within
<pre> and </pre> tags will appear in
the browser as it appears in the source.
|
Changing Font Color, Type and
Size
- Change the color of any text by using the
tags:
<font color="color">...</font>
| This is <font
color="red">red</font>. |
This is red.
|
| This is <font
color="green">green</font>. |
This is green.
|
Most standard colors will work. Also try "lights" and
"darks" such as "lightblue" or "darkgreen." You can also
specify a particular hexadecimal color number,
such as: <font
color="#864086">. For a list of hexadecimal
color codes, visit this
page.
If you would like to assign a specific color to the
entire text of your page, add text="color" within the <body> tag.
Example: <body
text="blue">
Even if you assign a color to your entire text, you
can still change the color of any portion of that text
by using the tags you learned above.
- Change the font type of any text by using
the tags:
<font face="font
type"> ... </font>
| This is <font
face="arial">arial</font>. |
This is Arial.
|
| This is <font
face="geneva">geneva</font>. |
This is Geneva.
|
(Note: If the font type you specify is not
available in the user's computer, the font type will
default to the browser default, usually Courier or
Times New Roman; so it is best to stick to standard
font types if you want to be able to control what is
displayed in the user's browser.)
- Change the size of any text by using the
tags:
<font
size=value>...</font>
Example: <font
size=4>
The default font size on most browsers is "3", so
any values larger than 3 will make the text larger,
and any values smaller than 3 will make it smaller.
You can also change the font size by adding to or
subtracting from the default font size.
Example: <font
size=+4>, or <font
size=-2>
| This font is <font
size=+2>increased by 2</font>. |
This font is increased by
2. |
| This font is <font
size=+1>increased by 1</font>. |
This font is increased by
1. |
| This font is <font
size=-2>decreased by 2</font>. |
This font is decreased by
2. |
| This font is <font
size=-1>decreased by 1</font>. |
This font is decreased by
1. |
You can also change the font size by using the tags
<small> and <big>:
| This is <small>small</small> text. |
This is small text. |
| This is <big>big</big> text. |
This is big text.
|
Heading tags also change font size, creating
a bold "heading" for a paragraph or story:
| <h1>This is an H1
heading.</h1> |
This is an H1 heading. |
| <h2>This is an H2
heading.</h2> |
This is an H2 heading. |
| <h3>This is an H3
heading.</h3> |
This is an H3
heading. |
End any font element change with the tag:
Or, by using the coordinating ending pair for the
specific tag you used:
Example: </small>,
</big>, </H2>
Creating Background Color
Change the
background color of your page by adding bgcolor="color" within the
<body> tag.
Example: <body
bgcolor="yellow">
Again, as was described in the section on changing
font color, you can use most standard colors, or use a
Hexadecimal
Color Code.
Creating
Lists
There are three types of lists you can
create: Unordered, Ordered and
Descriptive
An unordered list looks like this:
- California
- Oregon
- North Carolina
An unordered list is a bulleted list initiated by the
tag <ul>. The tag <li> (short for List Item) is
used before each item in the list. The closing tag </ul> ends the list.
Example:
<ul>
<li>California
<li>Oregon
<li>North Carolina
</ul>
The type of bullet can be changed to a
"circle," "square" or "disc" by adding a specification
within the <ul> tag:
<ul type="circle">
<li>California
<li>Oregon
<li>North Carolina
</ul> |
- California
- Oregon
- North Carolina
|
<ul type="square">
<li>California
<li>Oregon
<li>North Carolina
</ul>
|
- California
- Oregon
- North Carolina
|
An ordered list looks like this:
- oranges
- grapes
- cherries
An ordered list is a list of items in a logical,
numbered order. Use the tags <ol> and </ol> to start and end this kind
of list. Again, the <li>
tag is used in front of each item.
Example:
<ol>
<li>oranges
<li>grapes
<li>cherries
</ol>
You can change the type of organization by
adding a "type" designation within the <ol> tag.
<ol type="A"> orders
the list by capital letters: (A, B, C...)
<ol type="a"> orders
the list by small letters: (a, b, c...)
<ol type="I"> orders
the list by Roman numerals: (I, II, III...)
<ol type="i"> orders
the list by small Roman numerals: (i, ii, iii...)
If you would like to start your ordered list with a
specified value, such as "6," use the following "start"
and "value" tags:
<ol start=5>
<li
value=6>
A descriptive list creates a list of text
items with an indented second line:
- Sheikh Ali
- Founder of Stuff Work
Use the following tags in this manner:
<dl>
<dt>Sheikh Ali
<dd>Founder of Stuff Work
</dl>
The <dt> tag should
correspond with the text you want lined up on the
margin; <dd> corresponds
with the line you want indented.
Linking to Other
Sites
One of the best parts about Web pages is
the ability to create links to other pages on the
Web. Using the following anchor tags, you can
reference other people's work, point to other pages you
like, etc:
<a href="URL">
Type in the title of the page after the anchor tag,
and close the anchor with:
</a>
Example:
<a href="http://www.badshah.i8.com"> Badshaha Pages </a>
This is how it will look on your page:
Badshah
Pages
You can also easily combine bulleted lists with links
to create a list of links.
New Windows
If
you do not want visitors to leave your page when they
click on one of your links to another site, add this tag
to your anchor tag. When the link is clicked, instead of
taking the user away from your site and into someone's
else's, it will simply open a new, blank window to
display the link's destination:
target="_blank"
Example:
<a
href="http://www.badshah.i8.com"
target="_blank">
Link Color
Blue
is the standard default color for links. But you can
change the colors of linked information on your page by
inserting these tags within your <body> tag:
- link="color"
- vlink="color"
Vlink stands for "visited link." Links change colors
when they have been visited. If you do not want visited
links to change color, simply attribute the same color
to both links and vlinks.
Example: <body link="green"
vlink="green">
Linking to Receive E-mail
If you
would like to receive e-mail from people who read your page, use the
following anchor tag:
<a href="mailto:youremailaddress">
Then type your e-mail address (or whatever link text you would like to
have shown on your page) again after the tag. Close the string with:
</a>
Example:
<a href="mailto:madpakcom@yahoo.com">
E-mail Me </a>
This is how it will look on your page:
E-mail Me
Creating Links to Your Own
Page
Anchor tags are not only used for linking to pages
on the Internet. You can also use them to link to information located
within your own page. In this instance, you can omit the prefix
"http://www" and just include the html document file name:
Example: <a href="company.htm"> Company
Information </a>
To link to a specific portion of your page, you will need to
name the section you are referring to, and include that name within
the link's anchor tag. Here's how:
Name any section of your page by inserting the following tag
immediately before the specific section you want the link to refer back
to. You can choose any word, letter or character to use as a name:
<a name="name">
Example: <a name="5">
In the anchor tag, you refer to this portion of your page by putting a
"#" in front of the name. If the named link refers to a location within
the page that contains the link, the anchor tag linking to this named
portion would look like this:
<a href="http://geocities.yahoo.com/#5"> Company Information
</a>
If the named link refers to an html document separate from the page the
link is located in, include the html document file name as well.
Example: <a href="http://geocities.yahoo.com/company.htm#5"> Company
Information </a>
Adding Images and Graphics
Place any
digital image on your page using the following tag:
<img src="name of picture
file.extension">
Images on Web pages are either GIF files (pronounced "jiff") or
JPG files (pronounced "jay- peg"). Any image will contain one of
those extensions, so if you have an image called "logo," it will be
labeled either "logo.gif" or "logo.jpg."
Be sure to store the images and graphics that you will be displaying on
your Web page in the same folder or directory that you have your "html"
file stored into. Otherwise, your computer will have trouble finding the
picture you want displayed. Also, be sure to type the picture name
exactly how it is saved into that folder -- file names are case
sensitive.
Justification
By default, your text
and images are left-justified when displayed in your browser, meaning that
text and graphics automatically line-up on the left margin. If you want to
"center" any portion of your page instead, you can use the following tag:
<center>
You can end the centering with the corresponding closing tag:
</center>
You can also code "divisions," anything from a word to a line of text
to an entire page, to be justified a certain way.
Start your division with the division alignment tag, including the
justification you wish the text or images to take on (i.e. right, left,
center):
Example: <div align="center">
End the division justification alignment with the tag:
</div>
With the information you have just learned in this article, you can
begin to create very interesting and eye-catching Web pages. Try creating
a Web page or two using the tools and tags we just discussed. If you're
eager to have the world view your masterpiece, then skip to the article
"Getting Your Page Online" to learn how to publish your new Web page.
