2. Chapter 8 HTML Editors

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

4. Copyright © 2006 Pearson Addison-Wesley. All rights reserved. 8-3 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 www.coffeecup.com – Download – Look at Features

5. Copyright © 2006 Pearson Addison-Wesley. All rights reserved. 8-4 Text Editors (cont’d…) 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

6. Copyright © 2006 Pearson Addison-Wesley. All rights reserved. 8-5 Text Editors (cont’d…) Basic Formatting Tags 1.Create a page from scratch 2.Title the page 3. Use Tag Library to display HTML tags 4.Save 5.Preview 6.Type style sheet link tag as in Fig. 8.8 7.Add the paragraph of text as in p. 234 8.Format the paragraph 9.Enhance the fonts

7. Copyright © 2006 Pearson Addison-Wesley. All rights reserved. 8-6 Text Editors (cont’d…) 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

8. Copyright © 2006 Pearson Addison-Wesley. All rights reserved. 8-7 Text Editors (cont’d…) 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…

9. Copyright © 2006 Pearson Addison-Wesley. All rights reserved. 8-8 Text Editors (cont’d…) 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

10. Copyright © 2006 Pearson Addison-Wesley. All rights reserved. 8-9 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

11. Copyright © 2006 Pearson Addison-Wesley. All rights reserved. 8-10 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

12. Copyright © 2006 Pearson Addison-Wesley. All rights reserved. 8-11 WYSIWYG Editors (cont’d…) 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

13. Copyright © 2006 Pearson Addison-Wesley. All rights reserved. 8-12 WYSIWYG Editors (cont’d…) Table and Cell Alignment – Table, table properties – Cells tab – Preview

14. Copyright © 2006 Pearson Addison-Wesley. All rights reserved. 8-13 WYSIWYG Editors (cont’d…) Hyperlinks – Adding a remote hyperlink – Adding a local hyperlink

15. Copyright © 2006 Pearson Addison-Wesley. All rights reserved. 8-14 WYSIWYG Editors (cont’d…) 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

16. Copyright © 2006 Pearson Addison-Wesley. All rights reserved. 8-15 WYSIWYG Editors (cont’d…) Basic Formatting Property inspector Paragraph format, color, font, alignment and others Properties of the image See the design panel Style sheet Formatting

17. Copyright © 2006 Pearson Addison-Wesley. All rights reserved. 8-16 WYSIWYG Editors (cont’d…) Adding an Image Images folder Drag and select Align Adding a Table Add store hours, Save, Preview

18. Copyright © 2006 Pearson Addison-Wesley. All rights reserved. 8-17 WYSIWYG Editors (cont’d…) Remote and Local Hyperlinks in Dreamweaver – Add a remote hyperlink – Add a local hyperlink – Add a title and comment – Preview in Web Browser

19. Copyright © 2006 Pearson Addison-Wesley. All rights reserved. 8-18 WYSIWYG Editors (cont’d…) Microsoft FrontPage FrontPage and Dreamweaver have similar features Similar to Microsoft Office