In this lab we will explore the integration of visual and audio elements on a web page in HTML 5.
In the first exercise we will see different ways of displaying an image in HTML 5.
Create a folder for this lab. Choose a jpg image from previous labs or homeworks and copy it to this new folder, or one from whatever source you want.
Open Adobe DreamWeaver and start a new HTML file. Use a Split display mode. Save the file as lab12page.html in the folder you just created. Give it the title Image Display in the head part and then add a centered heading 1 title in the body area with the same text.
Below the title add a horizontal rule (<hr>). Below that add a paragraph <p> and inside its tag add the attribute align="center".
In this paragraph, add an <img > tag with the attribute src="" and the name of your image inside. Add a <br> tag after the img one to break the line. After that add a short explanation for the image to work like a caption. Refresh the design area of the page to see the result.
Add an alt="" attribute to the img tag with some text inside to be displayed if the image is missing. Add a letter to the name of the file to mess it up. Refresh the page in the design area. The image should disappear and the text you placed in the alt attribute should replace it. If you can't see the text, go to the folder where you saved the file, right-click on it, then choose to open it in a Firefox or Chrome. Once you have seen the effect, go back to DreamWeaver and fix the image name to get it back on the page.
Add another attribute to the img tag called title="" and inside place some text that you want to display as a comment over the image when you hover with the mouse over it. The effect will probably not show in DreamWeaver, so go back to the browser where you displayed the page and refresh it. Make sure to save the file first.
Let's set the size of this image. Add attributes width=300 and height=300 to the image size. Does it look right? It is very likely not preserving the original ratio of width and height, which is generally not a good thing. To preserve the ration, delete the height attribute.
This is about all that we can do with older-style HTML code (version 4 or older). More attributes were available but have been deprecated in the meantime. Instead, let's add some more properties to our image using CSS style.
Add an attribute style="width:300px;border:5;border-style:solid;" to the image. You will probably have to view the result in the browser to see the effect. Delete the regular width attribute we've used before. This should show a solid black border around the image with a size of 5 pixels.
Let's change the color of the border. Add the property border-color:#ff0000; to the style attribute. You can change the color if you want (this is red). Save the file and refresh it in the browser to see the effect. Then change the border type to dashed, then dotted, then double. Choose the one you prefer and save the file with that option.
Now let's create a style block in the head section so that the style we have chosen for this image is applied to other images on the page. Add a tag <style> inside the <head> section of the page after the title, and its closing tag. Then add a couple of empty lines in between and add the following block:
img {
}
Copy the text inside the style attribute (without the quotes) and paste it inside the img block in the style. Then separate each property on its own line to make it easier to read. The editor should indent them for you.
Then make a copy of the image below the caption, separated by a couple of line breaks from the caption. Delete the style attribute from the first image (only). Then for the second image delete everything but the width property in the style. Change the width of the second image to 400. You can add back any other properties that you want to set differently for the second image and change their values.
Finally, let's add some HTML 5 attributes to this image. Add a tag <figure> before the first image and close the tag after the caption below the image. Note that the image is not centered anymore. This is because a figure is a logical section of a page that closes previous ones, like paragraphs. Move the paragraph tag after the caption for the second image.
Add the tag <figcaption> before the text below the image, and then close this tag after the text. Remove the line break between the img and the caption. It is not necessary now.
Convert the second figure the same way. Add a line of text before the first image, between the images, and after the images with any comments, so that we can see how they would be placed in the text.
Now let's format these elements in the style section.
Add a block in the style section starting with the text figure followed by a pair of braces. Inside the braces add the property text-align:center; and then margin-top:10px; to set the spacing before the figure. Add another one with the same value for the bottom margin.
Add a similar block for the figcaption. Inside the braces, add the properties font-style:italic; to make the caption displayed in italics and then padding-top:2px; to set the space between the image and the caption. Then add a color: property and pick a color you want for the captions using the color-selection tool that should appear when you type the colon, or type a hexadecimal code like the ones we've used before.
In this exercise we will add an audio component to this page. Copy one of the audio files from a previous lab into this folder (or download it from the Files on Canvas).
Add a tag <audio src=""> right after the horizontal rule at the top of the page. type the name of your audio file inside the src attribute. Then close the tag after it (it needs to be closed). Refresh the page. Nothing seems to happen, right?
Add an autoplay attribute to the audio tag. If you refresh the page now, you'll hear that the audio starts to play, but there is no way to stop it or pause it. Go back to the audio tag and add controls to it and refresh the page. A control bar should appear where you can see the progression of the audio clip, pause it, and adjust the volume. Another attribute to explore is loop. If your clip is short enough, you'll notice that it is being played repeatedly.