blog: HTML

Tampilkan postingan dengan label HTML. Tampilkan semua postingan

HTML Programming: Create Scrolling moving text by MARQUEE HTML code

This is a tutorial to show you how to create scrolling or moving text by MARQUEE HTML code.

Do you want to make your text "moving" in your site?

There is not a difficult task to do it now^^

Just using <marquee> HTML code, for example,
<marquee> Your text here </marquee>
The output is:

Your text here

Next, put a limit to its width by modifying this code to
<marquee width="100px"> Your text here </marquee>
then the output will be:

Your text here

Not clear? Let's put a blue as its back ground color modifying this code to

Your text here

Want to change its direction? No problem, just modifying this code to
<marquee width="100px" bgcolor = "blue" direction = "right"> Your text here </marquee>

Your text here

How about control its speed??Adding scrollamount="speed" to your code, the higher the number of speed, the faster the text move.
<marquee bgcolor="blue" direction="right" scrollamount="1" width="100px"> Your text here </marquee>

Your text here

Last but not least, change the text to hyperlink will be very useful for master to save their space. Just modifying this code to
<marquee behavior="scroll" bgcolor="yellow" direction="right" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="10" width="100px"> <a href="http://xaivierchia.blogspot.com/">XaivierBlog</a> </marquee>

XaivierBlog

Written by: Xaivier Chia

HTML Programming Tutorial: Basic HTML programming 2 - Create table

"HTML is a very common programming used at Twitter, Facebook, friendster, forum, blogspot etc. Have you ever seen somebody put their favourite link in facabook account, friendster account, forum etc. Just a single click on that link, you will be alternate to that website. Nothing is hard when you are willing to discover it today. " (Source: Previous tutorial)

In order to make your web page become tidier, table plays an important role. You can use a table to create your web page layout, categorize your stuff etc. The first step to create a table in your web page by using html code is to declare a table by create a open and close code, which is <table> and </table>.

Next, of course, the minimum table dimension is 1 X 1, which consists of one column and one row. In this case, column is represented by <td> </td> and row is represented by <tr> </tr>. As a result, your 1X1 table has a code like:

<table>
<tr>
<td>
Your Data
</td>
</tr>
<table>

with an output as:

Your Data

Don't be surprise that you do not like the boundary of the table. It is because you haven't declared it. Therefore, you can adjust the border of the table by adding border = "BORDEN VALUE" as shown below:

<table border ="1">
<tr>
<td>
Your Data
</td>
</tr>
<table>

with an output as:
< td> Your Data

The greater the border value, the width the border is.

Next, how about a 3X3 table? Please bear in mind that the number of column and row are equal to the number of <td> and <tr>, respectively. Therefore,

<table border ="1">
<tr>
    <td>
Your Data 11
    </td>
</tr>
<tr>
    <td>
Your Data 21
    </td>
</tr>

<tr>
    <td>
Your Data 31
    </td>
    <td>
Your Data 32
    </td>
    <td>
Your Data 33
    </td>
</tr>
<table>

Output of the above code is:

Your Data 11
Your Data 21
Your Data 31	Your Data 32	Your Data 33

Besides that, you can also fix the dimension of the column and row in a table:

<table border ="1">
<tr>
    <td height = "100px">
Your Data 11
    </td>
</tr>
<tr>
    <td width= "300px">
Your Data 21
    </td>
</tr>

<tr>
    <td>
Your Data 31
    </td>
    <td>
Your Data 32
    </td>
    <td>
Your Data 33
    </td>
</tr>
<table>

with an output as:

Your Data 11
Your Data 21
Your Data 31	Your Data 32	Your Data 33

Finally, you can also colour both background and border of table.

<table border ="3" bordercolor = blue>
<tr>
<td>
Your Data
</td>
</tr>
<table>

with its output:

< td> Your Data

and

<table border ="3" bordercolor = blue>
<tr>
    <td>
Your Data
    </td>
    <td bgcolor = "red">
Your Data2
    </td>
