HTML

Home

Tutorials

Go to tag:

 

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.




Archived Comments

From: seszer
Date: Monday, July 14, 2008 at 19:23:51
Comments: Html Attribute for <MARQUEE ...> -- Marquee Slide Image and Text ---
http://html-lesson.blogspot.com/2008/06/marquee-slide-image-text.html
 
From: james
Date: Friday, February 9, 2007 at 06:49:08
Comments: very good information gives about html tags
© Martin Allen 1999 - 2017.  Last updated Thursday 16 November 2017 11:16 +0000.