> April 2013 ~ Online tutorial

HTML tag



tag nameDefinitionSyntax
<a> An anchor text which it used to create hyperlinks in HTML. <a href='enter the website name'>Name of site</a>
<b>Which is used to blod the text in HTML.<b>Enter the header name</b>
<ul> Un ordered list which is list the item in HTML.list is nothing but collection of data. <ul type='type of character'>
<ol>ordered list which is orderly list the item in HTML.list is nothing but collection of data. <ol type='disc/square/circle'>
<font> Which is used specific the particular in text we can using this tag in HTML. <font>Enter the text</font>
<basefont >only used in IE not worked in Mozila and chrome and other browser.
<table> table tag which used to create the table in HTML. <table>
<tr>Table row which is used create the table row.

Marquee is used to scroll the text.
<br> BR is used providing new line at the end of paragraph.
<title>
Title tag is used give the title to webpage.
<body>Body tag is used to display data in client browser.
<h1> h1 is used to biggest heading 1
<h2>h2 is used to biggest heading 2
<h3>h3 is used to biggest heading 3


<h4>h4 is used to biggest heading 4
<h5>h5 is used to biggest heading 5
<h6>h6 is used to biggest heading 6
<p>The tag is used in paragraph.every end of paragraph we can put this tag.
<pre>The tag is used tp preserve the white space and lines in the text.
<div>This is tag is used to make the division of section in the html.
<i>It is used show text as italic.
<strong>It is used strong emphasized the text.
<strike>This is used the strike the text.
<center>This tag is used the center the text.

registration form in php


Registration form:
This is registration form in which data are entered by the user then it is goes to database for storing data.In this registration form we create four field and send data using form tag.
<html>
<body>
<form name="form1" action="signup2.php" method="post">
Name<input type='text' name='name'>
Email id<input type='text' name='email'>
Pass<input type='password' name='pass'>
Country<input type='text' name='country'>
<input type='submit' name='submit' value='Insert'>
</form>
</body>
</html>

Storing data in database:

In this program we are create database connectivity storing data which entered by user in registration form.In this data are useful processing the query.

<?php
$conn=mysql_connect('localhost','root','');
$db_name='temp';
mysql_select_db($db_name);
$name=$_POST['name'];
$email=$_POST['email'];
$pass=$_POST['pass'];
$country=$_POST['country'];
$insert=mysql_query("insert into tempv(name,email,pass,country)values('$name','$email','$pass','$country')");
?>

send emails using php

Registration form

We are create registration form which is important in data storing when the entered value in field the data are redirect value to corresponds method by using form tag.Now they store data in Mysql database for furthur processing on the data.

<html>
<body>
<div align='left'>
<table border='1'>

<form name='form1' action='post' method='reglog.php'>
//In which the HTML values will be redirected to reglog.php program using POST method is used


<table bgcolor='skyblue' border='1'>
<tr><td width='50'>Name:</td><td width='50'><input type='name' name='name' placeholder='Enter the Name'>
</td></tr>
<tr><td width='50'>Password:</td><td width='50'><input type='password' name='pass' placeholder='Enter the password'>
</td></tr>
<tr><td width='50'>Retype password:</td><td width='50'><input type='password' name='pass' placeholder='Retype Password'>
</td></tr>
<tr><td width='50'>Email id:</td><td width='50'><input type='text' name='email' placeholder='Enter the Email id'>
</td></tr>
<tr><td width='50'></td><td width='70'><input type='submit' value='Submit'>
</td></tr>
<tr>
</form>
</tr>
</table>
</div>
</body>
</html>


Mysql connectivity

Now we are going to create the database for storing data in verification process .using following MYSQL syntax to create database in MYSQL

Common Syntax
Create database
create database database_name;
Use database
use database_name;
create table query
create table tab_name(tab_name varchar(20),tab_name1 varchar(20),tab_name3 varchar(20),tab_name4 varchar(20),));


Sending mail in php:

Now we are create database connectivity for the program

<?php
$tbl_name=name of table;
// Random confirmation code
$confirm_code=md5(uniqid(rand()));
// values sent from form
mysql_select_db($db_name);
$name=$_POST['name'];
$pass=$_POST['pass'];
$repass=$_POST['repass'];
$email=$_POST['email'];
$insert=mysql_query("insert into table_name(name,pass,repass,email)values('$name','$pass','$repass','$email')");
if($result)
{
$to=$email;
$subject="Your confirmation link here";
$header="from: your name ";
$message="Your Comfirmation link \r\n";
$message.="Click on this link to activate your account \r\n";
$message.="http://www.yousiteaddress.com/confirmation.php?passkey=$confirm_code";
$sentmail = mail($to,$subject,$message,$header);
}
else
{
echo "Not found your email in our database";
}
if($sentmail)
{
echo "Your Confirmation link Has Been Sent To Your Email Address.";
}
else {
echo "Cannot send Confirmation link to your e-mail address";
}
?>

HTML list

HTML list
List is nothing but the collection of items or elements.There are two type of list are
ordered list,unordered list

UnOrdered List:

UnOrdered List is used for simply using listing the items but if we want the items in the sequence then ordered lists are used.

HTML Unordered List Example
    <html>
    <body>
    <b>Fruit List</b>
    <ul type='disc'>
    <li>Orange</li>
    <li>Apple</li>
    <li>Pine apple</li>
    </ul>
    <b>Sports List</b>
    <ul type='square'>
    <li>Cricket</li>
    <li>Foot Ball</li>
    <li>Hockey</li>
    </ul>
    <b>Country List</b>
    <ul type='circle'>
    <li>India</li>
    <li>Usa</li>
    <li>UK</li>
    </ul>
    </body>
    </html>

Output of Unordered List
  • Orange
  • Apple
  • Pine apple
Sports List
  • Cricket
  • Foot Ball
  • Hockey
