Copyrights and Trademarks No part of this document may be reproduced, stored in a retrieval system, or transmitted in any form or by any means – electronic, mechanical, recording, or oth
Trang 2Copyrights and Trademarks
No part of this document may be reproduced, stored in a retrieval system, or transmitted in any form or by any means – electronic, mechanical, recording, or otherwise – without the prior written consent of the publisher
Netscape Navigator is a trademark of Netscape Communications Corp
Windows 3.1, Windows 95, Windows NT, and Internet Explorer are trademarks of Microsoft Corporation
All trademarks and brand names are acknowledged as belonging to their
respective owners
Published by XtraNet
180 Attwell Dr., Suite 130 Toronto, Ontario, Canada M9W 6A9 Phone: 416-675-1881 Fax: 416-675-9217 E-mail: info@xnu.com
Copyright © 1999 by XtraNet
All Rights Reserved January 1999 First Edition
1 2 3 4 5 6
Trang 3Copyrights and Trademarks
No part of this document may be reproduced, stored in a retrieval system, or transmitted in any form or by any means – electronic, mechanical, recording, or otherwise – without the prior written consent of the publisher
Netscape Navigator is a trademark of Netscape Communications Corp
Windows 3.1, Windows 95, Windows NT, and Internet Explorer are trademarks of Microsoft Corporation
All trademarks and brand names are acknowledged as belonging to their
1 2 3 4 5 6 7
Trang 4Table of Contents
Chapter 1 - HTML Introduction 1
Linear Media 2
Hypermedia 2
What is HTML Markup 3
A Basic Document 4
Review Questions 5
Summary 6
Chapter 2 - Overview of the HoTMetaL Editor 7
Launch Screen 8
Initial Screen 9
Editor Window 10
Docking Windows 11
Left Windows 12
Assets View 12
Document Windows 15
Editor Views 16
Source View 17
Tags On View 18
WYSIWYG View 19
WYSIWYG-Frames View 19
Page Preview View 20
Editor Preferences 21
Menu Items 21
Toolbars 22
Selecting Toolbars 22
Moving Toolbars 23
Customizing Toolbars 23
Toolbar Functions 24
Review Questions 27
Summary 28
Chapter 3 – The Anatomy of an HTML Document 29
Document Structure 30
Head Elements 31
Document Properties 32
Inserting Elements and Attributes 33
Modifying an Elements Attributes 34
Removing Elements 35
Exercise 36
Optional Exercise 36
Review Questions 37
Summary 38
Chapter 4 - Headings, Paragraphs, Breaks and Horizontal Rules 39
Headings, <Hx> </Hx> 40
Paragraph, <P> </P> 41
HoTMetaL Tip 41
Horizontal Rule, <HR> 43
Exercise – Headings 44
Exercise – Horizontal Rules 45
Exercise – Paragraphs & Breaks 46
Review Questions 47
Summary 48
Chapter 5 - Character Formatting 49
Bold & Italic and other Character Formatting 50
Font Element 52
Alignment 54
Special Characters & Symbols 54
Special Characters Toolbar 54
Trang 5Table of Contents
Symbols Toolbar 54
Additional Character Formatting Elements 55
HoTMetaL Tip 57
Exercise 1 58
Exercise 2 59
Optional Exercise 59
Review Questions 60
Summary 61
Chapter 6 - Lists 62
List Elements 63
Unordered List 63
Ordered List 64
Definition List 65
Other Lists 66
HoTMetaL Tip 66
Nesting Lists 67
Exercise – Ordered List 68
Optional Exercises 68
Review Questions 69
Summary 70
Chapter 7 – Anchors and URLs 71
Link Elements <A Href=> </A> 72
Link Types 72
Internal Links 73
Creating Local Links 74
URLs – Uniform Resourced Locators 75
HTTP – HyperText Transport Protocol 75
FTP – File Transfer Protocol 75
News – News Groups 75
Gopher 76
E- mail 76
Telnet – Remote Terminal Emulation 76
Link Colors 77
HoTMetaL Tip 78
Exercise – Mailto and HTTP Link 79
Review Questions 80
Summary 81
Chapter 8 – Images and Image Maps 82
Supported Image Formats 83
GIF 83
JPEG 84
Limited Support or Non-Supported Image Formats 84
Inserting Images <IMG> 85
Image Attributes 86
Inserting Images using the Asset Manager 88
HoTMetaL Tip 88
Using Images as Links 89
Image Maps 90
Server-side Image Maps 90
Client-side Image Maps 91
How to create a Client-side Image Map 92
Exercise 1 95
Optional Exercise 95
Review Questions 96
Summary 97
Chapter 9 - Tables 98
Tables <TABLE> </TABLE> 99
Inserting a Table 100
Trang 6Table of Contents
Table Attributes 101
Table Captions 103
HoTMetaL Tip 103
Table Header 104
Editing the Table 105
Tables Toolbar 105
Table Properties 106
Row Properties 108
Column Properties 109
Cell Properties 110
Exercise – Add and customize a table 112
Review Questions 113
Summary 114
Chapter 10 - Converting Legacy Documents and Using Templates 115
Converting Legacy documents 116
HoTMetaL Tip 117
Using Templates 118
Exercise – Converting a legacy document 120
Exercise – Creating a new document using a template 120
Review Questions 121
Summary 122
Chapter 11 - Frames 123
Frames 124
Frames Architecture 125
Creating a Frames Page 126
Frameset 127
Frame 129
Noframes 131
Targets 132
Special Targets 133
Frame Editor 134
Exercise – Using a Framed page 135
Exercise – Creating a link in a framed environment 135
Exercise – Creating a Frames Based Page 136
Exercise – Creating Three Panels 137
Review Questions 138
Summary 139
Chapter 12 - Forms 140
Forms <FORM> </FORM> 141
Form Attributes 142
HoTMetaL Tip 142
Form Elements 143
Hidden Values 144
File Upload 146
Text area 148
Select 149
Drop down list 149
List box 149
Options 150
Common Gateway Interface - CGI 151
CGI Scripts 151
Simple CGI Program 152
Three-Tier Web Application Development 153
Four-Tier Web Application Development 154
Exercise – Creating an Order Form 155
Review Questions 169
Summary 170
Chapter 13 - Special Elements 171
Uses of the Meta Element 172
Client Pull, Server Push 172
Trang 7Table of Contents
Description 172
Keywords 172
Author 173
Company 173
Copyright 173
Adding sound to an HTML page 174
Embed 174
BGSound 174
Marquee 175
Blink 175
Exercise – Adding Client Pull, Server Push 176
Optional Exercise 177
Review Questions 178
Summary 179
Chapter 14 - Page Layout and Design Considerations 180
Technical Design Considerations 181
Screen Resolution 181
Color Depth 181
Document Size vs Download Time 182
Page Loading – HTTP 1.0 vs HTTP 1.1 183
Browser Compatibility & Quirks 183
Page layout 184
Page Layout Guidelines 184
Site Design Factors and Criteria 186
Site Layout and Navigation 186
Review Questions 187
Summary 188
Chapter 15 - Cascading Style Sheets 189
Introduction to Cascading Style Sheets 190
Inline Styles 191
Embedded Style Sheets 193
Creating an Embedded Style 194
Linked Style sheets 195
Creating a Linked Style Sheet 196
User Defined Selectors 197
Classes 197
IDs 198
Creating Classes and IDs 199
HoTMetal PRO Display Styles 200
DIV and SPAN 201
Cascading and Inheritance 202
Exercise – Inline Styles 204
Exercise – Embedded Styles 205
Exercise – Linking in a Cascading Style Sheet 207
Exercise – Editing a Cascading Style Sheet 209
Optional Exercise 212
Review Questions 213
Summary 214
Chapter 16 - JAVA and JavaScript Introduction 215
JAVA 216
Applet 216
<PARAM> Element 217
JavaScript 218
Exercise – Inserting a JAVA Applet 220
Optional Exercise – Adding JavaScript to a page 221
Review Questions 222
Summary 223
Chapter 17 - ActiveX Objects and VBScript introduction 224
Trang 8Table of Contents
ActiveX Support 225
<OBJECT> 225
VBScript 229
Exercise – Adding an ActiveX Object to a page 230
Optional Exercise – Adding VBScript to a page 233
Review Questions 234
Summary 235
Chapter 18 - High Speed Publishing 236
Keeping HoTMetaL PRO Current 237
URL Hot List 238
Macros 240
Customizing Toolbars 242
Creating Toolbars 243
Creating New Menus 245
Menu Customization Options 246
Working with Image Libraries & Other Web Components 247
Image Explorer 247
Asset Manager 248
Assets 249
Assets - adding 250
Review Questions 253
Summary 254
Chapter 19 – From Web Pages to a Web Site 255
Designing a Web Site 256
Planning the Directory Structure for a Web Site 257
Establishing Document Standards 258
Using Templates 259
Review Questions 260
Summary 261
Chapter 20 – Site Management Overview 262
Site Management Tools 263
Creating New Project 264
Opening an existing project 266
Project Tab 267
Page and Site Views 268
Right Click Menus & Functions 270
Review Questions 271
Summary 272
Chapter 21 – Using Site Management tools to Manage a Web Site 273
Creating a New Folder 274
HoTMetaL Tip 274
Importing Content 275
Import Site 275
Choosing a Destination 277
Level Selection 277
Content Selection 277
Creating Links by Dragging and Dropping 279
Managing Files and Links Between Files 280
Moving Files 281
Copying Files 282
Deleting Files 283
Renaming Files 284
Find and Replace across Multiple Documents 285
File Selection 286
Search Options 286
Project Maintenance 287
Finding Broken Links 288
Fixing Broken Links 289
Trang 9Table of Contents
Testing External Links 291
Locating Orphan Files 293
Project Summary 294
Review Questions 296
Summary 297
Chapter 22 – Publishing a Web Site with HoTMetaL PRO 298
Pre Publishing Procedures 299
Changing your URLs for the Web 299
Changing to Complete URLs 300
Changing to Relative URLs 302
Site Wide Changes to URLs 303
Configuring a Site for Publishing 304
Site Properties 304
Viewing Remote Files 311
Publishing Files to Remote Sites 312
Working with Remote Files 316
Post Publishing Procedures 317
Review Questions 318
Summary 319
Trang 101
HTML Introduction
In this chapter you will be introduced to the concepts of linear media and
hypermedia You will learn about HTML and the basics of document
structure
Objectives
Upon completing this section, you should be able to
1 Explain hypermedia vs linear media
2 Define HTML
3 Describe the Basic Document Structure
Trang 11
Linear Media
Linear media is a term used to describe any media where there is a
defined beginning and a linear progression to the end Forms of linear
media such as movies, audio and videotapes, and most books are
organized with this expectation The World Wide Web, however, is
organized very differently
Hypermedia
Hypermedia is where the user simply selects the next item of interest and
is immediately transported to that new location A good example is an
audio CD where you can choose song 5 and listen to it almost
immediately Contrast this with an audiotape where you would have to
scan through from your current location on the tape to the beginning of the song
When this concept is applied to text you get hypertext, where by
{Clicking} on a link or hotspot (hyperlink) you are immediately transported
to a new location within the same page or to a new page altogether
When you interlink a large number of pages of text on different computers all over the world, you get a spider web-like system of links and pages
This is known as the World Wide Web – a system whereby pages stored
on many different web servers, connected to the Internet, are linked
together
The system is useful because all of the pages are created in the same
format This format or “language” is called HTML, (Hypertext Markup
Language) a subset of an international standard for electronic document exchanged called SGML (Standard Generalized Markup Language)
In this class you will be introduced to the format of an HTML page, you will learn about the components that make up HTML, and how to use
HoTMetaL PRO to create pages that can be published on the World Wide Web
Trang 12What is HTML Markup?
HTML is a set of logical codes (markup) in parentheses that describe the
appearance of a web document and the information it contains
E.g <B>This text would appear bold in the browser</B>
The codes are enclosed by less than “<”, and greater than “>” brackets
These bracketed codes of the markup are commonly referred to as tags HTML codes are always contained inside these brackets and are case- insensitive; meaning, it does not matter whether you type them in upper case or lower case However, tags are easier to recognize in a web
document if they are capitalized
There is an opening element (tag) and a closing element (tag) The
closing element is distinguished by the “/” inside the “<” opening bracket,
as in </B> to end where the text is in bold
The first word or character that appears inside the “<” opening bracket is called the element An element is a command that tells the browser to do something, such as <FONT>
Words that follow the element and are contained inside the “>” closing
bracket are called attributes Attributes are not repeated or contained in
the closing element (tag) Confused? Attributes are another way of
describing the element’s properties For instance, a t-shirt can have
several properties or “attributes” – the t-shirt’s color, size, material etc are all attributes
Attributes that appear to the right of the element are separated by a
space, and followed by an equal sign The value of the attribute is
contained in quotes In the following example the element is FONT, the
attribute is COLOR, and the value of that attribute is BLUE
Most HTML elements have more than one attribute
E.g <FONT COLOR="BLUE" SIZE=”+1”>This text would be blue and
one size larger than normal.</FONT>
Trang 13understand that they exist so that you can create more effective pages
Trang 14Review Questions
1 What does HTML stand for?
2 What is an Element?
3 What are the Attributes of an Element?
4 What are the three basic elements of an HTML document?
Trang 15As a result of this chapter, you should be able to
• Explain hypermedia vs linear media
• Define HTML
• Describe the Basic Document Structure
Trang 162
Overview of the HoTMetaL PRO
Editor
In this chapter you will learn about the powerful HTML editor HoTMetaL
PRO 6.0, and how to customize it to your liking
Objectives
Upon completing this section, you should be able to
1 Launch HoTMetaL PRO
2 Manage different window options
3 Identify the Asset Manager window functions
4 Switch between and describe the editor views in the Document
Window
5 Set the editor preferences
6 Find and select different toolbars
Trang 17Launching HoTMetaL PRO 6.0
To start up HoTMetaL PRO 6.0, {Click} once on the "Start" icon in the left
corner of your screen, slide your mouse up to "Programs", {Click} once
and slide over to "SoftQuad Applications", {Click} once and slide onto
"HoTMetaL PRO 6.0" and {Click} once