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. 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/sample-400.png" alt="blank image">
<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 template-402.html
Defining the Image in the Style sheet
Copy and paste the code into your style sheet.
img {
width: 30%;
float: right;
margin: 1% 2%;
border: 1px;
box-shadow : 1px 2px 4px #000000
}
Save template-402.html.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.
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: sample-400.png
This template uses a different method of handling the img than the actual 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 estimates the amount of area we want the image to coveer at 30% 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, 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
Test Your Comprehension
Take a quiz on the information presented so far.
Free Tools We Recommend
- 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 Logo Generator Turbologo.com
- If you are building a website for business you need to begin thinking about creating a brand identity. An unforgettable logo could be just the start you need. You can create it free at Turbologo.com. They also provide generators for business cards and letterheads.
- 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 BlueFish HTML editor. You'll find it in your software repository. It does have some QUIRKS, but it's FREE.
- For image resizing we've found the easiest Linux tool to be Krita.