Introduction
to the Information Superhighway (Internet) Keywords
associated with the Internet
Searching
the Internet Educational
Sites Viewing
& Saving Graphics On The Internet Creating
Your Own Webpage
What Makes
Up A Webpage
Viewing
Source Code HTML
Examples
Introduction
to the Internet
The Internet is a worldwide network of
networks that allows us, the users, to Inter-Relate, Communicate,
and Educate. Think of it as a system of roads, freeways, and
bridges. All computer users connected to this "network of networks"
is what makes up the Internet. The Internet itself does not store
information. It is a slight misstatement to say that something was
found on the Internet. It should be said that something was found
through or by using the Internet.
The Internet was
originated by the US Department of Defense in 1960's. This was to
keep military, universities, and defense contractors linked together
in the event of war. In the early days, what we call the Internet
was then known as ARPANet (Advanced Research Projects Agency
Network). Educational Institutions joined in on the Internet
Band-Wagon in the early 1980's. According to
Global Reach
there are an estimated 322 million users online.
Back to top
Main Keywords
Associated
With The Internet
- Web Browser
- Web Browsers are programs you use to view the
Internet. There are two main Web Browsers, Microsoft Internet
Explorer, and Netscape Navigator. The program we will be using
to view the Internet is Microsoft Internet Explorer.
- Website vs. Webpage
- A Website is a place within the Internet that
contains multiple "Webpages". For example the Bay City Public
Schools is a "Website", while this Internet Tutorial Page you
are viewing is a "Webpage".
- URL
- URL is the address of a website or webpage. The URL
for the main BC Schools website is
http://www.bcschools.net/. This is the address that you
would type in the address bar at the top of Internet Explorer to
go to BC School's main page.
- HTML
- HTML is an Internet programming language that is used
to create webpages. Most pages you see on the Internet are HTML
pages.
- Hyperlink
- A Hyperlink is a string of text or a picture that
takes you to another part of a webpage or another
website/webpage. It is nothing more than a transport to
somewhere else. Hyperlinks are usually a different font color
and are underlined. You can notice a hyperlink by scrolling your
mouse over the words and/or pictures and viewing
Back to top
Searching the Internet
There are many search engines throughout the
Internet that allow you to type in a word or phrase to search
millions of websites. Below are a list of the most popular search
engines found on the Internet. Simply click on the title of each
search engine to go to that site.
-
Yahoo!
- You can browse Yahoo! by simply clicking on the various
categories listed on each page. You can also search Yahoo! by
entering a word (or, a few words) into the search box that
appears on every page in the directory. Combine the two
strategies and you can "browse and then search" or "search and
then browse."
-
Altavista
- Altavista is a popular search engine that you can browse by
simply entering in text and/or text phrase on what you are
looking for. Altavista also allows you to search by category.
-
Infoseek
- Infoseek works much the same as Yahoo! and Altavista. You
can select categories, and/or search by keyword or phrases.
Back to top
Educational Sites
Below is a extensive list of education sites
found on the Internet. At the time this page was created all sites
work. If you notice any broken sites (sites that do not connect)
please let us know. Also, if you have any suggestions on some good
educational sites that would benefit other users, we would be more
than happy to add them to the list. Contact Cheryl Quade at
mailto:whalenc@bcschools.net
Back to top
Viewing & Saving Graphics On The Internet
Graphical images make your web page
come alive. Images give personality and pizzazz to your site.
Graphics viewed on the web come from two different types of files,(
.jpg and .gif) . JPG pictures are more compressed whereas GIF files
show more detail and in some cases show animation. GIF files also
allow for transparent backgrounds.
JPG Graphic
|
GIF Animation Graphic
|
GIF Transparent Graphic
|
|
|
With Transparency
Without Transparency
|
- Saving Graphics Off The Internet
- Move your mouse over the image you want to save
- Right click on your mouse
- Select Save Picture As..
- Save it to the folder you desire
- Click Save
Back to top
Creating Your Own Webpage
Once you become familiar with the internet,
the next step is to create your own webpage. Creating your own
webpage can be very beneficial to you as an educator. One good
reason to create your own webpage would be to create a lesson plan
or a class webpage for students to view from home. Webpages can be
created in various programs such as Microsoft Frontpage. You can
also use Windows Notepad to create a webpage. After you type in your
code for your webpage, you need to save it as an HTML file.
After you save you file you can bring it up in your
web browser.
- What Makes Up A Web Page?
- A Web page consists of text, tables, lists and/or any
picture files used on the page. The HTML file (a normal text
file) contains all the text to display, and also creates the
template of what your web page is going to look like.
- Tags
- An HTML file is basically text that is displayed using a
series of Tags. A list of the most common tags can be found
here. There are 2 different kinds of tags, BEGINNING TAGS
and ENDING TAGS.
- Beginning Tags begin with an <-(less than)
character and end with> -(greater than) character.
- Ending Tags begin with </ -(less than) character
& forward slash and end with > -(greater than)
character.
- Tags tell a browser to do something special, like show
text in italic or bold , or in a larger font, or to show an image, or to make a
link to another Web page. Although HTML has many tags you
can use, you don't need to know them all to use HTML-- you
can get by with just a handful.
Viewing a webpages' source code
- One good thing about learning HTML is that you can see how
everyone else has done it, by simply looking at their source
code. You can see the HTML source of any page you're viewing.
Try it now by: Right Clicking anywhere on the page
(Except over a picture), and selecting View
Source
HTML Examples
- Below are the most common examples that you will use when
you create your own webpage.
Ordered
and Bulleted Lists
Tables
Providing
A Link
Inserting
an Image
- Numbered or Bulleted
Lists
HTML
provides a simple way to show Numbered lists ("ordered lists")
or Bullet lists ("unordered lists"). Use the container tags
<OL> and <UL> to make ordered lists
and unordered lists, respectively. Inside the container tags,
use the <LI> tag to denote the start of a list
item.
For example, the HTML code This
is an ordered list: <OL> <LI>First
item </LI> <LI>Second item
</LI> <LI>Third item
</LI> </OL>
It will be rendered as
- First item
- Second item
- Third item
This is an unordered
list: <UL> <LI>First item
</LI> <LI>Second item
</LI> <LI>Third item
</LI> </UL>
It will be rendered as
- First item
- Second item
- Third item
Inside the list items, you can put whatever you want--
links, images, tables (more on those later), or even other
lists. Nested lists are actually quite common, useful for
outlines or cascading menus.
BACK
TO EXAMPLES
- Tables
HTML tables let you show arrays of data cells. They also let
you right-align text, or make columns of text line up like tab
stops. They're not hard to use, once you know clearly what you
want to display in each cell. The "standard definition" of
HTML tables has changed a few times, but is pretty stable now;
this section will show you how to make tables that almost
every browser will display correctly.
- Tables are defined with the <TABLE>
container tag.
- The <TABLE> tag contains rows of cells,
defined with the <TR> container tag.
- Each <TR> tag contains data cells, defined
with the <TD> container tag.
- Each data cell contains whatever you want-- links,
images, lists, or even other tables.
Rows are defined from top to
bottom, and cells are defined from left to right. If you want
lines to show up between the table cells, use the
BORDER attribute in the <TABLE> tag.
(Remember how attributes in HTML tags work? You'll be using a
few attributes in this section.)
For
example, the HTML code <TABLE
BORDER="1"> <TR> <TD>northwest</TD> <TD>northeast</TD> </TR> <TR> <TD>southwest</TD> <TD>southeast</TD> </TR> </TABLE>
It
will be rendered as:
northwest |
northeast |
southwest |
southeast |
Most
browsers don't require the ending </TR> or
</TD> tags; they assume one cell or row ends when
the next one begins. So you might see tables written without
those end tags (though the </TABLE> end tag is
still required). Note: It is always good use to provide
Ending Tags, because some tags require it...Don't be lazy!!
Cells that Span Multiple Columns or
Rows Sometimes, you may want one cell to span more than
one column across, or more than one row deep. In these cases,
use the colspan and rowspan attributes of the
<TD> tag. Then, just skip defining the cells that
the large cell would overlay. For example, RowSpan = 2
<TABLE BORDER =
"1"> <TR> <TD ROWSPAN
="2">west</TD> <TD>northeast</TD> </TR> <TR> <!--
Don't define "southwest", since it's overlaid by "west"
--> <TD>southeast</TD> </TR> </TABLE>
It
will rendered as:
Col Span = 2
<TABLE BORDER = "1"> <TR> <TD COLSPAN
="2">north</TD> </TR> <TR> <TD>southwest</TD> <TD>southeast</TD> </TR> </TABLE>
It
will be rendered as:
north |
southwest |
southeast |
Aligning Cell Contents Within the
Cells
Usually, all cell contents are
left-justified and vertically centered by default. To set the
horizontal or vertical placement within the <TD>
tag, use the align and valign attributes,
respectively:
- align can be left, right, or
center.
- valign can be top, middle,
bottom, or baseline (aligned to baseline of
the text).
For example, this borderless grocery
receipt lines up the prices on the right margin: <TABLE
BORDER="0"> <TR> <TD>laundry
detergent</TD> <TD
ALIGN="right">$4.99</TD> </TR> <TR> <TD>cat
food</TD> <TD
ALIGN="right">$128.00</TD> </TR> </TABLE>
It
will be rendered as:
laundry detergent |
$4.99 |
cat food |
$128.00 |
You
can also use the align and valign attributes in
the <TR> tag, to affect all cells in that
row.
Other Useful Table
Stuff Normally, the browser will figure out an
appropriate size for the table, and for the cells within the
table, based on the browser size and the cell contents. If you
want to suggest specific widths for the table or for the
cells, use the WIDTH attribute in the
<TABLE> and <TD> tags. Use either a
percentage of browser or table width, like
<TD WIDTH=20%> (usually preferred), or an
absolute pixel value like
<TD WIDTH="138">
(useful to make an image fit exactly within a table cell).
BACK
TO EXAMPLES
- Setting Up A
Hyperlink
HTML provides an easy way to get from one page to another.
These are called hyperlinks. Hyperlinks are nothing more than
text links to another webpage. You can also set up a link to
mail an email address.
For example, the HTML code
for a web page link <a
href="http://www.yahoo.com" alt="Yahoo's Web Site"> Click
to go to Yahoo! </a> It will be rendered as:
Click to go to Yahoo!
For example, the HTML code for a mail
link <a
href="mailto:president@whitehouse.gov" alt="Email The
President"> Email The President </a>
It
will be rendered as: Email The President
BACK
TO EXAMPLES
- Inserting an
Image
Inserting an image is very easy to do and only requires 1 line
of code.
For example, the HTML code for inserting
an image <img src = "
alt="images/YahooTrans.gif"> IMG =
Image SRC = Source (location of the image)
It
will be rendered as:
|