Sie sind auf Seite 1von 27

FILE OF

HTML
Submitted to:

Lect. Priya

Submitted By:

Puja
5228

INDEX
SNO.
TOPICS
1.
Introduction to
HTML
2.
Structure of
HTML
3.
Welcome page
4.
Physical inline
elements
5.
Headings
6.
Lists
7.
Image map
8.
Calendar
9.
Tables
10.
Frames
11.
Survey Form

PAGE NO. REMARKS

Introduction to HTML
HTML stands for HYPER TEXT MARKUP
LANGUAGE. HTML is a special formatting
language that defines the appearance and contents
of a web page. Each word in HTML has a special
meaning. The word HYPERTEXT refers to the
text which acts as a link. You can jump to any
web page on the internet by simply clicking at the
text which acts as a link. The word MARKUP
refers to the symbols or sequence of characters
added to ordinary text to define the structure of
the text. The symbol is used for markup tell the
browser how to display the text and often called
tags. The word LANGUAGE refers to the syntax
that is similar to any other language. HTML is
one of the most commonly used interface language
used now a days for the web.

Structure of HTML
<HTML>
<HEAD>
<TITLE>..</TITLE>
</HEAD>
<BODY>
<!This section contains the document content>
</BODY>
</HTML>
We shall now examine the each section
individually:
<HTML>: It specifies the document as a
webpage that can be seen in the web browser . The
entire document is enclosed within <HTML> and
</HTML> tags. It actually tells the web browser
where the page starts and where it ends . it usually
consists of two parts HEAD and BODY.

<HEAD>: The head section specifies descriptive


information about the web documents. It is
marked by an opening tag <HEAD> and a closing
tag </HEAD>. It consists of information such as
the title of the webpage.

<TITLE>: The title element contains the title of


HTML document that appears on the title bar of
the browsers window when the webpage is
loaded. It is enclosed between <TITLE> and
</TITLE> TAGS. The should be descriptive and
meaningful.

<BODY>: The body element contains the actual


contents of HTML document that can be seen by
the end user, when the page is loaded in the
browsers window. These contents are always
enclosed between <BODY> and </BODY> tags. It
starts after the ending HEAD tag and ends over
the ending HTML tag. The body element contains
any valid HTML contents such as text, images,
forms, special characters etc.

WELCOME PAGE

CODING
<HTML>
<HEAD>
<TITLE>WELCOME PAGE</TITLE>
</HEAD>
<BODY BGCOLOR="SKY BLUE">
WELCOME TO HTML DOCUMENT
</BODY>
</HTML>

PHYSICAL INLINE ELEMENTS

CODING
<html>
<head>
<title>physical inline elements</title>
</head>
<body bgcolor="pink">
welcome to html<br>
<i>hello</i><br>
<b>everybody</b><br>
<u>i want</u><br>
h<sub>2</sub>o<br>
<strike>and</strike><br>
<tt>want to</tt><br>
<big>equation</big><br>
y=x<sup>2</sup><br>
</body>
</html>

HEADINGS

CODING
<html>
<head>
<title>applying headings</title>
</head>
<body bgcolor="grey">
<h1>WELCOME</h1>
<h2>WELCOME</h2>
<h3>WELCOME</h3>
<h4>WELCOME</h4>
<h5>WELCOME</h5>
<h6>WELCOME</h6>
</body>
</html>

LISTS

CODING
<html>
<head>
<title>lists</title>
</head>
<body bgcolor="yellow">
<ol>
<li>Computer
<ol type="A">
<li>Hardware
<ol type="i">
<li>Printer
<ol type="a">
<li>Laser printer
<li>Dot matrix printer
</ol>
<li>Monitor
<ol type="a">
<li>CRT
<li>LCD
</ol>
<li>Software
<ol type="I">
<li>Application software
<li>System software
</ol>
</ol>
</ol>
</body>
</html>

IMAGE MAP

CODING
<html>
<head>
<title>image map</title>
</head>
<body>
<map name="map">
<area shape="rect" coords="1,1,75,47" href="list.html">
<area shape="rect" coords="75,1,150,47"
href="banner.html">
<area shape="rect" coords="1,47,75,94" href="contact.html">
<area shape="rect" coords="75,47,150,94"
href="about.html">
</map>
<img src="water.jpg" usemap="#map">
</body>
</html>

CALENDAR

