FFSng page tutorial

29 March 2017

box background

Box Background

When you choose to use a background image for the box it is always a good idea to specify a background color as well. The reason is that until the background image is loaded, the background color will be shown.

If there is too much difference between the background color and the background image, it will look disturbing once the browser shifts from the background color to the image.

Therefore it is a good idea to specify a background color that matches the colors of the image as close as possible.

background properties are used to define the background effects of an element.

properties used for background effects:

background-color,
background-image,
background-repeat,
background-attachment,
background-position

background-repeat.

repeat
The image is repeated both horizontally and vertically.
repeat-x
The image is repeated horizontally only.
repeat-y
The image is repeated vertically only.
no-repeat
The image is not repeated: only one copy of the image is drawn.

EXAMPLE

<div style="border: 5px solid #B8860B; padding: 10px; background-color: rgb(240, 248, 255); background-image: url(Bg-image URL); background-repeat: repeat-y; background-position: left;" > The image is repeated vertically only </div>

background-position

left, center, right, | top center | left bottom | top right etc.

background-attachment

Value - scroll | fixed

NOTE:Even if the image is fixed, it is still only visible when it is in the content, padding or border area of the element. Thus, unless the image is tiled ('background-repeat: repeat'), it may be invisible.

'fixed' background is fixed with respect to the page box and is therefore replicated on every page.

<div style="border: 5px solid #B8860B; padding: 10px; background-color: rgb(240, 248, 255); background-image: url(Bg URL); background-repeat: no-repeat; background-attachment: fixed; background-position: center;" > This is how it workks </div>

Third Trick

Lets make a Multiple BG

Not only a borders. We can also layer the Background.

Have you seen the Heart in the right bottom of the box? that is the second Bg.

code:

Opacity

The problem with using opacity in CSS is that not only the background of the element will have transparency, but all of its child elements as well. This means that any text within will have the same opacity,

See??

code:

<div style="border: 5px solid #B8860B; padding: 10px; filter: alpha(opacity=65); opacity:0.65; background-color: rgb(240, 248, 255); background-image: url(YOUR Bg URL ); background-repeat: no-repeat;"> Your about me goes here </div>

The Solution!

Therefore, I can happily offer an alternative for you: RGBa colors. The beauty in this is that you declare the normal RGB values + values for the level of transparency you want, resulting in a very easy way to declare transparency for a color. Making this happen with CSS,

Since The transparency will only be appreciate to the background, i put another Box just to see how it looks..

These allow us to use opacity within our background via an alpha channel. If we are looking to use a 30% opaque we can use rgba(102, 102, 255, 0.3)

code:

<div style="border: 5px Dotted #B8860B; padding: 10px; background: rgba(102, 102, 255, 0.6);"> Your about me goes here </div>

04 April 2014

Text Effects

Text effects using CSS shadows

The HTML code
Just put your text inside any div or span and give it an id=style. For the example below, we are working with the text "CSS Text Effects".

Note : some of the effects can be seen only in Fireworks and Google Chrome.

text-shadow:(x-offset) (y-offset) (blur-radius) (color)
X-Offset: To position the shadow along the x-axis.
Y-Offset: To position the shadow along the y-axis
Blur-radius:To position the shadow along the y-axis
Color:To set the color of the shadow.

Here are some examples of the text effects

Text Shadow

code:

Text Shadow

code:

Text Shadow

code:

Text Shadow

code:

Text Shadow

code:

Text Shadow

code:

Text Shadow

code:

OVERLAPPING TXT

you want
this code?

code:

Red Lantern
Ruby

code:

This would be
a three layer
Overlapping text

code:

Resizing Image

This steps are for those who wish to keep an image the original size but just re-size the image in HTML code. Although this is possible, i still suggest you resize an image using an image editor to help with download times. When an image is resized using the html code it still has to load the larger image, even though it appears small in the browser... read my tips first.

