Project 3 - East Mississippi Community College

Transcript Project 3 - East Mississippi Community College

HTML
Concepts and Techniques
Fifth Edition
Chapter 3
Creating Web Pages
with Links, Images,
and Formatted Text
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
• 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 3: Creating Web Pages with Links, Images, and Formatted Text
2
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
Chapter 3: Creating Web Pages with Links, Images, and Formatted Text
3
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
Chapter 3: Creating Web Pages with Links, Images, and Formatted Text
4
Get Organized
• Go to your home directory (H:)
• Double-click on the Web Dev or HTML directory that you
created.
• Create Ch. 3 folder
• All work you do today, put in the Ch3 folder.
• Go to Public/HTML Stuff/Chapter03/ChapterFiles
• There are 6 items in there. Copy and Paste these to your
Ch. 3 folder
• Continue to separate work by chapters throughout the
remainder of this semester
• NOW, read the Project – Pasta Divine Web Sit on pg.82
Project 3: Creating Web Pages with Links, Images, and Formatted Text
5
Links
•
Text Links –
–
–
–
•
Image Links –
–
•
•
use descriptive words..not Click
here
Underlined, different color text
IE defaults
• Initial link – blue
• Visited link – purple
• Active link - varies
above colors apply to borders
around images
Moving a mouse pointer over a
link causes it to change into a
pointing hand.
URL of the link appears on the
status bar.
Project 3: Creating Web Pages with Links, Images, and Formatted Text
6
Links (pg. 86-89)
• To override the default colors for links…
• <body link=“color” vlink=“color” alink=“color”>
– Link – Normal link (unvisited link)
– Vlink – visited link (already been clicked)
– Alink – Active link (color of link immediately after
the mouse clicks the hyperlink)
• Can link to
–
–
–
–
another web page on the same web site
another web page on a different web site
somewhere within the web page
Email address
Project 3: Creating Web Pages with Links, Images, and Formatted Text
7
Entering HTML Tags to Define
the Web Page Structure
• Pull up one of your old projects (that validated correctly!)
• Clean out all of the STUFF until it looks like the table on
the bottom of pg. 91.
• Save this file as ‘structure.html’.
• This will be your starting point for all future projects.
• Some of you may have already created a template which
is fine. Just make sure it looks like pg. 91-92
• The exception should be the !doctype statement that we
corrected upon validation…LEAVE IT ALONE…don’t
attempt to make it match pg. 91.
Chapter 3: Creating Web Pages with Links, Images, and Formatted Text
8
Entering HTML Tags to Define
the Web Page Structure
Chapter 3: Creating Web Pages with Links, Images, and Formatted Text
9
Adding an Image
• Do bullet 1 on pg. 93 to add an image to your
document.
Chapter 3: Creating Web Pages with Links, Images, and Formatted Text
10
Adding a Left-Aligned Heading
with a Font Color
• The most frequently used font attribute is size
• Size can be 1-7, but 3 is the default.
• Colors are the same as those for the background
• Other attributes for the font tag
– Face=“fontname” – changes the font-type. If a browser can’t
display the font requested, it will use its default font.
– Size=“x” – X may be an absolute size (1-7) or a relative size (+2, 1) to the last preset size.
• Headings are LEFT aligned by default, if you want center
or right alignment, you must specify.
Chapter 3: Creating Web Pages with Links, Images, and Formatted Text
11
Adding a Left-Aligned Heading
with a Font Color
Do #1 on pg. 95 – adding a heading with font
color
Chapter 3: Creating Web Pages with Links, Images, and Formatted Text
12
Entering a Paragraph of Text
• Enter the HTML code shown in Table 3–4 on
page 95 as the first paragraph in the HTML file.
Press ENTER at the end of each line
• Continue to do pg. 97-98.
• This will create another paragraph and a bulleted
list.
• BE CAREFUL…sometimes code will work without
all tags being present..but it WILL NOT validate,
neither will it pass my inspection.
• Make sure you save this file on your H: drive
under Ch. 3 – name it pastadivine.html
Chapter 3: Creating Web Pages with Links, Images, and Formatted Text
13
This is what it will look like.
Chapter 3: Creating Web Pages with Links, Images, and Formatted Text
14
Adding a Text Link to Another Web Page
within the Same Web Site
• Anchor tag - <a> & </a> - use to create
anchors for links to another page in the
same web site, to a web page in an
external web site, within the same page, or
for e-mail links. Example:
– <a href=“URL”>linktext</a> where
• linktext is the phrase that appears on the web page
• value for href is the URL of the linked page.
– See pg. 99, table 3-7 for attributes to the link
<a> tag.
Chapter 3: Creating Web Pages with Links, Images, and Formatted Text
15
Adding a Text Link to Another Web Page
within the Same Web Site and an email link
Do the steps on pg 100-101
Chapter 3: Creating Web Pages with Links, Images, and Formatted Text
16
Adding a Subject Together with Body
Message Text
• Turn to pg. 102
• Notice you can add a Subject and a message to
email by adding some additional information
Chapter 3: Creating Web Pages with Links, Images, and Formatted Text
17
Adding a Text Link to a Web Page in
Another Web Site
• DO pg 103.
• Save the file again
Chapter 3: Creating Web Pages with Links, Images, and Formatted Text
18
Adding a Text Link to a Web Page in
Another Web Site
Chapter 3: Creating Web Pages with Links, Images, and Formatted Text
19
Validating a Web Page
• Go ahead and validate this web page…
• Pg. 106 will walk you through it.
• Look over your web page. It should look
link pg. 107 (next slide)
• Go ahead and test the links…make sure
they work.
• When all this is done…show me!
Chapter 3: Creating Web Pages with Links, Images, and Formatted Text
20
Viewing a Web Page
Chapter 3: Creating Web Pages with Links, Images, and Formatted Text
21
Opening an HTML File
•Go to your home directory, HTML/Ch 3 folder and open
specials.html with NotePad.
Chapter 3: Creating Web Pages with Links, Images, and Formatted Text
22
User friendly
• Because this is such a long page, you should
provide users a quick way to move back to the
top of the page without scrolling.
• See pg. 111 for what it will look link when we
are finished.
•
Chapter 3: Creating Web Pages with Links, Images, and Formatted Text
23
Formatting Text (pg.114)
• Look at pg. 114 for a list of attributes for use with
formatting text.
• We’ll discuss these and look at pg. 115 for
examples.
–
–
–
–
–
–
–
 - Boldface
 - usually bold (browser interprets it)
