A Simple Webpage

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.

Note: 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.

This is a short "ordered (numbered) list" of time saving short-cut keys. Use then often!

Ctrl + a to select (highlight) all

Ctrl + c to copy

Ctrl + v to paste

Ctrl + s to save any changes

Alt + Tab to switch between windows

F5 to refresh changes to your webpage

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 the 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! You have now employed this "un-ordered list" of <tags> that define the most common elements used in most websites.

<html> these tags define the total html document </html>

<head> document head holds unseen browser instructions </head>

<body> document body displays the page content </body>

<div> division is a rectangular "box" element </div>

<h2> heading "bold, sizes: 1 - 6" </h2>

<p> paragraph is a "padded rectangular box" element </p>

<ol> ordered list uses numbers </ol>

<ul> un-ordered list uses bullet points </ul>

<img /> image element (has a self closing tag)

<a> anchor "for a link" </a>

<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