This week's lab tutorial shows you how to make the media (images and video) on a web page flexible, as part of a responsive web design solution.
There is an extra lab tutorial about using Photoshop to edit and optimise images for the web, CSS image techniques and CSS3 properties that can be used as a responsive alternative to using image files.
As shown in Lecture 7, there are two ways of adding image files to a web page -
In CSS, style an element with an image in the background, declaring the background-image property. For more information about how to do this see the section on background images in the extra lab tutorial. If the image is purely for the presentation of the web page the CSS background-image property should be used. I've used a background-image in the <header> at the top of the page in this week's example Tutorial page. It has the advantage that the <header> element can have accessible, search-engine friendly text, with the image appearing behind it. See how the element and image are presented as the viewport is re-sized.
Embed images in HTML using the <img> element and the src attribute to point to the source file of the image. If the image is an integral part of the web page content it should be embedded in HTML. The <img>alt attribute should always be included to provide a text description of the image as an alternative for text-only browsers (e.g.Lynx) and screen reader software used by people with sight impairments and other disabilities.
The tutorial shows how to add images and video to a blank web page using the following techniques. You will be following the same techniques as in my example web page -
Whenever you make any changes to your web pages remember to save them and preview them in a browser to see how they will display. This is specially important when creating CSS - you need to see how the browser will display the styled page to users.
1: Clipped full-size image
If you want, copy the source code in this HTML document - example.html - and use it for the following exercises. Save the page and re-use the code when you add media to your Learning Journal and Tutorial web pages.
Save the file outside your website folder. The HTML page is not going to be part of your website - it's for experimenting with image techniques that you can re-use in your Learning Journal and Tutorial pages.
As you are creating a single web page, not for publishing, it's OK to put the CSS in the <head> of the HTML document, after the <title> element using the <style> tag -
<style type="text/css">
/*CSS here*/
</style
Create or find copyright-free image that is suitable to make a banner for the page and edit it using Photoshop to be around 900px wide by 150 px high, or similar dimensions. Save it in the same folder as the HTML file.
Embed the image in the HTML using this markup -
<header class="banner-clipped"> <img src="filename.png" width="900" height="150" alt="Text description of the image"> </header>
Write the following CSS rule within the <style> tags in the <head> of the document -
.banner-clipped { overflow: hidden; }
Save the page and test in the browser to see how it behaves when the viewport is resized.
Text can be wrapped around a flexible image, using the CSS float and clear properties.
Create or find a copyright-free image that is suitable to illustrate an article and edit it to be the correct size. Save it in the same folder as the HTML file.
Copy the following markup and paste it in your HTML document -
<article>
<img src="filename.png" alt="Text description of the image" >
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. etc. etc. etc.</p>
<div class="clear"></div>
</article>
Write the following CSS rules within the <style> tags in the <head> of the document -
article img { float: left; padding: 2%; width: 33%; /*image 1/3 width of the article element*/ max-width: 240px;/*max-width measurement should be the actual width of your image*/
}
.clear { clear: both; }
Save the page and test in the browser to see how it behaves when the viewport is resized.
See Lecture 7 for an explanation of the markup for a flexible video container and the need to maintain the 16:9 width:height ratio.
Find a video on YouTube or Vimeo to embed on the page. This could be a video to include in your Learning Journal - e.g. a skills training video - or your Tutorial page.
YouTube or Vimeo will provide the embed code for the video to copy into the HTML document. It will be something like this -
Save the page and test in the browser to see how the video is presented and behaves when the viewport is resized.
These 4 techniques are shown in the Lecture 7 flexible media example page. I've also used the flexible image and video methods on my example Tutorial page . In next week's Lab Tutorial I'll describe how to lay out images in a responsive gallery using the flexbox properties and media queries.