Computing And Information Services
IS Staff
[New and Prospective Students] [Current Students] [Faculty and Staff] [Important Notices]

Quick Links

Students

Faculty & Staff

*PDF Files Require Adobe
Reader. Download Above.

*VIDEO Files Require
Quicktime. Download Above.

CIO Award

Writting Your Own Webpage



Example Webpage

To write your own webpage from scratch requires knowledge of a web language. This page will give you examples for writting HTML 4.0 and XHTML 1.0 Transitional. When writting a HTML or XHTML Tag you must include <> around the <TAG>. To end a tag you add a / before the tag name. To match the example above you would end <TAG> with </TAG>. Keep in mind that all tags should be written in lower case letters. To learn more about writting your own webpage please follow along with the example below.

  1. Open a text editor such as notepad/wordpad/microsoft word.
  2. To create a webpage you should begin your document with a DOCTYPE. The DOCTYPE tells the webbrowser what type of document it is looking at. For example, the page you are currently looking at is XHTML 1.0 Transitonal. To create a XHTML 1.0 Transitional webpage you must type this: 
     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    If you are going to write a plain HTML 4.0 document you will need to put 
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd"> at the top of your document.
  3. After you give your document a DOCTYPE you will need to put a html tag on your page <html>. If you are creating a XHTML page you will need to type this <html xmlns="http://www.w3.org/1999/xhtml"> instead of <html>.
  4. Next, create the head tag, <head>.
  5. Insert this tag next: <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  6. Next you will need to give your page a title: <title>Example Webpage</title> go head and close the head tag after the end of your <title>Example Webpage</title> </head>
  7. After ending the head tag, go ahead and insert the body tag <body>. The body tag is going to hold the content of your page. If you want to add a background color or image to the page the body tag is the place to add it. To add background color type <body bgcolor="color"> to add a image type <body background="location/imagename">.
  8. Now, lets add some information to your page in the form of a paragraph. To insert a paragraph type <p>All the information between these two tags will show up as a paragraphn on your page.</p>
  9. Next, lets try inserting a picture. To insert a picture you must already have the image downloaded to your machine. If you are going to place the image in a folder on the webserver you must show that in your tag. For example I am going to stick my image in a image folder on the webserver so I am going to type <img src="image/filename.jpg" alt="Description of My Image" />
    *If I hadn't put the file in a folder, but rather just in the root of my webshare I could have typed: <img src="filename.jpg" alt="Description of My Image" />
  10. Now, lets add a table. To begin type <table>. Next, you have to add a row so type <tr>. Now, you are ready to add your data, type <td>. Enter your infomormation then close your table data</td>. If you want your table to have more than one column go ahead and enter a second <td>. Enter you data again then close the table data</td>. You may enter as many columns as you want. After you have entered all the columns you want that row to have, create a second row. To create the second row end the first row then begin a second one </tr><tr>. Again, you must add all the columns you want before ending the row and creating a new one. Once you are done with the table end the table tag </table>. There are many tags that can be used with tables. For example, you may want your table to have a border. To add a border to your table you must begin your table like this <table border="number"> enter a number between the "". Entering a 1 will make the border very thin. The border will become thicker as the number becomes higher. You may also wish to add cellpadding and a background color to the table. To add these two items you will need to creat your table like this <table cellpadding="number" bgcolor="color">. For the color you may either enter the hex code such as #E8E8C4 or for certain colors such as white, black, blue, green, purple... you may enter their name between the "".
  11. Next let us try adding a link to another webpage. To add a link you must type <a href="http://name of the url.com">The Text That Will Be The Link</a>
  12. After you are finished creating everything you want in the body you will need to end the body tag, followed by the end html tag.
    </body>
    </html>
  13. Now lets see what all of this looks like once it has been put togehther:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Example Webpage</title>
    </head>
    <body bgcolor="color">
    <p>All the information between these two tags will show up as a paragraph on your page.</p>
    <p><img src="image/filename.jpg" alt="Description of My Image" /></p>
    <p><a href="http://name of the url.com">The Text That Will Be The Link</a></p>
    <table border="number" cellpadding="number" bgcolor="color">
    <tr>
    <td>
    my table data
    </td>
    <td>
    more table data
    </td>
    </tr>
    <tr>
    <td>
    enter more table data
    </td>
    <td>
    more data
    </td>
    </tr>
    </table>
    </body>
    </html>

One very important thing to know is that Tags need to end in the proper sequence. So to end a tag you must begin with the last one type and work your way back out. For example if I type <b><i><u>it must end like this </u></i></b>

HTML/XHTML tags: