EDTC 560
Applications of Multimedia and Web Page Design

Eli Collins-Brown, Online Faculty
University of Phoenix

HTML Primer

Tags
Emphasizing Text
Lists
Links
Inserting Graphics

Inserting Graphics

Luckily, inserting graphics is one of the easiest things to do in HTML. To insert a graphic you create a 'link' to a graphic file using the<IMG> (image) tag. The <IMG> tag is not part of a tagset and so does not require a closing tag. To set the link, you use the SRC=" " attribute, which works just like the HREF=" " attribute in the <A> anchor tag.

The structure would look something like this:

<IMG SRC="graphicfile.gif">

Let's practice!

Open the index.htm file you just created at the beginning of this primer. Save the file as flowchart.htm (here's where we create your second page). We are going to change the text, add your photo and a link to your flowchart. In order for this graphic to display when we view the page, we must first put a copy of the file into our mywebsite folder. So find a photo of yourself and size it to approximately 300 pixels high and wide and save it to your website folder. It shouldn't be larger that 2" or it will take up too much of your page.

<HTML>
<HEAD>
<TITLE>Flowchart</TITLE>
</HEAD>

<BODY>
<P>Welcome to my Web portfolio</P>

<p><img src="eli.jpg"></p>Type in the name of your photo file between the " ".

<p>My name is Eli Collins-Brown. I am a web and instructional designer and I specialize in online courses. </p>

Now we add a link to your flowchart. If you created it in Word, then the file might be named flowchart.doc. Move this file into the mywebsite folder. You'll have to upload the .doc file to the server just as you do the .htm files.

Remember to add <p> to begin a new paragraph and </p> to end it.

<p>Here is my <a href="flowchart.doc">flowchart</a>.</p>

<p>Back to my <a href="index.htm">portfolio</a>.</p>

</BODY>
</HTML>

We have created our flowchart page and inserted a graphic in it, as well as linked to a Word doc file.

Again, save your file. Open the mywebsite folder and double-click on the flowchart.html file. It will open up in a browser window and should look like this:

flowchart.htm

This will open in a new browser window.

Personal Web Site, Part I assignment

Ok, let's review to make sure that we have all of the tasks or components required in for the PWS, Part I:

Create a basic Web site with the following components (10 pts.):

Index Page yes
Flowchart yes
link these two pages yes
graphic or photo yes
email link yes

Now all that's left is to upload these files to your Web-host server and post the URL. You only need to upload the index.htm, flowchart.htm and flowchart.doc, and your photo file to your server. The other files were just for this tutorial. You can delete them if you'd like to.

If you are using one of the free web hosting sites, read through their directions on how to upload files. Tripod and Geocities have a File Manager that makes it easy to upload files. With Angelfire you have to read their directions on how to use an FTP client (such as COREftp) or copy and paste the html into the files (I'd suggest you stick with Tripod or Geocities).

For others, find out if there are any specific instructions to upload files. Otherwise, use an FTP client to upload your files. WS FTP LE is no longer a free client. You can use it for 30 days before having to buy it. You might want to try COREftp, it is free and is fairly easy to use.

Go through the Upload Your Page tutorial on the Tutorials page.

Final check:

Upload to server   yes

  

: Home : Syllabus : Learning Teams : M1 : M2 : M3 : M4 : M5 : M6 :
: Individual Projects : Team Projects : Resources : University of Phoenix : Connected Creativity :

©2004 Eli Collins-Brown
Problems? Contact Me