Creating an HTML Document Using Macromedia Dreamweaver

Transcription

1 INFORMATION SYSTEMS SERVICES Creating an HTML Document Using Macromedia Dreamweaver This tutorial workbook contains a series of exercises that give an introduction to creating HTML documents for the World Wide Web using Macromedia Dreamweaver MX. AUTHOR: Information Systems Services, DATE: August 2002 EDITION: 1.3 TUT 61 50p UNIVERSITY OF LEEDS

2 Contents Introduction 1 Objectives of this document 1 Prerequisites 1 What is HTML? 1 Task 1 Creating a Website Directory 2 Task 2 Introducing Dreamweaver 3 Task 3 Creating a Local Site 7 Task 4 Creating a New Document 9 Task 5 Adding Text to your HTML Document 11 Task 6 Block Level Elements 13 Task 7 Physical and Logical Formatting Tags 15 Task 8 Bulleted and Numbered Lists 16 Task 9 Background Colours and the Font Tag 18 Task 10 Creating Hypertext Links 20 Task 11 Using Inline Images 22 Task 12 Signing your Document as the Author 24 HTML A Quick Reference 26 Useful WWW Authoring Resources 29 Format Conventions In this document the following format conventions are used: Commands that you must type in are shown in bold Courier font. Menu items are given in a Bold, Arial font. Keys that you press are given in a Bold, Arial font. Feedback My Site Windows Applications Enter If you notice any mistakes in this document please contact the Information Officer. should be sent to the address info-officer@leeds.ac.uk Copyright This document is copyright University of Leeds. Permission to use material in this document should be obtained from the Information Officer ( should be sent to the address info-officer@leeds.ac.uk) Print Record This document was printed on 18-Jun-03. 1

3 Introduction Objectives of this document This workbook provides a series of exercises on authoring an HTML document for publishing on the World Wide Web (WWW). When you have completed these exercises you should be able to: Design your own web pages View your documents using a WWW browser Prerequisites This document assumes you are familiar with using Microsoft Windows applications. What is HTML? HTML is an acronym for HyperText Markup Language, the language used to create pages for publishing on the World Wide Web. HTML has very powerful capabilities which enable you to create hypertext links to other HTML files and also allows you to include graphics, video and sound files in your document. This is done by inserting special strings of characters, called HTML tags, into your document. These tags control the structure and behaviour of the text or the bits of information to be displayed. Most HTML tags have an opening and closing tag; the closing tag is indicated by a forward slash. The HTML syntax comprising the tag is surrounded by a left and right angle bracket. The following is an example of a heading tag. NB: <H1>Authoring HTML Documents</H1> HTML tags are not case sensitive. Some opening tags come with particular attributes and values, separated by an equals sign, which further modify the effect of the HTML tag. A closing tag cannot contain an attribute. For example... <H1 ALIGN= CENTER >Authoring HTML Documents</H1>... centres the heading in your document. The default value is LEFT. It is the browser that controls how your document is displayed on your computer screen. There are many browsers available, and each may format your HTML document in a slightly different way. Be aware that perhaps not everyone will view your document in the same way as you do. 1

4 Task 1 Creating a Website Directory Objective To create a directory to store website files in. Instructions Launch Microsoft Windows XP and Windows Explorer. Comments Read through each activity carefully and in its entirety before attempting it. Activity 1.1 Login to the Windows NT desktop. Activity 1.2 Click on the Start menu and select Programs, and Windows NT Explorer, or double-click on the Explorer icon on the desktop. Activity 1.3 Select the correct directory, e.g. M:\, from the All Folders window. Activity 1.4 From the File menu select New, and Folder as shown in Figure 1. Figure 1 Creating a new directory using Windows Explorer Activity 1.5 Activity 1.6 Give the New Folder an appropriate name, such as WWW. Close Explorer. 2

5 Task 2 Introducing Dreamweaver Objective To become familiar with the Dreamweaver MX workspace. Instructions You will open Dreamweaver and familiarise yourself with the windows, toolbars and menus. Comments Dreamweaver MX can look daunting but is easy once you know your way around. Activity 2.1 Open Dreamweaver by Selecting Start Menu -> Programs -> Internet Tools -> Dreamweaver. The screen should appear as shown in Figure 2. Menu bar Insert pane (object categories above) Other panes Document Window Approx. download time of page Property Inspector Figure 2 The Dreamweaver MX Workspace Note The above screen shot represents the default MX workspace. It is possible to minimise unwanted panes by selecting the down-arrow next to the pane title. For example, to minimise the Application subpane on the right-hand side of the screen, click the down-arrow next to the Application window pane title. 3

6 The Document Window The Menu Bar File The Document window displays the current document. The document can be displayed approximately as it will appear in the web browser by clicking the Show Design View button in the top left-hand corner of the document window. Alternatively, the HTML source of the current document can be shown by clicking the Show Code View button, or both souce and design views be shown by clicking the Show Code and Design Views button. The estimated download time of the page is given at the right-hand side of the status bar. The menu bar is discussed below. Dreamweaver has ten main menus on the menu bar of the Document window. The menus follow the standard Windows format of having File and Edit on the left and Window and Help on the right. The menus are described in detail below: The File menu deals with all the file-handling aspects of Dreamweaver such as opening, saving and creating new files or sites. This menu also contains data handling commands such as the importing, exporting, and converting of documents. Link-checking and previewing of pages in browsers are also available commands. Finally the command to quit Dreamweaver is here. Edit The Edit menu contains commands for undoing/redoing actions, cut, copy, paste, and find and replace. It also contains the preferences command which allows you to alter your own Dreamweaver set-up. View The View menu alters the display attributes, such as whether gridlines are displayed, or certain palettes or borders are showing. Insert The Insert menu contains commands to insert various objects such as those contained within the Object palette (see later), line breaks, etc. Modify The Modify menu contains commands for modifying various objects such as tables, frames, etc., as well as for altering links and the page properties. Text The Text menu contains the text formatting commands such as font size, colour, type, alignment, etc. Commands The Commands menu contains the commands for cleaning up the HTML, applying source formatting, etc. Site The Site menu allows you to work with sites you have defined (see section 3). 4

7 Window The Window menu is a series of commands which allow you to select the various windows and floating palettes or inspectors you may need to view. Help The Help menu allows you to launch the Macromedia Dreamweaver Help Pages in Internet Explorer. The Help system is very comprehensive, if a little difficult to use initially. 5

8 The Dreamweaver MX workspace Dreamweaver has one main window which contains the current HTML document together with some sub-windows (or panes). These panes are described in further detail below. Other inspectors, such as Layers and Frames, are available from the Window menu but will not be discussed here. Insert pane The Insert Pane, seen immediately above the document window, contains buttons for creating various types of objects such as images, tables, layers, and so on. Various categories of object are available in separate tabs, which are selected by clicking on the appropriate category tag name. Property Inspector The Property Inspector displays properties for a selected object such as font type, font size, link URL, etc. Activity 2.2 Familiarise yourself with the menu choices, buttons, etc., by using the mouse hovering the cursor over the buttons on the palettes/inspectors will show a brief description of what each one does. Activity 2.3 Minimise the Property Inspector as it will not be used for most of this work. Design Gives you detailed information about the HTML, CSS and Javascript on the current page. Code Tag Inspector tab provides details of the structure of the HTML page and enables you to select HTML objects in the document window. The Snippets tag shows a library of HTML snippets, sections of HTML such as footers etc., which can be inserted into the HTML page. Application The Application window is used when developing a web server application in technologies such as ASP or PHP. File This pane gives you access to the information about the Site you are working with. 6

9 Task 3 Creating a Local Site Objective To create a local site. Instructions You will create a local site using the New Site command. Comments Dreamweaver s Site window helps manage a website easily. This is a very brief introduction: further information should be gleaned from the Help system. Activity 3.1 From the File menu in Document window of Dreamweaver choose New Site. Activity 3.2 In the Site Definition dialog box, select Local Info from the Category list. Figure 3 Site Definition Dialog Box 7

10 Activity 3.3 Enter a Site Name, such as My Site. Activity 3.4 Choose the directory set up in Task 1 as the Local Root Folder. Activity 3.5 Click <OK>. Note The File pane, shown in Figure 4, can be used for viewing local and remote sites, adding or removing site documents, or for storyboarding. The window consists of two panes, a splitterbar, a menu bar, and certain buttons. Any changes to the File pane will remain in place even after it has been closed and re-opened. By default, only the local files are shown in the file pane. To see the full site view, including remote files on the webserver, click the Expand/Collapse button in the File pane. Site management is beyond the scope of this document. For more information see the Dreamweaver Help Pages. Figure 4 The Site Window 8

11 Task 4 Creating a New Document Objective To understand the preliminary HTML markup tags. Instructions You will begin creating an HTML document by inserting a title into the HTML template created by Dreamweaver. You will then view the document using Netscape. Comments Dreamweaver gives you a facility (under the File menu) to select different browsers to test your HTML document. Activity 4.1 From the Document Window choose the Show Code View button. This will show the HTML Code of the current document in the document window. At first the only code present is that automatically generated by Dreamweaver upon opening a new document, as shown in Figure 5. Note Note Figure 5 Automatically generated HTML code All HTML documents must begin with a DOCTYPE tag. This defines the standard by which the code is written. In this example the code is HTML 4.01 Transitional. The first HTML tag should be <html> and last HTML tag on the document </html> tag. The entire HTML page is defined between these two tags. All HTML documents comprise of a <head> section and a <body> section. The <head> section contains the basic information about the page which is used by the browser, such as the title of the page and any <meta> tags, such as keywords for search engines to pick up. The <body> section contains the actual content of the web page. 9

12 Activity 4.2 Insert the title Creating an HTML Document using Dreamweaver between the <title></title> tags by selecting the words Untitled Document and replacing them with the above. Click the Show Design View button. Notice that the title of your document now appears in the title box of the Document window. Activity 4.3 Save the document by choosing the Save As option from the File menu. Save the file with a suitable name and the file extension.html (e.g. index.html). Click Save. 10

13 Task 5 Adding Text to your HTML Document Objective To add some text to the body of your document. Instructions You will add some text to your document and use the paragraph and line break tags to format paragraphs. Comments WWW browsers ignore white space in documents. Paragraphs and line breaks can only be created using the appropriate HTML markup. Activity 5.1 In the Code View type the following text (shown in bold) into the body of your document: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>creating an HTML Document using Dreamweaver</title> <meta http-equiv="content-type" content="text/html; charset=iso "> </head> <body bgcolor="#ffffff"> Creating Web Pages HTML Authoring / Stage 1 University of Leeds Information Systems Services The World Wide Web is "the universe of network-accessible information, an embodiment of human knowledge... W3 uses hypertext and multimedia techniques to make the Web easy for anyone to roam, browse, and contribute to." Tim Berners-Lee, The World Wide Web, 1993 </body> </html> Activity 5.2 Select Design View to view your document as it would appear in a web browser. Note Your document doesn t contain any paragraphs, as any white space in your document is ignored by the browser. You will enter some paragraph and line break tags in the next activity. Activity 5.3 Go back to Source View and add the following paragraph <p> and line break <br> tags to your document (shown in bold below) using the instructions below and over the page: <p>creating Web Pages<br> HTML Authoring / Stage 1<br> University of Leeds Information Systems Services</p> <p>the World Wide Web is "the universe of networkaccessible information, an embodiment of human knowledge... W3 uses hypertext and multimedia techniques to make the Web easy for anyone to roam, browse, and contribute to."</p> <p>tim Berners-Lee, The World Wide Web, 1993</p> These tags can be entered using either the Design view or typed direcrtly into the Source View, as shown below. 11

14 Line Break Tag: In Design View, place your cursor at the end of the line where you are going to place the line break tag, then press Shift-Enter. Alternatively, in the Code View type in the tag <br> as shown above. Paragraph Tags: In the Design View place the cursor in front of the first word of a paragraph and press Enter on the keyboard (viewing the Code View will show the introduced <p> tags), or in the Code View type in the <p> </p> tags as shown above. Activity 5.4 Save the document and view your changes in Netscape by selecting the File menu, Preview in Browser, and Netscape. Note The page looks the same in the browser as it does in the Dreamweaver Design View. 12

