Ddpz2613 topic3 linking

HTML
Concepts and Techniques
Fifth Edition
Chapter 3
Creating Web Pages
with Links, Images,
and Formatted Text

Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 2
Chapter Objectives
• Describe linking terms and definitions
• Create a home page and enhance a Web page
using images
• Align and add bold, italics, and color to text
• Change the bullet type used in an unordered list
• Add a text link to a Web page in the same Web
site

Chapter Objectives
• Add an e-mail link
• Use absolute and relative paths
• Save and view an HTML file and test the links
• Open an HTML file
• Add an image with wrapped text

Chapter Objectives
• Add a text link to a Web page on another Web
site
• Add links to targets within a Web page
• Copy and paste HTML code
• Add an image link to a Web page in the same
Web site

General Project Guidelines - Plan Ahead
• Plan the Web site
• Analyze the need
• Choose the content for the Web page
• Determine how the pages will link to one another
• Establish what other links are necessary
• Create the Web page and links
• Test all Web pages within the Web site

Using Links on a Web Page
• Many different Web page elements, including text, images
and animations can serve as links.
• Text and images are the elements most widely used as
links.
• When text identifies a link, it often appears as underlined
text, in a color different from the main Web page text.
• Link Color Variation
– Normal link that is blue and underlined
– Visited link that is purple and underlined
– When mouse pointer hovers over a text link, it turns into a
pointing hand.

Link Color Attributes for <body> tag
Attribute Function
link • Normal link
• Controls the color of a normal unvisited link
• Default color usually is blue
vlink • Visited link
• Controls the color of a link that has been clicked
• Default color usually is green or purple
alink • Active link
• Controls the color of a link immediately after the
mouse clicks the hyperlink
• Default color usually is green or red

Types of Linking
1. Linking to Another Web Page within the Same Web Site
<a href=“URL”>linktext</a>
<a href=“specials.html”>monthly special </a>
2. Linking to a Web Page in Another Web Site
<a href=“http://en.wikipedia.cor/wiki/Pasta”>
3. Linking within a Web Page
4. Linking to an E-mail Address
<a href=“mailto:address@email.com”>linktext</a>

Starting Notepad
• Click the Start button on the Windows Vista taskbar to
display the Start menu
• Click All Programs at the bottom of the left pane on the
Start menu to display the All Programs list
• Click Accessories in the All Programs list
• Click Notepad in the Accessories list to display the
Notepad window
• If the Notepad window is not maximized, click the
Maximize button on the Notepad title bar to maximize it
• Click Format on the menu bar
• If the Word Wrap command does not have a check mark
next to it, click Word Wrap

Entering HTML Tags to Define
the Web Page Structure
• Enter the HTML code shown on the following slide
• Press ENTER at the end of each line. If you make an
error as you are typing, use the BACKSPACE key to
delete all the characters back to and including the
incorrect characters, then continue typing
• Compare what you typed to Figure 3–9 on page HTML
92. If you notice errors, use your mouse pointer or
ARROW keys to move the insertion point to the right of
each error and use the BACKSPACE key to correct the
error
• Position the insertion point on the blank line between the
<body> and </body> tags

Entering HTML Tags to Define
the Web Page Structure

Adding an Image
• Click the blank line below the <body> tag (line
12) and type <img src=“pdlogo.gif”
width=”711” height=”155” alt=”Pasta
Divine logo”/> and then press the ENTER
key

Adding an Image

Adding a Left-Aligned Heading
with a Font Color
• With the insertion point on line 13, type
<h1>Welcome to
the Valley's best pasta place!
</h1> and then press the ENTER key

Adding a Left-Aligned Heading
with a Font Color

Entering a Paragraph of Text
• With the insertion point on line 14 enter the HTML
code shown in Table 3–4 on page HTML 95 as
the first paragraph in the HTML file. Press
ENTER at the end of each line
• Press the ENTER key again

Entering a Paragraph of Text

Creating Unordered (Bulleted) Lists
• If necessary, click line 21
• Enter the HTML code shown in Table 3-5 on
page HTML 96
• After the </ul> in line 26, press the ENTER key
twice to insert a blank line on line 27 and end on
line 28

Creating Unordered (Bulleted) Lists

Adding Paragraphs of Text
• If necessary, click line 28
• Enter the HTML code shown in Table 3–6 on
page HTML 97 to insert the additional paragraphs
of text. Press the ENTER key at the end of each
line

Adding Paragraphs of Text

Adding a Text Link to Another Web Page
within the Same Web Site
• Click immediately to the left of the m in the word
monthly on line 29
• Type <a href=”specials.html”> to start
the link, setting the Web page specials.html as
the linked Web page
• Click immediately to the right of the s in specials
and before the comma on line 29. Type </a> to
close the link

Adding a Text Link to Another Web Page
within the Same Web Site

Adding an E-Mail Link
• With the insertion point at the beginning of line 35, to
the left of the p in pastadivine, type
<a href=”mailto: pastadivine@isp.com”>
as the start of the e-mail link. This will link to the e-
mail address pastadivine@isp.com when the link is
clicked
• Click immediately after the m in isp.com and before
the period in the e-mail address text on line 35
• Type </a> to end the e-mail link as shown on the
following slide

Adding an E-Mail Link

Adding a Subject Together with Body
Message Text
• Type
<a href=mailto: pastadivine@isp.com?
subject=Monthly Specials&body=What
are the specials?> as the tag

Adding a Text Link to a Web Page in
Another Web Site
• Click immediately to the left of the h in history on
line 31 and type <a href=”http://
en.wikipedia.org/wiki/Pasta”> to add
the text link that will connect to the external Web
site when clicked
• Click immediately to the right of the a in pasta on
line 31 and type </a> to end the tag as shown
on the following slide

Adding a Text Link to a Web Page in
Another Web Site

Saving and Printing an HTML File
• With a USB flash drive connected to one of the
computer’s USB ports, click File on the Notepad menu bar
and then click Save As. Type pastadivine.html in the File
name text box (do not press ENTER)
• If Computer is not displayed in the Favorite Links section,
drag the top or bottom edge of the Save As dialog box
until Computer is displayed. If necessary, collapse the
Folders pane to see the Computer link
• Click Computer in the Favorite Links section to display a
list of available drives
• If necessary, scroll until UDISK 2.0 (G:) is displayed in the

• If necessary, open the Chapter03ChapterFiles folder
• Click the Save button in the Save As dialog box to save
the file on the USB flash drive with the name
pastadivine.html
• Click File on the menu bar, click Print on the File menu,
and then click the Print button in the Print dialog box to
print a hard copy of the pastadivine.html file

Validating a Web Page
• Click the Start button on the Windows Vista taskbar
to display the Start menu
• Click the Internet icon in the pinned items list on the
Start menu to start Internet Explorer. If necessary,
click the Maximize button to maximize the browser
window
• Click the Address bar to select the URL in the
Address bar
• Type validator.w3.org to replace the current
entry then press the ENTER key.
• Click the Validate by File Upload tab

• Click the Browse button
• Locate the pastadivine.html file on your storage
device and click the file name
• Click the Open button in the Choose file dialog
box and the file name will be inserted into the File
box
• Click the Check button. The resulting validation
should be displayed as shown on the following
slide

Viewing a Web Page
• In Internet Explorer, click the Address bar to
select the URL in the Address bar
• Type
g:Chapter03ChapterFilespastadivin
e.html to display the new URL in the Address
bar and then press the ENTER key

Viewing a Web Page

Testing Links in a Web Page
• With the Pasta Divine home page displayed in the browser,
point to the e-mail link, pastadivine@isp.com and then click the
link to open the default e-mail program with the address
pastadivine@isp.com in the To: text box as shown in Figure 3–
24 on page HTML 108
• Click the Close button in the New Message window. If a dialog
box asks if you want to save changes, click No
• Click the history of pasta link to test the external link in the Web
page. Close the browser window or use the Back button to
return to the Pasta Divine home page
• With the USB flash drive in drive G, point to the monthly
specials link and click the link. The secondary Web page,
specials.html, is displayed, although it is not completed

Testing Links in a Web Page

Printing a Web Page
• Close the browser window or click the Back
button on the Standard toolbar to return to the
Pasta Divine home page
• Click the Print icon on the Command bar
• Once the Pasta Divine home page is printed,
click the monthly specials link to return to that
Web page

Printing a Web Page

Opening an HTML File
• Click the pastadivine Notepad button on the taskbar
• With a USB flash drive connected to one of the
computer’s USB ports, click File on the menu bar and
then click Open
• If Computer is not displayed in the Favorite Links section,
drag the top or bottom edge of the Open dialog box until
Computer is displayed
• Click Computer in the Favorite Links section to display a

• If necessary, scroll until UDISK 2.0 (G:) is displayed
in the list of available drives
• If necessary, navigate to the USB drive (G:). Click the
Chapter03 folder, and then click the ChapterFiles
folder in the list of available folders
• If necessary, click the file type box arrow, and then
click All Files. Click specials.html in the list of files
• Click the Open button in the Open dialog box to
display the HTML code for the specials.html Web
page as shown on the following slide

Formatting Text
HTML Tags Function
 Display text as bold
<big> </big> Increase the font size
<blockquote> Designates a long quotation
 Display text with emphasis or italicized
 Display text as italicized
<pre> </pre> Sets enclosed text as preformatted material
 Decrease the font size
 Displays text with strong emphasis
 Displays text as subscript
 Displays text as superscript
<tt> </tt> Displays text as teletype or monospace text
 Displays text as underlined

Formatting Text in Bold
• Click immediately to the left of the F in Fettuccine
on line 34. Type as the start tag
• Click immediately to the right of the o in Alfredo
on line 34, and then type as the end
tag to end the logical bold formatting style
• Repeat the first step to bold the other two
occurrences of section headers for the words
Lasagna and Ravioli on lines 65 and 92 to
surround the words with a logical bold style

Formatting Text in Bold

