Table With a Caption - GREAT HTML TABLES

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

CODE:

<table border="1">

<caption>Monthly savings</caption>

<tr>

<th>Month</th>

<th>Savings</th>

</tr>

<tr>

<td>January</td>

<td>$100</td>

</tr>

<tr>

<td>February</td>

<td>$50</td>

</tr>

</table>

GO BACK: HTML TABLES

Table Header - GREAT HTML TABLES

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

CODE:

<h4>Table headers:</h4>

<table border="1">

<tr>

<th>Name</th>

<th>Telephone</th>

<th>Telephone</th>

</tr>

<tr>

<td>Bill Gates</td>

<td>555 77 854</td>

<td>555 77 855</td>

</tr>

</table>

<h4>Vertical headers:</h4>

<table border="1">

<tr>

<th>First Name:</th>

<td>Bill Gates</td>

</tr>

<tr>

<th>Telephone:</th>

<td>555 77 854</td>

</tr>

<tr>

<th>Telephone:</th>

<td>555 77 855</td>

</tr>

</table>

GO BACK: HTML TABLES

Tables Without Border - GREAT HTML TABLES

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

CODE:

<h4>This table has no borders:</h4>

<table>

<tr>

<td>100</td>

<td>200</td>

<td>300</td>

</tr>

<tr>

<td>400</td>

<td>500</td>

<td>600</td>

</tr>

</table>

<h4>And this table has no borders:</h4>

<table border="0">

<tr>

<td>100</td>

<td>200</td>

<td>300</td>

</tr>

<tr>

<td>400</td>

<td>500</td>

<td>600</td>

</tr>

</table>


GO BACK: HTML TABLES

Simple table - GREAT HTML TABLES

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

CODE:

<p>

Each table starts with a table tag.

Each table row starts with a tr tag.

Each table data starts with a td tag.

</p>

<h4>One column:</h4>

<table border="1">

<tr>

<td>100</td>

</tr>

</table>

<h4>One row and three columns:</h4>

<table border="1">

<tr>

<td>100</td>

<td>200</td>

<td>300</td>

</tr>

</table>

<h4>Two rows and three columns:</h4>

<table border="1">

<tr>

<td>100</td>

<td>200</td>

<td>300</td>

</tr>

<tr>

<td>400</td>

<td>500</td>

<td>600</td>

</tr>

</table>

GO BACK: HTML TABLES

Complete codes for HTML-FORMS

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

> Create Text Field

DEMO:

First name:
Last name:

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


link: Get its code

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

> Create Password Field

DEMO:

Username:
Password:

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


link: Get its code

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

> Check Box

DEMO:

I have a bike
I have a car

link: Get its code

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

> Radio Buttons

DEMO:

Male
Female

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


link: Get its code

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

>Simple Drop-Down Menu

DEMO:

Volvo Saab Fiat Audi

link: Get its code

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

> Drop-down List With A Pre-Selected List

DEMO:

Volvo Saab Fiat Audi

link: Get its code

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

> Text Area (a multiple line text input field)

DEMO:


The cat was playing in the garden.

link: Get its code

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Text Formatting Tags

Text Formatting Tags

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

> <b>

Defines Bold text

Demo: THIS IS BOLD TEXT

</b>

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

> <big>

Defines BIG text

Demo: THIS IS BIG TEXT

</big>

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

> <small>

Defines SMALL text

Demo: THIS IS SMALL TEXT

</small>

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

> <i>

Defines ITALIC text

Demo: THIS IS A ITALIC TEXT

</i>

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

> <strike>

Defines STRIKE text

Demo: THIS IS STRIKE TEXT

</strike>

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

 > <sub>

Defines SUB SCRIPTED text

Demo: This is a simple text _{THIS IS A SUB SCRIPTED TEXT}  

</sub>

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

> <sup>

Defines SUPER SCRIPTED text

Demo: This is a simple text ^{THIS IS A SUPER SCRIPTED TEXT}

</sup>

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Basic HTML tags

Basic HTML Tags

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

>  <html>

Defines a HTML Document

</html>

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

> <title>

Defines the title of the page (seen at the right side of page top).

</title>

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

> <body>

Defines Document's body.

</body>

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

> <h1> to <h6>

Defines header of a HTML Document.

</h1> 

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

> <p> 

Defines a paragraph text.

</p>

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

> <hr>

Defines a horizontal rule.

</hr>

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

> <br>

Leaves a blank line

NO NEED TO END THIS TAG

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

> <!--->

To leave a comment.

NO NEED TO END THIS TAG.

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Introduction to HTML

What is an HTML File?

> HTML stands for Hyper Text Markup Language

> An HTML File is a text file containing small markup tags

> The markup tags tells a web browser how to display pages

> An HTML must have an .html or .htm file extension

> An HTML File can be created using a simple text editor.

What are markup tags?

> Markup tags of a particular position indicate that specific portion of documents are marked up to indicate how they should be displayed in the browser.

Text Area (A multiple line text input field) - HTML FORMS

CODE: Text Area (A multiple line text input field)

<!DOCTYPE html>

<html>

<body>

<textarea rows="10" cols="30">

The cat was playing in the garden.

</textarea>

</body>

</html>



Back: HTML FORMS

Drop-Down List With A Pre-Selected Value - HTML FORMS

CODE: Drop-Down List With A Pre-Selected Value

<!DOCTYPE html>

<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>

Back: HTML FORMS

Simple Drop-Down List - HTML FORMS

CODE: Simple Drop-Down List

<!DOCTYPE html>

<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>

Back: HTML FORMS

Radio Button - HTML FORMS

CODE: Radio Button

<!DOCTYPE html>

<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>

Back: HTML FORMS

Check Box - HTML FORMS

CODE: Check Box

<!DOCTYPE html>

<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>

Back: HTML FORMS

Create Password Field - HTML FORMS

CODE: Create Password Field

<!DOCTYPE html>

<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>

Back: HTML FORMS

Create Text Field - HTML FORMS

CODE: Create Text Field

<!DOCTYPE html>

<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>

Back: HTML FORMS
               

test

First name:
Last name:

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

jay shri ganesh

shri ganesh aye namhe...