BLUE's learning

2011-01-02T09:41:00.002+08:00

Frames - Vertical & Horizontal

2010-02-18T18:39:00.001+08:00

In the previous topic, we learned about frames.
now we would like to have a veritcal or a horizontal frame.
It's easy. just imagine you are adjusting some sizes to balance.

For Vertical Frames, insert in the frame the cols or know as columns, and it's width percentage:

<frameset cols="20%,35%,45%">
  <frame src="(your source)">
  <frame src="(your source)">
  <frame src="(your source)">
</frameset>

This Shows Us:

Horizontal Frames
Insert the rows in the frameset tag and the percentage to adjust the height of each frames.

<frameset rows="35%,15%,15%,35%">
  <frame src="(your source)">
  <frame src="(your source)">
  <frame src="(your source)">
  <frame src="(your source)">
</frameset>

Shows:

If you did not enter the frames percentage, the frame would not show.
Same as if you did not enter the source but has percentage,
a blank spot would be shown.

Frames

2010-02-18T18:02:00.000+08:00

Frames are use to display more than one webpage in your browser.
It is like you can set more than 1 background in a page.
Some of the browser does not support frames.

Tags Used in Frame:

<frameset> use to define the frames in the window.

<frame> use to define what page or source of your frames.

<noframes> use to define the name of your frame when the browser does not support it. like the "alt" funtion in images.

<iframe> use to define the inline window. it shows another window inside your window.

Colors - Name

2010-02-16T14:37:00.002+08:00

Color	Color Name	HEX
	AliceBlue	#F0F8FF
	AntiqueWhite	#FAEBD7
	Aqua	#00FFFF
	Aquamarine	#7FFFD4
	Azure	#F0FFFF
	Beige	#F5F5DC
	Bisque	#FFE4C4
	Black	#000000
	BlanchedAlmond	#FFEBCD
	Blue	#0000FF
	BlueViolet	#8A2BE2
	Brown	#A52A2A
	BurlyWood	#DEB887
	CadetBlue	#5F9EA0
	Chartreuse	#7FFF00
	Chocolate	#D2691E
	Coral	#FF7F50
	CornflowerBlue	#6495ED
	Cornsilk	#FFF8DC
	Crimson	#DC143C
	Cyan	#00FFFF
	DarkBlue	#00008B
	DarkCyan	#008B8B
	DarkGoldenRod	#B8860B
	DarkGray	#A9A9A9
	DarkGreen	#006400
	DarkKhaki	#BDB76B
	DarkMagenta	#8B008B
	DarkOliveGreen	#556B2F
	Darkorange	#FF8C00
	DarkOrchid	#9932CC
	DarkRed	#8B0000
	DarkSalmon	#E9967A
	DarkSeaGreen	#8FBC8F
	DarkSlateBlue	#483D8B
	DarkSlateGray	#2F4F4F
	DarkTurquoise	#00CED1
	DarkViolet	#9400D3
	DeepPink	#FF1493
	DeepSkyBlue	#00BFFF
	DimGray	#696969
	DodgerBlue	#1E90FF
	FireBrick	#B22222
	FloralWhite	#FFFAF0
	ForestGreen	#228B22
	Fuchsia	#FF00FF
	Gainsboro	#DCDCDC
	GhostWhite	#F8F8FF
	Gold	#FFD700
	GoldenRod	#DAA520
	Gray	#808080
	Green	#008000
	GreenYellow	#ADFF2F
	HoneyDew	#F0FFF0
	HotPink	#FF69B4
	IndianRed	#CD5C5C
	Indigo	#4B0082
	Ivory	#FFFFF0
	Khaki	#F0E68C
	Lavender	#E6E6FA
	LavenderBlush	#FFF0F5
	LawnGreen	#7CFC00
	LemonChiffon	#FFFACD
	LightBlue	#ADD8E6
	LightCoral	#F08080
	LightCyan	#E0FFFF
	LightGoldenRodYellow	#FAFAD2
	LightGrey	#D3D3D3
	LightGreen	#90EE90
	LightPink	#FFB6C1
	LightSalmon	#FFA07A
	LightSeaGreen	#20B2AA
	LightSkyBlue	#87CEFA
	LightSlateGray	#778899
	LightSteelBlue	#B0C4DE
	LightYellow	#FFFFE0
	Lime	#00FF00
	LimeGreen	#32CD32
	Linen	#FAF0E6
	Magenta	#FF00FF
	Maroon	#800000
	MediumAquaMarine	#66CDAA
	MediumBlue	#0000CD
	MediumOrchid	#BA55D3
	MediumPurple	#9370D8
	MediumSeaGreen	#3CB371
	MediumSlateBlue	#7B68EE
	MediumSpringGreen	#00FA9A
	MediumTurquoise	#48D1CC
	MediumVioletRed	#C71585
	MidnightBlue	#191970
	MintCream	#F5FFFA
	MistyRose	#FFE4E1
	Moccasin	#FFE4B5
	NavajoWhite	#FFDEAD
	Navy	#000080
	OldLace	#FDF5E6
	Olive	#808000
	OliveDrab	#6B8E23
	Orange	#FFA500
	OrangeRed	#FF4500
	Orchid	#DA70D6
	PaleGoldenRod	#EEE8AA
	PaleGreen	#98FB98
	PaleTurquoise	#AFEEEE
	PaleVioletRed	#D87093
	PapayaWhip	#FFEFD5
	PeachPuff	#FFDAB9
	Peru	#CD853F
	Pink	#FFC0CB
	Plum	#DDA0DD
	PowderBlue	#B0E0E6
	Purple	#800080
	Red	#FF0000
	RosyBrown	#BC8F8F
	RoyalBlue	#4169E1
	SaddleBrown	#8B4513
	Salmon	#FA8072
	SandyBrown	#F4A460
	SeaGreen	#2E8B57
	SeaShell	#FFF5EE
	Sienna	#A0522D
	Silver	#C0C0C0
	SkyBlue	#87CEEB
	SlateBlue	#6A5ACD
	SlateGray	#708090
	Snow	#FFFAFA
	SpringGreen	#00FF7F
	SteelBlue	#4682B4
	Tan	#D2B48C
	Teal	#008080
	Thistle	#D8BFD8
	Tomato	#FF6347
	Turquoise	#40E0D0
	Violet	#EE82EE
	Wheat	#F5DEB3
	White	#FFFFFF
	WhiteSmoke	#F5F5F5
	Yellow	#FFFF00
	YellowGreen	#9ACD32

