1. McGraw-Hill/Irwin The Interactive Computing Series © 2002 The McGraw-Hill Companies, Inc. All rights reserved. How to Create Web Pages Using HTML Introduction to Web Pages Lesson 1

2. The Interactive Computing Series © 2002 The McGraw-Hill Companies, Inc. All rights reserved. HT 1.2 McGraw-Hill/Irwin Introducing HTML HTML – HyperText Markup Language –A programming language to create Web pages Instructions are called "tags" which tell the Web browser –What to display –How to display it HTML documents are plain text –Translated by Web browser programs –When you view a Web page, you are viewing your browser's interpretation of the HTML source

3. The Interactive Computing Series © 2002 The McGraw-Hill Companies, Inc. All rights reserved. HT 1.3 McGraw-Hill/Irwin Introducing HTML HTML source of NOAA home page HTML code Tags

4. The Interactive Computing Series © 2002 The McGraw-Hill Companies, Inc. All rights reserved. HT 1.4 McGraw-Hill/Irwin Introducing HTML NOAA home page as displayed by a Web browser Formatted text GraphicHyperlink

5. The Interactive Computing Series © 2002 The McGraw-Hill Companies, Inc. All rights reserved. HT 1.5 McGraw-Hill/Irwin Introduction to Web Browsers Web browsers are multi-platform –They work the same for a Windows PC as for an Apple Macintosh as for a Unix workstation Slight differences exist among major brands of browsers Market leaders are –Microsoft Internet Explorer –Chrome Wise to try your Web page designs on each Best to keep designs simple –Thus reach largest possible audience

6. The Interactive Computing Series © 2002 The McGraw-Hill Companies, Inc. All rights reserved. HT 1.6 McGraw-Hill/Irwin Introduction to Web Browsers NOAA home page viewed in Netscape Navigator

7. The Interactive Computing Series © 2002 The McGraw-Hill Companies, Inc. All rights reserved. HT 1.7 McGraw-Hill/Irwin Introduction to Web Browsers NOAA home page viewed in Microsoft Internet Explorer

8. The Interactive Computing Series © 2002 The McGraw-Hill Companies, Inc. All rights reserved. HT 1.8 McGraw-Hill/Irwin Using a Text Editor HTML documents can be created with any text editor –We will use Notepad, a Windows accessory Text is saved in ASCII or plain text format

9. The Interactive Computing Series © 2002 The McGraw-Hill Companies, Inc. All rights reserved. HT 1.9 McGraw-Hill/Irwin Using a Text Editor Click on START, then Programs, Choose Accessories, then Notepad

10. The Interactive Computing Series © 2002 The McGraw-Hill Companies, Inc. All rights reserved. HT 1.10 McGraw-Hill/Irwin Using a Text Editor Notepad Application/Window Title bar Menu bar Blank page Maximize and Minimize buttons Close and Exit button

11. The Interactive Computing Series © 2002 The McGraw-Hill Companies, Inc. All rights reserved. HT 1.11 McGraw-Hill/Irwin View HTML Structure All HTML pages have a basic structure –Important to adhere to the structure when writing tags and commands

12. The Interactive Computing Series © 2002 The McGraw-Hill Companies, Inc. All rights reserved. HT 1.12 McGraw-Hill/Irwin Opening a Document to View its HTML Structure Open dialog box List box List menu Place pointer over Student Home Folder select BCIS/Web Designr Click on List arrow to open the List menu

13. The Interactive Computing Series © 2002 The McGraw-Hill Companies, Inc. All rights reserved. HT 1.13 McGraw-Hill/Irwin Opening a Document to View its HTML Structure Basic structure of an HTML page in Notepad HTML page structure

14. The Interactive Computing Series © 2002 The McGraw-Hill Companies, Inc. All rights reserved. HT 1.14 McGraw-Hill/Irwin Understanding Tags Tags are commands –Written between angle brackets Most require both an opening and a closing tag –Opening tag –Closing tag Note the slash / Tags may be either upper or lower case Tags may include attributes –Affect specific features of a page (color, font, …) –Attributes have values

15. The Interactive Computing Series © 2002 The McGraw-Hill Companies, Inc. All rights reserved. HT 1.15 McGraw-Hill/Irwin Understanding Tags Basic HTML page structure Opening tag Closing tag

16. The Interactive Computing Series © 2002 The McGraw-Hill Companies, Inc. All rights reserved. HT 1.16 McGraw-Hill/Irwin Understanding Tags HTML source for NASA home page Body tag marks opening of body of a page Attribute specifying background color for whole page Tag Attribute Value

17. The Interactive Computing Series © 2002 The McGraw-Hill Companies, Inc. All rights reserved. HT 1.17 McGraw-Hill/Irwin Writing Tags and Editing HTML Pages To create a Web page in HTML –Create some of basic tags required by every Web page Enter basic opening and closing tabs Insert head tags which mark the Head section of the page

18. The Interactive Computing Series © 2002 The McGraw-Hill Companies, Inc. All rights reserved. HT 1.18 McGraw-Hill/Irwin Saving Pages Working with any application program that creates files it is important to save the work Forgetting to do so may end up wasting valuable time While working in Notepad, to get the Save As dialog box –Click on File, then Save As

19. The Interactive Computing Series © 2002 The McGraw-Hill Companies, Inc. All rights reserved. HT 1.19 McGraw-Hill/Irwin Saving Pages Save As dialog box Allows you to select the format in which a document will be saved Allows you to select your home folder/BCIS/Web Design folders in which to save the document

20. The Interactive Computing Series © 2002 The McGraw-Hill Companies, Inc. All rights reserved. HT 1.20 McGraw-Hill/Irwin Saving Pages Note that the title bar of Notepad will now contain the name of the document.

21. The Interactive Computing Series © 2002 The McGraw-Hill Companies, Inc. All rights reserved. HT 1.21 McGraw-Hill/Irwin Printing an HTML Document Hardcopy of a document is useful for –visualizing –revising –making notes –correcting tag errors missed on the screen Must be able to print the document from the text editor To print a document, first click on File, then Page Setup for dialog box

22. The Interactive Computing Series © 2002 The McGraw-Hill Companies, Inc. All rights reserved. HT 1.22 McGraw-Hill/Irwin Printing an HTML Document Page Setup dialog box Choose orientation Preview printed page Specify margins Click to verify or select printer

23. The Interactive Computing Series © 2002 The McGraw-Hill Companies, Inc. All rights reserved. HT 1.23 McGraw-Hill/Irwin Printing an HTML Document Selecting a printer Name of the printer

24. The Interactive Computing Series © 2002 The McGraw-Hill Companies, Inc. All rights reserved. HT 1.24 McGraw-Hill/Irwin Planning a Web Site Designer must consider the goals of the Web site –Business site –Personal forum Planning first will make work easier later Considerations –How to hyperlink the pages –Use of a diagram of overall site as a planning aid –Who is the audience –Get ideas from similar sites Choose features –graphics –tables –multimedia –background

25. The Interactive Computing Series © 2002 The McGraw-Hill Companies, Inc. All rights reserved. HT 1.25 McGraw-Hill/Irwin Planning a Web Site Note features of National Weather Service home page Graphics and multimedia elements Links to other related Web sites Links within Web site