....

This section will guide U trough a formatting section. All u need might be here … if U want to change your background color, background image, text color, size, style, also image part and it’s attribute to make your image appear the way U want.

This tag make all text between an open tag : and close tag : larger than normal text size H1 is largest, H2 is smaller, and … H6 is smallest but still bigger than a normal size. U can enlarge text by set a size option at font tag, I will talk about it later.

Tag	Example
. . .	PENGUiN gib gib gib
. . .	PENGUiN gib gib gib
. . .	PENGUiN gib gib gib
. . .	PENGUiN gib gib gib
. . .	PENGUiN gib gib gib
. . .	PENGUiN gib gib gib

This Paragraph tag will create a paragraph for a text between an open tag and close tag in Internet Explorer U can ignore a closing tag it won’t have any different to your page but it will cause a little wide space in Netscape. ( in Netscape, close tag is not necessary also )

This tag is a one way tag it stand for LINE BREAK so it’s mean break and start in the next line. This tag work similarly to

but it won’t make any special space between a line that contain a tag and a coming line.

…

Here is an example for

and

………………..

....
Previous Paragraph which not contain any Tag.

This Paragraph start with and opening paragraph tag the opening tag will start this paragraph in a new line. No special effect for the open tag except it will provide a special space between the previous paragraph an this paragraph and close tag will provide a special space also but if U start next paragraph with

again for Netscape : special space Internet Explorer : nothing different.

Next Paragraph

....
Previous Paragraph which contain any Tag.

This Paragraph start with
tag, mention a space between both paragraph. Less space created for this tag. Some of HTML writer put this tag in every single line to make all line start itself. If U place it at the end of paragraph and in the start of next paragraph It will double a space (like an example) but no more space even U put this tag ten times.
.


Next Paragraph with this tag again.

………………..

This tag is an opposite of
tag so it’s mean "No Line Break". It will useful when U don’t want that sentence to be separate by an edge of a line. ( when U cover that sentence by this tag your browser will automatically create a horizontal scroll bar to finished your extra-long sentence. )

Blockquote tag is one of my all-time favorites ! Actually it use for a quotes or citations but I personally use it instead of tag ( in word processing ) . In my opinion it will make reader easy to read than a normal document ( if U see my source code U will mention that even this page contain about 20 blockquote used here ) . Well let’s see an example here …

The following Paragraph start with blockquote so a whole paragraph will step-in about 1 normal tag ( in word processing ) if I write some poem down it will look like this

As the flickering light shines its message each day,
Does it brighten your path or lead you astray?
Have your left any time for the Light of your soul?
Or has your TV taken too much control? -JDB

Mentioned the Paragraph above, all lines divided by
and all text italic by . . . tag. ( will talk about it later ) A little clue is when U open a tag let’s put a close tag immediately and out your document between them, this way U won’t forget to close any other tag.

Font tag is really important ( for me ) because I love to make a text look better than a normal font so I always use this tag to change paint and set a size of my page’s font. Font tag have some attribute to add in ( I don’t know what exactly it’s called ) anyway U will understand from my explanation.

....
make the character between open tag and close tag appear the way U control. U can change it any time U want ! for Example . . .

Impact

Modern

Chaucer

....
control a size of text, U can minus or plus a size of them by include a numeric after the + or - sign. Like this

size = -1

size = +1

size = +2

....
or &itFONT COLOR="xxx"> there are 2 type of color input an RGB ( Red Green Blue format ) or fixed color format so if U input it in a RGB code U have to know it Hex number - U can transform it by your editor or other chart… ( quite complicate but if U have time it will give U more specific color U want it to, for me I use Corel Draw 7 to transform it ). Much easier way is Fixed color format, U can type in a color name ( normal of fancy name whatever ) such like red, black, white, guava (!?!) yeah ! try it out many thing that have a color might work on HTML. The final result of both Format will be the same for example …

Black

Black

White

White

U can also combine all of this tag together by using only one start FONT and close it once like this , don’t ever forget a close tag !!! it will make the rest of your document face like the specific place U want to change a font…

PENGUiN’s HTML Step by step.

After U can edit your font, this following tag is very Useful, U can make your font face look different from normal text by a Character Formatting Tag. Here is a list of some tag that use in a common way… I, myself usually use ‘b’ and ‘I’ for my page because if U use an Explanation form Tag it might appear a bit different in each browser so I make it safe to show my text the way I want.
note : this example might not work in some browser.

