Creating a Web Site with Links

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

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 link

Enter Initial HTML Tags

Entering a Heading The 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

Click the Edit menu highlight the text you wish to copy

Point to and click Copy

Click the Edit menu Position your cursor where you want to paste the text

Point to and click Paste

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 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 links

Adding an Link add this text

<A HREF=“mailto:webres@isp.com”>webres@isp.com</A>
Link Anatomy <A link to address 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 link

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

Testing the Links Point to and click the link

e-mail address in To: text box
Testing the Links click the close button 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 immediately to the left of “Objective”
Bold the Text Type the tag immediately to the left of “Objective”

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

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

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

Type the tag immediately to the right of “Santos”
Italicize the Text Type the tag 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 
Change Text Color Type Type

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: 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 tag in line 31, type: <IMG SRC=“ovallaeb.gif” BORDER=0 HEIGHT=119 WIDTH=182 ALIGN=RIGHT ALT=“[Purdue Fountain]”>

alternate text

Adding a Text Link to Another Web Site
Type <A HREF=“ 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

link to education target

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 <A HREF=“webreshome.htm”>Return to Web Res home page </A> 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

Creating a Web Site with Links

Similar presentations

Presentation on theme: "Creating a Web Site with Links"— Presentation transcript:

Similar presentations

About project

Feedback

Log in

Auth with social network:

Creating a Web Site with Links

Similar presentations

Presentation on theme: "Creating a Web Site with Links"— Presentation transcript:

Similar presentations

About project

Feedback