Introduction to the Internet-lesson 4-investigate the Internet and the Web and the browsers used

Lesson 4
Learning Outcomes
This lesson will provide you with the opportunity to investigate the Internet and the Web and the browsers used. We will also learn a new and very important HTML command: the image tag. It is expected that you will use previously learned HTML commands and practices and that the new commands will build towards subsequent lessons in HTML.
When you have completed this lesson, you should be able to:
Understand the Internet and the Web.
Customize the Internet Explorer and Firefox window.
Navigate Web pages.
Create and organize favourites.
Access the history listing.
Manage cookies.
Use InPrivate Browsing.
Save and print Web page content.
Give examples of the functions and features of a common FTP program (see Assignment #3).
Create a simple Web page using the image tag and its attributes: alt, border, align, height and width (HTML Practice Exercise #4).
Create a simple Web page using the aforementioned image tag with the anchor tag.
Textbook Readings
Please keep in mind the preceding intended learning outcomes while reading the assigned chapters from The Internet, 9th Edition, Schneider/Evans, Course Technology, Cengage Learning.

Tutorial 1: Browser Basics
SAMS Reading
This reading will prepare you for the HTML Practice exercises that accompany the first eight lessons and Assignment #5, your Web site, by explaining the basic concepts and tools that are needed to create Web pages.
OLD BOOK
HOUR 10: Creating Images for Use on the Web
HOUR 11: Using Images in Your Web Site
REVIEW HOUR 2: Publishing Web Content
NEW BOOK
Review Chapter 1: Using FTP to Transfer Files
Chapter 8: Working with Images on the Web
HTML Practice Exercise #4

In this and subsequent lessons you will be expanding your knowledge of HTML codes through a series of HTML practice exercises.  These exercises, used in conjunction with the assignments, will culminate in a complete Web site.

In this exercise, you will learn how to add images to the Web page you’ve been working on in Lessons 1 and 2.

Adding Images

The <img /> tag

The <img /> tag is used for placing images onto your Web pages. Unlike most other HTML tags, it should not be opened and closed (meaning that you should never have a </img> on one of your pages. There are a number of attributes to the <img /> tag, some of which are required, and some that are not).

Required attributes:

src – This attribute defines what file is used for the image to be placed into your Web page. Please note: The entire Web project for this course must be located within your own directory on the Web server. (During Week 3 an Announcement concerning this directory will be posted.) If you see an image elsewhere that you like, and want to use on your page, copy it to your Web directory for the course, and use it from there. Anyone loading off-site images on their project will lose from 2 to 8 marks from their final project mark.

Example:

<img src=”penguin1.gif” />

alt – This defines the “Alternate” text which the reader of your page will see if they are either using a text based web browser (like Lynx), or if the image you have selected does not load for some reason (i.e., The reader has turned image loading off in Netscape). The purpose of alternate text is to provide the reader with as close to the same content without the image as they would have received with it. If you are using an image of some text on your page, the alternate text for that image must contain the text that was in the image.

height and width – There are two uses for these tags, either warning the browser about the exact size of an image before loading (which allows the page to format properly around and past it while the image is still trying to load), or for changing the size of an image without altering the original file. Either way, you must be careful to keep the sizes proportional, or your image will look strange. The sizes for both height and width are specified in pixels, or how many dots high and wide the image is.

Examples:

As images:

<img src=”penguin1.jpg” alt=”[picture of a penguin]”  width=”20″ height=”20″   />
<img src=”title.gif” alt=”60-205, Intro to the Internet” width =”100″ height=”50″  />

As anchors (ie. links):

<a href=”http://www.uwindsor.ca”> <img src=”image.gif” alt=”UofW” width=”50″ height=”50″  /> </a>
<a href=”nextpage.html”> <img src=”next.jpg” alt=”Next Page” width=”20″ height=”20″  /> </a>

Putting it All Together

<img src=”file.gif” alt=”Picture of File”  height=”# of pixels” width=”# of pixels”  />
Next Step

If you can meet the objectives stated at the beginning of Lesson 4, you are ready to proceed to the next lesson. Keep in mind the weekly schedule recommended in the course syllabus.

Please post to the Discussion area of this course Web site any questions or comments related to this lesson. Only emergency and private messages should be sent through the E-mail Instructor component of the site.

Assignment

Please visit the Assignments portion of the course Web site for details on Assignment #3.