1. 1 Start TextEdit

2. 2 Creating a Home Page  A home page is the main page of a Web site –Visitors usually view the home page first –Identify the purpose of your Web site –Links should be apparent –Include an e-mail link

3. 3 Enter Initial HTML Tags

4. 4 Entering a Heading  The tag can enhance the heading  Various FONT attributes

5. 5 Sample Font Attributes normal text text with color different font face different font size

6. 6 Enter the Heading You should always end the tags in the opposite direction from which you started them heading code

7. 7 Enter the Text

8. 8 Enter the Bulleted Lists  Enter two bulleted lists, using the code below:

9. 9 Modified HTML Document code for bulleted lists

10. 10 Web Page Images  Classes of Images –Inline images –External images  Image types –JPEG –GIF –Interlaced GIF –PNG

11. 11 Image Attributes  Attributes that can be used with the tag

12. 12 Inserting a Background Image  The BACKGROUND attribute inserts the background image on a Web page

13. 13 Inserting a Horizontal Rule Image  Setting the HEIGHT and WIDTH attribute helps the image display faster  Defining an image too large will make it appear grainy

14. 14 Copying and Pasting Text  Eliminates the need to type the same command more than once  Helps eliminate errors in typing commands repeatedly  Copy and Paste functionality is also available in other Windows applications

15. 15 Copying and Pasting Text highlight the text you wish to copy Click the Edit menu

16. 16 Copying and Pasting Text Point to and click Copy

17. 17 Copying and Pasting Text Position your cursor where you want to paste the text Click the Edit menu

18. 18 Copying and Pasting Text Point to and click Paste

19. 19 Copying and Pasting Text pasted line

20. 20 HTML File Printout

21. 21 Viewing the Web Page  To View the Web Page –Start your browser –Maximize your browser window –Click on the File Menu –Go to “Open File” –Locate your web page –Press the “OPEN” key

22. 22 Viewing the Web Page home page horizontal rule image changed bullet types horizontal rule image text link to second page e-mail link background image

23. 23 Testing the Links Point to and click the e-mail link

24. 24 Testing the Links e-mail address in To: text box click the close button

25. 25 Testing the Links With the HTML Data Disk in drive A, point to and click the link, sample

26. 26 Testing the Links Second Web page should appear

27. 27 Editing the Second Web Page  Open the HTML file

28. 28 sample1.htm

29. 29 Text Formatting Tags

30. 30 Formatted Text Samples bold text normal text BIG text BLOCKQUOTE italicized text Subscript & superscript strikethrough text teletype / monospace text underlined text

31. 31 Bold the Text Type the tag immediately to the left of “Objective”

32. 32 Bold the Text Type the tag immediately to the right of “Objective”

33. 33 Bold the Text Repeat the process to bold “COMPUTER TECHNOLOGY” and “PURDUE UNIVERSITY”

34. 34 Italicize the Text Type the tag immediately to the left of “Marie”

35. 35 Italicize the Text Type the tag immediately to the right of “Santos”

36. 36 Italicize the Text Repeat the process to italicize “PURDUE UNIVERSITY”

37. 37 Multiple Tags Add these multiple tags

38. 38 Change Text Color Type

39. 39 Change the Bullet Type Type the TYPE=“square” argument in the tag

40. 40 Change the Bullet Type Repeat the process to change the bullet type in these three places

41. 41 Preview the Page in Your Browser  Click the File menu and select Save  Activate your browser  Click the Refresh button on the Standard Buttons toolbar

42. 42 colored text bold text square bullets Bold and italicized text square bullets Bold and italicized text square bullets Bold and italicized text square bullets

43. 43 Image Borders  A border on an image makes the image display as if it has a frame around it  If the image is a link, the default (or selected) link color will be the color of the border

44. 44 Image Borders image with border image with border and normal link image with border and visited link

45. 45 Image Alignment  Format to align images:  To end right-aligned text wrap:  To end left-aligned text wrap:  Top, Middle, and Bottom alignment

46. 46 Image Alignment image ALIGN=RIGHT

47. 47 Image Alignment image ALIGN=LEFT

48. 48 Image Alignment image ALIGN=TOP

49. 49 Image Alignment image ALIGN=MIDDLE

50. 50 Image Alignment image ALIGN=BOTTOM

51. 51 Inserting an Image with Wrapped Text  Click the Notepad button on the taskbar  After the tag in line 31, type:

52. 52 Inserting an Image with Wrapped Text

53. 53 Inserting an Image with Wrapped Text alternate text

54. 54 Adding a Text Link to Another Web Site Type Type to end the tag

55. 55 Adding a Text Link to Another Web Site text link

56. 56 Adding an Image Link to Another Web Site HREF for image link ending image link

57. 57 Adding an Image Link to Another Web Site image link

58. 58 Creating Links within a Web Page  These links are especially useful on long Web pages  Links at the top of the page point to areas further down the page  Set the targets for the links –A target is a section within a Web page to which you want to link

59. 59 Creating Links within a Web Page link to education target

60. 60 Creating Links within a Web Page target named education

61. 61 Setting the Link Targets Set the first two link targets

62. 62 Setting the Link Targets Set the last two link targets

63. 63 Adding Links to the Targets Bulleted list for target menu

64. 64 Linking to the Top of the Page  Place a target named “top” at the top of the page, just underneath the body tag  Create links to the top target throughout the page To Top Line 38 Line 80 Line 89

65. 65 Link Back to Home Page  Click the line just above the tag  Type Return to Web Res home page  Save the HTML file  Print the file

66. 66

67. 67 Print the Web Page  Click the Sample Resume button on the taskbar  Click the Refresh button  Click the Print button on the Standard Buttons toolbar

68. 68

69. 69 Testing the Links  Very important stage  Click on the links to ensure they work  Test the Web pages in more than one browser to insure that the Web pages display as you expect

70. 70 More About Images  HSPACE and VSPACE attributes control the amount of horizontal and vertical space around an image

71. 71 More About Images VSPACE = 0 VSPACE = 20 HSPACE = 0 HSPACE =20

72. 72 Thumbnail Images  Smaller versions of original images  Used as a link that loads the full-sized image when clicked  Thumbnails load more quickly  Create a thumbnail version by editing the file in a graphics editor and saving it with a different filename

73. 73 Thumbnail Image thumbnail image enlarged image

74. 74 Obtaining Images  Images are available from a variety of sources –Clip art gallery –Create them yourself –Scanner –Digital Camera –Other Web sites

75. 75 Summary  Describe linking terms and definitions  Add a link to another Web page  Create a home page  Enhance a Web page using images  Add bold, italics, and color to text  Change bullet type  Insert a background image

76. 76 Summary  Insert a horizontal rule image  Add an e-mail link  View the HTML file and test the links  Edit the second Web page  Insert an image and wrap text around an image  Add a text link to another Web site

77. 77 Summary  Add an image link to another Web site  Create links within a Web page  Set link targets  Add links to set targets  Describe types of image files  Control image sizing  Locate images

78. 78 What You Should Know

79. HTML Comprehensive Concepts and Techniques Second Edition Project 2 Complete