What this session is about
This page will...- Help you choose a Text Editor and explain why you need one
- Help you choose a Web Browser
- Show you how to see the results of what you've written
First, one thing
As much as I try not to use jargon on the pages, some will be needed as there is simply no other name for what I am talking about. The good news is that when I use a really complicated word such as juxtapose, the word(s) will be underlined with a dotted black line. If you move your mouse over the word(s) and leave it there a couple of seconds, a box should pop up telling you what it means.Text Editor
A text editor is what you will be writing your web page in; it is important to note the name says text editor. Microsoft Word is not a text editor, you cannot use it to create websites. To prove this, I have created 2 files. One was created in a text editor and the other in Microsoft Word.Created with a Text Editor
Created with MS Word - Same file as a .doc
As can be clearly seen, Microsoft Word (or anything like it) cannot be used to create web pages. This isn't a flaw with Microsoft Word, it's just not designed to create websites.
Getting a Text Editor
As you're using Windows I can only recommend one program and I'm unable to speak from experience on its performance. However, every single one of my friends that has used it has said it's very good, it's also free so it'll not cost you anything to try. Notepad++ has Syntax Colouring (the key thing) and a large number of other features that make it very useful for more than just Website Creation.
If I misread your computer and you're a Mac user, click here
If you're using Linux, I have no idea what editor to use but it almost certainly comes with one.
More Choice
GoLive and Dreamweaver both allow you to edit the code by hand and in that form are quite acceptable editors though if you don't already own them they're a little pricey (especially compared to Textwrangler and Notepad++ being free). I suggest you don't use the WYSIWYG editor as it won't help you learn how the pages work, gives you less control of the pages, is slower for creating pages and doesn't always display the pages correctly.Front Page is not a nice program. I've no idea what the code editor looks like but the WYSIWYG editor is stuff of evil. I've seen the code output it creates and it's terrible, while you could use one of the two mentioned just above to create a page then look at the code to see how it works, do not do this with Front Page, it will not teach you anything good at all.
Web Browser
The second piece of kit you need is a web browser: this will allow you to see what you're making. As you're viewing this page I think it's safe to assume that you have a web browser, the problem however is that not all Web Browsers work properly. Contrary to popular belief, Internet Explorer does not work properly. If you want to make a website, you should use a browser that complies with the official web standards. There are two main browsers to choose from and both are free.
|
|
|
| Safari | Firefox |
Getting it to Work
Now you have the tools, you only need to know how to get them to work. It's very simple, drag a document ending in .html or .htm onto the icon of your web browser of choice. It's just that simple: I've got a little file for you to try, right click on the following link and choose "Save Link As", "Save As" or "Download Linked File As" depending on what browser you have. Once you've got that file, drag it onto your browser icon.
Opening with your Editor
One last thing, I have set all my .html files to open in Textmate rather than in Safari. This is a personal preference and makes it easier for editing. I'm not saying it's a great idea for everybody, but it's certainly worth having a whirl with to see if it makes your life easier.Syntax Colouring
With Textmate I have a nice theme that I use for my Syntax Colouring, if you want to use the same colours as me then you can download the theme, to install it, just double click it. For those without Textmate, I have a list of the colours that I use for various things, if you want to use the same colours, you'll just have to guess at their exact value and name on your editor. However, even if that's the case I can still help. I have a screenshot of both the colour scheme I use in Textmate and if I were using Textwrangler, I'd have it set like this.My font of choice is "PanicSans". Getting this thing is a little convoluted as it's not technically free in the normal sense yet Panic didn't charge me for it. Panic make this awesome program called Coda. Coda is not what I require and is also rather expensive $99 which is why it's not suggested alongside Textmate and Textwrangler (though it's got a 30 day free trial). Inside Coda is the "PanicSans" font. I was not 100% sure of the legal issues involved so I didn't simply take the font and use it, I emailed Panic asking them for permission to use it. They said I could use it and if you want it, that's what I suggest you do. I don't think the font works on Windows so Windows users, sorry, you'll have to make do with what you have.
