View
1.002
Download
3
Category
Preview:
DESCRIPTION
Project 03 Creating Web Pages with Links, Images, and Formatted Text
Citation preview
Creating Web Pages with Links, Images, and Formatted Text
Project 03
Using Links
Unless coded in the <body> tag, the browser settings define the colors of text links. To change the default, you must enter attributes and values.
Using Links
Internet Explorer defaults:Normal Link = blueVisited Link = purpleActive Link = green <body link=”color”><body vlink=”color”><body alink=”color”>
Anchor Tags <a> </a>
Used to create links in a Web page and must specify the page, file, or location to which it links
Link to a Web site<a href=”URL”>linktext</a>
a href: hypertext reference URL: Name of the URL or linked page or file linktext: The clickable word or phrase that
appears on the Web page
Anchor Tags <a> </a>Link for E-MailThe anchor tags <a> </a> are also used to
create an e-mail link <a
href=”mailto:address@email.com”>linktext</a> mailto: Uses the word mailto to indicate it is an
email link followed by a colon and the e-mail address to which to send the message
Linktext: Clickable text is typically the e-mail address used in the e-mail link
Setting Link Targets (for links within the same page)
To create links within the same Web page, the targets for the links need to be created first.
A target is a named location
within a Web page to which a link can be created.
Setting Link Targets (for links within the same page)
The <a> tag specifies a target (named location) in the same file. Links to link targets are created using the <a> tag with the name attribute, using the form:
<a name=”targetname”> </a> Name: Uses the NAME attribute instead of the HREF
attribute Targetname: Must be a unique name on that Web page Space: No text displays; the target is not intended to
display as a clickable link
Adding Links to Link Targets
Links to link targets are created using the <a> tag with the name attribute
<a href=”#targetname”> </a> #: Note the use of the pound sign # Targetname: Name of the link target in
that Web page
Adding an Image Link
The <a> </a> tags are used to set the image as a clickable element for the link
<a href=”name of image”> The end tag </a> will be added after
the image tag (img)
Format Text in Bold
<b> </b> = physical style (specify a particular font change that is interpreted strictly by browsers)
<strong> </strong> = logical style
(allow browsers to interpret the tag based on browser settings—relative to other text in a Web page) which browsers interpret as displaying the text in bold font
Format Text in Italics
<em> </em>
Format Text with a Font Color
Use the color attribute of the <font> tag
<font color=” “>
Adding an Image with Wrapped Text
Use the align attribute of the <img> tag Images that are right-aligned wrap text
to the left of the imageImages that are left-aligned wrap text
to the right of the image <img src=”name” align=”right” alt=” “ width=” “ height=” “ />
Adding an Image with Wrapped TextYou MUST enter a <br /> tag to end the text
wrapping!!!! To end right-aligned text wrap, <br
clear=”right”/>To end left-aligned text wrap, <br
clear=”left”/>To end both left and right, <br clear=”all”/> The align attribute also supports values to align
text with the top, middle or bottom of the image—vertically (P 102)
Using Horizontal and Vertical Spacing
Using Horizontal and Vertical Spacing
Use hspace (horizontal spacing) and vspace (vertical spacing) attributes to control the spacing between and around images
<img src=”name” align=”right” alt=” “ width=” “ height=” “
hspace=”20” />
Thumbnail Images (smaller version of image)
The HTML code to add a thumbnail image that links to a larger image
<a href=”largeimage.gif”><img src=”thumbnail.gif” /></a>
Background Image
Must be added in the <body> tag<body background=” “>
Font Tag Attributes
<font color= “either name or number of color”> <font color = “yellow”> </font>
<font face = “fontname”>
<font name = “tahoma”> </font> <font size= “value”>
One to seven; three is the default <font size = “7”> </font>
Text Formatting Tabs
Bold <b></b> <strong> </strong>
Italics <i> </i> <em> </em>
Underline <u> </u>
Body Tag Attributes
Background color <body bgcolor = “green”></body>
Background image <body background = “name of
image”> </body>
Image Tag Attributes
Wrapped text <img src= “name of image” align
=”right” hspace= “20” vspace = “10” height= “200” width = “215” alt= “descriptive name of image” /> hspace = Horizontal Spacing vspace = Vertical Spacing <br clear= “right” /> = clear the wrapped
text:
Anchor Tags <a> </a>
href = hypertext reference—specifies the URL of the linked page or file
<a href= “http://www.nameofwebpage.com”> The text of the link is inserted here </a>
Link Targets
Use the name attribute within the anchor tag
<a name= “name of target”> </a>
Add Links to Link Targets
<a href= “#name of target”>Text that will display </a>
Link Target
Link Target for movement to the top of a page:<a name = “top”> </a>
<a href = “#top” >To top</a>
Link to Another File
<a href = “name of file”> Text that will display </a>
Link to a Web Page
<a href = “name of Web page--URL”>Text that will display </a>
Image Link
<a href = “name of image”> </a>
E-mail link
<a href= “mailto:angela_edel@southwesternsd.org”>Angela Edel’s Email address</a>
Body Tag Attributes
Background color: <body bgcolor = “green”> </body>
Background image: <body background = “tree.jpg”>
</body>
Image Tag Attributes
Right-aligned image with wrapped text:
<img src=“tree.jpg” align =“right” height=“225” width=“345” alt=“Oak Tree” hspace=“20” / >
Clear the right-aligned wrapped
text:<br clear = “right” / >
Anchor Tags Name a link target:
<a name = “top”> </a> Add a link to that target:
<a href = “#top”> </a> Link to another Web site:
<a href = “http:google.com”> </a> Link to a file:
< a href = “project3.htm”> </a> E-mail link:
<a href = mailto:angela_edel@southwesternsd.org> </a>
Recommended