Showing posts with label Tutorial on HTML. Show all posts
Showing posts with label Tutorial on HTML. Show all posts

Wednesday, 24 June 2015

Form tag in HTML

Form tag:

             Using form tag, we can get input values from the user by allowing them to submit the form. Form tag may optionally contain the following elements.
             

  • <input>
  • <select>
  • <option>
  • <optgroup>
  • <textarea>
  • <button>
  • <fieldset>
  • <label>
Simple registration form using form element without validation:

<html>
<head>
<title>The Student Registration Form</title>
</head>
<body bgcolor=aqua>
<center><h3>Registration Form</h3></center>
<form name=my_form onsubmit=validate()>
<strong>Name:&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
</strong>
<input type=text name=name><br/>
<br>
<br>
<strong>Age:&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</strong>
<input type=text name=Age_txt><br/>
<br>
<br>
<strong>Phone No:&nbsp</strong>
<input type=text name=ph_txt><br/>
<br>
<Br>
<strong>Gender:&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp </strong>
<input type="radio" name="group1" value="Male">Male&nbsp&nbsp&nbsp&nbsp
<input type="radio" name="group1" value="Female">Female<br/><br/><br/>
<strong>Hobby: </strong>
&nbsp&nbsp
<input type="checkbox" name ="option1" value="Singing">Singing<br/>
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
<input type="checkbox" name ="option1" value="Reading">Reading<br/>
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
<input type="checkbox" name ="option1" value="T.V.">Watching T.V<br/>
<br/><br/>
<strong>Country:</strong>
<select name="My_Menu">
<option value="India">India</option>
<option value="China">China</option>
<option value="Shrilanka">Shrilanka</option>
</select>
<center>
<input type=submit value=Submit></br>
</center>
</body>
</html>


Sample output:



Posted by at 0 comments
Labels:

Sunday, 15 December 2013

Tutorial on HTML

Using CSS:

 With just HTML, inserting images and other things might be difficult and it can  be done only with coding.So to overcome this situation you may use CSS.You cantype it in notepad and save the file with the extension .css

 What is CSS?

  • CSS is nothing but cascading style sheet.
  • A stylesheet can be created by using STYLE tag (i.e) <style>
  • In  CSS we can have three type of selectors,which are :
  1. Class selector
  2. HTML selector
  3.  ID selector
HTML selector:
  • HTML selector can be created by removing the angular brackets (i..e) H1 instead of <H1>
Class selector:
  • A selector that can be defined by the user is called class selector.(i.e) The user has the choice to use the name of his choice.A class selector should start with .
ID selector:
  •  Using ID selector,the user can identify a particular name on a form and it is similar to class selector.ID selector should start with # (hash)

 Example:

 <style>
H1{color:blue}
.fontsize{Font-size:16}
#fonttype{Font-type:bold} 
</style>

 Inserting Images:

 Generally, there are two types of images GIF and JPEG. These two types of images can be inserted in CSS or html 
Sample code:

 <img src="abc.gif">

 The image tag doesn't has an end tag.So that you need not end the tag using </image> or something else.

 Sample webpage code with image inserted:
<html> 
<head><center>Sample web page</center> 
<title>Testing web page</title> 
</head> 
<body> 
<font color="blue"><center><b>This is my first 
web page and i'm going to insert some image 
and change the background colour of my web 
page</center></b></font> 
<body bgcolor="green"> 
<center><img src="abc.jpg"></center> 
 </body> 
 </html>

Sample output:


Posted by at 0 comments
Labels:

Saturday, 14 December 2013

Tutorial on HTML

Heading tags in HTML:

 In HTML, you can differentiate the contents by using heading tags.If your want your title or your heading to be big you can specify the tag <H1>

 Examples:
<H1>First heading</H1>
<H2>Second heading</H2>
<H3>Third heading</H3>
<H4>Fourth heading</H4>
<H5>Fifth heading</H5>
<H6>Sixth heading<H6>

 List tags:
In your web page,if you wish to list an item such as some special features or any offers or any thing else you can use the list tags. The tag used to list an item <li>. But you can't use just <li>First one</li>

 You have to specify the whether the list is ordered or unordered list using the tags <ol> <ul>. Th tag <ol> represents the ordered list whereas the tag <ul> represents the unordered list.When the list is specified as ordered list, it will use the numbering formatting for producing specified output. When the list is specified as unordered list it uses bulleting formatting. 

 Examples:

 <ol>
<li>First item</li>
<li>Second item</li>
<li>Third item<//li>
<li>Fourth item</li>
</ol>

 <ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>

 Formatting tags:

     Other than this heading tags and list tags one can use the formatting tags also.Formatting tags such as text alignment, font colour, background colour can be used.

 Examples:

 Some formatting tags are 
<b>
<i>
<u>
<center>
<left>
<right>
<marquee>

 Examples:

 <b>This content is in bold</b>
<i>The content is in italic</i>
<u>Underline the content</u>
<center>Align center</center>

 For changing the font colour, attributes are used. To change the font colour, style attribute is used.

Example:

 <h1 style ="color:blue">The heading is in red</h1>
 
 
 
 
 
Posted by at 0 comments
Labels:

Tutorial on HTML

Designing a web page can be made easy with HTML. To create and to code in HTML you need to know about a web page. As documents and files has some extensions like .doc and etc., a webpage also has an extension, .htm or.html. Using this extension you can clearly identify a webpage.

Where to HTML?
HTML can typed or coded in simple text editors like notepad or notepad++.


One advantage of HTML is that, it is not case sensitive.So that you can code at your ease.

Basic HTML tags:

<html>
<head>
<title>
<body>
<p>
<b>
<i>
<u>
<li>
The use and purpose of these tags will be discussed in later sessions.

Sample HTML code:

<html>
<head>
<title>MY FIRST WEB PAGE</title>
</head>
<body>
<p>This is my first web page and this is my first paragraph</p>
</body>
</html>

Sample output:

MY FIRST WEBPAGE
This is my first web page and this is my first paragraph
Read more »
Posted by at 0 comments
Labels:
Subscribe to: Comments (Atom)