Over 16,532,544 people are on fubar.
What are you waiting for?

I'm going to make an attempt to write something that people may be able to use to learn how to write html code. In this example, I will use an actual banner I made recently and pic into each element I used. This isn't by far everything you can do with coding, but it may work for some.

This is the exact code I used when I added it to my setting "About Me" tab:

<center><font color="B0B0B0" size="9">Saturday, November 26</font></center></p><marquee direction="left"><font color="red" size="7" face="Old English Text MT"><a href="http://fubar.com/6640827" target=_blank">Sweet Sassy Syleigh</a></font></marquee></p><marquee direction="right"><font color="white" size="4">is going for</font></marquee><center><font color="Blue" size="9" face="Lucida Calligraphy">2,500 Likes!!!</font><br><p><font color="909090" size="3" face="Cooper Black"></font></p><p><font color="red" size="4">while we're at it</font> <font color="909090" size="3">Let's make it</font></p><p><font color="FFFFFF" size="4">3,000 </font> <font color="909090" size="3"> </font></p><font color="blue" size="4"> <font color="909090" size="3"> </font></p><font color="Blue" size="5" face="Lucida Calligraphy"> </font></center><center><a href="http://fubar.com/6640827" target="_blank"><img src="http://b.pcc3.fubar.com/72/80/6640827/1727301329.jpg"></a><p><font size="10" color="1859FF">Click <a href="http://fubar.com/sweet-sassy-sleigh/b360876-1311942" target="_blank">HERE </a> for code.</font><font color="white" size="4">Send a friend!</font></center>

Let's pick this out one line at a time:
<center><font color="B0B0B0" size="9">Saturday, November 26</font></center><marquee direction="left"><font color="red" size="7" face="Old English Text MT">
<center> means that everything after that and before </center> will be centered in the block.
<font color="B0B0B0" size="9"> All text following this and before </font> will be a ligher shade of grey. Note that when each pair of numbers, hexidecimal, are equal, then it's one of the 256 shades between pure black 000000 and pure white FFFFF. 010101 would be the darkest shade and FEFEFE would be the lightest shade of pure grey before white.
</font>ends this font feature and returns it to default.
</center>ends centering. The next items would be left justified.
<marquee direction="left">Everything following this will scroll toward the left until </marquee> comes.
<font color="red" size="7" face="Old English Text MT">Red is the same as FF0000. One of 140 named colors.
face="Old English Text MT" you have to specify the exact title including spaces, which is why they are in quotes. Like other font tags, this stays in effect until the <font tag>

<a href="http://fubar.com/6640827" target=_blank">Sweet Sassy Syleigh</a></font></marquee>

<a href="http://fubar.com/6640827" the letter "a" stands for "Anchor". HREF stands for HyperReference, the technical term for a "Clickable Link". The full address must be in quotes. You can see that this is a fubarprofile link.

target="_blank"> indicates that this will open a new tab

 Sweet Sassy Sleigh is the text that will scroll to the left in the Old English Font, and be size 7.

</a> ends what is a clickable link

</font> ends the Old English Size 7 Red text

</marquee> ends the scrolling text.

<marquee direction="right"><font color="white" size="4">is going for</font></marquee>

<marquee direction="right> Indicates everything will scroll toward he right until the </marquee

<font color="white" indicates pure white or FFFFFF and size="4" indicates it's larger than normal, but not really that big.

</font> ends this, and </marquee> ends the scrolling.

<center><font color="Blue" size="9" face="Lucida Calligraphy">2,500 Likes!!!</font><br><p><font color="909090" size="3" face="Cooper Black">

Centered, color blue, large size 9 and the font face Lucida Calligraphy. </font>ends this. <p>Starts a new paragraph. This stays in effect until the </p> appears

The next font is small and another type face.

</font></p><p><font color="red" size="4">while we're at it</font> <font color="909090" size="3">Let's make it</font></p>

Note the </font> appears with no text. This is a placeholder I created in case I want to add more text to this, maybe to describe it in greater detail.