Tag	Example
Plain Text	PENGUiN Gib Gib Gib
. . .	PENGUiN Gib Gib Gib : Bold Style.
. . .	PENGUiN Gib Gib Gib : Italic Style.
. . .	PENGUiN Gib Gib Gib : Blink / not work on IE.
. . .	PENGUiN Gib Gib Gib : Stronger Emphasis, usually Bold.
. . .	PENGUiN Gib Gib Gib : Emphasis, usually Italic.
. . .	PENGUiN Gib Gib Gib : Code Sample, usually Courier.
. . .	PENGUiN Gib Gib Gib : Typewriter Font.
. . .	PENGUiN Gib Gib Gib : A Citation.
. . .	PENGUiN Gib Gib Gib : Sample text.
. . .	PENGUiN Gib Gib Gib : A Definition of a term.
. . .	PENGUiN Gib Gib Gib : Signatures or General information.

---

....

---

This is another one way tag, it stand for "A Horizontal Rule Line" so It will create a horizontal line used to separate a document in a part looked. U can spec a width range and a size of line, Let’s view an example.

....

---

---

....

---

---

....

---

---

....

---

---

....

---

---

....

---

---

---

....
. . .

This tag will lead all text line, image, table, horizontal line, … everything in it to a center position it is very useful when U use it in a correct place. Here is an example for a center tag.

P E N G U I N ‘s P A G E !
If U rarely laugh because of a sucks economic situation
Why don’t U come to my place and stay a while ?!?

m a y b e . . .
U will get some smile back.

---

....

IMG is stand for Image so it is all about a graphic files that U want it to appear on your page … This tag also have an attribute to make a last result for each image.

This att. Is for an image URL, easily said that where-is-your-picture. If U miss this one your picture won’t appear! So an important note is U have to remember where is your picture if U use HTML editor and let is create a link for U, it might have a little problem later because some picture need a correct path to appear in case that your picture is in a different directory of your HTML file. But if U use Geocities ( an almost Free Homepage service )it will not have any problem because they will let U have only one directory and unable to create a sub-directory.
……..Example : your files is at Drive C:/Internet and your Image is at Drive D:/gallery/picture named ‘penguin.gif’ so your Internal link to make your picture appear is
……
It will appear like this …

Don’t forget that File name is a Case Sensitive Stuff !!!! ( mean Capital and normal alphabet make a different when typing it ) so Be-careful !!! Here is a simple mistake again.

…

Have U ever locate a mouse over an image? If yes Did U mention a block that contain an information about that image? Yeah ALT attribute will create a little block of information and information at an image before it finish loading. ( mention a text in a border before any image appeared ). Let’s add to an old example…
……
let’s checked by locate your mouse over an image …

So now U have an idea how to explain a brief description to your image. I’m rarely use this because it slow me down, people will see an image anyway but I think this is Good to have a description for your image.

……

I really hate a color border around all of my image ( I mean only mine ) so I take it all out by set a border to "0" so U can set your image border by input a numeric to border attribute let’s see an example, of course penguin image again…

Remember that the color of your image will change IF U use that image for a link ( I will talk about link tag in LINK SECTION. Why? Because a visited link and unvisited link will have each color for itself.

…

As it’s meaning, This tag is very helpful when U want to located your image up or down ( just up or down ). Let’s see an example!!!

text for test

text for test

text for test

Well, sometime a realistic Example is very useful than a words, Think so ?

…

This is very simple (again) . VSPACE is stand for Vertical Space, a space between the image and the text above and below it. Let’s see an example …

text above - text above - text above - text above
text for test
text below - text below - text below - text below

text above - text above - text above - text above
text for test
text below - text below - text below - text below

text above - text above - text above - text above
text for test
text below - text below - text below - text below

…

No doubt that it will be a Horizontal Space ( I know U think it out already *clap clap clap* ). So HSPACE is for spacing between text before and after the image. Let’s see an example again ( it’s works doesn’t it? )

text above - text above - text above - text above
text before - text beforetext after - text after
text below - text below - text below - text below

text above - text above - text above - text above
text before - text beforetext after - text after
text below - text below - text below - text below

text above - text above - text above - text above
text before - text beforetext after - text after
text below - text below - text below - text below

Phew !!! Finished the Format section… How many percent U can understand? Maybe my broken English is drive U nuts, sorry than. Well let’s check the other section.

---

Choose NEW Section