TUTORIAL
How easy to make your FFSNG

wall in HTML..

Hi and welcome to my Blog. I want to share my knowledge in HTML. This tutorial is aimed to Help you to build your Wall. I made a comprehensive steps making your FFS wall. HTML may seem confusing at first, but i will help you understand how it works in this step-by-step tutorial of how to make your page. I'm having fun creating and discovering CODES. Sankyu for visiting & check back often......



NEXT Color Chart... ~>

INTRO / Definition and Usage

When using HTML to change font styles, you must place a tag before and after the text you wish to change.

To make text bold, place <b> before the text and after the text. </b>
Example: <b>Text</b>
To make text italic, place <i> before the text and after the text. </i>
Example: <i>Text</i>
To make text underlined, place <u> before the text and after the text.</u>
Example: <u>Text</u>

---

<br> TAG
The <br> tag inserts a single line break.
The <br> tag is an empty tag which means that it has no end tag.
Differences Between HTML and XHTML
In HTML the <br> tag has no end tag.
In XHTML the <br> tag must be properly closed, like this: <br/>.

<p> TAG
The <p> tag defines a paragraph.
<p>This is some text in a paragraph.</p>
automatically add some space (margin) before and after each <p> element.

<center> TAG
To make text center, place <center> before the text and after the text. </center>
But in the new FFS you can set the text-align left/center in "edit the about me" you will find in the lower section. If you will select the <center> all txt/image will be <center> no need the <center> TAG

---

<div> TAG
<div> is a block level element that can be used as a container for grouping other HTML elements.
The <div> tag is used to group block-elements to format them with styles.

<span> TAG
<span>tag provides a way to add a hook to a part of a text.
When the text is hooked in a element you can add styles to the content,

<a> TAG
The <a> tag defines an anchor. An anchor can be used:
•To create a link to another page, by using the href attribute
The The <a> element is usually referred to as a link or a hyperlink.

---

TYPES OF BORDER
• Solid	• Dotted	• Dashed	• Groove	• Double	• Ridge	• Outset	• Inset

BOX iN ABOUT ME
- Before to start building your wall make a Box first.

SIMPLE NO BACKGROUND
YOUR ABOUT ME GOES HERE..	<div style="color: red; font-size: 1em; padding: 10px; border-style: solid; border-color: red; border-width: 2px;"> YOUR ABOUT ME GOES HERE.. </div>

BOX with FIXED BACKGROUND
YOUR ABOUT ME GOES HERE	<div style="border-style: solid; border-color: red; border-width: 2px; padding: 10px; color: navy; font-size: 1.5em; text-papyrus: background-color: rgb(240, 248, 255); background-attachment: fixed; background-image: url(URL);"> YOUR ABOUT ME GOES HERE </div>

BOX with BACKGROUND ATTACH
YOUR ABOUT ME GOES HERE	<div style="border-style: solid; border-color: red; border-width: 2px; padding: 10px; color: navy; font-size: 1.5em; text-papyrus: background-color: rgb(240, 248, 255); background-image: url(URL);"> YOUR ABOUT ME GOES HERE </div>

SHADOW BOX with BACKGROUND
YOUR ABOUT ME GOES HERE	<div style="border-style: solid; border-color: red; border-width: 2px; padding:10px; box-shadow: 0.3em 0.3em 0.3em red; color: navy; font-size: 1.5em; text-papyrus: background-color: rgb(240, 248, 255); background-attachment: fixed; background-image: url(URL);"> YOUR ABOUT ME GOES HERE </div>

SIMPLE SHADOW BOX
YOUR ABOUT ME GOES HERE	<div style="color: black; font-size: 1.5em; padding: 10px; box-shadow: 0.3em 0.3em 0.3em red; border-style: solid; border-width: 2px; border-color: black;"> YOUR ABOUT ME GOES HERE </div>

If you wish to build a box with a layer border, just resize the border num. & change the border style. i made a two layer of border
YOUR ABOUT ME GOES HERE	<div style="border: 4px double #B8860B;">YOUR ABOUT ME GOES HERE </div>

RADIUS BOX
YOUR ABOUT ME GOES HERE	<div style="border: 4px solid black; padding:10px; border-radius: 25px 25px 25px 25px; background: url(URL);">YOUR ABOUT ME GOES HERE</div>

SCROLLBAR..

Ridged Border
YOUR SCROLLING SECTION	<div style="border:7px ridge LimeGreen; padding:10px;width:260px;height:30px;overflow: auto; overflow-y: scroll !important;"> YOUR SCROLLING SECTION </div>

Outset Border
YOUR SCROLLING SECTION	<div style="border:3px outset LimeGreen; padding:10px;width:260px;height:30px;overflow: auto; overflow-y: scroll !important;"> YOUR SCROLLING SECTION </div>>

Mixed Border
YOUR SCROLLING SECTION	<div style="border-top:2px dashed LimeGreen;border-right:3px dotted red;border-bottom:3px dashed LimeGreen;border-left:8px solid black;width:250px;height:40px;overflow: auto; overflow-y: scroll !important; padding:10px;"> YOUR SCROLLING SECTION </div>

SCROLLBAR WITH BACKROUND
YOUR SCROLLING SECTION	<div style="border:2px solid LimeGreen; padding:10px; width:260px;height:50px; overflow: auto; overflow-y: scroll !important; background-image:url(IMAGE URL);"> YOUR SCROLLING SECTION </div>

TXTLINK

A Hypertext Reference (href) is an HTML attribute of an anchor (link) tag that requires a valid URL in order to properly direct a user to a different location. In other words, this Hypertext Reference is where users will navigate to if they do click on this link. <a href="PAGE URL" target="_blank">TXT HERE</a>

FONT

Customize your font to achieve a desired look. <font size="7" face="Georgia, Arial" color="b22222">C</font><font color=#d77127>ustomize your font to achieve a desired look.</font> <font color=#d77127 size=3 face="adobe minion web">YOUR TEXT GOES HERE</font> <font color=#d77127>YOU CAN USE TO CREATE A DIFFERENT FONT COLOR</font> <font size=6>YOU CAN USE TO CREATE A DIFFERENT FONT SIZE</font> The <font> tag provides no real functionality by itself, but with the help of a few attributes, this tag is used to change the style, size, and color of HTML text elements. The size, color, and face attributes can be used all at once or individually, providing users with the ability to create dynamic font styles for any HTML element.

DIFFERENT FONT
Broadway algerian Bernard MT Condensed arial arial black Bauhaus 93 Baskerville Old Face Curlz MT bimini comic sans ms book antiqua bookman old style braggadocio britannic bold brush script mt century gothic century schoolbook chasm Cooper Black colonna mt comic sans ms commercialscript bt coolsville courier courier new cursive dayton desdemona fantasy flat brush footlight mt light futurablack bt futuralight bt garamond Bernard MT Condensed Algerian georgia swis721 bt swis721 blkoul bt symap tahoma technic tempus sans itc	geotype tt helterskelter helvetica herman highlight let impact joan john handy let Colonna MT Blackadder ITC Castellar kino mt Gigi lithograph lucida console map symbols marlett matteroffact matisse itc matura mt script capitals mekanik let monaco monospace monotype sorts ms linedraw Constantia olddreadfulno7 bt orange let palatino pump demi bold let puppylike roland sans-serif scruff let serif playbill short hand signs normal Copperplate Gothic Light Copperplate Gothic Bold stylus bt superfrench Chiller	Britannic Bold times times new roman trebuchet ms trendy verdana victorian let vineta bt vivian Freestyle Script wingdings western westminster westwood let wide latin zapfellipt bt Script Roman Modern Minion Impact vivaldi Berlin Sans FB Demi Forte Papyrus Monotype Corsiva Small Fonts Edwardian Script ITC viner hand ITC ravie harlow solid italic magneto matura MT script capitals old english text MT rage italic showcard gothic stencil informal roman curlz MT

