Introduction: Basic HTML Code Cheat Sheet

Nothing fancy here, just plain and to the point HTML code you can use as a quick reference for future lessons I will make, or on your own projects.

Follow along as we dig deeper into the backbone of the Internet.

Table of Contents:

Basic HTML code cheat sheet
Build a professional website: Part 1
Build a professional website: Part 2
Build a professional website: Part 3 CSS

Step 1: Most Common HTML Code

Basic Tags
<html></html>
Creates an HTML document
<head></head>
Sets off the title and other information that isn't displayed on the Web page itself
<body></body>
Sets off the visible portion of the document

Header Tags
<title></title>
Puts the name of the document in the title bar

Body Attributes
<body bgcolor=?>
Sets the background color, using name or hex value
<body text=?>
Sets the text color, using name or hex value
<body link=?>
Sets the color of links, using name or hex value
<body vlink=?>
Sets the color of followed links, using name or hex value
<body alink=?>
Sets the color of links on click

Text Tags
<pre></pre>
Creates preformatted text
<hl></hl>
Creates the largest headline
<h6></h6>
Creates the smallest headline
<b></b>
Creates bold text
<i></i>
Creates italic text
<tt></tt>
Creates teletype, or typewriter-style text
<cite></cite>
Creates a citation, usually italic
<em></em>
Emphasizes a word (with italic or bold)
<strong></strong>
Emphasizes a word (with italic or bold)
<font size=?></font>
Sets size of font, from 1 to 7)
<font color=?></font>
Sets font color, using name or hex value

Links
<a href="URL"></a>
Creates a hyperlink
<a href="mailto:EMAIL"></a>
Creates a mailto link
<a name="NAME"></a>
Creates a target location within a document
<a href="#NAME"></a>
Links to that target location from elsewhere in the document

Formatting
<p></p>
Creates a new paragraph
<p align=?>
Aligns a paragraph to the left, right, or center
<br>
Inserts a line break
<blockquote>
</blockquote>
Indents text from both sides
<dl></dl>
Creates a definition list
<dt>
Precedes each definition term
<dd>
Precedes each definition
<ol></ol>
Creates a numbered list
<li></li>
Precedes each list item, and adds a number
<ul></ul>
Creates a bulleted list
<div align=?>
A generic tag used to format large blocks of HTML, also used for stylesheets

Graphical Elements
<img src="name">
Adds an image
<img src="name" align=?>
Aligns an image: left, right, center; bottom, top, middle
<img src="name" border=?>
Sets size of border around an image
<hr>
Inserts a horizontal rule
<hr size=?>
Sets size (height) of rule
<hr width=?>
Sets width of rule, in percentage or absolute value
<hr noshade>
Creates a rule without a shadow

Tables
<table></table>
Creates a table
<tr></tr>
Sets off each row in a table
<td></td>
Sets off each cell in a row
<th></th>
Sets off the table header (a normal cell with bold, centered text)

Table Attributes
<table border=#>
Sets width of border around table cells
<table cellspacing=#>
Sets amount of space between table cells
<table cellpadding=#>
Sets amount of space between a cell's border and its contents
<table width=# or %>
Sets width of table  in pixels or as a percentage of document width
<tr align=?> or <td align=?>
Sets alignment for cell(s) (left, center, or right)
<tr valign=?> or <td valign=?>
Sets vertical alignment for cell(s) (top, middle, or bottom)
<td colspan=#>
Sets number of columns a cell should span
<td rowspan=#>
Sets number of rows a cell should span (default=1)
<td nowrap>
Prevents the lines within a cell from being broken to fit

Frames
<frameset></frameset>
Replaces the <body> tag in a frames document; can also be nested in other framesets
<frameset rows="value,value">
Defines the rows within a frameset, using number in pixels, or percentage of w idth
<frameset cols="value,value">
Defines the columns within a frameset, using number in pixels, or percentage of width
<frame>
Defines a single frame  or region  within a frameset
<noframes></noframes>
Defines what will appear on browsers that don't support frames

Frames Attributes
<frame src="URL">
Specifies which HTML document should be displayed
<frame name="name">
Names the frame, or region, so it may be targeted by other frames
<frame marginwidth=#>
Defines the left and right margins for the frame; must be equal to or greater than 1
<frame marginheight=#>
Defines the top and bottom margins for the frame; must be equal to or greater than 1
<frame scrolling=VALUE>
Sets whether the frame has a scrollbar; value may equal "yes," "no," or "auto." The default, as in ordinary documents, is auto.
<frame noresize>
Prevents the user from resizing a frame

Forms
For functional forms, you'll have to run a CGI script. The HTML just creates the appearance of a form.
<form></form>
Creates all forms
<select multiple name="NAME" size=?></select>
Creates a scrolling menu. Size sets the number of menu items visible before you need to scroll.
<option>
Sets off each menu item
<select name="NAME"></select>
Creates a pulldown menu
<option>
Sets off each menu item
<textarea name="NAME" cols=40 rows=8>

Step 2: Most Common Color Codes

Comments

author
Zereagon (author)2009-11-06

HTML - Hyper Text Markup Link

CSS - Cascading Style Sheet

author
Prof. Pickle (author)Zereagon2012-12-25

CSS - Cascade Style Sheet*

author
fwjs28 (author)2009-03-09

i just *LEGALLY* got my hands on a copy of dreamweaver and i need some help, how to you add an image (total noob here :P )

author
ReCreate (author)fwjs282009-08-17

Dreamweaver is a bit overboard for a beginner...

author
fwjs28 (author)ReCreate2009-08-17

a bit, more like slaughter

author
BOOM5601 (author)fwjs282009-08-29

Play with flash first.

author
fwjs28 (author)BOOM56012009-08-30

()

author
htmlinc (author)fwjs282009-03-09

I assume you have the site added in manage sites, if not do that first. Open your page, view it in split (button up top a few rows down), place your cursor on the page where you want the picture, click insert from the top (or shortcut keys: ctrl=alt=i), click image, enter alt text if you want and click OK. Should be good to go.

I like the *LEGALLY* comment, makes me feel like I am behind the mall looking at watches in someones coat... =()

Have fun with DW, I love it!

author
fwjs28 (author)htmlinc2009-03-09

im ok...thats ummm....yea... i just want to add
a color to this....where do i put the background code color?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>RAWRz</title>
</head>

<body> Im a lion
</body>
<img src="https://www.instructables.com/files/deriv/FOI/P4EJ/FD80X5Q0/FOIP4EJFD80X5Q0.MEDIUM.gif" />
</html>

author
htmlinc (author)fwjs282009-03-09

Without using CSS, the quick and easy is to change the <body> to: <body bgcolor="#ff6600">

If you are using IE or FF you can paste your code here and see it live: http://www.htmlinc.com/lessons/pagebuilder.php

author
fwjs28 (author)htmlinc2009-03-10

huzzah! thank you very much !

author
htmlinc (author)fwjs282009-03-10

You are very welcomed!

author
fwjs28 (author)htmlinc2009-03-09

i figured out the pic...ty

author
fwjs28 (author)htmlinc2009-03-09

yea....well, it was my friends, and he got it from a friend who knows a guy in Japan who knows the producer of the software and he gave him a *free* copy :P

author
ReCreate (author)2009-05-31

H.T.M.L - How To Make Lemons

author
htmlinc (author)ReCreate2009-05-31

Thats funny...

author
ReCreate (author)htmlinc2009-05-31

Hah,Yeah,Laugh out loud :P

author
will421 (author)ReCreate2009-06-15

H.T.M.L - Hit The Moron named Link

author
htmlinc (author)will4212009-06-15

I wonder how many there are? =)

author
badride5 (author)htmlinc2009-08-18

Looks like a contest to me! =) Who can come up with the funniest "relevant" acronym?

author
ReCreate (author)will4212009-06-15

...That one is not valid, It has one word that is not included.

author
carrotman42 (author)ReCreate2009-08-17

H.T.M.L - Hit The Moron Link!!!!

author
ReCreate (author)carrotman422009-08-17

Umm...no...

author
will421 (author)ReCreate2009-06-18

C.S.S Create Singing Stuff?

author
ReCreate (author)will4212009-06-18

...makes no sense...

author
fwjs28 (author)2009-03-17

how do you embed an image as the background?

author
htmlinc (author)fwjs282009-03-17

<body background="picture.jpg">

author
fwjs28 (author)htmlinc2009-03-17

ty

About This Instructable

42,595views

37favorites

License:

Bio: I am just like you except different... =)
More by htmlinc:Build a professional website: Part 3 CSSBuild a professional website: Part 2Basic HTML code cheat sheet
Add instructable to: