HTML PAGE DESIGN LINKS
html page design
Basic html forms
Text and font tags
html tables
Image tags
JavaScript
Web hosting
Free tracking
Free traffic
Free banner ads




ON THIS PAGE
color codes
special characters








Basic HTML tags and web page design


This site explains html basics and web site page layout using html tags.
Without getting to technical. This site is a great guide for first time webmasters.
A quick easy HTML reference guide for page design:
The Quick links on the top left menu on this page
will take you to more detailed information.
The charts below contain:
HTML common tags reference guides with html tag format and attributes.
Html example tags for basic page design and html tags for page tables
using columns and rows.
Find tags for inserting images , background images and ads into your web pages
Code for linking with images or text links.
Html common color codes and special characters
Working with images and image tags
HTML Description Web Site HTML Page Code Example Browser Displays
<!-- --> comment <!--This Tag is for personal helpful remarks in HTML code --> Browser will show nothing
<HTML> hypertext
markup
language
 <HTML> <Head><Title></Title><Meta></Head>
<!--START THE BODY OF MY PAGE -->
<Body><Table><Caption>My Page </Caption>
<TR><TD>My Basic Page <BR>
Text here <BR><BR> End first table row
</TD></TR>
<TR><TD>2nd Row image <BR>
<IMG></TD></TR>
</Table></Body></HTML>
My Page
My Basic Page
Text here

End first table row
2nd Row image
Game Link
<HEAD> head <HEAD>Surrounds Title and meta tags. Can contain CSS classes links & script</HEAD> Browser displays nothing
<TITLE> title <TITLE>Title of your page</TITLE> Displays in title bar
<META> meta <META name="Description"content="Description of your site"> Browser displays nothing
<META> meta <META name="keywords" CONTENT="keyword,keyword"> Browser displays nothing
<META> meta <META name="robots" CONTENT="FOLLOW,INDEX"> Browser displays nothing
<BODY> body <BODY>Contains All HTML code for your page content</BODY> Your Web Page
<BR> break Breaks to next line<BR>text or images Breaks to next line
text or images
<B> bold <B>Makes Text Bold</B> Makes Text Bold
<CENTER> center <CENTER>Centers text and images</CENTER>
Centers text and images
<FONT> font <FONT FACE="Courier">Courier Font</FONT> Courier Font
<FONT> font <FONT COLOR="FF0000">Red Text</FONT> Red Text
<FONT> font <FONT SIZE="4">Size 4</FONT> Size 4
<FONT color="green" face="courier" size="1">In 1 tag color,face,size</FONT> In 1 tag color,face,size
HTML Description HTML Code Example Browser Displays
<HR> horizontal
rule		 <HR>
<HR> horizontal
rule		 <HR WIDTH="50%" SIZE="3">
<HR> horizontal
rule		 <HR WIDTH="50%" SIZE="3" NOSHADE>
<HR> horizontal
rule		 <HR COLOR="RED" WIDTH="75%" ALIGN="left" SIZE="3">
<IMG src="" image



 <IMG src="imagefolder/imagefile.jpg or .gif">
Inserts image into your page		 Game Link
<IMG src="" image



 <IMG src="folder/file.jpg" width="100" height="40">
sets size and inserts image into your page		 Game Link
<IMG src="" image



 <IMG src="http//:www.domain/folder/file.jpg" border="5">
sets border size and inserts remote image into your page		 Game Link
<A href="" >
<IMG src=""		 image



 <A HREF="http://gamesites.iwarp.com">
<IMG src="http//:www.domain/folder/file.jpg" border="0">
</A>
inserts remote image link into your page		 Game Link
<A href="" > anchor <A HREF="http://gamesites.iwarp.com">75% OFF Inkjets</A>
inserts text link to Url into your page		 Great Games !
<MARQUEE> marquee <MARQUEEbgcolor="#FFFF00" loop="-1" scrollamount="2" width="100%">Play Games Online !</MARQUEE> Play Games Online !
HTML Description HTML Code Example Browser Displays
<BIG> big text <BIG>Displays big text</BIG> Displays big text
<I> italic <I>Makes italic text</I> Makes italic text
<UL> unordered
list		 <UL>
<LI>apples
<LI>oranges
</UL>
  • apples
  • oranges