Adding an Image with Wrapped Text
• Highlight the line  as shown in Figure 3–36 on page HTML 120
• Type <img src=”fettuccine. jpg”
width=”212” height=”203” alt=”Fettuccine”
align=”left” hspace=”5” /> and do not press
the ENTER key. This HTML code inserts an image named
fettuccine.jpg that is left-aligned on the Web page, with
text wrapped to its right and with five pixels of space
around the image horizontally
• Highlight the line  on line 66

• Type <img src=”lasagna.jpg” width=”308”
height=”205” alt=”Lasagna” align=”right”
hspace=”5” /> (do not press ENTER) to insert a
right-aligned image with wrapped text
• Highlight the line  on line 93
• Type <img src=”ravioli.jpg” width=”200”
height=”260” alt=”Ravioli” align=”left”
hspace=”5” /> (do not press ENTER) to insert a
left-aligned image with wrapped text

Clearing the Text Wrapping
• Highlight the line  on
line 60, and then type as the
tag
• Highlight the line 
on line 87, and then type as
the tag
• Highlight the line 
on line 118, and then type as
the tag to clear the text wrapping for both left- and right-
aligned images as displayed on the following slide

Clearing the Text Wrapping

Setting Link Targets
• Highlight the line  on line 33
• Type <a name=”fettuccine”></a> to create a link
target named fettuccine
• Highlight the line  on line 64
• Type <a name=”lasagna”></a> to create a link target
named lasagna
• Highlight the line 
• Type <a name=”ravioli”></a> to create a link target
named ravioli

Setting Link Targets

Adding Links to Link Targets
within a Web Page
• Highlight the line 
• Type <li><a href=”#fettuccine”>Fettuccine
Alfredo</a></li> to create a link target named
fettuccine
• Highlight the line 
• Type <li><a
href=”#lasagna”>Lasagna</a></li> to create a
link target named lasagna
• Highlight the line 
• Type <li><a
href=”#ravioli”>Ravioli</a></li> to create a
link target named ravioli

Adding Links to Link Targets
within a Web Page

Adding Links to a Target
at the Top of the Page
• Highlight the line  on line 12
• Type <a name=”top”></a> as the tag that will
create a target at the top of the Web page named
top
• Highlight the line  to position the insertion point on the
line 62
• Type <a href=”#top”>To top</a> as the tag

Adding Links to a Target
at the Top of the Page

Copying and Pasting HTML Code
• Highlight the HTML code <a href=“#top”>To top</a> on line 62
• Click Edit on the menu bar and then click Copy
• Highlight the line  on line 89 to position the pointer
• Click Edit on the menu bar and then click Paste to
paste the HTML code that you copied above
• Highlight the line  on line 120. Repeat the previous step to
paste the HTML code on line 120

Copying and Pasting HTML Code

Adding an Image Link to a Web Page
• Highlight the line  on line 14
• Type <a href=”pastadivine.html”> as the
tag to start a link that will use the image
pdlogosm.gif to link back to the home page as
shown in Figure 3–48 on page HTML 128
• Click immediately to the right of the > in the
attribute alt=“Back to home page” /> on line 15

• Type </a> as the tag to end the link as shown in
Figure 3-49 on page HTML 129
• Click immediately to the right of the second “ in
alt=“Back to home page” /> to position the
insertion point
• Press the SPACEBAR, then type border=”0”
as the attribute to create a borderless link as
shown on the following slide

Saving and Printing the HTML File
• Click File on the menu bar, and then Save on the
File menu to save the HTML file as specials.html
• Click File on the menu bar, click Print on the File
menu, and then click the Print button in the Print
dialog box to print the HTML code

Saving and Printing the HTML File

Validating, Viewing, and Testing a Web
Page
• Open a new browser window and go to validator.w3.org
• Click the Validate by File Upload tab, browse to the
specials.html Web page, and then click Open
• Click the Check button to determine if the Web page is
valid. If the file is not valid, make corrections and
revalidate
• Click the Pasta Divine Monthly Specials button on the
taskbar to view the page in your browser
• Click the Refresh button on the Standard toolbar to
display the changes made to the Web page, which should
now look like Figure 3–27 on page HTML 111

Printing a Web Page
• Click the Print button on the Command bar

Quitting Notepad and a Browser
• Click the Close button on all open browser
windows
• Click the Close button on the Notepad window

Chapter Summary
• Describe linking terms and definitions
• Create a home page and enhance a Web page
using images
• Align and add bold, italics, and color to text
• Change the bullet type used in an unordered list
• Add a text link to a Web page in the same Web
site

Chapter Summary
• Add an e-mail link
• Use absolute and relative paths
• Save and view an HTML file and test the links
• Open an HTML file
• Add an image with wrapped text

Chapter Summary
• Add a text link to a Web page on another Web
site
• Add links to targets within a Web page
• Copy and paste HTML code
• Add an image link to a Web page in the same
Web site

HTML
Concepts and Techniques
Fifth Edition
Chapter 3 Complete
Creating Web Pages
with Links, Images,
and Formatted Text

Ddpz2613 topic3 linking

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à Ddpz2613 topic3 linking

Similaire à Ddpz2613 topic3 linking (20)

Plus de Mohamad Sahiedan

Plus de Mohamad Sahiedan (18)

Ddpz2613 topic3 linking