Colors - Basic

2010-02-16T13:18:00.002+08:00

Here are some basic colors.
You can make this example table via what you learned about tables.
We do need some coloring if you want your page to look professional.

Basic Colors

Color	Color HEX	Color RGB
	#000000	rgb(0,0,0)
	#FF0000	rgb(255,0,0)
	#00FF00	rgb(0,255,0)
	#0000FF	rgb(0,0,255)
	#FFFF00	rgb(255,255,0)
	#00FFFF	rgb(0,255,255)
	#FF00FF	rgb(255,0,255)
	#C0C0C0	rgb(192,192,192)
	#FFFFFF	rgb(255,255,255)

Definition List

2010-02-12T14:00:00.000+08:00

This is just like the Ordered and Unordered list
It just do automatic seperation
dl = defines definition list
dt = defines a term
dd = defines description of a term

<dl>
<dt>Chef</dt>
  <dd>prepares the ingredients</dd>
  <dd>cooks the foods</dd>
  <dd>eats the servings</dd>
<dt>Janitor</dt>
  <dd>wipe windows</dd>
  <dd>wash mop</dd>
  <dd>clean room
<dt>Farmer<dt>
  <dd>Plow</dd>
  <dd>Harvest</dd>
  <dd>Plant</dd>
</dl>

Ordered List & Unordered List - Expansion

2010-02-12T13:35:00.000+08:00

You can expand even more the OL/UL

<ol type="I">
<li>Eat</li>
  <ol type="a">
   <li>breakfast</li>
   <li>lunch</li>
   <li>dinner</li>
  </ol>
