Playing with HTML & CSS part I [ Basic Tips - HTML ]

Playing with HTML & CSS part I [ Basic Tips - HTML ]

This turtorial I will show you simply command which use to be useful for writing in my blog. I won't talk about what's HTML or CSS meaning. You can find those ton of explanations in the internet. Well, here we go!

The basics thing that you shound to know about HTML is

1. <open tag>.........Your information....... </close tag> Tag is the command in HTML which the lists in the table below. Some Tag you don't need "close tag" such as <br> or <hr>., and one more thing important is the close tag must have "/" . If you forgot , webpage might not display properly.

HTML Tags	Display
<p>.....</p>	Paragrahp
<br>	Break line
	blank
<hr>	line
<font>.....</font>	Font
<b>......</b>	Bold
<i>......</i>	Italic
<u>.....</u>	underline
<h1>.....</h1>	Header bigest size
<h2>....</h2>	Header but smaller that H1
until <h6>...</h6>	smallest of header
<div>....</div>	Power full when combination use with CSS, use to set layout,position etc;

2. Rule of inherit - Let's see better than explain :P

<font >

<b> No1. This text is RED and Bold</b>

<i> No2. This text is RED and Italic </i>

<b> <i> No3. This text is RED,BOLD and ITALIC</i></b>

</font>

You will see "Font-tag",<font>...........</font>, is covering "B-tag",<b>.......</b>, and "I-tag" ,<i> .......</i>.

Text No1. is covered by B-tag and inside Font-tag -- that mean this text have got inherit Bold from B-tag and Red color from Font-tag.

Text No2. is covered by I-tag and inside Font-tag -- that mean this text have got inherit Italic from B-tag and Red color from Font-tag.

Text No3. is covered by I-tag which inside B tag and again inside Font-tag -- that mean this text have got inherit Italic from I-tag and Bold from B-tag and Red color from Font-tag.

Note: <font><b><i> ......your text ....</i></b></font> becareful the order of open tag and close tag. If you write </b></i></font> you might got some problems when display^^!

1 <font>.....</font>

some attribute

• color such as red,green,blue,magenta,gold,black,white,pink,yellow ....or use Hexamal number #000000 - #FFFFFF Click here for examples
• size such as +6,+5, ........+1,0,6,5............1,-1,-2..........-6 you can should number between +6 to -6
  

For ex; <font color="red" size="+3">TYPE TEXT HERE</font> ----> result TYPE TEXT HERE

SOME TEXT PLAY WITH FONT TAG

SOME TEXT PLAY WITH FONT TAG

SOME TEXT PLAY WITH FONT TAG

SOME TEXT PLAY WITH FONT TAG

SOME TEXT PLAY WITH FONT TAG

SOME TEXT PLAY WITH FONT TAG

SOME TEXT PLAY WITH FONT TAG

SOME TEXT PLAY WITH FONT TAG

SOME TEXT PLAY WITH FONT TAG


2. Hyper link <a href="http://url.com">........</a> one more attribute is target="" inside quote you can add _blank for open new window and _self for opening same page.
Open to new page and Open in the same page

3. <img src="http://yourWebStoreLing.format picture" \> Yes, here is the simple tag for adding image. Atrribute for img-tag is "Align"

If you don't have the store picture in the internet, go to this website and register there http://imageshack.us. It's free and you can store tons of your images.
This for example my photo link http://img230.imageshack.us/img230/2810/11wu7.gif if you would like to practice. Ok now. let's play with IMG tag

<img src="http://img230.imageshack.us/img230/2810/11wu7.gif" align="left">TYPE SOME TEXT THEN YOU WILL SEE THE DIFFERENCE BETWEEN ALIGN="LEFT" ALIGN="MIDDLE" AND ALIGN="RIGHT"


** The picture will show at the left hand!!

<img src="http://img230.imageshack.us/img230/2810/11wu7.gif" align="middle">TYPE SOME TEXT THEN YOU WILL SEE THE DIFFERENCE BETWEEN ALIGN="LEFT" ALIGN="MIDDLE" AND ALIGN="RIGHT"

The picture will show at the middle of patagraph.

<img src="http://img230.imageshack.us/img230/2810/11wu7.gif" align="right"> TYPE SOME TEXT THEN YOU WILL SEE THE DIFFERENCE BETWEEN ALIGN="LEFT" ALIGN="MIDDLE" AND ALIGN="RIGHT"

the picture will show at the right hand side!!



** To be continue **