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