<OL> ordered
list		 <OL>
<LI>apples
<LI>oranges
</OL>
  1. apples
  2. oranges
<TABLE>
<TD>
<TR>
 table
table data
table row
 <TABLE border="1">
<TR><TD>Row 1
</TD></TR>
<TR><TD>Row 2
</TD></TR>
</TABLE>
Row 1
Row 2
<TABLE>
<TD>
<TR>
 table
table data
table row
 <TABLE border="1">
<TR><TD>Col 1 </TD>
<TD>Col 2 </TD></TR>
<TR><TD>Col 1 </TD>
<TD>Col 2 </TD></TR>
</TABLE>
Col 1 Col 2
Col 1 Col 2


COMMON HTML COLOR AND CHARACTER CODES
In the below reference chart are the 16 basic html color names and codes.
When writing html tags you can use the color name or hexadecimal code in each box
to get the html background color it represents.
When starting out keep your colors simple all computers don't see colors the same way.
This is an example of html code that changes a font color to red.
HTML Example with name:< font color ="red">RED< / font >
Or HTML with code:< font color ="#FF0000">RED< / font >
Your result would be RED
Back to top of page
Quick chart for color names and html hexadecimal color codes
White #FFFFFF Black #000000 Gray #808080 Silver #C0C0C0
Red #FF0000 Purple #800080 Maroon #800000 Fuchsia #FF00FF
Blue #0000FF Navy #000080 Teal #008080 Aqua #00FFFF
Green #008000 Olive #808000 Lime #00FF00 Yellow #FFFF00
Special HTML characters used in web site design
Listed below are some of the more common html special character codes.
These special characters can't be typed directly into html pages.
They are not on your keyboard and must be html coded.
In this reference chart you will find the html code for the special symbols
temperature degree symbol,e acute,copyright symbol,registered and trade mark symbols.
The micro sign , paragraph sign and the cent sign.
The html code format for these symbols is as follows.
FORMAT: the ampersand (&) followed by the alpha code and then a semicolon ( ; )
OR the ampersand (&) followed by the number sign (#) then numeric code then a semicolon.
EXAMPLE: The trade mark ™
 CODE: &trade; or &# 8482;
Quick chart HTML code for special characters not on your keyboard
Back to top of page
°
Temperature degrees °
CODE: &deg; or &#176;		 é
e acute symbol é
CODE: &eacute; or &#233;		 ©
copyright symbol ©
CODE: &copy; or &#169;		 ®
Registered symbol ®
CODE: &reg; or &#174;
™
Trade Mark ™
CODE: &trade; or &#8482;		 µ
Micro sign µ
CODE: &micro; or &#181;
paragraph sign ¶
CODE: &para; or &#182;		 ¢
Cent sign ¢
CODE: &cent; or &#162;
÷
Division sign ÷
CODE: &divide; or &#247;		 £
Pound sterling £
CODE: &pound; or &#163;		 ¥
Yen sign ¥
CODE: &yen; or &#165;		 ±
Plus or minus ±
CODE: &plusmn; or &#177;
§
Section sign §
CODE: &sect; or &#167;		 ñ
Small n tilde ñ
CODE: &ntilde; or &#241;		 ¬
Not sign ¬
CODE: &not; or &#172;		 ß
sz ligature ß
CODE: &szlig; or &#223;
In the chart below is HTML code for special characters used by HTML tags
These special characters may be mistaken for html tag code if they are typed into your html pages.
The html code format for these symbols is as follows.
FORMAT: the ampersand (&) followed by the alpha code and then a semicolon ( ; )
OR the ampersand (&) followed by the number sign (#) then numeric code then a semicolon.
EXAMPLE: Less-than sign <
 CODE: &lt; or &# 60;
HTML code for special characters used by HTML tags
<
Less-than sign <
CODE: &lt; or &#60;		 >
Greater-than sign >
CODE: &gt; or &#62;		 &
ampersand &
CODE: &amp; or &#38;		 "
double quotation "
CODE: &quot; or &#34;
HELPFUL LINKS FOR YOUR WEBSITE


Copyright © FunwithyourPC
Contact Us
Privacy Policy