Document 233047
Extract from the web page of How to Make a Web Page by Tom O'Haver ([email protected]), Maryland Collaborative for Teacher Preparation, The University of Maryland at College Park. http://www.wam.umd.edu/~toh/HowToMakeAWebPage.html ===================================================================================== 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 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. 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 you 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? No. All you need is a Web browser and the text editor that came with your computer. No need to be tied down to a third-party commercial Web editor that will eventually become obsolete. However, if you are using recent versions of Netscape Communicator or Internet Explorer, they have built-in editors that make the process even more convenient. 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. This is also a good approach with younger children. Here are two examples of templates that you might use. 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 <this>. These are the HTML tags. These tags are not visible when the page is viewed in a Web browser. The words in CAPITALS are "place holders" for your own text. <html> <head> 1 <title>TITLE OF WINDOW</title> </head> <body> <h1>MAIN HEADING</h1> <h2>SUB HEADING</h2> FIRST PARAGRAPH <p> SECOND PARAGRAPH <p> THIRD PARAGRAPH <p> </body> </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). 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> <head> <title>TITLE OF WINDOW</title> </head> <body> <a name="TopOfReport"></a> <center> <h1>TITLE OF REPORT</h1> <h2><i>Report and artwork by <a href="#PictureOfAuthor">AUTHOR'S NAME </a></i></h2> </center> <img align=right src="FILE NAME OF GRAPHIC"> FIRST PARAGRAPH <p> SECOND PARAGRAPH <p> THIRD PARAGRAPH <hr> <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> <p> <a href="#TopOfReport">[Click here to return to top of this page]</a> <p> <a href="Contents.html">[Click here to return to Table of Contents]</a> 2 <hr> This page is maintained by JANE DOE. Comments, suggestions and questions should be directed to Ms. Doe at <a href="mailto:[email protected]">[email protected]</a> </body> </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 uppercase and lower-case. 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 [email protected] 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> <head> <title>Table of Contents</title> </head> <body> <h1>MAIN HEADING</h1> <h2>SUB HEADING</h2> <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> </body> </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. For other examples of templates for 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. 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 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. 3 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. Converting Word Processor files to HTML If 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. Finding Graphics for your Web Pages The 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 AltaVista's image search engine at http://www.altavista.com/r?L10. 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. 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 4 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. 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. 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 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, or (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 --> 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. Put all of your GIF and JPG files in the same directory (folder) as the html files. Adding sound 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 "au", "aiff" formats. You can download such programs from Partners in Rhyme. Possibilities include Quick Recorder for the Mac (or Sound Machine for older Macs) or Cool Edit for the PC. (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). 5 3. Launch you sound recorder program. Follow its instructions to recored the sounds. Adjust the sound volume to get a clear recording. Save the sound files in "au", "aiff", or "wav" format. Place the soound files in the same folder as the HTML and graphic files. 4. To get the sound to pro from your Web page, create a hyperlink to the file. For example, if you saved your sound file as "sound1.au", you could add this to your Web page: 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. 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. 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. 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 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 standalone 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. 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. 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. 6 An Introductory HTML Tutorial Required elements HTML files are just plain text files - they can be prepared using any plain text editor (such as Notepad on the PC or SimpleText on the Mac). HTML files have some required elements. Every HTML file must begin with: <html> <head> <title>TITLE OF WINDOW</title> </head> <body> where "TITLE OF WINDOW" is the text that you want to appear in the title bar of the browser window. This will also be the way the page is listed in Netscape's Go menu and in the Bookmarks menu, so you should choose this name with some care. Every HTML file must end with </body> </html> The content of the page goes in between the <body> and the </body> tags. You can view an HTML file in a Web browser (Netscape or Internet Explorer) by opening it with the Open command in the File menu. When developing a Web page, it's convenient to keep the Web browser and the HTML file open in a text editor at the same time. If you want to make a change, click on the text editor window, edit the HTML text, Save it, then click on the Web browser window and click on the Reload button. Text content Plain text content can be typed (or Copied and Pasted from a word processor) directly into an HTML file. It is important to realize that browsers will ignore all of the formatting and even the carriage returns, tabs, and multiple spaces between words. For example, the following text: It is important to realize that browsers will ignore all of the formatting and even the carriage returns, tabs, and multiple spaces between words. will be rendered on a Web page like this: It is important to realize that browsers will ignore all of the formatting and even the carriage returns, tabs, and multiple spaces between words. In order to force a line break, you must insert a <br> into the text, and to create a paragraph separation (white space between paragraphs) you must insert a <p> between the paragraphs. If you have a block of text that is already preformatted with a monospaced font and multiple spaces and line breaks (a table, for example), you can preserve the formatting by surrounding the text in <pre> and </pre> tags. The text between those tags will be rendered in a monospaced font and line breaks and multiple space runs will be preserved. You can indent the left margin of a block of text by surrounding it in <ul> and </ul> tags. You have no control over the right margin; the text will word-wrap to fit the width of the browser window set by the user. Moreover, unless otherwise specified, the text will be rendered in whatever font has been set by the browser user as part of the browser preferences. To force the browser to use a monospaced font, surround the text in <tt> and </tt> tags. Text Formatting Text formatting options are controlled by pairs of tags which you use to surround the effected text, such as: 7 Effect HTML tags What it looks like boldface <b>example</b> example Italic <i>example </i> example bold italic <i><b>example</i></b> example larger font <font size="+1">example</font> example larger font <font size="+2">example</font> example smaller font <font size="-1">example</font> example Large letter <font size="+3">E</font>xample Example Color text <font color="#ff0000">example</font> example Centering <center>example</center> example subscript H<sub>2</sub>O H2O superscript Symbol font cm<sup>2</sup> cm2 <font face="symbol;">abcde</font> abcde Note: subscripts and superscripts are rendered correctly in Netscape version 2 or higher, but not in Netscape version 1 or 1.1. Graphics The icons and pictures on Web pages that appear right on the page along with the text (rather than in a separate window) are called "in-line graphics". They are actually separate files, in either in GIF or JPG format, that are referred to on the page by an "img src" tag. This is simplest if the graphic files are stored in the same directory as the HTML file that refers to it. For example, <img src="sun.gif"> will display the GIF file "sun.gif", if that file is in the same directory as the HTML file: If the graphic file is in a subdirectory (folder), then the subdirectory name must be specified. For example, if the file "sun.gif" is in a subdirectory called "graphics", then you must write: <img src="graphics/sun.gif">. Make sure the file and subdirectory names are exact, even with respect to capitalization. Do not use spaces in file names. Graphics are imbedded right in the text, unless <br> or <p> tags are used to force line breaks. Thus, the following HTML code: The blue balls <img src="blueball.gif"> in the molecular model represent nitrogen atoms. would be rendered like this: The blue balls in the molecular model represent nitrogen atoms. JPG files are handled the same way; if the graphic file is named "group.jpg", then the tag would be <img src="group.jpg">. You can center a graphic on the page by surrounding it in <center> and </center> tags. Graphics can be aligned on the left or the page by using the modified tag: <img align=left src="sun.gif"> This is illustrated by the image on the left of this text. Or you can align a graphic on the right of the page by using the tag: 8 <img align=right src="sun.gif">, as shown on the right. When using the Netscape browser, the accompanying text will automatically "wrap around" the images (If you are viewing this page on Netscape, you will be able to see this effect). Hypertext Links Hypertext links (also called hyperlinks or "hot" links) are text or graphics items that act as "buttons" that the user can click on to display another Web page (or another portion of the same page). Text links are shown as underlined text on the Web page. For example, to create a link to another HTML page called "chapter1.html" that is stored in the same directory (folder), you might write: This is discussed in <a href="chapter1.html">Chapter 1</a>. which is rendered like this: This is discussed in Chapter 1. Or you could write Click <a href="chapter1.html">here</a> to go to Chapter 1. which would look like this: Click here to go to Chapter 1. In either case, if the user clicks on the underlined text, chapter1.html is displayed. The general template for a hyperlink is <a href=""></a>. You simply put the file name between the quotes "" and the link text (the text that you want to act as the hot link) between the > and the <. If chapter1.html is stored in a lower-level directory called "chapters" (a subdirectory within the current directory), then the directory name must be specified like so: <a href="chapters/chapter1.html"> . If chapter1.html is stored in a higher level directory (one level up from the current directory), then you write: <a href="../chapter1.html">. If the page that you wish to go to is located on another WWW site or in a completely different area of that same server, then you can specify the complete "http" address. For example: Pictures of the First Family may be viewed on the <a href="http://www.whitehouse.gov">White House Home Page</a>. which looks like this on the page: Pictures of the First Family may be viewed on the White House Home Page. (If you are viewing this page with a browser running on a networked-connected computer, this link should work; you can click on it to "go to" the White House Home Page. Then click the Back button to return to this page). Another useful type of hot link is the "mailto:" link, which is used to send email to a specified address from within Netscape and other browsers. For example: Click <a href="mailto:[email protected]">here</a> to send email to Tom O'Haver. Click here to send email to Tom O'Haver. If you click on the link text, a "send mail" dialog box will be displayed with the "To:" address already filled out to [email protected]. This assumes that your browser has been properly configured (in Preferences/Mail and News) for email by specifying you email address and a valid mail server. You can also have graphic hot links. Suppose you have a small GIF file, named "Smallfranklin.GIF", of the facade of the Franklin Institute Science Museum in Philadelphia. You want to make that picture a hot link so that clicking on it will display the Franklin Institute Home Page, whose address is http://sln.fi.edu:80/. You do this by creating a hyperlink to http://sln.fi.edu:80/ and then placing a graphic tag <img src="Smallfranklin.GIF"> in the place where the link text would ordinarily go: 9 <a href="http://sln.fi.edu:80"><img src="Smallfranklin.GIF"></a> The result is that the graphic is displayed with a border, which indicates that it is a hot link. If the user clicks on the graphic, the link is activated and the specified site is displayed. (If you are viewing this page with a browser running on a networked-connected computer, this link should work; you can click on the graphic to "go to" the Franklin Institute Home Page. Then click the Back button to return to this page). Another good use of graphic hot links is to allow a large graphic to be accessed by clicking on a small "thumbnail" image. The use of the small image greatly reduces the time required to access the image. Users can decide for themselves whether to access the larger (and thus slowerloading) full-size image. For example: <a href="Cheaart.JPG"><img src="Cheaicon.JPG"></a> In this case "Cheaart.JPG" is the original full-size picture and "Cheaicon.JPG" is the smaller "thumbnail" image (created by reducing the original image by 4-fold in a graphics program such as Graphic Converter). Clicking on the small image brings up the original large version. (Click on the Back button to return to this page). The file size of the full-size image is 22 Kbytes, while that of the small thumbnail is only 3 Kbyes. The above structures are examples of "nesting" one HTML tag within another. You can nest just about anything within anything in HTML to acheive combined effects. For example: <FONT SIZE="+2"><i><a href="http://www.wam.umd.edu/~toh/Fairland.html"><img src="blueball.gif"> Fairland Elementary School</a></i></FONT> Fairland Elementary School This creates a large-font italic hyperlink with both graphic and text link (you can click on either the graphic or the underlined text). Sound and video links Sound and video links are hyperlinks that you click on to hear a sound or view a digital video clip. To hear a sound link you must have a sound-equipped computer ( a Mac or a PC with a sound card installed). To see digital video you must have a digital video capable computer (e.g. with Quicktime or Quicktime for Windows software installed). Netscape 3.0 and Internet Explorer 3.0 have built-in support for the play-back of sound clips (in ".au", ".wav", and ".aiff" formats) and Quicktime digital video clips (in ".mov" format). Earlier versions of those browsers utilize external players or "helper" applications, which are small separate programs that are called by the browser when needed. For example, the most commonly used sound player for the Macintosh is "Sound Machine", which can play ".au" and ".aiff" files, the two types of sound files are used most often in Web pages. The most commonly used video players for the Macintosh are "Movie Player", which can play ".mov" files, and "Sparkle", which can play ".mpeg" files. These are all shareware or freeware programs that can be downloaded freely from various sources. Similar programs exist for Windows machines. The user is responsible for obtaining those helper applications and configuring the browser to use them. (In Netscape this is done in Options/General Preferences/ Helper Applications). The Web page authors usually assume that most users have already set up their browsers for sound and video. For more information about presenting multimedia content on Web pages, click here. Sound and video hyperlinks are constructed like just like conventional hyperlinks. For example: <a href="sound1.au">[Click here to hear a sound bite]</a> 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. 10 Video links work exactly the same way, except that the file name would be a ".mov" or ".mpeg" file. Here is a very short example. In either case, if the file is not where it is supposed to be, or if the browser is not configured for that file type, then it won't work. 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=30 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. Here is an example, using the same sound file as above. This works only with recent versions of Web browsers. The same technique works with movie clips; simply replace the file name with the name of a MOV or AVI movie clip and increase the width= and height= numbers to equal the size of the entire video frame. The disadvantage of this technique is that the sound file (or movie clip) 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. Object 1 You can create (digitize) your own sound and video files if you have the proper hardware and software. The helper application Sound Machine, for example, can record as well as play back sounds on any Mac with a microphone. Digitizing video requires the installation of an add-in video digitizer card and a suitable video source (camera or VCR). See "How to Make a Web Page" (http://www.wam.umd.edu/~toh/HowToMakeAWebPage.html) for instructions. Sound (and especially video) files tend to be very large and take a long time to download; therefore care should be taken to keep them as short and to-the-point as possible. Headings Headings can be used to create titles in various sizes. They are automatically left-aligned and followed by a line break. They come in 6 sizes (Note: the smallest heading size number is the largest, which seems a little backwards!): <h1>Heading size 1</h1> Heading size 1 <h2>Heading size 2</h2> Heading size 2 <h3>Heading size 3</h3> Heading size 3 <h4>Heading size 4</h4> Heading size 4 <h5>Heading size 5</h5> Heading size 5 <h6>Heading size 6</h6> Heading size 6 Headings or any other text may be centered on the page by placing the text to be centered between <center> and </center> tags. 11 Indented paragraphs and lists In order to create indented paragraphs, where the left margin is indented (moved to the right), surround the paragraph in <ul> and </ul> tags. Thus: <ul> This is an example of an indented paragraph. Note that the left margin is indented. This is an example of an indented paragraph. Note that the left margin is indented. </ul> produces the following result: This is an example of an indented paragraph. Note that the left margin is indented. This is an example of an indented paragraph. Note that the left margin is indented. The <ul> and </ul> tags may also be "nested". Thus: <ul> This is an example of an indented paragraph. Note that the left margin is indented. This is an example of an indented paragraph. Note that the left margin is indented. <ul> Indented paragraphs can also be nested. Note that the left margin is indented even more. Indented paragraphs can also be nested. Note that the left margin is indented even more. </ul> This is an example of an indented paragraph. Note that the left margin is indented. This is an example of an indented paragraph. Note that the left margin is indented. </ul> produces the following result: This is an example of an indented paragraph. Note that the left margin is indented. This is an example of an indented paragraph. Note that the left margin is indented. Indented paragraphs can also be nested. Note that the left margin is indented even more. Indented paragraphs can also be nested. Note that the left margin is indented even more. This is an example of an indented paragraph. Note that the left margin is indented. This is an example of an indented paragraph. Note that the left margin is indented. Bulleted indented list may be created by inserting a <li> tag before each bulleted line. Thus: Elements <ul> <li>main group <ul> <li>metals <ul> <li>Lithium<li>Sodium </ul> <li>non-metals <ul> <li>Carbon<li>Nitrogen </ul> <li>rare gases </ul> <li>transition metals<li>rare earths<li>actinides 12 </ul> Compounds <ul> <li>Inorganic<li>Organic </ul> </ul> produces the following result: Elements • main group • metals Lithium Sodium • non-metals • Carbon • Nitrogen • rare gases transition metals rare earths actinides • • • • • Compounds • • Inorganic Organic Note that each level of indentation automatically has its own bullet symbol. Recall that spaces, tabs, and line break characters within the text are ignored. Background and text color The default (standard) color scheme on Web pages is black text on a light gray background. If you get bored with that color scheme, it's easy to change it. Simply replace the <BODY> tag at the top of the HTML file with: <BODY BGCOLOR="#XXXXXX" TEXT="#XXXXXX"> where #XXXXXX are codes that determines the color of the background color (BGCOLOR) and text, respectively. Here are a few examples of some codes for familiar colors that can be used for background color or text color: 000000 = black ffffff = white 404040 = dark gray 808080 = medium gray B0B0B0 = light gray ff0000 = red ff8080 = pink 00ff00 = green 80ff80 = pale green 0000ff = blue 8080ff = pale blue ffff00 = yellow ffff80 = pale yellow ff00ff = magenta 00ffff = cyan 800080 = purple 401000 = brown ff7000 = orange To see how these background colors look, click here. You are not limited to these standard colors. Any other color you can imagine can be made by "mixing" the three additive primary colors red, green, and blue. As you can see from the above table of colors, the first two characters in the code determines the amount of red in the mix, the middle two control the green, and the last two control the blue. ("FF" is maximum; "00" is zero - none of that color; 80 is "half-strength", etc). Thus black is "000000" (none of any color), white is "FFFFFF" (maximum of all colors), "pure" red is "FF0000" (max red but no green or blue), and so on. Any of these colors can be used for the text, also. Obviously the text color has to contrast with the background color, if the text is to bee seen clearly. Note: it is best to avoid pure red or blue as background colors, because those colors are the standard colors of hyperlinks, and the links would be invisible against those colors. 13 Background Patterns You can also specify a graphic (GIF or JPG file) to be used as a background pattern for a page. Simply replace the <BODY> tag at the top of the HTML file with: <BODY background="xxxx.gif"> where "xxxx.gif" ("xxxx.jpg") or is the name of a graphic file in gif (or jpg) format that is to be used as the background pattern. The graphic will be "tiled" to fill the page. For an example, click here. Please do not overuse background patterns - they take time to download and typically do not add anything to the content of your page. Take care that the background pattern is not so strong as to be distracting and that the text color stands out well enough to be easily read. Use a graphic utility program to adjust the brightness and reduce the contrast of your image until it makes a suitable background for text. Netscape Tables Here is a table with 4 rows and 3 columns: Channel 4 Channel 5 6:00 pm News 6:30 pm Rosanne Fresh Prince 7:00 pm NBC News 7:30 pm Inside Edition Simpsons Seinfeld 8:00 pm Sequest Beverly Hills, 90210 This table is coded like so: <TABLE BORDER=1> <TR> <TH></TH> <TH>Channel 4</TH> <TH>Channel 5</TH> </TR> <TR> <TH>6:00 pm<br>6:30 pm</TH> <TD>News</TD> <TD>Rosanne<br>Fresh Prince</TD> </TR> <TR> <TH>7:00 pm<br>7:30 pm</TH> <TD>NBC News<br>Inside Edition</TD> <TD>Simpsons<br>Seinfeld</TD> </TR> <TR> <TH>8:00 pm</TH> <TD>Sequest</TD> <TD>Beverly Hills, 90210</TD> </TR> </TABLE> This looks confusing at first but is actually very logical. The entire table structure is enclosed in <TABLE BORDER=1> and </TABLE> tags. Each row is enclosed in <TR> and </TR> tags. Within each row, each cell is enclosed in<TH> and </TH> tags if it contains a heading or title, and by <TD> and </TD> tags if it contains regular data (the former are automatically boldfaced). You can add as many rows and columns as required; the cells will automatically expand to fit the data they contain. Multiple lines of text within one cell are separated by <br> tags. Cells can contain just about anything: formatted text, graphics, hyperlinks, whatever. To make a table like this in your own pages, you can Copy and Paste this code, change the cell contents, and add or subtract rows and cells as needed. Very important note! It's important to realize that when viewing a table on a Web page, the table will not appear until the entire table loads. This can result in a very annoying blank-screen delay for the viewer, especially if the 14 table contains slow-loading graphics. (Some fancy commercial sites make the mistake of putting their entire pages into gigantic tables - when you go to their sites, you'll see a black page for several minutes before anything shows up at all. Most people won't hang around that long). To avoid this problem when you are creating HTML tables, break up large multiple-row tables into several separate tables of one horizontal row each. That way the first rows will be displayed while the later rows are loading. A Final Plea Whatever you do, please test your pages for readability and loading speed on a typical low-end user's machine i.e. with a 28 KBaud modem connection and a 14", 640 X 480 screen. Don't assume everyone has a computer as powerful as yours. If your graphics and tables are too big, and your color scheme and background patterns too hard on the eyes, people will become upset with you and won't enjoy your page. 15
© Copyright 2024