Archive of ‘Resources‘

 
 

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
[del.icio.us] [Digg] [Google] [StumbleUpon] [Windows Live] [Yahoo!] [Email] 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
[del.icio.us] [Digg] [Google] [StumbleUpon] [Windows Live] [Yahoo!] [Email] 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
[del.icio.us] [Digg] [Google] [StumbleUpon] [Windows Live] [Yahoo!] [Email] More »
Powered by Bookmarkify™

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

Total Vaildator Advanced Tool

The Total Validator Advanced Tool is one of our highest possible recommendations. We do however suggest that you only use it early in the morning or at that start of a long airplane flight – it will hunt down every error and tell you. In particular, if you set the depth high and check the “follow remote links” box, it will report on external errors – a truly horrifying experience at times. Download it here.

Bookmark and Share
[del.icio.us] [Digg] [Google] [StumbleUpon] [Windows Live] [Yahoo!] [Email] More »
Powered by Bookmarkify™

25. August 2008 | Resources | Comments (1)

FTP clients

We use one.

And only one.

Cyberduck

It rocks.

Bookmark and Share
[del.icio.us] [Digg] [Google] [StumbleUpon] [Windows Live] [Yahoo!] [Email] More »
Powered by Bookmarkify™

17. June 2008 | Resources | Comments (3)

Twitter

there is now a twitter feed for terucada.com here.

we believe we have broken even our record for finding something to wonder about. whilst changing our preferences to match the terucada layout colours of #ffffff, #bbbbbb, #999999 and so on, when we came to the next one – #666666, miraculously it transformed itself into #676767 in the input box. Stranger still, we ran the colour meter over it and it renders as #666666…. the issue has been raised – clickhere to see if anything comes of it….

Bookmark and Share
[del.icio.us] [Digg] [Google] [StumbleUpon] [Windows Live] [Yahoo!] [Email] More »
Powered by Bookmarkify™

17. June 2008 | Resources, Trivia | Comments (4)

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
[del.icio.us] [Digg] [Google] [StumbleUpon] [Windows Live] [Yahoo!] [Email] More »
Powered by Bookmarkify™

17. June 2008 | HowTo, Resources, Tutorials | Comments (4)

Flock and Scribefire – wonderful things

here at terucada, we have a deep love of flock, the truly wonderful mozilla based browser with handy built-in blog posting tool (not to mention support for some truly awesome developer tools), there was one tiny thing missing – no way of adding categories to posts that we could find. tags yes, categories no. enter ScribeFire, a wonderful mozilla/firefox extension that does it all.

we honestly cannot recommend it highly enough (and we are not getting paid to do so). ok, the editor is not all-singing all-dancing and you need a touch of html nous to format things exactly the way you want, but it beats the hell out of trying to use the wordpress frontend, and is user-friendly enough for anyone to use.

there will be many more blog posts thanks to these guys both here and at eat. try it – you will never look back. it will even add stuff to del.icio.us and technorati tags if you so wish…… superb!

Bookmark and Share
[del.icio.us] [Digg] [Google] [StumbleUpon] [Windows Live] [Yahoo!] [Email] More »
Powered by Bookmarkify™

07. June 2008 | Resources, Technology | Comments (3)

Mail Settings

The settings are as follows:

Server: mail.yoursite.com

Username: yourmailaddress@yoursite.com

Password: whatever……

Server requires Authentication: YES.

Bookmark and Share
[del.icio.us] [Digg] [Google] [StumbleUpon] [Windows Live] [Yahoo!] [Email] More »
Powered by Bookmarkify™

01. June 2008 | HowTo, Resources, Technology | Comments (5)