1 Start TextEdit 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 anlink 3 Enter Initial HTML Tags 4 Entering a Heading The tag can enhance the heading Various FONT attributes 5 Sample Font Attributes normal text text with color different font face different font size 6 Enter the Heading You should always end the tags in the opposite direction from which you started them heading code 7 Enter the Text 8 Enter the Bulleted Lists Enter two bulleted lists, using the code below: 9 Modified HTML Document code for bulleted lists 10 Web Page Images Classes of Images Inline images External images Image types JPEG GIF Interlaced GIF PNG 11 Image Attributes Attributes that can be used with the tag 12 Inserting a Background Image The BACKGROUND attribute inserts the background image on a Web page 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 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 Copying and Pasting Text highlight the text you wish to copy Click the Edit menu 16 Copying and Pasting Text Point to and click Copy 17 Copying and Pasting Text Position your cursor where you want to paste the text Click the Edit menu 18 Copying and Pasting Text Point to and click Paste 19 Copying and Pasting Text pasted line 20 HTML File Printout 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 Viewing the Web Page home page horizontal rule image changed bullet types horizontal rule image text link to second pagelink background image 23 Testing the Links Point to and click thelink 24 Testing the Linksaddress in To: text box click the close button 25 Testing the Links With the HTML Data Disk in drive A, point to and click the link, sample 26 Testing the Links Second Web page should appear 27 Editing the Second Web Page Open the HTML file 28 sample1.htm 29 Text Formatting Tags 30 Formatted Text Samples bold text normal text BIG text BLOCKQUOTE italicized text Subscript & superscript strikethrough text teletype / monospace text underlined text 31 Bold the Text Type the tag immediately to the left of Objective 32 Bold the Text Type the tag immediately to the right of Objective 33 Bold the Text Repeat the process to bold COMPUTER TECHNOLOGY and PURDUE UNIVERSITY 34 Italicize the Text Type the tag immediately to the left of Marie 35 Italicize the Text Type the tag immediately to the right of Santos 36 Italicize the Text Repeat the process to italicize PURDUE UNIVERSITY 37 Multiple Tags Add these multiple tags 38 Change Text Color Type 39 Change the Bullet Type Type the TYPE=square argument in the tag 40 Change the Bullet Type Repeat the process to change the bullet type in these three places 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 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 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 Image Borders image with border image with border and normal link image with border and visited link 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 Image Alignment image ALIGN=RIGHT 47 Image Alignment image ALIGN=LEFT 48 Image Alignment image ALIGN=TOP 49 Image Alignment image ALIGN=MIDDLE 50 Image Alignment image ALIGN=BOTTOM 51 Inserting an Image with Wrapped Text Click the Notepad button on the taskbar After the tag in line 31, type: 52 Inserting an Image with Wrapped Text 53 Inserting an Image with Wrapped Text alternate text 54 Adding a Text Link to Another Web Site Type Type to end the tag 55 Adding a Text Link to Another Web Site text link 56 Adding an Image Link to Another Web Site HREF for image link ending image link 57 Adding an Image Link to Another Web Site image link 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 Creating Links within a Web Page link to education target 60 Creating Links within a Web Page target named education 61 Setting the Link Targets Set the first two link targets 62 Setting the Link Targets Set the last two link targets 63 Adding Links to the Targets Bulleted list for target menu 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 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 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 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 More About Images HSPACE and VSPACE attributes control the amount of horizontal and vertical space around an image 71 More About Images VSPACE = 0 VSPACE = 20 HSPACE = 0 HSPACE =20 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 Thumbnail Image thumbnail image enlarged image 74 Obtaining Images Images are available from a variety of sources Clip art gallery Create them yourself Scanner Digital Camera Other Web sites 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 Summary Insert a horizontal rule image Add anlink 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 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 What You Should Know HTML Comprehensive Concepts and Techniques Second Edition Project 2 Complete