How to Add Images to a Web Page

You should complete these lessons in order. If you haven't completed the first 5 exercises, go back and start at the beginning. Exercise #1

Phase 2

Adding Images

In Phase 2, we'll add an image to our main division. In the second lesson of Phase 2, we'll complete the drop down menu, then add a media query that will cause the page to adapt to a cell phone screen

 

Did You skip This Step?

Note: Way back in Exercise 1 we told you to create a special folder named htdocs to store your web pages in. I also instructed you to create an images folder INSIDE it. If you didn't, do it now!

The htdocs/images folder is where you will store all of the image files that you want to appear on your web pages.

Notice that the src attribute in the code includes the path to the images folder.
( src="images/someimage.jpg" )

This tells the browser where the picture named boat.jpg can be located.

The alt="" attribute is REQUIRED on all images that you add to a web page!! Include a brief description of the image between the quotations.

You should also include the width and height of the image.

Copy and paste the code in drk red into your HTML code in the space left after the 2nd paragraph..

<div class="main">
<h1>My content</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<img src="images/boat.jpg" width="300" height="198" alt="Sample Picture">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>


Save the HTML page

Defining the Image in the Style sheet

Copy and paste the code into your style sheet.

img {
float: right;
padding: 1% 2%;
border: none;
}

Save firstpage.html

The float: right setting does what it says. It floats the image to the right side of the division.

The padding settings, padding: 1% 2% keep text from running up against the picture when displayed..

Download the Image

Now copy the image, save it in your htdocs/images folder and view the web page in your browser.

EASY Image Copying

Open your Windows File Manager to the folder where you want to save your images.
Place it temporarily beside the tutor.
Drag the image into the folder.
How easy is that?

Save as: boat.jpg

Preview the Web Page

The Result

If this is what you see, you are ready to continue:

Were you successful?

If not, check the code that you added to your HTML page and style sheet.

It is very difficult for beginners to see errors in their code.

If your web page is not working properly at this point, I recommend that you delete your work and start over at the beginning of the tutor.

Don't go to the last lesson unless your page is working properly.

 

QuizTime