The aims of this lab are:
Read the first three sections of the Google HTML/CSS Style Guide. This is a local copy obtained from the Github Google Style Repository
While reading, correct your HTML code from last lab to conform with the Google style.
Tables shouldn't be used for layout. Use CSS or Bootstrap instead.
Add media files such as images, audios and videos to your website in the HTML5 way, i.e. provide fall backs to ensure cross-browser and cross-platform rendering.
There are better ways to do this now. See W3 Schools.
<picture> element provides a container for the image source file,
where the <img src=""> is always the last element. It uses the
media attribute to query and serve
different images according to different devices.
For example, you can modify the following code to serve different images to different media. Load this into Gwiddle, and access using your phone and see if it is supported. For a comprehensive set of what element works on which browser, please refer to CanIUse.com.
<picture> <source media="(min-width: 1024px)" srcset="fullsize.jpg"> <source media="(min-width: 700px)" srcset="midsize.jpg"> <img src="crop.jpg" alt="My image"> </picture>
Search on the web for more information about HTML5 responsive images to
learn other new features such as the
size attribute as shown in the example below.
<picture> <source media="(min-width: 1024px)" srcset="fullsize-1x.jpg 1x, fullsize-2x.jpg 2x, fullsize-3x.jpg 3x"> <img src="crop-1x.jpg" alt="My image" srcset="crop-2x.jpg 2x, crop-3x.jpg 3x"> </picture>
Read the Mozilla MDN Docs on Video and Audio. Try out the lecture examples. Use one video type first and see if it works for both Windows and Linux. Right click to download the video files and audio files.