|
|
Building a Web Site
of Your Own |
Session I -
Getting Started with HTML
Before beginning this
topic, make sure to have covered the prerequisite question - what is a web page? HTML (or HyperText Markup Language) is
an extremely simple programming language. It is also much like working with early word
processors. In the early days
of microcomputers, telling a word processor to underline text usually meant typing a
special sequence of characters to begin underlining and another special sequence to stop
underlining. That is much like HTML. A simple web page is much like a word
processing document in which special codes enclosed between the < and > symbols tell
the browser formatting information. These special codes are called tags.
Often, a tag has a beginning code and another ending code. The example below
is what we would enter to make Bold text which says "Are we having
fun yet?"
<B>Are we having fun yet?</B>
The / character in the closing HTML tag is the signal to end the bold text formatting.
On a larger scale, an entire web page document begins with the tag <HTML> and
ends with the tag </HTML>.
What do I need to create HTML documents?
All one needs to create a web page is a simple text editor. For PC users, WordPad
is enough. Mac owners can use SimpleText. By including the proper
tags, the document will be properly interpreted by ANY browser on ANY computer! Oh
yes, since PCs usually decide how to open a document based on its file extension, it is a
good idea to save any web page ending with a period followed by the characters htm
or html. A page name for an overview part of a web site might be something
like overview.htm or overview.html.
Sample HTML commands
| Description |
HTML Tags |
| Begin and end paragraphs |
<p> and </p> |
| Center a paragraph of text |
<center> and </center> |
| Break a line without starting new para. |
<br> |
| Italics |
<i> and </i> |
| Bold |
<b> and </b> |
| Strikethrough text |
<strike> and </strike> |
| Headings 1 through 6 |
<h1> and </h1>
(for other sizes, use 2, 3, etc.
in place of 1) |
| Insert a horizontal rule (line) |
<hr> |
| Change the font |
<font face="Arial, Geneva">
and </font> |
| Change the font size, too |
<font size=4 face="Arial">
and </font> |
| Change the color, too |
<font size=2 face="Arial"
color=blue>
and </font>
Note: some colors specified by name but others require their
number |
| Begin and end an ordered list |
<OL> and </OL> |
| Begin and end an unordered list |
<UL> and </UL> |
| Place a list item in a list |
<Li> and </Li> |
| Begin and end a definition list |
<DL> and </DL> |
| Begin and end the defined term |
<DT> and </DT> |
| Begin and end the definition |
<DD> and </DD> |
| Include an & (ampersand) symbol |
& |
| Include a < (less than) symbol |
< |
| Include a > (greater than) symbol |
> |
| Include an á (lower case a with acute accent) symbol |
á |
| Include an é (same with e) symbol |
é |
| Include an â (lower case a with circumflex) symbol |
â |
| Include an ä (lower case a with an umlaut) symbol |
ä |
| Include a ç (lower case c with cedilla) |
ç |
| Include a ñ (lowercase n with tilde) |
ñ |
| Include a ø (lowercase o with slash) |
ø |
| Include a ß (lowercase ess-zed) symbol |
ß |
| Force extra spaces between
words |
|
| Begin a hyperlink |
<a href="http://www.putaddresshere"> |
| End a hyperlink |
</a> |
| Begin a relative hyperlink |
<a href="localaddress.htm"> |
| End a relative hyperlink |
</a> |
| Include a graphic (relative) |
<img src=graphicname.gif> |
More about
learning HTML
Rather than continuing with details about HTML here, there are already many excellent
sites with tutorial and reference information.
Finally, take a look at a side-by-side explanation of a sample
HTML document.
Get a web page editor here:
- HTML Editors and how to get
them
- This web site provides links to dozens of sources of web editors, reviews of the sites,
and information about cost and availability. It is a great starting point for anyone
beginning to use HTML.
- Netscape
Gold or Communicator
- This is a web browser
AND HTML editor available in a single package from Netscape. The package is
free for use by educators and may be found navigating from Netscape's home
page at http://home.netscape.com
- Internet Explorer - FrontPage
Express
- This editor works with Internet Explorer versions 4.x and 5.x.
FrontPage Express is a free alternative to (and is very similar to)
FrontPage, the full version of the software. Express does not include
the same web site management tools that FrontPage contains. Instructions
for acquiring FrontPage Express are also contained at this site.
And learn more
about HTML here:
- The HTML Index
- This is a fairly complete listing of HTML commands and a brief description of what each
command is supposed to do. It is a good reference site when looking for a memory
refresher about a command or trying to find just how to do some specific task.
- Web
Monkey - HTML Guide
- This site provides a
complete list of HTML tags grouped by function with explanations of what
each does.
- HyperNews HTML Guide
- This site is a complete reference center for HTML.
It includes links to HTML
instructional materials and to the Index listed above.
- C|Net Central Web
Authoring
- This site also includes a complete introduction to creating web pages in a series of
easy lessons with examples of HTML and the resulting appearance on a web page.
- How do they do that with HTML?
- This web site is designed to share tips and tricks about which web authors are most
likely to want to learn.
[Session 1] [Session 2] [Session 3] [Session 4] [Session 5]
[HomePage Overview] [Top]
This site copyrighted (2005) by Dr. Blake West - Please credit when linking to
the
site!
Kansas NEA - 715 SW 10th Ave. Topeka, KS 66612.
|
