HTML

 

HYPER TEXT MARKUP LANGUAGE (HTML)

INTRODUCTION :

           An Html File Is A Text File Containing Small Tag.The Markup Tag Tell The Web Browser How To Display The Page  (Extension .html)

             HTML  is a collection of platform independent style(indicated by markup tags < >) that define the various components of a world wide web(www) document

It was invented by Tim Berners-Lee while at CERN,


The European laboratory for particle physics in geneva

The world wide web (www) is most often called the web. The web is a network of computer all over the world . all the computer in the web can communicate with each other all the computer use a communication Standared called Hyper text transfer protocol(HTTP)

Create and Run The Html Program

                  I.     Create program in notepad

               II.     Save filename .html

     III.     Start – (internet explorer/netscape navigator) – file – open – browse – choose the (filename.html) file - ok

The most common display instruction are called HTML tags.HTML tags look like: < >

INTRODUCTION TO HTML

HTML stands for Hyper Text Markup Language

Syntax




EXAMPLE : 1

<Html>

<head>

<title> Hai Hello</title>

</head>

<body>

This is my first web page

<b> - Hai</b>

<i>Hello</i>

</body>

</html>

output

This is my Web Page-   Hai Hello

         Heading are defined with the <h1> to <h6> tags.

<h1> define the largest heading.</h1>

<h6> define the smallest  heading .</h6>

EXAMPLE : 2

<html>

<head>

<title> Welcome Page</title>

</head>

<h1> hello </h1>

<h2> hello </h2>

<h3> hello </h3>

<h4> hello </h4>

<h5> hello </h5>

<h6> hello </h6>

</body>

</html>

output

hello

hello

hello

hello

hello

hello

TEXT FORMATTING TAG

<b>---------</b>------bold

<i>----------</i>------italic

<u>----------</u>------underline

<strike>-----</strike>---strike

<del>-------</del>-----delete

<small>------</small>

<big>------</big>

<sup>----</sup>--------superscript

<sub>-----</sub>-------subscript

<center>----</centre>

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

<pre>-----</pre>----------preformatted text

<br>-----break

EXAMPLE : 3

<html><head><title>WelcomePage</title><bod>

<b>Hello</b>

<i>World</i>

<u>hihello</u>

<big>software</big>

X<sup>2</sup>

X<sub>2</sub>

<centre>hardware</centre>

<pre<p>preformatted text

Welcome

To

Tamilnadu

<p></pre></html>

output

Hello

world

HIHELLO

software

X2

X2

Hardware

WELCOME

TO

TAMILNADU

LIST

ORDERLIST – OL

UNORDERLIST – UL

LIST – LI

DEFINITION LIST – DL

DEFINITION TERM – DT

DEFNITION DATA – DD

EXAMPLE : 4

<html>

<head>

<title>welcome page</title>

<body>

<ol>

<li>hdca</li>

<li>dca</li>

<ol><br>

<ul>

<li>hdca</li>

<li>dca</li>

<ul><br>

<dl>

<dt>hdca<dt>

<dd>honours diploma in computer application</dd>

<dt>dca</dt>

<dd>diplamo in computer application</dd>

</dl>

</body>

</html>

Output

 

Hdca

Dca

§  Hdca

§  Dca

Honours diplamo in computer application

Diplamo in computer application

                     TABLE FORMAT

Example : 5

<html>

<head>

<title>welcome page</title>

<body>

<table border=”3”>

<tr>

<th>flowers</th>

<th>quantity</th>

</tr>

<tr>

<td>rose</td>

<td>100</td>

</tr>

<tr>

<td>jasmine</td>

<td>200</td>

</tr>

</table>

</body>

</html>

Output

FLOWERS

QUANTITY

ROSE

100

JASMINE

200

 

  Example : 6

<html>

<head><title>table</title></head>

<body text=”blue”>

<table bgcolor=”pink” border=”5” bordercolor=”green” cellspacing=”10” cellpadding=”10”height =”100%” width=”100%”>

<tr>

<th colspan=”4”> student details</th>

</tr>

<tr bgcolor=”pink” align=”centre” valign=”bottom”>

<th><fontcolor=”red”>sno</th>

<th><fontcolor=”red”>entno</th>

<th><fontcolor=”red”>course</th>

<th><fontcolor=”red”>name</th>

</tr>

<tr>

<td>1</td>

<td>A5000</td>

<td>hdca</td>

<td>mahima</td>

</tr>

   <tr>

<td>2</td>

<td>A5001</td>

<td>dca</td>

<td>abi</td>

</tr>

<tr>

<td>3</td>

<td>A5002</td>

<td>dmo</td>

<td>sri</td>

</tr>

<tr>

<td>4</td>

<td>A5003</td>

<td>adpp</td>

<td>roshini</td>

</tr>

<tr>

<td>5</td>

<td>A5004</td>

<td>tallyprime</td>

<td>ragavi</td>

</tr>

</body>

</html>

Output

Student details

Sno

entno

Course

Name

1

A5000

Hdca

Mahi

2

A5001

Dca

Abi

3

A5002

Dmo

samantha

4

A5003

Adpp

Roshini

5

A5004

Tallyprime

Rama

 

                                  Form and  input

1) Text field                                                                                  

2) Text area

3) Radio button

4) Check box

5) Dropdown box

6) Button

Example : 7

<html>

<head>

<title>welcomepage</title>

<form>

Username:

<input type=”text” name=”urname”>

<br><br>

Password:

<input type=”password” name=”passwd”><br><br>

<inputtype=”radio”name=”gender”value=”male”>male<br>

<inputtype=”radio”name=”gender”value=”female”>

female<br><br>

courses

<input type=”checkbox” name=”course1”>HDCA

