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