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


Published on

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

Published in: Education
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

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

  1. 1. Creating Web Pages with Links, Images, and Formatted Text<br />Project 03 <br />
  2. 2. Using Links <br />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.<br />
  3. 3. Using Links <br />Internet Explorer defaults:<br />Normal Link = blue<br />Visited Link = purple<br />Active Link =green<br /> <br /><body link=”color”><br /><body vlink=”color”><br /><body alink=”color”><br />
  4. 4. Anchor Tags<a> </a><br />Used to create links in a Web page and must specify the page, file, or location to which it links<br />Link to a Web site<br /><a href=”URL”>linktext</a><br />a href: hypertext reference<br />URL: Name of the URL or linked page or file<br />linktext: The clickable word or phrase that appears on the Web page<br />
  5. 5. Anchor Tags<a> </a><br />Link for E-Mail<br />The anchor tags <a> </a> are also used to create an e-mail link<br /> <a href=””>linktext</a><br />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<br />Linktext: Clickable text is typically the e-mail address used in the e-mail link<br />
  6. 6. Setting Link Targets (for links within the same page)<br />To create links within the same Web page, the targets for the links need to be created first.<br /> <br />A target is a named location within a Web page to which a link can be created.<br />
  7. 7. Setting Link Targets (for links within the same page)<br />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:<br /><a name=”targetname”> </a><br />Name: Uses the NAME attribute instead of the HREF attribute<br />Targetname: Must be a unique name on that Web page<br />Space: No text displays; the target is not intended to display as a clickable link<br />
  8. 8. Adding Links to Link Targets<br />Links to link targets are created using the <a> tag with the name attribute<br /><a href=”#targetname”> </a><br />#: Note the use of the pound sign #<br />Targetname: Name of the link target in that Web page<br />
  9. 9. Adding an Image Link<br />The <a></a> tags are used to set the image as a clickable element for the link<br /><a href=”name of image”><br /> <br />The end tag </a> will be added after the image tag (img)<br /> <br />
  10. 10. Format Text in Bold<br /><b> </b> = physical style (specify a particular font change that is interpreted strictly by browsers) <br /> <br /><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<br />
  11. 11. Format Text in Italics<br /><em> </em><br />
  12. 12. Format Text with a Font Color<br />Use the color attribute of the <font> tag<br /><font color=” “><br />
  13. 13. Adding an Image with Wrapped Text<br />Use the align attribute of the <img> tag<br /> <br />Images that are right-aligned wrap text to the left of the image<br />Images that are left-aligned wrap text to the right of the image<br /> <br /><imgsrc=”name” align=”right” <br />alt=” “ width=” “ height=” “ /><br />
  14. 14. Adding an Image with Wrapped Text<br />You MUST enter a <br /> tag to end the text wrapping!!!!<br /> <br />To end right-aligned text wrap, <br clear=”right”/><br />To end left-aligned text wrap, <br clear=”left”/><br />To end both left and right, <br clear=”all”/><br /> <br />The align attribute also supports values to align text with the top, middle or bottom of the image—vertically (P 102)<br />
  15. 15. Using Horizontal and Vertical Spacing<br />Using Horizontal and Vertical Spacing<br />Use hspace (horizontal spacing) and vspace (vertical spacing) attributes to control the spacing between and around images<br /><imgsrc=”name” align=”right” <br />alt=” “ width=” “ height=” “ hspace=”20” /><br />
  16. 16. Thumbnail Images (smaller version of image)<br />The HTML code to add a thumbnail image that links to a larger image <br /><a href=”largeimage.gif”><br /><imgsrc=”thumbnail.gif” /></a><br />
  17. 17. Background Image<br />Must be added in the <body> tag<br /><body background=” “><br />
  18. 18. Font Tag Attributes<br /><font color= “either name or number of color”> <br /><font color = “yellow”> </font><br /><font face = “fontname”> <br /><font name = “tahoma”> </font><br /><font size= “value”> <br />One to seven; three is the default <br /><font size = “7”> </font><br />
  19. 19. Text Formatting Tabs<br />Bold <br /><b></b> <strong> </strong><br />Italics <br /><i> </i> <em> </em><br />Underline <br /><u> </u><br />
  20. 20. Body Tag Attributes<br />Background color <br /><body bgcolor = “green”></body><br />Background image <br /><body background = “name of image”> </body><br />
  21. 21. Image Tag Attributes<br />Wrapped text <br /> <imgsrc= “name of image” align =”right”hspace= “20”vspace = “10” height= “200” width = “215” alt= “descriptive name of image” /><br />hspace = Horizontal Spacing <br />vspace = Vertical Spacing <br /><br clear= “right” /> = clear the wrapped text:<br />
  22. 22. Anchor Tags<a> </a> <br />href= hypertext reference—specifies the URL of the linked page or file<br /><ahref= “”> The text of the link is inserted here </a><br />
  23. 23. Link Targets<br />Use the name attribute within the anchor tag<br /><aname= “name of target”> </a><br />
  24. 24. Add Links to Link Targets<br /><a href= “#name of target”>Text that will display </a><br />
  25. 25. Link Target<br />Link Target for movement to the top of a page:<br /> <a name = “top”> </a><br /><a href = “#top” >To top</a><br />
  26. 26. Link to Another File<br /><a href = “name of file”> Text that will display </a><br /> <br />
  27. 27. Link to a Web Page<br /><a href = “name of Web page--URL”>Text that will display </a><br />
  28. 28. Image Link<br /><a href = “name of image”> </a><br />
  29. 29. E-mail link<br /><a href= “”>Angela Edel’s Email address</a><br />
  30. 30. Body Tag Attributes<br />Background color:<br /><body bgcolor = “green”> </body><br />Background image:<br /><body background = “tree.jpg”> </body><br /> <br />
  31. 31. Image Tag Attributes<br />Right-aligned image with wrapped text: <br /><imgsrc=“tree.jpg” align =“right” height=“225” width=“345” alt=“Oak Tree” hspace=“20” / ><br /> <br />Clear the right-aligned wrapped text:<br /><br clear = “right” / ><br />
  32. 32. Anchor Tags<br />Name a link target:<br /><a name = “top”> </a><br />Add a link to that target:<br /><a href = “#top”> </a><br /> Link to another Web site:<br /><a href = “”> </a><br />Link to a file: <br />< a href = “project3.htm”> </a><br /> E-mail link:<br /><a href => </a><br />