UPDAUPDATINGTING YOUR WEBSITE
Sam Partington
revised June 2004 Introduction I have written this booklet so that when I make a website for someone he or she will be CONTENTS able to keep it running and update it themselves. This booklet is primarily designed for Introduction...... 4 those with very little experience in updating websites, although it should be useful also for those with more experience. How does the Web Work? ...... 4 To ensure that it provides as much useful information as possible, this booklet assumes Why and When to Update ...... 5 that I have not given you any help or site-specific advice about editing. However, it is Software Packages Available ...... 7 my policy to provide such information – so don’t be surprised if you don’t need all of the information in this booklet. How to Update a Website...... 9 The Sam Solutions website has a specific section for those for whom I’ve made a Opening, Closing, Saving and Exiting ...... 10 website. You can find it at www.samsolutions.co.uk/update-etc.htm Creating a New Page ...... 10 Don’t forget that I’m available to help out with website updating or any other Internet Renaming or Deleting a Page ...... 11 / computer issues for just £7.00 per hour. If you like, I can look over the updates you’ve done on your site and help you improve your updating skills further. Page Settings ...... 11 I would be very grateful to receive any comments or queries you might have about this Paragraph Spacing ...... 12 booklet. Please feel free to e-mail me on [email protected] . Links ...... 13 Lines ...... 15 How does the Web Work? Images ...... 15 It seems that everywhere we go nowadays we are bombarded with Internet related Tables ...... 17 information. Website addresses are appearing on everything from billboards to packets of cornflakes and from radio commercials to aeroplanes. But what exactly is the web? Lists ...... 18 What’s the Internet? Is there a difference? Do you have to be a computer-nerd to under- Text Settings ...... 19 stand the answers? Forms...... 19 I can start by assuring you that the answer to the last question is ‘no’. The basics of the Internet and the web are really very simple. To put it in a nutshell, the Internet is Frames ...... 20 essentially a huge number of linked networks of computers throughout the world. These Design Tips ...... 21 computers are connected by phone-lines. The ‘World Wide Web’ is the actual web- pages stored on the computers that make up the Internet. (See – easy!) Browser and Screen Considerations ...... 21 When you connect to the Internet you will almost certainly access it via your ‘Internet More Advanced Elements ...... 22 Service Provider’ [ISP]. ISPs in the UK include LineOne , AOL and Freeserve . When Publicise your Updates...... 23 you connect to the Internet via an ISP your computer will begin by calling the ISP’s computer using your modem and phone line. A connection between the two computers Domain-Names and Hosting ...... 23 is set up (hopefully) and then all information which you get from the web is sent to you Uploading your Website ...... 25 via your ISP’s computer. When you request a page (by clicking on a link, typing in an address or whatever) that request is passed through your ISP’s computer and will Website Promotion ...... 26 eventually arrive at the computer where the site you are looking at is stored. That Glossary ...... 30 computer will then send the information back to you. Computers which are permanently 4 connected to the Internet and which store websites are called ‘servers’ (see the Domains The first (and most obvious) reason is that unless you update your website the inform- and Hosting section later on). ation on it is going to become out-of-date and inaccurate. Another important reason is that if the content of a website changes regularly then the website will be more Although you might not think it, all basic webpages are made up of plain text (they’re interesting for its visitors. Visitors are far more likely to return to a site which will have sent as binary numbers but that’s another story). This text is written in what is called new or updated content each time they visit and are more likely to trust the information Hypertext Markup Language [HTML] and you can see it by right-clicking on a webpage they find if they can see that a site has been updated. in your browser and selecting ‘View Source’ or alternatively selecting ‘view source’ from the ‘View’ menu if you’re using Netscape Navigator. A more technical reason for updating is that some search-engines (see the section on site TIP: Viewing the source of a page is a useful thing to do if you want to find out how a fancy coding promotion below) will give your page a higher ranking if it has been recently updated. trick has been done. A higher ranking means that your site will appear nearer the top of the list when someone searches for it. Once this text gets to your browser (such as Internet Now you know that updating is important you’ll be wondering how this all relates to Explorer or Netscape you. When should you update your site? Navigator ) the browser reads The obvious times when you will need to update your site are occasions when inform- the text and interprets each bit ation has become out-of-date. For example, you would alter information when a product to discover how to present and or service’s price or details change, when a new product is added to your stock or when lay out the page. an old product is no longer for sale. Images, sounds and However, you know that accuracy is not the only reason for updating. Keeping your multimedia are stored visitors interested is also very important. I would recommend making some sort of separately from the page, and update to your site at least once a week. Remember that some updates are very quick the HTML simply contains and simple and it should not be a problem to make a simple update every few days. references to them so that the browser can find them and put Updating need not involve your spending hours creating entire new sections for your them into the finished page. site. There are many simple ways to keep your site up-to-date and interesting: the source code for a page (viewed in Notepad ) Websites are basically a C If your site has a links page or similar, spend a few minutes finding a new site to collection of linked pages and images / multimedia. link to (and check that your current links are still correct). C If your site has a resources page, keep your eyes open for useful resources to There. That wasn’t so painful after all. If you want to find out more about how the web include or link to. works, you can visit The WhatIs description at http://whatis.techtarget.com C Have a tip of the day/week (or similar) relating to your business. /definition/0,289893,sid9_gci212370,00.html . You can find out about the history of the C Allow your visitors to send you content for the site (for example, product Internet at http://library.thinkquest.org/11373/history.html reviews, comments or tips). The rest of this booklet will also explain more about a number of the above concepts C If you have a Frequently Asked Questions [FAQ] page then add a new question including HTML, servers and browsers. to it. You should certainly add a new question and answer to it if someone e- mails you with a relevant query not already covered. C Include occasional articles on your area of business. Why and When to Update The above is just a small selection of the many ways in which you can keep your site A common misconception is that once you have a website up-and-running you can updated. It is likely that you will decide that you want to do some more major updates simply sit back and watch the visitors arrive. Unfortunately this is not the case. As as well as just minor changes. For example, you may decide to add a new page to your more and more websites are created updating becomes more and more important. There site. It is worth considering more major upgrades if they will make your site more are a number of reasons for this: interesting.
5 6 Read on to find out how you can begin updating your site. For example, you could say that Microsoft Publisher was a WYSIWYG Desktop Publishing program, as a page you print with Publisher will generally look like the page displayed on screen. Software Packages Available WYSIWYG editors generally One option is of course to code your webpages yourself. However, there are many look and work in a similar way to packages which will create your HTML code for you. I may have already helped you that of your Word Processor or to choose a web-editing package but if not, or if you’d like to try out some others, then Desktop Publishing program, and the following information may be helpful. you edit the pages in a similar way. When you insert an Website creation packages fall into two main categories: HTML editors and WYSIWYG element (a line, a link, a table or editors (another bizarre web acronym!). HTML editors are programs which help you whatever) it will appear on the write the HTML code itself. When running an HTML editor, the main section of the screen as it will appear when you screen will contain the code for your page. The text may be colour-coded to help you view the page in a web browser. understand it. When using a WYSIWYG editor The editor will allow you to select various elements which you would like to put into the the main part of the screen is page. You will generally select these elements from a menu or similar. When you taken up by a view of your page. select an element (such as a table) you will be prompted to select various attributes for WYSIWYG programs available the site navigation view from Microsoft FrontPage the element (with a table the options would probably include border thickness, number include: of rows and columns and so on). Once you’ve selected your options, the code for the selected element will be put into the page. You can of course enter your own code or C Dreamweaver: www.macromedia.com/software/dreamweaver modify code which the program inserts for you. C FrontPage: www.microsoft.com/frontpage C AOLPress: www.daviestrek.com/software/aolpress (free) HTML editing packages available include: C Net Objects Fusion: www.netobjects.com C HotDog Pro (shareware): http://www.sausage.com You may find that your computer already has FrontPage Express (a cut-down version C Coffee Cup HTML editor (shareware): http://www.coffeecup.com of Microsoft FrontPage) installed, as this comes free with some versions of Microsoft C HTML-Kit: http://www.chami.com/html-kit Office and Internet Explorer . The Netscape web-browser includes Netscape HTML editors make Communicator, which is another useful WYSIWYG editor. editing webpages a lot A useful resource when comparing WYSIWYG editors is Webmonkey’s review at easier than coding by hand. http://hotwired.lycos.com/webmonkey/01/39/index4a.html . However, it was written in However, WYSIWYG 2001 and so will not refer to the newest versions of some software. editors take it that one step further. WYSIWYG stands for What You See Is What You Get and, put simply, means that what you see on the screen is what the finished product will look like. This term does not only apply to webpage creation. a screenshot from the WYSIWYG package DreamWeaver
7 8 Some website The important thing is that you will know what is possible and will understand any editors options you are given by your editor. Most programs will have keyboard shortcut or (especially toolbar icons which can be used in place of the menu choices I mention. WYSI WYG Before explaining the elements you may want to know a couple of very basic things programs) have about HTML. Every element and layout instruction in HTML is written as a tag . These a number of tags are always enclosed by tag which inserts a paragraph- Internet (see section on Uploading below). Other facilities which may be incorporated break. HTML is not case-sensitive. into a package include automatic link-editing (so that when you rename a page all pages If you would like to learn more about HTML, there are a number of tutorials available: which link to it will alter to take this into account), automatic navigation-bar creation and so on. C HTML goodies: http://htmlgoodies.earthweb.com/tutors C Webmonkey: www.webmonkey.com/authoring/html_basics Many Word Processing and Desktop Publishing [DTP] packages such as WordPerfect , C HTML tutorials by John C. Gilson: http://www.bfree.on.ca/HTML MS Word and Publisher allow you to export as a web-page. However, I strongly C Dave’s HTML guide: http://www.davesite.com/webstation/html recommend using a specific website creation program, as a wordprocessor or DTP package may spoil the code I have written for your site. To save in HTML format, you Now, on to the basics: will probably need either to select Export as HTML (or similar) from the File menu, or select HTML as the file type from the Save As dialogue box (see above). However, this varies from package to package. Opening, Closing, Saving and Exiting More Advanced Tip: Word Processing and Desktop Publishing packages usually export pages with If you can open, close and save documents in your Word Processor then you’ll be able a lot of unnecessary code which slows down page-loading and is generally unnecessary. If you have to do the same with a webpage editor. You will find the open, close and save commands basic knowledge of HTML, open the page in an HTML editor or notepad and remove the unnecessary in the ‘file’ menu and they will almost certainly be code. (I also recommend doing this for pages created by a Web-Authoring package as they often include unnecessary code too.) For example, Word will usually put XML code into your page which represented by icons on the toolbar. In the same will contain information about the document (creation date etc) but will not be displayed on screen. way, you can cut, copy and paste using the I recommend you remove this. However, doing this is not essential. commands from the ‘edit’ menu or the toolbar icons. More information on editing code yourself can be found in the How to Update section (See image) of this booklet. Your editor may have a ‘Save All’ option. This will save all open pages. How to Update a Website If you are using your website editor’s site-management view (or similar) then this may present you with a list of files in your website. You can open these by double clicking In the following section I have decided that rather than giving you a basic tutorial for on them. each of the main website editors I will instead show you what can be done and a basic idea of how to do it. This will enable you to pick up and use almost any website editing The Exit option will be found in the ‘File’ menu and package easily. The suggestions on how to perform each operation may not work in you can also exit by clicking on the uppermost X icon every editor but should give you a basic idea of what to do. clicking the ‘HTML’ tab shows you the in the top right corner of the window. page’s code. 9 10 If you use a WYSIWYG editor then it will have a ‘view HTML’ or ‘View Source’ or changing! Your website editor may have a facility to show you which pages link to option. This allows you to see the code for your page and will normally be found in the which others, or which pages contain ‘broken’ (non-working) links. ‘View’ menu. Alternatively, some web-browsers allow you to access the code by clicking on a tab. Page Settings To access the settings for a page open in a WYSIWYG editor you will generally simply Creating a New Page need to right-click on the page and select ‘Page Properties’ or similar. Alternatively, Creating a new page will usually simply be a matter of selecting ‘New’ from the ‘File’ you may access the settings box by selecting ‘Page Settings’ from the ‘File’ or ‘Format’ menu. If you’re working in a page-editor then this will present you with a blank page menu. If editing the code by hand, these elements will be changed by editing the which you can then save. If you’re working with the site-management part of your attributes in the
11 12 You will also be able to alter the standard text colour for your page. You will be able www.something.com. You could be more specific and link to http:// to highlight certain sections of text within your page and change their colour to www.something.com/stuff/business/europe.htm. Please note that links never end with something different so do not worry that by selecting a colour for text in your page a full stop (.) Therefore the address for Sam Solutions would be settings you will then not able to change text colour later on. “http://www.samsolutions.co.uk” and not “http://www.samsolutions.co.uk.” If you ever Tip: Make sure that your links stand out from the rest of your text so that users know where to click. see a full stop at the end of any address then just assume that it is marking the end of a sentence. You should not leave off the http:// at the beginning of addresses or the link Tip: If you want to change the default colour for text on your page, do not select all the text in your editor and change the colour that way. That will produce unnecessary code and lead to problems will not work. later. Change the standard text colour through page settings instead To create a link in your webpage you begin by selecting the text or image which you You may also have the option to set a sound or music clip which plays when your page want to make into a link. Select the text either by clicking before it and dragging the loads. Bear in mind that these clips can be quite large and can drastically slow down mouse pointer (with the left button held down) so that the entire section of text is page-loading. I would also strongly advise against including sound or music which selected (blocked) or by holding down the Shift key and using the arrow keys. To select plays when a page loads as this annoys many users and many people may think that your an image in a WYSIWYG editor simply click on it (you may need to double click). site is unprofessional if it uses these. You could instead provide a link to the sound or Once the thing which you want to make into a link is selected you may be able to right- music clip so that the user can play it if they wish but not if they don’t. click on it and select ‘Insert Hyperlink’ or similar. However, in some editors you may need to select ‘Hyperlink’ from the ‘Edit’ or the ‘Insert’ menu. Once you have done this you will be prompted to specify the place you want to link to. Either type an address or Paragraph Spacing page name or use the ‘browse’ button or similar. The default paragraph spacing on the web is 1.5 lines (as in this booklet). However, you Another type of link is called an anchor . You may hear these referred to as ‘bookmarks’ can have single paragraph spacing (
tag). This is often accomplished by holding although I recommend using the term anchor as it avoids confusion. An anchor link is down the [Shift] key before pressing [Enter] or by selecting ‘Line Break’ or similar from a link to a particular place on a web page. When the user clicks on it, they will be taken the ‘Insert’ menu. to the relevant part of the page. To create an anchor link you first need to place an anchor (the anchor-link destination) Links on your page. To do this simply go the to the section of you page where you want to put an anchor and select ‘anchor’ or ‘bookmark’ from the Insert menu (or possibly from the Links are what differentiate Hypertext (the text in webpages) from ordinary text as they Edit menu). You will then be prompted to give your anchor a name. mean that by clicking on a piece of text or an image you can be taken to a different document or a different part of the page. You then create a hyperlink as normal but when it comes to entering an address you instead enter the anchor name prefixed by a hash [#] (see illustration). So to link to the There are two types of links: local links and external links. Local links link to a page anchor called ‘detail’ I would enter #detail as the address. Some editors will allow you in your own website. So if you had a page called one.htm and you wanted to link to it to select the anchor name from a list of all anchors on the current page or offer a from another page in the same folder, you would only need to have ‘one.htm’ in the separate box where you can type the anchor name. If you are entering the anchor name link-address. If the link was in a folder called ‘business’ and that folder was a sub-folder into a box specifically called ‘anchor’ or similar then you will almost certainly not need of the folder that the page you were putting the link on was in, the link would say the #. Try it and see. ‘business/one.htm’. However, with a webpage editor you do not need to worry about that. The editor will let you browse around your folders until you find the file you want to link to and will then make the link for you. External links link to a page on a website other than your own. For example, you may want to have a link on your website to http://www.samsolutions.co.uk. These links are created in the same way as local links except that rather than browsing around for the file you will type in its address. You are not restricted to simply entering an http://
13 14 You can link to an anchor on For images, GIFs and JPEGs (more info in the How to Update section) can be opened another page by entering the in every browser except for the text-only ones. BMP files are also fairly standard but page name or address people using a Mac or an operating system other than Windows may have trouble. PNG followed by a # and the (see below) is becoming a more popular format. anchor name. For example, If offering downloads in a format for which your users may not have the program then to link to the anchor it is polite to offer a link to a place where that program or an appropriate viewer can be ‘section2’ on the page downloaded. For example, viewers for Microsoft office documents are available at one.htm I would enter the http://office.microsoft.com/Assistance/9798/viewerscvt.aspx address as one.htm#section2 . linking to an anchor in FrontPage – note the #anchor in Tip: Don’t forget that, unless they know a specific page’s address, the only way visitors can the ‘URL’ box and the fact that ‘anchor’ is selected from If you want to make a file navigate your site is by following links. You should therefore assume that if a page isn’t linked to the ‘Bookmark’ list. (anchor is the anchor’s name in this by another page, users don’t know it exists. It is also good practice to provide sufficient links to available for download then case) it is often a simple matter of enable your visitor to view your site without having to constantly use their ‘back’ button. putting a link to that file on your page. If you are linking to something which the browser can’t open, simply clicking on that link will give the user the option to Lines download the file. Otherwise, if you are linking to something which the browser can open, you will need to ask your users to right-click on the link to it and select the Horizontal Lines (
tag) are very useful for breaking up text. Your editor may relevant ‘Save’ option. allow you to specify the width, alignment and thickness (size) of the line. Like many Bear in mind that not all users have the same software. Therefore you should make sure HTML elements, the width of the line can be as a percentage of the page-width or as an that they’ll be able to open your downloads. One way to help with this is to provide a absolute value in pixels. A percentage width is entered simply by entering a number link to a download of a program which can open the file. However, it is also worth followed by a % (e.g. 50%) whereas entering a number on its own will give the line a considering using a standard format for your file. The following are a few standard file- width of that number in pixels. types (some of which can be embedded within a webpage or displayed in a browser): The default setting is 100% width, centre-alignment and a thickness of 1.
doesn’t ASCII text (.txt) can be opened by anyone with notepad, a browser or even with DOS’ built-in editor. have a closing tag. Every computer can read .txt files and this is a good format for plain text. Rich Text Files (.rtf) are a common standard for exchanging documents as they support bold, italic and almost everything else you’ll need for simple formatting. Windows users can open rtf files with Wordpad Images or their Word Processor. Images have the power to enhance your page’s look but should be used with care. When To save a document as .txt or .rtf it is simply a matter of selecting that file-type from the using images, bear in mind that they will take time to load, especially for users with drop-down list entitled ‘File Type’ or similar when saving a document with your word slower modems or connections. Also bear in mind that some users use text-only processor. Bear in mind that with .txt all formatting will be lost and with .rtf you may browsers, and some browse with images turned off. Therefore I recommend that you do lose advanced formatting. not rely solely on images (buttons) for navigation, and that you provide textual If you want to offer a document which has more advanced formatting than RTF allows hyperlinks also. then you could offer it as a Word document as many people have Microsoft Word. Images on the web come in two main formats: GIF ( Graphics Interchange Format ) and However, you should ideally offer it in other formats (e.g. WordPerfect) as well. One JPEG/JPG ( Joint Picture Export Group ). Standard GIF files can have up to 256 colours, obvious solution to the multiple formats problem is simply to offer the document as a one of which can be set as transparent. This makes them ideal for use as buttons and web page! simple pictures. However, if you would like photo-quality images displayed on your Adobe’s Portable Document Format (.pdf) is quickly gaining popularity. Visit website, you should use JPG files as these can contain up to 16 million colours. Bear www.adobe.co.uk/epaper . for more information. in mind that the more colours an image has, the bigger the file will be. With simple GIF files, you can often set them to have only 64 colours (or perhaps even fewer) without any
15 16 loss of quality. As well as this, you should remember that some people’s screens will can set the alignment of the entire table and give it a caption (the caption will appear just only be able to, or set up to display 256 colours or less. Some browser and screen above the table). settings will mean that your images can only be displayed with an even smaller number You can also set cell-padding and cell-spacing. To set these you will probably need of colours. either to right-click on the table and select ‘Format Table’ or select ‘Format’ or ‘Format TIP: When altering the number of colours in an image, reduce the number in stages. So if your image Table’ from the ‘Table’ or ‘Format’ menu. Cell-padding increases the size of the cells’ is currently set to 256 colours and you think that you can get away with 32, first set the number of borders whereas cell-spacing adds space inside the margin of your cells, pushing the colours to 128, then 64 and then 32. This will result in a clearer, better quality image. contents towards the middle of the cell. TIP: If your images are designed to be displayed on screen, your can use a graphics package to reduce their resolution (the number of dots per inch) to 72dpi without any loss of quality. Experiment For individual columns you can set width (you may have to select all cells in the column with even lower resolutions to reduce file size. and then use a cell-width option) and you may be able to set the height of rows. You When using images, I recommend that you include an alternative text representation (the can also set the alignment of whole rows. Doing this will give every cell in the row the alt=“text here” attribute). This text will be displayed whilst the image is loading, and alignment you select. if the user has images turned off, they will see this text. Also, in some browsers, the user Individual cells have a few special settings. You may come across colspan and rowspan. will see this text in a little yellow box (tooltip) when they move their mouse pointer over Colspan allows the cell to span across more than one column whereas rowspan spans the the image. Text-to-speech programs for the blind also read the alt text to help interpret cell across more than one row: images. Your HTML editor should let you specify this text. I also recommend that you specify the height and width of your image to speed up the loading of your page. Cell A has a Colspan of 2:
TIP: If you’d like your image to be displayed at a size of 100 x 100 pixels but your image is currently CELL A 200 x 200 pixels DO NOT set the height and width to 100 x 100 in your webpage editor. If you do, the full 200 x 200 image will be loaded and then resized by the browser. This sort of thing drastically slows down your page-loading. Instead, you should resize the image in your picture editor. GIF images can be animated and many paint programs will allow you to created animated GIFs. Alternatively, there specific programs for animating GIFs. However, although animations might look pretty they should be used with great care. Animations Cell A has a Rowspan of 2: do slow down page-loading and are thought of as unprofessional by many users.
There are other ways of incorporating more professional animation into your page. See CELL A the Advanced Elements section below. PNG (Portable Network Graphics) is a graphics format which is gradually becoming more widely used and supported. For a quite technical overview of PNG visit http:// www.w3c.org/Graphics/PNG Your editor may allow you to edit your table in this way by selecting two or more cells and right-clicking and then selecting ‘Merge Cells’ or ‘Join Cells’. Alternatively you Tables may find this option in the ‘Table’ menu. Tables in HTML work in basically the same way as tables in a word-processed document. To insert a table you may need to select ‘Table’ from the ‘Insert’ menu, or THIS CELL SPANS TWO ROWS AND TWO COLUMNS alternatively your editor may have a separate ‘Table’ menu which will have an ‘Create Table’ (or similar) option. There are a number of attributes which you can edit for your table: For the table as a whole you can change the border-width and table size (a percentage or absolute size). You can also set the background colour and image if you wish. You
17 18 In the same way that you can join or merge cells you can also split them. Try selecting select ‘Font’ or ‘Format Font’ from the ‘Format’ menu, or right-click on it and select the cell you want to split and either right-clicking and selecting ‘Split Cell’ or else ‘Properties’, ‘Format Font’ or similar. selecting ‘Split Cell’ from the ‘Table’ menu. You can edit the following properties of text: bold, italic, underline, strikeout, subscript TIP: Wise use of column and row spanning can reduce the amount of code in your page thus and superscript font and alignment. decreasing load time. TIP: If text is underlined, your users may expect it to be a hyperlink. For this reason, underlined text For individual cells you can also set vertical and horizontal alignment of cell contents. is uncommon on the web. Text can be made to blink but users don’t like this. TIP: You can set cells as Header Cells (
Sample Definition List Forms The definition is explained above Next item 99% of the time forms are used in conjunction with And here is its definition some other element which will usually perform Item name goes here calculations based on what you enter or which will Definition goes here e-mail the form’s contents to a specified e-mail address. Forms can contain the following elements: Single Line Input Boxes (you can set their width in Text Settings characters), lists, radio-buttons (with radio-buttons the Whilst you can set the text-settings as part of the page-settings, you can also set the user can chose only one of the options), check-boxes, properties of individual sections of text. To edit properties of text simply select it and
19 20 text area (you can set the width and height), drop-down lists, pick-lists, submit-button, An alternative way to create a navigation-bar is to use tables, and to use the left or reset-button. rightmost column as a navigation bar. The submit-button performs whatever action is associated with the form, the reset-button TIP: For a number of HTML elements (images, form field and so on) you will be given the option clears all fields in the form. You can also have general-purpose buttons (newer browsers to give them a name. This is only necessary if you are going to be using them with Javascript (see below) and so you can probably ignore it. However, if you are using an HTML editor you may find only). it useful to name elements so that you can understand the layout of your page better. Elements’ names are not displayed when the page is viewed. TIP: What’s the difference between a pick list and a drop down list? A drop down list is a list of items which is displayed as a single option with a downward arrow beside it which expands the list TIP: When editing HTML you will have the option to insert comments which will be ignored by the to full view. A pick-list (less common) displays all options on-screen at the same time. browser but which could be useful to help you (and any of your visitors who take a look at your page source) understand your code. Use them if you wish. It’s up to you.
Frames Design Tips Have you ever seen a site which has a navigation-bar on one side C Don’t go overboard with multimedia and large graphics. Make sure that your site which remains constant as the is usable by someone using a text-only browser (see below). main page changes? This is C Use tables to lay out content in a presentable form. Don’t forget that you can set accomplished using frames . the border to 0 which is useful when using tables for layout. Frames split your browser C Try to make your site easy on the eye. Break up longer pieces of text with lines, window into two or more indents and sections. sections and allow you to create C Avoid making all your text bold or all in UPPERCASE, as this will make it a navigation-bars and so on. When strain to read. However, your text should stand out from your background. using frames, bear in mind that a C Don’t forget to set a background colour for your pages, even if you want a white few users will not have a browser background. Otherwise the browser default will be used, which will make your which supports them. Most web- website look different from what you intend. page editors should allow you to C www.netmechanic.com will look over a page in your site (and offer software to create a page which will be seen this site uses frames on the left and at the bottom of the screen. check the whole site) and tell you how you can improve it by adding or removing by users without frames (and by code, optimizing images and so on. search-engines!). This is done using the
21 22 AnyBrowser.com’s Site Viewer: www.anybrowser.com/siteviewer.html shows you what VBScript – Like Javascript but only works in Internet Explorer. your site will look like in a number of browsers. CGI Scripts – Common Gateway Interface (CGI) scripts are what powers most search- It is also definitely worth looking at your site with different screen-settings (number of engines. They also allow visitor-tracking, guestbooks and other useful utilities. If your colours and resolution). To change your screen-settings (in Windows) right-click on site is stored in the free space which came with your Internet account, it will probably your desktop and select ‘Properties’. Next click on the tab entitled ‘Settings’. You can have some free scripts which you can use. However, you are unlikely to be able to use then change the number of colours using the drop-down list-box entitled ‘Color Palette’ any scripts apart from the ones they supply. Some other webspace providers will allow and change your resolution using the ‘Desktop Area’ slider. use of any scripts you want. (In technical terms this means you have access to the CGI bin). CGI scripts are usually written in either Perl or C/C++. If your site looks odd with different screen-settings try and alter how it looks. The most common resolution is 800 x 600 but bear in mind that a significant number of users use Very Advanced Tip: On UNIX Servers (mainly), you may find that when you try to run your script, an alternative. you are redirected to the homepage of your webhost (or similar). This is often because the file’s permission settings (i.e. who can access it) are incorrectly set. These permissions can to be changed TIP: If you have an Apple Mac or someone you know does, try and look at your site using that too. through many FTP programs (see the section on File Transfer below). Try right-clicking on the file You may notice some differences. you want to alter, or looking for a ‘Commands’ menu or similar. Visit http://seedesigns.com/ dev/tutorials/chmod.shtml for information on how to change the permission settings (CHMOD) file. Generally, but certainly not always, you will need to CHMOD your script files (usually ending in .cgi or .pl) to 755. The help-file for your script should include information on what the script will need More Advanced Elements to be CHMODed Although this tip is advanced, I have included it as I have found that permission settings are one of the main problems faced by users attempting to run CGI Scripts on a UNIX server. Websites don’t have to stop at simple HTML. If you’re feeling brave, you can try some of these features: Download CGI scripts from http://www.cgi-resources.com (this site also includes CGI tutorials). CGI scripts are supported by most modern browsers. Cascading Style Sheets allow greater control over how your page looks. Visit http:// www.htmlhelp.com/reference/css for information on how to use them, or look in the FrontPage extensions – The website-creation package Microsoft Frontpage has some Help Files for your webpage-editor. special features such as forums and search tools which can be incorporated into your website. However, these require your webspace-provider to allow the use of FrontPage Javascript – Most modern browsers support Javascript. It allows greater control over Extensions and I would recommend using CGI scripts (above) instead. the browser window and display, as well as form-validation and more. For information on Javascript visit Webmonkey ( www.webmonkey.com ), www.javascriptsource.com or TIP: Don’t include fancy coding tricks just for the sake of it. Everything you include should be there for a reason www.javascript.com The second two sites listed here offer libraries of sample code which you can use. To find out which browsers support which technologies, take a look at the browser table at http://hotwired.lycos.com/webmonkey/reference/browser_chart Java – Contrary to popular belief, Java and Javascript are not the same. Java is a language which allows you to have a window on your page which will have a program (applet) inside it. These applets are used for mini online-games, fancy special-effects Publicise your Updates and so on. However, they do take time to load, and cannot be seen by everyone. Once you’ve spent time updating your site it is important to let your visitors know of the Some multimedia packages (such as Dazzler for example) will allow you to export as changes. On your first page (or a separate page if you wish) you may want to have a a Java applet, or you can buy a specific tool (or write java code by hand). Java is “What’s New” section where you can list the latest updates (perhaps including the date supported by most modern browsers. of alteration). This will show your customers that your site is updated regularly. You Flash/Shockwave – These two technologies are used by many sites to add special effects, may also want to write (NEW) or similar after links to new sections. (Note that in the animations and so on. The user is required to download a plugin (browser add-on) to example above I wrote (NEW) in smaller font size so that it is not too dominating.) view them. They can be incorporated seamlessly into your site, allowing for fancy effects and so on. You will need a specific program such as Director to create these. As with Java, bear in mind that they take time to load and cannot be seen by everyone. Domain-Names and Hosting
23 24 If you would like a domain-name (such as www.yourbusiness.co.uk) for your site then address-bar thus making your site appear more professional. This means that you need I will set one up for your when creating your site. However, if at a later date your not get new webspace. If you want to get a redirection service then I recommend this decide to get a domain-name then give this section a read. kind as your user may not notice that you are hosted on a free site as your domain-name will still be visible in their browser window. Easyspace gives you an example of this There are a number of domain name endings (such as .com and .co.uk) available and if you’re still confused about the difference between these two methods. these are known as top level domains [tlds]. There are various advantages for each but if you are running a UK business I would recommend .co.uk as this is specifically for The third option is to get domain-name webspace which will allow you to point your UK sites. .co.uk tlds are also cheaper than .coms. You can register any number of domain at it properly (no redirection required). This will cost more but will also allow domain names, and so you could have yourbusiness.com and yourbusiness.co.uk – extra options such as more space, probably the option to use CGI Scripts (see above) and though there is of course an additional cost involved. so on. If you have enough money then I would recommend this option. TIP: Why is it worth registering a domain? There are several reasons why you might want to register The domain name registration sites above also offer webspace, as do other sites. Visit one. It first of all looks more professional than an “ordinary” address such as http:// http://www.hostspot.com or http://www.hostindex.com for links to a large number of sites.com/users/you/ and, secondly, is easier to remember. Since a domain is seen as more professional users are more likely to trust your company and think highly of you if you have one. webspace providers. TIP: Why not register more than one domain? If you’ve got the money you might choose to register more than one domain so that you can use a different domain depending on where you’re advertising. For example, if you ran a pet shop you might register www.lotsofpets.com as your normal address but Uploading your Website – putting your files on the web. also register www.lotsoffish.com which you could use when advertising in fish-keeping magazines or whatever. More domains will also increase the chances of a user typing in your domain when they Once your website is created and you have found some web-space to put it in you will want to find what you offer. For example, if I was looking for information on learning French I might need to send the files there. The main way of doing this is to use a File Transfer try www.learnfrench.co.uk. If a language-tuition company had registered this domain then it could forward me on to that company’s site resulting in more visitors for that site. Protocol [FTP] Program. These programs generally have a Windows Explorer-like interface, allowing you to drag-and-drop files from your computer into your webspace. A number of sites will register a domain-name for you. A couple worth noting are I recommend FTP Commander ( www.internet-soft.com/ftpcomm.htm ) as it is easy to use www.a-q.co.uk and www.easyspace.co.uk . Usually, you pay for two years registration and free. CuteFTP ( www.cuteftp.com/cuteftp ) is another possible program. A free up-front and then an annual charge. However, www.register.com offers variable-length thirty-day trial is available, after which time you have to pay and register your copy. pricing-plans and discounts. If you also wish to have [email protected] Another program to consider is WS_FTP ( www.ipswitch.com ). The Limited Edition you may need to pay extra. version of this (WS_FTP LE) is free to use for personal use only (full details are If you do have [email protected] then different hosts will offer you available on the site). Alternatively, you could purchase the Pro version (which includes different options. With some you will get any e-mail sent to any address ending in more features). Other FTP programs can be found at www.download.com, @yoursite.co.uk forwarded to you. Some will offer e-mail boxes which you will access www.shareware.com or www.tucows.com to read your e-mail (in the same way that you access your current e-mail account). Your webhost will probably suggest an FTP program which they recommend using for All sites online need to be put into some accessible webspace so that people can visit uploading your files. Take a look at their FAQs (Frequently Asked Questions) or them. If you are upgrading from your current site-address to a domain-name then there Resources Area and see what you can find. On AOL, you can visit Keyword FTP and are a number of options available regarding webspace: select ‘Go direct to your FTP space’ to upload to your members.aol.com directory. Alternatively, you can use AOL’s FTP program to upload files to another webhosting Redirection: A redirection service costs about £7.00 pa from Easyspace and means that account. if someone types in your domain-name then they will be forwarded to your current site- address (the address of which will appear in their address bar). This means that you can keep your current webspace. Cloaked Redirection: A number of hosts offer this service. ( Easyspace charges about £12.00 pa ). This means that if someone types in your domain-name then they will be forwarded to your current site-address but the domain-name address will remain in their
25 26 If I have already created a Search-Engines website for you then I will If I’ve created a site for you I will already have submitted it to search-engines. probably have already down- However, this section is here for your interest and also if you decide to resubmit your loaded an FTP program onto site. your computer which you can use. E-mail me on sam@ TIP: Whilst it is worth resubmitting your site to search engines I recommend only resubmitting about samsolutions.com if you can’t once every five months as it takes some time to be added and if you resubmit too often then the search engine may ban your site from its listings. remember whether I did or how to use it and I’ll help you TIP: For information on search engines visit www.searchenginewatch.com out. There are two main types of search-engine; those which get their listings from humans and those which get their listings from ‘crawlers’ (robots). Human-based search engines Visit www.ftpplanet.com for use real people to categorise (and sometimes rate) sites whereas Crawler search engines information on FTP programs use automatic robots to search through a large number of sites looking for keywords. and other useful information and resources regarding file a screenshot from WS_FTP LE There are many services (often free) online which will submit your site address to transfer. It’s worth noting that multiple search engines. Try www.thewebmasters.bc.ca or www.usubmit.com this site is run by the makers of WS_FTP and so is a little biased towards that program. However, I recommend that you submit your site by hand. You may want to consider the following search engines: Some webhosts offer other methods of getting your files into their space. These include sending files by e-mail, uploading through your browser, or uploading using Microsoft AltaVista - www.altavista.com Northern Light - www.northernlight.com Google - www.google.co.uk GO / Infoseek - www.infoseek.com FrontPage’s extensions. The webhost directory freewebspace.net has information on all Hotbot - www.hotbot.com methods which your host may offer, including all those outlined above, at Lycos - www.lycos.co.uk www.freewebspace.net/help/upload.shtml . However, I recommend using FTP. Excite - www.excite.com FAST - www.alltheweb.com Teoma - www.directhit.com
Website Promotion Look for a button or hyperlink saying ‘Add URL’ (or similar). You will undoubtedly Paid-for adverts notice that I have not included Yahoo! in the list above. This is because you should always submit your site manually to Yahoo as submission services will either not submit Banner adverts and so on are possibly the best known method of advertising on the your site to Yahoo, or your site Internet. However, they are losing effectiveness as many users now ignore them. If you will not be listed. The team (of do decided to opt for paid banner adverts, make sure that they are going to be put on people) at Yahoo are quite picky relevant sites. However, I would recommend alternative methods of promotion. I would about which sites they include, also advise against pop-up or pop-under adverts (either using them for promotion or and as a result it is often hard to including them on your site) as most users hate these. get listed there. For tips on how Banner exchanges and Link exchanges to be included in Yahoo visit http://www.wilsonweb.com/ Link and Banner exchanges are where you display someone else’s banner or link on your wmt4/990301yahoo.htm . The site and in return your banner or link is displayed on other sites. This is all done auto- submission process for Yahoo is matically, and the more visitors who see the banner or link on your site, the more times also quite long and drawn-out, your banner or link will be displayed on someone else’s site. However, I do not and requires quite a lot of recommend joining such schemes as they can make your site appear unprofessional and information. This is why sub- are unlikely to drive visitors to your site. A better method is link-swapping (see below). a screenshot from the Search Engine Northern Light.
27 28 mission programs do not send pages to Yahoo. Yahoo is at www.yahoo.co.uk C http://www.liszt.com C http://ezine-universe.com I also recommend that you submit your site address to http://dmoz.org as this is a directory from which many of the search-engines build their lists. For links to subject- However, there is an even better way of promotion using e-zines and it’s free! This specific search-engines (which can be useful for bringing in targeted traffic) visit method involves writing articles for an e-zine which covers your area of business. E- www.searchengineguide.com . zine publishers are always looking for people volunteering to write articles and will TIP: I do not recommend pay-per-use submission programs. These often say that they will ‘submit allow you a short (three or four line) biography at the end of your article which can be your site to 3000 search engines for only $50'. However, almost identical services are available for used to promote your site. The added bonus with this method is that if you write a free, and you can achieve better results by submitting your site manually. useful, interesting article for the e-zine the readers will think of you as someone who TIP: Submitting just your main page to the search engines above should be sufficient as their robots knows their subject and will be more likely to visit your website and to trust what you will follow every link from that page and add the pages they find to their list. have to say. More advanced tip: If you have a page in your site which you do not want to be added to the search engines’ listings, (such as a thank you page which users see when they fill in a form on your site) add Signature files the following line of code to the head section of your page: Signature files (or ‘sig files’) are a great way to promote your site. A signature file is a small piece of text which appears at the bottom of every e-mail you send. Yours for It is almost impossible to guarantee a good search-engine position and many experts example, may look something like this (the information included is fictional): spend much of their working time trying to figure out the best way of getting a high ------listing. The points above will all help but I can’t guarantee anything. For more Gareth’s Golf Galleria information on search-engine tactics try Everything or the discerning golfer: http://searchenginewatch.com/webmasters/index.html clubs, caddies, course guides, reviews, chat forums & more! Information on how to use search-engines to find things yourself can be found in the 10% discount if you mention this advert when you buy. ‘Internet Troubleshooting’ section of this booklet. www.golf-galleria.co.uk Free-For-All Links Pages ------TIP: Make sure you get your message across simply and quickly. Free For All links pages (known in the trade as ‘ffa pages’ or ‘ffa links pages’) seem at first like a great idea. These sites allow anyone to add their site address (and possibly Most e-mail programs will let you create a signature file which will automatically be a brief description) to a big list of sites for free. However, general links pages are not attached to your outgoing e-mails. If not, you will need to manually write (or paste) it very good at bringing in visitors and are certainly not worth the effort. in each time you send e-mail. Directories TIP: If possible, try to keep each line of your signature file to sixty characters or fewer. Otherwise, some e-mail programs may break up the text, making it hard to read. There are a wide range of directories on the ‘net covering most subjects. A placement TIP: You can also use your signature file when you post to newsgroups, online forums and so on. in a relevant directory can be useful in bringing visitors to your site. For information on You may wish to find some newsgroups and forums which relate to your area of business directory-style search-engines (such as Yahoo) see above. and post replies (and questions of your own if you wish) in them. This has the E-zines advantage of getting your signature-file in front of as many eyeballs as possible and also means that if you write a useful reply to a query in the forum / newsgroup the readers Advertising in e-mail magazines (E-zines) has two main benefits. The first benefit is will think of you as someone who knows their subject and will be more likely to visit that each e-zine is targeted at a certain group of people. This means that you are able your website and to trust what you have to say. to promote your site to people who best fit into your target-audience profile. The second benefit is that e-zine ads are relatively cheap. E-zine ads normally consist of about six Link-swapping and partnerships or seven lines of text. This method of promotion is quite an ‘in thing’ on the Internet at the moment. If your There are a number of sites which list e-zines. Why not try one of the following: site has a resources page or a links (or similar) the most basic way to do this is to contact
29 30 the owners of those sites whom you have linked to from your resources / links page and let them know that you find their site useful and have linked to it from your site (include your site’s address and mention the page where their link is). Suggest that they may want to link back to your site but don’t make it seem like you’re forcing them to. I would recommend doing this only for sites which have enough relevance to yours that a link to you would be a useful addition. There are other methods of developing partnerships on the Internet but which methods (if any) you use is up to you. You could, for example, contact site which offer services which complement yours and offer to exchange links or similar. One example of a complementary site would be one which offered recipe books if your site sold ingredients. Another method is to swap signature-files so that your e-mails carry an advert for someone else’s site (make it a relevant one) and their e-mails carry an advert for your site. This will get your signature file (and theirs) in front of a whole new set of eyeballs and so you both benefit. These are just a couple of ideas – I’m sure you can think of others. Offline promotion Don’t forget the real world! Include your web address in all your publications (including letterheads and so on) and on all your adverts. This is an easy way to get visitors.
I hope you have found this booklet useful. Good luck with Glossary editing your websites and don’t forget that I am happy to help out for just £7.00 per hour. There are many web-related glossaries. You may care to try these: C http://whatis.techtarget.com (a general computing glossary) C http://hotwired.lycos.com/webmonkey/glossary (more advanced) C http://library.thinkquest.org/11373/gloss.html
31