<big> - increases font size
 - for emphasis (italicized usually)
 - Italicized
 & - subscript and superscript
 - underlined
Chapter 3: Creating Web Pages with Links, Images, and Formatted Text
24
Formatting Text in Bold
• Do the steps on pg. 116 to add some text
formatting to your document.
Chapter 3: Creating Web Pages with Links, Images, and Formatted Text
25
Adding an Image with Wrapped Text
• Look at the bottom of pg 117. Notice the text is right next
to the image.
• NOT GOOD…we need some horizontal/vertical space
there.
• Turn to pg. 118, the same page with the hspace attribute
used.
– Hspace – left/right of the image
– Vspace – top/bottom of the image
• Using the tag also controls the space around
images..See pg. 119.
Chapter 3: Creating Web Pages with Links, Images, and Formatted Text
26
Using thumbnail sized images
• Thumbnail images – smaller version of the actual image.
Usually, when clicked, will load the full-sized image.
• To create thumbnails – resize the image in paint or
image-editing software and save with a different filename.
• There are countless images in many places on the Web.
Search for ‘Free Web images’ or ‘Free GIFs’ and see
what you get.
• Be aware of copyrighted images.
• <a href=“largeimage.gif”><img src=“thumbnail.gif” /> </a>
• This line of code will add a thumbnail image (you have to
have resized it in a image-editing program) that links to a
larger image of itself.
• See pg. 120.
Chapter 3: Creating Web Pages with Links, Images, and Formatted Text
27
Adding an Image with Wrapped Text
• Do pages 120-121
• Save the file…do this often, so if you have
problems, you haven’t lost much.
Chapter 3: Creating Web Pages with Links, Images, and Formatted Text
28
Clearing the Text Wrapping
• To stop wrapping to the right, use 
• To stop wrapping to the left, use 
• will clear ALL wrapping
• Do pg. 122
Chapter 3: Creating Web Pages with Links, Images, and Formatted Text
29
Setting Link Targets
•
•
•
•
Now we need to add links WITHIN the web page.
First thing we have to do is create target links.
Ex. <a name=“targetname”> </a>
Target – a NAMED location or anchor within a
Web page to which a link can be created.
• For long web pages, makes it easier for visitors to
navigate the site.
• You will make your bulleted list a set of links to
targets within your web page.
Chapter 3: Creating Web Pages with Links, Images, and Formatted Text
30
Setting Link Targets
• Targetname MUST BE UNIQUE within that web
document.
• Just marks a specific area of the web page to
which a link can be directed.
• <a href=“#targetname”> - notice the # sign..
• Turn to pg. 124 in your textbook
Chapter 3: Creating Web Pages with Links, Images, and Formatted Text
31
Adding Links to Link Targets
within a Web Page
• PG. 125-127
• Save this and then test all the links.
• When it is working properly, call me and let me see it!
Chapter 3: Creating Web Pages with Links, Images, and Formatted Text
32
Copying and Pasting HTML Code
• Do pg. 128-129
• That will finish up all the links for this document.
• Save it, test it, validate it if you want to…just don’t
leave off any tags!
• I want to see this work before we go any further.
Chapter 3: Creating Web Pages with Links, Images, and Formatted Text
33
What now?
• Homework– Play ‘Who wants to be a
computer Genius’ for
chapter 3
• (www.scsite.com/html5e/learn)
• You must have at least 15 out
of 20 questions correct.
• Print this out and turn it in to
me.
• Labs for Ch. 3
– Cases & Places
– #1 & #3
• pg. 142
• read this CAREFULLY
and make sure you do
everything that is
asked.
– Due next class meeting
Project 3: Creating Web Pages with Links, Images, and Formatted Text
34

Project 3 - East Mississippi Community College

Transcript Project 3 - East Mississippi Community College

Directory