Project 3 - Mitchel Sellers

Download Report

Transcript Project 3 - Mitchel Sellers 

Project Objectives





Describe linking terms and definitions
Create a home page and enhance a
Web page using images
Use absolute and relative paths
Align and add bold, italics, and color to
text
Change the bullet type used in an
unordered list
1
Project Objectives



Add a background image
Add a text link to a Web page in the
same Web site
Add an e-mail link
2
Project Objectives




Add an image with wrapped text
Add a text link to a Web page on
another Web site
Add links to targets within a Web page
Add an image link to a Web page in the
same Web site
3
New Element Attributes

Body Background Attribute


UnOrdered List Type Attribute




You can specify a background image
<body background=“myimage.jpg”>
Circle
Disc
Square
Ordered List Type Attribute





1
A
a
I
I
4
New Tags

<font></font> - Used to modify font





Attribute – Color to specify color
Example <font color=“#eeeeee”>My Text</font>
<strong></strong> - Bold font (replaces <b></b>)
<em></em> - Italic font (replaces <i></i>)
<a> - Anchor tag, used for linking

Attributes



href – Specifies link location, can be relative, or full url, and can
include mailto: declarations for sending e-mail (# indicates to
internal location)
target – Specifies how/where the link should be shown
title – Specifies mouse over text
5
Link Examples





<a
href=“http://www.google.com”>Google</a>
<a href=“http://www.google.com”
target=“_blank”>Google 1</a>
<a href=“mailto:[email protected]”>
Email Mitchel</a>
<a name=“top”>
<a href=“#top”>Back to top</a>
6
Relative vs. Absolute Links

Relative Links





Absolute Links



Images/myimage.jpg
Myfile.htm
../MyFile.htm
/MyFile.htm
http://www.google.com
Don’t forget the http!
Demonstration!
7
Adding an Image

Type <img
src="plantworldlg.jpg“
width="720“ height="84“
alt="Plant World logo" /> and
then press the ENTER key
8
Adding a Left-Aligned Heading
with a Font Color

<h1><font
color="#000066">Welcome to
Plant World!</font></h1>
9
Entering a Paragraph of Text

<p>For the finest in indoor and
outdoor plants, come to Plant
World! Plant World is the premier
nursery for all of your planting
needs. Our professional landscape
design artists can visit your home
and make recommendations for
plants to use in your home or your
yard.</p>
10
Adding a Background Image


Click immediately to the right of the y in
the <body> tag on line 9 and then
press the SPACEBAR
Type background=“greyback.jpg”
as the attribute
11
Add un ordered list

<ul type=“square”>
<li>Item 1</li>
<li>Item 2</li>
</ul>
12
Adding a Text Link to Another
Web Page within the Same Web
Site



Click immediately to the right of the </ul> tag on line
28 and then press the DOWN ARROW key twice
With the insertion point on line 30, type <p>To
learn more about the Plant World
products and services, please browse
the Plant World Web site You can find
information on all types of plants,
both for indoor and outdoor use. You
also can learn about this month's
featured desert plants, which have a
natural beauty that can enhance any
Southwest landscape!</p> and then press the
ENTER key
Click immediately to the left of the d in desert on line
32
13
Adding an E-Mail Link



<p>Have a question or comment?
Call us at (206) 555-PLANT or email us at [email protected].
</p>
Click immediately before the p in plantworld
on line 34. Type <a href="mailto:
[email protected]"> to start the e-mail
link
Click immediately after the m in com in the email address text. Type </a> to end the email link
14
Formatting Text in Bold

Use the start tag <strong> and end tag
</strong> to make a selection of text
bold
15
Formatting Text in Italics

Use the start tag <em> and end tag
</em> to make a selection of text italic
16
Formatting Text with a Font Color


Click immediately to the left of the
word, DESERT, on line 11. Type <font
color="#000099"> as the start tag
Click immediately to the right of the
word, PLANTS, on line 11. Type
</font> as the end tag
17
Adding an Image
with Wrapped Text


If you specify an “align” tag for an image,
text will wrap around it.
Example
18
Clearing the Text Wrapping





You can use a <br> tag with the clear attribute
to ensure that your text wrapping has been
finished.
<br clear=“left”> will ensure that all items on
the left are past
<br clear=“right”> will ensure that all items on
the right are past
<br clear=“both”> will ensure that both sides are
past
Example
19
Adding Links to a Target
at the Top of the Page



Just after the <body> tag type <a
name="top"></a> as the tag
At the very bottom of the page type
<p><a href="#top"><font
size=-1>To top</font>
</a></p> as the tag
Press the ENTER key
20