HTML Elements - Part 4 : HTML5
Ello Gov'nor :)
Today we'll be looking at the shiny new HTML5 and some of it's exciting new elements.
Please note that this tutorial is part of the Build Your Own Site series of tutorials. Feel free to restart the series.
To start, let us do a little recap. Do you remember the "Creating Our First Page" tutorial at the beginning of this journey? Well ... you might need to recap. *Click To Recap*
Essentially, there were different versions of html throughout web browser history. These versions detailed the evolution of html and the web in general. Because it determined what you can do with the browser. So in earlier versions, you only had table elements etc, and as the web evolved, html offered more options and better user experience.
HTML5 is the web's latest evolution phase, decided on by the people at "https://www.w3.org/Consortium/" *Click To Visit*
Essentially it's the latest version decided on by the consortium, and every site on every browser can only do what the latest version has. HTML5 was a big stride though ... and everyone has been gushing and clutching their pearls at the site of the new features
Okay let's get into it ...
We'll start with the Canvas element.
HTML5 canvas is exactly that, a canvas to draw graphics on a web page. Since it's introduction, the web has responded with some of the most amazing graphics. Using this tool might be a bit tricky, but once you get used to it, the sky is the limit!
We'll start with the Canvas element.
Here are some examples of the projects people around the world have done with canvas :
As you can see; the community really embraced this element and went wild with it.
In this tutorial, we will not be building a lunar phase in 3D. We're just gonna look at the element and some properties.
And maybe later when we do javascript, we'll go a bit into interacting with the HTML5 canvas. But for now copy the html element below and paste it in your
"htmlfive.html" page. Oh create an "htmlfive.html" page in the same folder as your index.html file.
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
Your browser does not support the HTML5 canvas tag.
</canvas>
</body>
</html>
As you can see; the community really embraced this element and went wild with it.
In this tutorial, we will not be building a lunar phase in 3D. We're just gonna look at the element and some properties.
Check out those attributes will ya. We got id, width, height etc. Play around with those, when you're done; move down and check out the audio tag.
AUDIO TAG
The "audio" tag is aptly named, because it's meant for exactly it's name sake; handling audio!
The good people at W3C saw just how much of the web, was being used for media, and decided to help. And I for one, am glad they did. The audio tag has simplified the handling of audio media across the web.
Before it; we had to rely on tedious external means to play audio files. Flash, some media players, and all kinds of unholy wretchedness. So if you ever meet one of'em dudes from the w3C, buy them a coffee will ya :)
Alright go copy an audio file from your system into the same folder as your index file boet (Afrikaans for brother).
You know the drill, copy the html below, paste it under the last html element on the page(canvas), save it and reload the page:
http://localhost/htmlfive.html
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
And voila! Behold the audio tag in all it's glory :)
Do you see the "controls" attribute on the audio tag, that's the attribute that shows those familiar audio controls. Controls like play, pause, seek etc.
Take your time, play around with the tag and enjoy your fave songs.
"Alright, alright, alright ..." - Matthew McConaughey
Catch a breather now, got get yourself a sneaker bar and a couple of lettuce leaves.
The next element on the html5 list is the mighty video tag. Yeeaahh boooii, there is an element for videos!!!
And the pretty people at W3C brought it out with all the bells and whistles. And it's easily customisable.
Okay, let's take a look at this bad boy.
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
As you can see, like the audio tag, the video element has source attributes inside it, these are usually the same file with different encoding. So you have the same file in
mp4, avi, and ogg.
Also note that the video tag can also take audio tags.
Now copy a video file from somewhere in your PC into the same folder as the index.html file. If you can encode it into different video formats; mp4, avi etc, that would be swell. As this will allowe you to see how each is handled by different browsers.
Now replace the "movie.mp4", and the "movie.ogg" with the names of your video files. Such that your video element now looks like this:
<video width="320" height="240" controls>
<source src="yourmovie.mp4" type="video/mp4">
<source src="yourmovie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>"In this tutorial, we will not be building a lunar phase in 3D. We're just gonna look at the element and some properties."
The Village Geek
Be sure to change the type values to whichever ones yours are. For instance if you have an avi file in there, then your type should be
Now Ramon, listen my friend; HTML5 and indeed HTML has a LOT MORE elements than we've talked about in this series; A LOT MORE! So go ahead and look around, play around with some and change some attributes as you go.
"video/avi" etc.
Now save and reload : http://localhost/htmlfive.html. Aaannnnnddd Voila! :) The video tag in all it's glory.
Play the video and fiddle with the controls a bit :) ... Don't worry about it, it won't break :)
Cape Town, South Africa
