Personal tools
  •  

HTML Graphics and Multimedia

Document Actions
  • Content View
  • Bookmarks
  • CourseFeed

Tutorial 1 of 3: Frames

Objectives:

  • Learn HTML tags for creating the layout of basic frames
  • Tags discussed: <FRAMESET> <FRAME>

Template File(s):

  • frame-qu.html
  • framem.html

(Note: If you have not already done so, please downloaded the html template files .)

Frames

Frames are used to divided the main window into separate sections (or frames). Each frame has one name but, like a picture frame, can have any content. A link in one frame may update the content in another frame. See an example .

Layout

The <FRAMESET> tag is used to divide the browser window into frames. It replaces the <BODY> tag and has 2 attributes: ROWS and COLS. These attributes specify the height (rows) and width (columns) of each frame. These can be specified as pixels on the screen or, more commonly, as percentages of the user's window.
Tag Attribute
<FRAMESET>
(replaces BODY tag)
  • ROWS=
  • COLS=

Example

Open the file frame-qu.htm in your browser. Note how it has 4 frames, each occuping 50% of the height and width. Now, open the file in your text editor, and note how this is implemented:

<FRAMESET ROWS="50%,50%" COLS="50%,50%">

Open the file in your text editor. Try modifying these percentages. Save the file, then display it in your browser.

Example

Suppose you wanted to nest a frame within another. For example, open the file framem.html in your browser. Take a moment to think how you might implement this.

Now open this file in your text editor. Note how we've nested multiple <FRAMESET> tags. This serves to embed a set of frames within the a larger, surrounding frame.

Modify this file in your text editor. See if you can embed yet another set of frames within a larger frame.

Content

None of the previous examples would have worked without the <FRAME> tag. This tag is used to insert content into the various frames. As shown in the next table, it has a number of important attributes.
Tag Attribute Function



> <br >

Tutorial 2 of 3: Graphics and Multimedia

Objectives:

  • Learn HTML tags for inserting graphics
  • Tags discussed: <IMG >

Template File(s):

  • multimedia.html
  • KAYAK.GIF

(Note: If you have not already done so, please downloaded the html template files .)

Web Graphics

Two major kinds of graphical formats are supported in Web documents: GIF and JPEG. Thus, if creating graphics from scratch, make sure you save your files in one of these 2 formats. Also, when saving your files, follow these guidelines:

  • name your files with either the file extension .gif (for GIF format) or .jpeg (for JPEG), or jpg (for JPEG)
  • do not embed spaces in the file name
Now, open the file multimedia.html in your web browser. Note how it has a very simple graphic displayed. Now view the HTML source of this file (View ... Source) and find the relevant IMG tag which inserts the image:
<IMG SRC="WEB-small.gif" ALT="Image of the Web" >
A few things to note about this tag:
  • <IMG> is a singleton tag; there is not closing tag required
  • SRC is what is called an attribute . It is located INSIDE the tag. It denotes the name of the file that contains the graphics, and is inserted inside quotes. This file can be a simple name, or the full Web address of the graphic (the URL).
  • ALT is also an attribute, located inside the tag. This attributed is used to provide a textual alternatives for Web users how have images disabled in their browser, or are using a browser for visually impaired people. In this example, a user not displaying graphics would see the text "Image of the Web"

Example KAYAK.GIF, located in the template directory, into your ever-evolving home page:

  • Copy the file into the same directory/folder as your home page (NOTE: file names are case-sensitive)
  • Open your home page file in Notepad
  • Add the text:  <IMG SRC="KAYAK.GIF">
  • Save the file, then view it in your browser. You should now see the graphic.



> <br >

Tutorial 3 of 3: Graphics and Multimedia

Objectives:

  • Learn how to copy graphics from the Web
  • Learn how to make graphics act as clickable links

Template File(s):

  • kitten.jpg

(Note: If you have not already done so, please downloaded the html template files .)

Using web graphics

Graphics can be easily copied or referenced on the Web. Using your Web browser, locate a graphic on the Web that you would like to use. Move your mouse over the image, hold your (right if using a Windows box) mouse button down and notice how several alternatives become available through a pop-up menu.

One alternative:

  • Select "Save this image as ...".
  • The browser will then prompt you for the name of the graphic and where to locate it on your hard drive.
  • You can now insert this graphic into any document using the <IMG SRC="filename.jpg"> tag.

On Netscape's browser, another alternative is:

  • Select "Copy this image location".
  • Now open your editor (notepage) and view your home page.
  • Select the text contained within the quotes next to the SRC attribute in the IMG tag, then select "Paste" under the "Edit" menu option. You should now see the full URL for this graphic within the quotes of the SRC attribute.
  • Now save this document, then view it in your browser. The document should display your content, and also display the graphic that is referenced on another Website.

The power of a distributed document system should now become apparent.

You can also turn a graphic into a clickable link. You do this by embedding the graphic within the <A> tag. Like this:

<A HREF= "http://www.usu.edu"><IMG SRC="kitten.jpg"></A>

Example

Using your text editor, insert the above code into your home page. Save the file, then view it in your browser (you might have to hit the "Refresh" icon). Now, clicking on the Web graphic will take me to the USU home page. Not exactly intuitive, but you get the idea! See if you can replace the Web graphic with something more appropriate.

Graphics can be used as powerful navigation icons within Web documents.

[End of tutorial]

Copyright 2008, by the Contributing Authors. Cite/attribute Resource . admin. (2008, May 20). HTML Graphics and Multimedia. Retrieved January 07, 2011, from Free Online Course Materials — USU OpenCourseWare Web site: http://ocw.usu.edu/instructional-technology-learning-sciences/producing-distance-education-resources/resource10.html. This work is licensed under a Creative Commons License Creative Commons License
Online Degree Program
Utah State University offers an online masters degree program (MS & MEd) in Instructional Technology and Learning Sciences. Click below to find out more.