Namma Bengaluru: HTML script

Showing posts with label HTML script. Show all posts

Friday, December 2, 2011

HTML Tutorial - 13

How to create a mixed frameset of rows and columns in Html Script ?

Solution :
Step 1: Go to Notepad.
Step 2: Copy the HTML script below to the notepad.

Step 3: Now save the file with .html format.
Step 4: Close the notepad and now open the saved file in your default browser .
That's it !
You will see like the below picture in your browser.

Mixed Frame sets in rows and columns

Thursday, December 1, 2011

How to create a Horizontal frameset in Html Script ?

Solution :
Step 1: Go to Notepad.
Step 2: Copy the HTML script below to the notepad.

<html>

<frameset rows="25%,50%,25%">

<frame src="frame_a.htm" />
<frame src="frame_b.htm" />
<frame src="frame_c.htm" />

</frameset>

</html>
Step 3: Now save the file with .html format.
Step 4: Close the notepad and now open the saved file in your default browser .
That's it !
You will see like the below picture in your browser.

Vertical Frame sets

HTML Tutorial - 11

How to create a vertical frameset in Html Script ?

Solution :
Step 1: Go to Notepad.
Step 2: Copy the HTML script below to the notepad.

<html>

<frameset cols="25%,50%,25%">

<frame src="frame_a.htm" />
<frame src="frame_b.htm" />
<frame src="frame_c.htm" />

</frameset>

</html>

Step 3: Now save the file with .html format.
Step 4: Close the notepad and now open the saved file in your default browser .
That's it !
You will see like the below picture in your browser.

Vertical frame sets

Tuesday, November 29, 2011

HTML Tutorial - 10

How to create form with checkboxes and a submit button in Html Script ?

Solution :
Step 1: Go to Notepad.
Step 2: Copy the HTML script below to the notepad.

<html>
<body>

<form name="input" action="html_form_action.asp" method="get">
<input type="checkbox" name="Mobile" value="Nokia" /> I have a Nokia<br />
<input type="checkbox" name="Mobile" value="Samsung" /> I have a Samsung
<br /><br />
<input type="submit" value="Submit" />
</form>

<p>If you click the "Submit" button, the form-data will be sent to a page called "html_form_action.asp".</p>

</body>
</html>

Step 3: Now save the file with .html format.
Step 4: Close the notepad and now open the saved file in your default browser .
That's it !
You will see like the below picture in your browser to submit the form.

Click on the submit button to submit the data to a page called "html_form_action.asp"

HTML Tutorial - 9

How to create Form with text fields and a submit button in Html Script ?

Solution :
Step 1: Go to Notepad.
Step 2: Copy the HTML script below to the notepad.

<html>
<body>

<form name="input" action="html_form_action.asp" method="get">
First name: <input type="text" name="FirstName" value="New" /><br />
Last name: <input type="text" name="LastName" value="Bengaluru" /><br />
<input type="submit" value="Submit" />
</form>

<p>If you click the "Submit" button, the form-data will be sent to a page called "html_form_action.asp".</p>

</body>
</html>
Step 3: Now save the file with .html format.
Step 4: Close the notepad and now open the saved file in your default browser .
That's it !
You will see like the below picture in your browser to enter your First name, Last name and a submit button to submit the information.

Click on the submit button to submit the data to a page called "html_form_action.asp"

HTML Tutorial - 8

How to Draw a border around form-data in Html Script ?

Solution :
Step 1: Go to Notepad.
Step 2: Copy the HTML script below to the notepad.

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

Step 3: Now save the file with .html format.
Step 4: Close the notepad and now open the saved file in your default browser .
That's it !
You will see like the below picture in your browser to enter your Name, E-mail, Date of birth.

Click on blank field to enter your Name, E-mail, Date of birth.

HTML Tutorial - 7

How to create a button in Html Script ?

Solution :
Step 1: Go to Notepad.
Step 2: Copy the HTML script below to the notepad.

