martin2k

How HTML Works - Creating a Simple Web Page
HomeForumTutorials Tags:
 
 

Creating a Simple Web Page

The following code is an example of a simple page written in HTML:

<html>

  <head>
    <meta name="author" content="Martin Allen">
    <title>Simple Page Example</title>
  </head>

  <body>
   
  <h1>Page Heading</h1>
 
  <p>This is an <i>example</i> of a simple page written in HTML format.</p>
 
  <p>Here is a 2x2 cell table:</p>
 
  <table border="1" width="100%">
    <tr>
      <td width="50%">Top left cell</td>
      <td width="50%">Top right cell</td>
    </tr>
    <tr>
      <td width="50%">Bottom left cell</td>
      <td width="50%">Bottom right cell</td>
    </tr>
  </table>
 
  <p>Here is an image of a red circle:</p>
  <p><img border="0" src="area2.gif" alt="Red Circle" width="120" height="120"></p>
  
  <p>Link to <a href="http://www.google.co.uk">Google</a></p>
   
  </body>
 
</html>

The above code may look confusing at first, but if you look carefully you'll notice the following:

  • The HTML tag surrounds the all the code
  • The HEAD tag contains the non-visible information about the page including the author (see the META tag) and the title (see TITLE)
  • The BODY tag contains all the visible content of the page
  • The page heading is defined using the H1 tag
  • Paragraphs are defined using the P tag
  • The TABLE tag defines the table.  Both TR tags define the two rows and the TD tags split the rows into two cells per row.
  • The IMG tag defines the image.  The SRC attribute specifies the location of the image.  The IMG tag has no closing tag.
  • Links are defined with the A tag.  The HREF tag specifies the URL and the text in between the opening and closing A tags is the text that will be clicked on to go to that URL.
  • Pages always end with the closing BODY and HTML tags.

The spacing used above is just to make the code easier to read, but the page will work with no spacing whatsoever.  It is a good idea to use spacing as it will make your code easier to work on.

When looking at the code closely, you will see that it is in fact quite simple.  Have a go yourself at writing a simple page.

Click here to see the code rendered in your browser.

Previous - Attributes and Values; Text; Comments Next - Tag Reference

Comments

From: james
Date: Friday, February 9, 2007 at 06:49:08
Comments: very good information gives about html tags

Please fill in the below form if you have any comments or additional information you want to add about the above information.  If you have any questions, please visit the Forum.  Any questions sent using this form will be ignored.

* - Mandatory

*Name: E-mail:

*Comments:

*Please type the following code (your comment cannot be accepted without it):

© Martin Allen 1999 - 2006.  Last updated Sunday 12 November 2006 07:45:18 PM -0000.