</p>ends that paragraph and </p> starts a new one. You don't have to include a carraige return this way. One more font tag with text with an end and another paragraph ending

<p><font color="FFFFFF" size="4">3,000 </font> <font color="909090" size="3"> </font></p><font color="blue" size="4"></font>

More of the font combinations.

<font color="909090" size="3"> </font></p><font color="Blue" size="5" face="Lucida Calligraphy"> </font></center><center>

Even more font combinations.

<a href="http://fubar.com/6640827" target="_blank"><img src="http://b.pcc3.fubar.com/72/80/6640827/1727301329.jpg"></a>

<a href=" is another hyperlink that opens in a new tab.

<img src="xxxxxxxxxxxxxxxxxxx.jpg" this is adding an image. You must specify the actual link to the image, not the webpage the image appears. This makes a clickable image with no text involved. </a> ends the hyperlink.

<p><font size="10" color="1859FF">Click <a href="http://fubar.com/sweet-sassy-sleigh/b360876-1311942" target="_blank">HERE </a> for code.</font><font color="white" size="4">Send a friend!</font></p></center>

<p>Start a paragraph. <font starts a new text setting. <a href="xxxx" is a link to the blog page where the code can be found. The word "HERE" is the only thing clickable. </a> ends the link. </font ends the text style, </p>ends the paragraph, and </center> ends all centering.

This one is sometimes strange, but don't think it too hard.

<a href="http://www.com/">LINK</a>

EVERYTHING between the two is clickable so be careful. You can make it one word, one sentence, a whole paragraph and even an image that can be clicked to go to another page. It can also be set up to open a separate tab.

<a href="http://fubar.com/home.php">Go to Fubar Home Page</a>

Go to Fubar Home Page

To make an image clickable, add the <img src=""> tag

<a href="http://fubar.com/home.php"><img src="http://fubar.com/imgs/logo_bubbles_2.gif"></a>

 Clicking this will open Fubar in this tab.

To make clicking open a new tab, add target="_blank"

<a href="http://fubar.com/home.php" target="_blank"><img src="http://fubar.com/imgs/logo_bubbles_2.gif"></a>

 Clicking this will open Fubar in a new Tab.

How to add images

Imaging is done with the <img src="http://www.com/.jpg"> Tag

There is no such </img> closer.

img for image, src for source

The full html address for the image is placed between quotes.

If you see an image on any public website, you can add it like this.

To add the CNN dot com logo, go to the website, right click the image, then click "Copy Image Url" paste it between quotes as below.

<img src="http://i.cdn.turner.com/cnn/.e/img/3.0/global/header/hdr-main-new.png">

 

You can alter the size or alignment. Add alt="CNN Logo" to make that appear when the mouse is hovered over the image.

Add height="hhh" for the height in pixels and width="www' for the width in pixels. If you don't keep the proportion. you will stretch the image.

CNN Logo

<img src="http://i.cdn.turner.com/cnn/.e/img/3.0/global/header/hdr-main-new.png" style=width:300px;height:200px;">

The scrolling text

>The "marquee" not to be confused with marquis is how to make text scroll

Everything between <marquee> and </marquee> will scroll from right to left.

<marquee>Scrolling Text</marquee>

Scrolling Text

The problem with this blog, is that it will not display scrolling marquee text, you have to trust it will work your PM messages and profile comments. This is because this allows displaying HTML in its raw form, code used within the blog would make it behave weird.

If you don't have the </marquee> in the right spot, it may cause undesirable effects.

To see how I put together my scrolling big red thank you, copy this:

<marquee><h1><font color="red">Thank You!!!</font></h1></marquee>

Thank You!!!

Note: I close each HTML tag in the opposite order it was opened.

Next lesson, how to add images.

Another way to change font size is within the FONT tags.

This is used with or without the other extras such as color

<font size="1"> Size 1 </font> Size 1

<font size="2"> Size 2 </font> Size 2

<font size="3"> Size 3 </font> Size 3

<font size="4"> Size 4 </font> Size 4

<font size="4" color="purple"> Size 4 Purple </font> Size 4 Purple

Note both require quotes, but are combined to do both. One </font> to close. Higher numbers may be used for even larger size.

The "font" tag is in current versions of HTML, but in the future it will be replaced and incorporated with the paragraph <p> tag.

<font> by itself does nothing. To make it do something, you have to add one or more extras.

<font colo="color"> or <font color="xxxxxx">  will change the color of all text until the </font> tag.

Quotation marks are REQUIRED.

The basic color names can be used, including red, blue, black, brown, orange, pink, purple, grey, white, silver. Any of 140 different established colors can be used as well, this link shows them, with their HEX numbers for referencing.

<font color="red">Red Text</font>Red Text

<font color="blue">Blue Text</font>Blue Text

Now to get special colors, use the hexideximal format. xxxxxx

First two are hex 00 throug FF or 256 shades or red.

Second two are hex 00 through FF or 256 shades of green

Third two are hex 00 through FF or 256 shades of blue.

You can do the math to work out 16.7 million different colors.

All 000000 is black or the absense of all color. FFFFFF is white or the sum of all color.

If each "pair" is the same, it will be one of 256 shades or pure grey.

404040 is dark grey, 808080 is medium grey, C0C0C0 is light grey.

<font color="FF0000">Red Text</font>Red Text

<font color="00FF00">Green Text</font>Green Text

<font color="0000FF">Blue Text</font>Blue Text

To make red darker

<font color="C00000">Darker Red</font>Darker Red

<font color="800000">Dark Red</font>Dark Red

<<font color="400000">Very Dark Red</font>Very Dark Red

To make red lighter, add equal green and cyan.

<font color="FF4040">Light Red</font>Light Red

<font color="FF8080">Pink</font>Pink

<font color="FFC0C0">Light Pink</font>Light Pink

There are literally 16 million colors, I cannot possibly explain them but experiment with them.

Lesson two

How to change size of text.

There are two ways. One is using one of the six "Heading" tags

They are <h1> through <h6> 

Here are the examples. The first line is the HTML code, the second line is what will display.

<h1>Heading 1</h1>

Heading 1

<h2>Heading 2</h2>

Heading 2

<h3>Heading 3</h3>

Heading 3

<h4>Heading 4</h4>

Heading 4

<h5>Heading 5</h5>

Heading 5

<h6>Heading 6</h6>

Heading 6

Next lesson. the "Font" tag.

Lesson one

There are a few things to know about HTML which stands for Hyper Text Markup Language.

Each thing that makes text do something has "TAGS" attached to it.

Most tags have an "open" and a "close" but a few are by themselves.

Each tag, open or close has < and > characters to start and end them. Some tags openings have optional or mandatory options as well.

The "close" tag is the same the "open" but with a / character.

The tag to create a line break is <br> there is not close tag for it. You can use multiple "breaks" to create blank lines

<br><br><br> creates three blank lines

Paragraph outlines the beginning and ending of a paragraph. It will keep line spacing without having to use "break" until you close it.

<p>Paragraph of text</p> This tag isn't used that much.

Next lesson will be changing the size color of text.

last post
7 years ago
posts
8
views
2,027
can view
everyone
can comment
everyone
atom/rss

other blogs by this author

 6 years ago
Banners
 6 years ago
Fubar for Dummies
 6 years ago
What's on my mind
 6 years ago
Fubar Suggestions
 6 years ago
Leveling
 6 years ago
Player Advisory Board
 6 years ago
Eclipse 2017
 6 years ago
Tough Achievements
 6 years ago
High Value Polish
blogroll (list of blogs that the blogger recommends)
official fubar blogs
 8 years ago
fubar news by babyjesus  
 13 years ago
fubar.com ideas! by babyjesus  
 10 years ago
fubar'd Official Wishli... by SCRAPPER  
 11 years ago
Word of Esix by esixfiddy  

discover blogs on fubar

blog.php' rendered in 0.0752 seconds on machine '189'.