Learn HTML & Create Your Own Web Page
With a Word Processor or Notepad

JOHN H. WAHLERT, WSAS INFORMATION OFFICER


These instructions are intended to help faculty members construct or update their pages on the Liberal Arts and Sciences web site. I am most intersted that individuals learn to use the paragraph, <P> & </P>, and line break, <BR>, commands, so I can understand text sent to me via e-mail. It is my hope that these basic and partial instructions will encourage faculty members who enjoy solving design problems to investigate HTML further and develop their own expertise.

For updating pages, please download your existing page and make changes within it in a word processing program or notepad. Once pages have been coded or emended (File: Save As), faculty members can send them to me as either *.htm or *.txt file attachments to e-mail. The purpose of having individual faculty members do their own HTML coding is twofold: I will know the overall structure of the page, and I won't have to retype everything. Don’t download your page into an HTML page composer; the result is a mess of mark-up language duplication.

Since our goal is to make information available to students interested in and currently enrolled at Baruch College, I have restricted the kinds of functions that are used on our pages. For example, not all computers and browser versions can handle frames, so I have not used frames. Similarly, Java animations slow down the transfer of information, especially over a slow modem, so there are no instructions about Java. I have found, too, that pages with frames are confusing to print, and those with Java cause my browser to register an error message and automatically close. So there!

This page is obviously under endless construction because questions and special layout needs are themselves endless. Be warned that I am no sort of expert. I have learned some things from books, but most of what I do has been discovered by tinkering. I appologize to Mac users. I have a PC with Windows NT, and I am simply not familiar with how your operating system and browser work. I hope most of what I present is useful. HTML is HTML no matter what kind of computer you are using.

Rule # 1: Never create a page that has more than a screenful of text, unless you expect people to print it out and read it at leisure. And no glitzy flashing letters, either.

If you want to achieve something in your page format that is not suggested below, please sent me a query by e-mail

Page Index
Web page--an overview
Simple HTML codes
     Line breaks, paragraphs, line spaces
     Character spaces
     Indenting text
     Character formatting
     Font sizes
     HTML symbols
Text alignment
Lists
     Unordered lists (bulleted)
     Ordered lists (numbered)		 Ruled lines
Tables
Active e-mail link
Active links
     Internal
     External
Images and backgrounds
Web-safe colors
Capturing stuff from the web
References
Notes

A web page is set up with the following overall format:

<html>
<head>
<title>Document Title</title>
</head>
<body>

</body>
</html>

You can see that HTML markup tags--instructions to the browser program (e.g., Netscape, Internet Explorer)--are enclosed within < > symbols and that each feature is turned on and then turned off with a / preceding the instruction. For example, the page begins with <html> and ends with </html>. The "title" is what appears in the blue band at the top of the screen; its content is important because search engines look at the words in the title. The actual page heading and the text appear between <body> and </body>.

You can type HTML (HyperText Markup Language) documents in Notepad (which saves them as text files), or you can do it with a word processor. The HTML tags will not show when an internet browser program reads the file, because it interprets them as instructions for displaying the page on a monitor. You do have to get rid of all the formatting of the word processing program, however, and that is simple. Just use the save as option and select text only in the word processor. The file is saved as *.txt. To view the file as a web page, you may have to change the extender from *.txt to *.htm (or *.html if your version of Windows supports four letter extensions); you can then open the file in a web browser and see the result of your work.

Definitions of common abbreviations:

  • HTML: HyperText Markup Language consists of markup elements or tags within <> symbols; these are instructions to the browser, and they are embedded in the document. Markup elements can also be called codes. You will often see them capitalized, simply because that makes them easy to spot in the document you are creating or revising.
  • HTTP: HyperText Transfer Protocol, an Internet client-server protocol
  • URL: Uniform Resource Locator
  • WWW: World Wide Web

Note: The only reason that HTML tags and symbols are visible on this page is that I have enclosed the codes within the codes for the symbols (not the actual symbols).

Return to Page Index


Simple HTML tags: ( Tag contents are not case sensitive, <FONT> = <foNt>)

Line breaks, paragraphs and line spaces:

