INTRODUCTION TO HTML

THE INTERNET

REVIEW

A Modem - A device used to convert computer-compatible signals to signals that can be transmitted over the telephone lines, then back again to computer signals at the other end of the line.
Direct network connection - LAN ( Local Area Network), A system of hardware, software, and communications channels that connects devices on the local premises. Just like what we use in the microcomputer labs.

File Transfer Protocol - (Ftp) - Communication software that enables the transfer of files between a PC and another computer.

Download - The transfer of data from a remote computer to a local computer.
Upload - The transmission of data from a local computer to a remote computer.

Information Services- A commercial network that provides remote users with access to a variety of information services.
Internet Service Provider - Not a gateway, it is a direct connection to the internet, using software theat enables a direct link via TCP/IP (Transmission Control Protocol/Internet Protocol).

Web Page Designs

If you have an account on ESUS you can host a web page there. (you don't have to host the page there)
First you need to log onto ESUS and create a www directory and then you have to make sure your permissions are correct.
This will be your homepage Web address:

http://www.cs.montana.edu/~username

where YOU supply the user name.

There are many ways to make a web page. The easiest way is to use an HTML editor. The advanced editions of Netscape, and Internet Explorer all allow you to make an html document. That is all a basic web page is, and HTML document (HyperText Markup Language). When you make a Web page in a HTML editor you don't have to type in the tags, the editor does it for you behind the scenes. The tags are talked about below.

In CS 160 you will have to type the tags yourself, create the Web page on your own without a HTML editor.

HTML documents have two parts when viewed in a text editor like notepad: (and if you use the tags below you can create the whole Web page in notepad, the only difference is you have to type in the tags below yourself.)

The text that ends showing up when viewed in a web browser.

And the HTML tags that tell the browser how to display the images and text.

When you create a Web page in an HTML Editor, you don't have to type in the tags, the editor creates them for you behind the scenes. If you use a text editor like Notepad, then you have to type the text and the tags yourself. I prefer the second way (text editor) so I can control every aspect of the Web page. Using a Web editor is the easiest way. You can do either way for this assignment.
To take a look at what HTML code looks like go to the Pulldown menu VIEW above and then according to which browser your using select PAGE SOURCE in Netscape or just SOURCE in Internet Explorer. (If your using some other browser...experiment I guess).

You should now see a document that has tags which are text in brackets <>, and just text.
Any text you see inside < > are considered tags. Tags are instructions to the browser how to display the text. Here is an example how to center text:

<center> This text would be centered </center>

This text would be centered

As you see the when your done centering the text you use the same tag but with
a / inside the brackets to end the instruction <center></center>.

The following explains HTML and some of the tags associated with creating your own HTML. Below that is an explanation on how to take a picture from the Internet and insert it into your Web page, and beyond that is an explanation on FTP and how to host your Web page on TREX2.

Here are the other main tags:

<html> </html>      This starts the html page and the closing bracket is at the end
<title> </title>         Defines the title of the page
<body> </body>     This is where the main part of the page is defined.

In the body tag you can also describe the background

<body bgcolor="ffffff">

You can define the font color the same way:

<font color="000000"> </font>

And font size

<font size=+2 color="112233"> </font>

Other ways of defining font size are by declaring the text a heading, there are six different headings
<h1> text   </h1>
<h2> text   </h2>
......
......down to
<h6>   text </h6>

C0LORS are defined with three variables RGB, as you notice above when I define a color I use 6 digits. The first two are the RED variable, the next two are the GREEN amount and the last two are the BLUE amount. You can make any color you want by changing these variables.
The amounts are 0 - F or 16 levels. It's a Hexdecimal representation of numbers.
So the following:
<color = "ffff00">
would mean RED = 1616 GREEN = 1616 and BLUE would be at 00.
Full red, full green and no blue makes YELLOW.
There are several tables out on the internet that tell you what do use to make certain colors.

Other very useful tags
<b> text </b>                           Bold
<u> text   </u>                           Underline
<i> text   </i>                            Italized

<p> &nbs p; Makes a new paragraph
<br> &n bsp; start a new line
The <br> doesn't need a closing </br> and it's also the most used tag.

HYPERTEXT LINKS

To make your text a hypertext link use the following:

<a href="http://webpage"> link </a>

Hint: if the webpage your trying to link is in your same folder you don't have to put the whole http://webpage stuff you can just link it like this

<a href="page.html"> link </a>

PRETTY PICTURES

The tag to display a picture is

<img src="picture.gif">

Most web browsers use pictures with the extensions .jpeg, .jpg, or .gif. So if you are trying to display a scanned in picture, make sure you scan it in as a .jpg or .jpeg. The other, .gif is usually drawings or animations.

To take a picture from someone else on the web, this is how you do it:

Right click on the image
Choose save as
Do not change the three letter extension, but you can name it anything you want.

These are the main tags to making a web page.

MSU WEB PAGES

If you have an account with TREX2 this is how to display your web page to the world so you can wow your friends and family.

Make a dir in your home directory called www.

See the top of the page.

Save your web page as index.html.
FTP your file to the www directory in your ESUS account, if you did not create your Web page on ESUS. Remeber you must FTP the Web page and any photos that are used in the Web page. Pictures are not embedded they are linked, so the best way to do it is keep the pictures in a folder called images and move that folder over with your Webpage. I will show you how to do that in class. When you FTP it over to the Server FTP the index.html and the WWW.