Chapter 8 HTML Editors Copyright © 2006 Pearson Addison-Wesley. All rights reserved. 8-2 Text Editors No single method Notepad Textpad, Notetab, and

Chapter 8

HTML Editors

Copyright © 2006 Pearson Addison-Wesley. All rights reserved. 8-2

Text Editors

• No single method

• Notepad

• Textpad, Notetab, and EditPad


Text Editors (cont’d…)

• Programming Editors – Designed for writing code

in specific languages

– Color coded tags, scripts, browser preview

• Ex: CoffeeCup HTML Editor– www.coffeecup.com

– Download

– Look at Features

http://www.coffeecup.com/





• Adding a Hyperlink– Drag elements

from one pane to another

– Add a link from the campingplain.htm page to the campinginfo.htm page by dragging



• Basic Formatting Tags1. Create a page from scratch2. Title the page 3. Use Tag Library to display HTML tags4. Save 5. Preview6. Type style sheet link tag as in Fig. 8.87. Add the paragraph of text as in p. 2348. Format the paragraph9. Enhance the fonts



• Inserting an Image

– Add an image to your document

– Use Images folder

– Explore options in Image dialog box

– Look at the Thumbnail version of your image

– Center the image



• Using Tables

– To place text, form items and other elements use a table

– Grid of rows and a column of cells

– Each cell can contain text, an image, a form item or another HTML element

– Create a table that has four columns and 4 rows…



• Adding a Remote Hyperlink – Add a remote hyperlink-- link to a page

– Create a link back to the main page

– Insert Tags

– Add a comment tag to identify author

– Finally, link campingplain.htm page to the swimming.htm page

– As can be seen programming editors help


WYSIWYG Editors

• WYSIWYG – (What you see is what you get)

Used for years with respect to application packages such as word processing and spreadsheet packages. It means that you see the complete document, including formatting, as it would look when it is printed or displayed


WYSIWYG Editors (cont’d…)

• Word Processing Applications– They do the job, but generate a lot of code

• Netscape Composer– Free, Suitable for single pages and

medium-sized Web sites

• Basic Formatting– Similar to word processing, Highlight and

change



• Using a Table for Layout– Use a table to align an image with a list of

items

– Table will keep elements together in a block and can be flexible

– Use Netscape composer to align an image with a list of items

– Cell width changes as you add text



• Table and Cell Alignment – Table, table

properties

– Cells tab

– Preview



• Hyperlinks– Adding a

remote hyperlink

– Adding a local hyperlink



• Macromedia Dreamweaver• when websites become more complex

• Use a template

• Use synchronization (recent updates are stored locally and updated to the server)

• Install and open Dreamweaver



• Basic Formatting• Property inspector

• Paragraph format, color, font, alignment and others

• Properties of the image

• See the design panel

• Style sheet

• Formatting



• Adding an Image• Images folder

• Drag and select

• Align

• Adding a Table• Add store hours, Save, Preview



• Remote and Local Hyperlinks in Dreamweaver

– Add a remote hyperlink

– Add a local hyperlink

– Add a title and comment

– Preview in Web Browser



• Microsoft FrontPage• FrontPage and Dreamweaver have

similar features

• Similar to

Microsoft Office

Documents

Chapter 8 HTML Editors Copyright © 2006 Pearson Addison-Wesley. All rights reserved. 8-2 Text Editors No single method Notepad Textpad, Notetab, and