Legendary HTML Cheat Sheet – Part One

RESOURCES

LIPSUM IPSUM GENERATOR for latin temporary website text:
http://www.lipsum.com/feed/html

COLOR WHEEL:
http://ficml.org/jemimap/style/color/wheel.html

PANTONE 2013 BOOK:
http://www.pantone.com/pages/fcr.aspx?pg=21057&ca=4&from=hpfeatures

FONTS:
www.dafont.com

ICONS:
http://www.iconspedia.com/

IMAGES:
www.sxc.hu

BASIC CODE:

CODES FOR GETTING SYMBOLS TO APPEAR.
http://www.ascii.cl/htmlcodes.htm

Add hypostrophe for Jeremy’s name or special need!
' to add ‘

When needing space in between images or lines!
Add blank space
Insert “ ”

____     space
! ____ !    exclamation point
” ____ "    double quotes (")
# ____ #    number sign
$ ____ $   dollar sign
% ____ %    percent sign
& ____ &   ampersand   (&)
‘ ____ '    single quote *** Na’Amat
( ____ (    opening parenthesis
) ____ )    closing parenthesis
* ____ *    asterisk
+ ____ +    plus sign
,____ ,    comma
– ____ -    minus sign- hypen
. ____.   period
/ ____/  slash

Inserting hyperlinks:
Links to other pages (visible):
http://www.broekmancomm.com
<a href=“http://www.broekmancomm.com”>http://www.broekmancomm.com</a>

Links to other pages (hidden):
Sign up now!
<a href=“http://www.broekmancomm.com/logo-request-form”>Hire Me Now!</a>

Click here!
<a href=“http://www.broekmancomm.com/contact/coachingconsulting-request-form/”>Click here!</a>

Inserting graphics:
Can put image on page using IMG tag and specifying where the image source is located in SRC attribute:

To insert this image:
bclogo

This is the code:

<img src=“http://broekmancomm.com/wp-content/uploads/2011/11/bclogo.png”>


Working with text:
Change font to Serif: <FONT FACE=“Serif”>
*Change font to Sans: <FONT FACE=“Sans-Serif”>
Change font to Arial: <FONT FACE=“Arial”>
Change font to Helvetica: <FONT FACE=“Helvetica”>
*Change font to Verdana: <FONT FACE=“Verdana”>
*Change font to Times NR: <FONT FACE=“Time New Roman”>

Customizing Text:

Bold text: <B>[insert text.]</B>
Italicized text: <I>[insert text.]</I>
Underlined text: <U>[insert text.]</U>

Text/Font Color:
To red or “#FF0000” text: <FONT COLOR=“RED”>[insert text]</FONT>
Green “#00FF00” text: <FONT COLOR=“GREEN”>[insert text]</FONT>
To blue or “#0000FF” text: <FONT COLOR=“BLUE”>[insert text]</FONT>

Placement of text:
Centered text: <DIV ALIGN=“center”>[insert text]</DIV>
Right aligned text: <DIV ALIGN=“right”>[insert text]</DIV>
Left aligned text: <DIV ALIGN=“left”>[insert text]</DIV>

Separating sections of text:
Inserting line btwn text:     [1st sentence above line]. <HR>[ 2nd sentence below line].
With bigger line btwn text:   [insert 1st sentence]. <HR SIZE=10>[insert 2nd sentence].
Thin line in center: [insert 1st sentence]. <HR WIDTH=50%>[2nd sentence].

Including headlines:
Headline 1: <h1>Welcome to Broekman Communications!</h1>
Headline 2: <h2>Welcome to Broekman Communications!</h2>
Headline 3: <h3>Welcome to Broekman Communications!</h3>
Headline 4: <h4>Welcome to Broekman Communications!</h4>

Background color:
Change color: <BODY BGCOLOR=“[insert color chart number]”>
Enter name “red”: BLACK, BLUE, CYAN, DARK GREEN, GOLD, GRAY, GREEN, LIME, MAGENTA, PLUM, RED, SALMON,
Or hexadecimal value: SILVER, WHITE

Numbered, bulleted, definition, compacted or nested list:
Numbered list: <OL>
<LI>[insert first element]
<LI>[insert second element]
<LI>[insert third element]
</OL>

