|
Introduction
HTML is very easy to use. It was designed
that way. If you can edit a text file, then you can write HTML.
HTML stands
for hypertext markup language, but it's not a programming language like Java, C, or BASIC. HTML is much simpler.
It's a way of describing how a set of text and images should be displayed to the viewer, similar in concept to
a newspaper editor's markup symbols. HTML is used on the web to create basic formatting, like paragraphs, numbered
or bulleted lists, bold, and italicized text. By learning and using a few basic commands in HTML, you can format
your site's Web pages to make a clear and visually appealing web page.
This lesson is an introduction and does not begin to offer instructions on every aspect of HTML. Links to additional
Web-based resources about HTML and other related aspects of preparing files are provided on the CBX page.
Getting Started
HTML uses characters called "tags." Tags begin with a < character and end with a > character, and
tell a browser to do something special, like show text in bold <b>, or italic <i>, or in a larger font,
or to show an image, or to make a link to another Web page.
Here's an example of what HTML code looks like:
If you program this:
Christ Links is a resource for <b>Christian</b> webmasters.
It will look like this on your browser:
Christ Links is a resource for Christian
webmasters.
Be sure to add a slash ( / ) in the closing tag to let the Web browser know you are ending the specific formatting,
or it will carry over through the entire document.
The preformatted element (<PRE> and </PRE>) allows you to include preformatted text. Text contained
within the preformatted text element defaults to a fixed pitch font. Your browser will preserve the white space
(line breaks and horizontal spacing) of your text within the <PRE> and </PRE> tags. This means that
your text can continue past the screen width because your browser will not automatically wrap the text. Text is
wrapped only when you inlude a line break (<br>).
Note: You can see the html code for any web page by clicking on the right mouse
button for "view source" (PC's).
Frequently Used Tags
Now that you know how to write HTML tags, look over this list of tags you
can use on your site's web pages. You only need to know a handful of tags to do effective formatting.
|
Opening Tags
|
Ending Tags
|
Formatting Description
|
|
<p>
|
</p>
|
Creates a paragraph
|
|
<br>
|
none
|
Adds a single line break
|
|
<div align=center>
|
</div>
|
Creates a centered block of text. Other values
for "align" are "right", "left" and "justify"
|
|
<hr>
|
none
|
Inserts a horizontal line
|
|
<center>
|
</center>
|
An alias for <div align=center>
|
|
<blockquote>
|
</blockquote>
|
Creates a block of text with indented left and right margins
|
|
<b>
|
</b>
|
Creates boldface text
|
|
<i>
|
</i>
|
Creates italicized text
|
|
<u>
|
</u>
|
Creates an underlined text
|
|
<h1>
|
</h1>
|
Creates a large heading
|
|
<h2> through <h6>
|
</h2> through </h6>
|
Creates progressively smaller headings
|
|
<font color=red>
|
</font>
|
Changes font color (i.e., to red)
|
|
<font size=1> 2, 3, etc.
|
</font>
|
Sets font size, progressively larger
|
|
<font size=+1> +2, +3, etc.
|
</font>
|
Increases font size relative to current size;
decrease font size with -1, -2, etc.
|
|
<font face=Times>
|
</font>
|
Changes font style (i.e., to Times)
|
In order to get the desired effect in the "Formatting Description"
column, all you need to do is put the opening and closing tags around the appropriate block of text. As you can
see, some tags do not need a closing tag.
Adding Lists:
Lists are easy to add to your Web page. HTML uses three basic types of lists:
- Bulleted or unordered lists ( <ul> … </ul> ),
- Ordered lists ( <ol> … </ol> ), and
- Definition lists ( <dl> … </dl> ).
(The list above is an example of a bulleted list.)
- For a numbered or bulleted list, each item in the list is marked with the same
tag ( <l>> </li>). For an unordered list that marks the list items with a bullet, the programming
will look like this:
<ul>
<li>First list item</li>
<li>Second list item</li>
<li>Third list item</li>
</ul>
- For an ordered list that numbers the list items, the programming will look like
this:
<ol>
<li>First list item</li>
<li>Second list item</li>
<li>Third list item</li>
</ol>
- The third type of list is a little different. To create a definition list, present
an item to be defined (tagged with <dt> </dt> ), and a definition for that item (tagged with <dd>
</dd>). These item tags, along with their ordered and unordered cousins, do not require closing tags. A sample
of a definition list looks like this:
- <dl>
- <dt>First term</dt>
- <dd>First definition</dd>
- <dt>Second term</dt>
- <dd>Second definition</dd>
- <dd>Alternate definition</dd>
</dl>
Creating Links With the <a> Tag
The <a> tag is a container tag that defines a link to another page,
and it's easy to use. The use of links will make your web site a valuable tool for your visitors.
The tag for creating a link is <a href={Web address}> linking text </a>. Here's an example:
Please <a href=http://www.christlinks.com/> visit </a> Christ Links.
This will be rendered as:
Please visit Christ Links.
"Visit" is the linking text; clicking on it will send you to the web address specified after the "=",
in this case, http://www.christlinks.com/
|
