View
217
Download
1
Category
Tags:
Preview:
Citation preview
HTMLComprehensive Concepts and TechniquesSecond Edition
Project 2
Creating a Web Sitewith Links
2
Objectives
Describe linking terms and definitionsAdd a link to another Web pageCreate a home pageEnhance a Web page using imagesAdd bold, italics, and color to textChange bullet typeInsert a background image
3
Objectives
Insert a horizontal rule imageAdd an e-mail linkView the HTML file and test the linksEdit the second Web pageInsert an image and wrap text around
an imageAdd a text link to another Web site
4
Objectives
Add an image link to another Web siteCreate links within a Web pageSet link targetsAdd links to set targetsDescribe types of image filesControl image sizingLocate 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 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
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:
<BODY LINK=“color” VLINK=“color” ALINK=“color”>
8
Introduction to Links
normal link (LINK)
visited link (VLINK)
active link (ALINK)
9
Linking within a Web PageAllows visitors to move quickly from
one section of the Web page to another
Important for large Web pages– Commands– Table of contents
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 NotepadIf necessary, click the Maximize buttonClick Edit on the menu barIf Word Wrap is not checked, click Word
Wrap
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 e-mail link
18
Entering a Heading
The <FONT> 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 alwaysend the tags in the opposite directionfrom which you
started them
heading code
24
Web Page Images
Classes of Images– Inline images– External images
Image types– JPEG– GIF– Interlaced GIF– PNG
26
Inserting a Background ImageThe BACKGROUND attribute inserts
the background image on a Web page
27
Inserting a Horizontal Rule ImageSetting the HEIGHT and WIDTH
attribute helps the image display fasterDefining an image too large will make it
appear grainy
28
Copying and Pasting TextEliminates the need to type the same
command more than onceHelps eliminate errors in typing
commands repeatedlyCopy and Paste functionality is also
available in other Windows applications
29
Copying and Pasting Text
highlight the textyou wish to copyClick the Edit menu
31
Copying and Pasting Text
Position your cursor where you want to paste the text
Click the Edit menu
34
Adding a Link to the Second Web PageThe <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
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 beforethe word “sample”
Add this command afterthe word “sample”
38
Anchor Tag Anatomy
<A HREF=“sample1.htm”>sample</A>
link to sample1.htm page text used for link
end oflink
39
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
41
E-Mail Link Anatomy
<A HREF=“mailto:webres@isp.com”>webres@isp.com</A>
link to e-mail address e-mailaddress
end oflink
42
Saving and Printing the HTML FileInsert 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 buttonSelect Print from the File menu
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 ruleimage
changed bullet types
changed bullet types horizontal ruleimage
text link to second pagee-mail link
background image
46
Printing the Web Page
Click the Print button on the Standard Buttons toolbar
49
Testing the Links
With the HTML Data Diskin drive A, point to and click
the link, sample
51
Editing the Second Web PageOpen 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
54
Formatted Text Samples
bold text
normal text
BIG text
BLOCKQUOTE
italicized textSubscript &superscript
strikethrough text
teletype / monospace text
underlined text
57
Bold the Text
Repeat the process to bold“COMPUTER TECHNOLOGY”
and“PURDUE UNIVERSITY”
59
Italicize the Text
Type the tag </I> immediatelyto the right of “Santos”
64
Change the Bullet Type
Repeat the process to changethe bullet type in these
three places
65
Preview the Page in Your BrowserClick the File menu and select SaveActivate your browserClick the Refresh button on the
Standard Buttons toolbar
66
colored text
bold 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 withborder
image withborder andnormal link
image withborder andvisited link
69
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:
<BR CLEAR=RIGHT>Top, Middle, and Bottom alignment
75
Inserting an Imagewith Wrapped TextClick the Notepad button on the
taskbarAfter the <BR> tag in line 31, type:<IMG SRC=“ovallaeb.gif” BORDER=0 HEIGHT=119 WIDTH=182 ALIGN=RIGHT ALT=“[Purdue Fountain]”>
78
Adding a Text Linkto Another Web Site
Type <A HREF=“http://www.purdue.edu”>
Type </A> to end the tag
80
Adding an Image Linkto Another Web Site
HREF forimage linkending
image link
82
Creating Links withina Web PageThese links are especially useful on
long Web pagesLinks at the top of the page point to
areas further down the pageSet the targets for the links
– A target is a section within a Web page to which you want to link
88
Linking to the Top of the PagePlace 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 38Line 80Line 89
89
Link Back to Home PageClick the line just above the </BODY>
tagType <P><I><A HREF=“webreshome.htm”>Return to Web Res home page </A></I></P>
Save the HTML filePrint the file
91
Print the Web Page
Click the Sample Resume button on the taskbar
Click the Refresh buttonClick the Print button on the Standard
Buttons toolbar
93
Testing the Links
Very important stageClick on the links to ensure they workTest 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
96
Thumbnail Images
Smaller versions of original imagesUsed as a link that loads the full-sized
image when clickedThumbnails load more quicklyCreate a thumbnail version by editing
the file in a graphics editor and saving it with a different filename
98
Obtaining Images
Images are available from a variety of sources– Clip art gallery– Create them yourself– Scanner– Digital Camera– Other Web sites
HTMLComprehensive Concepts and TechniquesSecond 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 definitionsAdd a link to another Web pageCreate a home pageEnhance a Web page using imagesAdd bold, italics, and color to textChange bullet typeInsert a background image
103
Summary
Insert a horizontal rule imageAdd an e-mail linkView the HTML file and test the linksEdit the second Web pageInsert an image and wrap text around
an imageAdd a text link to another Web site
104
Summary
Add an image link to another Web siteCreate links within a Web pageSet link targetsAdd links to set targetsDescribe types of image filesControl image sizingLocate imagesBasics of Photoshop
Recommended