Articles: HTML Tutorial

Sep 5, 2002

This tutorial will teach you how to create your own web pages using a text editor only. More importantly, it will teach you the basics so that you can continue to teach yourself to far surpass the bounds of this tutorial. If you get stuck or confused look ahead and there might be an example of what you are stuck on. When all else fails ask Google.

Introduction
Chapter 1: Setting up the document - The head
Chapter 2: The content - The body
Chapter 3: Organize data - Tables & Lists
Chapter 4: Gather user infor - Forms
Chapter 5: Multiple documents in one - Frames & iFrames
Resources

Introduction

Most web page making tutorials are either too complex or too beginner. This one is for the beginner. It will only get you started. Many of the techinal terms are not used in this tutorial becuase they have little to no importance. RULE #1: Dont be afraid to tinker. You cant break your computer if you mess up in HTML. So feel free to mess with it.

HTML	Hyper text markup language. That code that web browsers burn into web pages.
Tag	A command interprited by the browser to perform or display a specific action or item.
URL	Uniform Resource Locator. This is the "web address" that we use to access websites.
Document	The Single page that you see in your web browser.
Web Site	Compilation of web-based documents.
Browser	Program/Window that allows you to view a web-based document.
Hexadecimal	A 15 base numeral system where 0 is the smallest and F is the largest.
Source code	The makeup of an uncompiled file such as programs or web pages. We will be working with HTML source code.
Compile	The process the computer, or in this case the web browser, takes in turning your source code into a human readable webpage.
Comment	A part of the source code that is not compiled. Comments are used when making notes in your source code to yourself, or others who may be viewing it.
Syntax	The specific structure of elements that, in this case, code must be arangement to compile.

Some basic rules:

All HTML tags begin with < and end with >.
Some tags you will have to "close" with a /, or forward slash.
```
<FONT color="#FF0000">Words</FONT>
```
When defining a variable to something, (variable=value), if there is a space you must put it in double or single quotes.
```
<A href="http://this-must-be-in-quotes.com">
```
If you need to declare something within double quotes put it in single quotes.
```
<BODY onload="doSomething('single inside of double');>
```
HTML is not case sensitive.
HTML does not care about line breaks inbetween tags. When making your code, space it with line breaks as you see fit so that is easier to read for you.
All characters can be displayed using their ASCII code (so you can display things like <). For a complete table click here.

Colors:
Colors in HTML are defined by most browsers in hexidecimal form. #000000 is black, #000000 is black. [#]Says color[FF]says red[FF]says green[FF]says blue. For those of you fimiliar with RGB colors, FF simply means 255. Click here for a HEX color picker

Numbers:
Numbers are used quite frequently in HTML. To define height, width, font size, border size, and more. Sometimes you can define with a percent instead of a set number, for example, for width and height.

<HR width="75%">

Chapter 1: Setting up the document - The head

The head is the portion of the webpage that sets up the body. The body is what we "see." We put information in the head to explain to the browser how to set up the document for viewing. From this point on there will be little to no explanations. I will show you a tag and explain what it does. Feel free to try some of the tags out on your own document as you read on.

HTML - Begins the HTML document.

<HTML> </HTML>

HEAD - Contains the information about the document.

<HEAD> </HEAD>

TITLE - The title of the document that apears in the top of your browser window.

<TITLE>Welcome to my homepage</TITLE>

LINK - Defines the relationship(s) between this document and another or others. A document can have several LINK elements.

<LINK REL="stylesheet" href="style.css">

META - A container for document metainformation.

author - The author of the page.

<META NAME="author" CONTENT="Your Name">

keywords - The words that a search engine looks for in the document.

<META NAME="keywords" CONTENT="HTML, document, homepage, yourname">

description - The description of the web pages that a search engine displays.
```
<META NAME="description" CONTENT="My first web document">
```
editor - The program used to created the document (frontpage, notepad, etc.).
```
<META NAME="editor" CONTENT="NOTEPAD">
```
HTTP-EQUIV="Refresh" - Refreshes the document for a specified number of times to a specified document.
```
<META HTTP-EQUIV="Refresh" CONTENT="12; URL=http://www.arzynik.com/">
```

STYLE - Stylesheet instructions, written in a stylesheet language. Stylesheet instructions specify how the document should be formatted for display.

<STYLE TYPE="text/css"> </STYLE>

SCRIPT - Script program code - for enclosing, within a document, scripting program code that should be run with - and that can interact with - the document. Example lanuages are JavaScript and VBScript.

<SCRIPT type="text/javascript" > </SCRIPT>

BODY - Contains the body of the document

<BODY>

bgcolor - background color
```
<BODY bgcolor="#ffffff">
```
background - background image
```
<BODY background="picture.gif">
```
text - color of the body's text
```
<BODY text="#0066cc">
```
link - color of the body's links
```
<BODY link="#880000">
```
vlink - color of the body's visited links
```
<BODY vlink="#880088">
```
alink - color of the body's activive (selected) links
```
<BODY alink="#ff0000">
```
onLoad - javascript command to execute upon loading of the document
```
<BODY onLoad="doThis()">
```

Here is a simple example of the structure of these tags and their usage:

<HTML>
  <HEAD>
    <TITLE>Welcome to my homepage</TITLE>

    <LINK rel="stylesheet" href="style.css">

    <META NAME="author" CONTENT="Your Name">
    <META NAME="keywords" CONTENT="HTML, document, homepage, yourname">
    <META NAME="description" CONTENT="My first web document">
    <META NAME="editor" CONTENT="NOTEPAD">

    <STYLE> </STYLE>
    <SCRIPT type="text/javascript"> </SCRIPT>
  </HEAD>

  <BODY bgcolor="#D6E6FA" link="#66CC00" text="#FE5247">
    Learn about this section below!
  </BODY>

</HTML>

See what this code does

Chapter 2: The content - The body

The body is where all of our "readable" content will go. Anything you see should be placed here and the browser will turn it into a human readable format.

! - A comment. Anything that starts with a ! will be ignored and not processed.

<!This is a comment>

FONT - Sets the display of your font

<FONT> </FONT>

color - modifies the color
```
<FONT color="#FF0000">I'm RED!</FONT>
```
size - modifies the size in incriments 1-7. This can be set with a number or with a +[number].
```
<FONT size="4">I'm BIG</FONT>
```

face - modifies the font name of the font

<FONT face="Arial">I', different!</FONT>

B - Make the enclosed text bold

<B> Bold text. </B>

I - Makes the enclosed text italic

<I> Italic text. </I>

U - Makes the enclosed text underlined

<U> Underlined text. </U>

H1 - Predefined font sizes for headings. Numbers range from 1-6 with 1 being the largest.

<H1> </H1>

A - The anchor statement makes to following text/image a link to something else.

href - the location of the link.

<A HREF="http://www.arzynik.com">Click Here<\A>
<A HREF="index.html#name>Name"<\A>

target - Name of the window where the link will execute. You can define a name of a frame or a webpage in frames and have it execute there, or have several links point to a "name" that does not yet exist and it will create a new window with that name forcing all new links targeted to that name to open in that newly created window. Or, a more common usage is:
- target="_top" (executes in the browser window with no frames around it)
- target="_blank" (opens a new browser window to view the document)
```
<A HREF="http://www.arzynik.com" TARGET="_blank">Click Here<\A>
```
name - defines a place in the page to link to
```
<A NAME="name">
```

CENTER - centers anything folowing the tag

<CENTER> </CENTER>

P - Begins a new paragraph

<P> </P>

IMG - displays an image

src - Sets the path and/or filename of the image.
```
<IMG SRC="mypic.gif">
```
border - Defines the border arond the image. If the image is linked then you will need to set border=0 in order to remove it.
```
<IMG SRC="mypic.gif" border="2">
```
alt - If for some reason the image does not load, this text will apear in the images place.
```
<IMG SRC="mypic.gif" alt"Return Home" >
```

BR - Inserts a break, or carrage return into the document.

<BR>

HR - Inserts a hard break into the document. This is a big line that separates content verticaly.

<HR>

width - sets the width
```
<HR WIDTH="70%">
```
height - sets the height
```
<HR HEIGHT="20">
```
color - sets the color
```
<HR COLOR="#FF0000">
```
size - sets the size
```
<HR size="10">
```

BIG - Sets the size of your text to large

<BIG>big text</BIG>

SMALL - Sets the size of your text to small

<SMALL>small text</SMALL>

Here is a simple example of the structure of these tags and their usage:

<html>
	<head>
		<title>My first page!</title>
	</head>
	<BODY>
		<center>
			<h1>This is my very first page</h1><br>
		</center>
	
		
		<p align="justify">
			<font size="3" color="blue" face="arial">
			HTML, an initialism of Hypertext Markup Language, is the predominant markup language for web pages. It provides a means to describe the structure of text-based information in a document � by denoting certain text as headings, paragraphs, lists, and so on � and to supplement that text with interactive forms, embedded images, and other objects. HTML is written in the form of labels (known as tags or elements), surrounded by angle brackets. HTML can also describe, to some degree, the appearance and semantics of a document, and can include embedded scripting language code which can affect the behavior of web browsers and other HTML processors.
			</font>
		</p>
		<br>
	
		<hr width="300" color="#008888">
			<br><br>
			<center>
			<a href="http://www.devin-smith.com/Momo" target="_blank">
				<img src="/images/meandmomo.jpg" border="0" height="100">
			</a>
			<br><br>
	
	
			<a href="http://www.devin-smith.com/Momo" target="_blank">
				Me and momo! click to see more!
			</a>
			<br>
		
			<hr width="74%" color="#008888">
		
			<a href="http://www.google.com/">Google</a> | 
			<a href="http://www.microsoft.com/">Microsoft</a> | 
			<a href="http://www.cnet.com/">CNet</a> | 
			<a href="http://www.arzdev.com/">ArzDev</a>

		</center>

		<br><br><br><br><br>
		<small>© 2002 Devin</small>
	
	<!Created by Devin Smith 2002>
	</body>
</html>

See what this code does

Chapter 3: Organize data - Tables & Lists

Of course your first site may look like the first example we had, but any site with content will need to be organized. There are many ways to do this including tables, lists and divs. Tables can be your best friend. Remember it is OK to have a table inside of a table.

TABLE - Creates a table

<TABLE> </TABLE>

cellpadding - space between cells
```
<TABLE cellpadding="2"> </TABLE>
```
colspacing - space between collumns.
```
<TABLE colspaning="1"> </TABLE>
```
border - border inbetween cells..
```
<TABLE border="1"> </TABLE>
```

TR - Begins a table row

<TR> </TR>

TD - Begins a the table data. Both <tr> and <td> are required be closed with </tr> </td>.

<TD> </TD>

colspan - how many collumns the cell should span accross
```
<TABLE COLSPAN="2"> </TABLE>
```
rowspan - how many rows the cell should span accross
```
<TABLE ROWSPAN="2"> </TABLE>
```

OL - Ordered list creates a list with numbers.

<OL> </OL>

UL - Unordered list creates a list with a bullet.

<UL> </UL>

LI - Begins the data of the list. Similar to <td>.

<LI> </LI>

type - different bullets. type=square or type=circle are the common ones.
```
<LI TYPE="circle"> </LI>
```

DL - Definition list creates a two layered list.

<DL> </DL>

DT - Definition term created the first layer in a definition list.

<DT>

DD - Definition description creates a sub-comumn under a definition term.

<DD>

PRE - Preformatet text turns all whitespace into readable spaces on the webpage including tabs and spaces.

<PRE>I am preformated              and this is a big space </PRE>

Here is a simple example of the structure of these tags and their usage:

<html>
	<head>
		<title>My second page!</title>
	</head>
	<BODY>
		<center>
			<h1>This is my SECOND page</h1><br>
		</center>
	
		<font size="3" color="red" face="arial">
			<pre>
     my second webpage
i still dont understand hex
     teacher is a bum
			</pre>
		</font>
		<br>
	
		<hr width="300" color="#008888">
		<table cellpadding="1" cellspacing="2" bgcolor="#C2EFE0" width="90%" align="center" border="1">
			<tr>
				<td colspan="3" allign="center" bgcolor="#C3E8EF">
					<b>Personal Profile</b>
				</td>
			</tr>
			<tr>
				<td rowspan="5" align="center">
					<img src="/images/meandmomo.jpg" alt="Me and MOMO">
				</td>
				<td>Name:</td>
				<td>Miss Momo Cupcakes</td>
			</tr>
			<tr>
				<td>Age:</td>
				<td>2</td>
			</tr>
			<tr>
				<td>Gender:</td>
				<td>Not sure</td>
			</tr>
			<tr>
				<td>Location:</td>
				<td>Texas</td>
			</tr>
			<tr>
				<td>Ocupation:</td>
				<td>Dancer</td>
			</tr>
		</table>

		<br><br><br>
		<h2>My favorite webpages</h2>
		<ul>
			<li type="square"><a href="http://www.google.com/">Google</a></li>
			<li type="square"><a href="http://www.apple.com/">Apple</a></li>
			<li type="square"><a href="http://www.cnet.com/">CNet</a></li>
			<li type="square"><a href="http://www.arzdev.com/">ArzDev</a></li>
		</ul>
		<br><br><br>
		<h2>Some things I learned</h2>
		<dl>
			<dt>HTML</dt>
			<dd>Hyper text markup language. That code that web browsers burn into web pages.</dd>
			<dt>URL</dt>
			<dd>Uniform Resource Locator. This is the "web address" that we use to access websites.</dd>
			<dt>Web Site</dt>
			<dd>Compilation of web-based documents.</dd>
		</dl>

		<br><br><br><br><br>
		<small>© 2002 Devin</small>
	
	<!Created by Devin Smith 2002>
	</body>
</html>

See what this code does

Chapter 4: Gathering user input - Form

In order to gather data from a user you need to use what we call forms. Forms have multiple kinds of input types so that you can gather information correctly. When the user submits the form, you will need to capture the data from the form, which is beyond the scope of this tutorial. In PHP you can use the $_POST array to gather the information, or in javascript you can access the form items by using, for example, document.forms[0].elements[0].value.

FORM - A from that gets information from intups and sends it

<FORM> </FORM>

method - the method to send the data to the server (GET or POST. post is generaly associated with forms while get is associated with users entering urls into the browser, or links being clicked.)
```
<FORM method="post"> </FORM>
```
action - the page or URL to submit the data to. if none is set it will submit to the same page.
```
<FORM action="takemydata.php"> </FORM>
```

INPUT - Specifies a user input to send to a form. Requires one of the folowing types. All inputs must have a NAME tag in order for the server to know what it is.

radio - a selectable radio button. In order to use this element as intended, name radio buttons associated with it the same name.
```
<INPUT TYPE="radio" name="stuff">
```

text - a field to enter text

<INPUT TYPE="text" VALUE="Here is your text">

button - creates a button mainly used for javascript
```
<INPUT TYPE="button" VALUE="Press Me">
```

submit - submits the data in the current form

<INPUT TYPE="submit" VALUE="Press me to submit the form">

clear - clears all data in the current form

<INPUT TYPE="clear" VALUE="Clear everything">

image - Similar to button or submit but uses an image instead of the standard button
```
<INPUT TYPE="image" SRC="buttonimage.gif">
```
hidden - Creates a hidden field that the user cannot see
```
<INPUT TYPE="hidden" VALUE="secret">
```
checkbox - Creates a checkbox for the user to check.
```
<INPUT TYPE="checkbox">
```

SELECT - creates a dropdown menu for selectable options

<SELECT name="selector" size="1"> 
<OPTION value="123">Select me for 123</OPTION> 
<OPTION selected value="456">Select me for 456</OPTION> 
</SELECT>

TEXTAREA - creates an area in which text can be entered, modified, and submited.

<TEXTAREA> Some text can go here </TEXTAREA>

cols - Specifies the number of collums.
```
<TEXTAREA colls="150"> </TEXTAREA>
```
rows - Specifies the number of rows.
```
<TEXTAREA rows="100"> </TEXTAREA>
```

LABEL - Gives an element a label based on ID association. Great for radio inputs and checkboxes.

<INPUT TYPE="radio" name="stuff" id="stuff_a"><LABEL for="stuff_a">Click this text for A</LABEL>
<INPUT TYPE="radio" name="stuff" id="stuff_b"><LABEL for="stuff_b">Click this text for B</LABEL>

********************** <IFRAME> - displays a document inside another document

<IFRAME src=page.html width=100> </IFRAME>

<DIV> - creates a division separate from the document.

<DIV> </DIV>

position - Sets the position of the division.

<DIV align="center" POSITION: absolute; TOP: 336px; right: 15px"> </DIV>

Resources

There is always more to learn with HTML as with any programing. Knowing how the syntax and code compiles is essencial, but it's the techniques that make you a programer. Try new things, and push yourself. For more resources, check out some of these sites:

The World Wide Web Consortium (W3C)	Once you make code its time to perfect it. Research the correct ways to design certain types of code.
w3 Schools	Great resource with examples for HTML, PHP, CSS, and more. Includes examples, tutorials, and just about everything else.

Articles: HTML Tutorial

Contents

Introduction

Chapter 1: Setting up the document - The head

Chapter 2: The content - The body

Chapter 3: Organize data - Tables & Lists

Chapter 4: Gathering user input - Form

Resources