Digital Communication in the Classroom

HTML Basics

Dr. Marcovitz

 

Use the following WWW sites to help you learn about HTML:

http://www.htmlcodetutorial.com/

http://draac.com/

http://www.mcli.dist.maricopa.edu/tut/

This document will give you some of the basics of creating web pages, but the above resources will give you much more information.

Creating a Web Page

There are many ways to create a web page. Many people use programs such as Claris HomePage or Adobe PageMill to create web pages. These programs behave similarly to word processors and follow the What You See Is What You Get philosophy. They are generally easy to use. However, these programs are still in their early stages, and they are not yet very good. If you want to do anything beyond the most basic web page, you will have to know how to dabble in HTML (the computer language of the web) to get your pages to look just the way you want. I have found, for example, that whenever I create a table, Adobe PageMill does something that I don't want, and I have to edit the HTML code directly. Microsoft Word '97 also has the capability of turning a word document into a web page. Unfortunately, the one time that I tried this, the translation butchered my document so badly that I almost had to start from scratch. I am sure that these programs will improve in the future, but for now, if you want to get a web page to look right (that is, the way you want it), you are likely to need a little HTML.

If you don't use a special web page editor, you will have use a regular word processor. You can use any word processor, but you must save your document in a text format. In ClarisWorks, for example, when you save the document, look right above the spot for the name of the document. There is a pull-down menu under the words "Save As." Choose Text from this menu. To simplify matters, you might use a text-only word processor, such as SimpleText on the Macintosh to edit your web pages. By doing this, you will automatically save your files as text files because that is all that SimpleText will do.

Keep in mind that any formatting that you do in the word processor (centering, bold, tabs, fonts, sizes, etc.) will be ignored by the computer when you look at the web page. You must use the HTML tags to do any of your formatting.

Open your word processor and type your file with the appropriate HTML tags. Save the file on your disk with a name ending in .htm or .html to identify the file as an HTML file.

Open your browser, such as Netscape Navigator (do not quit out of your word processor). In Netscape Navigator, choose Open File or Open Page in Navigator (depending on the version of Navigator you are using). Locate the file you just created in the Open File dialog, and open it. You should see the page as you requested.

When you want to make changes to your page, switch back into your word processor (use the Applications menu on the Macintosh) and edit your file. Be sure to save the file. Switch back into Netscape Navigator (again use the Applications menu on the Macintosh) and hit the Reload button. You should see the page redraw with the changes you made. Always remember to save your file in the word processor and hit the reload button in the browser.

Tags

Tags are the commands that tell the computer what to do. If you want text to be large and bold, for example, you use the tag to tell the computer to make the text large and bold. Tags are enclosed in angle brackets. H1 is the tag to make text large and bold, so it appears in your file as <H1>.

Most tags have an open tag and a close tag. Everything in between the open and close tag is affected by the tag. A close tag is the same as the open tag, except that it begins with a forward slash. For example:

<H1>This is my big heading</H1>This is not part of the big heading.

The words "This is my big heading" are between the H1 tag and the /H1 tag, so they are going to be big and bold.

Parameters

Some tags also have parameters associated with them. Parameters give the tag more information. For example, the TABLE tag tells the computer that you want to have a table, and it can have several parameters that tell the computer more information about the table. For example, you can tell the computer how wide you want the table to be:

<TABLE width=100%>

...

</TABLE>

Tells the computer that you want a table that takes up 100% of the width of the screen. Notice that the /TABLE tag does not need to include the parameters.

Sample Starter Web Page

<HTML>
<HEAD>
<TITLE>My Web Page</TITLE>
</HEAD>
<BODY>
<H1>Sample Big Heading</H1>
<p>This is a paragraph. It is not much of a paragraph, but it is the beginning of a simple, sample web page.</p>
<p>This is the second paragraph.</p>
</BODY>
</HTML>

Linking To Other Pages

<A HREF="http://www.foo.com">This text is linked.</A> This text is not linked.

The A tag links to someplace else. The HREF parameter tells what to link to. Everything between the double quotes is the address (URL) of the page to link to. If you want to link to other pages in other places (on other servers), you must have the entire address, including the http://

If you want to link to other pages that are in the same place as your page, you can do that without including the entire address. For example, if you have a page about yourself that, named me.html, and you have another page about your hobbies, named hobbies.html, and these pages are in the same directory/folder on the same disk, you don't need the full link:

