PTD | Creating a Personal Web Page

This document will demonstrate how to create a simple web page and attach an image file to it using a text editor (ex. Windows Notepad or SimpleText). This document is not intended to be a reference guide for web page creation - it is simply intended to help new users get started with the process of creating their own basic web page on the Internet. There are a number of references and instructional materials available on the World Wide Web, as well as many printed reference books, which explain how to use the occasionally-complex HTML coding required for creating a web page. There are also a number of software programs available which make web creation easy. Programs such as Microsoft FrontPage and Adobe Dreamweaver will allow you to create a complex web page without having to understand HTML coding. Microsoft Office users can also create simple web pages by simply saving any Office document as an HTML file.

Please keep in mind that Technical Support can only assist you in the uploading of your personal web page files. We cannot assist you in the creation or troubleshooting of your HTML code.

Before we get started, it is necessary to describe some of the basic components of a web page. Every web page is composed by using a series of HTML "tags" which describe precisely how your page will appear when displayed in a web browser. "Tags" are used to signify a specific function that you want your web page to perform. Whenever you use most "tags," you must also "close" the "tags". This is done by preceding the tag with a "/" character. For example, when using the "<body>" tag to mark the beginning of the "body" section of your web page, you must also have a "</body>" tag at the end of the body section of your web page.

The following is a list of some commonly used HTML tags:

<html> - The "HTML" tag informs a web browser that this file contains information which is encoded in HTML so the browser will attempt to display it. Every HTML file must begin with this tag.

<head> - The "head" tag specifies the first part of your HTML document and will contain the "title tag" of your page. Your actual title will be contained within the "title" tags.

<title> - The "title" tag specifies the actual title of your web page. The title will be displayed in the window title bar of your web browser.

<body> - The "body" tag specifies the beginning of the body section of your web page. The body is the largest part of your web page. It contains all of the text, tables, lists, and images which comprise your web page.

<h#> - The "heading" tag allows you to change the size of the text being displayed on your web page. The "#" can be any number between "1" (producing the largest text characters) and "6" (producing the smallest text characters).

<br/> - The "line break" tag inserts a blank line into your web page. You do not need to "close" a line break tag.

<p> - The "paragraph" tag specifies the beginning of a new paragraph in your HTML document.

<img src="/filename.ext"> - The "img src" tag will allow you to display an image file on your web page. If the file that you want to display has already been uploaded into your "public_html" folder, simply type the full file name between the quotation marks within this tag. See further information regarding uploading files to your Personal Storage Space.

The following sample HTML document displays the basic structure of a simple web page using the various tags which were described earlier in this document. In some cases in the example, multiple tags are used to create multiple text effects. Each line of HTML code is explained within the comment tags.

<html> 
    <head> 
        <title>My webpage</title> 
    </head> 
    <body> 
        <h1>Welcome to my webpage!<h1> 
        <br/><br/><br/> 
        <p>
This is an example paragraph which is un-centered. Line breaks and extra spaces are ignored and any text entered here will be automatically formatted by your web browser.
</p>
        <br/><br/> 
        <img src="/image.gif"/>
    </body> 
</html> 

Once you have created your HTML code, your web page (HTML) file must be saved with an ".html" extension so your web browser will be able to open it. Your main web page file should be named "index.html" (without the quotation marks). This file will always load first when your web page is accessed on the Internet via http://home.ptd.net/~username.

Finally, you will need to upload this file into your Personal Storage Space located at home.ptd.net. See further information regarding uploading files to your Personal Storage Space.

Once all of your files are uploaded, your web page will then be available on the Internet for others to view. Simply point your web browser to http://home.ptd.net/~username to view your personal page.

If you have followed the example above and uploaded your page directly, your personal web page should resemble the figure below when loaded into a web browser:

PenTeleData Acceptable Usage Policy.

For more online information regarding HTML and the creation of web pages, we have provided links to various HTML information sites below. Please note that PenTeleData does not offer support on these links, they are simply provided as a convenience to our customers.

A Basic HTML FAQ:
http://www.hwg.org/resources/faqs/basicFAQ.html

Web Authoring FAQ:
http://www.htmlhelp.com/faq/html/

Comprehensive list of HTML tags:
http://www.w3.org/TR/REC-html40/index/elements.html