|
Basic HTML
for Educators
If you wish to write your own pages using HTML, you
will need to become familiar with the structure of the language. It is
useful for anyone creating Web pages to learn some basic HTML because
it will provide a better understanding of how Web sites are created.
Furthermore, authoring software is far from perfect,
and sometimes you may not be able to make it do exactly what you want.
If you know HTML, however, you can alter the HTML the authoring software
generates.
HTML is a simple markup language that uses basic
text to create Web pages. You can write HTML using word processing software
or any simple text program you might have on your computer. When you save
the file, however, remember to add ".htm" or .html" at
the end of your file name. Make sure there are no spaces or special characters
in it.
Tags
HTML relies on tags to determine the structure and behavior of a Web page.
These tags are contained within a left angle bracket < and a right
angle bracket >. The text directly following the first bracket is called
the tag name, and anything else within the bracket is called the
attribute.
When a tag first appears in a document, it instructs
the browser to do something with the text that follows it. This is called
a start tag. The text maintains that formatting or behavior until
the browser encounters an end tag that indicates the treatment
is to stop. The end tag consists of a backslash and a tag name
contained with a set of brackets. An end tag might look like this
</p>.
For example, if you want to make the text on a page
boldface, the start tag is <b>. The end tag for the
bold font is </b>.
In a title it would look something like this:
The <b>United States of America</b>
is in North America.
In this example, the words United States of America
would appear bold.
HTML tags can be written in all in upper case <IMG>
or all lower case <img> characters. However, you cannot mix the
two cases in a tag <img>. It is best to choose one style and stick
with it throughout your document.
A Basic HTML Document
An HTML document must include at least two basic tags to function: the
<html> tag and the <body> tag. When the browser reads the
<html> tag it knows it has found a Web page.
Most pages also contain a <head> tag. The
<head> tag includes information about the document itself and may
contain javascipt script.
Generally speaking, the browser will display whatever
is between the opening and closing body tag on the page.
<html>
<head>
<title>
My First Web Page</title>
</head>
<body>
Hello World!
</body>
</html>
Notice that the tags are nested. That is, the end
tags follow the order in which the start tags are placed. They are also
indented to make it easier to read.
Try this for yourself. Copy the above tags and text
into a Notepad document. Now save the document as "hello.htm".
Open the file in your browser, and you will see that you've created your
first web page!
Now add other simple formatting tags to change the
way the text looks. Try the tags that follow, and don't forget the end
tags!
<b> for bold face text
<i> for italicized text
Graphics
To insert a picture, use the <img> tag. Identify the source file
of your picture by file name. You don't need an end tag for images, unless
the image is clickable. In a document, the tag might look like this:
<img src = "glencoe.jpg">
tag name attribute file
name
Links
Hyperlinking graphics and text to other Web pages is easily done.
You don't need permission to link to another site. All you need is the
URL of the page you wish to link to. To add a hyperlink to a site, use
the <a> tag. In a document, the tag might look like this:
<a href = "http://www.glencoe.com"> Glencoe
</a>
tag name attribute URL
text
end tag
The above tags would make the text "Glencoe"
a link to another page (Glencoe's main page). On the Web page, it would
look like this:
Glencoe
The View Source Trick
Many developers use the Web as their source of inspiration when developing
new Web sites. It is natural to want to replicate certain aspects of design
on a site that you like, but how can you figure out what they did?
It's easy! Simply view the page's source code by
pointing to the page and right clicking with your mouse. Select "View
Source" on the menu that appears and the browser will open a second
window with all of the code revealed. (Macintosh users should go to the
View menu and select "Source.")
HTML Tag Quick Pick
The table below provides a simple breakdown of some the most commonly
used HTML tags.
| Tag |
Description |
| <b> |
makes text bold |
| <i> |
italicizes text |
| <font> |
indicates font style to use |
| <blockquote> |
indents text |
| <p> |
indicates a paragraph break (2 lines) |
| <br> |
indicates a line break (1 line) |
| <table> |
creates a table (as seen here) |
| <tr> |
indicates a row in a table |
| <td> |
indicates a cell |
| <img> |
dipsplays an image on the page |
| <a> |
links text or images to another page |
Related Articles
Building Your
Class Web Site
In this second part of our series on publishing class Web sites, we get
down to the nuts and bolts of creating Web pages, including authoring
software, FTP, Web graphics,and file directories.
Web Publishing
Basics
Building your first class Web site is an exciting and sometimes intimidating
experience. While there are many software programs that can help you design
a simple Web page, there are numerous other details that you will need
to know before you can launch your class Web site. This article, our first
in a series about Web publishing, offers you basic information about how
Web pages are displayed, where they "live" in cyberspace, and what to
watch out for when arranging for a hosting service.
|
