How to Make a Web Page

Tom O'Haver (, The University of Maryland at College Park

Revised June 12, 2008

Table of Contents

  • The Structure of a Web page
  • Writing HTML pages
  • Some tips on creating Web pages
  • Converting Word Processor files to HTML
  • Finding Graphics for your Web Pages
  • Making your own Digital Images
  • Changing graphic formats
  • Adding sound and Video
  • Testing your Pages
  • Finding a Host to Serve your Pages

The Structure of a Web page
Web pages are actually text files that are "tagged" with symbols to represent structure and function. You can prepare and edit Web pages in any text editor or word processor you like. The system of tags, called HTML (HyperText Markup Language), is very logical and not difficult to learn. However, you don't really need to speak fluent HTML in order to create your own Web pages. There are several shortcuts that have been developed to simplify the process.

The icons, pictures, sound bites, and video clips that are common on Web pages are actually separate files that are referred to by special HTML codes. When the page is viewed by a Web browser, such as Firefox or Internet Explorer, these HTML codes are interpreted by the browser, which pulls in all the separate files and assembles the Web page in the form you finally see it. This is in contrast to a modern word processor, in which the editing and viewing functions are integrated into one program and in which all the text, graphics and other elements of the document are contained in one document file. For that reason, the process of creating Web pages is less direct that creating an equivalent word processor document.

Writing HTML pages
Text remains the most important part of most Web sites and thus will be the first element considered here. All of the text of a Web page is contained in an ASCII text file that is "marked up" with HTML codes and is usually given a file name that ends in ".html". The "body text" of the page is simply written out in plain text in the html file. You can use any convenient plain text editor to write your HTML files, e.g. SimpleText on the Mac or Notepad on Windows.

Should you learn HTML?
Learning HTML yourself will allow you to customize your Web pages. It is not hard to learn; in fact, it is a very logical system that has a certain appeal. Try looking at my Introductory HTML Tutorial, with working examples. It explains all of the essential aspects of HTML. There are sections on text formatting, graphics, hyperlinks, sound, lists, tables, background colors and patterns, etc.

Do I need to buy a Web editor program?
Not really. All you really need is a Web browser and the text editor that came with your computer. There is no need to be tied down to a commercial Web editor that will eventually become obsolete or require upgrading to a new version. Web editors do, however, make it easy to create fancy Web pages with lots of bells and whistles. But you don't actually need to spend any money; there are excellent free web editors that you can download, such as Kompozer. These work a lot like word processors, but they include extra features for creating links, site management, uploading pages to your server, etc. Google has a very easy-to-use free online  "Page Creator" that works on a Web page; this document was created using it.  Both of these approaches allow you to view and edit the HTML they generate if you want to.

HTML Templates
If you do not want to learn HTML right away, you can still create Web pages by using a template created by someone else that has all the required HTML tags in place and that you type or Paste your text into. Just Google "HTML templates" or "web templates " and you will find thousands of colorful, attractvely-designed templates to download.

If you're a teacher looking for simple templates for classroom Web site construction, see Using Templates to Produce Web-Publishable Multimedia Projects. There are links there to downloadable sets of templates for constructing entire class-project Web sites, such as slide shows, alphabet books, etc. Complete step-by step instructions are included.

For editing templates, I recommend NoteTab Light, a freeware multi-file text editor that allows all the files in a template to be opened at once and performs search and replace functions within all the files of one template simultaneously. Great for changing background and text color throughout an entire template, adding image and sound links, or changing graphic or sound file types throughout a multi-page site.

Some tips on creating Web pages
When developing a Web page, it's convenient to keep your Web browser and the html file open in a text editor (such as Notepad, NoteTab, or SimpleText) at the same time. To view the page as it will appear in your Web browser, click on the browser window, pull down the File menu and select Open File , select the html file and click on Open. If you want to make a change, click on the text editor window, edit the html text, Save it, then click on the browser window and click on the Reload button.

You may find it easier to type up your text in your favorite word processor, where you will have access to a spell checker, etc., then Copy and Paste the text into the template. Don't attempt to format the text in the word processor, as all formatting is lost when the text is copied and pasted, unless you "Save As..." in HTML format, then copy and past the HTML code into your template. Rather, formatting codes can be added to the text afterwards. Don't worry about line length and line breaks; Web browsers ignore carriage returns and other line break characters and automatically format text to the width of the window (which is controlled by the user, not by the author). To separate paragraphs, add a <p> tag between paragraphs.

You can use your word processor to create and edit HTML templates, but be sure to Save As... in TEXT-only format.

Converting Word Processor files to HTML
You can use the "Save as HTML" command to convert your documents into HTML. This automatically converts the text portion of the document into HTML format and saves all the graphics in the document ia a separate folder. Therefore a single word processor document with pictures will be converted into one HTML document and one folder of graphics; keep them together so they won't get separated. You will find that the HTML produced by a word processor is very messy and hard to read, but it works. It's probably better to use a Web page editor such as Kompozer.

