Web 1 - HTML Lesson 3 - Adding Images

Before you get started: remember that each html page has certain tags that must be there - think of these as the framework for your page - most of what we will be changing for now will involve the head and body sections.

Create a new page for lesson_3.html
- put in the essential tags that are needed for each page

Images for display on webpages usually can be of the following types:

  • .jpg - used for photos - larger file size, up to 16 million possible colors
  • .gif - good for text, animations, and images that do not need high quality color resolution - small file size
  • .png - a portable network graphic - small file size - good for text
  • .bmp - a bitmap file - old style format for low size - not really used much anymore

Before we start adding images let's review files and folders.

These are generally considered html coding standards:

  1. Keep all your .html files in the main folder you created for Web I
  2. Within that folder create one called images
    - use lowercase for this name
    - this is where you will put images that will be included on your web pages
  3. If your image is very large then use photoshop to resize it. Our pages are not going to be wider than 800px for now.

Right after the opening <body> tag go ahead and add one of your logos.

The syntax for adding an image is as follows:

<p><img src="images/your_logo_name.jpg"></p>

In the code for an image:
- img stands for image and lets the browser know an image is coming up
- the src is an attribute - it stands for source and lets the brower know where to find the image file be requested
    - *notice that the file folder for images needs to be included in the directions
     -** also notice that the <img> tag does not require a closing tag

Save your page - display in a browser
- is your logo image showing up?

W1_HTML_3 Assignment

When this lesson is complete your lesson3.html should include the following:

  • The title tag indicates what lesson the page is about

  • A 800 x 150 pixel sized logo at the top of the page

  • Add the two other logos that you created

  • Add a 3rd image that is simply a photo you created in the pixlr assignments - it does not have to the size and shape of the logot

  • Include a link back to the first lesson

  • On your first lesson page add a link to lesson 3

  • Choose your favorite logo and add that to the top of the lesson 1 page

  • The code is correctly entered, there is an images folder, and all text is lowercase for the file names