Unit-3 HTML and CSS
Unit-3 HTML and CSS
3.1.1aaus Ht
X
Sve As b
Sesrch Desktop
This PC Desktop »
2.
(HEi save as) f&arqTITÅ Save as type 3H AU Files (*) ListfaheY 4 FI aNI|
a.
3.1.3 aiyLTT
<B>..</B>
<U>.K/U>
<I>,<I>
<BLOCKQUOTE>.
</BLOCKQUOTE>
<FONT>..<FONT>
<Hn>..K/Hn>
<HR>
<SUP>..</SUP
)
<SUB>,.</SUB>
Hafzzfa )
GtcYT 3.3: <P> 3ir <FONT> faIYGII
<P> fd ALIGN
1 <html>
<head>
3 <title> Indi a at the
</head> 0lympias-Wikipadia</title>
5 <body>
6 <H1>India at olymplgs</H1>
<HR 3IZE5 NOSHADE>
<P ><>India</B> £irst partioipated at the
,with a lone athlato (Norman Pritohard) 0lympio Games in <I>1900</I>
winning two
athletigs and begame the <U>£irst Asian nation</U> tomedals-
win an
both silver- in
</P> 0lynpic medal.
<P align=cntarThe
nation first sant a team to the Sunmer
1920, and has participated in overy Sunmer Games olynpig Games in
competed at several Winter olympio Games beginningsinge then. India has also
in 1964.
</P>
12 <FONT FACE"ARIAI," SI2E=3
COLOR="BLUE">Indian athletes have won <B><I>KU35
medals</U></I></B>, all at the Summer Games. For a period of time, India
national £ield hockey team as dominant in
olympio competition, winning
eleven medals in twelve 0lympios between 1920
Lngluded 8 gold medals total and six and 1980. <BR> The run
13 </FONT> successive gold medals from 1928-1956.
14 </body>
15
Lkihtml>
Hyper Text Markup Language (ile length: 1,005 lines 20 Ln:15 Col:8 Pos: 996 Windows (CR LE UTF-8 INS
106
Ufile//C/Users/Lenovo/Desktop/NDIA_Olympics.htm
India at Olympics
India first participated at the Olympic Games in 1900,with a lone athlete (Norman Pritchard) winning two medals
both silver- in athletics and became the first Asian nation to win an Olympic medal.
The nation frst sent a team to the Summer Olympic Games in 1920, and has participated in every Summer Games
since then India has also competed at several Winter Olympic Games beginning in 1964.
Indian athletes have won 35 medals, all at the Summer Games. For a period of time, India national field
hockey team was dominant in Olympic competition, winning eleven medals in twelve Olympics between
1920 and 1980.
The run included 8 gold medals total and six successive gold medals from 1928-1956.
fes farr IIHh 3TIGT YeT 8 À (E L5 tY2T)30SI^T 2 KU> a 3YT First Asian Nation
3.1.4 G a f
cUSS BACKGROUND
fa hR BGCOLOR
}Az TEXT
3.1.5f e( )
<OL>
<LIS
<DL>
<DT>
3EUT fe 3.5 sefria fa T I f 3.5 (a) IT TI l`T AS0, faa 3.5 (b) qts 3-R
<h4>Sports: Odered líst</h4> Spens-Wikipedia
7 kol>
<li> Hockey</l i>
<lis Basoball </li>
<li> Archery</li> Sports: Ordered list
-</ol>
12
<h4>Sports: Unordered líst</h4> 1. Hockey
13 <ul> 2. Basebal1
14 <li> Hookoy</li> 3. Archery
<li> Baseball </li>
<li> Archery</lis Sports: Unordered list
17 </ul>
<h4> Sports: Definitions Lists </h4> Hockey
29 <dl> Baseball
<dt>Hokey: </dt> " Archery
<dd>- is a sport in whích two teams
Sports : Definitions Lists
play against oach other by trying to
manoeuVre a ball or a puck into the
opponent's goal using a hookey stick. Hockey:
-is a sport in which two teams plsy agzinst esch other by
</dd> trying to mnoeuvTe s ball or a puck into the opponene's goal
<dt>Baseball : </dt>
using a hockey stick
23 <dd>- is a bat-and-ball gane played Basebal:
between two opposing teams who take -is abat-and-ball game played between two opposing teams
turns batting and fielding. </dd> who take turns bating and felding.
</dl>
fua 3.5: HTML List T y 3<I8RU (a) `TfAst (b) SISr fAst
faytuar
START
VALUE
Afal 3.7: <IMG> feoH
fayty
s0HeIET ALIGN
aist BORDER
fag WIDTH
5T HEIGHT
HSPACE
ALT
SRC
gÀKIMG> i
<body> Vivekananda (January 1863 4 July 1902) , was
<img src="swami vivekanand.png" > Swami 19th-century Indian mystic
an Indian Híndu monk. He was a chief disciple of the
of the Indian philosophies of
Ramakrishna. He was a key figure in the introduction
Vedanta and Yoga to the Western WOrld
<HR>
~ Swami Vivekananda
Swami Vivekananda (January 1863 -
4July 1902). was an Indian Hindu monk. He was achief disciple ofthe 19th-century Lndian mystic
Ramakrishna.He was akey figure in the introduction of the Indian philosophies of Vedanta and Yoga to the
Western world
-Swami Vivekananda
ALIGN UGIST
VALIGN ¥IyeI^T
WIDTH GgY
BORDER asT
CELL PADDING
CELLSPASING
ROWSPAN T
13
<th>Silver</th> 10
<th bgcolor=gray>Sport</th>
<th>Bronze</th> 11 <th>Gold</th>
15 </tr>
<th>Total</th> 12 <th>silver</th>
16 i3 <th>Bronze</th>
17
<tr)
|14 </trs
<th>Total</th>
<ta>Field hockey</td> |15 <tr>
<td>8</td> i6
<td>1</td> 17 <td>Field hockey</ td>
<td>3</td> 18 <td>8</td>
<td>12</td></tr) 19 <td>1</ta>
<tr) <td>3</td
<td>shooting</td> 21 <trs <td>12</td></tr>
<td>1</td> 22
26 <td>2</td> 23 <td>Shooting</td>
<td>lk/td>
<td>k/td> 24
27 <td>2</td>
28 </tr>
<td>4</td> <td>1</td>
<td>4</tà>
-</table> 27
28
</tr>
F</table>
e 3.8: HTML Table (aT s) (a) gU faY aIci
afat (b)fafa a ueRH
Default Table Table with border=5 and width=s0%
Sport Gold Silver Bronze Total Sport Gold Silver Bronze Total
Field hockey 8 3 12 Field 8 |1 3 12
Shooting 2 1 4 hockey
Table 1: Medals in Field Hockey & Shooting |1 2 4
Shooting Table 1: Medals in Field Hockey &
Shooting
ta 3.9: asR HSZYE (a) 5 fee euAU}AT (b) border ir width WcHA AY}EG
ta 3.8 (b) , H0 iE I3E, fa 3.10 (b) W th TII 3.9 (b) 3R
fE310
f 3.11:teR }I
fI
www. aicte-india.org te fE
Educrtion-tndua
X
Educaticn-India
O feICUsers/erovo/Desitop/Nex:
Abot AlCTE About UGE
Link to website ofAICTE
Al Ibdia Councl for Technical
Edocatioa (ACTE) was set up in
N¡ember 1945 as a national-level
University Grants Commission
Apex Advisory Body to cHafity higher education for al!
cooducta survey on the facilities available for teehnicalIeducation UGC Link to aebste of
nd to pr onote developnent in the country in a
coordinated and integrated The University Grants
Commission (UGC) came into eistecce ca 28h
December, 1953 and became a
India by an Act of Parliament instatutory Organizstioa of tbe
1956, for the coordintion Goermeat of
fle/UerslenoveDesAoptien folderfAnehor htmabcut_ugc maintenance standards of teaching,
of determinson and
xminatioa and reserch ia university
httpx/lwww.ugc.acin
3.1.9 HTML H
</FORM>
3.9 ;
type=
NAME I4
SIZE 31AR
MAXLENGTH He
TYPE 9HR
COLS 3t ROWS
NAME H
TABINDEx }agsH
WRAP y
feytear
NAME 14
SIZE 3HTHIR
MULTIPLE VatfeE
VALUE Hey
HTML
<html>
<head>
<title> Web Form and its components</title>
</head>
4
<body>
6 <table border-3 width=50% align=left cellpadding=5><t<td
7
<form action="local server" method="post" name-"form1">
8 <h3>Participation form for annual day function.<h3>
9 Your Name: <input type=-"text" name-"text1"><br><br>
10 I am a<input name="radio1" type-"radio" value-"radio1"> Girl
11 <input name-"radiol"type="radio" value-"radio2">Boy <br><br>
12 Branch:<select name-"'select">
13 <option selected>Computer Science</option>
14 <option>Civil</option>
14 <option>Mechanical</option>
16 <option>Electrical</option>
17 </select>  
18 Year:<select name="'select'>
19 <option>First</option>
20 <option>Second</option>
21 <option>Third</option>
22 </select><br><br>
23 Address:<textarea name="textarea" cols=20 rows=3></textarea><br><b
24| Mail ID:<input type-"text" name=-"text2">
25| Mobile No.:<input type="text" name-"text3"><br><br>
26| Choose your participation<br>
27
<input type="checkbox" name-"cb" value="song"> Song
28
<input type-"checkbox" name-"cb" value-"instrument">Instrument Play
29
<input type="checkbox" name=-"cb" value-"poem">Poem
30
<input type="checkbox" name="cb" value-"deb">Debate<br><b
31
<input type="reset" name-"Reset" value="Reset'>
32
33
<inputtype="submit" name="Submit" value-"Submit'">
34 </form></td></tr></table></body>
<htm>
<body
style=
lor:
|RSubmit Choose
your
eset|participation
V MailID: Address: Pareek
I Your
Song Branch:]Computer
Scdence Name:Uddhav
v amParticipation
a Web
[email protected] 121,Hanuman
O
Dnstrument Nagpur,
Nagar,
PIN:440009 MH)Flat No
Punazvasu
Apartment Form
"> Girl
fa and
O its
fle/|/C:/Users/Lenovo/Desktop/Participation.html
Boy form O
3.14: Play
components
for
VPoem annual
1234567890
MobileNo.:
FirstvYear: x+
VDebate day
3r ThirdSecond First
function
HA
2.
e</h3>
> Singh Tailures
<hl>Motivational
yavardhan
n=right>- Quote</hl>>
b</head>
results<h3 href="mystyle.css" external.html
<body><html><head>
Never rel="stylesheet"
<link IgGT É:
than fear
<style>.</style>
<body>
<Ahtm> #00FF00;">
style=-"background
color:<body</head><head><htm>
failure.
successes.
We
Treatlearn *
type="text/css"
failuresmore tet A,
</h3</body> <body></head> h3
</style>type="text/css"
style<head>
> <htm> f4
likefrom {background-color:
(REA
fnures
TretlikeNeve Browser body {File:
Motivational QuoteOutput
background-color:
#808080;mystyle.css B)
fea
fulue. ffYT
reEnits We
#0000FF;
learn fI
mote color: TI
ardhan
Rathore
SIngh rom
lnlore
#FFFFFF (GIfTGT
than
sUcceses 3.(1bE)
3)
120 15â yunt qiag
Declaration Block
Selector
hl {color: red; font-size:14px;}
Property Value Property Value
fra 3.15: yya fiZ (3446f, s0ei stt H1)
anfereat 3.15: ÎyyH Àclass fretaer
(a) File: classselector.html (b) File: mystylel.css
1 html <html><head>
|2 <link rel='stylesheet" type="text /css"
href-'mystylel.cs" /></head> .fitness{color:white; background-color:green}
|3 <body>
|4 <hl id="'Sports'>Sports and Fitness</ (c) Browser Output
hl>.
5 <p class="fitness"> The word "sport Sports and Fitness
comes from the Old French Desport
meaning leisure"</p> Tbe iword"sport" comes Irom the Old French despor
meaning"leisure
6 <h3 class="fitness'>a sport
should have
an element of competition</h3> a sport should have an element of
</body> competition
</html>
1. dre aht
(Element Selector): 45I
.3</html>
<body>
3.2talent.<br><b>-Kom</b></h4>
Perseverance <h4 myself boxing
thought I <body><html><head>
href-"mystyle2.css"
<h4 </head> <link
> html
Î0yH id="shooting"> id="boxing"> 6,
GI size:18px;)
background-color:green
GIGIA (:HG; )
and is <h4>
will forrel="stylesheet" (a)
Y0Yat is I men File: GIfTehl ret
proved show (T:A;
Bhindra</b></h4>
Abhinav a 3H
and
them People id ,
(Tur) talent. selector.html 3.16 hHNT: 3G`T
Practice
myself.<br><b>-Mary some not (c) h0e-316R:18
Hard for used afT ARI
day. ISTt
women type="text/css" TI
is
work I to 3R
apromised say 3132YE I
talent. and
yTsG;) HHTySH-:)
is that
a I fRarit 3ES0
talent.
Abbinav
Bhindra - a
Practice proved
Mary - People
thought
Kommyself. #shooting{color:blue;
font-size:18px;} Net,3RU
AIH
used (c) "yeT"
is I teit
a wil to ISTr f-fYT fy,
talent. show say
that mystyle2.css
File:(b) (shooting) 4A t,
them 313<YE
Perseverance boring HLÁ da
some mystyle2.css
is
for
day. (Browser
rHT R
menI
)
34StTheH"(.fitnessHA
is promised
a and
talent.
mysell
not
Output) a
3.16 (color:blue;
Hard for
momen
(b) HÌ
and
work <h4>
I mystyle2.
nd
is
I dai font
faerur
text-decoration R-HgT tE ay fir AÀ h 1{ text-decora tion :
underline;}
H:ah1, 3arIE7, IEA-4
text-indent z-5z }z E f NH tp {text-indent: 60px;}
text-transform -ziat
faaru
|background-attachment
td (text-align: center;}
|background-imageygy-sa
y sfa tr À fy h2 {background-image: url("ile.
|jpeg");}
p{ font-style: italic;
font-weight: bold;
font-size: 40px;
font-family: arial, sans-serif; text-align: center;
letter-spacing: 3pX;
text-transform: capitalize;