Project 03 Creating Web Pages with Links, Images, and Formatted Text

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:[email protected]”>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

 = physical style (specify a particular font change that is interpreted strictly by browsers)

 = 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

Format Text with a Font Color

Use the color attribute of the tag

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 tag to end the text

wrapping!!!! To end right-aligned text wrap, To end left-aligned text wrap, To end both left and right, 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

 



 

One to seven; three is the default

Text Formatting Tabs

Bold 

Italics 

Underline

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 = 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:[email protected]”>Angela Edel’s Email address</a>

mailto:[email protected]

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:

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:[email protected]> </a>

Project 03 Creating Web Pages with Links, Images, and Formatted Text

Education

Transcript of Project 03 Creating Web Pages with Links, Images, and Formatted Text