Sunday 3 June 2012

Getting The Toolkit Sorted Out

You wouldn't consider embarking on disassembling your car engine with out a suitable toolkit. Well, it's the same when constructing a web page. Okay, best practice suggests that you plan the layout on paper first but when you come to write it, you'll need certain things. An Operating System (OS), a suitable text editor and a browser should all be present before you begin. If you're reading this on the Internet, then you already have an OS and a browser but I'm assuming absolutely NO foreknowledge of these subjects - in the highest traditions of Helpdesks everywhere.

1. OPERATING SYSTEM

The Operating System is entirely up to you - whatever you use (Windows, Linux or Mac OS) is fine. It's the editors that will cause pitfalls if there are going to be any. I use Linux, and frequently write HTML using GEDIT, KATE or sometimes BLUEFISH. All of these editors use the UTF-8 character set and feature Syntax Highlighting which makes navigating your code very easy. Syntax Highlighting means that your tags (e.g.<p>) will appear in one colour and your content in another. Handy, eh?

If you're a Linux user, your distribution's software repository will no doubt have all three of these available, so get one or more of them installed before continuing. Like Linux, they're FREE (I like FREE) but if you're a Linux user, you knew that already.

Windows users could install Linux alongside Windows and dual-boot but instructions on how to achieve this wizardry are beyond the scope of this blog - but it's easy - really! An Ubuntu installer will ask you to decide what you want to do and then do it for you with no fuss.
Why a text editor instead of an Integrated Development Environment like Dreamweaver? Easy! These text editors are FREE. How much does Dreamweaver cost?

A good non-free text editor that I've come to know recently is Sublime Text 2 (available for Windows, OS X 10.6 and above and Linux) - which is very powerful and cool-looking but requires you to pay for a license after evaluation. There is currently no enforced time limit to evaluation but hey, fair's fair! As stated, I like FREE, so I didn't go for the licensing but, once you've tried it out, if you'd prefer to use this text editor, be my guest. I use GEDIT to write this blog and all the code featured in it.

There is also a version of GEDIT that's available for Windows, too. At the end of the day, the choice of editor is yours but I would avoid Notepad - not that there's anything wrong with Notepad but simply because we'll be using the UTF-8 character set and Notepad, being natively ANSI (ASCII) doesn't use the same character set so, to avoid potential pitfalls along the way, use a UTF-8 compatible editor.

2. GETTING THE EDITORS

GEDIT for Windows is available from Softonic at http://gedit.en.softonic.com/ and for MAC from http://gedit.en.softonic.com/mac

You may have a little trouble sourcing KATE for Windows but it might be worth checking the KDE On Windows Project at http://windows.kde.org/ - supported Windows versions are XP, Vista and 7. It requires the initial download of an installer package. Mac users can source the editor at http://community.kde.org/Mac

BLUEFISH (http://bluefish.openoffice.nl/download.html) can be installed on the Windows platform and, like KATE, it requires the use of an installer. Download the latest Bluefish installer from the main download server: http://www.bennewitz.com/bluefish/stable/binaries/win32/Bluefish-2.2.1-setup.exe . Mac OSX is also supported. Start at http://bluefish.openoffice.nl/download.html but remember to check their Wiki page on http://bfwiki.tellefsen.net/index.php/Installing_Bluefish for instructions on installation.

GEDIT and KATE do not auto-complete tags like BLUEFISH does - but I find that useful. It rules out laziness because you have to remember to close your tags. A good habit to get into when you're learning. I can almost hear some folks arguing that you don't have to close a paragraph tag - but in HTML5, as in XML - you do. So get into the habit of closing ALL tags. It will serve you well in the future.

For the completely uninitiated, auto-completion means that if you type <div>
the editor will respond by putting </div>at the end of it, leaving your cursor between the two tags ready for content insertion. Handily, editors of this sort also close <p> (paragraph) tags, too.

3. CREATE A FOLDER STRUCTURE

I hate to be the one to push you into good habits (I have enough bad ones of my own!) but it will be worth creating a Folder to house your HTML5 work. Call it what you will but ensure that you only Save your HTML5 files in that folder so you can find and retrieve them easily. If you create the Folder on a USB pen drive you can even carry the files about with you, ready to be used on any computer that has a USB port (always providing that attaching such devices is not ruled out in your school or place of work).

Because we will be dealing with Images, Video, Audio and Other Documents, I would suggest a Folder structure similar to this:

HTML5
.
..... images
.
..... audio
.
..... video
.
..... docs

HTML5, unlike XHTML is not case sensitive (in XHTML, IMAGES, Images and images are three completely different things), so you could use Folder names beginning with capital letters (or indeed use ALL caps). I always keep mine in all lower case out of pure laziness. Who wants to have to hold down ANOTHER button when typing stuff - especially when you're concentrating on getting your tags right?

Okay - once you've got yourself a nice text editor and reserved a Folder for your work, have some time off, and we'll kick off, next time, by setting out the basics of an HTML5 document. Any CSS we do along the way will be completed in another document and linked to the HTML file. I know you can use 'inline' styling but really, who has the time? You can also use a <style> tag pair inserted into the head of the HTML file but this, I find, can make the HTML file over-long and tedious to navigate. The text editors mentioned above can open both the HTML and CSS files in tabs, making it easy to swap between the two, so why bloat your code with unnecessary styling? 

An explanation of the various types of styling can be found here: http://www.w3schools.com/css/css_howto.asp .

No comments:

Post a Comment

Please leave a Comment and remember that everyone can read them, so keep it clean - and be kind! Your Comments will be moderated before publication.