Learn about my <A HREF="hobbies.html">hobbies</A>. If you share any of my hobbies, send me email.

In this example, the word "hobbies" will be linked to the file hobbies.html as long as it is in the same place as me.html.

Clickable Email Addresses

You can use the A tag to set up a word or phrase that can be clicked to send you email. For example, the following will send me email:

Click <A HREF="mailto:marco@loyola.edu">here</A> to send me email.

The word "here" will be highlighted, and if someone clicks on it (and the browser is configured to send email), the computer will set up an email message to me.

This uses the same HREF parameter as you would for linking to other WWW pages, but the address starts with "mailto:".

Note that some computers are not set up to send email from a clickable email address. That makes it very difficult to test if this tag works. If you cannot send email from your browser, you can do two things to test if your clickable email works:

  1. While in your browser, point to the email address (don't click). In the lower left hand corner of your browser window, you should see exactly what you put between the quotes in the <A> tag.
  2. While in your browser, click on the email link. Note carefully what happens. Now go to a page with a working email address and click on that. If you're not set up to send email, neither click will work, but the same thing should happen both times.

If you have done something wrong, the most likely thing is that in the first case, you will see something besides what you typed between the quotes in the <A> tag, and in the second case, you will get a "Page Not Found" error.

Images

You can include pictures in your WWW pages. Generally, you will want to use pictures that are in the JPEG or GIF formats. You can get pictures by scanning them in, taking them with a digital camera, creating them in a drawing or painting program, or saving them from other web pages (on a Macintosh, hold down the mouse button on the picture you want to save, and select "Save this Image As" to save the picture.

Once you have the picture saved as a file, make sure the picture is in the same location as your web page. If it is not in the same location, you will have to figure out a (potentially complicated) path to point to the picture. Also, do not put any spaces or fancy characters in your picture name, just use letters and numbers.

Imagine you have a picture named myphoto.jpg in the same location as your web page. You can include the photo on your page with the IMG tag:

<IMG SRC="myphoto.jpg">

This is one of the few tags that does not have a corresponding close tag.

The IMG tag also has several parameters, including width, height, and align.

<IMG SRC="myphoto.jpg" width=125 align="right">

will include your picture and scale it to have a width of 125 pixels and align it on the right side of the screen with any text to the left of it.

Lists

Lists are a useful way to organize information on a web page. Lists can be either ordered (numbered) or unordered (bulleted). There are only three tags needed for lists: <OL>, <UL> and <LI>. Each list starts with <OL> or <UL> and ends with </OL> or </UL>. Each item in the list starts with <LI> and ends with </LI>. For an ordered list:

<OL>
<LI>The first item</LI>
<LI>The second item</LI>
<LI>The third item</LI>
</OL>

This will produce a list that looks like this:

  1. The first item
  2. The second item
  3. The third item

To create an unordered (bulleted) list, change the <OL> to <UL> and the </OL> to </UL>. Note that lists can be nested by including lists within lists. That is, to create a sublist after item one, include a complete list after the first item (i.e., a list starting with a <OL> or <UL> , including one or more items starting with <LI>, and ending with </OL> or </UL>).

Tables

Tables are the most complicated of the basic features of HTML. However, the only way to get things lined up exactly as you want them is to use tables. Additionally, most web authoring systems (Claris HomePage, Adobe PageMill, for example) do not handle tables very well, and even if you use them for everything else, you are likely to need to edit the HTML code directly to get tables to do exactly what you want to do.

There are three main tags you need for tables: TABLE, TR, and TD. Every table starts with the TABLE tag (and ends with the /TABLE tag). Every row starts with a TR, and every item within a row starts with a TD. Here is an example:

<TABLE border=1>
<TR><TD>one</TD><TD>two</TD></TR>
<TR><TD>three</TD><TD>four</TD></TR>
</TABLE>

This will have a table that looks like the following

one two
three four

Notice the border=1 parameter, which puts a border of thickness 1 around each cell in the table.

Be careful that you always have a /TABLE at the end of your table. Otherwise, you will get very strange results.


Return to ET630 Home Page.

This page was prepared by: David M. Marcovitz, Ph.D.

Last updated: May 14, 2010

 
[Loyola University Maryland | School of Education]