Character spaces: No matter how many spaces you insert, the browser sees them as just one space. Text is normally flush-left, so indenting a paragraph and widely separating words has to be done by repeatedly inserting the code for non-breaking spaces: &nbsp;. Sometimes the creation of a table with invisible borders is the best solution for complex formatting.

Indenting text: The instruction <BLOCKQUOTE> can be used to indent a block of text. The text must end with </BLOCKQUOTE>. Here is an example of the effect:

I was playing with Baby in the widow of the drawing-room this morning, & she was blowing a feeble fly & blew it on its back, when it kicked so hard, that to my great amusement Baby grew red in the face, looked frightened & pushed away from the window. (C. Darwin to his wife, 3-4 February 1845)

Character formatting: Boldface, italic and underlined characters are easily coded.

formatcodeappearance
boldface<strong>word</strong>
<b>word</b>		word
italics <em>word</em>
em stands for emphasized
<i>word</i>		word
underline <u>word</u>word
superscript 4<sup>2</sup> 42
subscript4<sub>2</sub> 42

Font sizes: Font sizes can be determined in two ways, by designating text as a heading or by instructing the browser to increase or decrease font size.

  1. The tag <H#> designates a heading of a particular level, H1 is largest and H6 is smallest. The instruction <H#> is turned off by the command </H#>. The following examples illustrate the heading sizes and line spacing:

    <H1>Bang!</H1>

    <H2>Pow!</H2>

    <H3>Clap</H3>

    <H4>Click</H4>

    <H5>Sst</H5>
    <H6>ants</H6>
  2. Font size can be specified relative to the default size of the browser.

    • You can specify the font size for the entire page by placing an instruction following <body>. The default font size is 3; if you want a larger font throughout the page (except within tables), you could add <BASEFONT SIZE=4> (or some larger number) immediately after <BODY> and before any text that is to be displayed in the body of the document.

    • Font size can be changed locally to increase or decrease from the basefont size. Adding <FONT SIZE=+1> before the letter or text you wish to make larger and </FONT> following that text will make the desired change. You can use larger numbers for larger sized letters and negative numbers for fonts <FONT SIZE=-1> smaller </ FONT> than the basefont. Use this tag to reduce the size of superscripts and subscripts.

    • Large and small caps can be achieved with the font size instruction. WORDS TYPED IN CAPS are achieved as follows:
      W<FONT SIZE=-1>ORDS</font> T<FONT SIZE=-1>YPED</font> I<FONT SIZE=-1>N</font> C<FONT SIZE=-1>APS</font>
      There are other ways to do this, all equally messy.

HTML symbols: You may not use symbols in your text that happen to be commands to browser programs, but you can substitute codes for them. Codes for spaces and symbols always begin with an ampersand and end with a semicolon. They are not enclosed within < >.

symbol namesymbolcode
quotation marks " &quot;
   smart quotes left“&#147;
   smart quotes right”&#148;
   single quote left‘ &#145;
   single quote right’ &#146;
ampersand &&amp;
copyright© &copy;
less than < &lt;
greater than > &gt;
em dash—&#151;

Return to Page Index


Text Alignment:

Paragraph and heading alignment:

Paragraph <P> and heading <H#> may include the single attribute of ALIGN. Choices are <P ALIGN="left"> (the default), <P ALIGN="CENTER">, and <P ALIGN="left">. A heading, an entire paragraph, and even a table may be centered by nesting it within the command <CENTER> </CENTER>.

Lists

Lists can be unordered <UL> or ordered <OL>. List items are indicated by <LI> in both kinds. Lists can be part of the text, within table cells, or as subsets within lists.

  1. Unordered lists are bulleted and begin with <UL>

    codedappearance
    <em>Committee Members</em>
    <UL>
    <LI>Sy
    <LI>Mary Jean
    <LI>Sultan
    </UL>    		 Committee Members
    • Sy
    • Mary Jean
    • Sultan


  2. Ordered lists are numbered, and begin with <OL>

    codedappearance
    URGENT
    <OL>
    <LI>pour milk
    <LI>unwrap chocolate
    <LI>eat snack
    </OL>    		 URGENT
    1. pour milk
    2. unwrap chocolate
    3. eat snack

