Monday 25 June 2012

Simple CSS Rollover With A Tiny Image

Unfortunately, the limitations of what I'm able to do within the Blogger framework mean that I'm unable to make this nav bar work here as it should, so I'm posting up an image of the actual nav during use, so you have some idea what the heck I'm talking about. Here it is:

You'll notice that the bar itself rests within a section that has a Black background-color and features a thick Red border at the bottom. This is not accounted for in the CSS that follows - it's all about the Nav Bar. In it's 'rest' state it shows red buttons which turn a sort-of light blue when moused over (you'll have to forgive my descriptions of colours - I'm colourblind!). Also, I'm just going to go right ahead and assume that you've got Photoshop or a similar image-editing kit. Anyway, here's the recipe...

INGREDIENTS

Photoshop or similar (any version that will save as a .png and features Layer Transparency)
A suitable UTF-8 compatible text editor* (I use Gedit or Kate - we spoke about this)
About thirty minutes spare time

Calories: none!

*Note: Don't use Notepad, it's an ASCII (ANSI) editor, not UTF-8.

METHOD

STAGE 1 - Create the graphic

Open Photoshop and create a new document with the following attributes:

  • 2 pixels width
  • 30 pixels height
  • Transparent background

Grip the corner of the document window and drag it out so it's much larger than the document area. If you have a mouse wheel, you should be able to scroll toward you to magnify the document. You need to be zoomed in far enough so you can easily see what you're doing and have plenty of room to work.

Select the Gradient Tool and choose a either Black or Dark-Grey as the Foreground Colour. I've used Black.

In the Tool dialogue, click Transparency and then click the displayed Gradient to open the Gradient Dialogue. Select the Foreground-to-Transparent thumbnail (usually second place).

Hold down Shift as you stroke the Gradient from bottom to top of the document.

Now, Save the document as a .png. I called mine Grad.png but you can, of course, use whatever name you want.

Close Photoshop.

STAGE 2 - Create the HTML

Open your text editor and type in the following into the <body> section of your saved HTML5 page:

<nav>
    <a href="#">NEW YORK</a><a href="#">LONDON</a><a href="#">PARIS</a><a href="#">MUNICH</a>
</nav>

By the way, if you can't be bothered typing out the code yourself, please, by all means, Copy and Paste - it should work fine!

Save your file.

Of course, you can put anything you wish between the <a></a> tags. I've used a quote from M's excellent Pop Music simply for demonstration purposes.

STAGE 3 - Create the CSS

Open main.css (your previously saved CSS file) in a new editor tab, and type the following:

a {
    text-decoration: none;
    background-color: #F00;
    background-image: url(Grad.png);
    background-position: bottom;
    background-repeat: repeat-x;
    color: #FFF;
    padding: 5px 20px;
    border-left: 1px solid #DDD;
    border-right: 1px solid #333;
    }
a:hover {
    text-decoration: none;
    background-color: #CCC;
    background-image: url(Grad.png);
    background-position: bottom;
    background-repeat: repeat-x;
    color: #FFF;
    padding: 5px 20px;
    border-left: 1px solid #DDD;
    border-right: 1px solid #333;
    }
nav {
    text-align: center;
    }

Save the file and test the nav bar. I've tested this with the browsers I have at home and it works fine in Firefox, Chrome, Opera, Epiphany and Seamonkey but doesn't work in Arora. I have no idea how it works in IE (but it should!) because I don't have it on my OS (linux).

Low Fat Version!

For a leaner, meaner nav element, try NOT including the .png image - and leave out these bits:

    background-image: url(Grad.png);
    background-position: bottom;
    background-repeat: repeat-x;

There you go! Your page is getting slimmer by the minute. Not quite as exciting - but it still works!

</chat>

Tuesday 5 June 2012

Setting Out The Basics

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.

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 .