Thursday, 26 April 2012


Justify Text


Look at the code for justifying text:
<p align="justify">bla bla bla bla blablabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
</p>

It creates this justified text: 
bla bla bla bla bla bla blablabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla 

(Unjustified text:
bla bla bla bla bla bla bla bla bla bla bla blablabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
See the difference?)

That is how you justify text. 

Blockquote Tips


Blockquote makes a small text box that is indented, as in a quote.
This text is a little to the right because of the blockquote tag. To learn how to make a blockquote like this one, continue reading HTML Tips and Tricks.

To make a blockquote, simply copy and paste the following HTML code:
<blockquote>Text Text Text</blockquote>
Finally, change the "Text Text Text" message to suit your needs.
Result:
Text Text Text

Pre-Formatted Text


These tips and tricks will allow you to have greater control over text.

To preformat text, you will need to look at the following html:

<pre>
      This text is
           preformatted
</pre>


It will display the following:


      This text is
           preformatted

If you simply were to remove the <pre> tag, like this:
      This text is
           preformatted

Then this text would be displayed:

This text is
preformatted


Here is another example of the uses of preformatting text.

Text Formatting tips

Plain old text needs a few html tips.
That is why I will show some html which will improve plain old text.

Html Tip 1: To insert plain old text simply insert any text between the <body> and </body> tags.
Example:
This is html text
Code:
This is html text

Html Tip 2: To make text bold, underlined, or be in italics, add the corresponding tag on the sides of the text.
To make text bold, insert the <b> and </b> tags on the sides of the text.
To make text in italics, insert the <i> and </i> tags on the sides of the text.
To make underlined, insert the <u> and </u> tags on the sides of text.
And, finally, here is a bonus tip:
You can put a line through text by placing the and tags on the sides of the text.
Example:
This is html text in italics.
Code:
<i>This is html text in italics</i>

Html Tip 3: To change the font itself, font size and colors, look at this:
To change the color:
add the <FONT COLOR="color name in english"> and </font color> to the sides of the text.
To change the font size:
add the <font size=number from 1-7> and </font> to the sides of the text.
To change the font:
add the <font face="font name"> and </font> to the sides of the text.
In addition, you can put commas between different fonts like this:
<font face="artistik,arial">This can be in different fonts.</font>
This html code creates text which will be in the artistik font. However, if the computer does not have an artistik font, then the text will be written in arial.
Here is what the html does on your computer:
This can be in different fonts
Here is another example of changing the font size, text or colors:
<font color="red">This is html text in red</font>
And that creates this:
This is html text in red
And finally, another example for people who really like changing fonts:

<b>
<font color="red" font size=5 font face="artistik,times,arial">Fancy html text</font>
</b>

Bullets and Lists

These html tips and tricks will help you put bullets and lists on your blog.

Let's start with simple bullets.

For this html tip, look at this bullet:

  • This is next to a bullet

  • It was made with this simple HTML code:
    <li>This is next to a bullet</li>
    Insert the above code to your web page,
    and then change the message to suit you needs.

    ...And now let's end with more advanced tips, concerning lists.


    To make numbered bullets,

    1. Like these

    2. ones
    use this HTML code instead:
    <ol><li>Like these</li>
    <li>ones</li></ol>

    Note that the <ol> is only put at the extremes of the list.



    There are also some tips and tricks that will allow different types of bullets:

    1. Lower Case Roman Numerals
    HTML Code:
    <ol type="i"><li>Lower Case Roman Numerals</li></ol>

    1. Upper Case Roman Numerals
    HTML Code:
    <ol type="I"><li>Upper Case Roman Numerals</li></ol>

    1. Lower Case Alphabet
    HTML Code:
    <ol type="a"><li>Lower Case Alphabet</li></ol>

    1. Upper Case Alphabet
    HTML Code:
    <ol type="A"><li>Upper Case Alphabet</li></ol>


    Finally, text inside these bullets can be formatted with this tip.

    Links and Images Basics


    These tips and tricks will teach you how to put a link or an image into an html page.

    To put a link, use the following code:
    <a href="http://google.com">Google</a>
    The result is as follows:
    Google
    Make sure you change "http://google.com" to the address of the site that you want to link to and that you change "Google" to the text that you want users to see.

    To put an image into your web page, use the following code:
    <img src="http://www.google.com/intl/en/images/logo.gif">
    The result of that code is as follows:

    Make sure that you change "http://www.google.com/intl/en/images/logo.gif" to the address of the image you want to display.

    So those are two basic html tips!


    Customize  Headings



    These html tips and tricks will show you different types of headings.


    Look at the following html code:
    <h2>Heading 2</h2>
    It creates this heading:

    Heading 2



    Now looking at this html code:
    <h3>Heading 3</h3>
    It now creates this slightly smaller heading:

    Heading 3



    The 2 and 3 in H2 and H3 can be changed to any number between 1 and 6 to make different sorts of headings.
    Here is an example of some code that uses headings:
    <h4>Heading 4</h4>
    Heading 4 is the fourth most important heading.
    <h5>Heading 5</h5>
    Heading 5 is the fifth most important heading.

    The code results in the following:

    Heading 4



    Heading 4 is the fourth most important heading.
    Heading 5


    Heading 5 is the fifth most important heading.