1 / 103

Project 2

Project 2. Creating a Web Site with Links. Objectives. Describe linking terms and definitions Add a link to another Web page Create a home page Enhance a Web page using images Add bold, italics, and color to text Change bullet type Insert a background image. Objectives.

ishana
Télécharger la présentation

Project 2

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Project 2 Creating a Web Sitewith Links

  2. Objectives • Describe linking terms and definitions • Add a link to another Web page • Create a home page • Enhance a Web page using images • Add bold, italics, and color to text • Change bullet type • Insert a background image

  3. Objectives • Insert a horizontal rule image • Add an e-mail link • View the HTML file and test the links • Edit the second Web page • Insert an image and wrap text around an image • Add a text link to another Web site

  4. Objectives • Add an image link to another Web site • Create links within a Web page • Set link targets • Add links to set targets • Describe types of image files • Control image sizing • Locate images

  5. Introduction to Links • Hyperlinks (or links) are used to connect a Web page to another Web page • Links can also be used to create an email link • Either text or an image can be used as a hotspot for a link • The mouse pointer usually changes when positioned over a hotspot • URL appears on status bar when the mouse pointer is over a hotspot

  6. image link text link status bar Introduction to Links

  7. Introduction to Links • With text links, always use descriptive text as the clickable word(s) • Unless otherwise stated, the color of text links is dependent upon browser-defined defaults • Format to change link colors: <BODY LINK=“color” VLINK=“color” ALINK=“color”>

  8. Introduction to Links normal link (LINK) visited link (VLINK) active link (ALINK)

  9. Linking within a Web Page • Allows visitors to move quickly from one section of the Web page to another • Important for large Web pages • Commands • Table of contents

  10. links to targets targets Linking within a Web Page

  11. Linking to Another Web Page within the Same Web Site

  12. Linking to Another Web Site

  13. Linking to E-Mail

  14. Start Notepad • Click the Start button on the taskbar and then point to Programs on the Start menu • Point to Accessories on the Programs submenu and then point to Notepad on the Accessories submenu • Click Notepad • If necessary, click the Maximize button • Click Edit on the menu bar • If Word Wrap is not checked, click Word Wrap

  15. Start Notepad

  16. Creating a Home Page • A home page is the main page of a Web site • Visitors usually view the home page first • Identify the purpose of your Web site • Links should be apparent • Include an e-mail link

  17. Enter Initial HTML Tags

  18. Entering a Heading • The <FONT> tag can enhance the heading • Various FONT attributes

  19. normal text text with color different font face different font size Sample Font Attributes

  20. heading code Enter the Heading You should always end the tags in the opposite direction from which you started them

  21. Enter the Text

  22. Enter the Bulleted Lists • Enter two bulleted lists, using the code below:

  23. code for bulleted lists Modified HTML Document

  24. Web Page Images • Classes of Images • Inline images • External images • Image types • JPEG • GIF • Interlaced GIF • PNG

  25. Image Attributes • Attributes that can be used with the <IMG> tag

  26. Inserting a Background Image • The BACKGROUND attribute inserts the background image on a Web page

  27. Inserting a Horizontal Rule Image • Setting the HEIGHT and WIDTH attribute helps the image display faster • Defining an image too large will make it appear grainy

  28. Copying and Pasting Text • Eliminates the need to type the same command more than once • Helps eliminate errors in typing commands repeatedly • Copy and Paste functionality is also available in other Windows applications

  29. highlight the text you wish to copy Click the Edit menu Copying and Pasting Text

  30. Point to and click Copy Copying and Pasting Text

  31. Click the Edit menu Position your cursor where you want to paste the text Copying and Pasting Text

  32. Point to and click Paste Copying and Pasting Text

  33. Copying and Pasting Text pasted line

  34. Adding a Link to the Second Web Page • The <A> and </A> tags are used to create links • Referred to as anchortags • Use the Hyperlink REFerence (HREF) attribute to link to another Web page • Two items required • Text or image to act as hotspot • Name of the file to which you want to link

  35. Adding a Link to the Second Web Page

  36. Adding a Link to Another Web Page Enter the following text into your document

  37. Add this command before the word “sample” Add this command after the word “sample” Adding a Link to Another Web Page

  38. link to sample1.htm page text used for link end oflink Anchor Tag Anatomy <A HREF=“sample1.htm”>sample</A>

  39. Adding an E-Mail Link • It is necessary to instruct visitors to contact you with any information or suggestions • The <A> and </A> tags are also used to create email links

  40. Adding an E-Mail Link add this text

  41. link to e-mail address e-mailaddress end oflink E-Mail Link Anatomy <A HREF=“mailto:webres@isp.com”>webres@isp.com</A>

  42. Saving and Printing the HTML File • Insert the HTML Data Disk in drive A: • Select Save As from the File menu • Save to your A: drive • Save with the filename webreshome.htm • Click the Save button • Select Print from the File menu

  43. HTML File Printout

  44. Viewing the Web Page • To View the Web Page • Start your browser • Maximize your browser window • Click the Address bar • Type a:\webreshome.htm in the Address text box • Press the ENTER key

  45. horizontal ruleimage horizontal ruleimage background image changed bullet types changed bullet types home page text link to second page e-mail link Viewing the Web Page

  46. Printing the Web Page • Click the Print button on the Standard Buttons toolbar

  47. Point to and click the e-mail link Testing the Links

  48. click theclose button e-mail address inTo: text box Testing the Links

  49. With the HTML Data Disk in drive A, point to and clickthe link, sample Testing the Links

  50. Testing the Links Second Web page should appear

More Related