<li>Sleep</li>
<li>Work</li>
</ol>

<ul>
<li>Eat</li>
<li>Sleep</li>
<ul>
   <li>on bed</li>
   <li>on sofa</li>
   <li>on floor</li>
  </ul>
<li>Work</li>
</ul>

<ul>
<li>Eat</li>
<li>Sleep</li>
<li>Work</li>
   <ul>
   <li>Chef</li>
   <ul>
   <li>prepare</li>
   <li>cook</li>
   <li>eat</li>
   </ul>
   <li>Janitor</li>
   <ul>
   <li>wipe</li>
   <li>wash</li>
   <li>clean</li>
   </ul>
   </ul>
</ul>

There you have it.
learned it less than an hour, easy right?

Ordered List & Unordered List

2010-02-12T13:00:00.000+08:00

Ordered List - Letters & Numbers - <ol> Tags
Unordered List - Symbols - <ul> Tags
<li> Tags if followed to differ them
To change the type of <ol> or <ul>,
just add <type="(type)"> in <ol/ul>

OL:
Default OL:
<ol>
<li>Eat</li>
<li>Sleep</li>
<li>Work</li>
</ol>

Eat
Sleep
Work

Letters OL:
<ol type="A">
<li>Eat</li>
<li>Sleep</li>
<li>Work</li>
</ol>

Eat
Sleep
Work

Letters Lowercase OL:
<ol type="a">
<li>Eat</li>
<li>Sleep</li>
<li>Work</li>
</ol>

Eat
Sleep
Work

Roman Numeral OL:
<ol type="I">
<li>Eat</li>
<li>Sleep</li>
<li>Work</li>
</ol>

Eat
Sleep
Work

Roman Numeral Lowercase OL:
<ol type="i">
<li>Eat</li>
<li>Sleep</li>
<li>Work</li>
</ol>

Eat
Sleep
Work

UL:
Square Bullets(default)OL:
<ul type="square">
<li>Eat</li>
<li>Sleep</li>
<li>Work</li>
</ul>

Eat
Sleep
Work

Disc Bullets UL:
<ul type="disc">
<li>Eat</li>
<li>Sleep</li>
<li>Work</li>
</ul>

Eat
Sleep
Work

Circle Bullets UL:
<ul type="circle">
<li>Eat</li>
<li>Sleep</li>
<li>Work</li>
</ul>

Eat
Sleep
Work

If you put other or no OL/UL type,
It will set as default

Tables - Tables inside the Table + Everything Table

2010-02-12T12:00:00.000+08:00

To have table inside a table,
just have another set of table inside the main table
Don't forget if you want to seperate it
into another column, just use <td> or <th> Tag
Here it is, the compilation of the work,
tooked me ages to finish:

<table border="2">
<tr>
<caption>Summation</caption>
  <th>ABCD1234
   <table border="1" cellpadding="5">
<tr>
  <th>Number</th>
  <td>1</td>
  <td>2</td>
  <td>3</td>
  <td>4</td>
</tr>
<tr>
  <th>Alphabet</th>
  <td>A</td>
  <td>B</td>
  <td>C</td>
  <td>D</td>
</tr>
<tr>
  <th rowspan="3">AlphaNumeric</th>
  <td>A1</td>
  <td>A2</td>
  <td>A3</td>
  <td>A4</td>
</tr>
<tr>
  <td>B1</td>
  <td>B2</td>
  <td>B3</td>
  <td>B4</td>
</tr>
<tr>
  <td>C1</td>
  <td>C2</td>
  <td>C3</td>
  <td>C4</td>
</tr>
  </table>
  <th>AlphaNumeric
   <table border="0" bgcolor=orange cellspacing="10" frame="rhs">
<tr>
  <td>A</td>
  <td>B</td>
  <td>C</td>
</tr>
<tr>
  <td>1</td>
  <td></td>
  <td>3</td>
</tr>
<tr>
  <td>A1</td>
  <td>A2</td>
  <td>A3</td>
</tr>
   </table>
  </td>
</tr>
<tr>
  <th align="center">Lists:
   <table frame="hsides" border="3" background="http://bluelearning.ucoz.com/Characters/Cutie_Chan.png">
   <ul>
   <td bgcolor="pink"><li>alphabet</li></td>
   <td><li>number</li></td>
   <td><li>alphanumeric</li></td>
   </ul>
  </td>
   </table>
<th bgcolor="skyblue">
  <table border="1">
<tr>
<th>Number</th>
<th>Alphabet</th>
<th colspan="3">AlphaNumeric</th>
</tr>
<tr>
<td align="center">1</td>
<td align="right">A</td>
<td>A1</td>
<td>B2</td>
<td>C3</td>
</tr>
  </table>
</table>

Summation

ABCD1234

Number	1	2	3	4
Alphabet	A	B	C	D
AlphaNumeric	A1	A2	A3	A4
	B1	B2	B3	B4
	C1	C2	C3	C4

AlphaNumeric

A	B	C
1		3
A1	A2	A3

Lists:

alphabet

number

alphanumeric

Number	Alphabet	AlphaNumeric
1	A	A1	B2	C3

Not so good eh? Just a try...
Hope you learn

Tables - Background in cell or table

2010-02-12T10:40:00.000+08:00

We can put an image or color in the table
insert bgcolor="(color)" in the <table> Tag for color
<table border="1" bgcolor="pink">
<tr>
<th>Number</th>
<th>Alphabet</th>
<th>AlphaNumeric</th>
</tr>
<tr>
<td>1</td>
<td>A</td>
<td>A1</td>
</tr>
</table>

Number	Alphabet	AlphaNumeric
1	A	A1

insert background="(img src)" in the <table> Tag for image
<table border="1" background="http://bluelearning.ucoz.com/Characters/Cutie_Chan.png">
<tr>
<th>Number</th>
<th>Alphabet</th>
<th>AlphaNumeric</th>
</tr>
<tr>
<td>1</td>
<td>A</td>
<td>A1</td>
</tr>
</table>

Number	Alphabet	AlphaNumeric
1	A	A1

Putting an image or color in the cell:
insert bgcolor="(color)" in the <td> or <th> Tag for color
<table border="1">
<tr>
<th bgcolor="pink">Number</th>
<th>Alphabet</th>
<th>AlphaNumeric</th>
</tr>
<tr>
<td>1</td>
<td>A</td>
<td bgcolor="green">A1</td>
</tr>
</table>

Number	Alphabet	AlphaNumeric
1	A	A1

insert background="(img src)" in the <td> or <th> Tag for image
<table border="1">
<tr>
<th>Number</th>
<th>Alphabet</th>
<th background="http://bluelearning.ucoz.com/Characters/Cutie_Chan.png">AlphaNumeric</th>
</tr>
<tr>
<td background="http://bluelearning.ucoz.com/Characters/Cutie_Chan.png">1</td>
<td>A</td>
<td>A1</td>
</tr>
</table>

Number	Alphabet	AlphaNumeric
1	A	A1

Tables - Frames + Border

2010-02-12T08:13:00.000+08:00

This modifies where your border is placed
You can even combo some with frame + border
Frame = Border
this gives border
<table frame="border">
<tr>
  <th>Alphabet</th>
  <th>Number</th>
</tr>
<tr>
  <td>A</td>
  <td>1</td>
</tr>
</table>

Alphabet	Number
A	1

Frame = Box
obviously a box
<table frame="box">
<tr>
  <th>Alphabet</th>
  <th>Number</th>
</tr>
<tr>
  <td>A</td>
  <td>1</td>
</tr>
</table>

Alphabet	Number
A	1

Frame = Void
makes your border=0
<table frame="void">
<tr>
  <th>Alphabet</th>
  <th>Number</th>
</tr>
<tr>
  <td>A</td>
  <td>1</td>
</tr>
</table>

Alphabet	Number
A	1

Frame = Hsides
border in horizontal
<table frame="hsides">
<tr>
  <th>Alphabet</th>
  <th>Number</th>
</tr>
<tr>
  <td>A</td>
  <td>1</td>
</tr>
</table>

Alphabet	Number
A	1

Frame = Vsides
border in vertical
<table frame="vsides">
<tr>
  <th>Alphabet</th>
  <th>Number</th>
</tr>
<tr>
  <td>A</td>
  <td>1</td>
</tr>
</table>

Alphabet	Number
A	1

Frame = Above
Border only shown above
<table frame="above">
<tr>
  <th>Alphabet</th>
  <th>Number</th>
</tr>
<tr>
  <td>A</td>
  <td>1</td>
</tr>
</table>

Alphabet	Number
A	1

Frame = Below
border shown below
<table frame="below">
<tr>
  <th>Alphabet</th>
  <th>Number</th>
</tr>
<tr>
  <td>A</td>
  <td>1</td>
</tr>
</table>

Alphabet	Number
A	1

Frame = Lhs
border in left side
<table frame="lhs">
<tr>
  <th>Alphabet</th>
  <th>Number</th>
</tr>
<tr>
  <td>A</td>
  <td>1</td>
</tr>
</table>

Alphabet	Number
A	1

Frame = Rhs
border in right
<table frame="rhs">
<tr>
  <th>Alphabet</th>
  <th>Number</th>
</tr>
<tr>
  <td>A</td>
  <td>1</td>
</tr>
</table>

Alphabet	Number
A	1

You can change the border size in these frames
Just put border="(number)" in <table>
I will show you a good combo:

<table frame="above" border="3">
<caption>Alphabet & Number</caption>
<tr>
  <th>Alphabet</th>
  <th>Number</th>
</tr>
<tr>
  <td>A</td>
  <td>1</td>
</tr>
</table>

Alphabet & Number
Alphabet	Number
A	1

Tables - Change Size + Alignment

2010-02-12T06:34:00.000+08:00

We can align the tables text
We can change the size of the tables itself
This is our normal table:

<table border="1">
<tr>
<th>Number</th>
<th>Alphabet</th>
<th>AlphaNumeric</th>
</tr>
<tr>
<td>1</td>
<td>A</td>
<td>A1</td>
</tr>
</table>

Number	Alphabet	AlphaNumeric
1	A	A1

Adjusted Size and Table Text Alignment:
Just Put your width and height in the <table> Tag
Put align="left,right,center" in the <td> or <th> Tag

<table border="1" width="300" height="150">
<tr>
<th>Number</th>
<th>Alphabet</th>
<th>AlphaNumeric</th>
</tr>
<tr>
<td>1</td>
<td align="center">A</td>
<td align="right">A1</td>
</tr>
</table>

Number	Alphabet	AlphaNumeric
1	A	A1

Don't put the width and height if you want your table to be in normal size
You may not put align="left", it is in default

Tables - Cellpadding + Cellspacing

2010-02-12T01:54:00.000+08:00

To change the spacing and padding,
just use the cellspacing and cellpadding Tags
Put it insite the <table> Tag

This is a normal spacing and padding,
You can also call this without spacing and padding
See their difference:
<table border="1">
<tr>
<th>Number</th>
<th>Alphabet</th>
<th>AlphaNumeric</th>
</tr>
<tr>
<td>1</td>
<td>A</td>
<td>A1</td>
</tr>
</table>

Number	Alphabet	AlphaNumeric
1	A	A1

Cellspacing of 5:
<table border="1" cellspacing="5">
<tr>
<th>Number</th>
<th>Alphabet</th>
<th>AlphaNumeric</th>
</tr>
<tr>
<td>1</td>
<td>A</td>
<td>A1</td>
</tr>
</table>

Number	Alphabet	AlphaNumeric
1	A	A1

Cellspacing of 10:
<table border="1" cellspacing="10">
<tr>
<th>Number</th>
<th>Alphabet</th>
<th>AlphaNumeric</th>
</tr>
<tr>
<td>1</td>
<td>A</td>
<td>A1</td>
</tr>
</table>

Number	Alphabet	AlphaNumeric
1	A	A1

Cellpadding of 5:
<table border="1" cellpadding="5">
<tr>
<th>Number</th>
<th>Alphabet</th>
<th>AlphaNumeric</th>
</tr>
<tr>
<td>1</td>
<td>A</td>
<td>A1</td>
</tr>
</table>

Number	Alphabet	AlphaNumeric
1	A	A1

Cellpadding of 10:
<table border="1" cellpadding="10">
<tr>
<th>Number</th>
<th>Alphabet</th>
<th>AlphaNumeric</th>
</tr>
<tr>
<td>1</td>
<td>A</td>
<td>A1</td>
</tr>
</table>

Number	Alphabet	AlphaNumeric
1	A	A1

Combination of Cellspacing and Cellpadding of 10:
<table border="1" cellspacing="10" cellpadding="10">
<tr>
<th>Number</th>
<th>Alphabet</th>
<th>AlphaNumeric</th>
</tr>
<tr>
<td>1</td>
<td>A</td>
<td>A1</td>
</tr>
</table>

Number	Alphabet	AlphaNumeric
1	A	A1

Tables - Additional Column + Row

2010-02-12T01:33:00.000+08:00

In a table, we could add additional column or rows
just put the command colspan or rowspan

Column:
<table border="1">
<tr>
<th>Number</th>
<th>Alphabet</th>
<th colspan="3">AlphaNumeric</th>
</tr>
<tr>
<td>1</td>
<td>A</td>
<td>A1</td>
<td>B2</td>
<td>C3</td>
</tr>
</table>

This shows as:

Number	Alphabet	AlphaNumeric
1	A	A1	B2	C3

Row:
<table border="1">
<tr>
  <th>Number</th>
  <td>1</td>
</tr>
<tr>
  <th>Alphabet</th>
  <td>A</td>
</tr>
<tr>
  <th rowspan="3">AlphaNumeric</th>
  <td>A1</td>
</tr>
<tr>
  <td>B2</td>
</tr>
<tr>
  <td>C3</td>
</tr>
</table>

Shows:

Number	1
Alphabet	A
AlphaNumeric	A1
	B2
	C3

Tables - Heading + Empty Cells + Caption

2010-02-11T14:35:00.000+08:00

To make the table in heading form,
just use the <th> </th> Tags,
instead of <td></td>
It is just making the table font in bold

Heading:
<table border="1">
<tr>
<th>Number</th>
<th>Alphabet</th>
<th>AlphaNumeric</th>
</tr>
<tr>
<td>1</td>
<td>A</td>
<td>A1</td>
</tr>
</table>

Displays:

How about Blank in a cell?
Remove the content:
<table border="1">
<tr>
<th>Number</th>
<th>Alphabet</th>
<th></th>
</tr>
<tr>
<td>1</td>
<td></td>
<td>A1</td>
</tr>
</table>

Putting Caption:
Just put a <Caption> Tags
<table border="1">
<Caption>TITLE</Caption>
<tr>
<th>Number</th>
<th>Alphabet</th>
<th>AlphaNumeric</th>
</tr>
<tr>
<td>1</td>
<td>A</td>
<td>A1</td>
</tr>
</table>

TITLE
Number	Alphabet	AlphaNumeric
1	A	A1

Tables

2010-02-11T13:17:00.000+08:00

*Each table starts with a table tag
*Each table row starts with a tr tag
*Each table data starts with a td tag
*Always put the table border size

One Column Table:
<table border="1">
<tr>
<td>one</td>
</tr>
</table>

One row and three Columns Table:
<table border="1">
<tr>
  <td>one</td>
  <td>two</td>
  <td>three</td>
</tr>
</table>

Two rows and three Columns Table:
<table border="1">
<tr>
  <td>one</td>
  <td>two</td>
  <td>three</td>
</tr>
<tr>
  <td>four</td>
  <td>five</td>
  <td>six</td>
</tr>
</table>

Shows As:

If you change a border, then your border goes larger
If you put 0, then no border is shown:

<table border="0"> or just use <table> Tag
<tr>
<td>one</td>
</tr>
</table>

<table border="5">
<tr>
<td>one</td>
</tr>
</table>

<table border="20">
<tr>
<td>one</td>
</tr>
</table>

HTML Images

2010-02-10T03:28:00.000+08:00

How to post with image?
How to make image larger?
How to view image from source?

shows image from other link:
<img src="(location)">

shows image from other link and adjust image:
<img src="(location)" width="(number)" height="(number)">

shows image from other link and jump to the source:
<a href="(location)"><img src="location"></a>

shows image, open in new browser, adjust size, jump to source and show image name when image does not shown:
<a href="(image location)" target="_blank"><img src="(image location)" alt="(name)" width="(number)" height="(number)"></a>

By filling up this:
shows image from other link:
<img src="http://bluelearning.ucoz.com/Characters/Cutie_Chan.png">

shows image from other link and adjust image:
<img src="http://bluelearning.ucoz.com/Characters/Cutie_Chan.png" width="75" height="100">

shows image from other link and jump to the source:
<a href="http://bluelearning.ucoz.com/Characters/Cutie_Chan.png">
<img src="http://bluelearning.ucoz.com/Characters/Cutie_Chan.png"></a>

shows image, open in new browser, adjust size, jump to source and show image name when image is not shown:
<a href="http://bluelearning.ucoz.com/Characters/Cutie_Chan.png" target="_blank"><img src="http://bluelearning.ucoz.com/Characters/Cutie_Chan.png" alt="Cutie" width="100" height="125"></a>

Try clicking some of these:
It will show us:
shows image from other link:

shows image from other link and adjust image:

shows image from other link and jump to the source:

shows image, open in new browser, adjust size, jump to source and show image name when image is not shown:

<img src> image source
<img alt> alternate name if no image is shown

HTML Links

2010-02-10T01:48:00.000+08:00

This is one of the important factor in HTML
Wonder when you click a word and it goes to another link?
Clicked a word and it opened another window?
All this can be answered here:

link to a site:
<a href="(location)">(name)</a>

link to a site and open a new browser:
just put target="_blank" command
<a href="(location)" target="_blank">(name)</a>

jump to a specific location in a link:
you must name where the location you want it to jump to
by putting <a name="#(name of the location you want to jump to)">(name)</a>
this is the command wherein when you click it, will jump to your specic location
<a href="(location name)">(name)</a>

jump to mail:
<a href="mailto:(e-mail address)?">(name)</a>

jump to mail with complete info:
<a href="mailto:(e-mail)?cc=(email)&bcc=(email)&subject=(subject name)%20(subject name)&body=(message)%20(message)%(message)%20(message)">(name)</a>
%20 = seperation

By filling up this:
link to a site:
<a href="http://blueslearning.blogspot.com">BLUE's learning</a>

link to a site and open a new browser:
<a href="http://blueslearning.blogspot.com" target="_blank">BLUE's learning</a>

jump to a specific location in a link:
<a name="jump1">jump to a specific location in a link</a>
<a href="#jump1">Jump to "jump to a specific location in a link"</a>

jump to mail:
<a href="mailto:mail@mail.com?">Send Mail</a>

jump to mail with complete info:
<a href="mailto:mail@mail.com?cc=mail@mail.com
&bcc=mail@mail.com
&subject=Welcome%20Here&body=Welcome%20To%Blues%20Learning">Send Mail With Message</a>
%20 = seperation

Try clicking some of these:
It will show us:
link to a site:
BLUE's learning

link to a site and open a new browser:
BLUE's learning

jump to a specific location in a link:
jump to a specific location in a link
Jump to "jump to a specific location in a link"

jump to mail:
Send Mail

jump to mail with complete info:
Send Mail With Message

<a></a> tags are simply know as anchors

Styling your HTML

2010-02-08T06:08:00.000+08:00

to style your HTML you must master CSS
Here are some styling for HTML:

