In the last Post, I said that we'd be setting out the basics of an HTML document. As the purpose of this blog is to examine HTML5, we'll start by creating a new HTML document and giving it a name, so we can view it in our browsers and see our emerging web page as we work. That's what we'll be doing today.
I'm going to take it as read that you've found yourself a decent text editor or, if you don't fancy writing the page 'raw', an Integrated Development Environment (IDE) like Dreamweaver. Actually, one thing that deserves mention right now is that BLUEFISH, mentioned in the last Post as a text editor, is, in reality, an IDE and I apologise to the folks at Bluefish if I misrepresented their work. BLUEFISH provides a development environment for code in MANY languages, including HTML, PHP, C#, C++ - the list goes on because it's a powerful tool. My major concern was finding a code editor that would COLOUR the code for you, so that you could easily distinguish the markup from the content - and BLUEFISH does this - but so does KATE and GEDIT. As you're unlikely to need 90% of what BLUEFISH does, especially to create a simple web page it seems, now, to be a bit of overkill to use it - but then, this IS what it was designed for. So, whatever your final choice of editor, get it out of the toybox and fire it up.
If you've ever done any painting, this is the 'blank canvas' moment (or Writer's Block, if you're a writer) - when you look at the untouched surface and your brain screams, "There's nothing there! WhatamIgonnaDooooo?" So let's put some paint on the canvas as a starting point. Type the following:
<!doctype html>
...and press Enter. There - Blank Canvas Moment/Writer's Block effectively dealt with! Easy, wasn't it?
What you've done is create the Document Type Declaration (DTD) and it's one of the few tags in HTML that doesn't require closing. It's also not Case Sensitive, so <!DOCTYPE HTML> can also be used just as effectively. This simple tag instructs the browser that this document is written in HTML. It's the simplest DTD yet. The DTD for HTML 4.01 was an ungainly monster, so it's nice to see things simplified in this way - well done HTML5!
I'm not going to dwell on HTML 4.01, or any of the other web languages, because the object is to get our teeth into HTML5 - so let's do some! We'll start by typing:
<html>
... press Enter a couple of times, then type:
</html>
You've just created an HTML document! True, there's nothing in it yet but we'll remedy that in a second. In the space between these two tags, type:
<head>
... and press Enter a couple of times before typing:
</head>
You have just opened and closed the document head, where we can do many things before the document gets presented. We're not going to do any of them right now, except to give the page a title and link an external stylesheet to this HTML file.
Between the two head tags, type:
<title>My HTML5 Practice Page</title>
<link rel="stylesheet" href="main.css" media="screen">
BEST PRACTICE TIP: Any content inserted between tags should be indented for ease of reading. It isn't important for the browser but it makes reading the document (and finding things in it) easier for a human. :-)
"Ooh - now it's getting a bit complicated!"
Well, not really. All you're doing is saying to the browser, "When you open this document, put THIS title in the window bar and use the rules set out in THIS other document (called main.css), so it looks good." In the latter case, the browser needs to know what TYPE of document it is ("stylesheet"), the document's NAME ("main.css") and what MEDIA the rules therein are to be used for ("screen").
You can also create CSS files to govern how a browser will PRINT the page or even how it will SOUND to someone listening to it using Screen Reader software - but that is not our purpose here. If you're interested, more can be read about the various types of stylesheet
HERE.
"Hang on, though! Main.css doesn't exist."
Well, not yet - but it will in a little while, trust me.
Having created the head, inserted a title and linked a (presently nonexistent) stylesheet to it, we can move on and create the rest of the page - and the next thing in line is the body tag.
Create an empty line UNDER </head> and type:
<body>
(press Enter a couple of times and type)
</body>
then sit back and admire your work, which should look similar to this:
<!doctype html>
<html>
<head>
<title>My HTML5 Practice Page</title>
<link rel="stylesheet" href="main.css" media="screen">
</head>
<body>
</body>
</html>
Now, if you've set up a Folder structure, as suggested in the last Post, click File and Save As... and navigate to where your HTML5 folder is. Give this file a name (call it what you like - I'm calling mine practice.html - all lower case) and click the Save button.
If you're using any of the editors suggested last time, you will now see that your code has taken on some colour. Wonderful! You've created an HTML web page - without content, sure - but an HTML5 page nonetheless. Now let's create the stylesheet.
On your toolbar, you should have a button to create a new document, please click it. This is where a tabbed interface comes in handy because any of the editors mentioned last time will create this new document in a new tab instead of another copy of the same editor. You should now be able to find a tab labelled "index.html" (or whatever you called your web page) and another labelled "Untitled Document" or "Unsaved Document" - make sure you click this new tab before continuing. More Blank Canvas Moment? I thought we'd dispelled that for good!
BROWSER INTERPRETATION
CSS should be a simple subject to learn but browsers complicate matters by not supporting some aspects of the HTML code - or, worse still, support them in 'their own way.' Consequently, we find that some browsers add margin (external space) or padding (internal space) to page elements where you don't want any. This simply messes up your carefully planned layout. I'm not pointing fingers, Internet Explorer - but it's intersting to note how many times web coders have to create 'workarounds' in order to make your sorry excuse for a browser render a page correctly. Nuff said. By the way, it will help enormously if your get yourself a browser like Chrome, Firefox or Opera which will render the pages we write here exactly as they should be rendered. This ability is known as Standards Compliance and it still amazes me that the largest corporation in the world can't make a browser that's Standrads Compliant. These browsers are FREE, so go ahead and install one or more (I have several).
Our job as web coders (which you have now become) is to ensure that it's OUR layout instructions that are followed, not the browser's. Let's do that now. On your new blank canvas, type:
* {
padding: 0;
margin: 0;
}
This tells every browser that reads this file that EVERYTHING (*) on the accompanying HTML page will have NO padding and NO margin (those are zeroes, by the way, not the letter O).
Now, let's make sure our CSS file is doing it's job by giving the web page a nice coloured background.
Press Enter a couple of times and type:
body {
background-color: #880000;
}
Click File and Save As... and make sure you're in your HTML5 Folder before naming your file main.css and pressing Enter. Ta Daaah! we have now created a CSS stylesheet which will affect the look of our HTML page because it's been linked to it already when we created the page.
Minimise your editor and find your new HTML file in the HTML5 folder. Open it in a web browser (usually by double-clicking it) and, if you've done your job properly, you should see the browser window filled with a nice Red colour. If you can't see that, then go back over your code very carefully and ensure that everything typed out is EXACTLY as it is shown here.
Before I leave you, get yourself some Lorem Ipsum text. This is a Latin/Greek-like text that you'll often find on example web pages and templates. It's function is to serve as body text and has pretty much the same word-length as modern English. Don't try to translate it - it's nonsense, apparently. There are links to Lorem Ipsum generators in the Resources file mentioned below. Copy about ten paragraphs and save them in a new text document in your HTML5/docs folder, naming it something sensible like Lorem Ipsum.
RESOURCES
I have prepared a list of links that will expand on what has been discussed in this post. I will do this from now on. The file will have the same name as this post. I suggest you read the pages listed in the file as they will help you to better understand what we have been through today. You can open the file in a web browser. Here's how to get it:
Click
HERE to go to my documents page in Google Docs.
This will open a HTML file.
(Don't pay too much attention to the contents as this is not a HTML5 file but a Netscape Bookmarks file that has been given some styling)
Click
File and choose
Download to copy it to your computer.
Close the Google Docs tab.
