Make Your Posts Colorful and Attractive with HTML

HTML, which stands for HyperText Markup Language, is a markup language used to create web pages. The web developer uses "HTML tags" to format different parts of the document. For example, you use HTML tags to specify headings, paragraphs, lists, tables, images and much more. Today we are going to use some basic HTML code to create different text boxes, Heading styles, border styles and click to select fucntion for a text box. Most of you might be knowing these little codes but all those who are new to blogging and HTML then it will help yoou. You can also customize Blackquotes with various styles. Copy and paste following code into HTML mode of your blogger post.

Heading line (like this) with border

<h3 style="background-color: teal; border: 3px solid silver; text-align: left; span style="background-color: teal;"><span style="color: #eeeeee;">Type your Text here</span></span></h3>

It will give the heading line like one used in this tutorial.

Text Box with border

<br /> This is where the user can enter text. If there's too much text, the textbox can develop scrollbars to accommodate the extra text...<br />

<div>
<textarea cols="50" rows="5" style="border: 8px ridge blue; height: 133px; margin: 2px; width: 633px;">
This is where the user can enter text.
</textarea></div>

Text Box with Scrollbars and Border

This 'div' element uses 'overflow:scroll' to create scrollbars whenever the contents of the 'div' become too large.

<div style="background-color: #fcfadd; border: 4px double #DEBB07; color: #714d03; height: 150px; line-height: 3em; overflow: scroll; padding: 5px; width: 150px;">
This 'div' element uses 'overflow:scroll' to create scrollbars whenever the contents of the 'div' become too large. </div>

Text Box with Auto Select on Foucus

Textarea:

This text you can select all by clicking here

Input TextBox:

<script type="text/javascript">
function SelectAll(id)
{
    document.getElementById(id).focus();
    document.getElementById(id).select();
}
</script>
Textarea:
<textarea id="txtarea" onclick="SelectAll('txtarea');" rows="3" style="width: 200px;">This text you can select all by clicking here </textarea>
Input TextBox:

<input id="txtfld" onclick="SelectAll('txtfld');" style="width: 200px;" type="text" value="This text you can select all" />

Customization

• To make round curve for Borders use: border-radius: 3px 6px 9px 12px;
• For Outline styles use: inset, outset, ridge ,double, dashed;
• Change Maroon color value for size, Blue for Style and Pink for colors.