Jan's Illustrated Computer Literacy 101 Logo:Jegsworks Jan's Illustrated Computer Literacy 101


Home > Jan's CompLit 101 > Working with the Web
NextIcon: Arrow - Next page

Jan's Working with the Web

   IE, Chrome, Firefox, & Notepad

The speed with which the Internet has developed is truly astounding. In the blink of History's eye we have gone from the Stone Age of writing with quills and carrying notes by hand to the Information Age of email and live video over the Internet. The pace is not slowing down yet. Businesses have dived into electronic commerce even though the waters are still cold and dark. While some businesses are still having trouble making money online, there is no turning back from the glories of meeting and greeting electronically. Once you have surfed the Web or exchanged messages with folks halfway around the world, you will be hooked.

The projects in this tutorial will take you a long way toward understanding and working with the Internet, and with the World Wide Web in particular. You will learn how to surf the Web, visiting web sites around the world. You will learn to search the world's web pages for specific information and for general topics. You will even learn how to create a simple web page.

What You Need

These lessons are written with the assumption that you have already worked though the Working with Windows Icon: In Site lessons Below is a summary of what you are expected to already understand. The Windows skills are very important. The Word skills are needed when you create your own simple web page.

  • Browser: The lessons have been updated to include some illustrations from recent [June 2016] versions of Internet Explorer 11, Google Chrome (v. 51+), and Firefox (v. 46+). These and previous versions share many of the same features. The newest Microsoft browser is Edge, which comes with Windows 10. But it is still a bit raw and under-developed. These lessons will not deal with Edge.

    The general discussions will be useful no matter what browser you use.  The Step-by-Step directions may not work for a different browser or even an different version. They are updating faster than I can revise!

    You can, of course, use any recent browser to just view the lesson pages. If you want to use a different browser in the Step-by-Step sections, you will have to figure out how to adapt the directions. Some features are probably different in your browser. Not necessarily worse!

  • Connection to Internet:

    Project 1: Browser Basics: 
        
    If you download the resource files, you can work through the main project offline (without being connected)
         Exercises for Project 1
    - A connection is required.

    Project 2: HTML Basics:
        A connection is required for checking some URLs and for uploading your pages to web space, if you wish to do that.

  • Basic Windows skills: The skills covered in the Windows Icon: On Site unit - 
    • using a mouse to click, double-click, drag, and right click
    • parts of a window
    • moving, resizing, maximizing, and minimizing a window
    • scrolling
    • using the folder tree
    • creating and managing folders
    • naming files
    • opening and closing a program
    • opening and saving files
    • using dialog boxes
    • using Help
    • printing
  • Typing skills: You need to be familiar with the computer keyboard and have some skill in typing. Basic editing skills - deleting, inserting, selecting.
  • Resource files:

    Browser Basics: Web pages for practicing browsing and searching.
    Nothing is quite the same as being on the Internet yourself. If you have slow connection or are in a classroom where not all the computers can connect to the Internet at the same time, you may want to install the resource files to your hard drive. That way you could learn and practice without being connected to the Internet.  Your instructor may have put these files on your computer already.  They are also available in the download and disc copies of the lessonsIcon: On Site.

    HTML Basics: The images and documents you need for the project and the exercises

    Icon: Click Detailed directions about downloading the resource files.

  • Removable File Storage: USB drive Icon: Class flash drive

    You need removable storage for a working copy and a backup copy of your documents. These lessons direct you to save your work to a removable drive instead of to a folder on the hard disk. Students in classrooms often do not have their own password-protected storage folders.

    If you have a computer of your own, keep an up-to-date copy of your work on your home computer. If you have online storage, also called cloud storage, like DropBox or OneDrive, keep a copy of your documents there. That's three copies - flash drive, computer, cloud. Start good backup habits early and you won't kick yourself later when your flash drive is lost or goes through the laundry!

    USB drive: Recommended
    Called by many different names: flash drive, flash pen,  thumb drive,  key drive, jump drive, and mini-USB drive. A USB drive is an excellent choice for storing your class work. 

    Before you buy:
    Check the following for both the classroom computer AND your home computer-

    • Computer does have USB ports.
    • You are allowed to use one of the USB ports.
    • You can physically get to the USB port.
      Some are on the the back of the computer case.
    • Operating system will recognize a USB drive.
      Windows 2000, XP, and Me will automatically recognize your USB drive. For Win95 and Win98, you must install drivers. I sincerely hope you do not have to use any of these old Windows versions as they no longer get security updates.
    • Physical arrangement of USB ports - Are they side by side? one above the other?
      Some USB drives are wider or thicker than others and may not fit all port arrangements, especially if a neighboring USB port has something plugged into it. Some drives come with a short extension cable.

    If you do not have a computer at home, consider buying 2 USB drives so that you can use one to keep a backup copy of your work. Don't lose them both at the same time!

    Icon: Full Class flash drive How to handle a full disk Icon: On Site

  • Software: 

    Browser Basics: 

    • Browser
      (Internet Explorer 11, Google Chrome 51, and Firefox 46 are used in illustrations and directions. Other versions may be quite similar.)
      Or, you can use your own favorite browser, as long as you are willing to figure out what to do when there are differences.

    • Anti-virus software - Should be up and running every time you connect to the Internet!

    HTML Basics:

    • Browser
      To view the pages that you create in the lessons.

    • Plain text editor
      The lessons will use Notepad for creating HTML pages. It is NOT REQUIRED that you use an advanced text editor! You can do these lessons with Notepad alone. Or, if you wish, you can use an advanced text editor like EditPad Pro 7 (which I use) or even an advanced WYSIWYG HTML editor like Adobe Dreamweaver (which I use). The directions, however, will assume that you are using plain old Notepad.

      The archived version Icon: In Site of this material was written to use FrontPage or FrontPage Express. Those are both obsolete now. The new programs for creating HTML pages are so flexible and complicated that I have decided to return to basics and work directly with the HTML code. After all, you will need to know what is supposed to be on the page when your fancy software messes things up!


Icons

 Icon: Page with step-by-step directions    Hands-on topic, (symbol in the menu) where you will have Step-by-Step directions.

Tip  Tip - something you might find useful to know.

Warning Warning about possible problems.

Icon: Trouble  Problem and Solution, for what to do in case of trouble

Icon: Class diskSave or retrieve a file (Icon is a USB flash device. You may be using something else)

Icon: Removable storage device is fullyour storage device is too full to save new documents

printer icon    Print something.

Icon: Keyboard Keyboard shortcut or method to do something

Icon: On Site Link to a page or file that is part of this site

Icon: Off Site Link to a page or file that is NOT part of this site. You must be connected to the Internet to view.


Browsers: Sections that apply to a particular browser will be marked with an icon and background color:

Icon: Internet Explorer Internet Explorer
Icon: Google Chrome Google Chrome
Icon: Firefox Firefox

Multiple Versions: Sections that apply to two versions will show nested background color with the most recent version showing the most color. If three version share directions, there will be three nested background colors.

Icon: Internet Explorer Icon: Firefox IE, Firefox
Icon: Firefox Icon: Chrome Firefox, Chrome

Disclaimer: All names, addresses, and phone numbers used in the lessons and exercises are fiction! Any similarity to a real person, business, or place is a coincidence.
 
The author cannot be held responsible for any damage to hardware, software, or data resulting from your attempts to follow the directions.