These notes mainly use the word folder, as that's what Microsoft now calls them (to make Windows more like an Apple Mac). When I started on PCs in the days of DOS they were called directories, and that's still what I tend to say; the two words mean exactly the same. At the last count there were over 6,000 of them on my hard drive — go into Windows Explorer and have a look.
You need one or more folders on your hard disk to hold the local copy of your website: HTML, CSS, images and any other files you want. I recommend the simple approach: just create a folder called C:\Website and put all your files in it. No, it doesn't have to be under My Documents, that's just Microsoft wanting you to do it their way. I suggest you ignore the rest of this section, and I won't mention it while running the course, but it's something you might want to come back to later.
I have copies of several websites on my C-drive, so I have a folder called C:\External and within this there's a folder for each website, so there's one called Colin for my own website and others with appropriate names for other websites.
The server for colinhume.com was then run by a company called web-hosting.uk.com and they gave me a directory below which is a directory called wwwroot which is actually the top-level directory for the website. This may seem unnecessarily complicated, but it means I can have a folder called db containing a database, which is not part of my website. So even if they know about it, people can't download my database to their machine and look at my confidential information. And yet in my ASP code I can pull information in from the database, display it to the users, and update the database according to what the users do.
If that sounds too complicated and you know you're never going to use it, you don't need to allow for it on your hard disk; all you need is a C:\Website folder. In fact that's the best approach unless you know that your ISP uses this method (many don't) and you want to avail yourself of it.
You can also create any sub-directories of the root directory that you want — for instance one called images to hold your JPEGs and GIFs — the structure of your website is under your control. This is the way I've set mine up:
All of this section depends on what file you are currently editing. You may have two websites, with tabs open for HTML files in each of them — make sure you're on the correct tab before you do anything involving the server.
Click Web|Server Details. Fill in the values on the form displayed. Your ISP should have told you the FTP address. If your site is called www.xyz.com it's a fair bet that its FTP address is ftp.xyz.com but it may be a string of numbers and dots instead and it can even be a www… address. In the case I mentioned where there's an extra level which you have no interest in, you could specify ftp.xyz.com/wwwroot here. The program deliberately does not conceal the password from you once you click on it — I found when I used another FTP program I had to put the password in somewhere else as a comment, to make sure I knew what it was when I needed it again!
When you click Save, WebEdit saves the supplied information in a file called Data.FTP and you will be reminded to move up to the root directory (if you're not already in it) before saving the file. (Thereafter WebEdit works out which is your root directory by starting with the current page and going up through the directory structure until it finds one containing Data.FTP.) By “root directory” I mean the top-level folder on your hard disk associated with this website. In my file structure above it would be C:\External\Colin and in the simple case it would be C:\Website. This is not a file that you would want to upload to the web server, so it doesn't appear when you use the Server menu item to see what's on the server and the local copy of your website. If you use another FTP program as well, make sure you don't upload this file to the server — if WebEdit finds it on the server it will warn you.
With a bit of luck you will now be able to access the web server. If not, don't give up. Try various things. You might need to come out of WebEdit and back in again. Make sure you really are connected to the internet — try viewing some other website in your browser. Some ISPs demand that to access their web space you have to be connected to the internet through their connection — NTL and FreeServe (which was Wanadoo and is now Orange) for instance. If it still won't work, phone me and I'll see if I can sort things out.
Once you are connected to the server, you can upload the page simply by pressing [Alt] and the Up-arrow. The other way of seeing exactly what's on the server, getting an immediate comparison with your local copy, creating and deleting folders and uploading a whole set of files at once, is to click on the Server menu — you would need this to upload graphics, for instance.
Now go into your browser and see whether you can view your web page on the server. Congratulations — you are now a webmaster! Don't forget that if you then upload a modified version of the page and want to see it in your browser you will have to press [F5] or click the Refresh button — in some cases you may need Ctrl [F5].
While you're there, I suggest you make the following change if you're using Internet Explorer:
or if you're using Firefox:
In the address bar type your FTP address: for my site this would be ftp://ftp.colinhume.com and don't forget the colon or the slashes — yes, you do need to say “ftp” twice. It will then ask you for your userid and password, and once you enter these correctly you should see a list of folders. You should be able to position to the correct folder if you're not already on it, and then drag files into the folder which means you are uploading them.
Having got the whole system working, set to work to make index.htm a real home page. Please don't use anything I haven't taught you yet — I know you might find that frustrating, but there is a logic in the order in which I'm teaching things and I don't want you to get into bad habits. I suggest you stick with the safe (slow/boring/unnecessary?) four-step approach:
I know I'm talking a lot about WebEdit, but most of the things I'm saying apply whatever software you're using.
There's a fifth step, which I don't do so often:
I'll admit that I don't always do all the steps — and sometimes I wish I had! It's like going down through the gears as you approach the lights when you're learning to drive. It's easy to think, “I don't need to bother with that — I'll go straight into… reverse”!
For all images you need to decide on a size; for JPEGs you also need to decide on the amount of compression. And there is no right answer.
JPEG is a “lossy” format — the greater the compression the more blurred the image becomes. If you're using your website to sell yourself as a graphic designer you will want high-definition images even though they may take a long time to download, but normally you want a compromise. Don't assume all your users will be on broadband. And of course when you're testing out your web page on your computer there's no downloading taking place — the page is displayed much faster than for anyone else.
Which takes more bytes — a GIF or a JPEG? It depends. If your original is a photo (colour or black & white) a JPEG will almost certainly be smaller; if it's line art a GIF will probably be smaller. I sometimes save the image in both formats and then compare file sizes and quality.
How big should your pictures be? Again there's no right answer. You don't know what size monitor people are using to view your website, or what resolution their monitor is set to, or how much of their screen area is being used to display your web page. Things may look great on your machine and terrible on someone else's: seeing your website on someone else's machine can be as much of a shock as hearing a recording of your voice!
You've probably seen websites where the page starts to display and then things jump around — maybe several times. This is often caused by the HTML not specifying the size of the image — so the browser makes a guess, formats the text, then downloads the picture, works out what size it is, and then has to adjust the layout. Simply by adding Width=120 Height=80 you can avoid this problem. WebEdit automatically inserts the values except in obscure cases. One case where you don't want to put the Image size in the HTML is where it's specified in the CSS, which I'll come to later. For instance you might have an image at the top of your menu which will appear on every page; much better to specify this in one CSS file than in all the HTML files.
<img src="images/House.jpg" alt="Our house" title="Our house" width="592" height="400">The standard says you should always give an alt tag, which is used if the image cannot be displayed — for instance the user has a text-only browser or a speaking browser. In IE this is displayed when you hover the mouse over the link. But Google Chrome and Firefox don't do this — the alt value is only displayed when images are turned off. So you need the same thing in a title tag, which is a drag but not a major problem — WebEdit does this for you automatically.
Notice that HTML uses a forward slash (because it comes from Unix) rather than the backslash used by DOS and Windows. Sometimes you might get away with a backslash, but don't bet on it!
The other use of the Width and Height elements is to display the image at a different size from its actual size — to expand or contract the picture. This is almost always a bad idea. Expanding the picture means that you lose clarity — you get the “jaggies”. And contracting the picture means that the user has to wait while a large picture is downloaded and then only sees a small one. I recommend that you resize the picture in your picture-editing software rather than getting the browser to do it. And one hint on that: once you've shrunk a photo you may find that it's not nearly so clear, but there's probably a “sharpen” option in your software, and using this in moderation can give a dramatic improvement.
You can put images on the right or left (or both) of the text. Here's an image on the left:
<Img Src="images/Mariniers1.jpg" Alt="Diagram 1" Align="left">To put in a margin so that the text isn't slap up against the side of the picture, add to the Img tag the attribute Style="Margin-right: 10px" which I will explain when I talk about CSS. The above code will put both paragraphs to the right of the image, but if you then add another image and text using the same approach you'll find that the second image is below the text for the first image and the second block of text is to the right of that. To my surprise, putting each section within a Div didn't help either. One way round it is to put in <hr> after each section, but that feels like cheating. What you need is
The single semicircle is the starting position of a man; double is a woman.
<P>So, the first diagram shows the man moving forward and to the left ---
<br clear=all>which breaks the flow and moves down until both margins are clear. You can also specify clear=left and clear=right, but I've never found a need for those. You can also use <P clear=all> on IE but (I then discovered) not on Firefox — so don't!
<a href="contact.htm">Contact us</a>“A” stands for “Anchor” (though I didn't know that until I looked it up). The part between the start and end tags (in this case “Contact us”) is what is displayed — the clickable text. Don't make this too small. Here's a bad way of doing it:
Click <a href="special.htm">here</a> for special offers.and here's a better approach:
See our <a href="special.htm">Special Offers</a> page.or even in bold:
See our <a href="special.htm"><b>Special Offers</b></a> page.though you can specify that all links are bold using CSS which I keep tantalising you with!
Just specifying a file name like this means that it's another page of your website in the same folder as the current page. If you're in folder AAA one level down from the root directory and you want to link to a file in folder BBB also one level down, you would use:
See our <a href="../BBB/special.htm"><b>Special Offers</b></a> page.where .. means “go up a level” — and don't forget that folder names (like file names) are case-sensitive on a Unix server.
Instead of (or in addition to) link text, you can have an image which the user can click to activate the link.
<a href="build.htm"><img src="images/Up.jpg" alt="Course Index" border="0"></a>which displays as…
One other quirk of Img which fooled me for many years: an ordinary image has no border, but an image within an A element has a 2-pixel border. Some users like this because your browser normally gives a visual indication when you hover over a link — the border changes colour. If you don't want a border you can specify Border=0 (as I have here) but this is deprecated, and it's considered better practice to specify Border: 0 in the CSS for the Img (not the A).
You can link to any page on the web by giving its full address — not forgetting the http:// at the start:
Look at all <a href="http://colinhume.com/bookings.htm">Colin Hume's Bookings</a>.which will display as:
You may find me appearing at <a href="http://www.halswaymanor.org.uk"To jump to a specific point in the current page or another page you need two things: the link and an anchor which specifies the target position. For instance, here's a link:
<a href="http://www.folkcamps.co.uk" target="FolkCamps">Folk Camps</a>, ---
<a href="#Cambridge">The Cambridge Hexagon</a>and here's the anchor:
<a id="Cambridge"></a>The # in the link says that the page has an anchor with the specified Id — you may see “name” rather than “Id” but that's now frowned upon. The anchor element doesn't need anything between the <a> and </a> tags — it's not there for someone to click. If you already have a heading, div or some other tag there, instead of
<a id="Cambridge"></a>you can simply say:
<h2>The Cambridge Hexagon</h2>
<h2 id="Cambridge">The Cambridge Hexagon</h2>If you want a link to the middle of a different page, you give both the page address and the link:
<a href="http://colinhume.com/inst6.htm#Cambridge">The Cambridge Hexagon</a>The A tag can be used for other things than web pages. You might want to link to an image:
<A Href="images/Map.jpg">Click here for a map</a>or display a small image which when clicked links to a big image:
<A Href="images/Big.jpg"><Img Src="images/Small.jpg" Alt="Click for larger image"></a>You can also use it for an email address:
<A Href="mailto:sales@Microsoft.com">Email Microsoft</A>This will open the user's default email program and create a blank email to the specified address. You can even give the email a subject:
<A Href="mailto:sales@Microsoft.com?Subject=Email via website">And you can use it to download a file to the user's machine. Here's one you've used yourself:
Send error report</A>
<a class="Btn" href="WebEditInstall.exe"> Download WebEdit </a>But there's a catch — the file extension needs to be registered on the server. I can download a file with an extension of .txt from my server, but not one with an extension of .abc — and it's nothing to do with whether the file type is known to the browser; it's at the server end.
As another example, you can use it for an MP3 file. The browser will probably ask the user whether he wants to open or save the file, and if he says “Open” the music will be downloaded and then played by the program associated with this file extension — probably Windows Media Player.
The disadvantage of having the menu down the left-hand side is that if you have a long page most of it will have wasted space in that column. A menu across the top just scrolls off as you scroll down.
I've used several ways of building and displaying menus, but here's the simplest, which you put at the start of the Body:
<Div Class=Menu>This is simply a division containing a number of links, and initially it will be displayed as a single line at the top of your web page:
<A href="/">Home</A> <A href="work.htm">Work</A> <A href="bookings.htm">Bookings</A>
The first / is a way of saying “the top-level folder”, in other words the page a user would reach if they entered your website address, so that will take you to index.htm. It will work on the server, but it won't work (in any browser) on your local drive, where there's no concept of a default HTML file — you'll probably get a list of all the files in the directory. It will however work in WebEdit provided you use the internal browser, so it's what I now use.
Later, the Class=Menu means that we can move it to the left-hand side of the page, give it a different background colour and make it change colour when the mouse is over it. Wait till the next session when I'll talk about Cascading Style Sheets which are all about layout and presentation. Just trust me — if you do your menu like this you won't have to change it when you start using CSS, and WebEdit gives you a way of updating all your pages when you decide to add a new menu item. And if your user has a browser which doesn't support CSS they will see it as you're now seeing it, which is not the end of the world — the most important thing is that they can still use the menu.
In fact there is a <Menu> tag.
<Menu>which displays as:
IE is well in the lead, with version 7 ahead of 6 (reversing their scores since the previous analysis). Firefox is certainly a browser I need to test my site on. Safari I can afford to ignore. Google Chrome hardly gets a mention, but I bet it will this time next year! There are about 50 others, most of which I haven't heard of, some of which are webbots (which crawl the web pulling out information for search engines such as Google) rather than real browsers.
You can download Firefox from www.firefox.com.
Add a Links page containing a couple of paragraphs of text and then a list containing links to my site, the “General Information” page of the Settlement site, and any other sites you fancy.
Add a menu to your Home page, check that the links work, then paste the menu into the other pages.
Try out the Server menu — if you don't have any web space yet, at least you can get familiar with the functions provided.
If you have some web space on a server, upload your files to it and display them in your browser.