Download WEB class - csitprof.com

http://csitprof.tripod.com/cs450
Login to CSNET server
UserName: last name + first initial
Password: Last name + first initial
You have two options logging into the server and logging into the domain.
The server is CSNET and the domain (ex. Chaospro1)
Make sure you are logging in to CSNET.
Note:
The first time the user logs in it creates a profile for the user. This takes some time. If
the user moves from machine to machine a new profile will be created – so it is better to
try and get the same machine from week to week.
Once you are on – you can go to my computer – you will see that you are on a special
drive that is on the network – the “Y” drive is where the student stores their data for the
class under their name “ccserver\su04”
Opening the “y” drive you will see the folders Cookies, desktop, Favorites, My
Documents, StarMenu
Copy your file to this “Y” drive
WIP - work in progress
Basics – this is where the exercises from Chapter 1 is stored
Article.html
Urls – and this is Chapter 2
CSS - Chapter 3
Tables – Chapter 4
Exercise 1
Exercise 2
Project 2
When you are finished do not forget to LOG OFF to protect your work
This will take a little time because the server needs to save your settings – remember – if
everybody is leaving the classroom at the same time – this may cause the server to slow
down.
NOTE: it may be the roaming profile that is taking up so much time
Now that you have logged on…… we need to upload our WEB page to the server
Create tiled windows and drag the folder over to the folder on the server – (make a copy
of your work) – now your work is on the server
Book review – first four chapters
Bold faced text are questions on tests.
Files for the class (first four chapters are on the server on ccserver\public\sum04)
Copy these files to a directory for the current semester.
Chapter 1 – browsers
Browsers and browser extensions
Navigator
Internet explorer
Wc3 – world wide web consortium – in charge of the standard
However not all browsers are compliant with the standard
Mozilla
Opera
Try to write code that is compatible with all the browsers. Browsers ignore code that
they do not understand.
Samples of HTML code –
Standards came into practice with HTML 4.01
We have been working with HTML 3.0 in a non validated format
It works and that is what is important
Validated vs non validated code – validation is important but it does complicate the code.
Page 17 has a missing link in the validated document
Eventually you will need to write validated code but it should not stop you from creating
WEB pages.
Example – style sheets are used in 4.01 In earlier versions the code itself will specify the font – see page 8 and 9
Font = blah blah
This type of code including the font is called “deprecated” code and is being phased out
However- some browsers including Yahoo do not currently support 4.01 so here we are
In chapter 5the book begins to tell you to write the code in one form and then to erase it
and write it again in another form of code.
Content vs presentation
<H1> means heading 1 ---- google ranks pages according to content heading 1 will rank
pretty high – so whatever words are in the title will be available to the search engine
DTD – data type definition – page 11
Strict – code uses CSS - cascading style sheets ( no <Font size = 7></font>)
Must haves for WEB pages
Must have folder for WEB page to live in
Must have text for WEB page
Must check it in browser
Before you begin - create a folder (in this class (WIP – work in progress, Basics, Images,
etc)
Steps
Open the browser
File
Open – New VERY IMPORTANT OTHERWISE YOU WILL TRASH
YOUR BROWSER
Save empty file on your hard drive under whatever name you will be using for your WEB
page. -------- DO NOT SAVE THE FILE ON YOUR BROWSER
Open notepad
Right Click on empty space in status bar
Pick tile vertically
Type code in notepad
Save code (save as the first time – be sure to use .html extension)
Go to the document on your disk –
Open it – it should come up in your default browser because the file has an HTML
extension.
Go to browser
Click on refresh
Project 1
Code
Hello world
Adding structure to your code
<html>
<head>
</head>
<body>
Hello world
</body>
what is the difference – nothing – both will show the same
However, the code with structure will VALIDATE
Code that will validate
<html>
<head>
<title>Hello world, it’s our first page </title>
</head>
<body>
</body>
moving the text from body to the title will put this text up in the title bar of the browser.
Now we put the DOC type declaration in – this goes outside the container
<!DOCTYPE HTML PUBLIC “-//W3C//DDT HTML 4.O1 Transitional//EN”
“http://www.w3.org/TR/html4.0/loose.dtd”>
(for our purpose in this book the link does not work so use
http://validator.w3.orgfile-upload.html
<html>
<head>
<META HTTP-EQUIV=”Content-Type” content = “text/html charset=iso-8859-1”>
<title>Hello world, it’s our first page </title>
</head>
<body>
</body>
</html>
if it works and gets validated – copy the validation code to your page in the body – this
will put the validated logo on your web page
do the second example showing the paragraph tag and the blank tag
<p> </p> and the <b>
the paragraph tag will give you a blank space between paragraphs
the <pre> tag is a deprecated tag but will give you the spacing exactly as shown in your
code.
Page 21 - do the exercise
Dump the body text from the hello world program
<html>
<head>
<META HTTP-EQUIV=”Content-Type” content = “text/html charset=iso-8859-1”>
<title>Hello world, it’s our first page </title>
</head>
<body>
<p>This is the first sentence</p>
<p>This is the second sentence</p>
<pre>This is the
third sentence</pre>
This is the &nbsp; fourth sentence
<br /><br /><br /><br /><br />
This is the fifth sentence
</body>
</html>
the & is the code for the escape key
nbsp stands for no break space
<! This is a comment line for myself>
Parts that are important – page 26
This takes you to the CD rom – however – these files are on your server in the
WIP\Basics folder.
Article.html
Eric really likes the <clear all> tag…. As opposed to the clear right or the clear left tag.
There are three files to this chapter – articles, images and hello
Chapter 2
Href is the hypertext reference tag – href= whatever the file name is
There are 3different kinds of links
CLASS PAGE
Go to sample class page on the CSITPROF site
Show sample class page in both internet explorer and netscape navigator.
They show differently depending on which browser you use.
WEB pages that use tables will not be googled correctly because google treats tables as
footnotes which is what they were originally intended. This means that all the text in
your table will be ignored.
Many people use tables for alignment and design. (it is a lot easier) than coding it
yourself
Notice that the finger pointer will show the full name of the link and the file down in the
status bar. This is great for debugging because if the link does not work – you can see
what you put in the code with out actually having to go into the code.
Goto index.html
This file is your homepage
There are 3 files
Copy the files to your folder
Link from class page to your work
The left side of the table is your class work …. The right side of the table is for any extra
fancy things you may have done – any experimentation – if you have not done any of
these things then remove the references in the code.
Server is # 66
On http:csitprof.tripod.com/classpage/
file://\\ccserver\public\450%20file\classpage\index.html
this is the 7th class – the class goes to the lab and copies the files to their folders and does
the links for the first chapter (if they have it) – one hour is allowed – then back to class
and chapter 2 is done in the class
links
<a href = “filename.html” title = “whatever is here will appear as a tool tip”
quotes are not mandatory but should always be used – if there is a space quotes are
required
exercise 3
LINKING TO OTHER PARTS OF THE PAGE
reference using a name this called using an anchor and a target
<a href =%duc (anchor)
<a href=#junk (this target is on the same page)
< a name=duc (target)
the body is the structural container that defines the WEB page
GOING BACK TO THE TOP
<p><a href = #top>Back to Top</a></p>
then put this at the top of the page
<p><a name=”top”></p>
artifacts are mistakes ---- for example extra spaces within the brackets
show branch hopping using the .. to move from folder to folder within the same level –
use the root reference to allow moving the web page from server to server without having
to re-write all your references as you would have to do if you specified which drive
specifying a base reference will set a drive or location for your
to get the entire class page in your folder you will need the following files:
index.htm
sat450.jpg
mailbox1.gif
In this class, Tables were explored – much more than is showed in the book.
The basic file index.html is used then columns are demonstrated with margins, column
widths, column numbers, (see the final product)
With the marquee inside the centered table
Then he loaded the background pages and selected and saved backgrounds of his choice.
Then going back to the index file
He put a background file in the first table – and saved it as background.html
<body background=../images/back04.jpg>
after trying several backgrounds he loaded the index file again
and saved it as table 2
this time he used a specific image – back15.gif
because he wanted to show us a web page saved as a layout.
Tables2 is table example with margins
This will show the two margins as grey bars down the side with a white column in the
middle.
Load paint
Determine how many pixels wide your margin is (using the pencil)
Then change your code to be exactly the number of pixels (in this case 100)
Question for Eric – does the table size itself according to the screen resolution or screen
size--