Mary E. Brown, Ph.D.
Associate Professor
Information Science
Brown@SouthernCT.edu
Resources for Students:
Additional Resources:
|
|
How to construct a website "from scratch":
A folksy monolog of some basics
Getting Started
This tutoral will walk you through how to create a simple website (for this class) "from scratch." That is, it will teach you how to write html documents that can be loaded (ftp) to a server (computer) that will host (store) your webpages. The webpages will work together as a website.
A webpage is a single HTML file. When you load a webpage into your browser you can see the whole document and if it is long, you can scroll up and down through the document. A website is two or more webpages that are linked to each other. We will begin by creating webpages and then link them to create a website.
You will need two things to get started: a browser (such as Netscape) and a text editor (such as SimpleText). You can use a word processing program (such as Word) BUT you MUST save the file as "text only" or "text only with line breaks."
I would like you create webpages as you read through this tutorial. First create a separate folder on your computer or diskette just to hold the files for your website. You might call this folder MyFirstWebsite. Now open SimpleText (or Word) and we are ready to create your first webpage "from scratch."
HTML files are read by computers. Computers, however, need to know the file is HTML in order to know how to read it. So the first thing we will do in the HTML file is give the computer a command to read html. (And the last thing we need to do in the HTML file is give the computer a command to stop reading html.) The command to start reading html is "html." The command to stop reading html is "/html" (slash-html). (All html commands are stopped by repeating the command with a slash in front of it.) All commands in HTML documents are placed inside angle brackets (< >). (HTML commands are called "tags.") Ready to create an HTML file? In your opened SimpleText (or Word) document type the commands or tags to open and close an HTML file:
<html>
</html>
Okay, let's test the file. First we need to save it. Save the SimpleText file as "MyFirstPage.html" (if you are using Word, be sure to SaveAs a text only file). Now open a new window in your browser (Netscape). If you have not done this before, the command is found on the File pop down menu New / Navigator or you can type Command-N on the keyboard. To load the page you just created, go to the File menu again and select Open / Page in Navigator or type Command-O on the keyboard. Now locate and select the folder MyFirstWebsite and the file MyFirstPage.html.
Remember, the only tags or commands you gave were to start reading HTML and stop reading HTML. Your webpage should be absolutely blank and the top of the window should read "Netscape." You have just successfully created a webpage. Now lets start adding content to it.
Basic Structure of an HTML file
HTML files are like people: they each have a head and a body. Lets go back to our html file and add a head <head> </head> and a body <body> </body> like this:
<html>
<head> </head>
<body> </body>
</html>
In our head we have concepts of things. In the head of our HTML file we want to place a concept of what this page is about. It is like the subject heading or title of the pages. In fact, we will use the title tag (<title> </title>) to designate the main concept or purpose or subject heading of our webpage. Let's give this first page the title "Learning to HTML" (<title>Learning to HTML </title>). The title tag goes INSIDE the head, so let's put it there like this:
<html>
<head> <title>Learning to HTML </title> </head>
<body> </body>
</html>
Okay, SAVE the file, RELOAD your browser screen. You should see that now the top of the the browser screen reads "Netscape: Learning to HTML." Now return to SimpleText document - we have a lot more to add.
Next, let's add some feet to this file. I haven't mentioned feet before, but this seems just as good a time as any to talk about them. Feet or footers are found below the body. The kind of footer we are going to add is an address (<address> </address>). In the address we will tell the viewer who maintains this webpage (<address>This site is maintained by </address>). We might also want to let the viewer know when we last updated the page (<address>This site is maintained by Me Me@Southern.edu. Last Modified Monday, September 7, 2003</address>). Let's add the ability for the viewer to just click on our email to have an addressed email popup and ready to enter a message to send us. Notice how we do this: (<address>This site is maintained by Me <a href="mailto:Me@Southern.edu">Me@Southern.edu</a>. Last Modified Monday, September 7, 2003</address>). Okay, let's add the feet to our file like this:
<html>
<head> <title>Learning to HTML </title> </head>
<body> </body>
<address>This site is maintained by Me <a href="mailto:Me@Southern.edu">Me@Southern.edu</a>. Last Modified Monday, September 7, 2003</address>
</html>
Okay, SAVE the file, RELOAD your browser screen. Pretty cool. Now let's add some body content. First, let's add a little space for the body content by doing this:
<html>
<head> <title>Learning to HTML </title> </head>
<body>
</body>
<address>This site is maintained by Me <a href="mailto:Me@Southern.edu">Me@Southern.edu</a>. Last Modified Monday, September 7, 2003</address>
</html>
The three main things we will likely want to put in the body of our document are heading (<h2> </h2>), paragraphs (<p> </p>), and lists of things (<ul> </ul>). Headers are headings/subheadings and come in six "sizes": <h1> </h1>, <h2> </h2>, <h3> </h3>, <h4> </h4>, <h5> </h5>, and <h6> </h6>. <h1> </h1> headings are used like the title of a paper or chapter. The remaining headings are used to divide the material into chunks of content like an outline. If this is a webpage for this course I might want the main heading to be <h1>ILS 537 Information Seeking Behavior </h1>. I like to center main headings. Do do this I need to add the center command around what I want centered: <center><h1>ILS 537 Information Seeking Behavior </h1></center>. Let's add the main heading and three subheadings to the body, like this:
<html>
<head> <title>Learning to HTML </title> </head>
<body>
<center><h1>ILS 537 Information Seeking Behavior </h1></center>
<h2>Assignments </h2>
<h2>Journal </h2>
<h2>Favorite sites </h2>
</body>
<address>This site is maintained by Me <a href="mailto:Me@Southern.edu">Me@Southern.edu</a>. Last Modified Monday, September 7, 2003</address>
</html>
SAVE the file, RELOAD your browser screen. Hummm, I don't much like the footer/address sitting right under my last subheading. I want to add a horizontal rule (<hr>) before it by doing this:
<html>
<head> <title>Learning to HTML </title> </head>
<body>
<center><h1>ILS 537 Information Seeking Behavior </h1></center>
<h2>Assignments </h2>
<h2>Journal </h2>
<h2>Favorite sites </h2>
</body>
<hr>
<address>This site is maintained by Me <a href="mailto:Me@Southern.edu">Me@Southern.edu</a>. Last Modified Monday, September 7, 2003</address>
</html>
SAVE the file, RELOAD your browser screen. Hummm, the horizontal rule is too thin and it looks shaded. Think I'll change <hr> to <hr size="2" noshade>. SAVE, RELOAD. Yes, that's better.
Now I want to make a statement (in a paragraph) about the assignment, including listing the different assignments we have. The paragraph tag is <p> </p>. I will add one paragraph: <p> We have two major assignments: observation of an information seeker and 1-3 annotations. </p> just after the heading for Assignments (<h2>Assignments </h2>):
<html>
<head> <title>Learning to HTML </title> </head>
<body>
<center><h1>ILS 537 Information Seeking Behavior </h1></center>
<h2>Assignments </h2>
<p> We have two major assignments: observation of an information seeker and 1-3 annotations. </p>
<h2>Journal </h2>
<h2>Favorite sites </h2>
</body>
<hr size="2" noshade>
<address>This site is maintained by Me <a href="mailto:Me@Southern.edu">Me@Southern.edu</a>. Last Modified Monday, September 7, 2003</address>
</html>
I know, I know. Now I want to make "observation of an information seeker" a link that can be clicked to take me to another webpage that has the written assignment. It figures I will need to tell the computer where to go so I guess I will need a file name for the observations page. I'll call it "observations.html". To tell the computer to go to that page I will need to use the "attribute" tag (<a></a>) around the text I want to be the link: (<a>observation of an information seeker</a>). Inside the opening attribute tag (<a>) I will need to tell the computer where it is to go. Since my files will be together in the same folder, I can do this with: <a href="observations.html">. So the whole link will look like this: <a href="observations.html">observation of an information seeker</a>. And my html document now looks like this:
<html>
<head> <title>Learning to HTML </title> </head>
<body>
<center><h1>ILS 537 Information Seeking Behavior </h1></center>
<h2>Assignments </h2>
<p> We have two major assignments: <a href="observations.html">observation of an information seeker</a> and 1-3 annotations. </p>
<h2>Journal </h2>
<h2>Favorite sites </h2>
</body>
<hr size="2" noshade>
<address>This site is maintained by Me <a href="mailto:Me@Southern.edu">Me@Southern.edu</a>. Last Modified Monday, September 7, 2003</address>
</html>
I'm excited. I have a webpage that will send me an email and link to another page. It doesn't have a lot on it yet, but it all that I need right now and I can add to it later. I think I will made sure the MyFirstPage.html file is saved and then open a new SimpleText file and save it as Observations.html. Oops! I didn't name it Observations.html, I named it observations.html. (Something tells me case is important so I'd better make sure I use lower case or upper case letters exactly the same every time I write a file name.) I've opened the new SimpleText file and typed in the basic tags and information I want on every webpage:
<html>
<head> <title>Learning to HTML </title> </head>
<body>
</body>
<hr size="2" noshade>
<address>This site is maintained by Me <a href="mailto:Me@Southern.edu">Me@Southern.edu</a>. Last Modified Monday, September 7, 2003</address>
</html>
I see two possible mistakes already (I'm getting good at this). First, "Learning to HTML" was the concept/subject /title of my last page. The concept or title of this new page is "Observations of Information Seekers." Better change that right away. Second, "Last Modified Monday, September 7, 2003" needs to be checked and changed with each update if I want to be accurate. Since it is now just after midnight, I should change the date as it is no longer Monday or September 7. I'll also add a main heading (My Observations of Seekers) and center it.
<html>
<head> <title>Observations of Information Seekers </title> </head>
<body>
<center><h1>My Observations of Seekers </h1></center>
</body>
<hr size="2" noshade>
<address>This site is maintained by Me <a href="mailto:Me@Southern.edu">Me@Southern.edu</a>. Last Modified Tuesday, September 8, 2003</address>
</html>
I want to list the different observations with a bullet in front of each item. In HTML this is called an Unordered List (<ul></ul>) and each list item (<li>) are given inside the list tags:
<ul>
<li>
<li>
</ul>
Now my observations.html file should look like this:
<html>
<head> <title>Observations of Information Seekers </title> </head>
<body>
<center><h1>My Observations of Seekers </h1></center>
<ul>
<li>Observation Week One
<li>Observation Week Two
</ul>
</body>
<hr size="2" noshade>
<address>This site is maintained by Me <a href="mailto:Me@Southern.edu">Me@Southern.edu</a>. Last Modified Tuesday, September 8, 2003</address>
</html>
I want a link back to my first page. I'll call the first page my homepage. I don't know where to put the link. I think I'll experiment and put it above the header "My Observaton of Seekers." To get to this page I used <a href="observation.html">observation of an information seeker</a>. I'll change "observation.html" to "MyFirstPage.html" and "observation of an information seeker" to "My Homepage" (<a href="MyFirstPage.html">My Homepage</a>) and put this line above the main header, like this:
<html>
<head> <title>Observations of Information Seekers </title> </head>
<body>
<a href="MyFirstPage.html">My Homepage</a>
<center><h1>My Observations of Seekers </h1></center>
<ul>
<li>Observation Week One
<li>Observation Week Two
</ul>
</body>
<hr size="2" noshade>
<address>This site is maintained by Me <a href="mailto:Me@Southern.edu">Me@Southern.edu</a>. Last Modified Tuesday, September 8, 2003</address>
</html>
There is one more thing I want to do, I want to leave secret notes to myself in the file that the computer cannot read. These are called "comments." If I add the tag <!-- -->>, the computer cannot read what I write between the two sets of dashs. Humm, maybe I'll add
<!-- I am the greatest! -->> right under the main header:
<html>
<head> <title>Observations of Information Seekers </title> </head>
<body>
<a href="MyFirstPage.html">My Homepage</a>
<center><h1>My Observations of Seekers </h1></center>
<!-- I am the greatest! -->
<ul>
<li>Observation Week One
<li>Observation Week Two
</ul>
</body>
<hr size="2" noshade>
<address>This site is maintained by Me <a href="mailto:Me@Southern.edu">Me@Southern.edu</a>. Last Modified Tuesday, September 8, 2003</address>
</html>
SAVE, RELOAD. Wow, it doesn't show up in the browser! Maybe I should add some comments that will help me next time I want to add something to this file.
<html>
<!-- Be sure to give each webpage a unique title as it will become the label of the bookmark -->
<head> <title>Observations of Information Seekers </title> </head>
<body>
<a href="MyFirstPage.html">My Homepage</a>
<center><h1>My Observations of Seekers </h1></center>
<!-- I am the greatest! -->
<ul>
<li>Observation Week One
<li>Observation Week Two
</ul>
<!-- I'm not sure what happens with lists so I want to add the actual observations as paragraphs (with headers, maybe h3) below the list; that is, just below here -->
</body>
<!-- To make the horizontal rule thicker, increase the size number -->
<hr size="2" noshade>
<!-- Be sure to update the date line when I update the file -->
<address>This site is maintained by Me <a href="mailto:Me@Southern.edu">Me@Southern.edu</a>. Last Modified Tuesday, September 8, 2003</address>
</html>
I want to create one more webpage, the Favorite Sites. I know I need to create a link to it from my homepage (MyFirstPage.html) so I'll do that first by adding the attribute tags around the subheading "Favorite sites" in the file MyFirstPage.html. I'll call the new file "favsites.html" (<h2><a href="favsites.html">Favorite sites</a&g </h2>):
<html>
<head> <title>Learning to HTML </title> </head>
<body>
<center><h1>ILS 537 Information Seeking Behavior </h1></center>
<h2>Assignments </h2>
<p> We have two major assignments: <a href="observations.html">observation of an information seeker</a> and 1-3 annotations. </p>
<h2>Journal </h2>
<h2><a href="favsites.html">Favorite sites</a> </h2>
</body>
<hr size="2" noshade>
<address>This site is maintained by Me <a href="mailto:Me@Southern.edu">Me@Southern.edu</a>. Last Modified Monday, September 7, 2003</address>
</html>
I'll open a new file in SimpleText and save it as favsites.html. I'll start with the basic "template" for my website (head - change title; body; link back to homepage; address - check date). I'll include a list for the favorite sites :
<html>
<head> <title>My's Favorite Websites </title> </head>
<body>
<a href="MyFirstPage.html">My Homepage</a>
<center><h1>My Favorite Sites </h1></center>
<ul>
<li>Site One
<li>Site Two
</ul>
</body>
<hr size="2" noshade>
<!-- Be sure to update the date line when I update the file -->
<address>This site is maintained by Me <a href="mailto:Me@Southern.edu">Me@Southern.edu</a>. Last Modified Tuesday, September 8, 2003</address>
</html>
I know I need to use the attribute tags around each site listing (<a href="MyFirstPage.html">My Homepage</a>). I'm guessing the I need to substitute the URL for the site for the filename (MyFirstPage.html) in the attribute tag I used to return to my Homepage. If one of my favorite sites is the university's homepage (http://www.southernct.edu) then the tag such be <a href="http://www.southernct.edu">Southern's Homepage</a>. Let's try it:
<html>
<head> <title>My's Favorite Websites </title> </head>
<body>
<a href="MyFirstPage.html">My Homepage</a>
<center><h1>My Favorite Sites </h1></center>
<ul>
<li><a href="http://www.southernct.edu">Southern's Homepage</a>
<li><a href="http://www.yahoo.com">Yahoo</a>
</ul>
</body>
<hr size="2" noshade>
<!-- Be sure to update the date line when I update the file -->
<address>This site is maintained by Me <a href="mailto:Me@Southern.edu">Me@Southern.edu</a>. Last Modified Tuesday, September 8, 2003</address>
</html>
SAVE. RELOAD. Test by clicking among the three pages. It works. End of lesson one.
|
