1. HTML Comprehensive Concepts and Techniques Second Edition Project 1 Creating and Editing a Web Page Review for Monday’s Test September 17, 2009

2. 2 Web Page Elements title heading body image paragraph horizontal rule links animated image bulleted list

3. 3 Starting Notepad Click Start Point to Programs Point to Accessories Click Notepad

4. 4 The Notepad Window Click Maximize

5. 5 Wrapping Text in Notepad  The text you type will scroll continuously to the right unless the WordWrap feature is turned on  Select Word Wrap in the Edit menu

6. 6 Entering HTML Tags and Text  Four tags define the overall structure of standard Web pages: – and Indicates file is an HTML document – and Introduction to the rest of the file Indicates the area where the title will be placed – and Indicates the title that will display in the title bar – and Indicates the boundaries of the Web page

7. 7 HTML Tags and Functions

8. 8 Entering Initial HTML Tags initial tags insertion point It is good form to be consistent when you type tags, adhering to a standard practice

9. 9 Entering Initial HTML Tags ending BODY and HTML tags all Web page content will be placed here If you notice an error in the text, use the BACKSPACE key to erase all the characters back to and including the one that is incorrect

10. 10 Headings  Used to separate text and introduce new topics  Vary in size, from through  Use the same sized heading for the same level of topic

11. 11

12. 12 Entering Headings main heading Since the Chiaravalle Pizza heading is the first line after the BODY tag, it will be the first thing displayed on the Web page

13. 13 Paragraphs  Most text on Web pages is in paragraph format  The tag has an optional ending tag  When a browser finds a tag, it starts a new line and adds a paragraph break  Try not to type large sections of text without having paragraph breaks

14. 14 Entering Paragraphs paragraph tag and text The (break) tag breaks a line of text and starts a new line, but does not add vertical spacing like a tag

15. 15 Creating a List  Lists structure your text in outline format –Unordered (bulleted) lists and marks the beginning and end of unordered lists –Ordered (numbered) lists and marks the beginning and end of ordered lists  The and tags define list items  The TYPE attribute defines the default bullet or number type

16. 16 Unordered Lists First item – type disc Second item – type disc First item – type square Second item – type square First item – type circle Second item – type circle

17. 17 Ordered Lists First item – type 1 Second item – type 1 First item – type A Second item – type A First item – type a Second item – type a First item – type I Second item – type I First item – type i Second item – type i

18. 18 Creating a Bulleted List bulleted list tags and text

19. 19 Saving the HTML File  You must save the file before you can view it in your browser  HTML files must end with an extension of.htm or.html .html extensions only work on Web servers running an operating system that supports long filenames

20. 20 Saving the HTML File With a floppy disk in drive A, select Save As from the File menu

21. 21 Saving the HTML File The Save As dialog box File name text box

22. 22 Saving the HTML File Type page1.htm in the File name text box Click the Save in box arrow

23. 23 Saving the HTML File Point to and click 3½ Floppy (A:) in the Save in drop-down list

24. 24 Saving the HTML File Click the Save button

25. 25 Saving the HTML File new file name

26. 26 Using a Browser to View a Web Page  After you save your HTML file, you may view your Web page in a browser  The HTML file displays in your browser just as it would on the Web  Windows allows you to view the page in your browser while keeping Notepad open

27. 27 Starting Your Browser Locate and click on the icon in your Start menu that identifies your Web browser This varies on each computer

28. 28 Your Browser maximize button standard buttons toolbar status bar default startup page address bar menu bar Internet Explorer Window

29. 29 Opening a Web Page in Your Browser Click the Address bar

30. 30 Opening a Web Page in Your Browser Type a:\page1.htm in the Address text box, then press ENTER

31. 31 Your Web Page title body of Web page main heading H2 heading bulleted list paragraph

32. 32

33. 33 Adding Background Color Locate the 6-character code of the color you wish to use

34. 34 Adding Background Color Background color code goes at the end of the BODY tag

35. 35 Centering the Heading  Text can be aligned differently on the page –ALIGN = “LEFT” –ALIGN = “RIGHT” –ALIGN = “CENTER”  The default alignment for headings is left-alignment