15 Task 6 Block Level Elements Objective To add block level elements to the text in your HTML document. Instructions You will use the three top levels of headings with the attribute align, and the <blockquote> tag. Comments There are six sizes of heading in HTML; <h1> being the largest and <h6> being the smallest. Activity 6.1 Add the following heading tags (shown in bold below): <h1>creating Web Pages</h1> <h2>html Authoring / Stage 1</h2> <h3>university of Leeds Information Systems Services</h3> <p>the World Wide Web is the universe of networkaccessible information, an embodiment of human knowledge... W3 uses hypertext and multimedia techniques to make the Web easy for anyone to roam, browse, and contribute to. </p> <p>tim Berners-Lee, The World Wide Web, 1993</p> The heading tag is a block level element which, by default, adds a blank line immediately above and below the heading. You can therefore delete the first two <br> tags using the Code View. In the Design View add <p></p> tags by pressing the Enter key at the start of sections HTML Authoring and University of Leeds. Then highlighting each heading in turn select the appropriate heading type (1, 2 or 3) using the Text tab on the Insert pane. Dreamweaver will exchange the <p></p> tags for the correct heading tags for you. Activity 6.2 View your document in the Design View and check the source code in the Code View. Activity 6.3 Use Dreamweaver to enter the following align attribute, shown in bold below, into the heading tags. The align attribute takes the values left, right or center. You will use the value center. <H1 align= center >Creating Web Pages</H1> <H2 align= center >HTML Authoring / Stage 1</H2> <H3 align= center >University of Leeds Information Systems Services</H3> In the Document window Design View highlight the three headings and use the Property Inspector to set Centre Alignment by clicking the button.dreamweaver will, again, automatically add the above HTML tags to the source code (check the Code View for confirmation of this action). 13

16 Activity 6.4 You can also centre text in the same way or by selecting the Text menu followed by Align followed by Center. This action results in the HTML shown below. <p align= center >Tim Berners-Lee, The World Wide Web, 1993</p> Activity 6.5 View the changes in the Design View and Code View. Activity 6.6 Use the Document Window to enter the following <blockquote> tag in your document as shown in bold below. <blockquote>the World Wide Web is "the universe of network-accessible information, an embodiment of human knowledge... W3 uses hypertext and multimedia techniques to make the Web easy for anyone to roam, browse, and contribute to."</blockquote> <p align= center >Tim Berners-Lee, The World Wide Web, 1993</p> Highlight the text around which you will place the <BLOCKQUOTE> tag. Select the Text menu, and Indent. Activity 6.7 View the changes in the Design View and Code View. Note The <blockquote> tag is used to enclose text as a block quotation, and is indented from the left-hand margin. 14

17 Task 7 Physical and Logical Formatting Tags Objective To add physical and logical formatting tags to your document. Instructions You will use the logical formatting tags <strong> and <em> Comments HTML formatting tags such as bold and italics give you control over the appearance of text in a document. Logical formatting tags <strong> and <em> (emphasis) define the role that the text has in a sentence. The use of logical tags is now preferred to the use of physical formatting tags as they can be rendered by an audio-enabled browser used by the visually impaired by a change in the emphasis in the voice. Physical styles such as bold and italics cannot be rendered in this way. Activity 7.1 In the Document window add the character formatting tags <strong>, <em> and <u> to your document, as shown in bold below: <blockquote><p>the <b><u>world Wide Web</u></b> is "the universe of network-accessible information, an embodiment of human knowledge... W3 uses hypertext and multimedia techniques to make the Web easy for anyone to roam, browse, and contribute to."</p></blockquote> <p align= center ><i>tim Berners-Lee, The World Wide Web, 1993</i></p> Highlight the appropriate text and from the Text menu select Style and then the correct character formatting tag, Bold, Italic or Underline. A small tick will appear next to your formatting choice in the Style submenu. Activity 7.2 View your changes in the Code View. Note Some HTML tags can be nested, but ensure that an HTML tag is closed before another one is opened. For example: <b><u>world Wide Web</b></u> is incorrect HTML. Some browsers may not be able to format this text correctly. Activity 7.3 View your changes in the Design View and Code View. 15

18 Task 8 Bulleted and Numbered Lists Objective To add bulleted (unordered) and numbered (ordered) lists to your document. Instructions You will add bulleted list tags <ul>...</ul> and the numbered list tags <ol>...</ol> with the <li> tag. Comments The <ul> tag defines the start of an unordered list, and the <ol> tag defines the start of an ordered list. The <li> tag defines the items in the list. Activity 8.1 Enter the following text (shown in bold) in the Document window and add the correct formatting tags (as shown in previous tasks using the Text menu) after the last sentence in your document: <p align= center ><i>tim Berners-Lee, The World Wide Web, 1993</i></p> <h3>www Browsers</h3> <p>browsers are software tools that allow you to view HTML documents and also to search for information on the Internet via the World Wide Web (WWW). Here is a list of some of them:</p> <p>graphical WWW Browsers;</p> <p>netscape Navigator</p> <p>internet Explorer</p> <p>opera</p> <p>hotjava</p> <p>text Only Browsers;</p> <p>lynx<p> Activity 8.2 Highlight the list of WWW browsers and select the Text menu, followed by List, Unordered List. This will produce a tick next to the Unordered List option. Dreamweaver will automatically alter the <p> tags for <li> </li> tags, and introduce the <ul> </ul> tags to the source code. Activity 8.3 View your changes in the Design View and Code View. Activity 8.4 Change the bulleted list to a numbered list. Highlight the list and select the Text menu, followed by List, Ordered List. This will move the tick from the Unordered List option to the Ordered List option. 16

19 Activity 8.5 Lists can also be nested. In the Document Window highlight the list items you wish to nest and from the Text menu choose Indent. Dreamweaver will automatically add the tags shown in bold below to the HTML code: <ol> <li>graphical WWW Browsers;</li> <ol> <li>netscape Navigator</li> <li>internet Explorer</li> <li>arena</li> <li>hotjava</li> </ol> <li>text Only Browsers;</li> <ol> <li>lynx</li> </ol> </ol> Activity 8.6 View your changes in the Design View and Code View. Activity 8.7 You can use Arabic numerals, Roman numerals, capital letters or small letters as your numbering format in your Ordered List, by inserting the attribute TYPE into the <ol> tag. (The attribute type when used in the Unordered List gives you the option to use either a disc, circle or square as your bullet.) In the Document Window enter the following attributes for Roman numerals (shown in bold below) into your Ordered List: <ol type= I > <li>graphical WWW Browsers; <ol type= i > <li>netscape Navigator <li>internet Explorer <li>arena <li>hotjava </ol> <li>text Only Browsers; <ol type= i > <li>lynx </ol> </ol> Place the cursor in front of Graphical WWW Browsers. From the List submenu (see Text menu) select Properties. From the drop-down list Style select Roman Large. Place the cursor in front of Netscape Navigator. From the List submenu select Properties. From the drop-down list Style select Roman Small. Place the cursor in front of Lynx. From the List submenu select Properties. From the drop-down list Style select Roman Small. Activity 8.8 View your changes in the Design View and Code View. 17

20 Task 9 Background Colours and the Font Tag Objective To change the background colour of your document and to change the appearance of fonts. Instructions Use the Page Properties dialog box to change the background colour of your document, and the <font> tag for changing the appearance of fonts. Comments You can change the size of text by using the size attribute in the <font> tag, value 1 being the smallest, and value 7 being the largest. The default value is 3. Activity 9.1 Select Page Properties from the Modify menu. The following dialog box will appear. Figure 6 The Page Properties Dialog Box Activity 9.2 Click the box next to Background and choose a colour from the colour palette. View your change in the Design View and the Code View Activity 9.3 Enter the font tag <font>...</font> and its attributes size and color to the quotation at the beginning of your document. Highlight all of the following text, in the Document window: The World Wide Web is "the universe of network-accessible information, an embodiment of human knowledge... W3 uses hypertext and multimedia techniques to make the Web easy for anyone to roam, browse, and contribute to." 18

21 Add the <font size= color=> tag by selecting Text, Size, 2, followed by Text, Color, and then selecting a colour of your choice from the colour palette. Activity 9.4 View the changes you have made in the Design View and Code View. 19

