4C. IMAGES Webpage

A very simple HTML document

Create an HTML webpage.

  1. Replace the text.
  2. Copy and paste the code into Sublime Text 2.
  3. Then save the page as 4Cimages.html in your folder.
  4. Directions are in RED

Write your name for the Heading.

This is an HTML list page for the paragraph.

Save the page as 4Cimages.html in your folder.

HTML headings

Add 3 different size headers with the date, class name and school.

Locate several images on the Internet.

http://findicons.com/

www.free4uwallpapers.org

http://www.animated-gifs.eu/animated-gifs.htm

http://cooltext.com/

Edit and upload several images to: Picasa Web Album

Marquee Code

Insert images

Save 2 images from photo booth in your folder and add them to your page.

Make the width 75 and the height 100.

    1. Save the images in the same folder as the web page
    2. Copy the image name
    3. <img src="Untitled-53.jpg" alt="Image name" width="32" height="32" />

Note: image must include .jpg, .png, .gif extra

Insert images from different locations

Insert 2 image icons from the Internet change the size.

Internet Image

    1. Make image full size
    2. Right click on the image
    3. Copy Image Location
    4. <img src="https://img.skitch.com/20120327-8bc5w84s5ersy89fuaxifigatd.jpg" alt="Image name" width="32" height="32" />

Note: image must include .jpg, .png, .gif extra

Insert 2 images that you downloaded from the Internet and saved on your computers desktop

Computer Image

    1. Locate the image in the finder window
    2. Open a new tab in the web browser
    3. Drag the image into the window to open
    4. Right click on the image
    5. Copy Image Location
    6. <img src="file:///Users/viereck/Pictures/iPhoto%20Library/Thumbnails/2010/May%2013,%202010_2/Page_2_face0.jpg" alt="Image name" width="32" height="32" />

Note: image must include .jpg, .png, .gif extra

Aligning images

Add an image Align to the bottom and make the width 100 and the height 100.

Add an image from the Internet Align to the middle and make the width 150 and the height 150.

Add an image from the Internet Align to the bottom and make the width 200 and the height 200.

Make a hyperlink of an image

Add an image you edited and uploaded to Picasa Web Album

Make it any size you wish

Create a link to your blog

Add an image you edited and uploaded to Picasa Web Album

Make it any size you wish

Create a link to the Question of the Day

    1. Locate the image in the finder window
  1. Drag image into iPhoto
  2. File /Export /Picasa Web Albums
  3. Go to Picasa Web Album
    1. Click to open the Image
    2. Right click on the image
    3. Copy Image Location
    4. <a href="Blog URL"> <img src="image location" alt="Image name" width="32" height="32" />
  4. Save the page as 4Cimages.html in your folder.
  5. Turn it in on Engrade.

Create an image map

Try for Extra Credit

Create an image of 3 different smart phones

Make an image map link to the different web page of each

Examples explained