Description Code Result

Text

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Paragraphs <p> Normal paragraph text.</p> Normal paragraph text.

Line Break I feel a line break coming... <br /> ...up. I feel a line break coming...
...up.

Bold Text <b>Bold text.</b> Bold text.

Italic Text <i>Italic text.</i> Italic text.

Color Text

Color text.

Text Size

Text size using points.

Text size using pixels.

Text size using relative sizes.

Font Family

Preferred serif font.

Preformatted Text

Preformatted text displays just as you type it...
  ...line breaks, spaces and all!

Teletype Text <tt>Teletype text - sometimes referred to as typewriter text.</tt> Teletype text - sometimes referred to as typewriter text.

Citation Text <cite>Citation text.</cite> Citation text.

Emphasized Text <i>Emphasized text.</i> Emphasized text.

Code Text <code>Code text.</code> Code text.

Big Text <big>Big text.</big> Big text.

Small Text <small>Small text.</small> Small text.

Blockquote

The label says:

Contents should not be swallowed. This is due to the enormous amount of harmful chemicals that has gone into this burger.

Deleted Text <del>Delete this text.</del> Delete this text.

Inserted Text <ins>Insert this text.</ins> Insert this text.

Keyboard Text <kbd>Keyboard text - text to be entered by the user.</kbd> Keyboard text - text to be entered by the user.

Quotation Text <q>Quotation text.</q> Quotation text.

Sample Text <samp>Sample text (output from a computer program).</samp> Sample text (output from a computer program).

Variable Text <var>Variable text.</var> Variable text.

Definition <dfn>Definition.</dfn>: To define the meaning of a word, phrase or term. Definition.: To define the meaning of a word, phrase or term.

Images

Image <img src="/pix/milford_sound/milford_sound_t.jpg" width="225" height="151" alt="Milford Sound in New Zealand" />

Image with Border <img src="/pix/milford_sound/milford_sound_t.jpg" width="225" height="151" alt="Milford Sound in New Zealand" border="5" />

Linked Image <a href="http://www.quackit.com/travel/new_zealand/milford_sound"><img src="/pix/milford_sound/milford_sound_t.jpg" width="225" height="151" alt="Milford Sound in New Zealand" /></a>

Linked Image with no Border <a href="http://www.quackit.com/travel/new_zealand/milford_sound"><img src="/pix/milford_sound/milford_sound_t.jpg" width="225" height="151" alt="Milford Sound in New Zealand" border="0" /></a>

Tables

Basic Table

Table cell 1

Table cell 2

Table with cellpadding, cellspacing, and width attributes

Table cell 1

Table cell 2

Table with a Header Row

Table header	Table header
Table cell 1	Table cell 2

Table with colspan Applied

Table header
Table cell 1	Table cell 2

Table with rowspan Applied

Table header	Table cell 1
Table header	Table cell 2

Table with CSS Applied

Table header	Table header
Table cell 1	Table cell 2

Forms

Basic Form Tags (insert all form elements between these tags)

Text Input <input type="text" size="30" value="Type something..." />

Text Area <textarea cols="10" rows="5">Type something

Radio Buttons

Option 1 Option 2
Checkboxes

Option 1 Option 2
Select List

Submit Button

Image Button

Lists
Ordered list (numbered list)

List item 1
List item 2
List item 3

Unordered list (unnumbered list)

List item 1
List item 2
List item 3

Definition list

Term 1: Definition of term 1
Term 2: Definition of term 2

Frames
Inline Frame

Frames
The frameset (frame_example_frameset_1.html):

The left frame (frame_example_left.html):

The right frame (frame_example_right.html):

View the result
----------------------------------------------------------------------------------------------------------------------
html

col

table
head

span

div

fieldset

form

body

h1

section

colgroup

tr
title

a

pre

meter

select

aside

h2

header

caption

td
meta

rt

dfn

em

i

small

ins

s

br

p

blockquote

legend

optgroup

address

h3

nav

menu

th
base

rp

abbr

time

b

strong

del

kbd

hr

ol

dl

label

option

datalist

h4

article

command

tbody
link

noscript

q

var

sub

mark

Marquree

bdi

wbr

figcaption

ul

dt

input

output

keygen

h5

footer

summary

thead
style

script

cite

samp

sup

ruby

bdo

code

figure

li

dd

textarea

button

progress

h6

hgroup

details

tfoot


img

area

map

embed

object

param

source

iframe

