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
- again, do not just copy and paste an older lesson - use it for reference but type the new code in yourself

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 two more images of your choice

  • Include a link back to lesson one

  • Include another link back to lesson 2

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

  • Upload your file and images folder to Google Drive so I can view the page