html5
advertisement
COEN 161 Web Programming 1 Fall 2011 Lab 5 TA: Pranathi Mamidi Email: pmamidi@scu.edu ----------------------------------------------------------------------------------------------------------------------------- ----------------------------------- In this part, you will be incorporating various html5 tags into the given HTML5_template. HTML5 is the proposed next standard for HTML 4.01, XHTML 1.0 and DOM Level2 HTML. It aims to reduce the need for proprietary plug-in based rich internet application technologies such as Adobe Flash, Microsoft Silverlight, Apache Pivot and Sun JavaFX. Some of the new features in HTML5 are functions for embedding audio, video, graphics, clientside data storage, and interactive documents. Part 1 (10 pts) 1) Figure and figcaption tags: In the given Basic HTML5 template, add a small description about nature and then add a figure. Using the figcaption tag, give a caption to the image. <p> Your description of nature________________</p> <figure> <figcaption>__________ </figcaption> <img src="_____.jpg" width="304" height="228" /> </figure> The <figure> tag specifies self-contained flow content (like images, diagrams, photos, code, etc). The content of the figure element should be relevant to the main content, but if removed it should not affect the flow of the document. The "figcaption" element should be placed as the first or the last child of the "figure" element 2) Audio tag: In the given Basic HTML5 template, add an audio file. Insert the following code snippet for audio in the html body: <audio controls="controls"> <source src="http://www.w3schools.com/html5/horse.ogg" type="audio/ogg" /> <source src=" http://www.w3schools.com/html5/horse.mp3" type="audio/mp3" /> Your browser does not support the audio element. </audio> Open the browser in Chrome, Firefox and see if it works. 3) Video tag: Insert the following code snippet for video in the html body: <video width="320" height="240" controls="controls"> <source src="http://www.w3schools.com/html5/movie.mp4" type="video/mp4" /> <source src="http://www.w3schools.com/html5/movie.ogg" type="video/ogg" /> Your browser does not support the video tag. </video> Open the browser in Chrome, Firefox and see if it works. Are the audio and video tags inline or block elements? Part 2 (5pts) 1) Header and footer tags: In the HTML template file (after the above modifications), insert the following code snippet in the html body: <!- -header tag to be placed immediately after <body> --> <header> <h1 style="text-align:center">Welcome to Nature's gallery</h1> <p>Collection of nature's pics, audio and videos</p> </header> Add as the last tag in the file: <footer> Your name, document creation date, contact info </footer> 2) Details and summary tags: Insert the following snippet of code in the file just above the footer tag. <details> <summary>Copyright XYZ 2011 </summary> <p>All pages and graphics on this web site are the property of XYZ. </p> </details> Open the browser in Chrome and firefox. In which one is this supported? Did the content after the summary tag get displayed? The <details> tag specifies additional details or controls which can be hidden or shown on demand. The content of the <details> tag should not be visible unless the open attribute is set. Now add the open attribute to the details tag: open=”open”. You can also show and hide the details by clicking once on the arrow key beside the summary tag. 3) Use the <mark> tag if you want to highlight parts of your text In the description paragraph about the image add the mark tag to one of the words you wish to highlight. 4) <article> tag specifies independent, self-contained content. Add this snippet after the end of video tag. <article style="border: solid 2px black"> <a href="http://www.earthtimes.org">Earth Times News</a> <br /> The Nature’s conservation movement aims to protect natural resources such as animal and plant species and their habitats. Conservation is a fairly broad term and can be almost interchangeable with the idea of environmentalism or the environmental movement as a whole - it is safe to assume that all environmentalists want to conserve the natural environment. </article> The other HTML5 tags you can experiment with are: aside, command, datalist, embed, hgroup, keygen, section, nav, meter, progress, time.
