PCLinuxOS Magazine

Creating Your Own Web Site

By Rodney A. Adkins

To Start building Web pages, you will need a browser (preferably Firefox for this instruction) and a Text editor. Under no circumstances would I use a what-you-seeis-what-you-get (wysiwyg) editor. To create a Web page you need to know the basics of HTML. If you learn the basics and your page renders itself wrong or causes trouble you will be able to find the problem.

HTML is short for Hyper Text Markup Language. It is a broad language and is used by all sorts of Internet Web browsers. An HTML document is essentially an ASCll (American Standard Code for Information Interchange, pronounced ask-ee) text file containing specialized codes which represent the formatting of documents and links to resources to which the document can connect.

WWW or W3 stands for World Wide Web. The W3 project was started by the European Laboratory for Particle Physics (CERN) in Geneva Switzerland. In 1989 they proposed the project to carry research information and ideas efficiently throughout the organization. This was very important to CERN as their members were spread throughout the world.

The project first proposed to use a simple network system to carry hypertext documents to its members. By the end of 1990, Web software was demonstrated on a computer. This software allowed users to edit hypertext documents and to transmit to other members on the network.

By 1992 CERN began promoting ideas outside of its own organization. To promote the Web, CERN released the source code for W3 servers and browsers. The release of the code and ongoing development in technology and file formats has brought the Internet to the point it is today.

How does a user get information from the Web W3 is designed as a client/server architecture. The client (Web Browser) requests information from the server (Web Server). The server responds to this request by sending the information. The server is responsible for storing the document and the Web browser is responsible for displaying it.

Browser and Platform Considerations must be taken into consideration when designing a web page. The page rendering will be affected by the different browsers, different versions within the browser, different computer monitors, video resolutions, and computer platform; these all affect the way HTML code will be seen. Most of these problems can be overcome by viewing the Web page with different browsers, resolutions and, if you can, on a different platform.

CSS stands for Cascading Style Sheets. CSS is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents.

Your First Web Page will require some content. Decide what you want to put into the Web page or follow what I am going to use. I want my content to look like this:

Welcome to Jerry-Lee's Web Site I am a twelve year old German Shepherd that does not bark. I have big brown eyes and really know how to beg. I have a good life, sleep on the sofa in the play room. Have lots to eat and I am happy. It really is a dogs life! I know you will come back soon. Jerry-Lee.

For this project we will use the editor KEdit (available through Synaptic).

There are several tags that are absolutely necessary for an HTML page to work correctly. These tags are the foundation tags of the HTML page. Also remember that every tag has an open tag and a closing tag. Do not put code in capital letters. All codes are spelled with American spelling. The document will also need a document type; we will use the following doc.type and codes, notice the opening and closing tags:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>

Save the page in KEdit by clicking 'Save As' a window will open, in the 'Location' type 'myweb.html'. Change 'Filter' to 'All Files.'

As you can see in the above code, all tags have an open and close tag. The next step is to add some content to the page. This we add between the body tags. It will look like this.

<title>Jerry-Lee The Dog</title>

</head>

<body>

</body>

</html>

The content is on the page; let us take a look and see how it looks in Firefox.

As you can see, the text shows up but there is no formatting to the text. The next step in the process is to add some formatting. For the demonstration, we will use a heading tag, which has different sizes from <h1> to <h6>. We will also use a paragraph tag, <p>, and a line break tag, <br />.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>Jerry-Lee The Dog </title>

</head>

<body>

<h2>Welcome to Jerry-Lee's Web Site</h2>

<p>I am a twelve year old German Shepherd that does not bark. I have big brown eyes and really know how to beg. I have a good life, sleep on the sofa in the play room. Have lots to eat and I am happy. It really is a dogs life! I know you will come back soon</p>

<br />

<p>Jerry-Lee.</p>

</body>

</html>

Now when the page is viewed in Firefox you will see that it is laid out in the manner that we choose. This is the beginning of a very basic Web page.

Welcome to Jerry-Lee's Web Site

I am a twelve year old German Shepherd that does not bark. I have big brown eyes and really know how to beg. I have a good life, sleep on the sofa in the play room. Have lots to eat and I am happy. It really is a dogs life! I know you will come back soon.

Jerry-Lee.

Now that the page is basically formatted, it is time to add a picture, The tags we will use are as follows:

<img>, <h1>, <span>

We will also use the following attributes to the img tag.

src=, talt=, talign=, vspace=, hspace=, and border=

The img tag allows us to add a picture to the document, align tells the document where to put the picture, hspace and vspace tell the browser how far to place text away from the picture. The alt tag describes the picture for people with graphics turned off in the browser. The border tells how large to make the border around the picture. You should always include height and width as well as the alt tag.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>Jerry-Lee The Dog</title>

</head>

<body>

<h2>Welcome to Jerry-Lee's Web Site</h2>

<br />

<p>Jerry-Lee</p>

</body>

</html>

The picture below of Firefox and the Web page shows the basic Web page as we have coded it.

Welcome to Jerry-Lee's Web Site

Jerry-Lee

This is a very basic start to a web page. Each month we will add more codes and get even more complex. The purpose of this column is to give the reader a thorough understanding of HTML and, in the end, the knowledge of how to code a page with a combination of HTML and Cascading Style Sheets.

About the Author:

Rodney became interested in Web Design back in 1997. He attended University at night and took courses in basic and advanced HTML. He also completed a course in Javascript. He volunteers and gets great satisfaction from teaching pensioners computers one on one.

Top