Vance's CALL resources page | esl_home index | links for ESL students
Gloss this page - http://www.voycabulary.com/ | Translate this page - http://world.altavista.com/

Putting your HTML code on the Internet
and linking to your pictures

Navigation: Setting Up | Uploading code to LiveJournal | Uploading pics to Buzznet
Results after 1 hour's work with PI computing students

This tutorial teaches you how to get your html code up on the Internet quickly. We'll then upload pictures to the Internet and link to them through the code.

• Here's an example: http://www.livejournal.com/users/vance_stevens/
• All the code you need to know is here: http://www.homestead.com/prosites-vstevens/files/pi/very_basics/starthere.htm

Setting up:

• We will put the code here: http://www.livejournal.com/
• We'll put pictures here: http://www.buzznet.com

You'll need to start an account at both places.

• See how to set up an acct in Live Journal: https://www.livejournal.com/create.bml
• See how to set up an acct in Buzznet: http://webpres2005.buzznet.com/user/?id=1013949

DON'T FORGET your user names and passwords. Write them down somewhere.

Uploading your code

When you've set up your two accounts, you can start working on them.

1. Create some code in HTML. Show your teacher.
2. When your teacher thinks it's ok, then login to live journal: http://www.livejournal.com/login.bml
3. To make an entry pull down Journal Update
4. Paste your code into the journal and click Update Journal (you don't need HTML, HEAD, or BODY tags, just the code in between)
5. To edit an entry later pull down Manage Entries and choose the latest one (or any other)

Uploading your pictures

We'll keep the pictures at Buzznet

1. Log on to your acct at Buzznet
2. Click on Home in the right sidebar
3. Click on New Photo or Quick, then browse for your photo on your computer and upload it
4. When the photo appears in Buzznet, right click on it and select Properties
5. Copy the Address URL information by highlighting it (make sure you get the whole thing - only 2 lines show but if you pull the mouse you may get more) and then using CTRL-C to copy it.
6. Paste the complete url after <IMG SRC= in your code, beginning and ending with "http .... .jpg">
7. Save your work and view it in a browser. Does it work?

Here's some information on working with pictures on the Internet:
http://www.homestead.com/prosites-vstevens/files/pi/very_basics/pictureperfect.htm

Results

At the end of one hour with this exercise 15 out of 17 Arabic national 19-year-old non-native English speaking 1st year college students in Computing 082 had produced blogs to display in some fashion on the Internet the code they had previously adapted or created for homework. Other than having been instructed to prepare simple web pages, they had received nothing beforehand to alert them to the nature of the exercise they would be given. It was their first experience with trying out blogs and the fact that most were able to view their code from their web documents, extract just the parts they would need, and upload this code to LiveJournal -- and some to open Buzznet blogs and put pictures there, and one or two to even link to those pictures and revise their LiveJournal blogs with the links that would display the pictures -- shows that this exercise, while complex and challenging, was by no means beyond their ability to accomplish in an hour (Oct 5, 2005, italics below indicates student produced the work after the initial class hour).

These students have successfully added
second pages to the LiveJournal blogs they started earlier:

These pages are to include the following features the students have been studying:

• A centered heading, big font, and subheading in smaller font
• A picture and some paragraph text
• A picture in a 2-column table.
• At least one of the pictures links to a web site.
• At least one of the pictures must be to a Buzznet link.
• Some text in the table in the cell next to the picture.
• A bulleted list with more than one level of bullets

Copyright 2005 by Vance Stevens