Site hosted by Angelfire.com: Build your free website today!

Some HTML:


Tags:


Tags are the html (hyper text markup language) code commands that makes the computer know what you want it to display on your page. All html command codes are put between less-than and greater-than( < >)symbols. Done properly, tag lines between these symbols(< >) shouldn't show up on your finished page.
Most 'tags' (code commands) have a beginning < and ending /> code. Codes such as the 'Center' command have to be ended or the remaining whole page will be centered, even if you don't want it to be.
So, to center something you would have to use these tags:
<center> and </center>

~~~~~~~~~~~~~~~~~~~~~~~

Headlines, Titles, & Font Sizes:



H1, H2, H3, H4, are the sizes of "Headlines" and by using these you will get very large bold text to smaller bold text.

Here is a sentence using H1 size text, then

switching to H2 size, which is smaller,

but not as small as H3, and not to be

confused with H4!


Those sizes are for use in titles, and whenever you want bolder text. They start out with the biggest being 1, and get smaller in ascending order.
Regular Font sizes start out with the smallest being 1 and get larger in ascending order. So a large font would be like a 4 or 5. (higher if you want)

Here is an example of font sizes:

SIZE 1:
abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ

SIZE 2:
abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ

SIZE 3:
abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ

SIZE 4:
abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ

SIZE 5:
abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ

SIZE 6:
abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ


You can see that size 6 is about as big as H1, but not as bold!
You can choose to make any word or phrase larger and bolder within a sentence by using font size tags, or a simpler way to do this is to just use the "bold" tag.
An example of the bold tag is in this sentence.

The tag for making things bold is simply <b> before the word and </b> after the word. It's simple.



~~~~~~~~~~~~~~~~~~~~~~~

HTML Chart:


