WIXLIB

How the Web Works, Part I: Introduction to HTMLHTML Tutorial(version 5.0)This tutorial is designed to teach you some the basics of HyperText Markup Language (HTML),with an emphasis on transforming a word-processing document into a simple Web page.You can get the most recent version of this tutorial from the CAT website:http://cat.xula.edu/tutorials/ContentsThis tutorial will guide you through the following steps:1.2.3.4.5.6.7.Retrieving the necessary materials from the WebCopying text from a word-processing document and pasting it into an HTML templateMarking block elements and validating your workMarking inline elements and validating your workUsing Netscape ComposerUsing Word's "Save as HTML" feature.Uploading your files to the Web serverPrerequisitesThis tutorial assumes a level of competency with basic computing tasks and concepts. You shouldunderstand the following terms: FilesFoldersFile hierarchyThe desktopThe Finder (Mac only)ConventionsActions that you need to perform are bulleted, like this: Open the file.Menu commands look like this: File Open. This means choose the Open option from the Filemenu. Sometimes, for the sake of brevity, common menu items may be referred to simply asSave or Open. The same style is used for other user interface elements, such as key you'resupposed to press and buttons you're supposed to click, i.e. "Click the OK button."HTML code and URLs look like this: BODY BGCOLOR "white" Names of files and folders, as well as text that you are supposed to type, are rendered in italics.1

How the Web Works, Part I: Introduction to HTMLHTML TutorialBefore You Begin Look over the "Hypertext Markup Procedure" and "30-Odd Safe HTML Elements" quickreference sheets. Re-examine the handouts on "Anatomy of a Web Page" and the"Container Model." Read the following information about filename extensions.About Filename ExtensionsSome operating systems use filename extensions to identify different types of files. For example,a file named document.htm or document.html is marked as a Web page. A file nameddocument.gif is marked as a particular type of image file, while document.jpg indicates an imagefile of another format. A Microsoft Word document might be named document.doc, whereas aplain text file would most likely be named something like document.txt.Web servers, which may run on a number of different operating systems, use filename extensionsto identify file types.The Microsoft Disk Operating System (MS-DOS) uses filename extensions. Windows uses themtoo, since it is built "on top of" MS-DOS. Windows is often configured to hide filenameextensions, so that you may not be aware of them. (But see below for the remedy.)The Mac OS doesn't use filename extensions. A very different system is employed to identifydifferent file types, so that a file named document could be almost anything -- text, graphics,audio, video, whatever. Mac users who want to publish on the Web or share files with Windowsusers need to be aware of filename extensions and start using them correctly.Examples of Common Filename Extension Problems You find a file named document.html.txt. Which is it — plain text or hypertext? You create a web page that is supposed to display an image. The image file is namedpicture.jpg but you mistakenly set the SRC attribute of the IMG tag to point to picture.gif.The image does not appear. You're a Windows user. A Mac user sends you e-mail with a Word document attached. Itis named Final Report. You can't open it. Because Final Report has no filenameextension, the Windows operating system can't identify it as a Word file. If the Mac userhad named the file Final Report.doc, this would not have occurred. Also note that it'sgood practice to avoid spaces and case variations in filenames if you plan to share themover the Web, so an even better name would be final report.doc, final-report.doc orfinalreport.doc.Windows Only: Configure Your SystemFollow these instructions to make Windows display filename extensions at all times. This ishighly recommended for aspiring Web authors, because it reduces opportunities for confusion. WinXP: From the Start menu, choose Control Panel, then double-click on FolderOptions. (In older versions of Windows, Open any folder or drive. From the View menu,choose Options or Folder Options.)A dialog box should appear. Click the View tab.Look for an option that says "Hide file extensions for known file types" or "Hide MS-DOSfile extensions for file types that are registered." Make sure this item is not checked.Click the button marked OK.2