36. 36 Centering the Heading center-alignment code

37. 37 Adding a Horizontal Rule  Horizontal Rules are graphical images that act as dividers  The tag used to insert a Horizontal Rule is  Horizontal Rules are easy to insert

38. 38 Adding a Horizontal Rule Horizontal Rules Default HR HR with size=1 HR with size=5 HR with size=10 HR with size=10 and noshade

39. 39 Adding a Horizontal Rule horizontal rule tag

40. 40 Viewing Your Web Page Source  You can view the HTML code on any Web page from within your browser  This allows you to see how others created their Web pages

41. 41 Viewing Your Web Page Source Click Source in the View menu

42. 42 Viewing Your Web Page Source HTML source code

43. 43 1. Ready the printer Printing a Copy 2. Select Print from the File menu 3. Click the OK button in the Print dialog box 4. Retrieve the printout

44. 44 Printing the HTML From the Notepad window, select Print from the File menu

45. Definitions:  Internet The Internet is a global system of interconnected computer networks that use the standardized Internet Protocol Suite (TCP/IP), serving billions of users worldwide. computer networks Internet Protocol Suite -or- Is a worldwide collection of computer networks that links together millions of computer used by business, the government, educational instutions, organizations, and indiviuals and other communication devices and media. 45

46.  Network: Is composed of a group of computers (from two to many) that are connected together to share information.  Internet Service Provider (ISP): An Internet service provider (ISP, also called Internet access provider, or IAP) is a company that offers its customers access to the Internet. The ISP connects to its customers using a data transmission technology appropriate for delivering Internet Protocol datagrams, such as dial-up, DSL, cable modem, wireless or dedicated high-speed interconnects.Internet Internet Protocoldatagramsdial-upDSL cable modemwireless Examples: E-mail Accounts! 46

47.  World Wide Web or Web: is the part of the Internet that supports multimedia and consists of a collection of linked documents. -or- The World Wide Web is a system of interlinked hypertext documents accessed via the Internet. With a web browser, one can view Web pages that may contain text, images, videos, and other multimedia and navigate between them using hyperlinks.hypertextInternetweb browserWeb pagestext imagesvideosmultimediahyperlinks 47

48.  Web site: Is a related collection of Web pages that is created and maintained by an individual, company, educational institutions, or other organization. 48

49.  Home Page: Is the first document users see when they access the web site.  Web Server: Store web pages. Any computer that has server software installed and is connected to the Internet can act as a Web Server. Every Web site is stored on and runs from one or more Web servers. 49

50.  Internet Site: Is a web site that generally is available to the public. Also, referred to as Web Sites.  E-commerce (Electronic commerce): Is the buying and selling of goods on the Internet. 50

51.  Intranet: Is a private network that uses standard Internet technologies to share company information among employees. It is contained within the company or organization network. They are usually password protected. Used for Policy and procedure manuals, forms and documents such as employee directories, newsletter, catalogs, etc. 51

52.  Extranet: Is a private network that uses Internet technologies to share business information with select corporated partners or key customers. They are also password restricted and provide access to specific suppliers, vendors, partners, or customers. Used to share training manuals, training modules, inventory status, and order information. 52

53.  Web Browser: Is a program that interprets and displays Web pages and enables you to view and interact with a Web page. Examples: Internet Expolrer or Netscape Navigator. 53

54.  Uniform Resource Locator (URL): Is the address of a document or other file accessible on the Internet. Example: www.prosseracademy.orgwww.prosseracademy.org  Hyperlink or Link: Is an element used to connect one Web page to another Web page on the same, or different, Web server located anywhere in the world. 54

55.  Hypertext Markup Language (HTML): Is used to create Web pages. Is the authoring language used to created documents on the World Wide Web.  Tags: Are a set ot special instructions that defines the structure and layout of a Web document and specify how the page is displayed in a browser. 55

56. New Tags:  is used to insert pictures.  Home Page is used for hyperlinks! ... specifies text to be displayed in bold. .... Sets enclosed text to display in italics. 56

57. Today’s Assignment:  Worksheet! – Define Vocabulary Words – Example of hyperlinks! (2 programs) – Study for test on Monday! 57