Pages

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>

 

 

 

HTML-PARAGRAPHS

                In HTML all text elements are mainly displayed with the paragraph element.

 

Syntax:

 

<p>----------------------------------</p>

 

Example:

<html>

<body>

<p> HTML is very interesting & easiest one to learn.</p>

</body>

</html> 

 

 

                                  HTML-Line Breaks

                 We have already seen line break element in empty elements concept.

By using the line break we can move the cursor into next line.

 

Syntax:

    <br>


Example:

<html>

<body>

<p> First line</p><br>

<p>Second line</p>

</body>

</html>

Thursday, 5 July 2012

HTML-HEADINGS

  • In HTML there are 6 type of headings.

  • That ranges from H1 to H6.

  • H1 defines the most important heading.

     

Syntax:

<H1>----------------------------</H1>

 

Example:

<html>

<body>

<H1> The Main Heading Name</H1>

<H2> The Main Heading Name</H2>

<H3> The Main Heading Name</H3>

<H4> The Main Heading Name</H4>

<H5> The Main Heading Name</H5>

<H6> The Main Heading Name</H6>

 </body>

</html>

 

 

 

 

 

HTML-ATTRIBUTES

                 Attributes provides additional information about an element.Attributes are defined in the opening tag of the element.Attribute name and values are case sensitive.

Syntax:

attribute name="Value"

Standard HTML Elements:

  • id

         Provides unique id for an element.

  • class

         Provides class name for an element.

  • style

         Provides inline style for an element.

  • title

        Provides additional information about an element title. 

     

     Example: 

    <p style: font-size="--"; font-family="--";color="--";>     Paragraph with font attributes     </p>

                      This example shows the attributes of style (font family,color) for a paragraph.

     

     

     

HTML-ELEMENTS

                        An ELEMENT in HTML consists of an opening tag,closing tag and the element name.

An example for a complete element:

                              <P>This is a paragraph</P>


EMPTY ELEMENT:
                         The element content within a single tag and without a tag pair is called as an Empty Element.

Examples:
  • <br>
  • <hr>
  • <area>
  • <base>
  • <isindex>
  • <link>
  • <frame>
  • <img>
  • <input>
  • <col>
  • <meta>
  • <param>
  • <basefont> 

NESTED ELEMENT:
                       The HTML element contains another HTML element in the loop is called as Nested element.

Example:
 <html>
       <body>
                <p>This is a paragraph</p>
       </body>
 </html>
 
here i have used 3 elements..... 

Wednesday, 4 July 2012

HTML INTRODUCTION

  • HTML is Hyper Text Markup Languuage.
  • HTML is not a programing language,it is a Markup language.
The major points we are going to discuss
                                       1.  ELEMENT
                                       2.  ATTRIBUTE
                                       3.  HEADINGS 
                                       4.  FORMATTING
                                       5.  STYLES
                                       6.  LINKS
                                       7.  IMAGES
                                       8.  TABLES
                                       9.  LISTS
                                      10. FORM
                                      11. FRAMES
                                      12. DIVISION TAG

PHP Development Requirements

               To be a PHP developer one should have good knowledge on HTML

(Hyper Text Mark up Language) and Java scripts.  PHP is a server side  scripting. 

                        So we should have a basic understanding on the following.... 

  • HTML

  • JAVA SCRIPT 

  • MY SQL



By the next posts we are going to see the HTML in depth......

PHP Introduction

  • PHP stands for Hypertext Preprocessor (Personal Home Page) 

  •  PHP is a powerful tool for making dynamic and interactive Web pages.

  •  PHP is a widely used efficient,   free and alternative to ASP.

  •  PHP scripts are executed on the server side. 

  • PHP is an open source software, it is free to download and use 

  • PHP supports MySQL, Informix, Oracle, Sybase, Solid, PostgreSQL, Generic ODBC. 

  •  PHP runs on different platforms (Windows, Linux, Unix, etc.) 

  • PHP is compatible with almost all servers used today (Apache, IIS, etc.)