Build your own Website: Session 3 
Creating the website structure on your local drive
If you're using a CMS it's probably all done on the server. But my approach is that you don't create or update a website on a server. You do it on your own machine, and then upload it to a server. Don't worry if you haven't yet decided to spend money on server space: you can still create and test a website on your own local drive.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 who 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:
- C:
- External
- Colin
- db
- logs
- wwwroot
- images
- Colin
- External
WebEdit and FTP
OK, so the page displays fine on the local machine. Now we need to upload it to the server. This is where WebEdit acts as an FTP (File Transfer Protocol) client. If you already have an FTP program that you're used to, by all means use it. If not, read on…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 Firefox:
- Click Tools and then Options.
- On the General tab click “Firefox will Use custom settings for history”.
- Tick the “Clear history when Firefox closes” line, and beside this click [Settings…].
- Tick “Cache”.
- Click OK until you're out.
Browsers and FTP
Another way of doing FTP (particularly if you are running on an Apple Mac and can't use WebEdit) is to use your browser as an FTP client. I haven't tried them all, but certainly in IE, Firefox and Chrome you can do the following: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:
- Create/modify the files on the local drive.
- Test locally.
- Upload the new/modified files.
- Test on the web.
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:
- Try it in another browser.
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”!
Images
The web is a graphical medium. You need some graphics on your site, whether they are full-colour photographs or two-colour line drawings. The standard format for photos is JPEG (with an extension of .jpeg or .jpg), and for line drawings is GIF (with an extension of .gif). Another popular one is PNG (Portable Network Graphics). There are now more modern ones which I'm not covering. Don't use a bitmap (.bmp) — IE supports these but other browsers don't, and you will also find they are enormous compared with GIFs and JPEGs. You can't use TIFF files in browsers either. You don't need to spend a fortune on Photoshop — the program that came with your scanner, printer or digital camera will do fine, or there are lots of good programs on the web which are free to download. It's much harder to find a bit-editing program.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!
Case-sensitivity
Windows is not case-sensitive with file names or folder names. A file can be referred to as Colin.JPG or colin.jpg and it's still the same file — you couldn't have both those names in the same folder. The same with folder names: External\Colin is the same as external\colin. But most web servers run on UNIX not Windows, which is case-sensitive — you can have a directory called Colin and another called colin. This means that you can get your site working perfectly on your machine, upload it to the server and find that some of the images don't display — because you called the file Colin.JPG but referred to it as colin.jpg. Or you upload a new version of a web page but find that the old version is still being displayed, and after much messing about — refreshing the display, closing your browser and reopening it, clearing the cached files, rebooting your machine — you discover that you've uploaded the new version as contact.htm when it should have been Contact.htm! Yes, I've been through all of this, so WebEdit checks the case as well as checking whether files exist. In fact I use a Windows server for my own site, since I want to run ASP and Dot.Net on the server (which I'm not going into here), but my clients may well use UNIX servers.Links
A link is something that you click on, and it takes you to another page (in your website or someone else's) or to a specified “anchor” point in the current page or some other page. Links are what the web is all about — but be disciplined. Some web pages have links to other pages sprayed all over them — but that's not showing the user the structure of the site and he may well end up confused.<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="https://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"
target="Halsway">Halsway Manor</a>,
<a href="http://www.folkcamps.co.uk" target="FolkCamps">Folk Camps</a>, ---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="#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>
<h2>The Cambridge Hexagon</h2>you can simply say:<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="https://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">
Send error report</A>And you can use it to download a file to the user's machine. Here's one you've used yourself:<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, such as Windows Media Player.
Menus
Most web sites have a menu system — usually down the left-hand side or across the top, occasionally on the right-hand side or somewhere else. This means that your users can't get lost — they can always find their way to the sections they want to see. Don't assume that your website structure is obvious — you've spent hours designing it, so of course it's obvious to you.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>
</Div>
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:
<LI><a href="/">Home</a></LI>
<LI><a href="work.htm">Work</a></LI>
<LI><a href="bookings.htm">Bookings</a></LI>
</Menu>
Browsers
I looked at the statistics for my website for ten days in April 2007 to see which browsers people were using to view my site and again for 22 days in November 2008.
|
|
OK, I know this is years out of date, but the principle of seeing what your users are using still applies.
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 firefox.com.
Web Hosting: Free and cheap
What ISP (Internet Service Provider) do you use? Whether it's a free service like Orange, where you just pay for the dial-up phone calls, or a Broadband service like BT or Tiscali where you pay a monthly fee, it's a fair bet that they will give you a chunk of web space to host your website. Some providers give you a .co.uk included in the price, so you can be joebloggs.co.uk. freeola.com will allow you to register any domain name and seems very cheap, though I haven't tried their service. If you want a .com address, search for “free website” in Google and you'll find three million links — not all of them offer free website hosting, but plenty do. You may find that they put a banner advert across the top of your site. You may find they create pages from standard templates and you can't actually write the HTML. You may find they go bust next week! Some will give you a very cheap offer for the first year and then the price goes up steeply, so get the facts first! Look around. One possibility is streamline.net who offer three months' free trial which sounds a good offer to me. If you don't do anything, at the end of three months you'll be switched to their Unlimited account at £40 a year, but you'd probably do better to opt for their Home account at £14 a year or £19 a year depending on which page you look at.The great thing about registering your own domain name is that you can transfer the website to another hosting company without your users noticing any difference — and the same with the corresponding email address.
Homework for this session:Add a Links page containing a couple of paragraphs of text and then a list containing links to my site, the “Publishers and Stockists” section of the “Resources” page of barndances.org.uk, 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.