Finding Graphics for your Web Pages
The icons, background patterns, and pictures on Web pages are actually separate files that are referred to by special HTML codes. The graphics files are either in GIF or JPG format. You can create such graphics in many ways; for example by drawing them in a drawing program, capturing screen shots, taking pictures with a digital camera, scanning photographs and flat artwork with a scanner, capturing still frames from a video source, etc. A graphics editor program can then be used to convert the files into the required GIF or JPG formats.

The easiest way to obtain graphics to adorn your new Web pages is to capture them from other Web pages. ANY graphic that is is displayed on a Web page can be easily captured by you and saved for your own use. All you have to do is to position the mouse pointer on the graphic you want and hold down the mouse button (the right mouse button on a PC). A pop-up menu appears; move the pointer to select "Save picture as..." and let up the mouse button. The "Save As..." dialog will appear, displaying the name of the graphic file (with a .gif or .jpg extension indicating whether it is a GIF or a JPG file type). Navigate to the desired location and click on Save. Graphics saved in GIF of JPG format are ready to use on Web pages; to display such a graphic on your page, just save the graphic file in the same directory (folder) as the HTML file and add to the HTML file an image reference tag: <img src="FILE NAME OF GRAPHIC"> where FILE NAME OF GRAPHIC is replaced by the full file name of the graphic. For example, if the name of the graphic file is "mypicture.jpg", then the HTML code would read <img src="mypicture.jpg">.

There are many sources of graphics on the Web. Use a search engine to search for "clip art" or "free pictures" or "free images". A convenient way to locate images is to use Google's image search or AltaVista's image search engine at Type in one or more search terms and this image search engine will return a list of results illustrated with thumbnail previews (little postage-stamp sized images) of each image it finds.

Making your own Digital Images
There are two basic ways to make your own digital images to display on your Web pages: use a digital camera to take the pictures, or use a scanner to scan photographs or other flat-copy material. Both digital cameras and scanners are now widely available and relatively inexpensive.

A digital camera is ideal for taking portraits of people, artwork, classroom activities, and field trips. Most of them come with a cable and software to transfer the pictures to your computer.  Most cameras save their images as JPG files, which is the format used on the Web. However, most digital cameras take pictures that are too big to fit on a Web page, so you will have to use a graphics editor program to crop or reduce the images to a more manageable size. I suggest using the freeware program Picasa for this task; its "Export" function will automatically reduce the size of a a whole folder of pictures to a size that you designate and save them in a separate folder.

A color scanner is ideal for scanning printed pictures magazines and flat artwork such as paintings and drawings. Scanners come with their own software - refer to your scanner's documentation to learn how to operate it. Before you start scanning, set the scanning resolution to 75 dpi (dpi = dots per inch). (Follow the scanner's instructions to learn how to set the resolution). This will result in images that are roughly 'life size", that is, as big as the original scanned object. (The exact size depends on the resolution setting of your computer's screen). To make the image larger that life-size, set the scanning resolution greater than 75 dpi; to make the image smaller that life-size, set the scanning resolution less than 75 dpi. Most scanners can save scanned images in various formats: JPG format is usually the best choice. When you save the scaned image, choose JPG in the "Format" pop-up menu in the Save dialog box.

Changing graphic formats
The graphics and icons that are displayed on Web pages are separate files that must be in either GIF or JPG format. To crop images or convert from one format to another, you can use a graphics program, such as Graphic Converter for the Mac, or Paint (a simple graphic editor that comes with all PCs) or Paint Shop Pro for Windows.

The choice between GIF or JPG formats depends on the nature of the graphic. GIF format is most efficient for sharp-edged computer-generated charts and graphs and flat-colored cartoon-like drawings, whereas JPG is most efficient for digital photographs, captured video frames, and other pictures of natural objects. Using the proper format will give you the best image quality AND the smallest file sizes, which minimizes the time it takes to view the pictures with a slow Internet connection. (Graphics in other formats can not be displayed directly on a Web page, at least not without special plug-ins).

To open a picture with a graphics editor program, you can either:

    (a) drag the icon of the picture and drop it off on top of the icon of the graphics editor program,

    (b) launch (double-click on the icon of) the graphics editor program, then select Open from the File menu, navigate to the desired file, and double-click on the file name.
To save a graphic file in GIF format (best for computer-generated graphics):
    Select File --> SaveAs... , select GIF from the Format pop-up menu, navigate to another directory if desired, then click Save.
To save a graphic file in JPG format (best for continuous-tone scanned photographs and video screens):
    Select File --> SaveAs... , select JPG from the Format pop-up menu, navigate to another directory if desired, then click Save.
Put all of your GIF and JPG files in the same directory (folder) as the html files.

