Steps in Creating Web Pages

Transcription

1 5 M i n u t e W e b P a g e s - M o z i l l a 1 of 6 A basic web page is a plain text file that has been marked up with tags around a word or phrase to describe how it should be displayed by the web browser. To see the HTML codes of any page open in your browser go to the View menu: Firefox, Mozilla or Netscape - View>Page Source Internet Explorer View>Source The goals are to keep the file size small so it can be transmitted quickly and to create a file that can be read by any browser on any computer with any monitor resolution. A web page editor makes it easy to edit or create web pages; the HTML code is being created for you but you do not have to see it or worry about it. (Note: although a Word document can be converted to HTML, the results are often difficult to edit and will not always work well on certain web servers or browsers.) A simple and free web editor is Mozilla Composer, which is free from While this editor does not support all features it makes it easy to create basic web pages and to edit existing ones. A newer free editor that is similar but has more functionality is Nvu from Steps in Creating Web Pages 1. Planning Create a rough outline of what you would like to include in your web site. Gather any text files and images that you want to include. Decide what links you want to include. If you are creating more than one page, design the flow of your web site. 2. Open Mozilla. From the File menu, select New>Composer Page 3. Save your document as you would any other document (File menu, Save As...). Title: You will first be asked to provide a page title. You can change this at any time prior to publishing your page. (See page 2 of this handout under Page Properties for some guidelines.) File Location: It is best when beginning to save all the files related to your web site in the same folder. File Name: Some web server restrict how you can name the files so it is safest to stick with: Filename no more than 8 digits (with no spaces). Extension htm or html (e.g. waterloo.htm) depending on the server file names in lower case The first page you wish the reader to open should be named according to the requirements of the specific server e.g. index.html, home.html, main.html 4. Enter your text, images, and links. (Note: you can copy and paste from another Windows application such as WordPerfect or Word but will lose the formatting.) Composer will create the HTML code for you. 5. Preview your document as you work by clicking on the Browse button You will be prompted to save changes and your file will open in the Mozilla browser. (Your file is on your computer at this point, not on the Internet.) Return to Composer by clicking on File>Edit Page or selecting it from the Windows task bar at the bottom of your monitor. Make any changes you want, saving as you go. Move between Edit and Preview modes until you are satisfied with your document. Remember to save periodically. 6. When you have finished creating your web page(s), transfer them and associated files (images, sounds, etc.) onto your Web Server account. The staff of the Studio can assist you with this process.

2 5 M i n u t e W e b P a g e s - M o z i l l a 2 of 6 Using Composer to Create or Edit Pages 1. Page Properties From the Format menu, select Page Title and Properties and click on the General tab. Title is the text that appears on the blue Title Bar at the top of the page. (If you don t specify a title, the file name will display.) It is a good idea to specify a title that conveys what your page is all about since this is how many Web search tools locate specific Web pages. Title is used by WebCT as the hyperlink in the table of contents in a content module. Title The following provide additional information helpful to Web users searching for specific topics. All of these are optional and do not show up on your page. They can be seen in the View>Page Source. Author: The name of the person who created the current document. Description: A sentence describing the contents of your document. This is often displayed as the result of a search. (You need to use the HTML options to include keywords that you want search tools such as Google or Yahoo to use for your document. ) 2. Page Colours From the Format menu, select Page Colours and Background: normal text colour sets the default text colour link text sets the colour of the text (or box around an image) that is a hot link to another web page or location on your web page. Linked text (Hyperlink) usually displays as underlined although the individual viewer can switch off the underline. active link text sets the colour that flashes when you click on a link, to indicate you have activated it followed (visited) link text sets the colour that the above will become after you have used it, to indicate that you have been there (followed the link or visited the site) background colour sets the colour of your page background background pattern lets you select an image file for the background instead of a colour. Use a small image that is not too busy and is created to be tiled to fit the size of your readers browsers. Click OK to make the specified changes and close the dialogue box. 3. Formatting text As with all Windows applications, text is formatted by selecting (highlighting with the mouse or keyboard) then clicking on the action you would like, such as size, colour, style, alignment. All options are in the Format menu and some have buttons on the toolbar. Font: The main two options are variable width (most common) or fixed width (like an old typewriter). This lets the reader choose to display text in the font set in their browser. If you specify other fonts, choose ones likely to be found on the viewer s computer or substitutions will appear and you might not like the look. Standard fonts include: PC: Arial, Times New Roman, Courier Mac: Helvetica, Times, Palatino Size: This determines how large or small the characters appear. (This box will be empty if the point size of selected text varies.) You can type a point size in the box or select one from the drop-down list. Only these sizes are supported. (They correspond to the HTML options of -2 to +4.)

