HTML Basics

A Basic HTML Document

<html>
<head>
<title> [title would go here] </title>
</head>
<body>
[web page content would go here]
</body>
</html>

<html> This tag begins the entire HTML document.
<head> This is where you would commonly place the title of you web page, CSS, and JavaScript.
<title>...</title> In between these tags you will display the title of your webpage. This title can be seen at the top of your browser, in the title bar.
</head> This closes the header section. All CSS and JavaScript needs to be placed before this tag.
<body>...</body> You place all the content of your website, and it's tags in between these tags.
</html> This tag ends the HTML document.

These four basic tags ( html, head, title, and body ) are needed in every HTML document. You may notice that your HTML page will still work without them, but that's only in certain browsers. A lot of browsers will not even display your web page unless you have these tags.

Go ahead and give it a shot. Open notepad (or any simple text editor), copy and paste that above HTML, save it as "index.html", then open it in your browser (Like Internet Explorer) by going to file > Open > Browse > Your file.

It will open up and you will see [title goes here] in the title bar (upper left), and [web page content would go here] on the actual page.

Tags
Your HTML document will consist of "tags". Tags generally contain attributes, and values. A basic tag looks like this:

<body bgcolor="#000000">

In that example "body" was the actual tag. "Bgcolor" was an attribute of the body tag. "#000000" was a value of the bgcolor attribute.

When you form your HTML documents you really do not need to concern your self with the amount of space, indents, carriage returns, etc. between each tag. When a web browser displays HTML pages, it pays no attention to line endings or the number of spaces between words.

When you organize your tags, you can indent them if you like, but it's only for organizational purposes, and not required.

Paragraphs and Line Breaks

<html>
<head>
<title> p and br tags </title>
</head>
<body>
<p>
Hi, welcome to my homepage.<br />
My name is Jenni.
</p>
<p>
I'm 21, I'm cool, sort of.<br />
I like soda.
</p>
</body>
</html>

<p> ... </p> This tag will make two line breaks. It specifys that the contents are a seperate paragraph.
<br /> This tag will make one line break.
These tags are pretty common. The <br /> tag is usually typed <br>. This was recently changed in new HTML standards. Either way will work for now, but in the future <br> may not work. You'll notice that I still type <br> instead of <br />, it's only because hard habits are diffucult to break, don't let it confuse you.

Alignment

<body>
<p align="center">
Hi, welcome to my homepage.<br>
My name is Jenni.
</p>
<p align="right">
I'm 21, I'm cool, sort of.<br>
I like soda.
</p>
</body>

Remember those attributes I mentioned earlier? Well, with those you can do some neat things like align a paragraph to the center or right, just like I did.

Headers and Horizontal Rules

<body>
<h2>Welcome!!</h2>
Hi, welcome to my homepage.
<hr>
My name is Jenni.
<hr width="50%">
I'm 21, I'm cool. Etc.
<hr size="10">
I like soda.
<hr noshade>
</body>

<hn> Headers are made by using the <hn> tag. Well, actually there's no such thing as a hn tag! The "n" represents a number. You can make it 1 - 6. "6" is the smallest header, and "1" is the biggest header.
<hr> This makes a little line going across the screen. You can set a few attributes to it, such as width="...", size="...", or noshade.

Comment Tags

<!-- [insert your comment here] -->

When you start making more advanced HTML pages it's easy to forget what, or why you did something if you come back to the code later. With comment tags, you can place notes and anything in the world you want. Anything within a comment tag will be completely ignored by the browser. You can even put multiple lines of information, or HTML in a comment tag.

Personally, I like to put comment tags at the beginning of some of my HTML documents.

<!--
HTML © Jenni O'Toole, 2002. All rights reserved worldwide.
Written Oct. 31, 2002
-->

So, to start a comment tag, simply type "<!--" place your notes after that, and close it up with "-->"

Viewing Others HTML
Checking out other peoples HTML is a great way to learn HTML. But, there is something important you have to remember. HTML, much like artwork, is copyrighted. Not the tags, or the neat little tricks, but the actual structure of the code, and the HTML document in full. A lot of work went into it; so when you're checking out other people's techniques, don't swipe their code just to save yourself some time. It's just rude.

Anyway, to see the HTML for a web page, simply go to view at the top of your browser, and move the mouse down to "source". This will bring up the code. Alternatively, you can right click on the screen (make sure you're not on a graphic) and select view source.

Main?