Basic Skills for HTML Princeton University Technical Services

Basic Skills for HTML

An Introduction
Before beginning to work with HTML, it is important to have certain skills and understanding about how Windows and Unix work. This workshop will deal with some of the basic skills important to working and understanding HTML documents. 1. Windows techniques (switching from one window to another, copy&paste, find&replace, etc.) 2. ASCII vs. other formats 3.1] 4. How to load it onto the server [May have to change .htm to .html] 5. How to set permissions 6. How to view a local file in Netscape A lot of these things can be done for you automatically with the correct software, but it's still important to understand what's going on. 3. How to save a file (.txt => .html) [problem with Windows

Switching from one window to another

There are two ways of switching (toggling) from one window to another. Windows 3.1 Go to the box in the extreme top left corner of the window and click. A menu will appear--choose Switch To. A list of options will appear and choose the one you want. Windows 95 & Windows NT At the bottom of the screen, there is a taskbar where you can click on the different buttons

Another way works with all forms of Windows. Press the Alt Key and then the Tab key. Something that resembles the following window will appear.

Basic Skills for HTML Princeton University Technical Services

By continuing to press the tab key, still holding down the control key, you can choose which program you want.

Basic Skills for HTML Princeton University Technical Services

Copy&Paste

To move text or other information from one area, or window, to another area, use the Edit function from the toolbar at the top of the screen. Select the text you want to copy by dragging the cursor over the information you want. On the Edit menu, click copy (or press control + c).

When you find the spot where you want to insert the information, place the cursor exactly where you want it, go to the Edit menu, and click Paste (or press control + v). Make sure the insert is on,or you might lose everything. As long as you don't press another key, you can also Undo your last command. (see below)

Practice: 1. Open Wordpad 2. go to http://infoshare1.princeton.edu/katmandu/html/example1.html 3. Copy the text below the line, and paste it into Wordpad.

Basic Skills for HTML Princeton University Technical Services

Find
You can use the Find command in Edit function to find words and phrases in the text. Click on Edit=>Find, and a window will appear. (or press control + f).

Enter the text you want to find and it will highlight it for you. This is not a database search, it merely searches the document you have open. There is no Boolean or other capability. Practice: Take the page you just copied and pasted into Wordpad and search for the following words: Technical, Special. Click Select whole word only and Match case and see how they work.

Basic Skills for HTML Princeton University Technical Services

Replace

You can use the Replace command in Edit function to find and replace words and phrases in the text. Click on Edit=>Find, and a window will appear. (or press control + h).

Type in the text you want to replace, along with the new text. When you choose Replace, the computer will ask you if you really want to replace the text. If you choose Replace All, it will replace everything automatically. It's best to think for a moment before choosing Replace All. There is almost always an option for Undo under the Edit command, but the Undo command must be the next key pressed, otherwise, it is no longer possible to undo it.

Practice:

Basic Skills for HTML Princeton University Technical Services

Take the page you just copied and pasted into Wordpad and replace special with specialized. Select whole word only and Match case work the way they did for Find.

Basic Skills for HTML Princeton University Technical Services

ASCII
This stands for the American Standard Code for Information Interchange. It is a code for representing Roman alphabet letters and numbers, primarily for texts in English. There are 127 numbers. Most computers use ASCII for text, but not for word processing. Programs are never in ASCII. You probably remember from school the binary system where all numbers are reduced to 0 and 1. As a result, 10=2 while 1111111=128. ASCII is an accepted standard used by many programs and computers that code basic letters, numbers and other symbols in the same way. 1110000 is a lowercase "p". This is called a seven bit system. IBM introduced an extra bit in 1981, making the 8 bit system and increasing the possible numbers to 256. Not everybody has to use the same coding. Different countries use different codes for their own letters. For example, not everyone uses the roman alphabet. Also, different programs use their own codes. On the Internet, they use a very similar coding called the ISO-Latin-1 character set. Also, the MARC format does not use regular ASCII codes. Why is this important? If you want to look at pages in other languages, you must set your machine to use different codings.
Before setting the Machine

After setting the machine

Practice

Basic Skills for HTML Princeton University Technical Services

Go to: http://www.e-spaces.com/rws/win/supermario/index.html and make the page viewable.

Basic Skills for HTML Princeton University Technical Services

Saving a file
You can make HTML files in any word processor. Of course, it's easier to do this if you have a special program that can do the coding for you and automatically save it correctly. But if you don't, or if you are experiencing troubles, you must save the file as an ASCII file. In most Windows programs, this means saving it as a text file.

In other programs, it may say "Text only" or "Text only with line breaks". Either selection is fine.

File Extensions
In order for Netscape to know that your file should be displayed in the browser screen (instead of opening it with another application) you must save it with the extension .html Practice: Save your file as test.html

Basic Skills for HTML Princeton University Technical Services

Letting Others See Your Work

The next steps are to let other people see your work. If you leave your files on your machine, others will not be able to use your files (unless your machine is a server). Otherwise, all your files must be transferred to the server through an ftp program. There are various programs for doing this. The easiest way to put your file (or files) on the server is to use a special ftp program. We will demonstrate this using a special program: the WSFTP program. First, you must decide which server you will place your files on. In this case, we will place files into our Unix (phoenix) accounts.

Setting up a home page on the server

One last part is to set up a directory in your Unix (phoenix) account named public_html and setting the permissions. CIT has allowed everyone to do this automatically. Log onto your phoenix account to the % prompt. Type in the following command: /usr/princeton/bin/wwwpublic And hit Enter. The public_html directory will be created with the permissions set automatically.

Transferring the files from your machine to the server

Enter the name of the server (in this case, arizona), your user ID and your password, and enter OK.

10

Basic Skills for HTML Princeton University Technical Services

Changing the file names from .htm to .html

On some machines, including the unversity servers, it is important to save your files as ".html" instead of ".htm". On NT and Windows95 systems, this is not a problem, but in Windows3, you are limited to only 3 characters after the dot "test.htm" instead of "test.html".

11

Basic Skills for HTML Princeton University Technical Services

The easiest way to avoid this problem is to set your ftp program to change this automatically. Click on Options in your ftp program.

When the new window appears, Click on Extension Conversions.

12

Basic Skills for HTML Princeton University Technical Services

In the new window, enter ".htm" in the Source, and enter ".html" in the Destination. Click Add, then Exit.

Practice: Create a public_html directory in your phoenix account, and put the test.html in there.

Permissions
Once on the server, you must make sure that the permissions are set properly, otherwise people may get the reply, such as Forbidden 403. When you look at the directory of your file on the server and type the command ls -l, you will see something strange that looks like this:

This display tells us: 1. what the permissions are (see below) 2. the number of links to this file (unimportant for us) 3. the owner of the file, the group the file belongs to 4. the size of the file 5. the date it was last changed 6. and the file name. It is important to understand the permissions.

To change the permissions, you must log onto the server. In Netscape, go to: telnet://arizona and log on to your account

13

Basic Skills for HTML Princeton University Technical Services

Change the permissions by typing chmod ugo +r+w+x filename u = user (the owner) g = group +r, -r = allow, not allow, to read the file +w, -w = allow, not allow, to write to a file

o = world +x, -x = allow, not allow to execute a file To change permissions for all the files in the directory: *.* Examples: chmod ugo +r+w+x [filename] The entire world has full permissions chmod o -r-w-x [filename] The world cannot access this file. chmod g +r-w-x The group has permission to read the file, but not write or execute it. Practice: Change the permissions of your test.html file.

Viewing a file saved on your disk drive in Netscape

Open Netscape. Go to File. Go to Open Page. Click on Choose File. Browse through your directory structure until you find the file you want. Double click on the file. Click on Open.

Refreshing the Page

When you work on a page, you must reload it into Netscape to see the changes. Click the Reload Button (next to Home) Practice: View your test.html file in Netscape.

Viewing the URL (Location) of a Document

To see the URL (Location) of a document, it may be displayed already. If not, look in View (Netscape Communicator) or Options (Netscape 3) and make sure that the sections concerning Location are turned on.

14

Basic Skills for HTML Princeton University Technical Services

15