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.

Okay let's get into it ...

<!DOCTYPE html>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
Your browser does not support the HTML5 canvas tag.


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 controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.

"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 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.

"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

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.

Cape Town, South Africa

Buy me a coffee ? :) Buy me a coffee :)

Reply to this discussion


Coming Soon ...