Basic HTML for Bloggers

From a comment on Facebook

- plus simple stuff I use on a regular basis

TEXT

<b>bold</b> or <strong>....</strong>
<i>italicize</i> or <em>....</em>
<u>underline</u>

<s>strike through</s> or <del>...</del> or <strike>..</strike>

FONT SIZE

<font size=#>Font</font> - # = 1-7 (most fonts you see on any website are 2 or 3)

FONT TYPE

<font type="name"> replace name with "Verdana" "Times New Roman" "Comic Book Sans" etc

Your range of fonts depends on what fonts you have on your computer.

Common Fonts =  Arial, Helvetica, sans-serif, Verdana, Geneva, sans-serif,  Times New Roman, Times, serif, Georgia, Garamond, Palatino,Courier New, Courier, monospace

Using Back up fonts    <font face="Digital, Arial, Helvetica, sans-serif">text</font>

FONT COLOR

<font color="color"> There are a couple different ways to do color

HTML will recognize most common colors by name. Named Colours =  Black, Silver, Gray, White, Maroon, Red, Purple, Fuschia, Green, Lime, Olive, Yellow, Navy, Blue, Teal, Aqua

There are also numeric codes for colors. See here: http://www.computerhope.com/htmcolor.htm

COMBINE YOUR CODES

These codes can all be combined!

<b><font size=4 color="Green">HAPPY <i>PIZZA DAY</i></font></b>

CLOSE YOUR TAGS

You can stick a tag (HTML code) anywhere and close it anywhere.
But it's very important to close your tags with the </ > sign
Otherwise everything below the first tag will be changed.

HORIZONTAL LINES

<hr>        draws a line across the page

<hr width="100">    horizontal line thickness

<hr width="#%"> Place any number 1-100 in for the #, a straight line will go across the screen, taking into regard to how much of a percentage you used. This is usually auto-centered.


TEXT PLACEMENT

<br> Separates / breaks lines. It's like hitting enter on your keyboard.

&nbsp;        one non-breaking space

<p> .... </p> - Creates paragraphs

<blockquote>TEXT</blockquote> - Centers a block of quoted text

<q>..</q>        quote within a blockquote

<center>Centers Text</center>

<p align="left">places text on the farthest left side of the page</p>

HTML does this automatically, You will rarely ever have to use this unless you create a table which is auto-set to Center everything already.

<p align="right>places on text on the right side of the page</p>

LINKS

<a href="URL">Site Name</a> - URL = website. eg - http://www.fulladdress

You can add more to the link

<a href="url" target="_self"> - opens in window / tab that already open

<a href="url" target="_blank"> - opens page in new tab / window

<a href="url" target="_parent"> - opens in original tab
<a href="url" target="_top"> - opens up on top of everything else -

Link Email    <a href="mailto:EMAIL ADDRESS">TEXT</a>

IMAGES

<img src="url"> - That's the basic jist of it

If you have an image saved on your computer, it's easy to create a Flickr, Photobucket, ImageShack or Buzznet account - you can google them, I know you can!

When you upload the picture, the site will give you a url that will end with a  .jpg or .gif or something of that nature

When you put it in your web browser address, it'll only be that picture. Stick it in where it says url in the tag and you're all set

<img src="url" width=# height=#> Holy Banana Bots Batman, My picture is way too big!

IMAGE SIZE

Let's take this generic picture everyone has seen; http://www.google.com/intl/en_ALL/images/logo.gif

Right click the picture and go to properties and it should display that it is Width:276px by Height:110px. We want to halve it for some reason! [perhaps too big to fit in your profile.] So take half of each amount and your html should look like this;

<img src="http://www.google.com/intl/en_ALL/images/logo.gif" width=138 height=55>

One more tiny thing for images; let's add some secret text just to be sneaky for no real reason
<img src="http://www.google.com/intl/en_ALL/images/logo.gif" width=138 height=55 alt="Google: Selling out the Public faster than you can say Net Neutrality"> [In those quotes, you can fit anything you want]

So let's say that link to your group just isn't enough, you want everyone to know more obviously by a ginarmous picture on your page, telling you to join.

<p align="right"><font size=4 color="Red"><b>Join the <a href="http://apps.facebook.com/ability/group/132" target="_blank"><font color="Grey"><u>Illuminati</u></font><font color="red">!</font></p>
<center>
<hr width=75%>
[br][br][br]
<img src="http://profile.ak.facebook.com/profile5/318/72/n574252536_9144.jpg" alt="Rockin' Harder Than Ness!">
</a></font>

The following tags have been noted to not work;

<embed src> [movies/music]

(When you see moving pictures in people's profiles, those are actually specially created .gif's. You can find them on the Internet if you look them up. Use the <img src> tag for them.
<bg> [background.... images, colors and etc. I tried to include the body tag to make sure but it just cleared my whole profile.]

Use this link to reset your profile: http://apps.facebook.com/ability/editProfile?name=YOURNAME&aboutme=RESET&saveChanges=true

Use this link to reset your group:
http://apps.facebook.com/ability/editGroupInfo?name=GROUPNAME&description=GROUPDESCRIPTION&hqLocationId=1&needApprovalToJoin=on&shareExpSameLoc=on&saveChanges=true


Ems         text units that set the size relative to whatever parent element the text is contained in. For instance: p {font-size: 10pt; } strong {font-size: 1.5em; }

Font Type    <font face="Arial">text</font>

        if fonts have multiple-word names, wrap some double-quotes
        around the whole name
font color        <font color="COLOR">TEXT</font>
font color        h1 {color: red; }