HTML Comprehensive Concepts and Techniques Second Edition Project 2 Creating a Web Site with Links

2 Objectives  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

3 Objectives  Insert a horizontal rule image  Add an 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

4 Objectives  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

5 Introduction to Links  Hyperlinks (or links) are used to connect a Web page to another Web page  Links can also be used to create an link  Either text or an image can be used as a hotspot for a link –The mouse pointer usually changes when positioned over a hotspot –URL appears on status bar when the mouse pointer is over a hotspot

6 Introduction to Links status bar text link image link

7 Introduction to Links  With text links, always use descriptive text as the clickable word(s)  Unless otherwise stated, the color of text links is dependent upon browser- defined defaults  Format to change link colors:

8 Introduction to Links normal link (LINK) visited link (VLINK) active link (ALINK)

9 Linking within a Web Page  Allows visitors to move quickly from one section of the Web page to another  Important for large Web pages –Commands –Table of contents

10 Linking within a Web Page links to targets targets

11 Linking to Another Web Page within the Same Web Site

12 Linking to Another Web Site

13 Linking to

14 Start Notepad  Click the Start button on the taskbar and then point to Programs on the Start menu  Point to Accessories on the Programs submenu and then point to Notepad on the Accessories submenu  Click Notepad  If necessary, click the Maximize button  Click Edit on the menu bar  If Word Wrap is not checked, click Word Wrap

15 Start Notepad

16 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 link

17 Enter Initial HTML Tags

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

19 Sample Font Attributes normal text text with color different font face different font size

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

21 Enter the Text

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

23 Modified HTML Document code for bulleted lists

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

25 Image Attributes  Attributes that can be used with the tag

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

27 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

28 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

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

30 Copying and Pasting Text Point to and click Copy

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

32 Copying and Pasting Text Point to and click Paste

33 Copying and Pasting Text pasted line

34 Adding a Link to the Second Web Page  The and tags are used to create links –Referred to as anchor tags  Use the Hyperlink REFerence (HREF) attribute to link to another Web page  Two items required –Text or image to act as hotspot –Name of the file to which you want to link

35 Adding a Link to the Second Web Page

36 Adding a Link to Another Web Page Enter the following text into your document

37 Adding a Link to Another Web Page Add this command before the word “sample” Add this command after the word “sample”

38 Anchor Tag Anatomy sample link to sample1.htm pagetext used for link end of link

39 Adding an Link  It is necessary to instruct visitors to contact you with any information or suggestions  The and tags are also used to create links

40 Adding an Link add this text

41 Link Anatomy link to address address end of link

42 Saving and Printing the HTML File  Insert the HTML Data Disk in drive A:  Select Save As from the File menu –Save to your A: drive –Save with the filename webreshome.htm  Click the Save button  Select Print from the File menu

43 HTML File Printout

44 Viewing the Web Page  To View the Web Page –Start your browser –Maximize your browser window –Click the Address bar –Type a:\webreshome.htm in the Address text box –Press the ENTER key

45 Viewing the Web Page home page horizontal rule image changed bullet types horizontal rule image text link to second page link background image

46 Printing the Web Page  Click the Print button on the Standard Buttons toolbar

47 Testing the Links Point to and click the link

48 Testing the Links address in To: text box click the close button

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

50 Testing the Links Second Web page should appear

51 Editing the Second Web Page  Open the HTML file –Click the Notepad button on the taskbar –With the HTML Data Disk in drive A, select Open from the File menu –Select 3½ Floppy (A:) from the Look in box –Select All Files (*.*) from the Files of type box –Click sample1.htm –Click the Open button

52 sample1.htm

53 Text Formatting Tags

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

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

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

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

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

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

60 Italicize the Text Repeat the process to italicize “PURDUE UNIVERSITY”

61 Multiple Tags Add these multiple tags

62 Change Text Color Type

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

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

65 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

66 colored text bold text square bullets Bold and italicized text square bullets Bold and italicized text square bullets Bold and italicized text square bullets

67 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

68 Image Borders image with border image with border and normal link image with border and visited link

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

70 Image Alignment image ALIGN=RIGHT

71 Image Alignment image ALIGN=LEFT

72 Image Alignment image ALIGN=TOP

73 Image Alignment image ALIGN=MIDDLE

74 Image Alignment image ALIGN=BOTTOM

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

76 Inserting an Image with Wrapped Text

77 Inserting an Image with Wrapped Text alternate text

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

79 Adding a Text Link to Another Web Site text link

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

81 Adding an Image Link to Another Web Site image link

82 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

83 Creating Links within a Web Page link to education target

84 Creating Links within a Web Page target named education

85 Setting the Link Targets Set the first two link targets

86 Setting the Link Targets Set the last two link targets

87 Adding Links to the Targets Bulleted list for target menu

88 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

89 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

90

91 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

92

93 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

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

95 More About Images VSPACE = 0 VSPACE = 20 HSPACE = 0 HSPACE =20

96 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

97 Thumbnail Image thumbnail image enlarged image

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

HTML Comprehensive Concepts and Techniques Second Edition Adobe Photoshop Adobe Photoshop is available for both the PC and the Mac platform.

100 Photoshop Basics  Adobe Photoshop allows you to edit pictures taken with a digital camera, scanned photos, or pictures from the web.  Web Developers use Photoshop often to work on pictures for a web site  iPhoto and Dell Picture Studio are other picture editors that can used also, but do not have all the features of Photoshop

101 Saving Pictures in Photoshop  You can save pictures for the web using Photoshop’s “Save for Web” option in the file menu. This allows you to export a picture for use on a web page

102 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

103 Summary  Insert a horizontal rule image  Add an 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

104 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  Basics of Photoshop

105 What You Should Know

HTML Comprehensive Concepts and Techniques Second Edition Project 2 Complete