Creating an HTML Document Using Macromedia Dreamweaver

(1)

INFORMATION SYSTEMS SERVICES

Creating an HTML Document Using

Macromedia Dreamweaver

TUT 61

50p

AUTHOR: Information Systems Services,

DATE: August 2002

EDITION: 1.3

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.

(2)

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.

My Site

(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.

<H1>Authoring HTML Documents</H1> NB: 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.

(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 Give the New Folder an appropriate name, such as WWW.

(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. Insert pane (object categories above) Menu bar Other panes Property Inspector Approx. download time of page Document Window

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 sub-pane on the right-hand side of the screen, click the down-arrow next to the ‘Application’ window pane title.

(6)

The Document Window

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.

The Menu Bar

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:

File

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.

(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.

(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

(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.

(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.

(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.

Figure 5 Automatically generated HTML code

Note 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.

Note 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.

(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.

(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>

</head>

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

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>

<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.

(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

(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 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>

<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).

(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.

(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.

(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.

(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>

</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.

(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.

(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.

(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.

(23)

your document, and in the Link field of the Property Inspector type in the following URL:

http://www.w3.org/People/Berners-Lee/

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.

(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:

http://campus.leeds.ac.uk/

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.

(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.

http://campus.leeds.ac.uk/

(26)

Task 12 Signing your Document as the Author

Objective To sign your document as the author and enter an email link.

Instructions Use <meta> tags to insert your name, and include an email 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

View the added code below in the HTML Inspector.

<meta name="Author" content="Your_Name">

(27)

Activity 12.4 Insert an email address at the bottom of your document, below the

horizontal rule, e.g:

Email your comments to [email protected]

Highlight the above text and select Text, Style, Italic, followed by Text

Size, 2, from the menu bar. Highlight your email address. In the Property Inspector type mailto:[email protected] in the Link

field. Dreamweaver will insert the code given below.

Email your comments to <a

href=“mailto:[email protected]”>[email protected].

uk</A>

Activity 12.5 View your page in the Design View . Test your email link in Netscape.

(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: version=string

<BODY>...</BODY>

Attributes: 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

(29)

<BR>

(Line Break)

<P>...</P>

(Paragraph - closing tag is optional)

Attributes: align=left, right or center

<HR>

(Horizontal Rule)

Attributes: align=left, right or center noshade

size=pixels width=value or %

<FONT>...</FONT>

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

(30)

Lists

<DL>...</DL>

Definition List

<DT>...</DT>

Definition Term

<DD>...</DD>

Definition

<DIR>...</DIR>

Directory List

<LI>...</LI>

type=bullet

<OL>...</OL>

Ordered List

<LI>...</LI>

type=format

<UL>...</UL>

Unordered List

<LI>...</LI>

type=bullet

Inline Image Tags

<IMG>

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

Colours

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.

(31)

Useful WWW Authoring Resources

1. A Beginner’s Guide to HTML:

http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html

2. A guide to HTML and the WWW, covering elements of HTML Style and HTML editors is available at:

http://www.hypernews.org/HyperNews/get/www/html/lang.html

3. The World Wide Web Consortium (W3C) for the latest developments on the WWW and HTML is available at the URL:

http://www.w3.org/

4. An HTML validation service is available at the URL: This enables you to check that the HTML you have written complies with standards

http://validator.w3.org/

6. There are a number of useful Usenet newsgroups available:

comp.infosystems.www

comp.infosystems.www.authoring.html

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 ([email protected])

Creating an HTML Document Using Macromedia Dreamweaver

INFORMATION SYSTEMS SERVICES