Web Design Tutorial #3 – Head and Title

In this tutorial, we will be looking at the <head> tag and the related <title>, <meta>, and <link> tags. We’ll leave a couple of other tags with <head> for later – specifically <base> and <script>. The <style> tag we will pass over, for reasons which will become clear.

The <head> tag comes immediately after the <html> tag, and before the <body> tag. It supplies information to the browser which, with one exception, will not be displayed on the screen. Let’s start easy, and work up. If you haven’t done so already, download the base file from Tutorial #2
and save it in a folder on its own with the name ‘index.html’. Either way, open in a text editor and change it so it looks like

.
.
.
<html>
<head>
<title>Hello World!</title>
</head>
<body>
.
.
.
Open the file with your browser of choice (or IE) and lo! the page has a title. Next up: <meta> tags.

Bookmark and Share

Close Bookmark and Share This Page

Save to Browser Favorites / Bookmarks

Email This to a Friend

Copy HTML:

If you like this then please subscribe to the RSS Feed.

Powered by Bookmarkify™

More »

Powered by Bookmarkify™

25. August 2008 | HowTo, Resources, Tutorials | Comments (4)

Web Design Tutorial #2 – Hello World!

The first thing we are going to do is keep things simple. Well, sort of. Download this file, save it in a folder all by itself as “index.html”. Open it in your text editor of choice, and have a look. You should see this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <body> Hello World! </body> </html>

Hmm… I hear you say, that’s a lot of typing just for a “Hello World” page, and you would be right – but you only have to do it once per page. Let’s run through what goes on line by line….

The first line is the DOCTYPE declaration. This tells the browser that we are using a language called “XHTML”, that we are using version 1.1, and that we are using the “strict” rules, as laid down by W3C. Have a good look at their site – you’ll be seeing a lot of it as you follow these tutorials.

The next line – HTML the statement – is the start of…. well, the HTML and is swiftly followed by the body tag, which is the start of what actually winds up on the page. As we are using strict rule (which admittedly we have yet to explain), after the “Hello World!” line we play nice and close the tags with the </body> and </html>

So now, we have our first page. Next up – more tags.

Bookmark and Share

Close Bookmark and Share This Page

Save to Browser Favorites / Bookmarks

Email This to a Friend

Copy HTML:

If you like this then please subscribe to the RSS Feed.

Powered by Bookmarkify™

More »

Powered by Bookmarkify™

25. August 2008 | HowTo, Resources, Tutorials | Comments (5)

Web Design Tutorial #1 – Resources

After nearly two requests, we here at the terucada offices are launching a series of three tutorials, all of which are interlinked. In these tutorials we will cover much ground, some of it helpful, some playful and some of which may even be useful. To follow along with this, you are going to need a good text editor, so go get one now. No, Wordpad will not do – Windoze users should head for Crimson Editor – and the nearest Mac store – hint:quite a lot of the things in these tutorials are not very easy on the Worlds Favourite Operating System without jumping through a few hoops. We’ll cover that in detail later. Mac users, head for Textwrangler. Those of you on *nix systems – look elsewhere, because we have nothing to teach you – we are not ignoring you, but the clue here is that this is a beginner’s tutorial, so emacs and vi will be somewhat sidelined as you need no lectures from us after compiling Gentoo from source….. One editor we will not ignore is Jed, the editor-of-choice round these parts. Go! Do it! More follows…..

Bookmark and Share

Close Bookmark and Share This Page

Save to Browser Favorites / Bookmarks

Email This to a Friend

Copy HTML:

If you like this then please subscribe to the RSS Feed.

Powered by Bookmarkify™

More »

Powered by Bookmarkify™

25. August 2008 | HowTo, Resources, Tutorials | Comments (5)

Cross Browser Compatibility

cross-browser compatibility is one of the web designers biggest challenges, and can be split into two main areas.

the first area can be usefully thought of more as user-compatibility than browser-compatibility. it is vitally important for designers to remember that their users may be using a braille display or a screen reader, or are using a text-only browser. in these cases the over-use of images and tables can render sites useless. on of our goals for the next year it to become fully accessible to the widest range of users possible.

the second area can truly be called cross browser issues, and are largely centered around the implementation and interpretation of cascading style sheets by different browsers.

the World Wide Web Consortium lays down what most people regard as being the standards for both (x)html and css, which are well implemented in Safari, Opera, Firefox, Flock and many other modern, up to date browsers – and therein lies the problem. Possibly the most notorious problem is detailed here by Edwarson Tan.

The only answer here is test, test and test again. Whilst we make no guarantees that we can cover every browser, we test from IE5.x (win/mac) upwards – a tedious and rather thankless task, but if a site breaks under, say, IE6 (which we have had happen) then fully one third of the people viewing it will be very unhappy. And thus, so will our clients. If you have any specific browser requests or issues, please post here.

Bookmark and Share

Close Bookmark and Share This Page

Save to Browser Favorites / Bookmarks