3 5 M i n u t e W e b P a g e s - M o z i l l a 3 of 6 Style: This sets the style of the selected character(s), such as italic, bold, or underline. You can also select to apply a special style called blinking which causes text to blink on and off. Colour: You can use the document's default text colour (as specified in Format/Page Colours and Properties), or define a custom colour for selected character(s). Remove All Styles allows you to revert to the default style. 4. Paragraph Style Headings work like Styles in Word. They range from the largest, Heading 1 to the smallest, Heading 6. They let the browser decide on how to display them. They serve to indicate the organization of the content. List style options are Bulleted, Numbered, Description, Directory, or Menu. (Note: When you select a group of items and apply numbered list to them, a # appears in front of each; the actual number doesn t display until it is viewed in the browser.) Align lets you specify whether to align the selected paragraph to the left, right, or centre of the page. These are your only options in basic HTML. Increase and decrease indent buttons move your paragraph (like the tab key). Note that if you use these features with bulleted or numbered lists, the structure changes with each indent. 5. Lines You can insert a horizontal line from the Insert menu. Once it is inserted, you can change its properties such as height, width, and alignment by the following: Point to the line and right-click on it From the menu select Horizontal Line Properties. (If it is not available to you, you have not clicked on the line.) Adjust the settings. Select OK. You can also insert a fancy coloured line as an image (see below). 6. Images An image is any graphic file (a photograph, a fancy bullet or coloured line, a chart that you have produced in a spreadsheet program, etc.). Images must be saved in.gif or.jpg formats. (If you know your audience, you can also use.png files.) It is also desirable to size and adjust the resolution of your file so that it is as small as possible (i.e. fewer kb) in order to load quickly. Note: Further assistance with images is available from the Studio and in workshops and the handouts: Computer Graphics and Web Graphics. Links to sources of copywrite free images are on the Studio web site. To Insert an Image: Place the cursor at the position you want your image to be inserted and open the Insert menu image, or click on the Insert Image icon in the toolbar. You will be presented with a dialogue box. Image file name: insert the image file name (and directory if necessary) or select Choose File to search for it (Reminder: name all files and insert all file names in lower case to ensure consistency.) It

4 5 M i n u t e W e b P a g e s - M o z i l l a 4 of 6 is best to copy the file to the same folder as the web page before inserting it in the page or the path be incorrect. Alternate Text is a brief description of your image which pops up when you point to the image or displays if the image doesn t load. It is important for those who are visually impaired and using a voice synthesizer. Dimensions are important for loading the file. If you don't know the image dimensions (in pixels), let Composer load the original and then you can change the dimensions later if you are not satisfied. Appearance: Spacing around the image refers to space (in pixels) to be left between the image and any text of another image. Solid Border is optional, although if an image is used to anchor a link, a border will be added automatically. AlignText allows you to place your graphic within the text. The wrapping will display when you click on Preview. Link lets you link the image to another web page. To Edit an Image: Select it by clicking on it once OR Right-click on it From the Format menu select Image From the Quick menu select Image Properties Properties Change the image settings Change the image settings Resize an image by clicking on it and dragging a corner handle diagonally. If a large image is resized to display smaller, it does not change the actual file size (number of kb). It should be first resized in a graphic editing application. Note: Images are not embedded inside a web page as they are in word processing. They remain a separate in-line file and must be loaded to the web server along with the HTML page. will 7. Links Some of the most important pieces in a web page are the links to other documents, to another part of this document, t o an address. Links consist of two parts: the text or image that will be hot (sometimes called the anchor) and the destination (information on where the link takes the reader). Select the anchor - text (or the image) on your page that will form the link Either open the Insert menu and choose link or click on the link icon in the toolbar. Enter the destination (link address). There are several types of link addresses to choose from: (a) Absolute addresses are the complete URLs such as: These can be typed in, copied and pasted from the web site, or dragged in from Mozilla (b) (c) Relative addresses give the location and name of a file that will be located in the same server and account. For example, if you link to Page2.htm it is assumed that this file is in the same location as the anchor file. Links to Other Types of Documents are similar to Relative links - when the reader clicks on that link the computer opens the file in the application associated with its extension. For example:*.doc opens in Word, *.xls opens in Excel, *.pdf opens in Adobe Reader. Naturally, the application must be installed on the reader s computer and the computer must associate the extension with that application. (Associations can be viewed and changed from: Start>Settings>Control Panel>Folder Options>File Type.) To create a link to a file:

5 5 M i n u t e W e b P a g e s - M o z i l l a 5 of 6 Select the anchor word or phrase. Create a link as normal using the file s name. Make sure the file is uploaded to the correct folder in order. (d) a ddress: To have text or an image link directly to an , in this section enter in the link to box: mailto:userid@internet.address e.g. mailto:pamela.mitchell@humber.ca (e) Named Anchors are selected positions (Anchors) in the same or another document. You link to them from your anchor. (For example, you might want to have a link from the bottom of a long page to its top. The top will then be the named anchor for that link, and a button or selected text at the bottom is the link anchor.) Set the Named Anchor: Select the target word or phrase. From the Insert Men u choose Named Anchor Either accept the suggested words or create your own name for this target. Link to the Target Select the anchor text or image. Create a link as normal. The drop-down list under the file name shows named anchors that have been designated on that page. Select the one you want. (If this isn t available, just type #anchorname after the file name. 8. Tables Tables are used in web pages to create a structure to hold text and images in place when people view your page with different monitors, window sizes and browser settings. If the border=0 the table will not show. Create a table from the Insert menu>table or click on the Table icon. The dialogue box lets you choose some options. You will be able to change these later from a right-click menu or Format > Table properties. You can edit the table at any time from a right-click menu or Format > Table properties. Adjust properties for the whole table, for a specific row or column, or an individual cell. (Hint, to select more than one cell, drag while holding the ctrl key down.) WebCT users can put all content in a table set to row= 1, column=1, border=0 and Table Width=80% of window in order to view within the frame structure of WebCT. Otherwise, the text may be too close to the frame. 9. Modifying Existing Pages Sometimes you need to edit a page that is already on the web. Mozilla Open the page and choose File>Edit Page. The page will be opened in Composer, ready to edit. You may save the file on your computer and modify it it to the web server. Internet Explorer Open the page and choose File>Save As. Save the file on your computer then open it in a web editor (e.g. Mozilla Composer). but you need the account ID and password to return

6 5 M i n u t e W e b P a g e s - M o z i l l a 6 of Putting Your Site on a Web Server Up to now you have been creating and editing pages locally (i.e. on your own computer). But they are not yet on the Web and available to others. A web server is a computer with specific software to allow outside computers to request and receive copies of your pages. You must have an account on one of these servers and know the account s ID and password in order to add to it. This account will then have a unique URL. Then you must transfer the files (html documents, associated images and other files) into this account. Usually this is done using a File Transfer application. Humber FirstClass users all have an associated web account. Its URL is (where userid is your FirstClass login ID). To put your web pages into this account: log into FirstClass File>Open>Home Page will add a folder to your desktop called Home Page. It will be empty when you first use it. Drag (or upload) all your files into this folder. Makes sure the first page you want to open is called index.htm or index.html After you have published your pages to the web it is important to test them. Open a web browser and call up your web pages to make sure they work on the web as well as they did on your computer. Sometimes an image doesn t load or a link won t work. Usually this is because the image hasn t been loaded or the name is different from that provided in the web document. Try to repeat this with a different browser and older computer that the one you used to create the pages. Also check that they work equally well in Mac and Windows environments. WebCT users can upload web pages to the File Manager section of the site. The Title will be used as the hypertext in the Table of Contents of the Content Module. File names may be longer than 8 characters but must all be lower case and have no spaces or unusual characters such as * & - (You many use the underscore as a separator if you like.)