To build a homepage, you need first to create a file called "index.html". This file will be your front page. Here is an example of an "index.html" file
|
<html>
<head>
<title>My Home Page</title>
</head>
<body bgcolor=wheat link=blue vlink=darkviolet alink=blueviolet>
<center>
<h1>Iyad Abu-Jeib's Homework</h1>
<img src = "cat.gif" alt = "cat">
<a href="MyPics.html"> <h3> Pictures </h3> </a>
<p>
<a href="MyInfo.html"> <h3> Information</h3> </a>
<p>
<a href="MyLinks.html"> <h3>Links </h3> </a>
</center>
</color>
</body>
</html>
|
To see how the above file will look like, click here.
Now let me mention some comments about the above:
First, you need to replace my name by yours (line 7 of the code).
Then, you replace the cat's picture by yours (line 8).. You can do that simply by replacing "cat.gif" in the file by your picture's name. For example, if you have a picture called mypic.jpg, then you replace "cat.gif" by "mypic.jpg"
The purpose of <p> is to jump to a new paragraph.
When you have something like
<a href="MyPics.html"> <h3> Pictures </h3> </a>
this means jumb to the new page named: MyPics.html
The word Pictures is what will appear in blue in order for people to click on it.
<h1> is used to start writing in a large bold font, and </h1> is used to stop writing in a large bold font. By the way, you can also use <h2> instead for a smaller font; <h3> for much smaller, and so on.
<center> is used to start writing in the center of the line, and </center> is used to stop writing in the center.
To change the background color (the background color which I have in the above code is wheat), to red, for example, you replace: bgcolor=wheat in line 5 (of the code) by: bgcolor=red
If you want to write the sentence: 'My excellent university' in green, then you do this
<font color=green> My excellent university </font>
Now look at lines 9, 11, and 13 in the code above. Line 9 simply means: jumb to the file MyPics.html which must contain pictures. This means that you must have a file called MyPics.html containing pictures or an index of pictures. Line 11 means: jumb to the file called MyInfo.html which contains information. And finallly, line 13 means: jumb to the file called MyLinks.html which contains some links. Of course, you don't have to call the first file, for example, MyPics.htm. You can call it whatever you want, but the extention must be html. For example, you can call it pics.html.
The following represents an eaxmple of MyPicts.html file
|
<html>
<head>
<title>Pictures</title>
</head>
<body bgcolor=pink link=blue vlink=darkviolet alink=blueviolet>
<center>
<h1>My Pictures</h1>
<img src = "cat.gif" alt = "cat">
<p>This is my picture.
<img src = "cat.gif" alt = "cat">
<p>This is another picture of me.
<a href="index.html"> <h3>Back to the main page </h3> </a>
</center>
</color>
</body>
</html>
|
To see how the above file will look like, click here.
Now if you want to have a table like this , you need to do the following
|
<center>
<table border=1 bgcolor=cyan align=center width=44% cellborder=4 cellspacing=1>
<tr>
<td>
<center>
<h1>
<font color=red>
My Table
</font>
</h1>
</center>
</td>
</tr>
</table>
</center>
|
Now if you want to make a table like this , you need to do the following
|
<center>
<table border=1 bgcolor=cyan align=center width=50% cellborder=4 cellspacing=1>
<tr>
<td>
<center>
<h1>
<font color=red>
Iyad1
</font>
</h1>
</center>
</td>
<td>
<center>
<h1>
<font color=green>
Iyad 2
</font>
</h1>
</center>
</td>
</tr>
<tr>
<td>
<center>
<h1>
<font color=brown>
Iyad 3
</font>
</h1>
</center>
</td>
<td>
<center>
<h1>
<font color=olive>
Iyad 4
</font>
</h1>
</center>
</td>
</tr>
</table>
</center>
|
Always <tr> is used to start a row and <\tr> to end that row. Similarly, <td> is used to start a column and </td> is used to end that column.
To write a statement like "This is my homepage" in a bold face font, you do this:
<b> This is my homepage </b>
To write a statement like "This is my homepage" in italic, you do this:
<i> This is my homepage </i>
To underline a statement like "This is my homepage", you do this:
<u> This is my homepage </u>
To change the background color, say to yellow, you replace the line
<body bgcolor=wheat link=blue vlink=darkviolet alink=blueviolet>
at the beginning of the page, by the line
<body bgcolor=yellow link=blue vlink=darkviolet alink=blueviolet>
In other words, the color which you'll have is the one which follows bgcolor=.
To make the background color consisting of a picture, say cat.gif, you replace the line
<body bgcolor=wheat link=blue vlink=darkviolet alink=blueviolet>
at the beginning of the page, by the line
<body background="cat.gif" link=blue vlink=darkviolet alink=blueviolet>
To write a statement like "My Homepage" in the center, you do this
<center>My Homepage </center>
To put a picture, like cat.gif in the center, you do this
<img src = "cat.gif" alt = "cat" ALIGN=center>
To make a link to a site whose address, say, is: http://www.ci.omaha.ne.us/ , you do this:
<a href="http://www.ci.omaha.ne.us/"> Omaha Official Website </a>
The statement Omaha Official Website is what will appear in blue and will be underlined. In other words, it is the statement people are supposed to click on it.
Back to the top
Still More to Come ...