Specify the width and height in your IMG SRC HTML tag as shown in the below example.
Code:

Alt & Title Tags

These two tags are very similar and can be confusing. Basically, it makes sense to treat them as the same thing and use them both.

They define a short piece of text which appears instead of the image if the image cannot be displayed (for whatever reason), and/or as a "tool-tip" when you hold your mouse over the image.

title tag are working on FFS.. Code:

20 September 2013

Text_Decoration

Below are examples of the CSS text-decoration property, decorating text isn't nearly as stressful. In fact, it's really quite easy..

This value draws a horizontal line below the text.

Normal text with underline

CODES:

This value draws a horizontal line through the text.

Text with a line through the middle

CODES:

This value draws a horizontal line above the text.

Text with an overline

CODES:

This value draws a horizontal line above the text.

This is yet another

CODES:

This value makes the text blink. But this only works on Firefox.

This is yet another

CODES:

Text Align

Apart from the various CSS font properties, there are other properties that can assist in styling your text. For example, you can change the color of text, align text, add decoration properties and more.

text aligned right

code:

<p style="font-family: courier; color:#000000; font-size: 1em; text-align:right;">text aligned right</p>

The text is indented by 50 pixels. the first line of the paragraph will be indented by 50 pixels, but the following lines will not be indented.

code:

<p style="font-family: courier; color:#000000; font-size: 1em; text-indent:50px;">text is indented by 50 pixels. the first line of the paragraph will be indented by 50 pixels, but the following lines will not be indented.</p>

text has letter spacing applied

code:

<p style="font-family: courier; color:#000000; font-size: 1em; letter-spacing:5px;">text has letter spacing applied.</p>

text has Word Spacing applied

code:

<p style="font-family: courier; color:#000000; font-size: 1em; word-spacing:50px;">The text has Word Spacing applied.</p>

The text is running from right to left.

code:

<p style="font-family: courier; color:#000000; font-size: 1em; direction:rtl;unicode-bidi:bidi-override;">The text is running from right to left.</p>

Image Aligning with Text

Here is an image with a paragraph of text running along side of it. It is really quite easy to drop an image inside a paragraph and wrap text around it like you might see in a magazine.

It is just as simple to align the image to the left and let all the text wrap around it to the right.
The code to align an image to the left of the text might look like this:

CODES:

You can align the Image left /right: and padding the text to left/ right just set the number amount between the distance of the image to the text..

A nother way to obtain the same effect would be to enter the image and text in an invisible table. Entering text in one column and the image in another would create a similar effect.

You can learn more about tables here.

before i forgot. you can combine this code to text formatting

looks like this

Customize your font to achieve a desired look.

18 September 2013

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.

CODES:

I have another Example of spacing images

CODES:

CODES:

If you wish to scroll the images just add <marquee> before and after

To make this clickable Just add <a href="Destination PAGE URL" target="_BLANK" onclick="return dcu(this);"> insert the image code here<a/>
to understand what am i talking about go here..

12 August 2013

Image Alignment Using Table

We can Align the Image using Table..This is a basic 2 & 3 column table with a Image & text. Be careful with large Images, if they don't fit on the box or in your about me, it will force the screen to scroll right & left.

Some don't like using table. they do not know this is the easiest way to make tricks on images. ("If you are preferred to have an headache lol").. i used table more often.. aside it load fast, you can divide the box to row and column.

If you want to put spaces between your Images, you can do that by padding your cells with cellpadding= or spacing your cells with cellspacing= inside your <table> tag.
set the width= of how wide the table you want.

Text on the left side.
Picture in the middle.

And more text on this side

code:

<center><table width="85" cellpadding="5" cellspacing="5"> <tr><td valign=top><font color="BLACK" size="3" face="comic sans ms"> Text on the left side.<br><br>Image 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>

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.

YOUR TEXT GOES HERE
YOUR TEXT GOES HERE
YOUR TEXT GOES HERE

code:

Next I added <br> five times before the last picture. That forces 5 spaces above the last picture. Now you need to align the data in each cell. In the <td> tag just before the first Image I added align=center valign=top That will center the Image and place it at the top of the cell. In the <td> tag before the second Image I added align=center valign=middle This will align the Image vertically & horizintally in the center of the cell. Next I added align=center valign=bottom to the <td> tag just before the last Image. That will align the Image in the center at the bottom of the last cell.

code:

HHere's another example of how you can arrange your Images using a table. This time I am only using two columns. The column on the left has two pictures. I used <br> to force the pictures on top of each other, then added it two more times to add spaces between the two pictures. The cell on the right has one picture that is centered vertically & horizontally within the cell. If you are using one large picture and two small pictures, you can put the large one in the cell on the right.

code:

You can add a border to your table by adding border=2 or any other size you prefer.

11 August 2013

Scroll Box

Creating Your Box

Determine how big you'll need your box in both width and height to accommodate your contents; include in your estimation the height of the bottom scrollbar, as it will fill a small portion of the bottom of the box.

Vertical Scroll Box

To make a scroll box with a vertical scroll, you need to use overflow-y:scroll; This tells your browser to create scroll bars on the y (vertical) axis whenever the contents of the container is too big/high. ,.

I add overflow:scroll before the overflow-y:scroll and overflow-x:hidden.
I do this in case the browser doesn't recognize the overflow-y property

Code:

<div style="border:5px ridge LimeGreen; padding:5px; width:150px; height:50px; overflow: scroll; overflow-y: scroll; overflow-x: hidden;">
your about me goes here
</div>

Horizontal Scroll Box

To make a scroll box with a horizontal scroll, you need to use the overflow-x property. Specifically, you need to use this code: overflow-x:scroll;. This tells your browser to create scroll bars on the x (horizontal) axis.

By using overflow-x, we can create scroll bars when the contents of this div are wider than the container...To prevent vertical scroll bars from appearing, you need to use overflow-y:hidden; (the overflow-y property defines the vertical overflow). .

Code:

<div style="border:5px ridge LimeGreen; padding:5px; width:150px; height:100px; overflow-y: hidden; overflow-x: scroll;"> <p style="width:2505;">
your about me goes here
</p> </div>

Styling Your Box

However, you can use a table to create cells, designing a sort of modular side-scrolling layout. For instance, if you wanted four cells within your side scrolling box, each 200 pixels tall by 350 pixels wide, your HTML would look like this:

Cell 2

Cell 3

Cell 4

Code:

If you want to add more design in your scroll box, see the box shadow, border, background.

10 August 2013

Image Tips

Quick Tips to load your image fast

There's nothing worse then having to sit and wait while the images are loading on your wall.
Your visitors expect nothing less when they land on your site. You've only got a couple of seconds before they hit that back button.... and they are gone...

1. Size Your Image Correctly

Lets say you're trying to place an image with a file size of 68kB and height & width attributes of 550 pixels wide by 750 pixels high in a spot on your page that is designed to hold an image sized at 200 pixels wide by 300 pixels high.

To accomplish this you've changed the height & width attributes in your html code to 200 x 300.

You may think that since the image will be displayed at the lower size (200x300), the file size will be smaller and the image will load faster.

Not true. Regardless of what size attributes you use, that file size is still 68kb and it will load at the same speed any other 68kb image does.

Use an image editor to change the size of the image to the correct dimensions first. Then use the correct size attributes in your html. By resizing the image before you plug it into your html code, the file size will be smaller and the browser will load it quicker.

2. Animations

Animations are attention getters, but they quickly become annoying. They also slow down the loading of your page.

Limit the number of animated graphics on your page and set your annimation at a specific number of repetitions rather than allowing them to loop endlessly.

Avoid Text Graphics: some sites may need stylized text to make the page look attractive. However, you must remember that text in the form of an image. It is thus ideal to use the text styles in CSS and keep everything in text format instead.