OVERLAPPING TXT

you want this code?	<p style="line-height:14px;text-align:center;"><span style="font-family: Forte;font-size:35px;color:#FF0000;font-style:normal;font-weight:normal;"> YOUR TXT HERE <br><span style="font-family: Forte;font-size:30px;color:#010000;font-style:italic;font-weight:normal;"> YOUR TXT HERE</span> </span> </p>

with SHADOW
Red Lantern Ruby	<p style="line-height:14px;text-align:center;"><span style="font-family: Forte; text-shadow: 4px 3px 8px #ffff00; font-size:35px;color:#FF0000;font-style:normal;font-weight:normal;">YOUR TXT HERE<br></span><span style="font-family: Forte;font-size:30px;color:#010000; text-shadow: 4px 3px 8px #FC0202;font-style:italic;font-weight:normal;">YOUR TXT HERE</span></p>

ANOTHER OVERLAPPING TXT

This would be a three layer Overlapping text

<p style="line-height:15px;text-align:center;"><span style="font-family: vivaldi; text-shadow: 4px 3px 8px #008000; font-size:45px;color:#FF0000;font-style:normal;font-weight:normal;">YOUR TXT HERE<br></span><span style="font-family: vivaldi;font-size:32px;color:#000000; text-shadow: 4px 3px 8px #FC0202;font-style:italic;font-weight:normal;">YOUR TXT HERE</span><br><span style="font-family: vivaldi; text-shadow: 4px 3px 8px #008000; font-size:31px;color:#FF0000;font-style:normal;font-weight:normal;">YOUR TXT HERE</span></p>

SHADOW TXT
RUBY........	<p style="font-family: Forte; color:#000000; text-shadow: 4px 3px 8px #ffff00; text-align: center"><font size="6">YOUR TXT HERE</font></p>

CURSOR

<div style="cursor: url(CURSOR URL), default;">

IMAGE RESIZE

<img width="60" height="28" src="IMAGE URL"/>

IMAGE LINK

You can make your images "clickable" so that when a user clicks the image, it opens another URL. You do this by simply wrapping the image with hyperlink code. <a href="Destination PAGE URL"><img src="IMAGE URL" style="border: 3px double white;" width="140" height="280" title="NAME"></a> If you don't want the border, specify border: 0px. Another Example of image LINK <a href="Destination PAGE URL" target="_BLANK" onclick="return dcu(this);"><img src="Image URL" style="border-radius: 100px 100px 100px 100px; border: 1px solid #000000;" width="80" height="80" title="NAME"></a>

Spacing Your Images
If you're in need of an HTML code that will enable you to specify the spacing between your images, this HTML code is for you. These images haven't been placed within an HTML table and aren't aligned via CSS. They are being displayed via the HSPACE and VSPACE attributes, which will enable you to specify the horizontal and vertical spacing between your images.	You can specify the horizontal and vertical spacing by editing the VSPACE and HSPACE values. <img src="YOUR IMAGE URL" style="border: 1px double black;" hspace=10 vspace=10 width="96" height="134"/><img src="YOUR IMAGE URL" style="border: 1px double black;" hspace=5 vspace=5 width="96" height="134"/>

I have another Example of spacing images

You can specify the horizontal and vertical spacing by editing the VSPACE and HSPACE values. <img src="YOUR IMAGE URL" style="border: 1px double black;" hspace=2 vspace=2 width="96" height="134"><img src="YOUR IMAGE URL" style="border: 1px double black;" hspace=5 vspace=20 width="96" height="134"><img src="YOUR IMAGE URL" style="border: 1px double black;" hspace=2 vspace=2 width="96" height="134"><img src="YOUR IMAGE URL" style="border: 1px double black;" hspace=2 vspace=20 width="96" height="134"> If you wish to scroll the images just add <marquee> before and after

OPACITY
	<img id="compman" src="YOUR IMAGE URL" style="opacity: 0.6" width="100" height="100"/>

IMAGE ALIGNMENT

You can determine how your images will be aligned, relative to the other content on the page (such as a paragraph of text). You do this using the align attribute. <center><table border="0" width="85" cellpadding="10" cellspacing="10"> <tr><td valign=top><font color="BLACK" size="3" face="comic sans ms"> Text on the left side.<br><br>Picture in the middle.</font></td> <td align=center><img src="Picture in the middle."></td> <td valign=bottom><font color="BLACK" size="3" face="comic sans ms"> And more text on this side</font></td></tr> </table></center> • RESULT : Text on the left side. Picture in the middle. And more text on this side <center><table border="0" width="70" cellpadding="10"> <tr><td valign=middle><font color="BLACK" size="2" face="comic sans ms"> YOUR TEXT GOES HERE</td> <td align=center> <img src="YOUR PICTURE URL"> </td></tr></table></center> • RESULT : YOUR TEXT GOES HERE <img src="IMAGE URL" style="padding-right: 9px; float: left;" width="50" height="80"> <span style="font-family: harrington;font-size:15px;color: black; font-style:italic;font-weight:normal;">YOUR TXT HERE</span> • RESULT : YOUR blahhhhhhhhhhhhhhh blahhhhhhhhhhhhhh blahhhhhhhhhhh blahhhhhhhhhhhhhhh blahhhhhhhhhhhhhh blahhhhhhhhhhh blahhhhhhhhhhhhhhh blahhhhhhhhhhhhhh blahhhhhhhhhhh blahhhhhhhhhhhhhhh blahhhhhhhhhhhhhh blahhhhhhhhhhh blahhhhhhhhhhhhhhh blahhhhhhhhhhhhhh blahhhhhhhhhhh HERE

TABLE

The HTML TABLE tag is the opening tag used to create a table within your wall. Row 1 Cell 1 Row 1 Cell 2 Row 2 Cell 1 Row 2 Cell 2 <table> <tr> <td>Row 1 Cell 1</td> <td>Row 1 Cell 2</td> </tr> <tr> <td>Row 2 Cell 1</td> <td>Row 2 Cell 2</td> </tr> </table> To give the table borders just add the BORDER attribute to the <TABLE ...> tag: <table border> BORDER sets the width of the outer border. So, for example, this code creates a table with an outside border width of 10: <TABLE class="examplecode"Border=10/> CELLSPACING sets the amount of space between the cells of a table. If the borders are visible, CELLSPACING controls the width of the internal borders. <TABLE BORDER class="examplecode">CELLSPACING=10/> for example Row 1 Cell 1 Row 1 Cell 2 Row 2 Cell 1 Row 2 Cell 2 PADDING & SPACING with color Column 1 Column 2 Row 1 Cell 1 Row 1 Cell 2 Row 2 Cell 1 Row 2 Cell 2 <table border="1" cellspacing="10" bgcolor="rgb(0,255,0)"> <tr> <td><b>Column 1</b></td> <td><b>Column 2</b></td> </tr> <tr> <td>Row 1 Cell 1</td> <td>Row 1 Cell 2</td> </tr> <tr> <td>Row 2 Cell 1</td> <td>Row 2 Cell 2</td> </tr> </table> Alternating Table Row Colors: This Row is Yellow! This Row is Gray! This Row is Yellow! This Row is Gray! This Row is Yellow! This Row is Gray! <table> <tr bgcolor="#FFFF00"><td>This Row is Yellow!</td></tr> <tr bgcolor="#AAAAAA"><td>This Row is Gray!</td></tr> <tr bgcolor="#FFFF00"><td>This Row is Yellow!</td></tr> <tr bgcolor="#AAAAAA"><td>This Row is Gray!</td></tr> <tr bgcolor="#FFFF00"><td>This Row is Yellow!</td></tr> <tr bgcolor="#AAAAAA"><td>This Row is Gray!</td></tr> </table> Customizing Background Color Jacob 13 Edward 27 ___________________________________ <table bgcolor="#000000"> <tr><td bgcolor="#009900" align="right"> Jacob</td> <td>27</td> </tr> <tr><td bgcolor="#0000FF" align="right"> Edward</td> <td>27</td> </tr> </table> Column 1 Column 2 Row 2 Row 2 ________________________________ <TABLE CELLPADDING="2" CELLSPACING="2" WIDTH="50%"> <TR> <TD BGCOLOR="#CCCCCC">Column 1</TD> <TD BGCOLOR="#CCCCCC">Column 2</TD> </TR> <TR> <TD>Row 2</TD> <TD>Row 2</TD> </TR> </TABLE>

BULLETED LIST

• Item one
• Item two
• Item three
• item four
• Item five

<ul>
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
<li>item four</li>
<li>Item five</li>
</ul>

CULLENS

• one
• two
• three
• four

<h4 align="left">CULLENS</h4> <ul>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
</ul>

To render a list with a different bullet type, add a type attribute to the unordered list element. Using the same code in the example, replace the <ul> line from the previous example with any of the lines listed below to change the bullet from disc shape to another shape.

<ul type="square">
<ul type="disc">
<ul type="circle">

__________________________________
An ordered list is defined using the <ol> tag, and list items placed inside of an ordered list are preceded with numbers instead of bullets.

1. One
2. Two
3. three

<ol>
<li>one</li>
<li>two</li>
<li>three</li>
</ol>

The numbering of an HTML list can be changed to letters or Roman Numerals by once again adjusting the type attribute.

<ol type="a">
<ol type="A">
<ol type="i">
<ol type="I">

SCROLL TXT

If you want a scroll image just replace the TXT to IMAGE code

direction=up RUBY......
<marquee direction=up height=50>YOUR TXT HERE</marquee>

_________________________________________________
direction=down

RUBY......
<marquee direction=down height=50>YOUR TXT HERE</marquee>
_________________________________________________
behavior=alternate
RUBY......
<marquee behavior=alternate width=150>YOUR TXT HERE</marquee>
_________________________________________________

RUBY

<marquee>YOUR TXT HERE</marquee>
_________________________________________________

RUBY

<marquee direction="right">YOUR TXT HERE</marquee>
_________________________________________________

RUBY......

<marquee style="border:BLUE 1px SOLID">YOUR TXT HERE<marquee>
_________________________________________________

RUBY

<marquee direction="left" style="background:RED" style="border:BLUE 2px SOLID">YOUR TXT HERE<marquee>
_________________________________________________

♥♥| | | | | | |RUBY| | | | | | |♥♥

<center><MARQUEE behavior=alternate direction=left scrollAmount=2 width="4%">♥</MARQUEE><MARQUEE scrollAmount=4 direction=left width="8%">♥| | | | | | |</MARQUEE>YOUR TXT HERE<MARQUEE scrollAmount=4 direction=right width="8%">| | | | | | |♥</MARQUEE><MARQUEE behavior=alternate direction=right scrollAmount=2 width="4%">♥</MARQUEE></center>
_________________________________________________

IMAGE


<marquee direction=right width=40><img src=http://Your picture URL></marquee> <marquee width=40><img src=http://Your picture URL></marquee>
_________________________________________________



<img style="float:left;" src="IMAGE URL" width="72" height="79" alt="ruby"/> <marquee style="width:300px;" behavior="scroll" direction="right"><img src="IMAGE URL" width="79" height="79"></marquee>

...........

To be Continue...

Subscribe to: Post Comments (Atom) Blog Archive Blog Archive Jun 07 (1) Jun 06 (1) May 15 (1) Awesome Inc. template. Powered by Blogger.