"TEACHING PHYSICS USING THE WWW" WORKSHOP, ADV. HTML -- HTML Resources (Images, Movies, Sounds, etc.)

Displayed comments version!

Mission to Mars!







Including an image

In November and December of 1996, the United States launched two probes on their way to the Red Planet. The Mars Global Surveyor and the Mars Pathfinder probes were both launched by NASA via unmanned Delta 2 rockets.




Mars Global Surveyor was sent on its way in November via a Delta 2 rocket launched from Cape Canaveral Air Station in Florida.



The <img ...> tag brings in an image. The source of the image (i.e. the filename of the image) is specified in the "src = myfile.gif" part of the tag. In this case, the image file is located in a subdirectory, so the path indicates the filename is "MGSlaunch.gif" in the "152gif" subdirectory. The placement of the image on the page is controlled by the "align = " command. Both vertical and horizontal placement can be specified.



In December, the Mars Pathfinder was sent off on its 310 million mile journey to a planned 1997 Independence Day landing on Mars.


Here, the image file is in the "gif" subdirectory, and the image appears on the right side of the page. The <BR> tags which follow determine the vertical placement of the "In December..." text relative to the image.









Including an embedded movie



The Mars Global Surveyor will obtain some of its required power via large solar panels which have been deployed now that the probe is en route to Mars. This movie (found originally on the Mars Global Surveyor homepage) illustrates the deployment of the solar array.

By using the <embed ...> tag, digitized movies can be included as part of the page displayed by the browser. As with the <img ...> tag, the source of the movie resource is specified by the "src = mymovie.mov" part of the tag, and the placement of the embedded movie is controlled by the "align = " command. The other parameters in the <embed ...> tag specify properties of the movie: its vertical and horizontal size in pixels ("height = " and "width = " ), whether or not it automatically "plays" once it is loaded ("autoplay = "), and whether or not it keeps playing ("loop = ").





Including a movie on its own page

The Mars Global Surveyor utilizes a High Gain Antenna which is 1.5 m in diameter and located on a 2 m boom. This movie (also found originally on the Mars Global Surveyor homepage) illustrates the High Gain Antenna deployment.

This construction is the basis of hypertext links, and is also described in the "HTML links" examples. The <A ...> tag is an "anchor" tag, and that command is finished off by the </A> "end - anchor" command. Whatever appears between the <A ...> and the </A> tags is a hypertext link, meaning that it is "clickable". In this case, the word "movie" is clickable, because it is between the tags. (Note that the clickable thing could be an image, for example, by having something like <img src = "myimage.gif"> replace the word "movie" between the tags. This is illustrated in the sound example which follows.) The result of clicking is to take the user to the location specified in the <A HREF = ...> part of the tag. The "HREF = " specifies the "hypertext reference" -- the location to which the browser should go when the user clicks the link. To display this movie on its own page, the HREF specifies the path to the movie, and the browser loads the movie as a new document.




Including sound

The launch of the Mars Global Surveyor began a planned decade-long exporation of Mars. Interestingly, the launch came only four months after NASA announced that a Martian meteorite contains supposed evidence of ancient microscopic life. Some call this "the biggest discovery in the history of science," and astronomer Carl Sagan described the finding as a "glorious discovery." (13 sec. /265K)

To include this sound byte of Carl Sagan, we again use the <A ...> </A> construction. This time, the "clickable" thing (between the tags) is the soundicon image, rather than clickable blue text. (Note: the "border = 0" part of the img tag tells the browser NOT to put a border around the image to indicate that it is clickable. The default is to display clickable images with borders.) The HREF specifies a sound file in .wav format; Netscape Navigator automatically comes with a wav file sound player, so the browser loads its own player to play the sound byte for the user upon demand.






Back to the Resource Table

This <A ...> </A> construction shows how a hypertext reference can go to another html document. In this case, the clickable text is the "Back to the Resource Table" phrase, and if that text is clicked, the browser displays the document "Index.htm."