style="background-color:(color name)"
= shows the background if your body part

style="font-size:(number)px"
= how large your font is

style="font-family:(font name)"
= your font name

style="font-family:(font name);color:(color name)"
= font name with color

style="text-align:(position)"
= where would you like it to be placed?

If you do this in your page:

<html>
<body style="background-color:SkyBlue;">
Background of body=SkyBlue

<p style="font-size:25px">This text is 25 pixels</p>

<p style="font-family:times">
text=Times New Roman</p>

<p style="font-family:times;color:blue">
text=Times New Roman, color=Blue</p>

<p style="font-family:verdana;color:violet">
text=Verdana, color=Violet</p>

</body>
</html>

It would show us:

<p style="text-align:center">text-alignment=center</p>

shows:

Text alignment=center

Now if you are using blogger, the codes are different
They use javascript codes which will be discussed later on...

Quotation Tags & Margin Tags

2010-02-06T23:41:00.000+08:00

Here are some tags for quotation
It does nothing but adjust your text and gives quotation mark automatically

<q>By using these tags gives you quotation mark</q>

<blockquote>
By using these tags, it adjusts your margin automatically
</blockquote>

Shows:

By using these tags gives you quotation mark

By using these tags, it adjusts your margin automatically

Show Text In some Abbreviations and Acronyms

2010-02-06T05:17:00.000+08:00

When you highlight some Abbreviations and Acronyms,
It shows the whole word.
Sometimes, we get mistakes from the abbreviation we see,
without showing what it is.
Could you guess what are these first without pointing your mouse over?
Or scrolling down?

US
CA
DOLE
FU
WWW
HTML
WYSIWYG
BLUE

Use this tags:

<abbr title="United States">US</abbr>

<abbr title="Charlie's Angel">CA</abbr>

<abbr title="Department Of Labor and Employment">DOLE</abbr>

<abbr title="Fatima University">FU</abbr>

<acronym title="World Wide Web">WWW</acronym>

<acronym title="Hyper Text Mark Up">HTML</acronym>

<acronym title="What You See Is What You Get">WYSIWYG</acronym>

<acronym title="Blue Learning Updated Everyday">BLUE</acronym>

Address Type message

2010-02-06T05:00:00.000+08:00

When you are mailing someone
and you want to format your text into mailing style
You just use the address tag:
<address>
BLUE learnings
666 Ongpin street
Binondo, MLA
PH
</address>

BLUE learnings
666 Ongpin street
Binondo, MLA
PH

Computer Tags

2010-02-05T02:54:00.000+08:00

Here are tags which is used to display computer code.
See how their font differs
<var>This is a Computer Variable tag</var>
<code>This is Computer Code tag</code>
<samp>This is Sample Text tag</samp>
<tt>This is Teletype Text tag</tt>
<kbd>This is Keyboard Input tag</kbd>

It would show:
This is a Computer Variable
This is Computer Code tag
This is Sample Text tag
This is Teletype Text tag
This is Keyboard Input tag

Displaying spacings which is exactly in what you type

2010-02-04T01:41:00.000+08:00

This are are called preformatted text, which displays exact spacing.
so you do not need to put line break and spaces tags, but it is rarely used.
Use the <pre> (text) </pre> tag
<head>
<body>
<pre>
<b>Blogger</b> is the best
it is easy, simple and friendly to use.

We can share what we like

And anyone can be an author

Provided you have a blog site

Blogging off...
BLUE's learning
</pre>
</body>
<head>

this would display:

Blogger   is the best
 it is easy  simple and friendly to use.


We can share what we like

And anyone can be an author

Provided you have a blog site

   Blogging off..
   BLUE's learning

How about putting words with Style?

2010-02-02T07:52:00.000+08:00

This are some commands where you input it to the text for it to change.
<(letter)>(enter words)</(letter)>

letters:
<b> Bold
<big> Big
<em> Emphasized
<i> Italic
<small> Small
<strong>Strong
<sub> _Subscripted
<sup> ^{Superscripted}
<ins> Inserted
<del> ~~Deleted~~