Project 03 Creating Web Pages with Links, Images, and Formatted Text
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

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

on

  • 984 views

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

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

Statistics

Views

Total Views
984
Views on SlideShare
973
Embed Views
11

Actions

Likes
0
Downloads
9
Comments
0

1 Embed 11

http://webdesign.swsd.wikispaces.net 11

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

  • 1. Creating Web Pages with Links, Images, and Formatted Text
    Project 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 = blue
    Visited Link = purple
    Active 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 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
  • 5. 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
  • 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 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
  • 8. 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
  • 9. 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)
     
  • 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 Color
    Use the color attribute of the <font> tag
    <font color=” “>
  • 13. 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=” “ />
  • 14. Adding an Image with Wrapped Text
    You 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 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” />
  • 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 Image
    Must 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 Tabs
    Bold
    <b></b> <strong> </strong>
    Italics
    <i> </i> <em> </em>
    Underline
    <u> </u>
  • 20. Body Tag Attributes
    Background color
    <body bgcolor = “green”></body>
    Background image
    <body background = “name of image”> </body>
  • 21. 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
    <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 Targets
    Use 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 Target
    Link 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 Attributes
    Background color:
    <body bgcolor = “green”> </body>
    Background image:
    <body background = “tree.jpg”> </body>
     
  • 31. 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:
    <br clear = “right” / >
  • 32. 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>