Bulleted list: <UL>
<LI>[insert first bullet]
<LI>[insert second bullet]
<LI>[insert third bullet]
</UL>

Inserting quotes:
<BLOCKQUOTE>
<P>Omit needless words.</P>
<P>Vigorous writing is concise. A sentence should
contain no unnecessary words, a paragraph no unnecessary
sentences, for the same reason that a drawing should have
no unnecessary lines and a machine no unnecessary parts.
</P>
–William Strunk, Jr., 1918
</BLOCKQUOTE>

Output:

Omit needless words.
Vigorous writing is concise. A sentence should contain no unnecessary words, a paragraph no unnecessary sentences, for the same reason that a drawing should have no unnecessary lines and a machine no unnecessary parts.
–William Strunk, Jr., 1918

Inserting “main html tags” of page:

<HTML>

<HEAD>

<TITLE>

<META name=“description ” content= “Broekman Communications aims to provide consulting services to organizations that are interested in developing & employing an active marketing campaign and seek to improve sales, increase revenue & market share,  launch a new product/service, improve brand image, and establish a new logo/brand management campaign.”>

<META name “keywords “ content= “marketing, communications, public relations, brand management, consulting, services, sales, revenues, market share, product launch, brand campaign, brand image, brand marketing, marketing communications, logo campaign.”>

</HEAD>

<BODY>

Page content goes here.

</BODY>

 

Inserting “title tag”:

<HTML>

<HEAD>

<TITLE>Broekman Communications: Marketing, Communications & Strategic Planning advice</TITLE>

Page content goes here:

Inserting meta tags:

<TITLE>

<META name=“description ” content= “Broekman Communications aims to provide consulting services to organizations that are interested in developing & employing an active marketing campaign and seek to improve sales, increase revenue & market share,  launch a new product/service, improve brand image, and establish a new logo/brand management campaign.”>

<META name “keywords “ content= “marketing, communications, public relations, brand management, consulting, services, sales, revenues, market share, product launch, brand campaign, brand image, brand marketing, marketing communications, logo campaign.”>

</HEAD>

<BODY>

Page content goes here.

</BODY>

<html> Indicates HTML file </html>

<head> Page header </head>

<title> Page title <title>Title</title

<body>

 

<h1> Big text <h1>This is big!</h1>

<h2> Smaller text header <h2>This is medium!</h2>

<p> Paragraph text block <p>This is paragraph text!</p>

<i> Italicizes text <p><i>Italics!</i></p>

<b> Bolds text <p><b>Bold!</b></p>

<u> Underlines text <p><u>Underline!</u></p>

 

To center align a paragraph:

<p align=”center”>This is centered</p>

 

To center align a header:

<h1 align=”center”>This is centered</h1>

 

To insert a link:

<a href=”url”>Name of Link</a>

 

… of the English dept:

<a href=”http://www.english.ucsb.edu”>English Dept.</a>

 

To insert an image from the internet:

<img src=”url”>

 

… of the English dept’s banner:

<img src=”http://www.english.ucsb.edu/gfx/home-header.jpg”>

 

To insert a thumbnail image:

<img src=”url”  width=”50” height=”60”>

 

To insert a linked thumbnail image:

<a href=”url”>   <img src=”url”  width=”50” height=”60”>  </a>

 

… of the English dept.’s banner

<a href=”http://www.english.ucsb.edu/gfx/home-header.jpg>

<img src=”http://www.english.ucsb.edu/gfx/home-header.jpg”

width=”80” height=”30”>

</a>

 

MORE CODE – REPEATS:

<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

<h1></h1>

Creates the largest headline

<h2>  thru <h5> – various sizes

<h6></h6>

Creates the smallest headline

<b></b>

Creates bold text

<i></i>

Creates italic text

<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

 

FORMATTING

<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

<ol></ol>

Creates a numbered list

<li>

Precedes each list item and adds a number

<ul></ul>

Creates a bulleted list

<li>

Precedes each list item and adds the bullet

<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

 

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 (default=1)

<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>

Precedes 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 width

<frameset cols=”value,value”>

Defines the columns within a frameset, using number in pixels or percentage of width

<frame>

Defines a single frame 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 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 scroll bar; value may equal “yes,” “no,” or “auto.” (The default, as in ordinary documents, is auto.)

<frame noresize>

Prevents the user from resizing a frame