Pages

Monday, 12 May 2014

Wednesday, 18 July 2012

HTML - FORMS

                      Forms provides different kinds of user inputs.Forms are used to pass

 a data from user to server.The input elements which a form can contain are.....

  1. Text fields :

             Text fields provides a single line input field for the user.

     

    Syntax :

    <html>

    <body>

    <form>

    USER NAME :  <input type="text" name="username"/>

    </form>

    </body>

    </html>

     

  2. Text area :

             Text area provides multiline input field for the user.

     

    Syntax :

    <html>

    <body>

    <form>

    COMMENTS :  <text area rows="10" cols="30"/>

    </text area>

    </form>

    </body>

    </html>

     

  3. Password:

               Password is the form element provides the password fields for the user and it displays Black circle or * symbol for the each  input.

     

    Syntax :

    <html>

    <body>

    <form>

    PASSWORD :  <input type="password" name="passwrd"/>

    </form>

    </body>

    </html>

     

  4. Check box :

            Check box is the easiest input form element for selecting multiple input 

    by the user.

     

    Syntax :

    <html>

    <body>

    <form>

    Fav.Actress : 

    <input type="checkbox" name="actress" value="kathrina kaif"/>I Like Kathrina<br/>

    <input type="checkbox" name="actress" value="Bhavana"/>I Like Bhavana

    </form>

    </body>

    </html>

     

  5. Radio button :

            Radio button provides the user to select only one input at a time.

     

    Syntax :

    <html>

    <body>

    <form>

      <input type="radio" name="sex" value="male/>Male<br/>

      <input type="radio" name="sex" value="female/>Female<br/>

    </form>

    </body>

    </html>

     

  6. Drop down list :

               Drop down list provides the collection of pages or links that the user

    can select one of them.This is the simplest tool to show the many number of

    inputs in a simple way.

     

    Syntax :

    <select>

    <option> A </option>

    <option> B </option>

    <option> C </option>

     </select>

     

     Example :

    <html>

    <body>

    <form>

    <select name="actress">

    <option> Bhavana </option>

    <option> Kathrina Kaif </option>

    <option> Kareena Kapoor </option>

    <option> Tapsi </option>

    <option> Anjali </option>

    <option> Hanshika Mothwani </option>

    </select>

    </form>

    </body>

    </html>

     

     

    7.Multi list Drop down list :

                       Multi list provides a drop down menu that has sub groups inside the list.

    Syntax :

    <select>
                       <optgroup>Actors</optgroup>
                           <option>Rajni</option>
                           <option>Kamal</option>

                       <optgroup>Actress</optgroup>
                        <option>Asin</option>
                           <option>Trisha</option>
                   </select>

    8.Buttons :

                      There are 3 types in buttons.Normal button,Submit button,Reset button.

    i)Normal button provides some actions through javascript codes.

    ii)Submit button is used to submit a form.

    iii)Reset button resets the complete form.

    Synatx:

                   <input type="button" name="button" />
                   <input type="submit" name="submit" />
                   <input type="reset" name="reset" />

     

    9.Hidden texts :

                     Hidden texts are mostly used for transferring datas to databases that are not having any need to display in front end side.

                     Hidden element is nothing but a text box which is not in visible mode.

     

    Syntax:

           <input type="hidden" name="hiddentext" />

    10.File upload

                    File upload allows users to upload any type of files that can be stored in online databases as a path.....

    Syntax:

                 <input type="file" name="uploadimage" />



 

Monday, 16 July 2012

HTML - LISTS

There are 3 types of lists in HTML.

1. Ordered List

2. Unordered list

3. Definition list

 

 

1. Ordered list :

            An ordered list adds a numbering system before each item.

 

Syntax:

<html>

<body>

<ol>

<li>item</li>

<li>item</li>

<li>item</li>

</ol> 

<//body>

</html>

 

Example:

<html>

<body>

<ol>

<li>one</li>

<li>two</li>

<li>three</li>

</ol> 

<//body>

</html> 

 

 

2. Unordered list :

                    Unordered list's items are marked with a disc  or circle  or square.

 

Syntax:

<html>

<body>

<ul type="disc/circle/square" >

<li>item</li>

<li>item</li>

<li>item</li>

</ul> 

<//body>

</html> 

 

Example:

<html>

<body>

<ul type="disc" >

<li>one</li>

<li>two</li>

<li>three</li>

</ul> 

<//body>

