Make Money at Top Bucks
Topbucks can help you make fat cash on your website!

LinuxReviws.org --get your your Linux knowledge
> Linux Reviews > Web Design Tips and Info >

How To make Your First Web Page

How to make your first web page without knowing anything at all about computers: A basic HTML template


  1. Step 1: Start by informing what kind of data-stream your document is
  2. Step 2: Add a proper header
  3. Step 3: Write the Body (main) part of your page
  4. Step 4: End the document
  5. Step 5: Play with the look and feel


A web page is a computer file with information described in a markup language called XHTML. The markup consists of only a few valid words who can be used to describe how the page is displayed.

Many modern programs can make complete and complex web sites for you using a graphical interface. They all have one thing in common: They present the content to web browsers using (x)html markup language.

It is fairly easy to make a simple web page yourself using basic markup in any text editor. The Linux editors quanta, bluefish, kate, emacs, nano and vi can all be used. Windows users can use notepad.

Here is a very basic template for a website:

  <?xml version="1.0"?>
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml"  xml:lang="en" lang="en">
    <head>
      <style type="text/css" title="Default-Style">
        body {
        margin: 10em 20em;
        }
      </style>
      <meta http-equiv="Default-Style" content="Default-Style" />
      <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
      <title>My very frist valid web site!</title>
    </head>
  <body>
    <h1>My First Web-Site</h1>
    <p>Hello</p>
  </body>
  </html>

Look at it very closely. Notice that all tags have a beginning and an end - even stand-alone tags must be closed. A line break is defined with only br : <br /> is the proper way to insert one. You must always close your tags.

1. Step 1: Start by informing what kind of data-stream your document is

A standard document starts by explaining what is it so that tools opening it can figure out what to do with it.

  <?xml version="1.0"?>
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml"  xml:lang="en" lang="en">

After declearing that this is XHTML the document adds some additional information: The document is in English and it is properly defined at the URL http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd.

2. Step 2: Add a proper header

The document header is meant to give information about the following document.

This header includes three kinds of information:

  • A stylesheet used to inform how the document should look and be layed out.
  • Give meta information about the document. Meta information can be chatset, generator, keywords and much more.
  • The document title. This will be displayed in the window title of visitors browsers and is also used by search engines to name your page.
    <head>
      <style type="text/css" title="Default-Style">
        body {
        margin: 10em 20em;
        }
      </style>
      <meta http-equiv="Default-Style" content="Default-Style" />
      <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
      <title>My very frist valid web site!</title>
    </head>

3. Step 3: Write the Body (main) part of your page

Here is a very simple body port of a page. It has a heading defined by h1 and a paragraph p.

The body itself is enclosed by a

  <body>
    <h1>My First Web-Site</h1>
    <p>Hello</p>
  </body>

4. Step 4: End the document

All tags must be closed, including the documents html definition. Close and save, then upload your document to the w3 validator. This tool will show you if your document is valid or not.

Valid documents are understood by search engines and are shown to all browsers in the same way. Unvalid documents not work at all or look bad or horrible in some browsers even if they look good in others.

  </html>

5. Step 5: Play with the look and feel

The best way to learn html is by trying to create things. Try to create a page just like you want it using plain xhtml.

You can do this with the same short and simple body by changing the stylesheet.

  <?xml version="1.0"?>
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml"  xml:lang="en" lang="en">
    <head>
      <style type="text/css" title="Default-Style">
        body { 
        margin: 15em 25em;
        font-family: "tahoma", Arial, Helvetica, sans-serif;
        font-size: 12px;
        }
        h1 {color: green;text-align:center;}
        p {color: red;text-align:center;}
      </style>
      <meta http-equiv="Default-Style" content="Default-Style" />
      <meta name="generator" content="I am proud to have created my own page from scratch in Notepad." />
      <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
      <title>My very frist valid web site!</title>
    </head>
  <body>
    <h1>My First Web-Site</h1>
    <p>Hello</p>
  </body>
  </html>

A stylesheet can be defined in a separate file or included between style tags in the head part of the document.

      <style type="text/css" title="Default-Style">
        body { 
        margin: 15em 25em;
        font-family: "tahoma", Arial, Helvetica, sans-serif;
        font-size: 12px;
        }
        h1 {color: green;text-align:center;}
        p {color: red;text-align:center;}
      </style>

A standard rule can look like this: `p {color: red;text-align:center;}` This tells browsers that all paragraphs in the document should be colored red and be aligned horizontaly to the middle of the screen.


Copyright GNU Copyleft http://linuxreviews.org/


- Next: What you need to know about markup languages before you can create a website
- Previous: Web Design Tips and Info

Meet new people