I’ve always liked web development (from a gaming perspective), but not to the same extent as I have good old solid native development with C++. The main reason being “JavaScript”. To be honest, I did JavaScript years and years ago and it terrified me, I couldn’t get used to not having pointers and variables that have a set type amongst other things. The main problem however for me has always been speed, if I want to make a game I want to provide a good interactive experience without loads of lag, slow frame rates and dodgy access to things like audio playback and input. So, for years I avoided client side JavaScript and the DOM and went with Java Applets, which seemed great, nice and quick, good frame rates, can render 2D and 3D, access to I/O etc.., but if I remember correctly there were browser security issues, oh and it crashed (or refused to load) across different browser versions. 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 HTML 5! (How can I ever forgive you Microsoft!) Now everyone and their grand mothers seem to be bending over backwards to support HTML5, so I feel like its time to finally take a good look at this newish technology and see what I can do with it.
This blog series is going to cover my noobish attempts to learn how to use HTML5 / JavaSctipt with possibly a little PHP back-end junk thrown in. At the end o the blog series I will probably revisit the series and tidy up so I can mislead as few developers as possible!
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
- JavaScript, this is the language used to manipulate the HTML of the page and what not
How do I create an HTML 5 page?
Simple, create a text file using any old text editor (I use Notepad++ as it has syntax highlighting for HTML, CSS and JavaScript) and called it something,html. You can open this file in a browser to view the page which as Mrs Brown says is nice.
Here’s an example HTML5 page that does absolutely nothing useful:
[sourcecode language=”html”]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 for absolute noobs (I appear in browser bar)</title>
</head>
<body>
<h1>HTML5 for absolute noobs header</h1>
<p>
HTML5 for absolute noobs paragraph
</p>
</body>
</html>
[/sourcecode]
What does all this junk mean? Lets take a look at it in sections.
Line 1 – This tells the browser that this is an HTML 5 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:
[sourcecode language=”html”]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 for absolute noobs (I appear in browser bar)</title>
</head>
<body>
<h1 style="color:green;">HTML5 for absolute noobs header</h1>
<p style="color:blue;">
HTML5 for absolute noobs paragraph
</p>
</body>
</html>
[/sourcecode]
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 scarey 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:
[sourcecode language=”html”]
<head>
<meta charset="utf-8">
<title>HTML5 for absolute noobs (I appear in browser bar)</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
[/sourcecode]
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:
[sourcecode language=”css”]
h1 {
color: green;
}
p {
color: blue;
}
[/sourcecode]
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:
[sourcecode language=”html”]
<h1 id="header1">HTML5 for absolute noobs header</h1>
<h1>I refuse to have style!</h1>
[/sourcecode]
[sourcecode language=”css”]
#header1 {
color: blue;
}
[/sourcecode]
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.
How do I get some JavaScript code into my web page?
There are two ways, you can use inline JavaScript, this is code that you write directly into the html document, which can get rather messy. Theres also the much cleaner and user friendly way of including a JavaScript file into the document rather like we did with the style sheet. Lets take a look at inline JavaScript first. Run the following html:
[sourcecode language=”html”]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 for absolute noobs (I appear in browser bar)</title>
</head>
<body>
<h1 id="header1">HTML5 for absolute noobs header</h1>
<p>
HTML5 for absolute noobs paragraph
</p>
<script>
document.getElementById("header1").style.color = "blue";
</script>
</body>
</html>
[/sourcecode]
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 lets 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:
[sourcecode language=”html”]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 for absolute noobs (I appear in browser bar)</title>
</head>
<body>
<h1 id="header1">HTML5 for absolute noobs header</h1>
<p>
HTML5 for absolute noobs paragraph
</p>
<script type="text/javascript" src="code.js"></script>
</body>
</html>
[/sourcecode]
[sourcecode language=”html”]
document.getElementById("header1").style.color = "blue";
document.write("Hello World");
[/sourcecode]
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.
Well, I’ve had enough for one evening, my feet ache. I stand at my desk instead of sitting because I’m into self punishment. I hope to cover something a little more interesting next time, maybe take a look at the DOM.
Oh, do I care about typos and bad spelling / grammar? No, if I did then I would have become an English teacher and not a programmer!