<p> Web Authoring All you need to know</p><p>1. Storing Information For most of our history, information has been stored in books. A book is a set of pages of information.  You have to have it in your hand before you can read it  You can turn from page to page easily  It may have a contents page  It may have an index There are also other ways to store information on paper such as card index databases.</p><p>The arrival of computers Computers brought us a new way to store information – web sites.  A web site is also a set of pages of information.  If it is on your hard disc you can read it on the screen of your computer. If it is on an Internet computer you can read it on any connected computer anywhere in the world!  Because you can’t ‘turn’ web pages there are 'hyperlinks' which you click on to go to another page  If it is a big web site it may have a contents page (or panel) to help you find your way around. This will probably be called a 'menu'  If the website contains a lot of information it may have an index to help you find what you need, but because the information is on a computer it can be searched electronically. Special search tools are used, called 'search engines'. Big sites often have their own search engine (the DfES is an example)</p><p>Just as authors write books, so web authors create web sites. You too can be a web author. 2. Sharing information What program do you use for writing on your computer?  Many people use Microsoft Word  If you are a child at school you might use TextEase</p><p>There is a problem because each program saves work in a unique way. Word saves Word files and TextEase saves TextEase files. It’s called 'file format' and one program can't read files created by other programs (note - these days there are lots of solutions to this problem but the principle remains true).</p><p>Before the Internet was a twinkle in somebody's eye, the American Military started cabling computers together so they could share information. The trouble was they couldn’t read each other's work because they didn’t all use the same computer program.</p><p>The invention of HyperText Markup Language (HTML) The solution was the invention of a common file format which allowed information to be viewed on any computer anywhere in the world. It's called HyperText Markup Language (HTML for short). HTML documents can be read by anyone on any computer.</p><p>The World Wide Web (WWW) HTML was such a powerful idea that people began to create and share information like never before. Before long there were millions of pages of information stored on the Internet. The name ‘World Wide Web’ was coined to describe this new library of knowledge and pages of information became known as web pages.</p><p>3. Browsers A special program called a ‘web browser’ was created to read these new web pages. Web browsers do just one thing – they display web pages. Everybody can have a browser, regardless of what type of computer they own. And anyone who has a browser can view information on the World Wide Web no matter who created it, how or where. </p><p>At first, only browsers could read the HTML file format but as time has passed almost all compute programs have begun to use it to some extent in addition to their own format. There is a theory that one day HTML or its successor will be the only file format used.</p><p>Choosing a browser If you use the Internet then you already have a browser. If not, you can easily get one and they are free. The two most popular ones are Netscape Communicator and Microsoft Internet Explorer. They are very similar. (Note: Internet Explorer is the most widely used on PCs because Microsoft attached it to the Windows operating system in order to wipe out the competition - and got into trouble with the American justice system as a result!)</p><p>Publish and be damned There are now literally billions of pages of information in HTML format on the World Wide Web and the number is growing daily. The need to check for accuracy, authenticity and bias has become more important than ever before but the benefits far outweigh the dangers. You can even add to the World Wide Web yourself by creating your own pages and publishing them. And children, whose only reader used to be the teacher, can now publish to the world. 4. What is HTML? Don’t worry about whether HTML is difficult to learn – you don’t have to! Computer programs do it all for you these days. But it is useful to have a basic knowledge of how it works and the best way to do that is to look at a simple web page.</p><p>A simple web page Load your browser and look at the page called ‘cat.htm’. It’s on the course disc or you can find it at: edweb.camcnty.gov.uk:81/ftptest/cat/cat.htm  Notice that the page consists of text and a picture. (it could also include sounds, animations, video and other forms of information because HTML is a 'multimedia' format)  Notice that part of the text is coloured and underlined. This is a “hyperlink”.</p><p>Now look at the HTML If you click on ‘View’ (at the top of your browser) and then on ‘View page source’ you will be able to see the HTML language which is making this page work. It may surprise you – it’s just a set of codes with the text buried inside it, and there are no pictures!</p><p><HTML></p><p><HEAD> <TITLE>This is a very simple web page</TITLE> </HEAD></p><p><BODY></p><p><H1>My cat</H1></p><p><IMG SRC="cat1.jpg"></p><p><P>Tiddles, commonly known as 'Tids' was a stray. She appeared one evening when we were unloading the shopping from the car. At the time we weren't looking for a cat but she needed food so we gave her some milk and tinned salmon(!) and she sort of moved in. We put notices in the local shops and called her Tiddles because she was so small. And of course when no-one claimed her the name had stuck!</P></p><p><A HREF="page2.htm">This is a link to another page</A></p><p></BODY></p><p></HTML></p><p>Look closely at the HTML code and notice these important points:  HTML is a set of codes, embedded in a text document. The codes are recognisable by their angle brackets (e.g. <P>). Most codes also have a matching end-code (e.g. </P>).  Each code is an instruction to the browser to do something e.g. <H1> means “put the next words in heading size 1” <IMG SRC=“cat1.jpg”> means “go and find the picture file ‘cat1.jpg’ and put it here”.  Hypertext links have two parts - the part the reader sees (it tells the reader where the link will take him). This part is usually coloured and underlined and the address of the page to go to when the link is clicked. e.g. <A HREF="page2.htm">This is a link to another page</A>. Your browser program reads the text document and obeys the instructions. In this way it builds up the page on screen.</p><p>7. A single page consists of many parts Even quite a long word processed document will be saved as a single file. Websites are very different. Each page is a separate text file containing the HTML codes. But each page may (or may not) have many pictures and other components. Each of these is saved as a separate file.</p><p>The cat page consists of a single text file (saved as “cat.htm”) and a single picture (“cat.jpg”). You can see them here. Note that on your computer the icons might be a different size or have a different picture. For instance cat.htm may well have a blue “e” for its icon. But this doesn’t matter. The fact is that a single page is saved as two files.</p><p>Try your hand at HTML editing! In fact, what you looked at is a tiny website! It has just two pages – one named ‘cat.htm’ and the other named ‘page2.htm’. Together with the picture this makes three files. In fact the folder contains a fourth file – it’s another picture which you don’t see because the browser doesn’t receive an instruction to show it.</p><p>Your task is to change the picture by altering the HTML code!  When looking at the cat page, click on “View” and then “Source”.  The program Notepad will open showing the HTML text file that makes up this page.  Find the line which contains the filename ‘cat1.jpg’ and change it to ‘cat2.jpg’  Click on “File” and then “Save”.  Now go back to your browser and click on the ‘Refresh’ button.  Can you see what happens? More importantly, can you explain why? Important note: If you are not using the Internet Explorer browser you’ll have to open Notepad manually. Would you believe that some people still create entire web sites using just Notepad – they type in all the codes, line by line! They must be mad.</p><p>A larger website: Now look at a slightly larger but still very simple web site. It’s on the course disc (in the Gypsies” folder) or you can find it in Sourcerer. Go into the classroom and click on the trailer you can see through the window. Then click on “Visit Scarlett in her home”. Or you can type in this address: sourcerer.sourcerer.net/ks12/travellrs/scarlett1.html</p><p>The website looks something like the one on the left – lots of text files and lots of pictures – but it’s still a very simple website. Each page has some text, one picture and two links – one to the next page and one back to the first page. 8. Navigation A book has a contents page and an index. The pages are all in a line. Even if it’s an encyclopaedia of 24 volumes it’s still essentially linear. A web site can be very different – you have to navigate through it using hyperlinks.</p><p>Having said this, the cat website is blissfully simple – it only has two pages so navigation is a breeze: there and back. The Gypsies website is bigger but it’s completely linear. Wherever you are you can only go forward or back to the start. There are no other possibilities</p><p>But the potential is enormous. They don’t call it a web for nothing. When you begin to look into navigation you realise that in theory you can go from anywhere to anywhere. </p><p>Of course that doesn’t help you – you just get lost – so the art of creating a user-friendly way to navigate your website has become one of the new ICT skills, and it’s still in its infancy.</p><p>Look at some websites The best way to find out about navigation is to look at existing websites. Start with my web site. I don’t claim to be an expert. I’ve simply evolved a framework that seems to suit me – for the time being. You can find my website on the course disc (in the “briansmithswebsite” folder) or live at www.briansmithonline.com</p><p>Look at this site, not so much for its content but to assess the navigation of the site. Then try some other sites. Cambridgeshire’s Sourcerer is a good place to start and then go out onto the wider web. Use www.google.com as a search engine to locate sites on any subject, but don’t get waylaid – remember you’re studying navigation at the moment, not looking for interesting stuff.</p><p>9. Creating a web site Finally we get to the point you’ve been waiting for – actually creating your website.</p><p>There are four ways to create a web site:  You can type the HTML codes and the text into a text editor such as Notepad (I don’t recommend this).  You can use your normal word processor or desktop publishing program (e.g. Word, Publisher, TextEase).  You can use a program specially designed for creating web sites. Example include: - Netscape Composer (part of the Netscape browser) - Microsoft Front Page (also on Cambridgeshire NGfL computers) - Claris Home Page - Dreamweaver (the industry favourite) As with all software, the more powerful the program the more time you have to spend learning how to use it.  Finally, you can use a website that contains templates and support. This is perhaps the simplest way of building a website – you simply fill your text and pictures into their templates and the result is a finished website. A good example is “IK”. Investigate what they offer at www.schools.ik.com/..</p><p>Word processors and desktop publishing programs are designed to produce paper documents but recent versions can produce web sites too.  The latest versions have website templates which you can use to build your site. The result is a very professional looking web site although you can find yourself tied into their design which can be quite complex.  Programs which allow you to build your own site give you more control. They also include templates or you could just start from scratch. Don’t dismiss the simple look because the bells and whistles are so tempting. Simple web pages can convey their message well whereas complicated, professional-looking designs can be impressive but difficult to read, and to expand and maintain. The choice is yours.  You need to try both types of program and make your own mind up. You may well find yourself using both, depending on the task in hand, or for different parts of your website.</p><p>10. Transferring your work Once you have created your web site it will reside on your hard disc (unless you used an on-line template service such as IK.) This means that you can only view your website by sitting at your computer which rather defeats the object. </p><p>So there is one last stage that you have to go through – you must make your site “live” by transferring all the files to a computer which is part of the Internet 24 hours a day. There are a number of options:  You can host your website on the Cambridgeshire Education, Libraries and Heritage computer if you subscribe to the LEA’s web services. (If you don’t subscribe you can still choose to rent space from ELH).  You can open an account with any Internet Service Provider (ISP). They all offer some web space as part of your package, usually ten megabytes.  You can buy web space from a web hosting company.</p><p>For the purposes of this document and this course we shall look at the first two options.</p><p>Getting permission to host your web site In order to host your website on the ELH web server (edweb.camcnty.gov.uk) you will need to apply for permission from the webmaster, Lily Dainter. You do this by going to: edweb.camcnty.gov.uk/standards/ Here, you will find full information and also application forms which at the present time have to be printed out and posted by regular snail mail. Lily will then create a folder for your school on the Edweb server and give you a username and password to access it.</p><p>If you wish to use another Internet Service Provider you’ll need to go to their web site and open an account with them. At the present time this is usually free although increasingly they are offering a subscription service in which you pay no telephone call charges. If you’d like to try this out, go to www.virgin.net and click on “Free Internet Access” at the top of the page. Fill out the forms and choose “Pay as you go”. You’ll immediately have ten megabytes of webspace to do with as you please (providing it’s legal – their contract specifies this!).</p><p>For the purposes of this course we have a test area on the Edweb server and also an account with Virgin.net where you can practise uploading web pages to your heart’s content.</p><p>Transferring your website You’ll need a special program to do this. It’s called an “FTP” program. FTP stands for “File Transfer Protocol” and there are many such programs. Cambs NGfL computers have a program called “FTP Explorer” already on them (look in “Internet Services”). Alternatively you can find “WS-FTP” on the course disc. You can also download WS-FTP from http://edweb.camcnty.gov.uk:81/ftptest/</p><p>An FTP program is very much like Windows Explorer but instead of moving files about your hard disc you move them from your hard disc to a distant computer.</p><p>Using an FTP program FTP programs all vary but the essentials are the same:</p><p>First you have to enter the address where your web space is going to be stored and also your username and password.</p><p>On the right you can see the setup screen for WS-FTP. With all FTP programs you need three or four pieces of information before you can upload your site. You need:  The upload address for your webspace  Your username  Your password  The folder to start in (sometimes necessary, sometimes not – it depends on your provider) (this is variously known as the “initial remote directory”, the “startup folder”, etc.)</p><p>The information you need When you set up an account with an Internet Service Provider (ISP) such as Freeserve, Tesco or Virgin, they will supplier the details you need.</p><p>For our purposes on the web authoring course you can experiment to your heart’s content using the two web spaces that I’ve set up for you. They are:</p><p>Edweb: Host name: edweb.camcnty.gov.uk User name: curriculum Password: curriculum Initial remote directory: /ftptest </p><p>Virgin: Host name: upload.virgin.net User name: web.authors Password: ftptest2 Initial remote directory: (not needed, leave empty) Where is WS-FTP? A copy of WS-FTP is on the course disc for you. You can run it directly from your CD. Either use the link or find the folder on your CD and double click the blue “WS-FTP” icon. If you wish, you can copy the folder onto your hard disc and put an icon on your desktop for convenience. </p><p>This copy of the program is ready to use so doesn’t need installing. The folder contains all the parts of the program ready to go and it even has the two profiles (Edweb and Virgin) already set up for you.</p><p>Uploading your website Once you’ve entered the address and user name details all you have to do is connect and upload your web site.</p><p>Once connected, the screen for WS- FTP looks like this. The left hand pane is a view of your computer, the right hand pane is a view of the distant computer. All you have to do is click on a file to select it and then click on the arrow in the centre to transfer it.</p><p>You can go into and out of folders and create new ones. Double-click the green arrow to go up a level.</p><p>You can send whole batches of files in either direction. The aim is to get your entire website copied from your hard disc to the distant server.</p><p>Two copies of your website Remember, once you’ve uploaded your website you will always have two copies of the website – the master copy will be on your hard disc and you can make changes to it. The live copy will be on the distant server and you’ll need to update it from time to time by uploading any files that you’ve changed. You don’t have to upload the entire website each time – just upload any pages that you’ve changed and any new pages. Don’t forget to upload any pictures as well. The page will have gaps (and show the ‘missing image’ icon) if the browser can’t find them.</p><p>Footnote On the course you should create a folder for your website to go in. This will prevent it getting muddled up with everyone else’s. 11. Viewing your website Once your website is transferred to a distant computer it can immediately be seen by anyone in the world. But initially no-one knows it’s there. Ultimately, you’ll want other websites to have a link to yours so that people can follow the link to see your pages. An obvious example is having your school on the list of websites on the Edweb website – that’s where most people will go to find you. But you could also have your site linked from other websites such as your local village or town website. You might also later investigate how to get your website listed on the Internet search engines but that’s another story. But to start with you’ll just have to tell people where the site is and they’ll just have to type the address (URL) into their browser. When you get the address exactly right the website appears – but be warned, one tiny mistake and the browser will say it can’t find it.</p><p>The syntax is simple: name-of-hosting-computer / your folder / subfolder / subfolder / filename.htm (I’ve added spaces to help you see the structure. In reality there are no spaces at all) The sub-folders are optional – you only put them in if you need to. Here’s an example: edweb.camcnty.gov.uk:81/ftptest/cat/cat.htm Look closely and notice that:  The computer hosting your website is called edweb.camcnty.gov.uk:81  The website is in a folder called “cat” which is itself in a folder called “ftptest”  The first page of the website is an HTML file called “cat.htm” (See below to find out about the “:81”)</p><p>To see your website if you uploaded to Edweb use this syntax: edweb.camcnty.gov.uk:81/ftptest/yourfolder/yourfirstpage.htm</p><p>To see your website if you uploaded to Virgin use this syntax: freespace.virgin.net/web.authors/yourfolder/yourfirstpage.htm</p><p>Important note about Edweb Edweb is a bit more complicated because it actually consists of two computers – a development machine and a live machine. When you upload your website it goes onto the development machine. You can see it immediately by inserting the “:81” at the end of the domain name part of the URL but it is advisable not to publish this address to parents and friends. What you need to do is check that it all works and then email Lily and ask her to make the site live. At that point she will transfer it to the live machine and create a link to your site from the schools web pages list on Edweb.</p><p>12. Filenames 1. You have to get the URL exactly right if you are going to see your website live. Any slight mistake can lead to a failure. For example, at the time of writing this URL leads to an error message: http://edweb.camcnty.gov.uk:81/ftptest/march/Cavalry/page1.htm whereas this one opens the first page of a website: http://edweb.camcnty.gov.uk:81/ftptest/march/cavalry/page1.htm Can you see the difference?* It’s best to avoid capital letters and spaces to minimise the opportunities for errors top creep in. 2. If you leave off the final part of the URL (the filename of your first page) your browser will automatically look for a file called “index.htm”. For this reason it’s a good idea to always call your home page “index.htm”. It doesn’t matter to the computer but for a human being it makes the URL look nicer.</p><p>*It’s the capital letter at the beginning of the folder name “cavalry”.</p>