students courses careers business services dot IT dot library dot faculty dot alumni research centers
calendar dot request a room web email email lists dot department directory dot search dot mySOM

Information Technology online help
Photo by Dan Altneu
 

Computer Lab Hours
Monday - Friday
8:30 a.m. - midnight
Saturday & Sunday
9:00 a.m. - midnight

Help Desk Hours
Monday - Friday
8:00 a.m. - 6:00 p.m.

SOM-IT Help Desk


 

BUILDING A WEBPAGE - STEP BY STEP

Step One: The Simple Web Page
This tutorial will make use of the text editor found on your computer, or one that can be downloaded online. Examples are Notepad or WordPad. You can use the "Edit HTML Source" mode of Claris/Filemaker Home Page 3.0 if you prefer, but for these tutorials we will concentrate on using the plain text editors mentioned above. When you open your text editor, you will see a blank page before you. Now type in the next four lines exactly as you see them below: (You can always change your webpage title later on) 

<HTML>
<HEAD>
<TITLE>My Simple Webpage</TITLE>
</HEAD> 

We open our HTML document with the <HTML> tag. Next we begin the <HEAD> section, where all information is hidden from view on the screen, but aids the browser with detecting and displaying our webpage. We've named our webpage and placed the title between the - <TITLE> tags. And finally we would close with the </HEAD> tag. (Other important information can go in this section) 

Now we're ready to do the part that shows on the screen. So we're going to open the <BODY> section. Let's look at the next few lines of our simple webpage: 

<BODY BGCOLOR="white">
<CENTER>My Simple Webpage</CENTER>
<BR> 

The first line is our webpage background color, in this case white. Then comes our webpage title that shows on the screen. Notice it's sandwiched between the <CENTER> tags. These tags centers our title on the webpage. Now we want a break between our title and the next few lines of text. So we use <BR>. 

<B>
Welcome to my simple webpage. Below I have some useful links.
</B>
<BR> 

We're ready for the first few lines of text on our webpage. We want this text to appear Bold, so we start with <B>. And after a couple lines of text, we close with </B>. Starting to see a pattern here? Next we have another break or <BR>

Now let's put in a couple of links to other sites. 

<a href="http://mba.yale.edu">Yale School of Management</a>
<BR>
<a href="http://www.yale.edu">Yale University</a>
</BODY>
</HTML> 

The links start out <a href=, then the link address or url, the name of the link and finally closed with </a>. Now we close the body section with </BODY> and then finally end our simple webpage with </HTML>. But we're not quite finished yet... 

With our webpage complete we want to save it to file. Go up and click on File and then Save As. Click on the right arrow on file types and bring up All Files [**] - now type in simple.html. Now we've named and saved our webpage as a HTML document, so let's see how it will look. Go back on your start menu and go on Documents, you should see simple listed. Click on it, your browser should open - and you should see your webpage! Make sure you saved it correctly - simple.html. 

I know it's not much to look at - but we will add to it in the next tutorial.

Onto Step Two: Adding Design and Functionality To The Simple Web Page

Computing & IT Services
Online Facebook FAQ
Wireless Networking @ Yale
Help Desk
Online Help
SOM-IT News
Research Computing
Access
Policies & Guidelines
Virus Information
SOM-IT Staff
Powerpoint templates
(login Required)
mySOM mba.yale.edu Yale University