HTML

One advantage of digital images is that they can easily be shared over the internet. You may already know how to email a picture to a friend as an attachment, but there are problems with sharing images this way, not the least of which is that only the people you send the images to can see them, and you run the risk of clogging their mail account with just a few large images.

A much better way to share images is to place them on web pages, and then to place the web page on a server. This way, the image is available to anyone (who knows the address) anytime, without filling up their email account.

HTML is the HyperText Markup Language, a code that tells a web browser program how to draw the text and pictures on the page. It used to be tough to write a web page, since you had to insert the tags (code) into the text manually. Now, there are a number of editors, some available for free, which make producing simple web pages easy. While an extensive discussion of HTML is beyond the scope of this handbook, I will discuss several easy ways to produce web pages with images. Most of these involve using web-authoring tools incorporated into software that you already use every day. I will also give you some tips on setting up web pages and getting them onto the web. Please excuse me for referring primarily to Microsoft products here. Others, such as Corel, also have excellent - perhaps even better - web authoring tools. However, our school bought Microsoft products and that is what I (and my students) use every day, and the primary audience for this web guide is my students.

Producing HTML from Microsoft Word:

This may be the easiest option of all. Simply produce a page in Word the way you normally would. Format the text, put in superscripts and subscripts, pictures, tables and so on. When the page is set up the way you want it, save it as you normally would (but don't close it). With the document safely saved, click on the File:Save as HTML menu and save the file as an HTML file. Most of the conversion will go smoothly, but you may need to clean a few things up in FrontPage Express.

Producing HTML from Microsoft Excel:

This is very similar to saving documents from Word. There are a few more options, mostly about inserting tables into existing HTML files. In general, Excel is a great way to generate complex tables for the web, and to produce graphs and charts. I prefer, however, to cut and paste the charts into another program, such as Word or FrontPage Express, when I am incorporating such graphics into a web page.

Producing HTML from Microsoft PowerPoint:

PowerPoint has a feature that allows you to generate an HTML slide show based on a PowerPoint presentation. The result won't be as snazzy as custom-built web pages, but it is quick and easy to do. The program turns each slide into a page, and the pages are complete with navigation buttons which take the reader to the first page, the pervious pave, the next page, the last page or a table of contents (which the program also generates). The image to the left is an example of one of the HTML slide pages generated by PowerPoint.

For a live example of these HTML pages generated using PowerPoint, click here.

Producing HTML from Microsoft FrontPage Express:

If you need a PowerPoint presentation, or a spreadsheet, or need to print out a document, it's probably best to use one of the programs already mentioned and convert the file to HTML. If you aren't satisfied with that output, however, or if you just need to produce a page specifically for the web, you might want to use Microsoft FrontPage Express. This is a freebie, usually downloaded with Internet Explorer, so most computers with that browser should have it already installed. Netscape makes a similar product, Netscape Composer, but I haven't used a recent copy of that program. FrontPage Express is an easy-to-use editor. While it does not have all the features of the full-blown FrontPage 2000, it is quite capable of setting up basic web pages, and includes support for tables.

Producing HTML from Adobe PhotoShop:

PhotoShop has an interesting feature that allows you to quickly produce a gallery of images, complete with an index page and thumbnail images. It isn't very customizable, but if you can live with the basic format, it is quick and easy. To make a gallery:

Copy all the images you want to include into a single folder.
If you want the images arranged in any specific order, they must be named alphabetically. One way to do this is to start the file names with numbers (00, 01, 02, ...).
The filenames will also be the captions, so keep that in mind.
Set up an empty directory to receive the files.
Use the File:Automate:Web File Gallery menu option; this will open the dialog at the right.
Choose the source directory (where your images are), the destination directory (where you want the HTML files to go), and fill out the other information in the dialog.
Click on the OK button - your web pages will be built.
When Photoshop is done, copy the whole directory to your server.

Setting Up a Web Page:

Most web editors, including FrontPage Express, are very easy to understand, especially when it comes to simply formatting text or changing the background of a web page. In general, you just point to what you want to format with your mouse, then right-click on it.

You will probably be very frustrated, however, when it comes to positioning thins on a page - they will seem to move around of their own accord. Part of this is the nature of HTML; the pages have to be flexible since you don't know what browser your reader is using, or what size monitor they have. On the other hand, there are a few simple tricks you can employ to get more control over how your pages appear.

You may not have realized it, but many of these pages were set up with extensive use of tables. Tables do not have to have visible borders. You can specify the width of a table in terms of percent of the browser window and thus control how things will appear no matter how the user has the browser configured on the screen. You can merge cells and split them to arrange things just the way you want them.
To place images next to text, right click on the image and set its appearances. In terms of alignment, LEFT will place the image to the left of the text, and RIGHT will place the image to the right of the text.
If you want to see how something was done on another page, you can use the "view page source" or similar command in your browser. Depending on the code, you can sometimes cut and paste it right into your own web page.

Publishing Your Web Page:

In order for your page to be seen by others, it has to be on a server that is connected to the internet, in a directory searchable by web browsers. It is up to you to get the file - and all the images - there.

On most systems, each user is given a certain area on the server that they can place files in. In this space are several directories; for instance most users will have a directory called "mail" or something similar for their email. Likewise, most users have a directory called public_html or something similar for their web pages.

To get the files between a personal computer and the server, you need a network or internet connection to the server, and a FTP program. FTP stands for File Transfer Protocol, it is used to communicate between personal computers and mainframes (and between mainframes as well). FTP uses a similar addressing system to that used for web pages, but FTP programs usually don't let you look at files; their job is to move files. Many of them have interfaces similar to the Windows Explorer except that one of the windows represents the server, and the other is your computer.

Assuming you have an FTP program, you need to start it up and use it to connect to your server. You will have to give the server your user name and your password, and the FTP program will then display your directories. If you have a public_html directory, open that and copy your web files into it. If you don't have such a directory, add one and copy the files into it.

When a web browser opens a directory, it looks for a file named "index.html". If it finds it, it opens it, if not it gives the user a list of all the files in the directory. If you don't want the users to see a directory, be sure at least one of your files is called index.html, and that your other web pages are all linked, one way or another, to it.

You can place "secret" web pages by not linking them to the index.html (or any other linked file). Unless you tell someone what file to enter into their browser, it will be difficult (but not impossible) for anyone to casually see your page.

I've been a little vague on these instructions, mainly because I don't want to give anyone detailed instructions on how to get into our system. If you are unclear about how to set up web pages on your server, contact your server's administrator.

Return to Top