Robert Siegel

Web Notes

Future Web gurus -


+ Lesson 1 - Getting started
+ Lesson 2 - Viewing source code
+ Lesson 3 - Using pico
+ Lesson 4
+ Lesson 5
+ Lesson 6
+ Lesson 7
+ Lesson 8 - Specifying color
+ Lesson 9 - Simple tables

(see also Web tools


Lesson 1
Getting started

If you do not have a home page, you can use the following commands to create one.

1) log onto your leland account but do not go into mail.
That is, do NOT type "elm" or "pine" or whatever.
2) Type "mkdir WWW" - (The Ws need to be in caps.)
3) Type "fs setacl WWW system:anyuser read"
4) type "cd WWW" - (Again make sure you use the same case.)
5) type "emacs index.html" - (You are now in the dreaded emacs.)
However, emacs automatically generates html code for files that end in ".html")
6) Leave the dreaded emacs by typing

"Ctrl x" then
"Ctrl s" then
"Ctrl x" then
"Ctrl c"
(Do ask why, just do it.
And remember that "Ctrl" refers to the control key.)
7) You now have your very own web page!
Your address is
http://www.stanford.edu/~yourlelandaccount/
For instance, mine is http://www.stanford.edu/~siegelr/


Notes -
1) Most (but not all) web pages end with the extension ".html"
2) Most (but not all) root home pages are named "index.html"
3) You could follow the above procedure to create any number of subpages.
You just need to substitute " whateveryouwant.html" for "index.html"
4) Lesson 3 will teach you a different way to make your virus page from a template.

Lesson 2

Viewing Source Code

Bring up Netscape
Type in the address (URL) of yourvirusfamily web page

press the "View" Button
press the "page course" or "source code" button.
You must wait until the page has finished loading before you can do this.
This should open a new window with all the html code for your page.

Remarkably, you can do this with almost ANY page!

This will allow you to see how people constructed their pages.
And, you can steal stuff!

Please be careful.
Steal techniques and links with impunity.
However...
Do NOT steal images or text unless you have permission or unless they are
public domain.
Lots of government stuff is public domain.

Begin by looking at the code for brief or simply constructed pages.
Look at the commands on your page.  -  
Try to figure out why you page looks the way it does.
Print out interesting pages for future reference. - 
Keep them in a manilla folder or the equivalent.

This will make even more sense after lesson 5 when I describe some simple
HTML commands.

Lesson 3

Using pico

NOTE
Whenever you see the letters "your---", 
substitute the appropriate text that applies to you.


Bring up Netscape.
Type in the following URL: http://www.stanford.edu/~siegelr/virustemplate2002.html
Press the "View" Button.
Press the "page course" or "source code" button.
Next, simultaneously press the Ctrl key and the letter A 
to highlight everything.
Next, simultaneously press the Ctrl key and the letter O
(or the copy command) to copy everything.

2) Now, log on to your leland account
3) type  -   	
	cd WWW
4) type -	
	pico yourvirusfamily.html
(but substitute the correct family)

An empty file should appear.
5) Paste all the stuff you copied into the blank file.
6) Next, simultaneously press the Ctrl key and the letter O.
That will save the file.
To quit pico ...
7) Simultaneously press the Ctrl key and the letter X

You now have a file ready for modification.
The address of the new file is:
http://www.stanford.edu/~yourlelandaccount/yourvirusfamily.html

Email me if you have any questions
Next lesson: modifying your page

Lesson 4


Modifying your page

Once again, whenever you see the letters "your---",
substitute the appropriate text that applies to you.

Generally speaking, you will want to open netscape (or other web browser)
so that you can switch back and forth between your page and your code.
This will let you see how your page looks after you have made the
appropriate changes.

1) open Netscape
2) log on to your leland account
3) type  -   	
	cd WWW
4) type -	
	pico yourcoursetopic.html
(but substitute the correct family)

This time the file should have all the code you pasted in.

First some notes about cursor control in pico.

Cursor control may differ from computer to computer.
Here is how it works on my computer.

The arrow keys work normally.
The page up and page down keys do NOT work at all.
Ctrl-Y will page up
Ctrl-V will page down
Ctrl-W will search for a string of text (very useful)
Ctrl-K will delete an entire line (kill)
Ctrl-U will make it come back again (unkill)
Ctrl-D will delete a single character foward
Backspace will delete a single character backwards


