Creating Web Pages

Summer 2000

By Carman Neustaedter

Creating Web Pages:

Day 1 – Introduction

The goal is to introduce the Internet and software applications that can be used to develop web pages.

Topics Covered:

Understanding and organization of the World Wide Web

Introduction to internet terminology

Introduction to HTML and creating simple web pages in Notepad

Basic HTML Tags

Description of HTML Editors (Netscape Composer, Cute HTML)

Demonstrations:
Check out these web sites for learning about web pages:

www.cutehtml.com (Cute HTML Editor)

tucows.oanet.com/htmlbeginner95.html (Beginner HTML Editors)

tucows.oanet.com/htmledit95.html (Advanced HTML Editors)

http://msdn.microsoft.com/workshop/author/html/beghtml.asp? (MSDN HTML Tutorial)

http://www.ucalgary.ca/it/itf/general/web/web-01.html (U of C Information Technology)

Check out these web sites for background images:

http://www.grsites.com/textures/

http://www.pixelfoundry.com/bgs.html

Notes:

World Wide Web Organization

The Internet

The Internet is a computer network made up of thousands of networks world-wide. No one knows exactly how many computers are connected to the Internet. It is certain, however, that these numbers are in the millions and more are added every day.

No one is in charge of the Internet. There are organizations that work on technical aspects of the network, but no one group is in control. Internet traffic flows through routers that send data to different computers connected to the Internet.

TCP/IP is the protocol that is used for the Internet. A protocol is just a standard by which something is done. TCP/IP works by sending data in packets to computers connected to the Internet. If you are downloading a file or loading a web page, the files needed are split up into chunks and sent to you chunk by chunk.

Servers & Domains

domain name – specifies where a web page is located

URL – Uniform Resource Locator, tells you where you can find something on the Internet (basically a web page’s address)

a domain name points the browser to an IP address

an IP address is the number assigned to a computer that is connected to the Internet, each computer connected to the Internet has a different IP address or number

an IP address consists of four numbers, each separated by a period, each number can be between 0 and 255 (eg. 123.120.3.16)

web pages are located on a server computer that is connected to the Internet directly. Server computers are generally kept on (turned on) all the time so that the web pages on the server are always accessible.

when you specify a domain name you are actually specifying what server computer the web page you are looking for is located on

ie.www.ucalgary.ca is the URL where the University of Calgary’s web page is

ucalgary.ca is the domain name, and therefore we are looking for the web page on the server computer pointed to by ucalgary.ca

HTML Files

hypertext is a document containing words that connect to other documents, the connections are called links

web pages are just files like a Word document or Excel spreadsheet

web page filenames MUST end in .html or .htm

pictures displayed on a web page are usually either a jpeg (Joint Photographic Expert Group) image or a gif (Graphical Interchange Format) image

ie.

myWordFile.doc (doc means it is a Word document)

myExcelFile.xls (xls means it is an Excel spreadsheet)

myWebPage.html (html means it is a web page viewable in Netscape or Internet Explorer)

myWebPage.htm (means the same thing as html)

Directories

if you see a / (slash) in a URL this just means that a file or web page is located inside a directory on the server computer

ie.

www.cpsc.ucalgary.ca/~carman/

this URL says that my web page is on the CPSC server in a directory called carman.

HTML

Hyper Text Markup Language - is a computer language used to design web pages

to view HTML code used to create a web page:

in Internet Explorer, go to the Edit menu and then to View Source or right click on a page and go to View Source in the menu that appears
in Netscape, go to the Edit menu and View Source (I think, I usually use Internet Explorer)

HTML uses TAGS to format text

a web page file (html file) is just text that you want displayed on the screen with formatting tags around the text

the formatting tags change the text you want to show up, making it bigger, smaller, bold, italic, centred, etc.

tags contain the format property you want inside pointy brackets < format type >

there are usually two tags for each format, the first one starts the format and the second one finishes it

the second tag to close a format has a slash inside the tag < / format type >

ie. <BOLD> This text will be bold. </BOLD>

Where Do I Create a Web Page?

