Unit 7

HTML 5 is the latest version of HTML. This w3schools tutorial summarizes the most important additions and differences.

We will focus on the use of the svg element and the audio and video elements.

SVG (Scalable Vector Graphics):

First, read this tutorial on w3schools. Try to draw the circle and the rectangle. Play around with the different values of the parameters.

Remember the rules:

You must declare your HTML document as an HTML5 document in order to use SVG. You do this by using the HTML5 doctype declaration: <!DOCTYPE html> at the very top of your document.
To create an SVG graphic you first need to create a canvas for your graphics using the the SVG tag. You must specify the dimensions of the canvas. All the graphics must be defined between the opening and closing SVG tags. An example follows:
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="magenta" stroke-width="2" fill="crimson" />
</svg>
Notice that the circle tag is an orphan tag and can have many different attributes, such as:
- cx - the x coordinate of the center of your circle
- cy - the y coordinate of the center of your circle
- r - the radius of your circle
- stroke - the color of the outline of the circle
- stroke-width - the thickness of the circle's outline
- fill - the fill color for your circle
- opacity - the degree of opacity vs. transparency (0-1) of your circle
There are various shapes you can create using SVG, including:
- circle
- rectangle
- polygon
- ellipse
- text
- line
For a full listing of the different shapes and effects, please see the SVG tutorial on w3schools.

To draw a horizontal line, you can use the <line> tag. An example follows:

<line x1="0" y1="600" x2="1200" y2="600" stroke="black" stroke-width="20" />

Task 1

Draw a target using SVG. Make sure you use the circle command. Tip: You will need a series of concentric circles - each filled with a different color.

Task 2

Create the French flag using SVG commands. Make sure you maintain the proportions (3:2). The three stripes are of equal width.

Challenge: Create the Olympics logo using SVG commands. (read on pseudo-layering in SVG here)

Embedding Audio and Video Elements

Read the HTML Media tutorial on how to embed audio clips and video files straight into your webpage. Try out the examples given. Do all the pages except for the Plugins page (this is optional).

Task 3

Create an HTML5 page that will have your favorite video embedded (You can get some royalty-free video from here or here, for instance.) and underneath a song/composition by your favorite musician/composer as an audio file {for instance from Free Music Archive or from Audio Micro's royalty free music}. If you are embedding a youtube video, make sure you use the <iframe> tag for embedding videos (i.e. not the <object> or <video> tags). You can, for instance, get the full <iframe> tag for embedding a video from any Youtube video by right-clicking the video and selecting "Copy embed code" (see the screenshot below). Make sure your page is HTML 5 compliant.

copying the iframe tage in Youtube:

A sample iframe tag:

<iframe width="573" height="430" src="https://www.youtube.com/embed/pMsqKP-3Qog" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Page updated

Google Sites

Report abuse