22 Task 10 Creating Hypertext Links Objective To create local and remote hypertext links to other HTML documents. Instructions Use the anchor tag <a> and create a link to the top of your document, and to a remote website. Comments Intra-linking allows you to create links to regions within the same document. This saves users having to scroll through several screens of text. Activity 10.1 Create a hypertext link to the top of your document. In the Document window place the cursor in front of the heading Creating Web Pages (do not highlight) and select the Insert menu and Named Anchor. The following dialog box will appear: Figure 7 Creating an Anchor Enter a suitable name for your anchor, such as Top, and click <OK>. Activity 10.2 Go to the end of your document and type in the following text which will become your hypertext link. To Top of Page Highlight the text you have just entered. Use the Property Inspector to insert a link to the named anchor. In the Link field type #Top as shown in figure 8. Figure 8 Creating a local hypertext link using the Property Inspector The prefix # tells a browser that the link is embedded in the current page. View the HTML Inspector. The following HTML tags will have been inserted into your document. <a href="#top">to Top of Page</a> Activity 10.3 Test that the link works in Netscape by first saving the document, then by selecting File menu, Preview in Browser, and Netscape to load the document into the browser and then clicking on the link. Activity 10.4 Return to Dreamweaver and create a link to Tim Berners-Lee s home page. Highlight the words Tim Berners-Lee located after the quote in 20

23 your document, and in the Link field of the Property Inspector type in the following URL: Activity 10.5 Save the document and test that your link works in Netscape. Note The Property Inspector can also be used to add many of the formatting tags already mentioned such as heading tags, paragraph tags, font type, size and style, text alignment, and list items. 21

24 Task 11 Using Inline Images Objective To insert an inline image into your document and link it to another web page. Instructions Insert the image logo.gif using the <img> tag. Comments There are a number attributes you can use with the <img> tag. One of which is the alt attribute which allows you to enter alternative text. This text is displayed by browsers that are unable to display images, or if their image display option has been disabled by the user. Use of the ALT attribute is important in producing accessible web pages. NB: In your browser go to the University of Leeds Campusweb home page at: Place the mouse cursor over the Campusweb logo and click the right mouse button once. Choose the Save Image As option (or Save Picture As ) and save the image as cwlogo.gif in the same directory as your html document. Minimise Netscape. Activity 11.1 In the Document window enter the image cwlogo.gif next to the heading University of Leeds. Place your cursor in front of the heading University of Leeds and select Image from the Insert menu. Go to your web directory, choose cwlogo.gif and click Select. Figure 9 Inserting an inline image 22

25 Activity 11.2 In the Document window select the image. In the Property Inspector add a suitable description of the image in the Alt field e.g. Campusweb Logo. Select Middle from the drop-down list in the Align field. Also, add 5 to the H space field. This should give a Property Inspector similar to that shown in Figure 10. Figure 10 The Image Property Inspector The following HTML code should have been added in the Code View: <img src="logo.gif" width="76" height="76" alt="campusweb Logo" align="middle" hspace="5"> Activity 11.3 View your document in Netscape. Activity 11.4 Now create a link from the image to the University of Leeds Campusweb home page. Select the image and type the following URL for the University of Leeds Campusweb home page into the Link field of the image Property Inspector. Activity 11.5Test the clickable image in Netscape. 23

26 Task 12 Signing your Document as the Author Objective To sign your document as the author and enter an link. Instructions Use <meta> tags to insert your name, and include an link in the document. Comments You can put anything you think will be useful to readers of your page in the footer of your document, such as a contact address or a copyright notice. Activity 12.1 In the head of the document add <meta> tags showing who the author is and when the pages were last updated. From the Insert menu, select Head Tags and Meta. This will open the Insert Meta dialog box. To add author details in the Value field type Author, and in the Content field type Your_Name. See Figure 11. Figure 11 Inserting Meta Tags To add a date to the document select Meta again (from the Head Tags submenu of the Insert menu). In the Value field type Last Updated, and in the Content field type Today s_date. To add a copyright statement select Meta again (from the Head Tags submenu of the Insert menu). In the Value field type Copyright, and in the Content field type This document copyright 2002 University of Leeds. View the added code below in the HTML Inspector. <meta name="author" content="your_name"> <meta name="last Updated" content="august 2002"> <meta name="copyright" content="this document copyright 2002 University of Leeds"> Activity 12.2 Insert a horizontal rule at the bottom of the page. Place your cursor at the bottom of the page and select Insert, Horizontal Rule from the menu bar. Activity 12.3 View your changes in the Design View and Code View. 24