How the Web Works, Part I: Introduction to HTMLHTML Tutorial1. Retrieve MaterialsFirst you must create a folder to hold your files. Create a new folder on the desktop and name it tutorial.Windows users: You can do this quite simply by clicking on the desktop with your rightmouse button and choosing New Folder from the pop-up menu. Then, withoutpausing to draw breath, type the word tutorial. Press the Enter key and you're done.Mac users: You can do this quite simply by clicking on the desktop while pressing theControl key; choose New Folder from the pop-up menu. Then, without pausing tothink, type the word tutorial. Press the Return key and you're done.Next, you must retrieve the necessary materials from the Web. Start Netscape, and point the browser to this URL:http://cat.xula.edu/tutorials/html/ Find the section of the page under the heading Tutorial Materials. Follow the link to All About Mustard.doc which is a Microsoft Word Document. Save this file in the tutorial folder you created earlier. (You'll be prompted by Netscape.) Follow the link to template.txt which is a plain text file.The contents of the file will be displayed in the browser window. It should look like this: !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 ml401-19991224/loose.dtd" HTML HEAD TITLE Untitled /TITLE /HEAD BODY /BODY /HTML This should look familiar to you. You'll use this raw code as a template for your first Web page.The best way to save this file to disk is simply to copy and paste: Choose Edit Select All to select all the text. Choose Edit Copy to copy the selected text. Launch a text editor.Windows users: Use Notepad. From the Windows Start menu, choose Run andenter notepad.Mac users: Use SimpleText. This application can usually be found on the hard drive, inthe Applications folder. In your text editor, select Edit Paste. The text you copied from your browser shouldappear in the window of the text editor. Save this file. Name it template.txt and make sure that you are saving it in your tutorialfolder. Close your text editor and return to Netscape.You should now have a Word document and a plain text file in your tutorial folder — all thematerials you need to complete this tutorial.3

How the Web Works, Part I: Introduction to HTMLHTML Tutorial2. From Word Processor to Web PageOften your Web pages will begin their digital life as word processing documents. In order to"mark up" such a document with HTML, you must first get it into a plain text format.One way to do this is by saving the document as a "text only" file. A simpler way is to copy thetext from the word processing program and paste it into a text editor, much as you did with thetemplate.txt file. Here's how: Open the file named All About Mustard.doc which you saved to your tutorial folder.(Double-clicking the file's icon should launch Microsoft Word. If not, you will have tostart Word yourself and open the file from Word.) Take a moment to look over the document and familiarize yourself with its contents andgeneral structure. A copy of this document is attached to the end of this tutorial; you mayfind it more convenient to refer to the printed copy as you proceed. Choose Edit Select All to select all the text. Choose Edit Copy to copy the selected text. Open the template.txt file which you saved in your tutorial folder. (Double-clicking thefile's icon should launch your text editor. If not, you will have to start your text editoryourself and open the file within that application.) Click between the opening and closing BODY tags. Choose Edit Paste. The text you copied from Word should appear in the window of thetext editor. Note that all the special formatting has been stripped away. All that remainsis plain text and line breaks (carriage returns).oWindows users: You may need to choose Edit Word Wrap to see all the text.4

How the Web Works, Part I: Introduction to HTMLHTML TutorialYour document should now look something like this: !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 ml401-19991224/loose.dtd" HTML HEAD TITLE Untitled /TITLE /HEAD BODY All About MustardAn Abbreviated History of MustardThe Greeks used mustard as a condiment and a drug but it was the Romans who firstmade real culinary use of it by grinding the seeds and mixing the flour withwine, vinegar, oil and honey. When they moved into Gaul they took mustard plantswith them and it was in the rich wine growing region of Burgundy that mustardflourished.It is reputed that at a festival in 1336 attended by the Duke of Burgundy and hiscousin King Philip the Fair, no less than 70 gallons of mustard were eaten.Reports do not say how pickled the guests were.Pope John XX11 of Avignon loved mustard so much that he created the post of"Mustard Maker to the Pope," a job he gave to an idle nephew who lived nearDijon. Dijon soon became the mustard centre of the world and in fact soimportant was it that in 1634 a law was passed to grant the men of the town theexclusive right to make mustard.1777 saw the start of mustard making as we know it today as it was in this yearthat Messieurs Grey and Poupon founded their company. They used Grey's recipeand Poupon's money! We still owe a lot to this redoubtable duo as in 1850 theircompany invented a steam operated grinding machine so ending the era of laboriousand back-breaking hand grinding.And as Jesus said in the Gospel of Thomas:[The Kingdom of Heaven] is like a mustard seed. It is the smallest of all seeds;but when it falls on tilled soil, it produces a great plant and becomes a shelterfor birds of the air.A Mustard RecipeIngredients4 Tablespoons Dry mustard powder1 Tablespoon White Wine Vinegar2 Tablespoons Flat beer1 Clove Garlic1 Teaspoon Sugar1/2 Teaspoon Salt1/4 Teaspoon Turmeric1 Tablespoon Olive oil -- optionalPreparation1.Whisk together dry mustard, vinegar and beer.2.Use a garlic press or large pair pliers to squeeze the juice from theclove of garlic into the mixture.3.Stir in sugar, salt and turmeric.4.To make mustard smoother and less hot, add olive oil to taste.Mustard Links§Européenne de Condimentshttp://www.moutarde.com/A mustard company's website§Mustard .htmA description of mustard gas§Mount Horeb Mustard Museumhttp://www.mustardweb.com/The world's largest collection of prepared mustards /BODY /HTML 5