McGraw-Hill Companies
How-To Article
How-To Articles > Technology Integration > Grades 6 - 8 > Simple HTML for Educators
Grade Levels K - 2
Grade Levels K - 2
Grade Levels 3 - 5
Grade Levels 3 - 5
Grade Levels 6 - 8
Grade Levels 6 - 8
Grade Levels 9 - 12
Grade Levels 9 - 12
Kinesthetic Learner
Kinesthetic Learner
Visual Learner
Visual Learner
Auditory Learner
Auditory Learner
Technology Integration
Technology Integration

Simple HTML for Educators

Understanding a few basic HTML tags can help teachers avoid confusion and publish exactly what they want to the Web. This article describes the essential html tags to know.
Technology Integration Technology Integration Print this page Save this page E-mail this page

HTML (hypertext markup language) is the simple formatting language that uses basic text to create Web pages. Teachers can write HTML using word processing software or any simple text program on the computer. It is useful to have a basic understanding of how html works when building a Web site.

 
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 bold, 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 It Out
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, but don't forget the end tags.
<b> for bold face text
<i> for italicized text
 
When saving an HTML document, remember to add ".htm" or .html" at the end of the file name. Make sure there are no spaces or special characters in it. Browsers will not read documents with the file extension “.doc”.
 
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
To add a hyperlink to a site, use the <a> tag. In a document, the tag might look like this:
<a
href=
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:

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?
 
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 Tags
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>
displays an image on the page
<a>
 links text or images to another page

Related Articles

Building Your Class Web Site
This article gets down to the nuts and bolts of creating a 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 offers 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.

McGraw-Hill Education The McGraw-Hill Companies