27 Activity 12.4 Insert an address at the bottom of your document, below the horizontal rule, e.g: your comments to Highlight the above text and select Text, Style, Italic, followed by Text Size, 2, from the menu bar. Highlight your address. In the Property Inspector type in the Link field. Dreamweaver will insert the code given below. your comments to <a href= uk</a> Activity 12.5 View your page in the Design View. Test your link in Netscape. Well done! You ve just created your first HTML document. 25

28 HTML A Quick Reference HTML tags which have an opening and closing tag are called container tags. HTML tags which cause paragraph breaks, e.g., <Hn>, <LI> and <P> are called block level elements; those that do not cause breaks e.g., <EM>, <STRING>, <U> and <FONT> are called text level elements. A full description of HTML tags and browser extensions can be found using the Code Pane. Select the Reference Tab and the book O Reilly HTML Reference. Structure Tags <HTML>...</HTML> Attributes: <BODY>...</BODY> Attributes: version=string background=url bgcolor=colour link=colour text=colour <HEAD>...</HEAD> Contains information about the HTML document, most importantly the document s title. Head Tags <TITLE>...</TITLE> <META> Supplies additional information about a document such as author, copyright, etc. Hypertext Links <A HREF= URL >...</A> Creates a hypertext link. <A NAME= name >...</A> Creates a target name, as a destination for a hypertext link. Body Content Tags <Hn>...</Hn> Heading, where n is level 1, 2, 3, 4, 5 or 6 Attributes: align=left, right or center <BLOCKQUOTE>...</BLOCKQUOTE> For quotations <CENTER>...</CENTER> 26

29 <BR> (Line Break) <P>...</P> (Paragraph - closing tag is optional) Attributes: <HR> (Horizontal Rule) Attributes: <FONT>...</FONT> align=left, right or center align=left, right or center noshade size=pixels width=value or % Attributes: size=1, 2, 3, 4, 5, 6 or 7 (default = 3) color=colour *for list of colours see below Text Level Elements <EM>...</EM> Logical tag: for text produces italics <STRONG>...</STRONG> Logical tag: produces bold text <B>...</B> Bold: now being deprecated <I>...</I> Italics: now being deprecated <U>...</U> Underline <TT>...</TT> Typewriter Style <STRIKE>...</STRIKE> Strike Through Text <BIG>...</BIG> Large Text <SMALL>...</SMALL> Small Text <SUB>...</SUB> Subscript <SUP>...</SUP> Superscript <CITE>...</CITE> Citation: usually in italics <KBD>...</KBD> Text entered by a keyboard <DFN>...</DFN> Definition 27

30 Lists <DL>...</DL> <DT>...</DT> <DD>...</DD> <DIR>...</DIR> <LI>...</LI> <OL>...</OL> <LI>...</LI> <UL>...</UL> <LI>...</LI> Definition List Definition Term Definition Directory List type=bullet Ordered List type=format Unordered List type=bullet Inline Image Tags <IMG> Colours Attributes: align=type (left, right, center) alt=text border=n height=n hspace=n where n is any integer number vspace=n src=url width=n aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow Other <!-- --> (Comment) Anything contained in these angle brackets will not be displayed by your browser. You can use this facility to write notes or reminders to yourself about the document. Don t forget that users will be able to read these comments when viewing the document source in their browser. & (special text character) e.g. = (copyright symbol) è = è (foreign characters) 28

31 Useful WWW Authoring Resources 1. A Beginner s Guide to HTML: 2. A guide to HTML and the WWW, covering elements of HTML Style and HTML editors is available at: 3. The World Wide Web Consortium (W3C) for the latest developments on the WWW and HTML is available at the URL: 4. An HTML validation service is available at the URL: This enables you to check that the HTML you have written complies with standards 6. There are a number of useful Usenet newsgroups available: comp.infosystems.www comp.infosystems. ISS WWW Services Software support and advice Programming Server support Database integration Project work Documentation (such as this guide) Training (including using Macromedia Dreamweaver MX as an HTML authoring tool). For further information on the ISS WWW Services contact: Mr. B. Diggle (b.w.diggle@leeds.ac.uk) 29