Chem 406: Writing a simple website with a simple text editor

Writing and Publishing a Simple Website
Using a Simple Text Editor

Preliminaries:

You will need a copy of the text editing application BBEdit Lite. The Lab computers should have BBEdit Lite installed on them. Look in the Utilities shortcut folder. This is a Mac only program. For Windows users you can use WordPad.
Mount your username_www directory on the chemserver. If you have forgotten how to do this, see Lab 1.
Create a folder called "Site1" in your username_www directory on the chemserver.
Go to Google's Image library (http://images.google.com/), find and download either a jpeg or gif image file and save it as "image1.jpg" or "image1.gif" in your "Site1" folder. (Suggestion: Check out the Cheney and Elvis images for possibilities.)
- N.B., When naming your image file you should include either the ".jpg" or ".gif" file name extension for jpeg and gif files, respectively. When creating web sites it is important to use file name extensions; the file types and corresponding file name extensions include:

File type	Extension
web page	.html or .htm
gif image	.gif
jpeg image	.jpg
pdb file	.pdb
Chime script	.spt
Acrobat Reader	.pdf

Your first web site

Web pages are created using a language called HTML (hypertext markup language). This language tells a web browser how to present information on a displayed web page. The web page files (.html files) are plain text files and can be created with simple text editors such as BBEdit. Please launch BBEdit.

The HTML language consists of tags that surround the material that is to be displayed. Tags are indicated by angle brackets and most tags have corresponding opening < > and closing </ > tags. Every web page must contain at least the following tags:

Using BBEdit, create a file containing the above text. The indentations are optional and are used to make the text prettier and more readable while editing. The <HTML> </HTML> tags are used to tell the browser that all the material between these two tags should be interpreted by the browser as hypertext markup language . Everything between the <HEAD> and </HEAD> tags is information about the web page that is not to be displayed by the browser, conversely, everything between the <BODY> and </BODY> tags is information that is to be displayed by the browser. Save your file as "index.html", in your "Site1" folder.

Open a web browser, such as Safari or Firefox, and type
"http://www.chem.uwec.edu/Students/username_www/Site1/index.html" in the address box.

What do you see? Congradualations! you have just published a website for the world to see. The only thing your site is missing, is content! Set a bookmark for your site.

Attributes

Some tags have attributes. Let's add the attribute background="blue" to the <BODY> tag. At the same time, let's add a <TITLE>I feel blue</TITLE> tag to the <HEAD> section of your web page.

Save your edited "index.html" file to your "Site1" folder and copy it to your "Site1" folder in the "username_www" directory; view it with your web browser.

What do you see?

Where was the text "I feel blue" placed?

Adding Content:

To add content to your page you need to place it between the <BODY> </BODY> tags

Type the following between the <BODY> </BODY> tags: "Roses are red, violets are blue"; place the two lines on separate lines.

<HTML>
<HEAD>
<TITLE>I feel blue</TITLE>
</HEAD>
<BODY bgcolor="blue">
Roses are red,
Violets are blue.
<BODY>
<HTML>

As before, save the changes to your "Site1" folder and transfer a copy of your "index.html" file to your "Site1" folder in your "username_www" directory on the web server. View it with your web browser.

Do you see the two lines?

To get material to appear on separate lines you need to use either the or tags. These tags do not require closing tags.

Make the following changes to your web page and save, transfer and view as before:

<HTML>
<HEAD>
<TITLE>I feel blue</TITLE>
</HEAD>
<BODY bgcolor="blue">
Roses are red,
Violets are blue, 
This is my image
<BODY>
<HTML>

What is the different between the and tags?

To add an image to your web page you use the <IMG> tag. To indicate the name of the image file you want included on you web page you use the SRC attribute:

<HTML>
<HEAD>
<TITLE>I feel blue</TITLE>
</HEAD>
<BODY bgcolor="blue">
Roses are red,
Violets are blue, 
This is my image
<IMG SRC="image1.gif">
<BODY>
<HTML>

Make the changes to your web page described above and save, transfer and view as before.

Use the ALLIGN attribute to center your image:

<HTML>
<HEAD>
<TITLE>I feel blue</TITLE>
</HEAD>
<BODY bgcolor="blue">
Roses are red,
Violets are blue, 
This is my image
<IMG SRC="image1.gif" ALIGN="middle">
<BODY>
<HTML>

Hyperlink

One of the beauties of the web pages is the ability to link one page to another using hyper links. Hyperlinks are created by using the <A> </A> tags along with the HREF attribute:

<HTML>
<HEAD>
<TITLE>I feel blue</TITLE>
</HEAD>
<BODY bgcolor="blue">
<A HREF="http://www.youtube.com/watch?v=B2SNfIiGsLw">Roses are red,</A>
Violets are blue, 
This is my image
<IMG SRC="image1.gif" ALLIGN="center">
<BODY>
<HTML>

Make the changes to your web page described above and save, transfer and view as before.

[Chemistry Dept.] [Chem 406]

Warren Gallagher
Department of Chemistry
(715) 836-5388
wgallagh@uwec.edu