GDT 150 Design for the Internet: Fall 2002

September 9

HTML: Hyper Text Markup Language

- formatting language (markup)
- doesn't execute a program with a result (not programming)
- interpreted by browser/ device for display: not all browsers/devices interpret and display the same

- hypertext: text that has links in it, can be cross referenced to create a web of info

- designed to format scientific papers, not for graphic design - it has been extended and hacked for that purpose

- presentation of structured information
- essentially outlines information using headings

- structure enhances the meaning and usefulness of a document, especially in devices that don't show a wide variety of styled text

- using HTML's natural structure enhances the accessibility of the information

- by multiple devices: palm pilots, web browsers, internet appliances, cell phones
- by people with disabilities using special devices: text to speech
- also by those same types of devices used by people w/o significant disabilities: text to speech in the car, etc.
- allows pages to remain backwardly compatible - information is able to be displayed by any device
- helps people quickly understand information

- helps chunk and outline information, which is easiest for people to read and understand on the web (short attention spans/ page scanning)

Writing HTML

- comprised of tags: open tags and close tags: <p>paragraph text</p>

- tags enclose content, showing the start and end of a particular type of content, ie. a a paragraph, a heading, a list

structure

document type

head (invisible, mostly)

- page title (displays in title bar of browser)
- other affecting functionality and display of site (not directly displayed)

body (visible, mostly)

- all your text and images
- headings
- paragraphs
- lists
- images
- links

- all tags that structure content must be closed (</..>
- tags that insert a single instance of something (image, line break) don't need to be closed (in HTML)

A simple page

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" 
"http://www.w3.org/TR/1998/REC-html40-19980424/loose.dtd">
<html>
<head>
	<title>A Simple Page</title>
</head>
<body>
	<h1>My Simple Page</h1>
	<p>This is a very simple webpage.</p>
</body>
</html>

Invisible Elements

- comments:  text between comment tags is not displayed by browsers

- whitespace in code is ignored by browsers

FTP

FTP involves two basic action: putting and getting. Oddly enough, putting means that you're putting files on the server, and getting means that you getting files from the server.

There are two programs that we'll use for FTP in class, Fetch and Dreamweaver. WS_FTP is a freely available Windows FTP program that you might want to download if you work from home.

In order to post your site, you need to know the following: the hostname/ FTP address of the server where you're putting the files, your username, password, and optionally, the path to the directory, or folder, where you're putting your files. Usually, your username will route you to the correct folder on the server, and you won't need to know a specific path.

For your class website:
Hostname: stu.wccnet.org
Username: your WCC email username
Password: your WCC email password

In order for your files to be visible to the internet, you need to put them in a folder called "public_html". This is a special name that tells the server to look inside it for the default homepage file. (the ~ in the URL tells the server to use public_html)

In order for the website to work properly, you must exactly replicate your files and folders in your site on the server inside your public_html folder. Otherwise, images and links will be broken.

Your homepage needs to be named "index.html". (or .htm) This is the default filename that the server looks for when someone types in a URL without a filename specified: www.chriscassell.net/gdt150/ and www.chriscassell.net/gdt150/index.html both bring up index.html in the browser.

To use Fetch:

Open Fetch. You'll see the following dialog box:
Enter the Hostname, your Username, and your Password. Click OK.
You'll see a screen similar to this:
If you haven't created your public_html folder yet, do so Directories > Create New Directory, and name it public_html.
Double click public_html in the Fetch window to move to that directory.
With Fetch, you can simply drag and drop files from your desktop, or any folder, into the correct folder on the server. Similarly, you can drag and drop from the server to your desktop. Or, to put files, just click "Put," and browse to the correct file(s), and to get files, clicka file in Fetch to highlight it, and click "Get," which will place the file on your desktop.
There are two dropdown menus at the bottom of the Fetch interface, which by default say automatic. Leave them that way. That way, the software determines the correct connection type, and whether it should transfer your data as binary or ASCII. As a rule of thumb, all your HTML files need to be transferred as ASCII, and all your graphics should be transferred as binary.

The WCC student server tends to kick you off quickly if you're not transferring files, so you may find that you need to login often.

To use WS_FTP:

Open WS_FTP. If the connection dialog box doesn't automatically open, click Connect. Enter the hostname, your username and password. For connection type, choose Auto-detect. This will ensure the connection is the correct type. Click OK.
Your local computer is displayed in the left-hand window, the remote is on the right. The transfer mode is indicated at the bottom, either ASCII, for text files, or binary, for image files. Generally, it's best to check "Auto," which will automatically check the data type and transfer in the right mode. Navigate to the local folder that contains your website by double-clicking the up arrow at the top of the left-hand window, and then clicking on the proper folders. If your folder is on the desktop, the desktop folder is located at C:/Windows/Desktop
If you are creating your website on the Washtenaw server for the first time, you'll need to create a folder called public_html by clicking on the MkDir button on the right side of the window. Type in the folder name, and press return or click OK. Double-click the public_html folder to open it. You'll need to replicate your directory structure inside this folder. Click the MkDir button to create each directory you need.
Once the directory structure is created, you're ready to start transferring files. To upload files to the server, or put, there are several options. With the same directory selected on both the local and remote machines, simply double-click each file on the local side to put it on the server. You can also select a file, or multiple files, and click the arrow in between the two windows. (To select multiple files, hold down click on one file, and Control-click on another file to select it. To select a group of consecutive files, Shift-click.) In some versions of WS_FTP, it's also possible to drag and drop from the local window to the remote window.
To download files from the server, or get, simply repeat the process, but go from the remote directory to the local directory.
When you're done transferring files, click "Close."

To use Dreamweaver's FTP:

First you need to enter FTP information when defining a site. In the site definition dialog box, click "Web Server Info" and choose FTP from the drop down box. Then enter the host, path, username and password. Make sure that "Save" is NOT checked on a public machine. Click OK and then Done.
To connect to the FTP server, simply click "Connect" in the site window. The remote files will be listed on the left, local on the right.
To transfer files, highlight a file or files, and click "Get" to download files, or "Put" to upload files. Dreamweaver will even get or put an entire folder at once, creating any necessary folders. You can also drop and drop from one side to the other.
When you're done, click "Disconnect."

Chris Cassell Dot Net