</tr>
<table>

Your Data

Your Data2

Written by: Xaivier Chia

Blogger tips: Customizing Blogger HTML layout to suit your needs

It is quite difficult to find a suitable layout for your Blogspot. It is often too big or too small when we are using the standard template in Blogspot. As a result, the best and easy-going solution is customizing your layout to suit your need. There are three steps to accomplish this task.

1. Lo-in your blogspot account then click "Layout" and "Edit HTML" as shown below.

2. Search "/* Outer-Wrapper" after click "Expand Widget Templates". In the "outer-wrapper", you can edit your layout margin and its width. For example, I have added an extra code "width: 1100px" to make my web page always maintain at 1100 px only regardless user trying to increase or decrease its size. In other words, it just like a pdf file with a fix boundary.

3. Finally, you can just customize your "main-wrapper" size which is your place for posting and your "sidebar-wrapper" size by changing their width value and margin value.

Bear in mind that your width value of "Outer-wrapper" must always bigger than the sum of the width value of "Main-wrapper" and "sidebar-wrapper" and their margin size to avoid over dimension problem.

Written by: Xaivier Chia
All right reserved.

HTML Programming Tutorial: Basic HTML programming

HTML is a very common programming used at Twitter, Facebook, friendster, forum, blogspot etc. Have you ever seen somebody put their favourite link in facabook account, friendster account, forum etc. Just a single click on that link, you will be alternate to that website. Nothing is hard when you are willing to discover it today.

HTML is a very quite easy understanding programming. All you need to know is its "open" and "close" format. For example, to open the HTML, we need to initial it by <html> then start our programming. After we complete our program, </html> is needed to end it.

Next, to put a sentence arrange in center, using <center> as its opening and </center> as its ending. For example,

Code:       Hello World1<center>Hello World2</center>Hello World3
Display :

Hello World1(no affected)

Hello World 2(adjusted center)
Hello World3(no affected)

Below are some useful HTML code and its example

1. Create a Hyperlink:
Code     : <a href="website">Display Name</a>
Example: <a href="http://xaivierchia.blogspot.com/">® Main Page ®</a>

Display :   ® Main Page ®

2. Create a Hyperlink to open it in the new tab. It is very useful to avoid visitors to be alternate to other website unconciously.

Code:       <a href="website" target="_blank">Display Name</a>
Example: <a href="http://xaivierchia.blogspot.com/" target="_blank">® Main Page ®</a>
Display : ® Main Page ®

3. Create a email link so visitor can email to you by a click.
Code:       <a href="mailto:email" target="_blank">Display Name</a>
Example: <a href="mailto:respect_exist@yahoo.co.uk" target="_blank">email</a>
Display :   email

Some exception here where an "open" and "close" is not used.

1. Put a space
Code:        
Example: Hi  HI HI HI HI  HI HI
Display: Hi  HI HIHIHI  HIHI

2. Enter to next line
Code: <br/>
Example: HI<br/>HIHI<br/>HIHIHIHI<br/><br/>HIHI
Display:
HI
HIHI
HIHIHIHI

HIHI

3. Horizontal line
Code: <hr>
Example: Up<hr>down
Display:
Up

down

4. Subscript which makes the text below the normal line
Code: <sub> </sub>
Example: <sub>UP</sub>DOWN
Display:_UPDOWN

5. Superscript which makes the text appear above the normal text
Code: <sup> </sup>
Example: <sup>UP</sup>DOWN
Display:^UPDOWN

6.Blockquote shift text five spaces to right side
Code: <blockquote></blockquote>
Example:

11111
<blockquote>
11111
</blockquote>
11111

Display:

11111

11111

11111

HTML Color Codes

Color is very important to design a blog. But to give a color to background or text or table it's not as simple as looks like, we have to know tho color code. With HTML color codes you can set the color of web site background, color of text, cells in tables and much more. With this dynamic HTML color codes chart you can get codes for basic colors.
Click on any color to get it's HTML color code: