Project 03 Creating Web Pages with Links, Images, and Formatted Text
- 1. Creating Web Pages with Links, Images, and Formatted TextProject 03
- 2. 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.
- 3. Using Links Internet Explorer defaults:Normal Link = blueVisited Link = purpleActive Link =green <body link=”color”><body vlink=”color”><body alink=”color”>
- 4. Anchor Tags<a> </a>Used to create links in a Web page and must specify the page, file, or location to which it linksLink to a Web site<a href=”URL”>linktext</a>a href: hypertext referenceURL: Name of the URL or linked page or filelinktext: The clickable word or phrase that appears on the Web page
- 5. 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 messageLinktext: Clickable text is typically the e-mail address used in the e-mail link
- 6. 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.
- 7. 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 attributeTargetname: Must be a unique name on that Web pageSpace: No text displays; the target is not intended to display as a clickable link
- 8. Adding Links to Link TargetsLinks 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
- 9. Adding an Image LinkThe <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)
- 10. 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
- 11. Format Text in Italics<em> </em>
- 12. Format Text with a Font ColorUse the color attribute of the <font> tag<font color=” “>
- 13. Adding an Image with Wrapped TextUse 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 <imgsrc=”name” align=”right” alt=” “ width=” “ height=” “ />
- 14. 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)
- 15. Using Horizontal and Vertical SpacingUsing Horizontal and Vertical SpacingUse 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” />
- 16. 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>
- 17. Background ImageMust be added in the <body> tag<body background=” “>
- 18. 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>
- 19. Text Formatting TabsBold <b></b> <strong> </strong>Italics <i> </i> <em> </em>Underline <u> </u>
- 20. Body Tag AttributesBackground color <body bgcolor = “green”></body>Background image <body background = “name of image”> </body>
- 21. Image Tag AttributesWrapped 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 <br clear= “right” /> = clear the wrapped text:
- 22. 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>
- 23. Link TargetsUse the name attribute within the anchor tag<aname= “name of target”> </a>
- 24. Add Links to Link Targets<a href= “#name of target”>Text that will display </a>
- 25. Link TargetLink Target for movement to the top of a page: <a name = “top”> </a><a href = “#top” >To top</a>
- 26. Link to Another File<a href = “name of file”> Text that will display </a>
- 27. Link to a Web Page<a href = “name of Web page--URL”>Text that will display </a>
- 28. Image Link<a href = “name of image”> </a>
- 29. E-mail link<a href= “mailto:angela_edel@southwesternsd.org”>Angela Edel’s Email address</a>
- 30. Body Tag AttributesBackground color:<body bgcolor = “green”> </body>Background image:<body background = “tree.jpg”> </body>
- 31. Image Tag AttributesRight-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:<br clear = “right” / >
- 32. Anchor TagsName 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>