<input type=”checkbox” name=”course1”>DCA

<input type=”checkbox” name=”course1”>DDTP

<br><br>

Qualification

<select name=”qualification”>

<option value=”pg”>post graduation

<option value=”ug”>under graduation

<option value=”12th”>12th

<option value=”10th”>10th

</select><br><br>

Address:<br>

<textarea name=”addr” rows=”5” cols=”30” </textarea><br><br>

<input type=”button” value=”click  here”>

</html>








 


Example : 8

 <html>

<head><title>form</title></head>

<body bgcolor=”pink” text=”blue”>

<form>

<h1 align=”center”>Resume</h1>

<pre>

Name : <input type=”text”>

Password : <input type=”password”>

Gender : Male<input type=”radio” name=”r1”>

              Female< input type=”radio” name=”r2”>

Address : <textarea rows=”5” cols=”20”></textarea>

Qualification : <select name=”s1”>

                        <option>BSC</option>

                        <option>MSC</option>

                        <option>BCA</option>

</select>

Language : Tamil<input type=”checkbox” name=”c1”>

                   English<input type=”checkbox” name=”c2”>

                   Hindi<input type=”checkbox” name=”c3”>

Attach File : <input type=”file” name=”f1”>

          <input type=”Button” name=”b1” value=”click”>

        <input type=”Submit” name=”b2” value=”submit”>

         <input type=”Reset” name=”b3” value=”clear”>

</pre>

</form>

</body>

</html>

 Moving Comment  &  Marquee tag

  Example : 9

<html>

<head>

<title>Welcome page</title>

<body>

<marquee>welcome to tamilnadu</marquee>

</body>

</html>

Example : 10

<html>

<head><title>Marquee</title></head>

<body>

<marquee bgcolor=”black” direction=”right” bahaviour=”alternative” vspace=”400%” scrollamount=”100” loop=”5” ><font color=”white”>welcome to india</marquee>

</body>

</html>

 

 LOGIN FORM

<Html>

<form name="f1">

<table border="5" align="center" bordercolor="blue">

<tr><td>username<td><input type="text" name="t1"></tr>

<tr><td>password<td><input type="password" name="p1"></tr>

<tr><td><input type="button" name="b1" value="click"><td><input type="reset" value="clear"</tr>

</table>

</form>

<script for="b1" event="onclick" language="vbs">

If f1.t1.value="student" and f1.p1.value="computer" then

Msgbox"valid username&password"

Else

Msgbox"invalid"

End if

</script>

</html>

TEXT,LABEL,BUTTON

<Html>

<body>

<form name="form1">

<input type="button" name="button1" value="clickhere!">

</form>

<script language="vbscript">

Sub button1_onclick()

Msgbox"good morning"

End sub

</script>

</body>

</html>


VALIDATE AGE AND NUMERIC VALUE USING VBSCRIPT

<Html>

<body>

<form name="form1">

Age<input type="text" name="text1">

<input type="button" name="button1" value="click here!">

</form>

<script language="vbscript">

Sub button1_onclick()

Msgbox cint(form1.text1.value)

If cint(form1.text1.value)>=18 then

Msgbox"age is accepted"

Else

Msgbox"entered age is wrong"

End if

End sub

</script>

</body>

</html>

DATE&TIME

<Html>

<script language="vbs">

Sub dtm()

F1.t1.value=date()

F1.t2.value=time()

F1.t3.value=now()

End sub

</script>

<form name="f1">

<table border="5" align="center" bordercolor="red">

<tr><td>date<td><input type="text" name="t1"></tr>

<tr><td>time<td><input type="text" name="t2"></tr>

<tr><td>date and time<td><input type="text" name="t3"></tr>

<tr><td><input type="button" name="b1" value="click" onclick="dtm()"><td><input type="reset" value="clear"></tr>

</table>

</form>

</html>

DATE  DIFFERENCE

<Html>

<script language="vbs">

Document.write(datediff("m","09/22/07","04/22/07))&"<br>"

Document.write(datediff("d","04/22/07","09/22/07))&"<br>"

Document.write(datediff("yyyy","04/22/07","09/22/09))

</script>

</html>

OPTION BUTTON

<Html>

<script language="vbs">

Sub col()

Document.bgcolor=f1.s1.value

End sub

</script>

<form name="f1">

<hr><center>

<h1 align="center">select control program</h1>

Select the background color:

<select name="s1" onclick="col()">

<option value="lightgreen">green</option>

<option value="yellow">yellow</option>

<option value="lightblue">blue</option>

</select><hr></form></html>

CHECK  BOX

<!-----Checkbox control using procedure------>

<html>

<script language="vbs">

Sub yel()

If c1.checked then

Document.bgcolor="wheat"

Else

Document.bgcolor="pink"

End if

End sub

</script>

<hr>

<h1 align="center">checkbox</h1>

<center>wheat:<input type="checkbox" name="c1"onclick="yel()"></center>

<center>pink:<input type="checkbox" name="c2"onclick="yel()"></center>

</hr>

</html>

RADIO BUTTON

<!-----Example for radio button------>

<html>

<script language="vbs">

Sub col()

If r1(0).checked then

Document.bgcolor="green"

Document.fgcolor="red"

Elseif r1(1).checked then

Document.bgcolor="lightblue"

Document.fgcolor="green"

Elseif r1(2).checked then

Document.bgcolor="lightyellow"

Document.fgcolor="blue"

Else

Document.bgcolor="white"

End if

End sub

</script>

<h1>option buttons</h1>

Green<input type="radio" name="r1" onclick="col()">

Blue<input type="radio" name="r1" onclick="col()">

Yellow<input type="radio" name="r1" onclick="col()">

</Html>

 

0 comments:

Post a Comment