[ All About Avatars ] [ Cybertown FAQ ] [ VRML Tutorials ] [ VRML Tools ] [ Builder's Guild ] [ Flux Studio Help ] [ VRML Gallery ] [ Worlds ] [ Quick HTML ] [ Textures ] [ ICQ ] [ Maket ] [ Legal ] [ Table of Contents ]

HTML in 10 minutes or less!

HyperText Markup Language

HTML was designed to be simple to use and understand. You can make a great web page with just a few markup tags such as the ones below. The markup language is not the hard part, having meaningful content is.

Web pages are composed of text and use a markup language called HyperText Markup Language (HTML) to control the layout. A markup language consists of simple formatting commands to create headers, ordered lists, paragraphs, links, embed images, etc... The markup language consists of a series of tags or containers which hold the contents. The tags most often consist of an opening and a closing delimiter i.e. <something> Contents </something>.

All web pages start with <html> and end with </html>. After the HTML tag comes a <head> tag signifying the heading portion of the file. In the heading you should include a <title>Title</title> tag which describes the page (it shows up on the top of the browser window). Other information can go in the header which is meaningful to search engines. The head of the file is terminated with </head>

The rest of the file is enclosed in a <body> tag.
The skeletal structure of a web page would look like this...

<html>
<head>
<title>HTML in 10 Minutes</title>
</head>

<body>
<h1>HTML in 10 minutes or less!</h1>
<p> Paragraph after paragraph of meaningful text.</p>

</body>
</html>

The first or top level page of a web site is typically called index.html, it is supposed to be an index or table of contents to the rest of the web site.

Headers

A header is used to set off a topic or unique level of information on a page.

<H1>This makes a first level header</H1>

This makes a first level header

<H2>This makes a first level header</H2>

This makes a second level header

<H3>This makes a first level header</H3>

This makes a third level header

Lists

UL makes an Unordered List (bulleted)...

<ul> 
<li>List Item </li> 
<li>List Item </li>
<li>List Item </li> 
</ul>

	List Item
	List Item
	List Item

OL makes an Ordered List (numerical)...

<ol> 
<li>List Item </li> 
<li>List Item </li>
<li>List Item </li> 
</ol>

List Item One
List Item Two
List Item Three

Miscellaneous

<p> A paragraph of text is a long block of text that you want separated from all the other text on a web page and to have that text flow or wrap around the page no matter how wide or narrow the browser window is. </p>

A paragraph of text is a long block of text that you want separated from all the other text on a web page and to have that text flow or wrap around the page no matter how wide or narrow the browser window is. Make your browser window narrower and see how the text flows to fill the screen with none going off of it.

A forced line break <BR> (manual end-of-line)<BR> forces where the break is<BR> (text does not auto wrap).

A forced line break
(manual end-of-line)
forces where the break is
(text does not auto wrap,
it wraps where you tell it to).

You can center text or images using the <center> command.

<center>Stuff in here will be centered on the page</center>

This line is centered on the page.

You can also do it with the Paragraph tag and specifying alignment to be "center"
(guess what? left and right are also options).

<p align="center">Stuff in here will be centered on the page</p>

There are also a few "style" tags such as bold, italic, & underline

<p>There are also a few "style" tags such as <b>bold</b>, <i>italic</i>, & <u>underline</u></p>

You can get a Horizontal Rule (or line) across the page by using <HR> tag

Images

An image or picture may be placed on a web page with the image tag...
<img src="newfacet.gif">

newfacet.gif (28 KB)

The URL (Universal Resource Locator) of the source for the image tag can be relative (in the same folder or another folder nearby on the same website) and you link to it simply by using the filename. It could also be absolute; that is to say, you type in the fully qualified domain name in addition to any directory path and the filename.

Relative: <img src="newfacet.gif">
The image is in the same directory as the HTML file.

Absolute: <img src="http://philliphansel.org/html/newfacet.gif">
The image may even be on another website entirely.

Using relative links makes it easy to move your pages from one place to the next (e.g. your PC to your web server) and still have the links work correctly in both places.

Hyperlinks

To make a text hyperlink simply use Anchor tag. The Anchor specifies a HyperReference (a link or clickable reference) to another document or image.

If you click this link, an image replaces this page in the browser . This could be a link to more text (another page) as well.

This is a Hypertext REFerence to a file in the same folder or on another server, then some descriptive text which when clicked takes you to that location.

On a web page it looks like this: My Face!
The text of the anchor tag forms the link to be clicked on.
(If you click on the above link, hit the browser's back button to return to this page.)

Image Link

To make a picture a link to elsewhere is a little more complicated; you need to nest the above two tags...

<a HREF="http://

Email anyone?

A special type of hyperlink can be used to open up the users mail program in order to send the page author email.

<a href="mailto:phillip@somedomain.com">Mail me</a>something!

On the page, it would look like this...
Mail me something!

Tables

Table	Data
Row	Two

<table border="3"> 
<tr> 
<td>Table</td>
<td>Data</td> 
</tr> 
<tr> 
<td>Row</td>
<td>Two</td> 
</tr> 
</table>

Tables are a little more complicated, but not much more. First you say here is a table, it has a border, then here is a table row, and here is table data. Then you may say here is more data, or this is the end of this row, here's another row, or you simply may say this is the end of the table. Tables can get more complicated than this, but this is enough to get you started with a basic table.

Lastly

One reason for the rapid adoption for the World Wide Web is the fact that you can view the source for most web pages in a text editor. [In Microsoft's Internet Explorer select the View menu, then Source to see the web page and it's HTML commands in your text editor.] This means that if you see a web page with some interesting technique that you want to use, you can view the source and copy and paste the pertinent parts to your web page. You are borrowing the formatting to wrap around your content.

There are hundreds of web sites devoted to teaching more detailed aspects of HTML authoring. This page has been designed to give you enough to get started in one quick and easy lesson. I hope that you find it helpful.

Conclusion

With this handful of commands you too can make a killer website; provided that you have something meaningful to say. It's easy if you know how! Please remember that on the web "Content is King".

[ Back ] [ Home ] [ Next ]