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 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 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 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 7 Table of Contents SoftQuad HoTMetaL PRO Training 1 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 Table of Contents 2 SoftQuad HoTMetaL PRO Training 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 Table of Contents SoftQuad HoTMetaL PRO Training 3 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 Table of Contents 4 SoftQuad HoTMetaL PRO Training 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 Table of Contents SoftQuad HoTMetaL PRO Training 5 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 Table of Contents 6 SoftQuad HoTMetaL PRO Training 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 SoftQuad HoTMetaL PRO Training 1 1 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 [...]... toolbars SoftQuad HoTMetaL PRO Training 7 Launching 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 8 SoftQuad HoTMetaL PRO Training Initial Screen When you startup HoTMetaL PRO 6.0 for... media Describe the Basic Document Structure SoftQuad HoTMetaL PRO Training 2 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... SoftQuad HoTMetaL PRO Training Review 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? SoftQuad HoTMetaL PRO Training 5 Summary As a result of this chapter, you should be able to • • Define HTML • 6 Explain hypermedia vs linear media Describe the Basic Document Structure SoftQuad HoTMetaL PRO Training... time you start HoTMetaL PRO, uncheck the box in the lower left corner "Show Tips on StartUp" SoftQuad HoTMetaL PRO Training 9 Initial Editor Screen Once you have closed the Tips Window, you will get the Editor interface in its default configuration Throughout the rest of the chapter we will be familiarizing you with the editor, and how to customize it to your liking 10 SoftQuad HoTMetaL PRO Training... existing files into your working design environment SoftQuad HoTMetaL PRO Training 13 Remote Tab This view displays sites that you create as Publishing Locations It allows selection of files for editing by dragging and dropping from the Remote Tab onto the editor window 14 SoftQuad HoTMetaL PRO Training The Document Window To explore the HoTMetaL PRO document window you need to create a new file {Click}... title bar at the top of the window Choose Redock SoftQuad HoTMetaL PRO Training 11 Left Windows Assets Tab Provides an active view, drag & drop window interface The active view shows image “thumbnails” with live animation and the drag & drop interface allows for easy insertion of selected objects into your working documents 12 SoftQuad HoTMetaL PRO Training Desktop Tab This view uses a Windows Explorer... 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 2 SoftQuad HoTMetaL PRO Training What is HTML Markup? HTML is a set of logical codes (markup) in parentheses that describe the appearance of a web document and the information... text would be blue and one size larger than normal. SoftQuad HoTMetaL PRO Training 3 A Basic Document An element called HTML surrounds the whole document This element contains two sub-elements, HEAD and BODY These elements are required to form any HTML document Course Goal The goal of this course is to teach you how to use HoTMetaL PRO 6.0 to apply HTML Elements and Attributes in designing web pages... the HoTMetaL PRO document window displays the page in Tags On view, with Workbook mode turned on Workbook mode means that each open file will have a tab displayed at the bottom of the document window You can select any open file by {Clicking} on its tab When a page is open in the document window you can edit it directly and you can also drag and drop objects from the Asset Manager SoftQuad HoTMetaL PRO. .. Use Keyboard short cuts visible in the View menu (Ctrl + Shift H/T/W/F/B) 3 Use the icons in the bottom left corner of the editor window 16 SoftQuad HoTMetaL PRO Training HTML Source View This view shows the actual HTML code in your document HoTMetaL PRO' s display is more useful than opening the file in a text editor: the HTML Source view is color-coded and block elements are indented (this indentation—which . editor preferences 6. Find and select different toolbars 8 SoftQuad HoTMetaL PRO Training Launching HoTMetaL PRO 6. 0 To start up HoTMetaL PRO 6. 0, {Click} once. SoftQuad HoTMetaL PRO Training 7 2 Overview of the HoTMetaL PRO Editor In this chapter you will learn about the powerful HTML editor HoTMetaL PRO 6. 0, and