This section is an example of the use of nested sets of HTML instructions. I have used an ordered list with two list items (numbers 1 and 2), and within it I put two tables; one of the tables contains an unordered list and the other an ordered list (I’ll use bold etc. to emphasize the nesting):

<OL><table><UL><LI></UL></table><table><OL><LI></OL></table></OL>

Ruled lines

Ruled lines deserve a separate heading, since they can be very important in the visual organization of a page. They are created with the command <HR>. By default, they extend the entire width of the page and have line space before and after; they create a full visual break. A partial break can be achieved by limiting the percent width of the line, and these shorter lines can be sent left, right, or center. Here are examples:

<HR WIDTH=35% ALIGN="left">:

<HR WIDTH=35% ALIGN="center">:

<HR WIDTH=35% ALIGN="right">:

The vertical thickness of a ruled line can be changed from the default of 1 to a higher number with the SIZE command. Here is a gross break of <HR SIZE=10>:


Tables

Tables are often the best means to achieve the desired look for a section of a web page. If you do not specify a border width, or specify BORDER=0, then the table grid lines themselves are invisible. Most of the tables on this page have BORDER=1 to set apart their content.

All tables contain the following nested elements:

<TABLE>
<TR><TD>row 1</TD><TD>some data</TD></TR>
<TR><TD>row 2</TD><TD>other data</TD></TR>
</TABLE>

This following example is a table with two table rows, TR, and two table data cells, TD, which make two columns.


row 1some data
row 2other data
Here’s what it looks like in the browser. It is unreadable.


row 1some data
row 2other data
Here it is with the instruction <TABLE BORDER=1>. The table is cramped and ugly. Table borders cling to the words within them.


row 1some data
row 2other data
The solution is to add CELLPADDING in pixels to the TABLE tag <TABLE BORDER=1 CELLPADDING=8>: Then the words have elbow room within the cells.



To center a table on the page, nest it within the CENTER command: <CENTER> <TABLE> </TABLE> </CENTER>. To place a table to the right or left of text, put the table first and give the command for its placement, e.g., <TABLE ALIGN="right">. That is how I formatted the section that precedes this comment.



Horizontal alignment within tables:

Text (or images) within tables can be aligned horizontally within table cells by adding a command to the <TD> markup tag. This table appears wider than others do on the page and borders may be far from the text, because I have specified a percent width: <TABLE BORDER=1 CELLPADDING=8 WIDTH=90%>

markup tageffect
<TD ALIGN="left"> left-justifies the text
(unnecessary, it’s the default setting)		text left
<TD ALIGN="right"> right-justifies the texttext right
<TD ALIGN="center"> centers the texttext center

Note: The width of a table can be specified in pixels, but percent is better. Computer screens are of greatly different dimensions, and the width one selects for a browser is usually chosen to just fill the screen. Widths in percent adapt to the individual’s browser.



Vertical alignment within tables:

Vertical alignment of text within a table needs to be specified when cells contain different numbers of lines. The default setting floats text to the mid vertical height of a cell, and height is determined by the cell in a row that contains the most lines (example on left). The problem is most apparent in a table without borders. I have adding <TD VALIGN="top"> to steps 3 and 4 in the example on the right.

step 1heat milk      step 1heat milk
step 2add cocoastep 2add cocoa
step 3stir until lumps
are gone		step 3stir until lumps
are gone
step 4melt marshmallow
with low heat;
pour slowly
onto hot cocoa 		step 4melt marshmallow
with low heat;
pour slowly
onto hot cocoa

Every row in a table must have the same number of columns; every column in a table must have the same number of rows, but you can have a row that spans more than one column and a column that spans more than one row. The table immediately above has an invisible column separating its two halves. I created it with an extra <TD ROWSPAN=4> cell in the middle of the first row; I did not have to insert a blank cell in succeeding rows. Often I wish to have a caption over two columns, so I use the COLSPAN option: <TD COLSPAN=2>. The number you select must equal the number of rows or columns you have to span.

Return to Page Index


Active e-mail link

