Over 16,537,508 people are on fubar.
What are you waiting for?

Just Jeremy's blog: "Banner Codes"

created on 08/03/2015  |  http://fubar.com/banner-codes/b364137  |  3 followers

Learning HTML tags..

Some of you don't know how to <center> your images and text so I am going to give you a quick tutorial.

This will help make your page look a little nicer.

 

One thing you must remember is that almost everything has an opening and a closing tag.

Opening Tag - <center>

Closing Tag - </center>

 

Use those two tags before and after your code to center an image and/or text.

 

Example.. 

Welcome to my web page!

To center that you simply do this.

<center>Welcome to my web page!</center>


Notice:I have the <center> tag before the text/code. And I have the </center> tag after the code.

 

Now let's say you want to add an image and make it centered on your page..

So let's take this code..

<a href="http://fubar.com/justjeremy" target="_blank"><img src="http://i376.photobucket.com/albums/oo203/KingJeremy74/fubar/Just%20Jeremy/pro-me_zpsmzdkdr6o.gif"></a><br><a href="http://fubar.com/help-me/b364137-1275600" target="_blank"><img src="http://i376.photobucket.com/albums/oo203/KingJeremy74/fubar/Just%20Jeremy/done_zpsvmmgh8ti.gif"></a>

And center it on your page..

Example:

<center><a href="http://fubar.com/justjeremy" target="_blank"><img src="http://i376.photobucket.com/albums/oo203/KingJeremy74/fubar/Just%20Jeremy/pro-me_zpsmzdkdr6o.gif"></a><br><a href="http://fubar.com/help-me/b364137-1275600" target="_blank"><img src="http://i376.photobucket.com/albums/oo203/KingJeremy74/fubar/Just%20Jeremy/done_zpsvmmgh8ti.gif"></a></center>

 

Notice again it has the <center> tag before the code. And it has the </center> tag after the code.

That will center the image on your page.

 

You need to do the same thing with <font> tags..

Example:

Let's take.. Welcome to my web page! And turn it red.

Your code would look like this.

<center><font color="#FF0000" size="4">Welcome to my web page!</font></center>

There you see I have a <center> tag to center it.

I have an opening <font tag to change the font color and size.

I have a closing </font> tag to end the font color and size.

And then I have the closing </center> tag to end the end code.

Anything you add below that point "without" a center tag will NOT be centered unless you add those opening and closing tags.

 

Underlining, making bold text, or making it italic..

To underline text is rather simple. But again you need an opening and closing tag to do so.

Example: Welcome to my web page! would look like this this when coded.

<u>Welcome to my web page!</u>

Example:  Welcome to my web page!

Centered: <center><u>Welcome to my web page!</u></center>

Centered Example: Welcome to my web page!

Make it red with biger font: <font color="#FF000" size="4"><u>Welcome to my web page!</u></font></center>

Make it bold with bigger font:  <font color="#FF000" size="4"><b><u>Welcome to my web page!</u></b></font></center>

Make it bold with bigger font, underlined, and italic: <font color="#FF000" size="4"><b><u><i>Welcome to my web page!</i></u></b></font></center>

The <u> starts the underline command.

The </u> closes the underline command.

Example: Welcome to my web page!

The <b> starts the bold text command.

The </b> ends the bold text command.

Example: Welcome to my web page!

The <i> starts the italic text command.

The </i> ends the italic text commnd.

Example: Welcome to my web page!

Use all the 3 to make it look like this.

Welcome to my web page!


Using image tags to add an image to your page..

One thing I see a lot on Fu in peoples coding is they add a closing </img> tag..

This is NOT necessary! It bugs me when I see that in coding as I know it's not proper.

The proper way to add an image is simply like this.

<img src="http://i376.photobucket.com/albums/oo203/KingJeremy74/fubar/Just%20Jeremy/done_zpsvmmgh8ti.gif">

There is NO closing </img> tag on that.

To make a link clickable is just as easy.

<a href="http://fubar.com/help-me/b364137-1275600" target="_blank"><img src="http://i376.photobucket.com/albums/oo203/KingJeremy74/fubar/Just%20Jeremy/done_zpsvmmgh8ti.gif"></a>

Using the code above when the image is clicked on will take you to my "help me" blog post.

Breaking it down:

<a href= makes the code a hyper link, which means it can be clicked on.

</a> is the closing tag and will make anything put after that code NOT clickable.

target="_blank" makes it so the link will open in a new tab/window.

 

Adjusting the size or height and width of an image..

Adjusting the size of images is simple. Simply add a height and width attribute to do so.

Example:

<a href="http://fubar.com/help-me/b364137-1275600" target="_blank"><img src="http://i376.photobucket.com/albums/oo203/KingJeremy74/fubar/Just%20Jeremy/done_zpsvmmgh8ti.gif" height="450" width="350"></a>

 

Adding an <alt> tag attribute..

The <alt> tag will make it so that when you hover an image a small area appears on the image describing what the image may go to..

Example:

<a href="http://fubar.com/help-me/b364137-1275600" target="_blank"><img src="http://i376.photobucket.com/albums/oo203/KingJeremy74/fubar/Just%20Jeremy/done_zpsvmmgh8ti.gif" alt="Help Me" height="450" width="350"></a>

The alt attribute here says that it's for my "Help Me" blog post. Of course you can put anything in the alt area. But it should be something that descrbes what the image leads to once clicked.

 

Creating a space between images and/or text..

To create a space is a very simple tag and does not need a closing tag.

Using a <br> tag will cause your image or text to have a space between them.

Here in Fu you really don't need these <br> tags. Just hit Enter a time or two to create spaces.

The <p> tag is essentially the same thing. Except it willjump 2 lines instead of just one like the <br> tag does.

it's aka the Paragraph tag. Also not needed in Fu.

 

Using an <hr> tag..

The <hr> tag is used more as a generic looking divider line.

 


 

As you can see above.. The line breaks and more or less divides or seperates certain areas.

 


 

You can set attributes for this as well.

Example:

<hr width="300"> That will cause the line to only be 300 pixels long.

<hr width="300" color="#FF0000"> This will cause the line to be 300 pixels long and red in color.

Unfortunately. FU does not allow us to show an example of a colored <hr> line.


 

For a complete list of hex color codes go here..

http://www.color-hex.com/

 

 

There is some tricks that I can do that I have yet to see anyone else do on Fubar.

Sorry! But I can't give away those secrets. I like to be more unique than others. :)

 

Good luck and hope that helps some of you!

 

To be continued...

 

I will add more as I think of other tags..

If you have one you think I need to add.. please don't hesitate to tell me. Thank you. :)

Leave a comment!
html comments NOT enabled!
NOTE: If you post content that is offensive, adult, or NSFW (Not Safe For Work), your account will be deleted.[?]

giphy icon
last post
8 years ago
posts
11
views
2,814
can view
everyone
can comment
everyone
atom/rss

recent posts

other blogs by this author

 8 years ago
FuHelp with Drinks
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.1137 seconds on machine '6'.