Creating Web Pages with Formatted Text, Links and Images

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 = blue Visited Link = purple Active 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-Mail The 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 = 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 image Images that are left-aligned wrap text to the right of the image <imgsrc=”name” align=”right” alt=” “ width=” “ height=” “ />

Adding an Image with Wrapped Text You 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 <imgsrc=”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”> <imgsrc=”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 <imgsrc= “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 <ahref= “http://www.nameofwebpage.com”> The text of the link is inserted here </a>

Link Targets Use the name attribute within the anchor tag <aname= “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: <imgsrc=“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:angela_edel@southwesternsd.org> </a>

Creating Web Pages with Formatted Text, Links and Images

Recommended

Recommended

More Related Content

What's hot

What's hot (12)

Viewers also liked

Viewers also liked (8)

Similar to Creating Web Pages with Formatted Text, Links and Images

Similar to Creating Web Pages with Formatted Text, Links and Images (20)

More from Angela Edel

More from Angela Edel (20)

Recently uploaded

Recently uploaded (20)

Creating Web Pages with Formatted Text, Links and Images