CODING
<html>
<head>
<title>calendar</title>
</head>
<body bgcolor="sky blue"">
<table border="10" width="50%" cellpadding="3"
cellspacing="5" align="center">
<caption align="top"> JULY 2012</caption>
<tr>
<th>sun</th>
<th>mo</td>
<th>tue</td>
<th>wed</td>
<th>thurs</td>
<th>fri</td>
<th>sat</td>
</tr>
<tr align="center">
<td bgcolor="pink">1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
<tr align="center">
<td bgcolor="pink">8</td>
<td>9</td>
<td>10</td>
<td>11</td>

<td>12</td>
<td>13</td>
<td>14</td>
</tr>
<tr align="center">
<td bgcolor="pink">15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
</tr>
<tr align="center">
<td bgcolor="pink">22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
</tr>
<tr align="center">
<td bgcolor="pink">29</td>
<td>30</td>
<td>31</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>

TABLES

CODING
<HTML>
<HEAD>
<TITLE>TABLE</TITLE>
</HEAD>
<BODY bgcolor="PINK"<br>
<TABLE BORDER >
<TR>
<TD ROWSPAN="6">ABC COMPANY</TD>
</TR>
<TR>
<TD COLSPAN="2">BRANCH 1</TD>
<TD COLSPAN="2">BRANCH 2</TD>
<TD COLSPAN="2" >BRANCH 3</TD>
</TR>
<TR>
<TD>EMP ID</TD>
<TD>NAME</TD>
<TD>EMP ID</TD>
<TD>NAME</TD>
<TD>EMP ID</TD>
<TD>NAME</TD>
</TR>
<TR>
<TD>E101</TD>
<TD>X</TD>
<TD>E1101</TD>
<TD>A</TD>
<TD>E1</TD>
<TD>P</TD>
</TR>
<TR>
<TD>E102</TD>
<TD>Y</TD>

<TD>E1102</TD>
<TD>B</TD>
<TD>E2</TD>
<TD>Q</TD>
</TR>
<TR>
<TD>E103</TD>
<TD>Z</TD>
<TD>E1103</TD>
<TD>C</TD>
<TD>E3</TD>
<TD>R</TD>
</TR>
</BODY>
</HTML>

FRAMES

CODING
<html>
<head>
<title>frame</title>
</head>
<frameset cols="20%,80%">
<frameset rows="50%,50%">
<frame src="logo.jpg" scrolling="no">
<frame src="h3.html" target="frameset">
</frameset>
<frameset rows="30%,60%,10%">
<frame src="banner.html">
<frame src="welcome.html">
<frame src="copy.html">
</frameset>
</frameset>
</html>

SURVEY FORM

CODING
<html>
<body><h1> SURVEY FORM</h1>
<form>
<table>
<tr>
<td>First name<input type="text" size="13"
name="first"></td>
</tr>
<tr>
<td>Last name<input type="text" size="13"
name="first"></td>
</tr>
<tr>
<td>Gender<input type="radio"name="M"checked >Male
<input type="radio"name="F">Female</td>
</tr>
<tr>
<td>Address<textarea rows="3" cols="12"></textarea></td>
</tr>
<tr>
<td>City<select name="City">
<option>Ludhiana
<option>Jalandhar
<option>Amritsar
<option>Patiala
<option>Moga
<option>Chandigarh
</select></td>
</tr>
<tr>
<td>State<select name="State">
<option>Punjab

<option>Haryana
<option>Himachal
</select></td>
</tr>
<tr>
<td>Postal code<input type="text" size="6" max.
length="6"></td>
</tr>
<tr>
<td>Country<select name="country">
<option value="ind">India
<option value="usa">america
<option value="erp">europe
<option value="aus">australia
</select></td>
</tr>
<tr>
<td>Hobbies<input type="check box" name="cheque"
size="2"> Reading</td>
<td><input type="check box" name="cheque" size="2">
Writing</td>
<td><input type="check box" name="cheque" size="2">
Drawing</td>
</tr>
<tr>
<td>Upload image
<td><input type"f></td>
</tr>
<tr>
<td>Comment
<text area rows="5" cols="5" value="type your text
area"></text area></td>
</tr>
<tr>
<td><input type="submit" value="SUBMIT"></td>

<td><input type="reset" value="RESET"></td>


</tr>
</table>
</form>
</body>
</html>