Tuesday, 26 May 2015

Abbreviations and acronyms - HTML Programs

<html>
<body>

<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
<p>Can I get this <abbr title="as soon as possible">ASAP</abbr>?</p>

<p>The title attribute is used to show the spelled-out version when holding the mouse pointer over the acronym or abbreviation.</p>
</body>
</html>

Output

The WHO was founded in 1948.
Can I get this ASAP?
The title attribute is used to show the spelled-out version when holding the mouse pointer over the acronym or abbreviation.

Insert contact information - HTML Programs

<html>
<body>

<address>
Written by W3Schools.com<br>
<a href="mailto:us@example.org">Email us</a><br>
Address: Box 564, Disneyland<br>
Phone: +12 34 56 78
</address>

</body>
</html>

Output

Written by W3Schools.com
Email us
Address: Box 564, Disneyland
Phone: +12 34 56 78

Computer code
Keyboard input
Sample text
Computer variable
Note: These tags are often used to display computer/programming code.

Preformatted text (how to control line breaks and spaces) - HTML Programs

<html>
<body>

<pre>
This is
preformatted text.
It preserves both spaces
and line breaks.
</pre>
The pre tag is good for displaying computer code:<br />

<pre>
for i = 1 to 10
print i
next i
</pre>
</body>
</html>

Output

This is
preformatted text.
It preserves      both spaces
and line breaks.

The pre tag is good for displaying computer code:

for i = 1 to 10
     print i
next i

Text formatting - HTML Programs

<html>
<body>
<p><b>This text is bold</b></p>
<p><strong>This text is strong</strong></p>
<p><em>This text is emphasized</em></p>
<p><i>This text is italic</i></p>
<p><small>This text is small</small></p>
<p>This is<sub> subscript</sub> and <sup>superscript</sup></p>

</body>
</html>

Output

This text is bold
This text is strong
This text is emphasized
This text is italic
This text is small
This is_subscript and ^superscript

Draw a border around form-data - HTML programs

<html>
<body>

<form action="">
<fieldset>
<legend>Personal information:</legend>
Name: <input type="text" size="30"><br>
E-mail: <input type="text" size="30"><br>
Date of birth: <input type="text" size="10">
</fieldset>
</form>

</body>
</html>

Output

Create a button - HTML Programs

<html>
<body>

<form action="">
<input type="button" value="Hello world!">
</form>

</body>
</html>

Output

Text area (a multi-line text input field) - HTML Programs

<html>
<body>

<textarea rows="10" cols="30">
The cat was playing in the garden.
</textarea>

</body>
</html>

Output

Sunday, 3 May 2015

Drop-down list with a pre-selected value - HTML Programs

<html>
<body>

<form action="">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected>Fiat</option>
<option value="audi">Audi</option>
</select>
</form>

</body>
</html>

Output

Simple drop-down list - HTML Programs

<html>
<body>

<form action="">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>

</body>
</html>

Output

Radio buttons - HTML Programs

<html>
<body>
<form action="">
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>

<p><b>Note:</b> When a user clicks on a radio-button, it becomes checked, and all other radio-buttons with equal name become unchecked.</p>

</body>
</html>

Output

Note: When a user clicks on a radio-button, it becomes checked, and all other radio-buttons with equal name become unchecked.

Checkboxes - HTML Programs

<html>
<body>
<form action="">
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form>

</body>
</html>

Output

Create password field - HTML Programs

<html>
<body>
<form action="">
Username: <input type="text" name="user"><br>
Password: <input type="password" name="password">
</form>

<p><b>Note:</b> The characters in a password field are masked (shown as asterisks or circles).</p>

</body>
</html>

Output

Note: The characters in a password field are masked (shown as asterisks or circles).

Create text fields - HTML Programs

<html>
<body>

<form action="">
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>

<p><b>Note:</b> The form itself is not visible. Also note that the default width of a text field is 20 characters.</p>

</body>
</html>

Output

Note: The form itself is not visible. Also note that the default width of a text field is 20 characters.

This is heading 1

This is heading 2

This is heading 3

This is heading 4

This is heading 5

This is heading 6

A very simple HTML document - HTML Programs

<html>
<body>

<h3>My First Heading</h3>

<p>My first paragraph.</p>

</body>
</html>

Output:

My First Heading

My first paragraph.

EDUTAINMENT

Pages

Auto AdSense