Tutorial
Maintaining a Web Portfolio

main index

Contents

• overview
• adding a gif/jpeg image
• adding a movie
• linking to another web page

Introduction

The template web portfolio described in this tutorial consists of a main web page, shown below as "your_name.html", with links to several secondary pages.

The secondary pages have been setup to enable you to add your own graphics, either as static JPEG or GIF images, or as animated QuickTime movies. The step-by-step procedure shown below will take you through the process of editing the main page and will also show you how to add links to images, movies and other HTML pages.

Adding Images

A GIF/JPEG image or a QuickTime movie may be displayed in your portfolio by adding a block of HTML code called a table.

GIF/JPEG
The HTML code needed to link a GIF/JPEG image to your portfolio is shown below in red. The gray code is shown to help you identify where the new HTML code should be added. When linking to a GIF image change the extension from "image.jpg" to "image.gif". Keep all names lower case.

<TABLE BORDER="0" CELLSPACING="0">
    <TR>
        <TD WIDTH="20" NOWRAP><!-- left hand margin --></TD>
        <TD width="400" VALIGN="TOP" ALIGN="LEFT" NOWRAP>
           <img src="someimage.jpg" ALT="title">
           <BR>
           <BR>
           <P class="gray66">
           Your text should go here...
           </P>
        </TD>
    </TR>
</TABLE>

Note the new block of HTML code must be inserted before the closing </BODY> and </HTML> tags.

Movies
The HTML code needed to link a QuickTime movie file to your portfolio is shown below in red. The gray code is shown to help you identify where the new HTML code should be added. Although the WIDTH will generally conform to the width of your movie, the HEIGHT should be 20 pixels larger than the actual height to enable the movie controller to be displayed correctly.

<TABLE BORDER="0" CELLSPACING="0">
    <TR>
        <TD WIDTH="20" NOWRAP><!-- left hand margin --></TD>
        <TD width="400" VALIGN="TOP" ALIGN="LEFT" NOWRAP>
        <EMBED SRC="somemovie.mov" WIDTH=319 HEIGHT=200
		       CONTROLLER=true LOOP=false AUTOPLAY=false></EMBED>
           <BR>
           <BR>
           <P class="gray66">
           Your text should go here...
           </P>
        </TD>
    </TR>
</TABLE>

Again note the new block of HTML code must be inserted before the closing </BODY> and </HTML> tags. For movies that are larger than say 300Kb it is better to link to another page, otherwise, download times for your portfolio will become excessive.

Within a table an anchor tag can be added to enable text or an image to be a link to another web document - examples are shown below.

text link

<TABLE BORDER="0" CELLSPACING="0">
    <TR>
        <TD WIDTH="20" NOWRAP><!-- left hand margin --></TD>
        <TD width="400" VALIGN="TOP" ALIGN="LEFT" NOWRAP>
           <P class="gray66">
           <A HREF="another_web_page.html">text_link</A>
           more text etc...
           </P>
        </TD>
    </TR>
</TABLE>

image link

<TABLE BORDER="0" CELLSPACING="0">
    <TR>
        <TD WIDTH="20" NOWRAP><!-- left hand margin --></TD>
        <TD width="400" VALIGN="TOP" ALIGN="LEFT" NOWRAP>
           <A HREF="another_web_page.html">
              <img src="img/image.jpg" ALT="title">
           </A>
           <BR>
           <P class="gray66">
           some text etc...
           </P>
        </TD>
    </TR>
</TABLE>