How to Make a Web Page
1. The Structure of a Web pageWeb 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 Netscape 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.
Trellian InternetStudio - Save over $150!
Trellian's InternetStudio is comprised of some of Trellian's best long running, proven and award winning software. It includes a range of tools for web authoring, ecommerce, search and Internet including:
CodePad, SiteMapper, SiteSpider, SiteLoad, Trellian FTP, Trellian WebPage, WebSafe, WebTidy, ButtonFactory, ImageMapper, eComm Store, SpellChecker, Trellian Traceroute, MetaEditor, ROI Calculators, Trellian Toolbar
This offers a comprehensive suite of Internet applications. Try it FREE!
2. Writing HTML pagesText 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 you HTML files, e.g. SimpleText on the Mac or Notepad on Windows.
Simple Template for text
This is just about the simplest possible template. You can see that it has a number of codes enclosed in angle brackets, like
<html>You can create a template file by typing this into any plain text editor (such as SimpleText, which comes with the Macintosh, or Notepad, which comes with the PC). Or, if you are reading this document online, just Copy the text of the template example above and Paste it into a blank SimpleText document. Save As... and call it SimpleTemplate.html. Then, all you have to do to create your own page is to replace the text in CAPITALS with your own text. For example, replace TITLE OF WINDOW with the title that you wish to be shown in the title bar at the top of your window; replace MAIN HEADING with the main (largest) heading of your page, SUB HEADING with the sub heading, FIRST PARAGRAPH with the text of the first paragraph, etc. Finally, Save As... and give it a suitable file name ending in ".html". Presto - you've created your first Web page. Now you can view your creation as it will appear in on the Web by opening the html file within your Web browser just like it was a word processor document (launch your Web browser, then pull down the File menu and select Open File).
<title>TITLE OF WINDOW</title>
Template for a three-paragraph illustrated report.
This is a template that might be suitable for a class project Web site, where each student in a class creates a page that has a three-paragraph essay, an illustration (e.g. scanned artwork), a picture of the author, a brief sound bite, a hypertext link back to the Index page, and a page maintainer's citation and "mailto" link at the bottom. As before, the words in CAPITALS are "place holders" that your are to replace with your own text. Copy and paste this template into SimpleText to create a template file.
<html>In this case, you replace AUTHOR'S NAME with the author's name (e.g. John Doe) in two places, replace FILE NAME OF GRAPHIC with the file name of the main illustration, replace FILE NAME OF AUTHOR'S PICTURE with the full file name of the portrait of the author, and replace FILE NAME OF SOUND BITE with the full file name of the sound bite that accompanies the picture. The two images and the sound bite are separate files whose file names must match exactly these file names in the html file, including the file extension and upper-case and lower-case.
<title>TITLE OF WINDOW</title>
<h1>TITLE OF REPORT</h1>
<h2><i>Report and artwork by <a href="#PictureOfAuthor">AUTHOR'S NAME</a></i></h2>
<img align="right" src="FILE NAME OF GRAPHIC">
<a name="PictureOfAuthor">AUTHOR'S NAME</a>
<img src="FILE NAME OF AUTHOR'S PICTURE">
<a href="FILE NAME OF SOUND BITE">[Click here to hear a sound bite</a><br>
<a href="#TopOfReport">[Click here to return to top of this page]</a>
<a href="Contents.html">[Click here to return to Table of Contents]</a>
This page is maintained by JANE DOE. Comments, suggestions and questions should be directed to Ms. Doe at <a href="mailto:JANEDOE@SOMEPLACE.OR.OTHER">JANEDOE@SOMEPLACE.OR.OTHER</a>
At the bottom of the template is contact information for you, the person who maintains the page (not necessarily the same person who authored the content of the page). Replace JANE DOE with your name and JANEDOE@SOMEPLACE.OR.OTHER with your email address. Readers of the page may be able to send you an email message directly from their Web browsers simply by clicking on your email address.
Finally, Save As... and give your page a suitable file name ending in ".html". Now you can view your creation as it will appear on the Web by opening the html file within your Web browser just like it was a word processor document (launch your Web browser, then pull down the File menu and select Open File).
This template also has a hypertext link to a "Table of Contents" page, which is assumed to be called "Contents.html". Such a page is typically used to provide a menu of hypertext links to a group of related pages; here's a possible template.
<html>Copy and Paste to add links to as many pages as needed, replace the text in UPPER CASE with the titles and file names of those pages , and Save As.. "Contents.html". Put the index page in the same directory (folder) as the other html files.
<title>Table of Contents</title>
<a href="PAGE1.HTML">TITLE OF PAGE 1</a>
<a href="PAGE2.HTML">TITLE OF PAGE 2</a>
<a href="PAGE3.HTML">TITLE OF PAGE 3</a>
Trellian CodePad - Completely FREE!
Trellian CodePad is a FREE drop-in replacement for Windows NotePad.
Unlike NotePad, Trellian CodePad includes syntax highlighting for all major web based languages.
The program is designed to be as simple and functional as possible.
The result is a simple, cheap editor that can be used by webmasters and site designers without changing their development style. Download it FREE!
3. Some tips on creating Web pagesWhen developing a Web page, it's convenient to keep your Web browser and the html file open in a text editor (such as Notepad 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. 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 templates, but be sure to Save As... in TEXT-only format.
You can create variations on the above templates just by editing them; Cut, Copy and Paste to duplicate and move sections to suit your purposes. In this way you could, for example, create a template for a page that contains several illustrations or several sound bites.
SiteMapper will analyze the contents of a web site, and create a detailed map with an indexed listing of all resources by page and category.
It will also validate all links, so that users need never come across 'File not found' errors and broken images.
SiteMapper is a perfect tool for Webmasters, but can also be used by anyone wishing to see their favorite web site presented in a simpler form. Try it FREE!
4. Converting Word Processor files to HTMLIf your word processor can save in HTML format (as can, for example, recent versions of MS Word), 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 each graphic in the document as a separate graphic file with sequentially generated file names. Therefore a single word processor document with pictures will be converted into a collection of several files; keep them all in the same folder so they won't get separated. You may need to touch up the automatically-generated HTML a bit to get the formatting just right.
5. Finding Graphics for your Web PagesThe icons 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 wsould 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 use Google's image search engine at http://images.google.com/imghp?hl=en. 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.
Trellian Button Factory
With Trellian Button Factory you can quickly and easily create stunning buttons, menus, logos and icons for use on your website or multimedia presentations.
No previous graphic design experience required. Just use your imagination to create original web graphics that stand out on the Internet.
Creating your own web graphics was never this easy! Try it FREE!
6. Making your own Digital ImagesThere 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. Some save image files directly to a floppy diskette or CD-R (compact disk recordable). 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 managable size.
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 72 dpi or 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 'life size", that is, as big as the original scanned onject. 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.
7. Changing graphic formatsThe graphics and icons that are displayed on Web pages are separate files that must be in either GIF or JPG format. You can use a shareware graphic utility program, such as "Graphic Converter" for the Mac or "LView" or "Paint Shop Pro" for Windows, to convert from one format to another by Opening in one format and Saving in another.
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 save a graphic file in GIF formatPut all of your GIF and JPG files in the same directory (folder) as the html files.
(best for computer-generated graphics):
Select File → Save As... , 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 → Save As... , select JPG from the Format pop-up menu, navigate to another directory if desired, then click Save.
8. Adding soundIf 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.
Click <a href="sound1.au">here</a> to hear a sound bite.This creates a hyperlink to the sound file "sound1.au", 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 (".au"), determines what helper application is designated for ".au" files, 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 "embeded" player controller:
<embed src="sound1.au" width=144 height=25 autostart=false>where "sound1.au" 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 the same sound file as above.
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.
9. Testing your PagesDon'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 nWeb 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 floppy diskettes, ZIP drives, CD-R disks, or local area network file servers. Because of their speed and capacity, CD-R 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, Macs will not be able to read the site.
The easy to use interface allows the user to drag and drop files between the server and local computer. Powerful features allow the user to view and execute files while still maintaining a user friendly interface.
Trellian FTP, the next generation of Windows based FTP clients! Try it FREE!
10. Finding a Host to Serve your PagesIn 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. Many commercial Internet service providers provide Web ("home") page space for their customers; see your services documentation for more information.
Or perhaps your school system may operate a Web server. You can usually submit all your HTML files and graphics to the Web server administrators on floppy diskettes.
$4.95 Web Hosting and eCommerce Solutions!
Vendercom hosting plans start from just $4.95!
To celebrate our recent improvements and server expansions, we are offering FOR A LIMITED TIME ONLY, a DOUBLE web space deal, for the usual price! Join NOW!