Creating your own web page

Creating a web page

The following is a short example of what the html for a simple page might look like. When appearing in your browser, this page would look like this.

<html>
<head>
<title>My first Web Page</title>
</head>

<body bgcolor = "white">

<h2>My first Web Page</h2>
<p>
I am so happy to be at Fordham! Here are some things about me you
might like to know.

<ul>
<li>CSRU 1100 is my favorite class
<li>John Mulcahy Hall is home away from home
<li>I love computers
<li>My favorite web site is <a href="http://www.cnn.com">cnn.com</a>
</ul>
</body>
</html>

You should note that all formatting takes place via use of tags. HTML tags such as <b> and </b> or <html> and </html> generally come in pairs and are wrapped around the text that you wish to have formatted in a particular way. Thus <b>HELLO </b> would make the word HELLO appear in boldface in your browser.

There are many different tags that one can learn to use, however, with a very small set you can create reasonably complex web pages. We will discuss a few important tags here, but for further information check out this online html tutorial. Also feel free to search the web for a better tutorial or on-line html reference.

Tags that everyone needs to know

<html> and </html> It is standard to wrap these two tags around your entire document. They serve to identify that your document is an html document.
<head> and </head> This tag is also a wrapper tag (like the previous tag). It will not cause any visible changes to your web page. However, it defines a special region which only certain other things should be placed. For now, you will just put the title in this space.
<title> and </title> Defines what will be viewable on the titlebar of the browser.
<body> and </body> This tag, like head, is another wrapper invisible tag. Most of the important tags you write will go within the region defined by the body. The body tag also gives you the ability to control things like the background color and other colors that might appear on your page.
<b> and </b> (also <i> and <tt>) Performs different types of formatting on the text it surrounds
<a> and </a> Creates a link on your web page. To link to another web page you must also provide the web address (called a URL) of the page to link to. This is done by adding the web address as follows
- <a href="http://enter web address">add the text of your link</a>
<ul> and </ul> Create a bulleted list. Each item in the list should begin with the <li> tag.
<img src="name of image file"> Add an image to your web page.
<h1> and </h1> Make a header in your document. There are different types of headers, and you can play around with changing h1 to h2, or h3 etc...

Now with that brief introduction it is time to make your own web page. To begin:

Open Notepad and start creating a web page.
Save the file as index.html be sure to select the "Save as type" to "All Files"
Now transfer the file into the public_html folder on storm (or erdos).

To view your web page at any time, you should another internet browser (besides the one you are reading this on) and go to storm.cis.fordham.edu/~username (in LC go to dsm.fordham.edu/~username).

Uploading other files to your web page (like images) Sometimes you will want to add other files to your web page, like images, that you are not going to create on your own. To put these on your web page, you should download the images to the local machine and then copy them into the public_html folder using Secure File Transfer.

Here is some useful information

The following links all point to some html quick reference guides, that describe the main html tags. You can refer to these for help, or to find out more details about all of the features included in html. These guides can help you write more advanced code than is expected/required in this class. I will remind you of them again in project 2. Here are three guides I found using Google:

Your Assignment

Create and publish a personal home page. Your page should contain
- Information about yourself
  - Your name
  - Your email address
  - Your possible major
- A title
- At least one header
- A picture
- A bulleted list (containing the answers to the earlier google queries)
- At least three links to outside web sites.
- A reasonable usage of text formatting on at least three occassions.
- Some creativity

Important Note: You must create all of your web pages "by hand", without the use of any html editor, such as Dreamweaver. Using such a tool will be considered cheating and will earn you a 0 on the project. If you want to use such a tool in a limited way (e.g., to create a single web page or a fancy navigation bar) then you must get permission from me first.

We will be continually expanding on this web page over the entire course. But feel free to spend as much time as you like on it now.

Creating a web page

Here is some useful information

Your Assignment

Project 1 due February 6