3. Use the Correct Image Format

If your image is simple with a small number of colors try converting it to a gif format. Good choices for this are clipart, bullets, buttons, charts and such.

A word to the wise. Not all images are suited for the gif format. Complex images, photos or those with enhancements such as reflections and drop shadows don't display well in this format.

The jpg format is suitable for complex images with lots of color variations. A good example of this is a photograph.

The png format can be used for either. The high end png format produces a beautiful transparent image and maintains any enhancements you've included. The file sizes are generally higher so if you're at all concerned about load time, you may not want to consider the png format unless you have the software and skills to slice your images.

4. Limit the Number of Graphics you Place in your wall.

If your pages are loading too slow, consider removing some of the images. Keep only those that absolutely necessary.

5. Use Thumbnails

Instead of using big, bulky images use simple and Thumbnails that add a little color and draw the attention of a visitor. I use this technique when I have a lot of images I want to put on my page, but the image would be too big if I included them all at normal size.

6. Instead of using big, bulky images use simple and small icons that add a little color and draw the attention

Use background images whenever possible. This is usually a very useful tip for. Instead of using an image of width 400 which is a uniform design you can use just a part of that as a background fill. This reduces the size of the page as the image is small.

7.Keep checking your load time

Last but not least, before you decide on the final design of your wall, check if its load on time.

Background tips

A background image adds greatly to the visual appeal of a page. However, an image with large dimensions can take a great deal of time to loading on a slow connection, and if you place the background image code in the <div> section of an HTML, it can delay loading the page's main content. Select a technique to reduce the size of the image..

Step 1:

Convert the background image to the JPG format and compress it to reduce its size. Converting a PNG background image to JPG can result in a significantly smaller image that appears virtually identical. Many free image editing programs can convert a PNG file to JPG while allowing you to select a compression ratio that balances file size and image quality.

Step 2:

Use a solid color instead of an image for the page's background. Browsers can render solid colors without loading, contributing greatly to reduced loading times.

List

Bulleted List

To create a bulleted list you need to add a <u> and a </u> tag at the beginning and the end of the list.

N umbered lists have <ol> tags instead of <ul> tags.

To separate single list items use <li> and </li> tags.

There are special settings that you can use to customize the lists on your page.

The following example shows a bullet list with three items.

LOOKS LIKE THIS:

first text
second text
third text

code:

<ul>
<li>first text</li>
<li>second text</li>
<li>third text</li>
</ul>

following bullet options:

disc
circle
square

Makes a bulleted list using the default bullet type:

<ul type="disc">	Starts a bulleted list using discs as bullets: First text Second text
<ul type="circle">	Starts a bulleted list using circles as bullets: First text Second text
<ul type="square">	Starts a bulleted list using squares as bullets: First text Second text

Numbered List

Shows how to make different kinds of numbered lists.

You have the following number options:

Plain numbers
Capital Letters
Small Letters
Capital Roman Numbers
Small Roman Numbers

In addition to these options you can specify at which number the list should start. The default start value for numbered lists is at number one (or the letter A).

Makes a numbered list using the default number type:

LOOKS LIKE THIS:

text
text
text

code:

<ol>
<li>first text</li>
<li>second text</li>
<li>third text</li>
</ol>

examples to see the detailed syntax.

<ol start="5">	Starts a numbered list, first # being 5. First text Second text
<ol type="A">	Starts a numbered list, using capital letters. First text Second text
<ol type="a">	Starts a numbered list, using small letters. First text Second text
<ol type="I">	Starts a numbered list, using capital roman numbers. First text Second text
<ol type="i">	Starts a numbered list, using small roman numbers. First text Second text
<ol type="1">	Starts a numbered list, using normal numbers. First text Second text
<ol type="I" start="7">	An example of how type and start can be combined. First text Second text

tricks

Style Image

List item two
List item two
List item two

code:

<ul style="list-style-image: url(IMAGE URL);">
<li>first text</li>
<li>second text</li>
<li>third text</li>
</ul>

NESTED LISTS

List Item 1

first text
second txt

List Item 2

first text

code:

<ol type="1">
<li>List Item 1</li>
<ol type="a">
<li>first text</li>
<li>second text</li>
</ol>
<li>List Item 2</li>
<ul>
<li>first text</li>
</ul>
</ol>

ORDERED<li>TYPES

text
text
text
text
text

code:

TYPE:

first text
second text
third text

code:

<ul>
<li type="disc">first text</li>
<li type="circle">second text</li>
<li type="square">third text</li>
</ul>

08 August 2013

Scroll Txt

- > > > SCROLL TEXT < < < -

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

NOTE: we can't set the marquee speed and behavior!

any special effects not working in FFSng now...

direction=up RUBY..direction=up
code:

<marquee direction=up height=50>direction=up</marquee>

direction=down

RUBY.direction=down
code:

<marquee direction=down height=50>direction=down</marquee>

direction=left
RUBY

code:

direction=right RUBY

code:

with border
RUBY......

code:

with background
RUBY

code:

The splitting effect with color:
RUBY...RUBY...

code:

The crashing effect with color:
RUBY...RUBY...

code:

<<<Opposite Direction Marquees>>>

code:

Your words hereYour words here

code:

<marquee direction=left width=50%>Your words here</marquee><marquee direction=right width=50%>Your words here</marquee>

Txt/Image LINK

TEXT LINK

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.

code:

How To Change Hyperlink Color

There are several ways to change the color of hyperlinks. This section reveals how to do this by adding the style attribute to the hyperlink code, inserting a color property into the style attribute then giving the color property a color value.

code:

How To Remove Underline From Hyperlink

There are several ways to remove the hyperlink underline. This scetion shows how to do this by adding the style attribute to the regular hyperlink code, adding the text-decoration property and giving the text-decoration property a value which in this case is none.

code:

How To Change Hyperlink Underline Color

Changing the underline color of a hyperlink cannot be done with straight HTML. To do this, we take the regular hyperlink code and add an inline CSS style to it. The underline first has to be removed with the text-decoration property value of none and then we add the border-bottom property with 3 short-hand CSS values of 1px solid #999999.

:1px

:solid

:#999999

code:

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.

This is Auto change

code:

If you don't want the border, specify border: 0px.

UID (User ID), and how do I find it?
UID is a unique number assigned to your profile.

EXAMPLE:

My link

At the top of your browser, you will see a URL that looks like this:

http://ffsng.com/?uid= 5087&h=96ff7223

the yellow Bg was my uid. The number at the end of the URL

NOTE: If your uid didn't appear, click your owner/pets picture then click your picture.

07 August 2013

Cursor

paste this code inside the div ,p and span tag..

The nice thing about this trick.. you can use 2 or more cursor..

cursor: url(CURSOR URL), auto;

EXAMPLE:

In the box - div tag: It looks like this;

<div style="border: 5px dotted #FFD700; cursor: url(CURSOR URL), auto;">dotted </div>

You have to build a separate box (not layer)..

In the p and span tag: It looks like this;

Note: cursor only works inside the about me..

you can find lots of cursor here.

To save your time, point the cursor into the image then right click look for COPY IMAGE URL, you have the cursor URL less than a second,..

06 August 2013

About ME

It's been 6 years when i first met web a 6 years of exploring and i could say my knowledge still isn't enough, i'm still learning. I hope i answer your problem about codes, If you don't understand some tutorials, Don't hesitate to ask me more, you can reach me on my Facebook or my FFS., i'll do my best to help. i made all those codes fit on FFSng.. i'll update this site daily, i will add more tricks when i have more idea.

Special Thanks to my very Dear friend Boss.. he made my graphic logo. I'm not that good in editing image, whenever i need help about pictures. i call his name. I love this man with all my heart, <3.

