CreateaFreeWebsite  with Responsive Design Tutorials

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, 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 someimage.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 not 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. 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.

Our place on a sunny day.

Save as: image.jpg

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:

web page in browser

 

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:

web page in browser

 

Test Your Comprehension

Take a quiz on the information presented so far.

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

 

 

Free Tools and Resources We Recommend

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.

 

Free Responsive Web Design Certification freeCodeCamp
freeCodeCamp is a proven path to your first software developer job.
More than 40,000 people have gotten developer jobs after completing this – including at big companies like Google and Microsoft.
Finally, you'll learn how to make webpages that respond to different screen sizes by building a Twitter card with Flexbox, and a complex blog layout with CSS Grid.
FREE Certification Courses!!
Free Ebook How to Code in HTML5 and CSS3
"How to Code in HTML5 and CSS3" is a free e-book about making websites in HTML5 and CSS for absolute beginners. It doesn't require any experience in IT to start....
FREE HTML Editor (Windows): NoteTab Light
All the features of a commercial HTML editor.
FREE Apache Server (Windows): IndigoAmpp
Set up a real time server environment right on your PC. Test forms and scripts before uploading to your web space.
Linux Users
If like us, you've left the insane world of Microsoft Windows for the even worse experience of Linux, we recommend the Geany Code Editor. You'll find it in your Linux Mint software repository. It's simple but powerful and FREE.
For image resizing we've found the easiest Linux tool to be Krita.