CODE: <h1(or h2, etc)>
and</h1>
<font size=3(or any #)>and</font> <b>and</b> <i>and</i>
DEFINITON: to start and end headline text to start and end regular text sizes to make words bold to make words in italics
CODE: <br> <p>and</p> <center>and</center> <blockquote>and</blockquote>
DEFINITON: to make a line break, no need to 'end' this tag to make a new paragraph, skips a line to center things on a page to indent on both sides, can be used in multiples, but must also be ended in multiples
CODE: <table>and</table> <tr>and</tr> <td>and</td> align=
DEFINITON: to start and end a table to start and end a table row to start and end table data can be added inside a tag line to designate where a certain item will be situated on the page
CODE: <img align=right > <img align=left> <img align=center> <img align=top >
DEFINITON: aligns an image to the right margin aligns an image to the left margin (left alignment is default) aligns an item or text to the center aligns text to the top of an image
CODE: <img align=bottom> < border=3(or 0,1,2, etc.) > <html > <body>
DEFINITON: aligns an text to the bottom of an image makes a border around an image or table the larger the # the wider the border designates the beginning of a page that will be written in html code--begins ALL pages designates the beginning of the body of the page
CODE: <body text=?> <body link=?> <body vlink=?> <body alink=?>
DEFINITON: sets the font color sets the color you want the links sets the color of the visited links sets the color of the links when clicked
CODE: <font color=?> </font> </body> </html>
DEFINITON: changes the font color ends the font changes ends the body ends ALL pages
CODE: "#??????" <body background="name of an image"> <body background="#??????"> <ol></ol>
DEFINITON: color tag: all colors are designated by 6 letters/numbers or combinations of both to make the background of your page a picture to make the background of your page a color starts and ends an ordered (numbered) list
CODE: <li> <ul></ul>
DEFINITON: precedes each item in the list starts and ends an unumbered list
CODE:
DEFINITON:



~~~~~~~~~~~~~~~~~~~~~~~

Symbols Chart:


Below you will find a chart that shows how to get certain symbols to show up correctly on your page:

` - = [ ] \ ; * , . / ~ ! @ # $ % ^ ( ) _ + { } | : ? | " '

&

ampersand

<

less-than

>

greater-than

The characters above do not require encoding.
Cut and paste them at will.

&amp;

&lt;

&gt;







bottom single quote
ƒ

florin


bottom double quote


ellipses


dagger


double dagger
&#128;

&#129;

&#130;

&#131;

&#132;

&#133;

&#134;

&#135;

ˆ

carat


per mille
Š



left angle bracket
Œ

OE ligature


Ž



&#136;

&#137;

&#138;

&#139;
&gt;

&#140;
&OElig;

&#141;

&#142;

&#143;





left single quote


right single quote


left double quote


right double quote


bullet


n-dash


m-dash
&#144;

&#145;

&#146;

&#147;

&#148;

&#149;

&#150;

&#151;

˜

tilde


trademark
š



right angle bracket
œ

oe ligature


ž

Ÿ

Y with umlaut
&#152;
&tilde;

&#153;

&#154;

&#155;
&lt;

&#156;
&oelig;

&#157;

&#158;

&#159;

 

¡

inverted exclamation point
¢

cent
£

British pound
¤

currency
¥

Japanese yen
¦

§

section symbol
&#160;

&#161;
&iexcel;

&#162;
&cent;

&#163;
&pound;

&#164;
&curren;

&#165;
&yen;

&#166;

&#167;
&sect;

¨

umlaut/
diaresis
©

copyright
ª

feminine ordinal
«

double left angle brackets
¬

not
­

®

registration
¯

overline/
macron
&#168;
&uml;

&#169;
&copy;

&#170;
&ordf;

&#171;
&laquo;

&#172;
&not;

&#173;

&#174;
&reg;

&#175;
&macr;

°

degree
±

plus or minus
²

³

´

acute accent
µ

micro


paragraph
·

middle dot
&#176;
&deg;

&#177;
&plusmn;

&#178;

&#179;

&#180;
&acute;

&#181;
&micro;

&#182;
&para;

&#183;
&middot;

¸

cedilla
¹

º

masculine ordinal
»

double right angle brackets
¼

½

¾

¿

inverted question mark
&#184;
&cedil;

&#185;

&#186;
&ordm;

&#187;
&raquo;

&#188;

&#189;

&#190;

&#191;
&iquest;

À

A with grave accent
Á

A with acute accent
Â

A with circumflex
Ã

A with tilde
Ä

A with umlaut
Å

Angstrom
Æ

AE ligature
Ç

C with cedilla
&#192;
&Agrave;

&#193;
&Aacute;

&#194;
&Acirc;

&#195;
&Atilde;

&#196;
&Auml;

&#197;
&Aring;

&#198;
&AElig;

&#199;
&Ccedil;

È

E with
grave accent
É

E with
acute accent
Ê

E with circumflex
Ë

E with
umlaut
Ì

I with grave accent
Í

I with acute accent
Î

I with circumflex
Ï

I with umlaut
&#200;
&Egrave;

&#201;
&Eacute;

&#202;
&Ecirc;

&#203;
&Euml;

&#204;
&Igrave;

&#205;
&Iacute;

&#206;
&Icirc;

&#207;
&Iuml;

Ð

Ñ

N with tilde
Ò

O with grave accent
Ó

O with acute accent
Ô

O with circumflex
Õ

O with tilde
Ö

O with umlaut
×

&#208;

&#209;
&Ntilde;

&#210;
&Ograve;

&#211;
&Oacute;

&#212;
&Ocirc;

&#213;
&Otilde;

&#214;
&Ouml;

&#215;

Ø

O with slash
Ù

U with grave accent
Ú

U with acute accent
Û

U with circumflex
Ü

U with umlaut
Ý

Þ

ß

German es-zed ligature
&#216;
&Oslash;

&#217;
&Ugrave;

&#218;
&Uacute;

&#219;
&Ucirc;

&#220;
&Uuml;

&#221;

&#222;

&#223;
&szlig;

à

a with grave accent
á

a with acute accent
â

a with circumflex
ã

a with tilde
ä

a with umlaut
å

angstrom
æ

ae ligature
ç

c with cedilla
&#224;
&agrave;

&#225;
&aacute;

&#226;
&acirc;

&#227;
&atilde;

&#228;
&auml;

&#229;
&aring;

&#230;
&aelig;

&#231;
&ccedil;

è

e with grave accent
é

e with acute accent
ê

e with circumflex
ë

e with umlaut
ì

i with grave accent
í

i with acute accent
î

i with circumflex
ï

i with umlaut
&#232;
&egrave;

&#233;
&eacute;

&#234;
&ecirc;

&#235;
&euml;

&#236;
&igrave;

&#237;
&iacute;

&#238;
&icirc;

&#239;
&iuml;

ð

ñ

n with tilde
ò

o with grave accent
ó

o with acute accent
ô

o with circumflex
õ

o with tilde
ö

o with umlaut
÷

division
&#240;

&#241;
&ntilde;

&#242;
&ograve;

&#243;
&oacute;

&#244;
&ocirc;

&#245;
&otilde;

&#246;
&ouml;

&#247;
&divide;

ø

o with slash
ù

u with grave accent
ú

u with acute accent
û

u with circumflex
ü

u with umlaut
&#253;

&#254;

ÿ

y with umlaut
&#248;
&oslash;

&#249;
&ugrave;

&#250;
&uacute;

&#251;
&ucirc;

&#252;
&uuml;

&#253;

&#254;

&#255;
&yuml;




~~~~~~~~~~~~~~~~~~~~~~~

Making Links Work:


To make a working link on your page, you will need the following code:
<a href="http://www.xxxx.com">


Where xxxx is the address of the page you want to link to.
the whole code would look like this:
< a href="http://www.xxxx.com">A link to another place</a>

It is important that whenever you start a code line with <a you have to end it later with </a>. In the case of a link, you can put something between the last "> and the </a> and that writing, address, or graphic will become the link.
Examples:
Click here! Do it! it works!
The code line for that would look like this:
<a href="http://www.angelfire.com/ca/sewclass/bb.html">Click here!</a>


Click here!

Seriously, click on the heart, it works!
The code for this would look like this:
<a href="http://www.angelfire.com/ca/sewclass/bb.html">Click<img src="/ca/sewclass/images/heartanim.gif">here!</a>



~~~~~~~~~~~~~~~~~~~~~~~

Pictures & graphics


To put a picture into your website you must first have the picture uploaded to your file directory. Using Angelfire's free home pages, this is very easy. If you are not a member of Angelfire, you may have to use an FTP (file transfer protocol) server to upload pictures and graphics. This is a little trickier, but works. To download a free ftp server, go to download.com.
Once the picture is in your directory, you must write html (hyper transfer markup language) to make it stay where you want it on your page.
The html code for a picture or graphic would be:
<img src="http://www.OOOOOO/XXX/AAA.bbb">

To make this fit your picture make the following substitutions to this code:
1. OOOOOO/XXX = your directory URL or internet address (ex: www.angelfire.com)
2. AAA.= your picture's name as it is listed in your directory list (ex: garden.jpg)
3. bbb= your picture's format (ex: gif, tif, jpg or other)
So to put up this picture:



I would have to put in this code:

<img src="http://www.angelfire.com/ca/sewclass/images/aff.gif" align=left>



The code basically is telling the computer where to get the picture from, or it's 'source'. So img src= means "image source is" then the next part of the code tells the computer where that is, namely your image directory.
(in my case my URL:http://www.angelfire.com/ca/sewclass/images/)
The last part of the code is the actual name of the picture as it is called in your directory. (in this case aff.gif)