Session 3: Unix, the Internet and the Web

Recap of last week

The concept of tagging

Textual properties are defined by tags
All tages begin with a "<" and end with a ">"
Most tags are paired with a closed tag, which begins with a "</"
Some tags have no closing tags, e.g. <HR>
Some tags have closing tags which are usually not required, e.g.
Some tags contain attributes, which are specified in the opening tag in the form of NAME="VALUE", e.g. <A HREF="http://www.yahoo.com">
Tags are organized into a hierarchy

The concept of "raw" text

What's the difference between and HTML file and a wordprocessing file, like a WordPerfect file?

Raw text files can be viewed and edited in almost any text editor, on most operating systems WordPerfect and other proprietary files must be edited in the program that created them, and on the same operating system Proprietary files can be converted to other formats

The core tag set

Document tags

<HTML>, <HEAD>, <TITLE>, <BODY>

Format tags

<Hx>, *, , , , *, <HR>*

Hypertext tags

<A HREF="url">
URL = "Universal Resource Locator", i.e. the address of the document syntax: http://server/path/filename

*: Non-paired or optionally paired tags

Filenaming

Since you are working in Unix,remember these rules about naming files:

Use lowercase because Unix is "case sensitive"
Use standard extensions (*.html, *.txt) because Unix programs use these to identify the kind of file
Use "alphanumeric" characters, with underscores and dashes for spaces, since Unix reserves other characters--like spaces, asterisks and slashes--for other purposes

Today

A few more HTML tags
Taking stock of the overall process of web document writing
A Unix survival guide

A few more HTML tags

The IMG tag

This tag allows you to place images in your text The images can be anywhere on the web, including your own disk of course

EXERCISE: Put an image in your web document

Decide on a single folder to put all of your working files
- Use a floppy disk, or create a folder
Open Netscape
Log onto any page that has an image Suggestion: http://cti.itc.virginia.edu/mbase
Download an image to your local disk
Close Netscape
Open AOLPress
Create a new page or use an old one
Get into HTML mode
Create a page that points to the image with the following tag
- <IMG SRC="image.gif">
Return to WYSIWYG mode

Remarks

The IMG tag has no pair
The IMG tag requires the attribute SRC
- The SRC attribute takes a URL as a value, just like HREF
- The URL must be a GIF or a JPEG file
The IMG tag uses optionally other attributes, such as HEIGHT and WIDTH
IMG tags can be wrapped in an <A HREF ...> tag to become links
When a GIF or JPEG image file is given as a URL to an HREF attribute in an A tag, the image will be opened up in a new page

Exercise: Create a hyperlink out of an image file

Create the IMG tag in HTML mode
Create the IMG tag with AOLPress
- Element->Image

Other layout tags

Lists
- <UL>
- <LI>
- <OL>
Tables
- <TABLE>
- <TR>
- <TD>
- <TH>

EXERCISE: Create a list

Use AOLPress to create a list then look at it in HTML mode
Use button to indent
Use Ctrl-Enter to reverse indent

EXERCISE: Create a table

Use AOLPress to create the code then look at it

Remarks

Writing indented lists and tables can be difficult without a WYSIWIG editor
WYSIWIG editors aren't perfect either

Taking Stock

Creating web pages requires working with files on your Unix account

You connect to your the Unix server via a set of clients, e.g. FTP and Telnet

Why so many clients?

Each client performs a specific task

Telnet

Gives you direct access to files and programs on your account

FTP

Gives you access to files and allows you to move them from one machine to another, in particular to and from your local machine

Netscape (HTTP)

Allows you and anyone else in the world to view the HTML documents that reside on your account

Notice that all clients access the same machine

They all use the same "IP address"
Telnet and FTP require a password, whereas Netscape does not

Given that your files are on a Unix account, but that you access that account with a PC or Mac, there are at least two modes of "authoring" web documents:

The "local mirror approach"
The "direct editing approach"

In either case, to acquire facility in web authoring at Princeton you will need to know something about Unix

A Unix survival kit

Dealing with a command-line interface

Requires recall, not recognition
Can be faster
Designed for programming

Directories

Directories are like Macintosh folders
Unix, like DOS, uses the metaphor of branching vs. nesting
A directory within, or under, another directory is a "subdirectory"
One navigates through directories with commands on the "command line"

The Command Line

The command line is the space where you are prompted to enter commands
It is usually preceded by a "$" or "%"
Commands are like verbs, they take direct and indirect objects called "arguments"
They also take "switches", which modify how the command is executed
In general, switches come before arguments
These ideas are best understood by example

Some Basic Commands

pwd

This command shows you your current "path"
A "path" is your location in the directory system
Directories are separated by forward slahes ("/")
This command needs no arguments

ls

This command allows you to list the contents of a directory
ls takes as an argument the directory you want to look in; if no argument is given, it looks in the current directory
- ENTER: "ls"
- ENTER: "ls public_html"
If you want to look for files of a certain kind, you can use wildcards "*" stands for any number of any character "?" stands for a single instance of any character
- For example, "ls *.html" will list all the files in a directory that end in ".html", while 'ls *.ht*" will list files that end in ".htm" as well.
-l is a switch that lets you look at detailed information about your files and directories
- If the file list is too long, you can enter "ls -l | more"
- The "|" allows you "pipe" the output of one command into another
- Don't worry about how this works for now
Note the output of ls -l. What you see is a list of all the files and directories in the directory from which you issued the command
- Listed with each item is a set of properties
- The very first character on the left tells you if it is a file or a directory
  - - = file
  - d = directory
- The rest of the left-hand set contains information about the permissions associated with each item
  - Notice that there are three sets of three places, each filled with either a "-", "r", "w", "x", or "s".
  - "r", "w", and "x" refer to READ, WRITE and EXECUTE respectively
  - The first three characters refer to the rights of the owner
  - The last three characters refer to the rights of the world
  - Don't worry about the middle
- The middle column specifies the owner of each item
- The right-hand column gives info about the file itself, such as its size, time and date of creation, and name
You will notice a "." and a ".." at the top of your list.
- ".." refers to the directory about the current directory
- This becomes useful when you want to move around, which you can do with the "cd" command

cd

This command means "change directory"
It takes a directory path as an arguments
".." can be used to stand for back one directory
Without an argument, cd takes you to your root directory
You can specify a directory in either relative or absolute terms
A relative directory is one relative to the current directory, whereas an absolute one is specified with the full path
- relative: cd public_html
- absolute: cd /u/alvarado/public_html
Notice the importance of the initial slash: it stands for the root directory of the system

mkdir

Makes a directory below the current directory (unless an absolute path is given)

rmdir

Removes the directory specified in the argument, which can either be absolute or relative

rm

Removes a file

mv

Moves or renames a file
The first argument is file to be moved or renamed, the second is the directory into which the file is to be moved OR the new name for the file
Nota bene: if you move to a directory that doesn't exist, the file will be renamed to the the name of the nonexistent directory

chmod

This command changes the mode, of permissions of a file.
It takes two arguments: the set of permssions and the files to be changed
Example:
- "chmod a+r foo.html" will add read rights for the world, signified by "a", to the file "foo.html"
Here some other examples of the first argument:
- u+w : add write rights to the user
- a-w : take away write rights from the world

Some programs

pico
telnet
lynx

Your directory structure

The directory that you are in when you log on to your account is called your "root" directory
Your root directory contains a number of directories and files already
These are used by programs that are already built into your account, like pico
The "public_html" subdirectory has a special status; it maps onto a URL