How to Create a Web Page with HTML5 and CSS

Add Responsive 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.

 

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.
<img src="images/image.jpg" alt="a description">

This tells the browser where the picture named image.jpg will 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 not include the width and height of the image in Responsive Design.

Copy and paste the code in drk red into your HTML code in the space left after the 2nd paragraph. You may need to create the space.

<div class="main">
<h1>Responsive Web Design</h1>

<h2>Single Column Layout</h2>
<p>We can use this single column layout to learn a little about Responsive Web Design.</p>
<p>RWD came along about 10 years ago when surfing the internet with cell phones began to be an every day habit.  A need for web design that allowed the same web site to be viewed on a desk top , laptop, tablet or cell phone was a must. What was then Liquid web design evolved further into what today is the norm as RWD.</p>
<h2>Easy HTML5 Construction</h2>
<p>I've tried to construct these templates with as little HTML code as possible.  I advise novice web developers to spend more time studying CSS and Responsive Web Design techniques.  Learn to manipulate page structure and images with what we call Media Queries.</p>

<img src="images/image.jpg" alt="Our place on a sunny day.">
<h2>Media Queries</h2>
<p>Media Queries allow the developer to change font sizes, alter navigation devices and resize images or actully swap them out at different <b>screen sizes</b>.  Let's stay away from words like resolution that just confuse the issue for now. .</p>
<p>To demonstrate grab the right edge of the browser and squeeze it to the left. As the width of the screen decreases  five different size images will be displayed using the Media Queries in the style sheet. When you've squeezed as far as you can open Web Developer Tools beside it to get to the smallest size screen width.</p>
<h2>Drop down Menu</h2>
<p>The CSS for the drop down menus is a bit verbose, but it's easier than learning javascript. There are a lot of sites out there that offer free menu codes, but most are heavy on the JS and will pose problems for beginners when trying to troubleshoot problems that arise. </p>
<p> It actually continues to function to a width of 141 pixels. The narrowest cell is about 260.</p>

Save myfirstpage.html

Defining the Image in the Style sheet

Copy and paste the code into your style sheet above the Media Query.

img {
max-width: 100%;
float: right;
margin: 1% 2%;
border: 1px;
box-shadow : 1px 2px 4px #000000
}

Save myfirstpage.html

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

The margin settings, margin : 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.

Save as: image.jpg

Note: Both Linux and Windows users should be able to open the images folder next to this page and drag the image into the folder.

This web page uses a different method of handling the img than the #402 kit. The kit places 5 differnt sizes of the same image on the page and then swaps them out at different page widths using Media Queries.

The method of display here uses max-width : 100% and then allows it to scale down in size at different viewing widths.

Preview the Web Page

The Result

If this is what you see at 768 pixels viewing width, 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 you haven't started yet run the code through the W3C Validator

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

Don't go to the last lesson on Drop Down Menus unless your page is working properly.

Adding a Second Media Query

The actual width of this image is 400 pixels. It displays nicely at 768px viewing width but in smaller viewing devices it will cause problems with adjacent paragraphs.

The solution is a second Media Query at a break point of about 720px.

Copy and Paste this Media Query into the style sheet of myfirstpage.html above the previous Media Query .

@media (max-width : 720px) {
img {
float: none;
width:100%;
margin: 0 auto}
}

Save myfirstpage.html

When viewed in your browser at 650 pixels this is what you should see:

 

What's Next

In the last lesson we'll learn to add a second tier of buttons to our navbar and make it into a drop down menu.

If you're satisfied with your progress, let's finish the page

 

 

Helps

 

 

Free Tools and Resources

Need something more advanced. Check out our Web Development Resources page for some more advanced tutorials and reference guides for HTML5, CSS3, Responsive Design and SEO.