Adding sound and Video
If you have a computer model that comes with a microphone (a Macintosh or a PC with a sound card), you can easily record sounds and add them to your Web page. For example, you can record a spoken narration, using the small microphone that comes with the computer, or you can record music or voice from a tape recorder or CD player.

    1. You will need a sound recorder/player program that can save in mp3 format, such as the excellent freeware program Audacity for the PC and Mac. (Or, you can use the sound recorder that comes with the PC in Programs/Accessories/Entertainment/Sound Recorder, but it saves only in the bulkier WAV format).

    2. Plug the microphone into the back of the computer, in the small round jack that is labeled with a picture of a microphone. If you are recording from a tape recorder or CD player, connect its output into the microphone input. (You will need to obtain a suitable connector cable, which you can get from Radio Shack).

    3. Launch you sound recorder program. Follow its instructions to record the sounds. Adjust the sound volume to get a clear recording. Save the sound files in mp3 or wav format. Place the sound files in the same folder as the HTML and graphic files.

    4. To get the sound to play from your Web page, create a hyperlink to the file. For example, if you saved your sound file as "sound1.mp3", you could add this to your Web page:

    Click <a href="sound1.mp3">here</a> to hear a sound bite.

    This creates a hyperlink to the sound file "sound1.mp3", assuming that it is stored in the same directory as the calling page.

    Click here to hear a sound byte.

    When the user clicks on the link, the browser downloads the file, looks at the file extension, determines what helper application is designated for that type of file, launches it (if it is not already open), and then loads and plays the sound file.

    Alternatively, you can integrate a sound player right into your Web page by using an "embedded" player controller:

    <embed src="geetar.mid" width=144 height=25 autostart=false>

    where "geetar.mid" is the name of the sound file. This puts a small player controller on your page that allows the reader to start and stop the sound at will. Adjust the width and height numbers to fit your sound controller. Here is an example, using a different sound file.

    This works only with recent versions of Web browsers. The disadvantage of this technique is that the sound file downloads as soon as the page is viewed, whether or not the reader intends to play it. This can slow down the viewing of pages, especially on a slow Internet connection.

    Adding video is exactly like adding sound, except that the file name must refer to a video file, such as an mpeg, mov, wmv, or avi file. Most digital cameras are capable of taking small videos in a size and format suitable for a web page. Upload the video file and put it in the same folder as the HTML file. Embedded video works just like an embedded sound, except that the width and height must match the size of the entire video frame and the controller at the bottom. Here's an example of a video player using this HTML:

    <embed src="fireworks.mpg" width=320 height=260 autostart=false>

Testing your Pages
Don't have an Internet connection yet? Not to worry!. Web pages can be designed, constructed and tested on any desktop computer that can run a standard Web browser, even one that is not connected to the Internet. Web browsers work just fine in "local mode" on a stand-alone computer, although without an Internet connection it can obviously not access external pages, that is, pages that are resident on remote host computers. However, Web browsers can read and display "local" files stored on the that same machine, by using the Open File... command under the File menu to open the HTML files. This is how you can test your pages to see how they look and to make sure everything works. Just put all of the html files, graphic files, and sound files in the same directory (folder).

You may even consider using a Web browsers as a sort of low-end multimedia presentation system for stand-alone use in a classroom or computer lab. Web browsers are free; support formatted text, color graphics, and digitized sounds and video; are available in identical versions for both PCs and Macs; and the presentations so produced are easily converted between PC and Mac formats and are ready to be put "on the Web" when and if you have access to a Web server. Web pages can be distributed on and read from CD-R disks or USB drives or local area network file servers. Because of their speed and capacity, USB drives disks are especially good for pages that have lots of large graphics, sound files, or video clips.

Important note: if you using a PC-based CD-R writer ("burner") to produce Web sites on CD-R for playing on both PCs and Macs (taking advantage of the Mac's ability to read PC-formated disks), be sure to limit all HTML, graphic, and sound file names to 8 characters with a 3-character extension (for example "PAGE1.HTM"). Otherwise, older Macs will not be able to read the site.

Finding a Host to Serve your Pages
In order for your Web pages to actually be "on" the Internet, so that they will be accessible to Web users all over the world, they must be resident on a Web server. You could theoretically run your own Web server on your own PC, but then you'd have to leave it running 24/7, which is a pain.

Many commercial Internet service providers (ISPs) and Internet companies like Google provide Web page ("home page") space for their customers; it's not uncommon to be given 10-30 MBytes free (Google gives you 100 MBytes!), with more space available at extra cost. See your provider's documentation for more information. Google your ISP's name and "personal web pages" for more information. Look for sections titled something like "Connecting to Your Site", "Web Site Management", "Uploading Files", "Determining Your URL", "Linking Your Pages", "Publicizing Your Web Pages" or something like that. (These sections titles are taken from the Verizon web server documentation). 

Some ISPs have an online "site builder" that allows you to construct a personal home page on their web server. For example, Google has a nifty "Page Creator" - here's a home page I created using it. The big advantage of this is that the edit/upload cycle is greatly simplified because a single program (web browser) and web site is used to create, edit, upload, and view the developing site. (However, using a web-based site builder may bind you to that particular site; there may not be an easy way to transfer your site to a new server in the future. I suggest that you create your site on your own computer, keep a copy of the files yourself, then upload the files to your Web server. That way you can simply upload the files to a new server anytime you change servers. Note: Google's Site Builder does allow you to Copy the HTML it generates and to Paste it into any external text editor).

For business or professional purposes, your company or school system may operate a central Web server; you can usually submit all your HTML files and graphics to the Web server administrator on a CD-R or a USB drive and they will take care up putting it on the Web server. Ask them to tell you the URL (Web address) once it is on the server.