The HTML5 journey: A basic tutorial to HTML5
After a while mucking around with applets I went to Microsoft Silverlight, followed it for a few years, made some nice things with it but then Microsoft dropped support for it in favour of HTML5! (How can I ever forgive you Microsoft!) Now everyone and their grandmothers seem to be bending over backwards to support HTML5, so I feel like it's time to finally take a good look at this newish technology and see what I can do with it.
Right waffle over, on with something useful.
What is HTML5?
Well, I’ve purchased various HTML5 books and started to read them, missing my C++ and the Marmalade SDK already. I’ve come to the conclusion that HTML5 is a bunch of things:
- Well it uses HTML5 mark-up to begin with, but some new cool tags have been added to provide access to stuff like a drawing canvas and video playback
- Cascading style sheets (CSS3), this is a language that you use to add style to the various HTML page elements
How do I create an HTML 5 page?
Here’s an example HTML5 page that does absolutely nothing useful:
What does all this junk mean? Let's take a look at it in sections.
Line 1 – This tells the browser that this is an HTML5 document
Line 2 – The html tag tells the browser that the stuff in this section contains HTML
Line 3 – The head tag contains things like the page title, which scripts and style sheets to include
Line 4 – The meta tag describes metadata such as the character set that the document uses
Line 5 – The title tag is the title of the page, this is usually displayed in the browser title bar
Line 6 – Closes the head tag
Line 7 – The body tag contains the main body of the document, basically all of the text, images and so on
Line 8 – The h1 tag designates whatever is inside it as a level 1 header and will be styled as such, usually large and bold unless redefined with a style
Line 9 – The p tag begins a new paragraph on the page
Line 10 – Some content to display in the paragraph
Line 11 – Ends the paragraph
Line 12 – Ends the main body
Line 13 – Ends the html document
How do I add some style to my web page?
Well to begin with we will add some style to the previous example to make it look a little colourful. We will use what’s called inline styling. This is when you are too bone idle to create a style sheet and link it into your document. Lets take a look at an impossibly useless example:
If you are as observant as I then you may notice that two lines in the code have changed:
Line 8 – We have added an attribute called style then stuck some stuff into quotes. We basically tell the browser to change the colour of the text in the h1 tag to green
Line 9 – We have also added the style attribute here, but changed the text colour to blue instead
How do I style stuff using CSS instead of inline styles?
Most web developers prefer to use a style sheet to style elements of the web page, which I am guessing when my web page becomes bulky and very scary will make it much easier for me to change the look of my web page without having to go through and change every single style that I set. A style sheet is basically a text file with the extension .css that you include in your html document. You include a style sheet like this:
Inside our header tag we have added a link to a style sheet called styles.css. When the page is loaded this style sheet will be loaded and all styles within it will be applied to elements of the page. If the style sheet does not contain styles for elements that are on the page then they will get the good old default ugly style. Lets take a look at an example style sheet:
In the above style sheet we list the h1 tag and then place a bunch of attributes that we want to redefine along with their values separated by the colon character inside braces. The only problem with this is that it will change the colour of all h1 and p tag content that’s on the page, which is great if that’s what you want, but not so good if it isn’t.
To get around this you can name your elements and then simply define a style for the named element. Lets look at an example:
We have named the first h1 tag header1 using the id attribute. We can refer to this named element in the CSS file by placing a hash character in front of the name.
There’s a ton of other stuff that you can do with CSS from what I understand, but I’m not clever enough to go into that just yet, maybe in a later article.
At lines 12-14 we have inserted a script tag containing a single line of script. The script itself looks for an element called header1 then changes the color attribute of its style to blue.
Now let's take a look at an example where we use common sense and decide to put our code into a separate script file. Create the following two files (test.html and code.js) then open the html file in a browser:
At line 12 of the html file we have still got a script tag, but instead of placing our script inside the script tag, we have moved it out into its own file and included the script file into the html document.