![Page 1: Project 03 Creating Web Pages with Links, Images, and Formatted Text](https://reader034.vdocuments.us/reader034/viewer/2022051609/546e8d96af795985298b57d9/html5/thumbnails/1.jpg)
Creating Web Pages with Links, Images, and Formatted Text
Project 03
![Page 2: Project 03 Creating Web Pages with Links, Images, and Formatted Text](https://reader034.vdocuments.us/reader034/viewer/2022051609/546e8d96af795985298b57d9/html5/thumbnails/2.jpg)
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.
![Page 3: Project 03 Creating Web Pages with Links, Images, and Formatted Text](https://reader034.vdocuments.us/reader034/viewer/2022051609/546e8d96af795985298b57d9/html5/thumbnails/3.jpg)
Using Links
Internet Explorer defaults:Normal Link = blueVisited Link = purpleActive Link = green <body link=”color”><body vlink=”color”><body alink=”color”>
![Page 4: Project 03 Creating Web Pages with Links, Images, and Formatted Text](https://reader034.vdocuments.us/reader034/viewer/2022051609/546e8d96af795985298b57d9/html5/thumbnails/4.jpg)
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
![Page 5: Project 03 Creating Web Pages with Links, Images, and Formatted Text](https://reader034.vdocuments.us/reader034/viewer/2022051609/546e8d96af795985298b57d9/html5/thumbnails/5.jpg)
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
![Page 6: Project 03 Creating Web Pages with Links, Images, and Formatted Text](https://reader034.vdocuments.us/reader034/viewer/2022051609/546e8d96af795985298b57d9/html5/thumbnails/6.jpg)
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.
![Page 7: Project 03 Creating Web Pages with Links, Images, and Formatted Text](https://reader034.vdocuments.us/reader034/viewer/2022051609/546e8d96af795985298b57d9/html5/thumbnails/7.jpg)
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
![Page 8: Project 03 Creating Web Pages with Links, Images, and Formatted Text](https://reader034.vdocuments.us/reader034/viewer/2022051609/546e8d96af795985298b57d9/html5/thumbnails/8.jpg)
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
![Page 9: Project 03 Creating Web Pages with Links, Images, and Formatted Text](https://reader034.vdocuments.us/reader034/viewer/2022051609/546e8d96af795985298b57d9/html5/thumbnails/9.jpg)
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)
![Page 10: Project 03 Creating Web Pages with Links, Images, and Formatted Text](https://reader034.vdocuments.us/reader034/viewer/2022051609/546e8d96af795985298b57d9/html5/thumbnails/10.jpg)
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
![Page 11: Project 03 Creating Web Pages with Links, Images, and Formatted Text](https://reader034.vdocuments.us/reader034/viewer/2022051609/546e8d96af795985298b57d9/html5/thumbnails/11.jpg)
Format Text in Italics
<em> </em>
![Page 12: Project 03 Creating Web Pages with Links, Images, and Formatted Text](https://reader034.vdocuments.us/reader034/viewer/2022051609/546e8d96af795985298b57d9/html5/thumbnails/12.jpg)
Format Text with a Font Color
Use the color attribute of the <font> tag
<font color=” “>
![Page 13: Project 03 Creating Web Pages with Links, Images, and Formatted Text](https://reader034.vdocuments.us/reader034/viewer/2022051609/546e8d96af795985298b57d9/html5/thumbnails/13.jpg)
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=” “ />
![Page 14: Project 03 Creating Web Pages with Links, Images, and Formatted Text](https://reader034.vdocuments.us/reader034/viewer/2022051609/546e8d96af795985298b57d9/html5/thumbnails/14.jpg)
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)
![Page 15: Project 03 Creating Web Pages with Links, Images, and Formatted Text](https://reader034.vdocuments.us/reader034/viewer/2022051609/546e8d96af795985298b57d9/html5/thumbnails/15.jpg)
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” />
![Page 16: Project 03 Creating Web Pages with Links, Images, and Formatted Text](https://reader034.vdocuments.us/reader034/viewer/2022051609/546e8d96af795985298b57d9/html5/thumbnails/16.jpg)
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>
![Page 17: Project 03 Creating Web Pages with Links, Images, and Formatted Text](https://reader034.vdocuments.us/reader034/viewer/2022051609/546e8d96af795985298b57d9/html5/thumbnails/17.jpg)
Background Image
Must be added in the <body> tag<body background=” “>
![Page 18: Project 03 Creating Web Pages with Links, Images, and Formatted Text](https://reader034.vdocuments.us/reader034/viewer/2022051609/546e8d96af795985298b57d9/html5/thumbnails/18.jpg)
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>
![Page 19: Project 03 Creating Web Pages with Links, Images, and Formatted Text](https://reader034.vdocuments.us/reader034/viewer/2022051609/546e8d96af795985298b57d9/html5/thumbnails/19.jpg)
Text Formatting Tabs
Bold <b></b> <strong> </strong>
Italics <i> </i> <em> </em>
Underline <u> </u>
![Page 20: Project 03 Creating Web Pages with Links, Images, and Formatted Text](https://reader034.vdocuments.us/reader034/viewer/2022051609/546e8d96af795985298b57d9/html5/thumbnails/20.jpg)
Body Tag Attributes
Background color <body bgcolor = “green”></body>
Background image <body background = “name of
image”> </body>
![Page 21: Project 03 Creating Web Pages with Links, Images, and Formatted Text](https://reader034.vdocuments.us/reader034/viewer/2022051609/546e8d96af795985298b57d9/html5/thumbnails/21.jpg)
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:
![Page 22: Project 03 Creating Web Pages with Links, Images, and Formatted Text](https://reader034.vdocuments.us/reader034/viewer/2022051609/546e8d96af795985298b57d9/html5/thumbnails/22.jpg)
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>
![Page 23: Project 03 Creating Web Pages with Links, Images, and Formatted Text](https://reader034.vdocuments.us/reader034/viewer/2022051609/546e8d96af795985298b57d9/html5/thumbnails/23.jpg)
Link Targets
Use the name attribute within the anchor tag
<a name= “name of target”> </a>
![Page 24: Project 03 Creating Web Pages with Links, Images, and Formatted Text](https://reader034.vdocuments.us/reader034/viewer/2022051609/546e8d96af795985298b57d9/html5/thumbnails/24.jpg)
Add Links to Link Targets
<a href= “#name of target”>Text that will display </a>
![Page 25: Project 03 Creating Web Pages with Links, Images, and Formatted Text](https://reader034.vdocuments.us/reader034/viewer/2022051609/546e8d96af795985298b57d9/html5/thumbnails/25.jpg)
Link Target
Link Target for movement to the top of a page:<a name = “top”> </a>
<a href = “#top” >To top</a>
![Page 26: Project 03 Creating Web Pages with Links, Images, and Formatted Text](https://reader034.vdocuments.us/reader034/viewer/2022051609/546e8d96af795985298b57d9/html5/thumbnails/26.jpg)
Link to Another File
<a href = “name of file”> Text that will display </a>
![Page 27: Project 03 Creating Web Pages with Links, Images, and Formatted Text](https://reader034.vdocuments.us/reader034/viewer/2022051609/546e8d96af795985298b57d9/html5/thumbnails/27.jpg)
Link to a Web Page
<a href = “name of Web page--URL”>Text that will display </a>
![Page 28: Project 03 Creating Web Pages with Links, Images, and Formatted Text](https://reader034.vdocuments.us/reader034/viewer/2022051609/546e8d96af795985298b57d9/html5/thumbnails/28.jpg)
Image Link
<a href = “name of image”> </a>
![Page 30: Project 03 Creating Web Pages with Links, Images, and Formatted Text](https://reader034.vdocuments.us/reader034/viewer/2022051609/546e8d96af795985298b57d9/html5/thumbnails/30.jpg)
Body Tag Attributes
Background color: <body bgcolor = “green”> </body>
Background image: <body background = “tree.jpg”>
</body>
![Page 31: Project 03 Creating Web Pages with Links, Images, and Formatted Text](https://reader034.vdocuments.us/reader034/viewer/2022051609/546e8d96af795985298b57d9/html5/thumbnails/31.jpg)
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” / >
![Page 32: Project 03 Creating Web Pages with Links, Images, and Formatted Text](https://reader034.vdocuments.us/reader034/viewer/2022051609/546e8d96af795985298b57d9/html5/thumbnails/32.jpg)
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>