Vance's CALL resources page | esl_home index | links for ESL students
Gloss this page - | Translate this page -

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.

Setting up:

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

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:
  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:


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).

1 Humaid
2 Ahmad Ismail
3 Wadah
4 Hassan Abdullah
5 Ahmed Rashid
6 Mohammed Salem
7 Sami
8 Ahmed Ali
9 Hamed
10 Mohamed Ahmed  
11 Mohammed Al Dehba
12 Saif
13 Hesham
14 Saud
15 Ali
16 Ahmed Ali
17 Abdulla Khamis
18 Rashid

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

1 Humaid 90
2 Ahmad Ismail   75
3 Wadah   75
4 Hassan Abdullah   75
5 Ahmed Rashid   75
6 Mohammed Salem   75
7 Sami   75
8 Ahmed Ali   75
9 Hamed   75
10 Mohamed Ahmed   0
11 Mohammed Al Dehba 95
12 Saif Mahmoud
needs, subtitle,
table with text next to picture, bulleted list
13 Hesham Bawazeer

picture links work but there's a lot of extra code here
14 Saud   75
15 Ali   75
16 Ahmed Dhanhani
Assignment competed 100%

17 Abdullah Khamis
Assignment competed 100%
18 Rashid Obeid
Assignment competed 100%

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

Use the navigation at the top of this page or your browser's BACK button to return to a previous page

For comments, suggestions, or further information on this page
contact Vance Stevens, page webmaster.

Last updated: October 28, 2005

Copyright 2005 by Vance Stevens