</html> 

 

 

3. Definition list :

               The definition list has the definition of each items in a list.

 

Syntax:

<html>

<body>

<dl>

<dt>Item name 1 </dt>

<dd> Item description 1 </dd>

<dt>Item name 2</dt>

<dd> Item description 2</dd>

</dl> 

</body>

</html> 

 

Example:

<html>

<body>

<dl>

<dt>Tea </dt>

<dd>Black hot drink</dd>

<dt>Milk shake</dt>

<dd>white cold drink</dd>

</dl> 

</body>

</html>

 

 

Sunday, 15 July 2012

HTML-TABLES

  • Tables are the easiest way to represent some data to the user.

  • In html tables are defined with <table> tag.

  • Table data are added row wise.

    <tr> - Table Rows

    <th> - Table Header

    <td> - Table Data

     

Syntax:

<table>

<tr>

<th>Header name 1</th>

<th>Header name 2</th>

</tr>

<tr>

<td>row1, col1</td>

<td>row1, col2</td>

</tr>

<tr>

<td>row2, col1</td> 

<td>row2, col2</td> 

</tr>

</table> 

 

 

Table Properties:


1. Cell padding:

              Cell padding sets the amount of space between the contents of the cell and the cell wall.

2. Cell spacing:

             Cell spacing controls the  space between table cells and data.

 3. Cell spanning :

             Cell spanning means joining two or more cells to expand the cell size.

 

 

HTML-IMAGES

                   In html to display an image on a web page we are using the img tag.

<img> tag is an empty tag, that means it has only an opening tag and attributes

for additional information about the image. 

 

Attributes of an image:

 

1. src :

            Attribute "src" defines from where the image should be loaded.We can also mean it as the URL of an image. 

 

2. alt :

            Attribute "alt" provides the alternate information about the image.The alternate information will be showed if the image is not exist.

 

3. height :

           Attribute "height" defines the display height size of the output image in pixels.

 

4. width :

           Attribute "width" defines the output image's width interms of pixels.

 

Syntax :

<img src="url" alt="alternate name" height="px" width="px">

 

Example :

<img src="apple.JPEG" alt="apple" height="240" width="300">

HTML-LINKS

                The link is used to jump into another part of a current document or into another web page.

  • The link may be a word or an image.

  • The tag used to crate a link is Anchor tag.

     

    Syntax:

                 <a>--------------------</a>

     

    Attributes of  <a> tag:

    • href

    • name

    • Target = "_blank", "_self", "_Top", "_Parent".

    • id

    • char set

    • access key

    • tab index

    • rel

      1. href:

                 Attribute "href" is used to navigate or jump into another web document.

      Syntax:

       <a href="url">  text </a>

      Example:

      <a href="www.google.com">Click here for Google</a>

      2. name:

                Attribute "name" is used navigate or jump within a page , document.

      Syntax:

      <a name="title"> text </a>

      Example:

      <a name="top">Top Section</a>

      <a href="#tips">Go to top</a>

      3. Target:

               Attribute target defines how the new link should open. For the value _blank -it will open in a new window. For _self - it will open in the same window.

      Syntax:

       <a href="link" target="_____"> click here </a>

      Example:

      <a href ="www.google.com" target="_blank"> Click here for google search </a>

       

                          An image as a link

         We can also use an image as a link.

      Syntax:

      <a href="URL" > <img src="URL alt="name"></a>

      Example:

      <a href="www.google.com"><img src="search.JPEG" alt="search"></a>

HTML-FORMATTINGS

            HTML provides us the formatting of text.For each formatting style html has its formatting tags.

 

1.Bold text:



<p><b> Paragraph with bold text</b></p>

 

2.Strong text (same as bold) :

<p><strong> Paragraph with bold text</strong></p>

 

3.Underlined text:

<p><u> Paragraph with underlined text</u></p>

 

4.Italic text:

<p><i> Paragraph with italic text</i></p>

 

5.Emphasized text (same as italic) :

<p><em> Paragraph with emphasized text</em></p>

 

6.Big text:

<p><big> Paragraph with big text</big></p>

 

7. Striked text:

<p><s> Paragraph with bold text</s></p>

 

8.Computer output text:

<p><code> Paragraph with bold text</code></p>

 

9.Subscript:

<p>H<sub>2</sub>SO<sub> 4</sub></p>

 

10.Superscript:

<p>a<sup>2</sup>+b<sup> 2</sup></p>