5) press Ctrl-W and 
Type the four letters-
	y-o-u-r
and press enter.

The cursor should move to "yourname"
6) Type your name and delete the word yourname
7) press Ctrl-W and then enter
The cursor should move to "yourvirus"
8) Make the appropriate change.
9) press Ctrl-W and then enter
The cursor should move to "youracount"
10) Make the appropriate change.

Ctrl-O will save your changes
Ctrl-X will exit the file

Open Netscape
Go to your virus page
Hit the reload button
Gorgeous!


Lesson 5

Basic HTML commands

(For trivia's sake HTML stands for hypertext mark-up language.
It is a formatting language more than a programming language
so you need not worry about a lack of programming skills.)

One odd feature of HTML is that unless you specify every detail of
formatting
(rarely done) the browser will decide for you.
Therefore your page may look different from one computer to the next.
For instance, unless specified, text will automatically wrap around.
However, the number of words per line will depend on the size of the
screen.
Similarly the background color may differ from one computer to the next.

Every command is found between pairs of  less than (<) 
and greater than (>) symbols.

For example:

<br> starts a new line (break command)
<p> starts a new line and add a space
<hr> creates a generic line

Most formatting requires one command to turn it on and another command to turn it off. <b> makes all subsequent text bold </b> turns off the bold As you can see, the off command is the same as the on except for the additional forward slash. <i> turns on italics </i> turns it off
<center> turns on text centering
</center> turns it off

<h1> creates a very large header

</h1> turns it off

<h2>,

<h3>,

<h4>

create successively smaller headers <FONT SIZE=3 FACE=ARIAL> turns on arial font
</font> restores the default font (whatever that might be)

Commands are case insensitive - they can be lower case or caps.

So... give it a try
log onto your leland account.
type
	cd WWW
type 
	pico yourvirusfamily.html

play it safe by making a copy of your file
press
	Ctrl o
at the prompt, type in the new name, say "toga1.html"
(It must end in ".html")
press enter

Now play around.
use the pico cursor commands (lesson two)
and make a few changes changes.
Save the changes 
	Ctrl o 
The name of the current file will appear as the default.
	return
Go to netscape and view the changes.
If you do not see changes make sure
	1) you saved your changes in pico 
	2) you reloaded your page in netscape
	3) the commands you made were formatted correctly.
Make some more changes. 
Remember to close your file
	Ctrl x

Lesson 6

Links and targets To open a link type: <a href="URL">what you want to call the link Replace "URL" with the actual web address. Replace "what you want to call the link" with the appropriate text To close a link </a> Everything between the two commands will be a link and will appear underlined and (usually but not always) blue. (Note: If you forget the link closure, your link will go on for a long time.) Here is an example: <a href="http://www.stanford.edu/~siegelr/">This is Bob's page</a> All you will see on the actual page is: "This is Bob's page" To create a target <a name="xxxx"></a> Replace xxx with an appropriate taget name Do not type anything between the two commands For example <a name="epidemiology"></a> To create a link to that target from the same page just type <a href="#epidemiology">This will take you to the epidemiology section of my page</a> Obviously you can substitute the linking text. To create a link to the target from a different page just type <a href="URL#epidemiology">Bob's epidemiology info</a> You must substitute the actual URL of the target page. When someone clicks on that link, the browser will go to that specific location on that specific page. The best way to avoid typos in creating links is to cut and paste the URLs... Go to any page. Click on the address following the word "location" Cut it using the Edit command. Switch to a file you are editing in pico. Paste it into the appropriate place. Using pico (or emacs), try linking between your home page (which may be otherwise empty) and your virus page.

Lesson 7

Simple images Three important subjects to know about images involve: 1) Creating an image 2) Uploading an image to your account 3) Linking to an image I will deal with the third and easiest thing first. <img src="yourimage.jpg" alt="line"> or <img src="yourimage.gif" alt="+"> both show ways of inserting an image entitled "yourimage". For most purposes all images must be saved in one of two formats: jpg or gif Hence the name extensions These formats differ in their mode of data compression. the alt="whatever" command is not required. However, if the computer cannot upload your image for some reason, this tells it to simply insert a symbol. Thus, it is highly recommended. Otherwise the page may never load. Yourimage will be located on your page based upon the order in which it appears in the code. As written, these commands will only bring up images that are stored in your leland WWW folder. If you would like to use a image stored elsewhere, you will need a more complete address and it may be much slower, particularly if it is not at Stanford. You can also specify the size of your image. For example, <IMG BORDER="0" SRC = exclaim1.gif WIDTH="20" HEIGHT="20"> This example also specifies that the image will no have a border. Try to play around with different sizing and borders. Stanford has a large number of public domain images which you may either copy to your account or link to directly. For example, <IMG SRC = /gifs/ball.yellow.gif ALT="+"> inserts a little yellow ball which I use as a bullet. Remember, images will greatly enhance your page. They may also slow it down considerably. So use them judiciously. check out http://www.stanford.edu/features.shtml for a list of images and other stuff provided by Stanford. Remember that an image can also be part of a link. It just has to be between the <a href="whatever"> command and the </a> command

Lesson 8

Specifying color A typical web page has at least five colors - the background (BGCOLOR) the letters (TEXT) a link before it has been visited (LINK) a link after it has been visited. (VLINK) active link (ALINK) If you do not specify the colors the browser will select the defaults. Therefore the colors may vary from computer to computer. The usual choices are bgcolor - white or grey text - black link - blue vlink - purple alink - red In Netscape, colors are described using a combinations of the three primary colors. Each primary color is described with 2 digits - first red then green then blue. For each digit there are 16 choices - 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F For example FF0000 is red 00FF00 is green 0000FF is blue 000000 is black FFFFFF is white The total number of color combinations is large 16 to the sixth. For many of us, it may not be that straight-forward choosing combinations that would well together. One fun way to choose combinations of colors is using a color wheel. http://www-students.biola.edu/~brian/csapplet.html Another useful way is to look at pages you like and see what they used. You may specify all the colors near the beginning of your page: Change the <BODY> command to <BODY BGCOLOR="#330033" TEXT="#FFFF66" LINK="#FF6600" VLINK="#FF0000"> using of course, the color combinations of your choice. This will take precedence over the browser default. You may also temporarily change the font color at anytime. <font color="aqua"> Your aqua colored text here. </font> As you can see, certain color names also work in place of the 6 digit alphanumeric code. Instead of a color, you could also create background that consists of an image. As explained in the last lesson, this image would probably be stored as a separate file in your leland account. For example, <BODY BACKGROUND="teal3.GIF">

Lesson 9

Simple Tables Simple tables can be use for fancy formatting. In addition to creating tables as we normally think of them from word or excel, tables created in html can also be use to move blocks of text or images or to give them special properties such as a different background color. Individual cells within a table may vary in size from quite small to quite large. You can even have a separate table within an indivdual cell of a large table. Start a table with <table> Conclude a table with </table> Next specify a new row <tr> (for table row) All cells within a row will be the same height. Next comes the data for each cell in a row <td> (for table data) Type in the text that is to appear Conclude each cell with </td> Add additional cells <td>yourtext</td> <td>yourothertext</td> Then conclude your row </tr> And if you wish start a new row <tr> <td>data1</td> <td>data2</td> <td>date3</td> </tr> When you have added all the rows you want, remember to end your table </table> Now there are lots of subtleties, especially in the initial <table> command... Whatever you do not specify (such as colors or sizes) your browser will choose for you. For example, cell size will be determined by the amount of information in the largest cell of any particular row. Vary the size of the border <table border=0> - no border This makes the table much less intrusive and obvious <TABLE COLS=3 > specifies that the table will have three columns Formatting an individual cell: Example1 <TD ALIGN=CENTER BGCOLOR=#CCCCCC><FONT SIZE=3 FACE=ARIAL COLOR=#00007B><B><i>TEXT</i></B></FONT></TD> text is centered background color is grey font size and style is specified font color is blue text is bold and italicized Example2 (from Sam's page) <TD ALIGN=LEFT WIDTH="100"><IMG SRC="togaman.gif" ALT="Togaman or Togaviridae?" HEIGHT=241 WIDTH=87 ALIGN=RIGHT>&nbsp;</TD> Cell is left justified Cell consists of an image of a man wearing a toga Dimensions of image are specified (This not only give you control but it can speed up the downloading of the page.) Image is followed by a space (&nbsp;)

Lesson 10

Back to basics

Lesson 11

Lists


| Return to top of page | Return to The Threat of Emerging Infection page |
| Bob's Courses page | Bob's advising page | Bob's Home Page |

Comments?


Last modified: March 1, 2002