A Simple Webpage

~ HELLO WORLD ~

A New Webpage is Born

This is a simple webpage created using hand coded html. It's quite easy and fun but not too flash yet.

For reference, the Sydney PC User Group's entire website is also hand coded - allowing total design flexibility!

A division is a "box element" that can be used for page layout or to "group" related elements such as paragraphs, tables, pictures, navigation buttons or even other divs. The "style attributes" within the head of the document will display this div with smaller text, a border, some padding and a background colour - spelt "color" when coding.

A "paragraph" is also a box element. Notice that all paragraphs on this page have been "styled" with a 100px margin-left. Using Notepad, please delete this text and add your own if you wish.

Ctrl + s to save any changes
Alt + Tab to switch between windows
F5 to refresh changes to your webpage

A picture would normally show here This paragraph would contain a small picture if you changed img src= (image source) to show your selected "images/picture.ext" located on your computer.

You can easily include "links" to other pages or other websites. This link should open a new window to the Sydney PC User Group's website. Use your Back button to return here.

This is a simple TABLE	Add DATA here
12345	2nd cell in the second row

Correct nesting of elements is important. Nested elements must be closed in the reverse order to their opening.

Congratulations!

common elements

<html> html document "container" </html>
<head> document head </head>
<body> document body </body>
<div> division </div>
<h2> heading "bold, sizes: 1 - 6" </h2>
<p> paragraph </p>
<ol> ordered list </ol>
<ul> un-ordered list </ul>
<li> list item </li>
<img /> image element (has a self closing tag)
<a> anchor "for a link" </a>
<b> bold text </b>
<i> italicized text </i>
<table> table body</table>
<tr> table row </tr>
<td> table "field" data </td>
<hr /> horizontal ruler (has a self closing tag)
<br /> line-break (has a self closing tag)
and created a div element "class"

Now it's time for you to experiment!

Web Tips: You can right-click most webpages and select "View Source" to view, learn from or copy its html coding. Please respect designer copy right ©

Don't forget - use Alt + Tab to cycle between open windows