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:

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: