My HTML Cheatsheet

A Web page is simply a text file and it can be read by a program called a browser, which then creates a colorful interesting page according to the commands given to it. A Web site is many pages connected by links dealing with similar topics. HTML (Hyper Text Mark-up Language) is the most common language used in web page construction and is relatively simple.

An HTML file is made up of two things text and commands. Text is just written as it would be in a normal word processor but commands are contained inside tags (< >). The very first word following the first tag (<) is the command (ex. <font). Anything following this word, but still inside the same tags, is an option and is therefore optional (ex. ). You may include as little or as many options necessary with one command (ex. ). One space should be between the command and the first option and one between each option. All commands should be concluded after their use expires by rewriting only the command with a slash (ex. ) do not rewrite the options in the conclusion!

Example of commands: I just want my name to the color red and size 5 and the rest to

be normal.

My name is Jarrod Cook and I Live in Union City.

RESULT: (when viewing page in browser)

My name is Jarrod Cook and I live in Union City.

*Commands are sewn seamlessly into the page structure and the viewer will never see them, only the browser.

*There are two sections in a HTML file the heading and the body. The only thing the heading is used for is your title and for JavaScript (advanced language). All your content MUST go in the body are (between <body> and </body>).

Below is a list the commands you know so far and what they will do to the page.

The Command Sheet

Command & Conclusion	What it Does	Options	What the Option Does
<html></html>	tells the brower this is an html file IT SHOULD BE THE FIRST AND LAST THING ON YOUR PAGE.	none
<head></head>	This is to access the heading of your page and is mainly used for javascript purposes but you will need it if you want to include a title.	none
<title></title>	This must be put between the <head></head> and will whatever is between the <title></title> into the bar at the top of the browser	none
<body></body>	This will start the body (or main section) of your page. All your content will go between this and it should be ended right before </html>. This tag is used to declare page defaults for colors etc.	bgcolor=""	Makes the background color of the page whatever is between the quotes
		background=""	Makes the background image of the page whatever is between the quotes (ex. Imagefolder/pic.gif).
		text=""	Sets the default text color of the entire page which means text not modified by <font> commands will be this color.
		link=""	Sets the color of links on the page.
		alink=""	Sets the color of the links when the mouse is run over them.
		vlink=" "
		bgsound=""
<h1></h1> (<h2>,<h3>,…etc.)	Automatically reformat the text into a big bold size to avoid using the <font> command. <h1>-<h7> may be used and the text in between will be resized.
<tt></tt>	creates a typewriter effect of the text in between	none
<b></b>	bolds the text in between	none
<I></I>	italicizes the text in between	none
<u></u>	underlines the text in between	none
<font></font>	Access font options	color=""	Changes the font color of the text between the command and conclusion to the color between the quotes.
		size=""	Changes the size of the text between the command and conclusion to the size specified between the quotes (1-7).
		face=""	Changes the font of the the text between the command and conclusion to the font specified between the quotes (ex. <font face="Comic Sans MS">Comic text</font>).
<strike></strike>	Puts a line through the text in between.	none
<sup></sup>	Superscripts the text in between.
<sub></sub>	Subscripts the text in between.
<br>	Returns one line	none
<p></p>	Returns a couple lines (good for starting new paragraphs). The conclusion is only necessary when including the align option.	align=""	tells how the text should be positioned (center, left, right, justify).
<center></center>	centers the text in between	none
<div></div>	Used to access text positioning	align=""	tells how the text should be positioned (center, left, right, justify).
<ul></ul>	declares a bulleted list	type=""	changes the bullet type (round, square, etc.)
<ol></ul>	declares a numbered list	start=""	Tells where the list should start (4,1,2,a,d,m,etc…)
<li>	MUST BE BETWEEN <ul> AND </ul> OR <ol> AND </ol>. They create a bullet or number for an item (no conclusion necessary)	none
<img>	a command used to access images (does nothing without options) it needs no conclusion.	src=""	This declares the path of the image to be put in that spot on the page (ex. <img src="imagefolder/photo.jpg">)
		border=""	Used to put a border around the image, the higher the number the thicker the border.
		align=""	tells the browser how text located beside the image should be place in reference to the image (left, right, center)
		width=""	can resize the image either in pixels or in percentage (<img src="imagefolder/photo.jpg" width="50"> or <img src="imagefolder/photo.jpg" width="75%">).
		height=""	can resize the height of the image the same way as width.
<a></a>	used to create links to other places.	href=""	Links to the page contained in the quotes (ex. <a href="http://www.google.com">a cool search engine</a>).
		name=""	used for anchors on the same page (this topic will be covered later in the year).

Created by Jarrod Cook

What it Does

Options

What the Option Does