1 / 33

CIS101 Introduction to Computing

CIS101 Introduction to Computing. Week 06. Agenda. Your questions Resume project HTML Project Two This week online Next class. HTML Software. WS-FTP, 1 st Page 2000 Software, download instructions can be found at: http://csis.pace.edu/cis101/. Discussion Board.

nydia
Download Presentation

CIS101 Introduction to Computing

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. CIS101Introduction to Computing Week 06

  2. Agenda • Your questions • Resume project • HTML Project Two • This week online • Next class

  3. HTML Software • WS-FTP, 1st Page 2000 Software, download instructions can be found at:http://csis.pace.edu/cis101/

  4. Discussion Board • This week it’s Steve’s and Mike’s turn • Need at least three topics for discussion

  5. The resume project • Your first version of your online resume should be posted to your Web space • Go to Course Material, click Student Web Space Addresses to view your classmates’ online resumes

  6. Download HTML Data Disk • Create folder on desktop named “Incoming” • Go to Blackboard, Course Material, HTML Student Downloads Link • Right click HTML 2e data files.exe, select Save Target As, and save to incoming folder

  7. Download Data Disk cont. • Double click file 6543-9d.exe • When winzip begins, select “Unzip” • Files are now extracted to c:\Course Technology\6543-9 • Images needed for project two are in this folder

  8. Project Two • Add links to another Web page • Create a home page • Use images • Use text formats (bold, italic) • Insert a background image • Add an e-mail link • Add an image link

  9. Project Two cont. • Create links within a Web page • Set link targets • Describe types of image files • Control image sizing • Locate images

  10. 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 e-mail 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

  11. Creating text links • The most common form of link • Words are the hotspot • 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 (see table 2.1) • Format to change link colors: • <BODY LINK=“color” VLINK=“color” ALINK=“color”>

  12. Linking Within a Web Page • Allows visitors to move quickly from one section of the Web page to another • Important for large Web pages (p. 2.08) • Move to next section • Table of contents

  13. Other common links • Link to another page in the same Web site (sometimes called internal links) • Link to a page in another location (external links) • Link to e-mail (opens up e-mail message addressed to e-mail location)

  14. 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

  15. Begin project two • Start 1st page 2000 • Begin entering HTML code on p. 2.13

  16. Web page images (p. 2.17) • Classes of Images • Inline images – display on page directly • External images – only display when visitor clicks a link to display them • Image types • JPEG • GIF • Interlaced GIF • Image attributes table 2-4

  17. Including Images in a Web page • Images are physically in a separate file in some image format (jpeg or gif) • Your HTML code only has a reference to the image (i.e. its file name) • For this project to display properly, all image files must physically reside in same folder as your HTML document

  18. To include images in project two • Save your HTML code in a folder on the desktop • Find the directory for the HTML data disk (c:\Course Technology\6543-9) • Copy these files (using drag and drop) into the same folder as your HTML file:greyback.jpgbluebar.jpgovallaeb.gifsample1.htm

  19. Adding a link to 2nd Web page • The <A> and </A> tags are used to create links • Referred to as anchor tags • 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

  20. Add link • Follow instructions on p. 2.23 • You will add a link to HTML document provided on data disk, sample1.htm • Save file, open browser and test your page and its links

  21. Editing the Second Web page • Use 1st Page 2000 to open the second Web page sample1.htm • Follow instructions beginning p. 2.34

  22. Image borders • A border on an image makes the image display as if it has a frame around it • If the image is a link, the default (or selected) link color will be the color of the border (see p. 2.39)

  23. Image with wrapped text • Add the following code (see p. 2.42)<IMG SRC=“ovallaeb.gif” BORDER=0 HEIGHT=119 WIDTH=182 ALIGN=RIGHT ALT=“[Purdue Fountain]”> • You can find ovallaeb.gif with HTML files

  24. Creating links within a page • Useful to allow visitor navigation up and down your page • Use links and targets to do this • Targets are spots in your page that you can link to

  25. Creating targets • Use <a> tag with name attribute to create targets, i.e.<a name=“education”></a> • Link to that target looks like this:<a href=“#education”>Education</a> • The # symbol means the link is on this page

  26. Final links • Add link back to top • Add link to first Web page webreshome.htm

  27. Summary of Project Two • 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

  28. Summary cont. • 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

  29. Summary cont. • 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

  30. What you should know • You should be able to perform tasks described in table 2-7

  31. This week online • Readings • Concepts chapter 2 • HTML Project Two • This week’s Quiz • Concepts chapter 2

  32. This week’s resume update • Adding a background image • Adding an image of Pace • Other formatting changes • See Course Docs, week 06 for exact specifications • Upload your updated file to Web space by next class

  33. Next class meeting • Bring your HTML book to class • Upload your resume homework, class will use your URLs to look at your work next week • Next week you will add your own picture to resume, so bring in picture to scan or use a digital camera to take your picture

More Related