<html>
<body>

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

</body>
</html>

Step 3: Now save the file with .html format.
Step 4: Close the notepad and now open the saved file in your default browser .
That's it !
You will see like the below picture in your browser.

Note: If you click on this button it will not perform any action !

HTML Tutorial - 6

How to create a text area in Html Script ?

Solution :
Step 1: Go to Notepad.
Step 2: Copy the HTML script below to the notepad.

<html>
<body>
<p>
Share your ideas by posting a comment here.
</p>
<textarea rows="10" cols="30"> Click here to edit.</textarea>
</body>
</html>

Step 3: Now save the file with .html format.
Step 4: Close the notepad and now open the saved file in your default browser .
That's it !
You will see like the below picture on your browser & click on the text area to edit whatever you want to edit.

Click on the text area to edit whatever you want !

HTML Tutorial - 5

How to create simple drop-down list in Html Script ?

Solution :
Step 1: Go to Notepad.
Step 2: Copy the HTML script below to the notepad.

<html>
<body>

<form action="">
<select name="Mobiles">
<option value="nokia">Nokia</option>
<option value="samsung">Samsung</option>
<option value="reliance">Reliance</option>
<option value="mts">MTS</option>
</select>
</form>

</body>
</html>

Step 3: Now save the file with .html format.
Step 4: Close the notepad and now open the saved file in your default browser .
That's it !
You will see like the below picture when you click on the drop down list.

You can select any one of the option !

HTML Tutorial - 4

How to create Radio buttons in Html script ?

Solution :
Step 1: Go to Notepad.
Step 2: Copy the HTML script below to the notepad.

<html>
<body>

<form action="">
<input type="radio" name="Gender" value="male" /> Male<br />
<input type="radio" name="Gender" 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>

Step 3: Now save the file with .html format.
Step 4: Close the notepad and now open the saved file in your default browser .
That's it !
You will see in the browser to select any one option as in below picture.

When you select any one option your browser will show like this !

HTML Tutorial - 3

How to create Check boxes in Html script ?

Solution :
Step 1: Go to Notepad.
Step 2: Copy the HTML script below to the notepad.

<html>
<body>

<form action="">
<input type="checkbox" name="mobile" value="Nokia" /> I have a Nokia<br />
<input type="checkbox" name="mobile" value="Samsung" /> I have a Samsung
</form>

</body>
</html>

Step 3: Now save the file with .html format.
Step 4: Close the notepad and now open the saved file in your default browser .
That's it !
You will see as like the below picture.

When you select any one option you will see like this in your browser !

HTML Tutorial - 2

How to create Password fields in HTML script ?

Solution :
Step 1: Go to Notepad.
Step 2: Copy the HTML script below to the notepad.
<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>
Step 3: Now save the file with .html format.
Step 4: Close the notepad and now open the saved file in your default browser .
That's it !
You will see as like the below picture when you type the username and password.

You will see the script in your browser like this !

HTML Tutorial - 1

How to create text fields in HTML script ?

Solution :
Step 1: Go to Notepad.
Step 2: Copy the HTML script below to the notepad.
<html>
<body>
<form action="">
First name: <input type="text" name="firstname" /><br />
Last name: <input type="text" name="lastname" />
</form>
<p><b>Note:</b> Also note that the default width of a text field is 20 characters.</p>
</body>
</html>
Step 3: Now save the file with .html format.
Step 4: Close the notepad and now open the saved file in your default browser .
That's it !
You will see as like the below picture.

You will see like the script in your browser like this !

Disclaimer: "I do not own the rights of the content provided in this blog. All content provided on this blog is for informational purposes only. The owner of this blog makes no representations as to the accuracy or completeness of any information on this site or found by following any link on this site. The owner will not be liable for any errors or omissions in this information nor for the availability of this information. The owner will not be liable for any losses, injuries, or damages from the display or use of this information".

Namma Bengaluru

Pages