You can type HTML code by opening up a web page file in Notepad. To do this though, you must make your entire web page using just HTML code.

You can create your web page in Microsoft Word and then in the File menu, use Save as HTML to convert your Word document to a web page file

You can create your web page in Netscape Composer. It has design tools that allow you to add features usually found on web pages. There is a web page toolbar at the top of Composer and special menus for adding things such as links and graphics to your web page.

Important Tags

<HTML> specifies the start of an html file

</HTML> specifies the end of an html file

<TITLE> The title you want displayed at the top bar of your window goes here. </TITLE>

<BODY> All the normal text you want displayed on a web page goes in here. </BODY>

<BOLD> This text will be bold </BOLD>

<I> This text will be italicized </I> (this is a capital letter i in case the font makes it unclear)

<U> This text will be underlined </U>

<CENTER> This text will be centred on the page. Note the tag needs US spelling of centre.</CENTER>

<BR> this tag acts as an enter key, any text after it starts on a new line (HTML won't display tab key presses or enter key presses when you are coding a web page. It will only display spaces)

<HR> draws a horizontal ruler line across the page

<FONT FACE="MS Sans Serif" SIZE=5 COLOR=RED> This text will have a different font face, size, and colour. Note US Spelling of colour. </FONT>

<IMG SRC="mypicture.jpg"> this tag displays a picture on your web page

You can see that the above tags usually have a start tag and a finish tag. Everything between start and finish is formatted according to the tag. You can have tags nested inside of each other as well.

ie. <BOLD><CENTER>This text will be bold and centred</BOLD></CENTER>

a bulleted listed can be created using code like this:

<UL>

<LI>Item 1

<LI>Item 2

</UL>

the <UL> tag starts the bulleted list, each <LI> tag specifies where a bullet will appear. The </UL> tag tells where the bulleted list ends.

Assignments:
Personal Web Page

Begin the design of a personal web page. Add information about yourself and insert some pictures that you either have scanned or found on the Internet (to save a picture on a web site, just right click on it and Save Link As). Save your page and any picture files to a floppy disk.

Day 2 – Publishing Web Pages & More HTML Tags

The goal is to develop and introduce more advanced techniques used for designing web pages. Students will also learn how to publish their web pages on the Internet.

Topics Covered:

More HTML Tags

FTP: File Transfer Protocol

downloading and uploading files

Demonstrations:

Winsock FTP or another transfer program

Upload personal web page files to an ACS account and a create public_html directory with proper permissions for viewing.

Notes:

Linking Pages

<BODY BGCOLOR="red" vlink="white" link="white" alink="white"> All the normal text you want displayed on a web page goes in here. </BODY>

<BODY BACKGROUND="mypicture.jpg"> "> All the normal text you want displayed on a web page goes in here.</BODY>

<A HREF="http://www.hotmail.com"> this text will be underlined with blue and will be a link to another web page, clicking on it will take you to that web page </A>

<A HREF="mailto:carman@cpsc.ucalgary.ca"> this text if clicked on will open up a window to send me an email message</A>

<table cellpadding=10 cellspacing=5> <td> Starts a column in a table. <td> Starts another column in a table. </table>

Putting Your Page on the Internet

UNIX commands

when you login to your ACS university email account you are using a computer running an operating system called UNIX

different operating systems are Windows 95, Windows NT, DOS, Linux, and UNIX

they all control how the computer runs program and manages memory

UNIX acts a lot like DOS, you must type in commands at a prompt

UNIX Command	DOS Command
ls (displays files)	dir
ls -al (displays all files in a list)
rm <filename> (removes a file)	del <filename>
rm -r <directory name> (removes a directory and all its contents)	deltree <directory name>
cd <directory name> (changes directories)	cd <directory name>
cd .. (note there must be a space after cd before the two periods) (moves back one directory)	cd.. (don’t need space after cd)
mkdir <directory name> (make directory)	mkdir <directory name>
cp <filename> <location> (copies file)	copy <filename> <location>
mv <filename> <location> (moves a file or renames it)	move <filename> <location> rename <filename> <new name>
man <UNIX command> (displays list of how to use a UNIX command)
man -k <word> (searches manual pages for pages containing your word)
pine (open up email program)
chmod <permissions> <filename> (changes permissions on a file)	attrib <permissions> <filename>

Creating a Directory for Your Web Page

all your web page files must be in a directory called public_html in your ACS university directory

they must all have permissions set so that the outside world can view your web page

To log in to your ACS account, go to Start -> Run, then type in telnet acs5.acs.ucalgary.ca

This will log you into one of ACS's computers. You must enter in your USERNAME and PASSWORD. When asked for terminal type, choose 1 for VT100.

You will get a command prompt where you can enter the following command.

acs6:/u201/cgneusta--> mkdir public_html

Sending Your Files to Your Web Site

all files that you want to be on your web page must be in your public_html directory, this includes all html files, htm files, graphic files (jpg, gif)

use Winsock FTP to put all your files into the public_html directory.

open up Winsock FTP on one of the school machines (or you can download it at home from www.tucows.com)
type in your username and password, click OK or CONNECT to connect to an ACS computer (where your files need to end up)
the files on your computer appear in the left column, the files on the ACS computer appear in the right column
you must transfer your web site files from the left column, to the right column (into the public_html) directory

Changing Permissions (giving the world access)

the only thing left is to allow others to view your files, and in turn, view your web page, this means we have to use the chmod command to change the permissions on your files and directory

log on to an ACS machine, by using "telnet acs.ucalgary.ca" in Start -> Run …….or an AIX logon (program in the Scurf Labs)

once logged in, type these commands

acs6:/u201/cgneusta--> cd ..

acs6:/u201/--> chmod 755 cgneusta (where cgneusta is your username for your ACS account)

acs6:/u201/--> cd cgneusta

acs6:/u201/cgneusta--> chmod -R 755 public_html

Viewing Your Web Page on the Internet

your web page can now be viewed at:

www.ucalgary.ca/~cgneusta

where cgneusta is your login name for your ACS university account

Supplementary Notes:

CHMOD - Setting Permissions in UNIX

The command CHMOD is used to change the viewing permissions of files in your ACS account. For your web page you want the world to be able to view your web page files.

Each file has permissions, depending on the type of user.

There are three user types:

you - this would be you
group - a group of users you are a part of (not important)
others - the rest of the world

Each user has permissions for:

reading (r) - being able to view files
writing (w) - being able to change files
executing (x) - being able to run files (these files won't run unless they are an executable file however)

So, for you, group, and others there are rwx permissions ([r]ead, [w]rite, e[x]ecute).

They are grouped like this

you
rwx

group
rwx

others
rwx

If the user is to have a permission to either read, write, or execute, that letter is assigned a 1. If not, it is assigned a 0.

eg. this assignment gives you permission to read, write, and execute your file. Nobody else is allowed to read, write, or execute your file.

you
111

group
000

others
000

eg. this assignment gives you permission to read, write, and execute your file. It also allows the rest of the world to view your file or run it, but not write it (make changes to it).

you
111

group
101

others
101

the chmod command can use a number to set the permissions of a file:

eg.

chmod 755 public_html

The number just represents what permissions you are giving the file.

The number is a base 8 number (octal) representing the users: you, group, others

If you create a number for each of: you, group, others
you can put the numbers next to each other to form the number for the chmod command.

First you must create an octal number for each user.

Take the combination of 1's and 0's from above to form an octal number using this conversion table:

Binary Number	Octal Number
000	0
001	1
010	2
011	3
100	4
101	5
110	6
111	7

Then combine each user's octal number to create a 3 digit number. This is the number used for the chmod command.

eg.

If I want the world to be able to view a file then I want to give read and execute permissions to the users group and others. I want to keep my permissions at read, write, and execute still though.

I would use this series of 1's and 0's:

you
111

group
101

others
101

by using the conversion table above I would get:

you
7

group
5

others
5

this would give me the number: 755

and I would use the command: chmod 755 <filename>

Assignments:
Update Your Web Page

Add additional information to your web page, such as your hobbies, interests, and more information about yourself. Create 2 more pages with this information and link all three pages together.

Day 3 – Hit Counter, Guestbook, and Sound

The goal is to develop and introduce advanced web design features such as special plug-ins and HTML code to enhance a page.

Topics Covered:

Adding a Hit Counter

Adding a Guestbook (form script)

Adding Sound (HTML Tag)

Demonstrations:
Hit Counter

Guestbook HTML Source Code (by Adam King)

<HTML>

<HEAD>

<TITLE>My Guestbook</TITLE>

</HEAD>

<H1> Sign In, Please...</H1>

<FORM METHOD="POST" ACTION="mailto:carman@cpsc.ucalgary.ca"

ENCTYPE="text/plain">

<B>Please enter your name: </B><INPUT NAME="username" size="30">

<BR>

<B>and your email address: </B><INPUT Name="usermail" size="30">

<P>

<B>What do you think of my site?</B>

<P>

<INPUT TYPE="radio" NAME=I_think_that VALUE="It's_Great">It's Great!

<INPUT TYPE="radio" NAME=I_think_that VALUE="It's_Okay">It's Okay!

<INPUT TYPE="radio" NAME=I_think_that VALUE="It_Needs_Work">It Needs Work!

<BR>

<P>

</CENTER>

<H3>Make any comments you'd like below:</H3>

<P>

<B>Thanks for your input</B>

<BR>

</CENTER>

</FORM>

</BODY>

</HTML>

Midi Sound

Scrolling Text for IE (Java Script)

<!-- begin

function scrollit(seed)

{

var msg = "Add Your Scrolling Text Here"

var out = " ";

var c = 1;

if(seed > 0)

{

for(c=0 ; c < seed ; c++)

{

out += " ";

}

out += msg;

seed--;

var cmd = "scrollit(" + seed + ")";

window.status = out;

timerTwo = window.setTimeout(cmd,80);

}

else

{

if(-seed < msg.length)

{

out += msg.substring(-seed, msg.length);

seed--;

var cmd = "scrollit(" + seed + ")";

window.status = out;

timerTwo=window.setTimeout(cmd,80);

}

else

{

window.status = " ";

timerTwo = window.setTimeout("scrollit(120)",80);

}

scrollit(150);

// end -->

</SCRIPT>

Assignments:
Add the above mentioned effects to your web page and upload it.

Day 4 – Alternate Web Hosting & Design Techniques

The goal is to find other places to store web pages on the Internet for free. Discussion will be made about good design techniques to enhance the user’s ease-of-navigation.

Topics Covered:

Web servers and hosting

Good design techniques of computer programming (some may not apply to web pages)

Simple and natural dialogue (be frugal with pages, keep things simple, less is more)

Speak the user’s language (use words that would be familiar to the person visiting the site)

Minimize user’s memory load (remind user of what they are doing, eg. what file they are saving)

Be consistent (buttons always in same place, same actions to do same thing)

Provide shortcuts (command keys, clickable buttons to go places)

Provide clearly marked exits (undo, cancel, quit, back buttons, links to all pages)

Provide feedback (if something is taking a while to process, tell the user how long it will take or what is happening)

Provide helpful and useful error messages (provide a solution and explain what exactly the problem is)

Provide help (use tool tips or navigation cues, provide full help for things the user might want to do)

Demonstrations:
Free Web Hosting URLS

http://geocities.yahoo.com/home/

http://angelfire.lycos.com/

Good Design URLS

www.shockwave.com

www.microsoft.com

www.yahoo.com

Assignments:
Free Web Hosting

Upload your web page to a server that offers free web hosting so your page can exist after the course is finished.

Design Techniques

Modify your page to include good design techniques such as having a navigation bar and back buttons on each page.

Day 5 – Project

The goal is to use all the tools from the previous classes to complete a personal web page.

Topics Covered:

review of course material

Assignments:
Personal Web Page

Complete your personal web pages using all the tools you have learned during the course.