Document 6515331

Transcription

Document 6515331

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>
</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>
</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>
</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&gtHeading size 2</h2>
Heading size 2
Heading size 3
Heading size 4
Heading size 5
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.
<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>
</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.
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>
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

Document 6515331

Transcription

Similar documents

MacDraft PE (Front) US

SQUARE PICTURE FRAME size 100x100 cm | GRAPHIC CMYK

Certificate Graphic Design - Digital Media Program at West Valley

ecoroll 31.5 - Banner Stands To Go

Tactile Graphics: High Quality Doesn`t Mean High Cost!

A Painless Guide to Building an Effective Company Web Site

takeover - Ekstra Bladet

news about the death of Vince Burke`s dad.

Resumé PDF - Greg Rava