One of the most useful things in a page is an active link to a person’s e-mail. This is done with the following code and my address as an example:

<A HREF="mailto:John_Wahlert@baruch.cuny.edu">Wahlert</A>

This appears on the page as the highlighted link Wahlert; click on it, and your e-mail program opens. The words you put between the <A HREF=" "> and the </a> are highlighted and active.

Active links:

Active links that one can point to, click on, and go to are created with the anchor element A and the target destination indicated by HREF=" " and NAME=" ". Warning: Text within " " is case sensitive; if you have typed a capital letter where the target file or name has a lower case letter, the browser will not find the intended target.
  1. Internal: within a page: The index at the top of this web page provides internal links so you can jump directly to the topic that interests you. Highlighted text (that you can point to and click on) in the index is set up as in the following example: <a href="index.html#email">Active e-mail link</a>; this appears as Active e-mail link. (If you click on this active link, you will just move one section up the page). Any text between the <A HREF=" "> and the </A> will be highlighted and active. Remember to leave a space outside the anchor, so the words within it will not run into the surrounding text. The destination, "index.html#email," tells the NAME that is to be found on this page, "index.html." The first line of "Active e-mail link" starts with the hidden anchor, <A NAME="email">., that is the target. I have given the Page Index a name, so you can jump back to it from occasional points on the page. Return to Page Index

  2. External: to other URLs: This requires less effort on your part, since you need only supply the URL of the linked page. For example, to return to the Baruch College Home Page, you would type <A HREF="http://www.baruch.cuny.edu/">Baruch College Home Page</A>. Remember, the address within the quotation marks is case sensitive, so get it right. How much of an address you need to specify depends on whether you are staying within the home site or going to an entirely different URL.

Images and Backgrounds

Images are in separate files and are not a physical part of the web page. A page contains the command to fetch an image: <IMG SRC="address">. I have placed image files (*.jpg) of our two cats, gumby.jpg and merlin.jpg, in a subdirectory called "images";. The command to fetch them is <IMG SRC="images/gumby.jpg"> and <IMG SRC="images/merlin.jpg">. Here they are in an invisible table of two columns and two rows, so I can easily put a name under each cat. Images are positioned within cells by adding an instruction to the <TD> tags.

[merlin][Gumby]
Merlin
Gumby

When a page contains images, the browser downloads them first so it can determine how much space they will occupy, and then it places the text around them. Images download slowly, and you may be stuck looking at a blank screen for quite a few moments. The way around this annoyance is to tell the browser the height and width of the image that will arrive, so it can immediately display text. Of course if you get the size wrong, the image will be distorted. There is a trick to finding out the dimensions of an image. View it by itself in Netscape, and the dimensions will be displayed in pixels in the blue band at the top of your screen. You can even put text into the picture frame with the alt=" " instruction, so people viewing text only will know what would have appeared there. Here is the full command for the image of Merlin: <img src="images/merlin.jpg" width=150 height=126 alt="[merlin]">

Images can easily be centered by nesting them within <CENTER> </CENTER>. On some browsers you can align images to the right or left:

  • <IMG SRC=" " ALIGN="left"> floats the image to the left margin, and text flows around the image.
  • <IMG SRC=" " ALIGN="right"> floats the image to the right margin, and text flows around the image

Some browsers, however, don’t recognize these instructions and put the image in line with the text.

Images may also be aligned with accompanying text. The following commands tell where the text will be placed relative to the image:

  • <IMG SRC=" " ALIGN="top">
  • <IMG SRC=" " ALIGN="bottom">
  • <IMG SRC=" " ALIGN="middle">

Background patterns are likewise a separate file from the html page. Background images are usually small files that load quickly; they are often *.gif but also *.jpg. The address is inserted at the beginning of a web page in the <BODY> tag. For example, many of the SLAS web pages use a textured image called lgbak.gif: <body background="lgback.gif">. When an image address is in the BODY tag, the browser tiles it to fill the entire page. What you see as a total background is really the same little image repeated over and over. Since image files take time to download, this is an extremely economical way of filling the page with a picture.


Capturing text, images and backgrounds from the web:

Before you do anything, set up a directory on your hard drive where you will put the pages and images you capture from the web.

  • Text page: go to "File" at the top of your screen; then pick "save as." A drop down menu will allow you to select the destination directory for the file, and you will have the option to rename the file.

  • Image: Images are not on the web page; the page contains the image address and the instruction to fetch the image. To capture images, put the mouse pointer on the image and click the right mouse button. The drop-down menu "Save As..." window appears. Select the destination directory for the image, and click "Save."

  • Background: Like images, backgrounds are not on the web page; the page contains an image address and the instruction to use it as background. Put the pointer anywhere on the background and click the right mouse button. From the drop-down menu, select "Save Background As" and from the next drop-down menu select the destination directory.

Handy references:

I decided to learn HTML last year when my son, Colin, was a senior in high school. He has his own web pages, and what is better than a home tutor? I bought a book first and found the principles were easy, so I had a simple page to show him before I even asked for help. Maybe he was a little impressed. My first task was to create web pages for the Department of Mammalogy at The American Museum of Natural History. Subsequently I was asked to assume responsibility for the SLAS web pages so ably begun under the direction of Professor Eugene Marlow (English/Journalism). In addition to an introduction to HTML , I needed an encyclopedia of the codes and a guide that would assist me in making the pages look nice and have a clearly laid out message. Any number of books can serve as resources for learning and using HTML. I selected:

  1. Arpajian, S., and R. Mullen. 1996. How to use HTML 3.2. Emeryville, Ziff-Davis Press. 219 pp. (my introduction)

    I have seen advertisements for books on HTML 4.0. However, the latest version will include markup elements that are not recognized by older versions of browser programs. Being a little behind the times can therefore be good.
  2. Castro, E. 1998. HTML 4 for the world wide web.Berkeley, Peachpit Press. 336 pp.
    This is a very readable account of style sheets that can be used to format pages and groups of pages; they may eventually replace most of the local coding within individual pages. Tags and their attributes are listed in an appendix with notation on whether they work with Netscape and/or Internet Explorer and whether they have been deprecated by the W3 Consortium. The inside of the back cover has color swatches and their hexadecimal equivalents or predefined color names.
  3. Graham, I. S. 1997. HTML sourcebook, third edition. New York, John Wiley & Sons. 620 pp. (the encyclopedia; it tells how to nest the tags--what can be within what)
    If you shop for helpful books, be sure you get the latest, and look for books that show you the HTML coded page together with how it will appear in the browser.
  4. Williams, R. 1994. The non-designer’s design book. Design and typographic principles for the visual novice. Berkeley, Peachpit Press. 144 pp.
    A good page layout is just that, whether it is on paper or on a computer screen. A good book is just that, and there is none better than this one. The world of signage (hate that word) will never look the same, when you have read this authoritative and comedic work; I’d like to take a course from the author.
  5. Williams, R., and J. Tollett. 1998. The non-designer’s web book. An easy guide to creating, designing , and posting your own web site. Berkeley, Peachpit Press. 288 pp.
    The authors assume that you will be using one of the many web authoring software programs, e.g., Netscape Composer, Microsoft Front Page, or Adobe Pagemill.

I have created all of the pages with HotDog Professional V5.1, a product that is available for sale on the web at: sausage.com. It allows me maximum control of markup tags and provides an instantaneous browser, so I can check my work as I go.

Return to Page Index


Notes:

  • Programs that allow you to create a document and save it in HTML are good. However, they have to guess what you want and tend to overcode you work.
  • The option View: Source on your browser lets you see how other people’s pages are coded (go to File: Close to get rid of it).
  • A page falls apart at the first section containing an error in coding. If a tag, such as for underline, is not turned off, underlining will continue through the rest of the document. If you forget to close a quotation in <A HREF=" ">, the the browser throws in the towel and some or all of the following text disappears from that point on.

Copyright © 1997 John H. Wahlert
John_Wahlert@baruch.cuny.edu

Box A-0506
Department of Natural Sciences
Baruch College
17 Lexington Ave.
New York, NY 10010

Return to Wahlert home page.

Last updated 27 April 2005 (JHW)