more image soon....

My FFs Journey

I'm a Silent type of person, I didn't talk that much like others do,.
I'm not popular, But i have good friends. I'm not rich But i have what i need. I may not be like, but i know i'm loved. That's the most Important thing...

Box Border

So the first thing we do building our walls in FFSng are the Box which in About me..
lets start in the Basic. the border

Border Widths, Styles, and Colors

The width of borders (border-width)

The width of borders is defined by the property border-width, which can obtain the values thin, medium, and thick, or a numeric value, indicated in pixels.

The color of borders (border-color)

The property border-color defines which color the border has. The values are the normal color-values for example "#FF0000", "rgb(255, 0, 0)" or "red" .

Types of borders (border-style)

The border-style property specifies what kind of border to display.
None of the border properties will have ANY effect unless the border-style property is set!

There are different types of borders to choose from.

<div style="border: 5px solid #FFD700;">solid </div>

<div style="border: 5px double #FFD700;">double </div>

<div style="border: 5px dashed #FFD700;">dashed </div>

<div style="border: 5px dotted #FFD700;">dotted </div>

<div style="border: 5px groove #FFD700;">groove </div>

<div style="border: 5px ridge #FFD700;">ridge </div>

<div style="border: 5px inset #FFD700;">inset </div>

<div style="border: 5px outset #FFD700;">outset </div>

Layering the border

WE can layer the border such as solid dotted solid

You can create 4 or more layers.

Border Syntax

Top - This value gets assigned to the top portion of the border
Right - This value gets assigned to the right portion of the border
Bottom - This value gets assigned to the bottom portion of the border
left - This value gets assigned to the left portion of the border

NOTE:Without using this border-style property you won't see any borders at all.

Syntax:
border-color: (top) (right) (bottom) (left);
Syntax:
border-color: #CD6889 #8968CD #4493A0 #FFD700;

Border Color

<div style="border-width:6px; border-color: #CD6889 #8968CD #4493A0 #FFD700; border-style: solid">your about me goes here </div>

Border Styles

<div style="border-width:6px; border-color: #CD6889 #8968CD #4493A0 #FFD700; border-style: solid dotted groove double; ">your about me goes here </div>

Border Width

<div style="border-width:6px 10px 15px 20px; border-color: #CD6889 #8968CD #4493A0 #FFD700; border-style: solid dotted groove double; ">your about me goes here </div>

It can be use as divider

Each side of the border can be handled separately.

<div style=" border-top : 4px dotted red ;">testing</div>

<div style=" border-right : 4px dotted red ;">testing</div>

<div style=" border-bottom: 4px dotted red ;">testing</div>

<div style=" border-left : 4px dotted red ;">testing</div>

04 August 2013

Font Style

DIFFERENT FONT
This page shows you how you can specify different types of fonts for the text of your wall

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

02 August 2013

Tutorial

Intro

COLOR-VALUE

Box

Text

Image

Music

Youtube

Intro

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>

Stand alone HTML tags

A few tags don’t have end tags.
These are tags that are stand-alone structure,
and don’t need to contain content to be meaningful.
Line-break. Starts a new line.

<br>

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.

<title> TAG

This tag goes in the document’s head section, and isn’t displayed on the web page itself. It says what the title of the web page is, and is displayed in the browser’s title bar (very top).

FFSng page tutorial

29 March 2017

box background

04 April 2014

Text Effects

Resizing Image

20 September 2013

Text_Decoration

Text Align

Image Aligning with Text

18 September 2013

Spacing Your Images

12 August 2013

Image Alignment Using Table

11 August 2013

Scroll Box

10 August 2013

Image Tips

Background tips

List

08 August 2013

Scroll Txt

Txt/Image LINK

07 August 2013

Cursor

06 August 2013

About ME

Box Border

04 August 2013

Font Style

02 August 2013

Tutorial

Intro

MENU

About Me

Blog Archive

Total Pageviews

Followers