ENGL 391c HTML Tutorial
uploading and managing files
You will store the files for your web site on a server belonging to OIT. In order to upload files to that server, you must first make a File Transfer Protocol (FTP) connection with that server.
There are several FTP clients available for download on the Internet. Some are more suitable to PCs, and I will give you a handout showing you how to use others. In the lab I will show you how to use the FTP calle "Fetch" that is used by most Macs. At the risk of redundancy and in the cause of future reference, here are instructions:
1. From the scrolldown menu under the "apple" icon in the upper left-hand corner of your screen, choose "Cyberduck SFTP," and a box labled "New Connection" will appear. It will look something like this:
Fig. 1: a "New Connection" Box.
2. Set the scrolldown menu near the top of the page to: SFTP (SSH Secure File Transfer).
3. In the space near "server" enter: oitunix.oit.umass.edu.
4. In the space near "user name " type the same user id you use to connect to UMail.
5. In the spaces near "Password" type the same password you use to connect to UMail.
6. If there is a "Directory" space (and there is not in the image above), leave it blank, and click "OK."
You will have successfully passed this gateway, and on your screen will appear a list of files and folders. Among them will be folder named "public_html." This folder is extremely important, as it is where you will store all the files that make up your site. If you do not see this folder, you will need to contact OIT for instructions on creating one.
5. Double-click on the "public_html" folder. The name in the scrolldown menu window should change to "public," and the large window beneath should be empty. This window shows the folder's contents; it is the window into which you will upload all files.
(NOTE: Those of you who who use another FTP to maintain and embellish your site will need the same three pieces of information used here: (1) "oitunix.oit.umass.edu" for Host, (2) your User ID and (3) Password.)
introduction to HTML:
HTML is the acronym for HyperText Markup Language. It is the universal code that is accessible from and made intelligible by any computer. Along with computers themselves, HTML makes the World Wide Web possible.
HTML is made of "tags" that instruct a browser on how to display text. There are a great many tags; but you can create a reasonably good-looking web page using only a few.
Most web designers use web-building software like Macromedia Dreamweaver or Claris Homepage. These programs allow a user to work more quickly and efficiently, and Dreamweaver will be introduced later in the workshop. Still, a working knowledge of basic HTML code is essential to any web designer who at some time needs to fix problems with pages and sites--i.e., all of us. For this reason, it is the proper place to begin.
Lesson #1: Making a page in HTML.
1. Open the drop-down menu under the "apple" icon, and scroll down to BBEdit. This is a text editing program, like MS Word, but simpler.
2. Choose "File" > "New." (Notice that the icon in the upper right hand corner of your screen will change to indicate the program you are operating.) Your screen should now display a blank page, suitable for a first try at HTML.
All HTML pages share a few basic tags.
They begin with the tag <html>, and end with the tag </html>. This tag tells a browser that the page is to be treated as HTML.
Most pages use the tags <title> and </title> to bracket text that will appear inside the browser's title bar. The HTML title tag for the page you are viewing, for instance, is <title>Basic HTML</title>.
All pages have a <body> tag that tells a browser that all the text that follows is not hidden; it will actually appear on the page.
Notice that many tags "bracket" text or a section of the page. The forward slash in" </title>", for instance, tells a browser to stop reading text as title.
| A basic page of HTML, looks like this: | The same page, uploaded to a server and viewed in a browser, appears: | |
| <html> <head> <title>BASIC HTML</title> </head> <body> Welcome to a page that explains basic HTML. </body> </html>
|
Welcome to a page that explains basic HTML. |
Before you learn more tags, you might want to try to make a simple page like this and upload it to the Web.
1. Copy the tags listed above onto your page.
2. Replace "BASIC HTML" between the <title> tags with a title of your own choosing, and replace the "welcome message"between the <body> tags with a statement of your own choosing.
3. Choose File > Save. A box will appear, with a scrolldown menu allowing you to choose the location to which you will save the file. Choose "desktop."
4. The same box will show a "save document as" command that will allow you to name the file.
5. Name this file "index.html". It will appear as a file on your desktop.
NOTE: For most purposes, you may name a file anything you'd like, so long as the name contains no spaces and ends ".html". The only exception is the file whose page you would like to appear first on the site. It must be named "index.html".
6. Drag the "index.html" file from your desktop into your "public_html" folder.
7. Open a browser (that's Netscape or Explorer).
8. In the location window, type:
http://www-unix.oit.umass.edu/~*/
where "*" is your User ID.
In other words, if your User ID is "dtoomey," type:
http://www-unix.oit.umass.edu/~dtoomey/
This is the url to your site.
9. Press "Return" or "Enter." The page you made should appear in the browser window. If it does not, hit "refresh" or "reload" in the browser's menu bar.
If the page still did not appear with the changes you made, you probably omitted one or more of the steps listed above. Every time you upload a file, you must:
1) save the page to your desktop,
2) drag the file from your desktop into your "public_html" folder, and
3) refresh the browser window.
CAUTION: When you load a file into your "public_html" folder, you overide any other file with the same name. You may be accustomed to MS Word warnings like "Are you sure you want to replace this file?" A user of Cyberduck SFTP enjoys no such niceties. For this reason, you must be careful that you are uploading the file you want to upload. To avoid confusion, it is best to avoid duplicating files of the same name.
NOTE: Once your site is up and running, you may wish to include its url on your print c.v., in the "personal information" section, under your email address. You may also wish to append it to any email correspondence you make with potential employers.
Lesson #2. Paragraphs, breaks and and horizontal rules.
1. Begin a paragraph with <p>. End a paragraph with </p>.
2. Insert a line break with <br>.
3. Insert a "horizontal rule" with <hr>.
| A page of HTML that uses paragraphs, line breaks and horizontal rules looks like this: | The same page, uploaded to a server and viewed in a browser, appears: | |
| <html> <head> <title>BASIC HTML</title> </head> <body> <p> <hr> Welcome to a page that explains basic HTML. <hr><p> The page is designed to be "user-friendly," and it is the instructor's sincere wish that its presentation is clear and straightforward. </body> </html>
|
Welcome to a page that explains basic HTML. The page is designed to be "user-friendly," and it is the instructor's sincere wish that its presentation is clear and straightforward.
|
Lesson #3: boldface and italics.
Boldface and italics, as you know, add emphasis to text.
Type "<b>" immediately before text you wish to boldface; type "</b>" immediately after the same text. (Otherwise all the text that follows will be read as boldface.)
Type "<i>" immediately before text you wish to italicize; type "</i>" immediately after the same text. (Otherwise all the text that follows will be read as italics.)
| A page of HTML that uses boldface and italics looks like this: | The same page, uploaded to a server and viewed in a browser, appears: | |
| <html> <head> <title>BASIC HTML<title> </head> <body> <p> <hr> <b>Welcome to a page that explains basic HTML.</b> <hr><p> The page is designed to be "user-friendly," and it is the instructor's <i>sincere</i> wish that its presentation is clear and straightforward. </body> </html>
|
Welcome to a page that explains basic HTML. The page is designed to be "user-friendly," and it is the instructor's sincere wish that its presentation is clear and straightforward.
|
You will find a useful reference in The Library of Congress's Page on Text Formatting Tags.
Lesson #4. Tables and cells.
Because words and images default to the left margin, a table is necessary on all pages on which you wish to control placement of texts and images. Most pages should have tables.
You may think of a table as a kind of grid, made up of rows and columns.
Begin a table row with <tr>. End a table row with </tr>.
A cell is one of the defined spaces within the table row. It is useful for finer placement.
Begin a table cell with <td>. End a table cell with </td>.
| A page of HTML that uses tables and cells looks like this: | The same page, uploaded to a server and viewed in a browser, appears: | |||
| <html> <head> <title>BASIC HTML</title> </head> <body> <p> <hr> <b>Welcome to a page that explains basic HTML.</b> <hr><p> The page is designed to be "user-friendly," and it is the instructor's <i>sincere</i> wish that its presentation is clear and straightforward. It should be useful to both: <table width="20" border="2" cellpadding="5"> </body> </html> |
Welcome to a page that explains basic HTML. The page is designed to be "user-friendly," and it is the instructor's sincere wish that its presentation is clear and straightforward. It should be useful to both:
|
Hyperlinks are a feature that make the Web a web, allowing users to move from page to page easily merely by clicking on highlighted text.
You should know how to make three kinds of links: links within pages called anchor links, links to other pages called absolute links, and links to other pages in your site called relative links.
Lesson #5: Links within pages (anchor links).
An anchor link allows a user to jump to another place on the same page. It is useful, for instance, to make tables of contents for pages that are larger than the computer screen on which they are viewed. By clicking on a given heading in the table of contents, a user will be brought further down the page to the section in the text named by that heading. (An anchor link on a page that fits on a screen is unneccesary, and won't work anyway.)
To make an anchor link, you will need tag for the heading itself, and a tag for the section to which you want the heading to link. Suppose, for instance, that you have a dissertation with five chapters, an introduction and an afterword. You would like to put the abstract of the dissertation online. The abstract is about three pages long, with abbreviated versions of all the parts. On the first page of the abstract is a table of contents. You want to link the table of contents heading "Chapter Two: Hrothgar" to its section heading of the same name.
NOTE: You will find a useful reference in The Library of Congress's Page on The Hypertext Anchor Tag.1) Build an "anchor link" around the heading. The resulting HTML would look like this:
<a href="#Chapter Two: Hrothgar">Chapter Two: Hrothgar</a>
2) Make the section heading a "named anchor," like this:
<a name="Chapter Two: Hrothgar">Chapter Two: Hrothgar</a>
CAUTION: Be careful to include all the characters; if even one is missing or misplaced, the link will notwork.
Lesson #6: Links to other pages (absolute links).
Your c.v. might have links to schools from which you earned degrees; you might wish to make a "resources" page with links to sites associated with your fields of interest. There are many possibilities for an online portfolio.
Suppose you want a link to the main page of the College of Humanities and Fine Arts.
1. Type "College of Humanities and Fine Arts" into your HTML document at the place on the page you would like the link to appear.
2. Open a browser (that's Netscape or Explorer), and find the World Wide Web page to which you would like to link.
3. Highlight and copy the URL from the location bar. It is:
http://www.umass.edu/hfa/
4. Paste it into your HTML document, immediately before the text "College of Humanities and Fine Arts," like this:
http://www.umass.edu/hfa/ College of Humanities and Fine Arts
5. All that remains is to add the link tags fore and aft, and put quotes around the URL, like this:
<a href="http://www.umass.edu/hfa/"> College of Humanities and Fine Arts </a>
CAUTION: Again, be careful to include all the characters. One technique that helps avoid mistakes is to copy and paste the HTML for a link you know is working, then merely paste over the old URL inside the quotes with the new URL .
Lesson #7: Links to pages within your website (relative links).
When your site includes more than one page, you may link them using relative links. Rather than using the entire url, you can create an operating link using only the name of the file to which you wish to link.
Suppose, for instance, you would like to link your "index.html" page to your "resume.html" page.
1 (a).You could insert on the "index.html" page a tag that included the entire url:
<a href="http://www.umass.edu/toomey/resume.html"> resume </a>
1 (b). Or, you could insert a tag that included only the file name (that is, "resume.html"):
<a href="resume.html"> resume </a>
catch-up and further reading:
Anyone who misses Monday's class should work through at least part of:
HTML: An Interactive Tutorial for Beginners.
This was, as you know, only an introduction. To learn more tags, see:
Library of Congress's Categorical Glossary of HTML Tags.
If you'd like to add links to sites of interest within your field, see: