HTML
Html is a markup language using which we can create static web pages. in the web page we create
hypertext which can be marked up on the document. it is collection of pre-defined tags where each tag
may or may not have end tag. But each tag having list of attributes. it is not case sensitive. can be written
using any text editor. Interpreted and run through a browser. All the html files are saved as either .htm or
.html.
A html document having two part
1. HEAD
2. BODY
head part is responsible for giving title, defining meta data, writting scription and defining stylesheet.
body part is responsible for designing body of the document.
Creating a simple HTML Document
Open a notepad and write down the following codes:
<html>
<head>
<title>My Test Document</Title>
</head>
<body>
This is My First Document
</body>
</html>
Then save that (example: [Link]). Open internet explorer. Click on file menu then click on open
and select that created file. It will open through that browser. Click on view menu, select source, it will
show you the code. After editing then save that code. Go to browser press F5 to refresh.
Attributes Of BODY tag
leftmargin
topmargin
bgcolor
background
TAG inside the Body Tag
<br>- is a tag having no end tag for giving a line break
<center>- is a tag having end tag for taking the included text to the center of the document
<h1>- is a tag having end tag for making the included text as header text 1
note: like h1 we can use up to h6 in a decreasing order.
<hr>-is a tag having no end tag for giving a horizontal Line. but having some atrributes
a. size b. color
c. width d. align
Ex:
<hr color=red size=10 width=500 align=center>
<b>-is a tag having end tag for making the included text as bold.
<i>-is a tag having end tag for making the included text as italic.
<u>-is a tag having end tag for making the included text as Underline.
<p>-is a tag having end tag for making the included text as a separate paragraph(one line before and one
line after)
<div>-is a tag having end tag for making the included text as a separate block.
<font>-is a tag having end tag for setting font , size and color of the included [Link] having some
atrributes
a. face b. color c. size(maximum 9)
Ex:
<font face=verdana size=5 color=green>SQL Server program group.</font>
<sub> - is a tag having end tag for smaking the included text as subscript
Ex:
Log<sub>3</sub>1000
<sup> - is a tag having end tag for smaking the included text as superscript
Ex:
2<sup>3</sup>
<img>- is a tag having no end tag to display an image on the document. But having some attributes
a. src b. height c. width d. align e. alt
Ex:
<img src="C:\Documents and Settings\All Users\Documents\My Pictures\Sample
Pictures\[Link]" height=200 width=200 align=right alt="My Picture">
*******************************
if you want to run a vidio file then instead of src we can use dynsrc
<bgsound> - is a tag having no end tag for back ground sound.
Ex:
<bgsound src="d:\song\sajan\track12.mp3">
<marquee>- is a tag having end tag for making the included text as scrolling [Link] of marquee tag
are
a. bgcolor b. height c. width d. direction(left,right,up,down)
e. behavior(alternate,scrolling,slide) f. scrolldelay g. scrollamount g. loop
Ex:
<marquee bgcolor=cyan height=100 width=500 direction=down behavior=alternate scrolldelay=200
scrollamount=25 loop=1>GURU VASUCHHI</marquee>
**********************************
<->for Less Than
>->for Greater Than
 ->for space
*****************************************
List in HTML
there are two types of list in html
a. Order list-<ol></ol>-for giving number to the list items
b. unOrder list-<ul></ul>-for giving bullet to the list items
note: all the items are inside <li> tag.
Ex:1
<ol>
<li>Rama</li>
<li>Guru</li>
<li>Fakira</li>
<li>Gopal</li>
</ol>
attributes of <ol> tag
a. type(a,A,i,I,1)
b. start
Ex:2
<ul>
<li>Rama</li>
<li>Guru</li>
<li>Fakira</li>
<li>Gopal</li>
</ul>
attributes of <ul> tag
a. type(square,cube,circle)
Anchor Tag
anchor tag is for creating [Link] always start with <a> and ends with </a>
attributes are
a. href
b. target
c. title
ex:
<a href="[Link]" title="this is my first link" target=_new>My Document</a>
Table tag
Table tag is for creating table in the document. a table always starts with <table> and ends with </table>
all the rows are starts with <tr> and ends with </tr>
all the table headings are starts with <th> and ends with </th>
all the table data are starts with <td> and ends with </td>
ex:
<table>
<tr>
<th>ECODE</th>
<th>ENAME</th>
<th>EAGE</th>
</tr>
<tr>
<td>E001</td>
<td>Harihar</td>
<td>33</td>
</tr>
<tr>
<td>E002</td>
<td>Chakra</td>
<td>31</td>
</tr>
<tr>
<td>E003</td>
<td>Sunny</td>
<td>44</td>
</tr>
</table>
Attributes of table tag
a. border b. bordercolor c. bgcolor d. background e. height f. width
g. align h. cellpadding i. cellspacing
Attributes of tr tag
a. bgcolor b. background c. height d. width
Attributes of th/td tag
a. bgcolor b. background c. height d. width e. rowspan f. colspan
Form Tag
all the html controls are inside form [Link] html controls are also having their own tag these are:
textbox - <input type=text>
password textbox - <input type=password>
multiline textbox - <textarea></textarea>
dropdownlist - <select></select> all the items are inside <option></option> tag
listbox - <select size=2></select> all the items are inside <option></option> tag
radiobutton - <input type=radio>
checkbox- <input type=checkbox>
groupbox - <fieldset></fieldset>
button - <input type=button>
reset button - <input type=reset>
submit button - <input type=submit>
Example
<html> <td>
<head> Select EMP STATE:
<title>Form Example</title> </td>
</head> <td>
<body leftmargin=100> <select size=3>
<h1>Employee Details</h1> <option>Odisha</option>
<form> <option>West Bengal</option>
<table border=1> <option>Bihar</option>
<tr> <option>Madhya Pradesh</option>
<td> <option>Jharkhand</option>
Enter EMP ID: </select>
</td> </td>
<td> </tr>
<input type=text name=txtID size=30 maxlength=6> <tr>
</td> <td>
</tr> Select EMP GENDER:
<tr> </td>
<td> <td>
Enter EMP PASSWORD: <fieldset>
</td> <input type=radio name=rdGen>Male<br>
<td> <input type=radio name=rdGen>FeMale<br>
<input type=password name=txtPASS size=30 </fieldset>
maxlength=6> </td>
</td> </tr>
</tr> <tr>
<tr> <td>
<td> Select EMP FAVOURITE:
Enter EMP ADDRESS: </td>
</td> <td>
<td> <fieldset>
<textarea name=txtADD rows=5 <input type=checkbox name=rdFav1>Movies
cols=23></textarea></td> <input type=checkbox name=rdFav2>Stories
</tr> <br>
<tr> <input type=checkbox name=rdFav3>Games
<td> <input type=checkbox name=rdFav4>Hasakatha
Select EMP CITY: </fieldset>
</td> </td>
<td> </tr>
<select> <tr>
<option>Bhubaneswar</option> <td>
<option>Baripada</option> </td>
<option>Cuttack</option> <td>
<option>Barhmpur</option> <input type=submit value="Submit">
<option>Balasore</option> <input type=reset value="Reset">
</select> <input type=button value="Cancel">
</td> </td>
</tr> </tr>
<tr> </table>
</form>
Contunue………….. </body>
</html>
<select size=3>
<option>Odisha</option>