Creating a Web Site with Links Project 2 Creating a Web Site with Links
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
Objectives 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
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
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 email 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
Introduction to Links image link text link status bar
<BODY LINK=“color” VLINK=“color” ALINK=“color”> 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: <BODY LINK=“color” VLINK=“color” ALINK=“color”>
Introduction to Links normal link (LINK) visited link (VLINK) active link (ALINK)
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
Linking within a Web Page links to targets targets
Linking to Another Web Page within the Same Web Site
Linking to Another Web Site
Linking to E-Mail
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
Start Notepad
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
Enter Initial HTML Tags
Entering a Heading The <FONT> tag can enhance the heading Various FONT attributes
Sample Font Attributes normal text text with color different font face different font size
Enter the Heading You should always end the tags in the heading code You should always end the tags in the opposite direction from which you started them
Enter the Text
Enter the Bulleted Lists Enter two bulleted lists, using the code below:
Modified HTML Document code for bulleted lists
Web Page Images Classes of Images Image types Inline images External images Image types JPEG GIF Interlaced GIF PNG
Image Attributes Attributes that can be used with the <IMG> tag
Inserting a Background Image The BACKGROUND attribute inserts the background image on a Web page
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
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
Copying and Pasting Text Click the Edit menu highlight the text you wish to copy
Copying and Pasting Text Point to and click Copy
Copying and Pasting Text Click the Edit menu Position your cursor where you want to paste the text
Copying and Pasting Text Point to and click Paste
Copying and Pasting Text pasted line
Adding a Link to the Second Web Page The <A> and </A> 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
Adding a Link to the Second Web Page
Adding a Link to Another Web Page Enter the following text into your document
Adding a Link to Another Web Page Add this command before the word “sample” Add this command after the word “sample”
<A HREF=“sample1.htm”>sample</A> Anchor Tag Anatomy <A HREF=“sample1.htm”>sample</A> link to sample1.htm page text used for link end of link
Adding an E-Mail Link It is necessary to instruct visitors to contact you with any information or suggestions The <A> and </A> tags are also used to create email links
Adding an E-Mail Link add this text
<A HREF=“mailto:webres@isp.com”>webres@isp.com</A> E-Mail Link Anatomy <A HREF=“mailto:webres@isp.com”>webres@isp.com</A> link to e-mail address e-mail address end of link
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
HTML File Printout
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
Viewing the Web Page home page horizontal rule image background image changed bullet types changed bullet types horizontal rule image text link to second page e-mail link
Printing the Web Page Click the Print button on the Standard Buttons toolbar
Testing the Links Point to and click the e-mail link
e-mail address in To: text box Testing the Links click the close button e-mail address in To: text box
in drive A, point to and click the link, sample Testing the Links With the HTML Data Disk in drive A, point to and click the link, sample
Second Web page should appear Testing the Links Second Web page should appear
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
sample1.htm
Text Formatting Tags
Formatted Text Samples normal text bold text BIG text BLOCKQUOTE italicized text Subscript & superscript strikethrough text teletype / monospace text underlined text
Type the tag <B> immediately to the left of “Objective” Bold the Text Type the tag <B> immediately to the left of “Objective”
Type the tag </B> immediately to the right of “Objective” Bold the Text Type the tag </B> immediately to the right of “Objective”
Bold the Text Repeat the process to bold “COMPUTER TECHNOLOGY” and “PURDUE UNIVERSITY”
Type the tag <I> immediately to the left of “Marie” Italicize the Text Type the tag <I> immediately to the left of “Marie”
Type the tag </I> immediately to the right of “Santos” Italicize the Text Type the tag </I> immediately to the right of “Santos”
Repeat the process to italicize “PURDUE UNIVERSITY” Italicize the Text Repeat the process to italicize “PURDUE UNIVERSITY”
Multiple Tags Add these multiple tags
Type <FONT COLOR=“#000099”> Change Text Color Type <FONT COLOR=“#000099”> Type </FONT>
Change the Bullet Type Type the TYPE=“square” argument in the <UL> tag
Change the Bullet Type Repeat the process to change the bullet type in these three places
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
colored text bold text square bullets Bold and italicized text square bullets Bold and italicized text square bullets Bold and italicized text square bullets
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
image with border and normal link image with border and visited link Image Borders image with border image with border and normal link image with border and visited link
Image Alignment Format to align images: <IMG SRC=“ovallaeb.gif” ALIGN=RIGHT> To end right-aligned text wrap: <BR CLEAR=RIGHT> To end left-aligned text wrap: Top, Middle, and Bottom alignment
Image Alignment image ALIGN=RIGHT
Image Alignment image ALIGN=LEFT
Image Alignment image ALIGN=TOP
Image Alignment image ALIGN=MIDDLE
Image Alignment image ALIGN=BOTTOM
Inserting an Image with Wrapped Text Click the Notepad button on the taskbar After the <BR> tag in line 31, type: <IMG SRC=“ovallaeb.gif” BORDER=0 HEIGHT=119 WIDTH=182 ALIGN=RIGHT ALT=“[Purdue Fountain]”>
Inserting an Image with Wrapped Text
Inserting an Image with Wrapped Text alternate text
Adding a Text Link to Another Web Site Type <A HREF=“http://www.purdue.edu”> Type </A> to end the tag
Adding a Text Link to Another Web Site
Adding an Image Link to Another Web Site ending image link HREF for image link
Adding an Image Link to Another Web Site
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
Creating Links within a Web Page link to education target
Creating Links within a Web Page target named education
Setting the Link Targets Set the first two link targets
Setting the Link Targets Set the last two link targets
Adding Links to the Targets Bulleted list for target menu
Linking to the Top of the Page Place a target named “top” at the top of the page, just underneath the body tag <A NAME=“top”></A> Create links to the top target throughout the page <A HREF=“#top”>To Top</A> Line 38 Line 80 Line 89
Link Back to Home Page Click the line just above the </BODY> tag Type <P><I><A HREF=“webreshome.htm”>Return to Web Res home page </A></I></P> Save the HTML file Print the file
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
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
More About Images HSPACE and VSPACE attributes control the amount of horizontal and vertical space around an image
More About Images VSPACE = 0 VSPACE = 20 HSPACE = 0 HSPACE =20
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
Thumbnail Image thumbnail image enlarged image
Obtaining Images Images are available from a variety of sources Clip art gallery Create them yourself Scanner Digital Camera Other Web sites
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
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
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
What You Should Know
Project 2 Complete