canvas

track

audio

video
----------------------------------------------------------------------------------------------------------------------

Example:1 for Link to another Page

Example:2 Create Vertical MENU

http://trick-blog.blogspot.in/

Example:An image-map, with clickable areas:

<img src ="planets.gif" width="145" height="126" alt="Planets" usemap ="#planetmap" />
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun" />
<area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury" />
<area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus" />
</map>

Style in HTML
<h1 style="color:blue;text-align:center">This is a header</h1>
<p style="color:green">This is a paragraph.</p>

<script type="text/javascript">

 Writing HTML in Javascript

 <!--
  // This is an error!
  document.write("</P>");
// -->
</script>

Write HTML

<script type="text/javascript">
<!--
  // This is an error!
  document.write("</P>");
// -->
</script>

Example1-For open new Window

Disable Browser Back Button functionality after click on Logout Button

   <script type="text/javascript">
        function noBack()
         {
             window.history.forward()
         }
        noBack();
        window.onload = noBack;
        window.onpageshow = function(evt) { if (evt.persisted) noBack() }
        window.onunload = function() { void (0) }
    </script>

TextyBox in HTML

 //<span class="form_input form_text">
//<input type="text" placeholder="Area or postcode" value="" size="30" name="search">
//</span>

or

<select data-placeholder="Please select a product" id="s1" class="global">
                <option value="Some">Some</option>
                <option value="Slower">Slower</option>
                <option value="Slow">Slow</option>
                <option value="Fast">Fast</option>
                <option value="Faster">Faster</option>
            </select>

Search ListBox items using JavaScript

Here’s the code block below.
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>Demo</title>
</head>
<script type="text/javascript" language="javascript">
function SearchList()
{
var l = document.getElementById('<%= ListBox1.ClientID %>');
var tb = document.getElementById('<%= TextBox1.ClientID %>');
if(tb.value == "")
{
ClearSelection(l);
}
else{
for (var i=0; i < l.options.length; i++)
{
if (l.options[i].text.toLowerCase().match(tb.value.toLowerCase()))
{
l.options[i].selected = true;
return false;
}
else
{
ClearSelection(l);
}
}
}
}
function ClearSelection(lb)
{
lb.selectedIndex = -1;
}
</script>
<body>
<form id="form1" runat="server">
<asp:TextBox ID="TextBox1" runat="server" onkeyup="return SearchList();"/><br />
<asp:ListBox ID="ListBox1" runat="server" Height="150px" Width="250px">
<asp:ListItem>Vincent</asp:ListItem>
<asp:ListItem>Jennifer</asp:ListItem>
<asp:ListItem>Shynne</asp:ListItem>
<asp:ListItem>Christian</asp:ListItem>
<asp:ListItem>Helen</asp:ListItem>
<asp:ListItem>Vladi</asp:ListItem>
<asp:ListItem>Bee</asp:ListItem>
<asp:ListItem>Jerome</asp:ListItem>
<asp:ListItem>Vinz</asp:ListItem>
<asp:ListItem>Churchill</asp:ListItem>
<asp:ListItem>Rod</asp:ListItem>
<asp:ListItem>Mark</asp:ListItem>
</asp:ListBox>
</form>
</body>
</html>
The JavaScript function basically searches the ListBox items and find the items based from the value of the TextBox that was entered. If a keyword exist from the list then it will automatically select the ListItems in the ListBox, but if the keyword does not exist then it will clear the ListBox selection.
See the output below when you run it on the page

Disable mouse right click on webpage using JavaScript
Method 1 : Disable mouse right click on webpage using JavaScript

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script language="JavaScript" type="text/javascript">
        //Message to display whenever right click on website
        var message = "Sorry, Right Click have been disabled.";
        function click(e) {
            if (document.all) {
                if (event.button == 2 || event.button == 3) {
                    alert(message);
                    return false;
                }
            }
            else {
                if (e.button == 2 || e.button == 3) {
                    e.preventDefault();
                    e.stopPropagation();
                    alert(message);
                    return false;
                }
            }
        }
        if (document.all) {
            document.onmousedown = click;
        }
        else {
            document.onclick = click;
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    </div>
    </form>
</body>
</html>

Method 2 : Disable mouse right click on webpage using oncontextmenu Event

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body oncontextmenu="return false;">
    <form id="form1" runat="server">
    <div>
    </div>
    </form>
</body>
</html>

Ayo Softech

Pages

HTML