HTML
HTML
The first version of HTML was written by Tim Berners-Lee in
1993. Since then, there have been many different versions of
HTML
HTML stands for Hyper Text Markup Language. HTML is the
standard markup language for creating Web pages.
HTML stands for Hyper Text Markup Language. HTML is the standard
markup language for creating Web pages.
Empty
There are two types of tags
Container
1. Empty = no need to close the tags.
2. Container = need to close the tag.
Basic format of html
<HTML> = define on the html document .
<head> = contains the meta and information of the document .
<title> = define the title of the document.
<body> = define the document of the body .
<h1> to <h6>= define the html headings.
<p> = define the paragraph.
<br>=insert the single line break.
<hr> = insert the horizontal line .
<vspace> = adjust the vertical space.
Page
2
HTML
<hspace>= adjut the horizontal space .
<b>=bold.
<u>=underline.
<i>=italic.
<sub>=subscripit.
<sup>=superscripit.
<center>=text center.
<small>=text size small.
<big> = text size big.
<cite>=cite(italic).
<code>=monospace.
<del>=delete.
<strike>=strike.
<em>=used to define emphasized text.
<q>=defines a short quotation.
FONT AND STYLE
1.FONT = * it is the container tag.
* font is work whnever u not close it and apply on the speicfic content
Examples == <font colour =”red” size =”7” face =“algerian”>creating
forms</font>
2. style=*it is the empty tag.
*when use start the style tag it apply on the whole content..
* examples== <body style =”color:yellow;font-size:60px;txt-align:center
MARQUEE
Page
3
HTML
<HTML>
<HEAD>
<TITLE>FIRST PROGRAM</TITLE>
</HEAD>
<BODY>THIS IS THE FIRST PROGRAM
<MARQUEE>NVNEET</MARQUEE>
</BODY>
</HTML>
Output=== navneet TEXT move
LIST
LIST
A.ORDERED LIST =The <ol> tag defines an ordered list. An
ordered list can start with number 1, and continue through ORDERED UN-ORDERED
2, 3, 4, and so on……
<html>
<head>
<title>list of fruit names </title>
<body >
<ol > <OL TYPE”A”,”1”,”I”,”a”>
<li>apple</LI> <OL REVERSED >
<li>mango</LI> 3.ORANGE
2.MANGO
1.APPLE
Page
4
HTML
<li>orange</LI>
</ol |>
</HEAD>
</BODY>
</html>
B.UN-ORDERED LIST = a
bulleted list of items. Used to display related information in an easy-to-read and
concise way as lists.
<html>
<head> <UL TYPE=”SQUARE,CICRLE”>
<title>list of fruit names </title> BULLENT=
<body >
<UL>
<li>apple</LI>
<li>mango</LI>
<li>orange</LI>
</UL>
</HEAD>
</BODY>
Page
5
HTML
</html>
ASSIGNMENT OH THE TOPIC OF ORDERED AND UNORDERED LIST :
<html>
<head>
<title> list if different things</title>
<body>
<font color="red" size="7" face="algerian">
<ul>
<li>FRUIT NAME</li>
<ol>
<li > Appple</li>
<li> Mango</li>
<li> Pear</li>
<li> Banana</li>
</ol>
Page
6
HTML
<li> VEGETABLE NAME </li>
<ol>
<li> Ladyfinger </li>
<li> Pumkin </li>
<li> Capsicaum</li>
<li> Mint</li>
</OL>
</ul>
</body>
<\html>
Table
1.SIMPLE TABLE
<HTML>
<HEAD>
<TITLE>TABLE </TITLE>
<BODY>
<TABLE BORDER="2">
<TR>
Page
7
HTML
<TH>STUDENT NAME </TH>
<TH>FATHER NAME </TH>
<TH>MOTHER NAME </TH>
</TR>
<TR>
<TD>RAJ</TD>
<TD>RAJESH GUPTA</TD>
<TD>SONIYA GUPTA</TD>
</TR>
<TD>SIMMA</TD>
<TD>SUNIL SHARMA</TD>
<TD>MAMTA SHARM,A</TD>
</TR>
<TD>KOMAL SINGLA</TD>
<TD>HITESH SINGLA</TD>
<TD>PRIYA SINGLA</TD>
</TR>
</TABLE>
</BODY>
</HEAD>
</HTML>
Page
8
HTML
2.COLSPAN AND ROWSPAN FIRST TASK
<html>
<head>
<title>table </title></head>
<body>
<tablE BORDER ="4">
<tr>
<th>team</th>
<th cOLspan ="2">q1</th>
<th colspan=" 2" >q2</th>
</tr>
<tr>
<td> member</td>
<td>tc</td>
<td>ir</td>
<td>is</td>
<td>ir</td>
Page
9
HTML
</tr>
<TR>
<TD ROWSPAN="2">TEAM2</TD>
<TD>25</TD>
<TD>46</TD>
<TD>56</TD>
<TD>66</TD>
</TR>
<TR>
<TD>34</TD>
<TD>25</TD>
<TD>46</TD>
<TD>56</TD>
</TR>
3. Colspan and rowspan second task
<html>
<head>
Page
10
HTML
<title>table </title></head>
<body>
<tablE BORDER ="2">
<TR>
<TH COLSPAN="6">INVOICE</TH>
</TR>
<TH ROWSPAN="3" colspan="2">BRP SOLUIONS<BR>
R1,MODEL TOWN,NEAR SINGLA MART ,KLW <BR> DEAL IN: ADVERTISEMENTS &
PRINTING DOCS<BR> E-MAIL : BRPSOLUTIONS.KLW@GMAIL.COM </TH>
<TH colspan="2">INVOICE NUMBER <BR>
1006</TH>
<TH colspan="2">DATED<BR>
07-MAR-24
</TH>
</TR>
<TR>
<TD colspan="2"> DELIVEY NOTE </TD>
<TD colspan="2">MODE/TERMS OF PAYMENT</TD></TR>
<TR>
<TD colspan="2"> REFERENCE NUMBER & DATE <BR>
105/25FEB-2024</TD>
Page
11
HTML
<TD colspan="2">OTHER REFERENCE</TD>
</TR>
<TR>
<TD ROWSPAN="4" colspan="2">BUYER (BILL TO) <BR> <B>PRINCIPAL</B>
<BR><B>GMSSSS KALANWALI(2828) </B><BR>
DISTT-SIRSSA PIN CODE-125201<BR> STATE- HARYANA </TD>
<TD colspan="2"> BUYER'S ORDER NUMBER </TD>
<TD colspan="2"> DATED</TD></TR>
<TR>
<TD colspan="2">DISPACTED DCO NO.</TD>
<TD colspan="2">DELIVERY NOTE DATE</TD></TR>
<TR><TD colspan="2">DISPACTED THROUGH</TD>
<TD colspan="2">DESTINATION</TD</TR>
<TR>
<TD COLSPAN="4">TERMS OF THE DELIVERY</TD>
<tr>
<TH> <B>SR. NUMBER </B></TH>
<th> <b> DESCRIPTION OF THE ITEMS </b></th>
<th > <b>QUANTITY</b> </th>
<th ><b>RATE</b></th>
Page
12
HTML
<th ><b>PER</b></th>
<th><b>AMOUNT</B></TH>
<tr>
<td>1.</td>
4. USE OF FONT, PARAGRAPH, STYLE (ALIGN, VALIGN, HEIGHT,
WIDTH):
<html>
<head>
<title>table </title></head>
<body>
<tablE BORDER ="2">
<TR>
<TH COLSPAN="6">INVOICE</TH>
</TR>
<TH ROWSPAN="3" colspan="2"> <P ALIGN="LEFT">BRP SOLUIONS<BR>
R1,MODEL TOWN,NEAR SINGLA MART ,KLW <BR> DEAL IN: ADVERTISEMENTS &
PRINTING DOCS<BR> E-MAIL : BRPSOLUTIONS.KLW@GMAIL.COM </TH></P>
<TH colspan="2">INVOICE NUMBER <BR>
1006</TH>
<TH colspan="2">DATED<BR>
07-MAR-24
Page
13
HTML
</TH>
</TR>
<TR>
<TD colspan="2"> DELIVEY NOTE </TD>
<TD colspan="2">MODE/TERMS OF PAYMENT</TD></TR>
<TR>
<TD colspan="2"> REFERENCE NUMBER & DATE <BR>
105/25FEB-2024</TD>
<TD colspan="2">OTHER REFERENCE</TD>
</TR>
<TR>
<TD ROWSPAN="4" colspan="2">BUYER (BILL TO) <BR> <B>PRINCIPAL</B>
<BR><B>GMSSSS KALANWALI(2828) </B><BR>
DISTT-SIRSSA PIN CODE-125201<BR> STATE- HARYANA </TD>
<TD colspan="2"> BUYER'S ORDER NUMBER </TD>
<TD colspan="2"> DATED</TD></TR>
<TR>
<TD colspan="2">DISPACTED DCO NO.</TD>
<TD colspan="2">DELIVERY NOTE DATE</TD></TR>
<TR><TD colspan="2">DISPACTED THROUGH</TD>
Page
14
HTML
<TD colspan="2">DESTINATION</TD</TR>
<TR>
<TD COLSPAN="4">TERMS OF THE DELIVERY</TD>
<tr>
<TH> <B>SR. NUMBER </B></TH>
<th> <b> DESCRIPTION OF THE ITEMS </b></th>
<th > <b>QUANTITY</b> </th>
<th ><b>RATE</b></th>
<th ><b>PER</b></th>
<th><b>AMOUNT</B></TH>
<tr >
<td >1.</td>
<TD> SECURITY <BR> UNARMED GUARD <BR> CLASS-IX LEVEL-1(RS PER PAGE
PHOTOCOPY )</TD>
<TD>40</TD>
<TD>70</TD>
<TD>PCS</TD>
<TD>2800</TD>
</TR>
<TR>
Page
15
HTML
<td>2.</td>
<TD>SECURITY <BR> UNARMED SECURITY GUARD <BR> CLASS-IX LEVEL-2(RS PER
PAGE PHOTOCOPY )</TD>
<TD>40</TD>
<TD>70</TD>
<TD>PCS</TD>
<TD>2800</TD>
</TR>
<TR>
<td>3.</td>
<TD>BINDING FOR ALL LEVEL </TD>
<TD>4</TD>
<TD>100</TD>
<TD>PCS</TD>
<TD>400</TD>
</TR>
<TR>
</TR>
<TR >
Page
16
HTML
<TD COLSPAN="6">5</TD><BR>
<BR>
</TR>
<TR>
<TD></TD>
<TD>TOTAL</TD>
<TD></TD>
<TD></TD>
<TD></TD>
<TD>6000</TD>
</TR>
<TR>
<TD COLSPAN="6"> AMOUNT CHARGEABLE (IN WORDS ) <BR>
<B> INR SIX THOSAND ONLY </B></TD>
</TR>
<TR >
<TD COLSPAN="2" ROWSPAN="2"> DECLARATION <BR> WE DECALARE THAT THIS
INVOICE SHOWS THE ACTUAL PRICE OF THE GOODS <BR>
Page
17
HTML
DESCRIBED AND THAT ALL PARTICULAR ARE TRUE AND CORRECT.</TD>
<TD COLSPAN="4" ><B>COMPANY'S BANK DETAILS <BR> A/C HOLDER: BRP
SOLUTION <BR> BANK NAME : PINJAB AND SIND BANK <BR> A/CNUMBER .
1437110000000327<BR>IFSC CODE. PSIB0021437 </B></TD></TR>
<TR> <TD COLSPAN="4"><B>BRP SOLUTIONS</B><BR>
<BR><BR> <P ALIGN="RIGHT" VALIGN="BOTTOM">AUTHORIZED SIGNATORY </P>
</TD>
</TR>
</HEAD>
</BODY>
</HTML>
Page
18
HTML
1. CELL PADDING == DEFINES THE SAPCE BETWEEN SIDES OF THE CELL AND ITS
SIZE.
<HTML>
<HEAD>
<TITLE>TABLE </TITLE>
<BODY>
<TABLE BORDER="2">
<TR>
<TH>STUDENT NAME </TH>
<TH>FATHER NAME </TH>
<TH>MOTHER NAME </TH>
</TR>
<TR>
<TD>RAJ</TD>
<TD>RAJESH GUPTA</TD>
<TD>SONIYA GUPTA</TD>
</TR>
<TD>SIMMA</TD>
<TD>SUNIL SHARMA</TD>
<TD>MAMTA SHARM,A</TD>
</TR>
Page
19
HTML
<TD>KOMAL SINGLA</TD>
<TD>HITESH SINGLA</TD>
<TD>PRIYA SINGLA</TD>
</TR>
</TABLE>
</BODY>
</HEAD>
</HTML>
2. CELL SPACING ==DEFINES THE SPACE BETWEEN CELL BORDERS AND CELLS.
<HTML>
<HEAD>
<TITLE>TABLE </TITLE>
<BODY>
<TABLE BORDER="2">
<TR>
<TH>STUDENT NAME </TH>
<TH>FATHER NAME </TH>
<TH>MOTHER NAME </TH>
</TR>
<TR>
Page
20
HTML
<TD>RAJ</TD>
<TD>RAJESH GUPTA</TD>
<TD>SONIYA GUPTA</TD>
</TR>
<TD>SIMMA</TD>
<TD>SUNIL SHARMA</TD>
<TD>MAMTA SHARM,A</TD>
</TR>
<TD>KOMAL SINGLA</TD>
<TD>HITESH SINGLA</TD>
<TD>PRIYA SINGLA</TD>
</TR>
</TABLE>
</BODY>
</HEAD>
</HTML>
3. HEIGHT AND WIDTH
<TABLE WIDTH=”100%” HEIGHT=”100 %”>
<TABLE WIDTH=”764” HEIGHT=”558”>
<HTML>
Page
21
HTML
<HEAD>
<TITLE>TABLE </TITLE>
<BODY>
<TABLE BORDER="2" WIDTH="765" HEIGHT="558">
<TR>
<TH>STUDENT NAME </TH>
<TH>FATHER NAME </TH>
<TH>MOTHER NAME </TH>
</TR>
<TR>
<TD>RAJ</TD>
<TD>RAJESH GUPTA</TD>
<TD>SONIYA GUPTA</TD>
</TR>
<TD>SIMMA</TD>
<TD>SUNIL SHARMA</TD>
<TD>MAMTA SHARM,A</TD>
</TR>
<TD>KOMAL SINGLA</TD>
<TD>HITESH SINGLA</TD>
<TD>PRIYA SINGLA</TD>
Page
22
HTML
</TR>
</TABLE>
</BODY>
</HEAD>
</HTML>
4. BACKHGROUND
<TABLE BACKGROUND=”IMAGE”>
<TABLE BGCOLOR=””>
5. WE CAN ALSO USE <STYLE >
<TABLE STYLE=”BACKGROUND-IMAGE:url”>
<TABLE STYLE=”background-color:”>
6. TABLE BORDER
<TABLE BORDER=”1” WIDTH=”100%” HEIGHT=”100%” BORDERCOLOR=”BLUE” >
WEBPAGE DIVIDED INTO FRAMES THROUGH
TABLES
<HTML>
<HEAD>
<TITLE> TABULAR</TITLE></head>
<BODY>
<TABLE BORDER="2" WIDTH="100%" HEIGHT="100%" bordercolor="red">
<tr>
Page
23
HTML
<TH HEIGHT="25%" width="100%" BORDERCOLOR="RED" bgcolor="LightGray"
colspan="3"> <MARQUEE LOOP="3" bgcolor="tomato" >WLC TO BRP SOLUTIONS
</MARQUEE> </Th>
</TR>
<TR >
<TD width="25%" height="75%"
bgcolor="mediumseagreen"><b>introduction<hr><br>course<hr><br>contact<hr
></b></td>
<TD WIDTH="50%" ></TD>
<TD width="25%" height="75%" >
</tr>
</body>
</html>
Page
CASCADING STYLE SHEETS
24 (CSS)
HTML
CSS is a set of specification (rules) that give u complete control over he layout of
your webpage and appearance of its content. Css describes how html elements
are to be displayed on screen, paper or in the others. Css saves a lot of work. It
can control the layout of multiple web pages all at once.
<html>
<head> <style type=”text/css”>
Style sheet rules
</style>
</head>
<body>web page elements
</body></head>
Css syntax
H1 (selector)
{Color:blue:font-size:12px;}
Value
Property
Task by using the css
<html>
<head>
Page
25
HTML
<title>embedded cascading style sheet </title>
<style type="text/css">
h1{colour:red;font-size:40px; font-family=algerian}
p{colour:yellow; font-size40px;font-family=bellmt text-indentation:2cm}
</style>
</head>
<body>
<h1>computer play a veery imprediment role in our life . in this era ... computer is
one of the basic necessities .... </h1>
<p>computer play a veery imprediment role in our life . in this era ... computer is
one of the basic necessities ...</p>
<h1> so, if you want make your future bright and enhance the knowledge related
to terchnology </h1>
<p> so, if you want make your future bright and enhance the knowledge related
to terchnology </p>
</body>
</html>
Page
26
HTML
Format table through cess
<html>
<head><title> css rule a used to style a table </title>
<style type=”text/css”>
Table{background:green;color:white;fontsize:20px;}
</style>
</head>
<body>
Page
27
HTML
<h1>table with white text and green background</h1>
<table border=”2”>
<tr>
<td>name</td>
<td>roll no.</td>
</tr>
<tr>
<td> anshu</td>
<td>1023</td>
</table>
</body>
</html>
THREE WAY TO ADD CSS TO WEB PAGE
INLINE EXTERNAL INTERNAL
1. INTERNAL
INTERNAL CSS MAY USE IF ONE SINGLE HTML PAGE HAS UNIQUE STYLE ………
Page
28
HTML
Examples of internal:
2. EXTERNAL
WITH AN EXTERNAL CSS, WE CAN CHANGE THE LOOK OF AN ENTIRE
WEBSITES BY CHANGING JUST ONE FILE. <LINK>
<HTML>
<HEAD><LINK.REF="STYLESHEET"HREF="STYLE.CSS" TYPE="TEXT/CSS">
</HEAD>
<BODY>
<H1>HEADING</H1>
<P>PARAGRAPH</P>
</BODY></HTML>
3. INLINE CSS
INLINBE STYLE MAY BE USED TO APPLY A UNIQUE STYLE FOR A SINGLE
ELEMENTS. TO USE THE INLINE ELEMENT … THE STYLE ATTRIBUTE CAN
CONRAIN ANY CSS PROPERTY …………
Page
29