Country List
  • India
  • Usa
  • UK
    Ordered List:
                  Ordered List is used for simply using listing the items but the follow some specific.we can use number the text using ol tag.
    Example

    <html>
    <body>
    <b>Fruit List</b>
    <ol type='1'>
    <li>Orange</li>
    <li>Apple</li>
    <li>Pine apple</li>
    </ol>
    <b>Sports List</b>
    <ol type='A'>
    <li>Cricket</li>
    <li>Foot Ball</li>
    <li>Hockey</li>
    </ol>
    <b>Country List</b>
    <ol type='i'>
    <li>India</li>
    <li>Usa</li>
    <li>UK</li>
    </ol>
    </body>
    </html>

    output

    1. Orange
    2. Apple
    3. Pine apple
    Sports List
    1. Cricket
    2. Foot Ball
    3. Hockey
    Country List
    1. India
    2. Usa
    3. UK

    HTML audio

    Audio
    using html script we can play the audio files.The simplest way to play the audio use the hyperlinks.

    Syntax:

    <a href="location of file'>name of the audio</a>


    Syntax


    <html>
    <head>
    <title>
    HTML checkbox
    </title>
    </head>
    <body>
    <form name='form1'>
    <a href="chimes.wav'>Click the audio</a>
    </form>
    </body>
    </html>



    HTML spacing

    Cellspaing
    Cellspacing is allows create distance from each cell can be increased.
    Example

    <html>
    <head>
    <title>
    HTML cellspacing
    </title>
    </head>
    <body>
    <table border="1" cellspacing="20">
    <tr>
    <td>one</td>
    <td>second</td>
    </tr>
    <tr>
    <td>Three</td>
    <td>four</td>
    </tr>
    </table></body>
     </html>


    Output

    one second
    Three four

    HTML cellpadding

    Cellpadding
    Cellpadding is allows to have some space between of each cell and it is borders(or inner edges)
    Example

    <html>
    <head>
    <title>
    HTML cellpadding
    </title>
    </head>
    <body>
    <table border="1" cellpadding="8">
    <tr>
    <td>one</td>
    <td>second</td>
    </tr>
    <tr>
    <td>Three</td>
    <td>four</td>
    </tr>
    </table></body>
     </html>


    Output
    one second
    Three four

    HTML checkbox

    Check Box
    It is simplest component which is used particularly whemn we used to make selection of serveral options.
    Syntx
    <input type='checkbox' name='check' value='value of checkbox'>
    Example

    <html>
    <head>
    <title>
    HTML checkbox
    </title>
    </head>
    <body>
    <form name='form1'>
    <input type='checkbox' name='check' value='apple'>
    <input type='checkbox' name='check' value='orange'>
    </form>
    </body>
    </html>




    Output


    Apple


    HTML textarea

    Text Area
    Text field is a form component which allows us to enter the single line text,what if we want to have multiple line text?Then you must use the text area components.
    Syntx
    &lttextarea cols='20' rows='20' name='myname'>
    Example

    <html>
    <head>
    <title>
    HTML Textarea
    </title>
    </head>
    <body>
    <form name='form1'>
    Enter the text<textarea cols='20' rows='20' name='myname'>
    </textarea>
    </form>
    </body>
    </html>







    <br /> HTML Textarea<br />


    Enter the text


    Output

    Enter the text


    HTML button

    Button
    There are two buttons that can be created in HTML.one is called submit button.and other is reset button.

    parameters of submit button
    • name:
      denotes the name of the submit the button.
    • value:
      It is writing some text on the text on button.
    • align:
      specifies the alignment of the buttons.
    • Example

      <html>
      <head>
      <title>
      HTML Button
      </title>
      </head>
      <body>
      <form name='form1'>
      <div align='left'>
      Enter the  fruit name
      <textarea cols="40" rows="6">
      <input type='submit' name='' value='Submit'>
      <input type='reset' name='check' value='reset'>
      </div>
      </form>
      </body>
      </html>
    Output




    HTML text

    HTML text
    Text is typically required to place one line text.for example if you want to enter name then it is always preferred to have Text field on the form.The text field can be set using
    <input type='text' size='size of text' value="">


    Some other parameters can be
    • name :
      indicates the name of text field
    • Max length:
      That allow us to enter the text of some maximum length.
    • align:
      denotes the alignment of the text field.The alignment can be left,right,bottom and top.
    Example
    <html>
    <head>
    <title>
    HTML Text
    </title>
    </head>
    <body>
    <form name='text'>
    <input type='text' size='20' value="textfield">
    </form>
    </body>
    </html>

    Output



    HTML forms

    HTML forms
    Form is a typical layout on the webpage by which a user can interact with the web page.
    <form> tag is used to has an attribute action which gets executed when user clicks the button on the form.
    syntax
    Example
    <html>
    <head>
    <title>
    HTML forms
    </title>
    </head>
    <body>
    <form name='form1' action='get' method='get.html'>
    Name<input type='text' name='name'>
    </form>
    </body>
    </html>



    Some of parameters:
    • name: it is used to show the name of forms
    • action:
      get: it is used to send to data to client browser.it is shows the value in addressbar.
      post: it is used to send to data to specified HTML page.it is don't shows the value.

    • method:   it is which page we can redirect it.

    Output




    HTML table

    HTML table tags
    The table is a matrix of rows and columns and one area formed due to interaction of a row and a column is called cell
    To create a table on the web page the table beginning tag is <table>and </table>tag it is used to ending the tag.
    <html>
    <head>
    <title>
    HTML Table
    </title>
    </head>
    <body>
    <table border="6">
    <caption align="bottom">
    </caption>
    <tr>
    <td>This is left cell row1</td>
    <td>This is right cell row1</td>
    </tr>
    <tr>
    <td>This is left cell row2</td>
    <td>This is right cell row2</td>
    </tr>
    </table>
    </body>
    </html>



    Output


    This is left cell row1 This is right cell row1
    This is left cell row2 This is right cell row2


    HTML frameset

    HTML frames
    HTML frames allow us to present document in multiple views.Using the multiple view we can keep certain information visible and at the same time other views are scrolled or replaced.
    <frameset cols="150,*">
    This allow us to divide the two columns.(i.e vertical frames).One are occupying the size of 150 pixels and the other occupies the remaining portion of the window.
    <frameset  rows='20%,30%,50%, cols='30%*'>

    Example
    <html>
    <head>
    <title>
    HTML Frame
    </title>
    </head>
    <frameset cols="50%,50%">
    <frame src="htmlalign.html" name="leftvertical">
    <frameset rows="*,170%">
    <frame src="htmlfont.html" name="right">
    <frame src="htmlformatting.html" name="right_bottom">
    </frameset>
    </frameset>
    </html>
    Output


    HTML HyperLinks

    HTML Hyperlinks
                 There is a common practice the specify the the web link in the webpage.The Link acts as a pointer to some web or some resource.Use the hyper links in the webpage allow page to link logically with other page.
              We can use the hyperlinks by using a tag <a>and by specified the URL for href.The be assigned to href the specifies the the target of the link.

    Syntax
    <a href='link url'>name of link</a>
    Example
    <html>
    <head>
    <title>
    HTML Hyperlinks
    </title>
    </head>
    <body>
    <a href='http://cprogramtutorials.blogspot.in'>Online tutorial</a>
    </body>
    </html>
    Output
    Online tutorial



    HTML Alignment

    Text Alignment
    We can align the text at left,right,center using <div> tags.
    syntax
    <div align='left/center/right'>
    Example

    <html>
    <head>
    <title>
    HTML Alignment
    </title>
    </head>
    <body>
    <div align='left'>This is left align</div>

    <div align='right'>This is right align</div>

    <div align='center'>This is center align</div>
    </body>
    </html>

    Output

    This is left align

    This is right align

    This is center align

    HTML font

    Font in html
    We can set the font,size and color of the text in the webpage.The tag <basefont>is the set the font.
    Syntax
    <basefont face=font_name>
    Example
    <html>
    <head>
    <title>
    Html font
    </title>
    </head>
    <body>
    <basefont face='arial' size='20'>
    Today is greeny day<br/>
    Today is graceful day</br>
    </font>
    </body>
    </html>

    Output

    Today is greeny day
    Today is graceful day





    HTML formatting

    Formatting the text
    Following are some commonly used tags to format the text
    TagMeaning
    <p>This tag is should be put at the every paragraph
    <br>This is tag causes the single line breaks.Generally it is kept at
    the end of every line
    <pre>This tag is used to perserve the white spaces and lines the text
    <div>This is tag used to make division the sections in the HTML document
    Example
    <html>
    <head>
    <title>
    The HTML formatting
    </title>
    </head>
    <body>
    <p>
    once upon a time there was king who kept a monkey as a pet.
    The monkey served the king.
    </p>
    <div>
    The woman took the wood and thanked him for his kindness, but when the last stick was burned, the monkey cried out at forest.
    </div>
    <pre>
    Every time the newest monkey takes to the stairs,
     he is attacked.
     Most of the monkeys that are beating him have no idea          why they were not permitted to climb the stairs or why they are participating in the beating of the newest monkey.
    </pre>
    </body>
    </html>



    Output


    once upon a time there was king who kept a monkey as a pet.
    The monkey served the king.

    The woman took the wood and thanked him for his kindness, but when the last stick was burned, the monkey cried out at forest.
    Every time the newest monkey takes to the stairs,
    he is attacked.
    Most of the monkeys that are beating him have no idea          why they were not permitted to climb the stairs or why they are participating in the beating of the newest monkey.
    

    html header

    Displaying Header
    we are using header tags which helps to display the text as some header.The header tag is used by h1,h2,h3,h4,h5,h6
    Example
    <html>
    <head>
    <title>
    HTML header
    </title>
    </head>
    <body>
    <h1>This is first header</h1>
    <h2>This is second header</h2>
    <h3>This is third header</h3>
    <h4>This is forth header</h4>
    <h5>This is fifth header</h5>
    <h6>This is sixth header</h6>
    </body>
    </html>

    Output

    This is first header

    This is second header

    This is third header

    This is forth header

    This is fifth header
    This is sixth header


    HTML Syntax

    HTML syntax
    An HTML document consists of three parts
    • <html>
    • <head>section
    • <body>section
    <html>
    <head>
    <title>
    -------
    </title>
    </head>
    <body>
    --------
    </body>
    </html>