Robert W. Weeks bob.weeks@cox.net, http://members.cox.net/bob.weeks
html, the method of presenting documents on the world wide web, is a combination of text and tags used to control document formatting and function. The html documents reside on a web server, and users access them through a web browser program.
Usually, you’ll create web documents by storing them locally on your computer. When you’re satisfied with them, you’ll transfer (upload) them to the web server, where they’ll be available to web surfers. If you want to change your pages, make changes to the copies stored locally on your computer. Then, upload them again to the web server.
My advice is to create a folder (or use a floppy disk) for the exclusive purpose of holding your web site files. It’s true that you can have subfolders to help organize your web site; the DS495 web site makes extensive use of folders for organization. Unless you understand directory systems well, however, I advise keeping all files in a single folder or floppy disk. Keep all the files for your web site in that single folder.
There are three ways to create html and its tags. One way is to use a WYSIWYG editor, such as Microsoft Front Page or Front Page Express, or Netscape Composer. These programs write most html tags for you automatically. A second way is to use a text editing program such as Windows Wordpad or Notepad, writing the html tags yourself. A third way is to use a page-building service, often known as a "web page wizard" or similar name, that many sites offer. It’s impossible to say which way is best; they are simply different. I believe, however, that writing html tags is not that difficult, and even when using a WYSIWYG program you’re still going to have to confront html in order to accomplish your goals, and the web page wizards may have important limitations in flexibility. Therefore, we will write html. Html, like most computer languages, is rather exacting, and attention to detail pays off as fewer errors. Leave off a quotation mark or a less than sign, and you’ll get some strange results.
While you’re creating html documents, you’ll be working with two programs. One program is a text editor that you use to enter your text and html tags. The other program is a browser, which you use to display your html documents as they would appear when published on the web. I recommend using Wordpad for the text editor, at least to get started, and either Microsoft Internet Explorer or Netscape Navigator (or Communicator) for the browser.
What is sometimes confusing about web page development is that web pages are composed of html, which is plain text mixed with html tags. But your readers view html pages in a browser, which makes the pages come to life with formatting. For example, here’s a picture of an html document as seen in Wordpad:
When users view this page they’ll be using a browser such as Microsoft Internet Explorer, in which case the document might look like this:
As you make changes to your html document using the text editor, you’ll want to see how it looks in the browser. To do this, save the html document, switch over to the browser, and use the browser’s refresh command to load the new version of the page. Then, to make more changes, switch back to Wordpad, make changes and save, and back to the browser, making sure to refresh.
The home page (main page) for a web site needs to be named index.html, or in some cases index.htm may be allowable. In other words, when you use a url like http://www.toyota.com, you’re going to see the document contained in a file called index.html on the web server named www.toyota.com. Other pages that are part of the web site can be named differently (there are restrictions such as no spaces, and generally punctuation characters other than the period don’t work either). For example, at the DS495 web site there is a file called Summer1998Syllabus.html. Try to give your documents meaningful file names.
After you’ve created at least the index.html file, you’re ready to send your web site to the web server. The traditional way to do this is to upload the files using FTP (file transfer protocol). To do this, you need to obtain and install a FTP client program, of which there are several available. You also need to know the IP address or domain name of the computer that you’re uploading files to, and you need to know your account name and password. For example, to upload files to the web server at Geocities, I use the domain name ftp.geocities.com (Geocities help pages told me that), my username ds495, and my password (that’s a secret).
Geocities, however, has a utility called File Manager that’s quite useful. With it you can do a number of things to the files at your web site, including uploading files. This is especially useful for building your web site while using a public computer, as you usually can’t install software such as a FTP client on those computers. I recommend using File Manager for uploading your files, as it is easiest to start using.
If you have a web site running and you want to make changes, make your changes to the files that are stored locally on your computer. Then upload them again to the web server. As you upload, the new versions will overwrite and replace the old versions.
Graphic images are contained in separate files from the html document. Therefore, when transferring your files to your web server, be sure to transfer the graphic image files too.
A good way to learn to use html is by viewing other web page and their html. In Microsoft Internet Explorer, you can use the Source command, located on the View menu, to view a page’s html code. In Netscape Navigator the command is called Page Source on the View menu.
On some web servers, case (capitalization) matters, and you must be consistent in the way you refer to files in links. For other web servers, case doesn’t matter. My advice is to assume that case does matter. Most people use all lower case letters. Naturally, your spelling of file names and link references must be accurate.
To do anything in html, you do it through a tag. html tags are enclosed within the < and > characters. Most html tags have a beginning portion and an ending portion, in other words, they come in pairs. An example is the tag to produce italicized text:
It is <i>easy and fun</i> to create web page with html.
In the browser, this looks like
It is easy and fun to create web page with html.
The <i> tag tells the web browser to start producing italics text. As you can imagine, html has to know when to stop producing italics. The </i> tag does this.
An html document needs to start with the tag <html>, and it ends with the tag </html>. An html document can have a heading area, which usually contains the document’s title, and then a body area, delimited with <body> and </body> tags. Therefore, a simple html document looks like this:
<html> <head> <title>Bob’s First Web Page</title> </head> <body> <h1>Bob's Home on the Web</h1> <p>Hello everybody! Look at me!</p> <p>I’m <i>pretty good</i> at making web pages. Here’s a picture of my cat:</p> <img src="sammy.jpg" height="389" width="335"> </body> </html>
The <html> tag identifies this as an html document, and </html> identifies the end of the document.
The <head> and </head> tags mark the beginning and end of the document header. The most important thing to place in the header is the document’s title, identified by the <title> and </title> tags. Most browsers use this title as the title of the window the document displays in.
The <body> and </body> tags mark the beginning and end of the body of the html document, which is were the content of the web page goes.
Each character formatting tag has its corresponding ending tag, using the slash. For example, <big> and </big>.
<i> italics, <b> bold, <u> underlined, although you probably won’t use this, because underlined text is usually understood as a link, and you create links in a different way.
<big> big text, <small> small text, <sub> subscript, <sup> superscript.
<font color="red"> with its closing tag </font>. You can use many color words.
Surround paragraphs with the paragraph tag:
<p>Unless you understand directory systems well, however, I would advise keeping all files in a single folder or floppy disk.</p>
You can create link breaks with the <br> tag. This tag doesn’t have a corresponding closing tag.
The <hr> tag produces a horizontal line. It has no corresponding closing tag.
You can create headers by using the <hn> tag, where n represents a heading level. h1 produces heading level one, h2 produces heading level two, and so forth. These tags do have closing tags:
<h1>Bob’s Web Site</h1>
An important part of web page building is linking to other documents. The <a> (anchor) tag does this, as in this example:
One place to look for a car is <a href="http://www.toyota.com"> Toyota Motor Company</a>.
This produces a web page that looks like this:
One place to look for a car is Toyota Motor Company.
If the user clicks on the link, the browser displays the page at http://www.toyota.com. Notice that line breaks in the html document source don’t mean anything when the browser displays the page. That’s what <p> and <br> are for.
If you’re linking to an html document that is part of your web site, you can use a shortcut. For example, the DS495 home page (contained in the file index.html) links to a document named Summer1998Syllabus.htm. Both files are the same folder, so the link looks like:
<a href="Summer1998Syllabus.htm">summer 1998 syllabus</a>
Most of the links you will use are http links, that is, links to other web pages. A useful link type in addition to http is the mailto link, which generally starts the user’s email program with an email address already filled in. Mailto links work like this:
Send me email <a href="mailto:weeks@wsuhub.uc.twsu.edu">here</a>.
This will produce a web page that looks like this:
Send me email here.
A graphic image that’s part of a web page is a separate file from the html document. The two most common web image file formats are gif and jpg files. You can obtain a graphic image in a number of ways: you can create it yourself with an illustration program, you can scan a photo or other artwork with a scanner, you can download it from somewhere, or you can save it from a web page. Either way, you have a new file in your web site folder, and you need to refer to it in your html document.
If you have an image file in your web site folder titled bob.jpg, html code to display it looks like this:
<img src="bob.jpg">
The <img> tag has no closing tag. Other parts of the image tag that are useful include the height and width parts, which let you include the size of the image. This is helpful as it makes your web page more stable as it loads. Otherwise, your readers will have to put up with text moving around as the images load. For example, if the width of the image is 200 pixels and the height is 300 pixels, the image tag is:
<img src="bob.jpg" width="200" height="300">
The vspace and hspace parts of the <img> tag let you create a border of whitespace around your image, which can often improve the appearance of the page. The unit of measurement is the pixel, as in this example:
<img src="bob.jpg" width="200" height="300" vpsace="10" hspace="10">
To save an image that you see on a web page, right-click the image to get the context menu, and you’ll find a command to save the image in a file. Be sure to save it in the proper folder for your web site. Be aware that most images are copyrighted. A good place to find images that you can use for free is Xoom at http://www.xoom.com.
When you enroll in a service such as these, the service generally sends you some html code to include in your html documents. Ad this to your page by copying the code and pasting it into your html document at the place where you want the feature to appear. Be sure to use the copy and paste editing commands to save yourself from typing the html.
As mentioned earlier, you can use a WYSIWYG program to create html. With these programs, you usually write your text or import it, then format it. You might be able to select a sentence and click on an italics button, for example, to produce italicized text. The program will insert the <i> and </i> tags for you, and you’ll see italics on the screen. Or, to create a link, you might select the text to make into a link, then issue a menu command, and then supply the url of the linked-to document in a form. These programs can be easy to use and certainly have their place when building web sites. In my experience, however, most users will have to work directly with html tags in order to get the job done, so knowing how html works is important even when using these programs.
Some services have so-called wizards that ask you a series of questions, and then create a web page based on the answers you give. Some students have reported problems when using these, often related to lack of flexibility, difficulty in understanding how to use the system, or the system not working as advertised. Sometimes the pages created by these wizards can't be revised easily.
Also, many word processing programs can save their documents in html format. This often provides a way to convert a lengthy document to html. Word processing programs are quite handy for creating longer documents due to features such as spell checking, thesaurus, outlining, etc.
It’s important to remember, though, that all web documents must be in html, and there is only one type of html. (That’s not entirely true, as there are several versions of html, html is constantly being extended and improved, and Microsoft’s idea of what some html tags should do is different from Netscape’s. But basic html is the same.) Therefore, it’s possible to create a web page using Microsoft Front Page Express, for example, make some changes to it in Wordpad or another plain text editor, and then make more changes using Netscape Composer.
If you have an ISP, you can probably host your web site there. Check with your ISP or their web site for details. The free services Geocities, Tripod, and Xoom are good places to host your page, too. Most students who used America Online to host their site reported problems. If you use America Online for Internet access, you can have your web page somewhere else.
You probably don’t need a lot of space for your web site. Even one megabyte can hold over a dozen typical photographs and hundreds of pages of text.
If you use an html editing program such as Microsoft Front Page, you'll have to learn how to use the features of that program. Some html editors might be easy to learn to use, while some are difficult to learn to use.
Some html editing programs may offer special features that might not work in all situations. In particular, Microsoft Front Page has "extensions" that work only when the site is hosted by Microsoft web server software. Therefore, these extensions won’t work in all cases.
To transfer files to many ISPs and some free web sites, you'll need to obtain and install an FTP program. Geocities is handy in that its File Manager can upload files to Geocities through the web browser, although this feature doesn't work with older version of browsers, including the version of Internet Explorer that most versions of America Online use. This Geocities feature is especially important to those students who will be building their pages using public computers where they can’t install an FTP program.
If you want to use a FTP program, I recommend WS FTP LE. This program is free and widely available for download.
When using an TP program to upload your files to a web server, you generally need to know these things: the IP address or domain name of the computer you’re uploading to, a user ID, a password, and usually the name of your directory on the web server.
When getting started with html, don’t worry about fancy features such as colors or background images. Worry about the basics first: document structure, text, paragraphs, headings, and links.
Don’t be too concerned about the appearance of your page. Realize that the viewers of your page have a great deal of control over how your page looks. They can change the size of the window it’s viewed in, the font size and style, the background color, and many other attributes. In most cases, you as the page designer have no control over how these things appear in the browser.
Unless you use some very complicated techniques, html can’t produce the same complicated page layouts that a desktop publishing or word processing program can. Html, for example, has no page breaks or tabs.
If you’re having trouble, check your tags. The spelling of words used in tags is important. Check for the proper balance of "<" and ">" and "/" for closing tags.
Floppy disks often fail or are lost. Make a duplicate copy from time to time.
There are many good web sites that have step-by-step instructions for building web pages as well as detailed references. I have many of them linked on the DS495 page.
If you’re using a program like Wordpad or a word processing program to write html code, be sure to save the files as plain text. Anything else won’t work.
