Scribd
Upload
33 views

Unit-3 HTML and CSS

The document discusses different types of lists that can be used in HTML - ordered lists (<ol>), unordered lists (<ul>), and definition lists (<dl>). Examples are provided of each list type using the sports hockey, baseball and archery. Headings are included before each list example and list items are marked up with <li> tags.

Uploaded by

Yogyta Singh
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
33 views

Unit-3 HTML and CSS

The document discusses different types of lists that can be used in HTML - ordered lists (<ol>), unordered lists (<ul>), and definition lists (<dl>). Examples are provided of each list type using the sports hockey, baseball and archery. Headings are included before each list example and list items are marked up with <li> tags.

Uploaded by

Yogyta Singh
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 21

3.

1 JYR t e Hhy491 4 (ya;T 4)

} H jq SHart t st <HTML>, <BODY>, <HEAD> ÄTHHE(RT)

<HR>, <IMG> H AAYU (0ZT) 4ö SIH SIa


Element

Start tag Content End tag


<palign =right>I Love India.</p>
Attribute Attribute
name value

3.1.1aaus Ht

X
Sve As b
Sesrch Desktop
This PC Desktop »

File name welcomehtml


Save as type All Files ()
Tzt Documents (.ot)
Utded- Noteod X
AIlFiles ()
Ee Eda Fgmat yiew Help Save Cancel
Encoding: jUTF-8
kIDOCTYPE html> v Browse Folders
<html>
<head> X + X
Page Title
<title>Page Title<Aitte>
<head>
<body> O file:/C:/Users/Lenovo/Deskto
Welcome to HTML Learning HTML
</body> Welcome to HTML Learming
Khtml>
104 gat yucî YR

2.

(HEi save as) f&arqTITÅ Save as type 3H AU Files (*) ListfaheY 4 FI aNI|

a.

b. Ctrl + 'o' f caI 3ir SSCT T0I


C.

yafi T, SI f faa 3.2 (c) fGI T

3.1.3 aiyLTT

afcsT 3.2: HTàH


faaru
<CENTER>..</CENTER>te fhit t HRg fu
<P>.</P>
<BR>

<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

<FONT> SIZE 3ICHIR


COLOR

CAUseslenovoDestop UNDIA Olympics.htm Notepad+ *


Fle Edit Search yiew Encoding Language Setings Tgols Macro Bun Plugins
Window ? X

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

India at the Olympics-Wikipedia


X

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.

fa 3.4: aISR fs q àatH

fes farr IIHh 3TIGT YeT 8 À (E L5 tY2T)30SI^T 2 KU> a 3YT First Asian Nation

HIY FA , HdGA (face="Arial" size=3 color='BLUE' ) I Hài 3 3H }z "35 ech"

3.1.4 G a f

àag T s vîvs fSA| eE 0ifG-fafsifsr"(India at the Olympic Wikipedia ) <title> T 61 34eMI


khead> à.

afereat 3.4: <BODY> át fayAGI

cUSS BACKGROUND
fa hR BGCOLOR

}Az TEXT

3.1.5f e( )

FILLROUND (HITS a HehCT T) SsQUARE (efTS A Tee) DISC(aI HÁT qTE)

aufeaT 3.5: qt (Listing Tags)


faaqut
<UL>
<DD>

<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

1: frH H T(1, 2.. )


A: 34GhH 31R (A, B,.)1
TYPE
a:iKoH 3A T (a,b, l)

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>

height=l150 align=right alt"swami vivekanand"


<img src="swarí vivekanand.png" width=300
Vivekananda (January 1863 - 4 July 1902), was an
vspace=20 hspace=20 border=2> Swami
the 19th-century Indian mystic
Indian Hindu monk. He was a chief disciple of
Ramakrishna. He was a key fiqure in theintroduction of the Indian philosophies of
Vedanta and Yoga to the Western world
</body>
110 3IS yUIít yfy
O file:/IC:/Users/Lenovo/Desktop/IMG.htm

"We want that education by which


character is formed, strength of
mind is increased, intellect is
expanded and one can stand on
one's own feet"

~ 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

SwamiVivekananda (January 18634 July 1902), wvas


an Indian Hindu monk He was a chief disciple of the
19th-century Indian mystic Ramakrishna.He was a key
figure in the introduction of the Indian philosophies of "We want that education by which
Vedanta and Yoga to the Westen world character is lormed, strength of
mind is inceased, intellect is
erpanded and one can stand on
one's owm feet

-Swami Vivekananda

ifaT 3.8: <TABLE> farITGI

ALIGN UGIST

VALIGN ¥IyeI^T
WIDTH GgY

BORDER asT

CELL PADDING

CELLSPASING

ROWSPAN T

T}I fSie aiftet Br HaT AI3R 31324EfaH fr HIEÍ HIS


HHNT: fA 3.8 (a) 3A 3.9 (a)

BORDER=5 WIDTH=50% align=center cellpadding=5 and


EKDOay>
cellpacing=2 ) 344T A RIGI I
Default Table 3 S<body>
<HR> Table vith cellpadding-5 and
5 Ktable > cellspacing-2
<HR>
6 KCAPTION ALIGN=BOTTOM>
Table 1: Medals in Field ktable BORDER=S WIDTE=504 align=
F& Shooting</CAPTION>
Hockey certer cellpadding=5 cellspacing=2>
<trs
<CAPTION ALIGN=B0TTO>Table l:
Medals in Fleld Hockey &
<th>Sport</th> </CAPTION> Shooting
i1
12
<th>Gold</th> 8 <tr>

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

V8ct <TH>ifavT bgcolor=gray RI 34AISAfAEI TYIÀ(f 3.8


(b) )|
Table with center alignment and bgcolor
attribute Table with cellpadding=S and cellspacing=2
Gola SirerBronze Total
Field Gold Sver Bronze Total
3 12
hockey Field
Shooting 1 2 1 hockey 3 12
Table 1: Medals in Field Hockey &
Sbooting Sbooting 1 2
Table 1: Medals in Feld Hockey &
Shooting

3.1.8 }aya0 at fis ht

<A href-'URL">TH Z4ZK/AS


Mandatory Attribute
<A HREF=https://www.aicte-india.org/> Link to website of AICTE/A>

Opening Destination URL Text Shown Closing


Anchor Tag Anchor Tag
Web Page

f 3.11:teR }I
fI
www. aicte-india.org te fE

<A Name = "Location Name" >


<A HREF=LocationName>..</A>

<A HREF-LocationName>XIMG source= image name.jpg" </A>


B<html>
<head>
3
</head>
<title>Education-Indía</title>
<body>
<À HREE="#about aicte"> About AICTE«/>
HREF=" about ugo"> About UGCK/AS<br><HR> semsp;&emsp;<A
7 <A HRErsht
tos/ww.,aicte-india,ora/><ing src=,
"AICTE LOGO. jpg" width=90 height=90 align=riqht alt=
"Logo AICTE" ></A>
<A
of
HREF=httrs:LNaicte-indià
AICTE</A><br><br>
ora/> Link to website
<A NAME="about aicte">Al Indla Counoil for
Technical
Education (AICTE) was set up in November 1945 as a
national-level Apex Advisory Body to conduat a survey
on the faoilitios avallable for technigal edugation
and to pronoto devolopment in thO country in a
10
coordinated 'and integrated manner.</AS <br>
<HR>
<A HREP=htG/H, Uge.ac in<ing src="ugo logo.png"
alt="Logo UGC" ></A>
22 <A HREF=)ttns/wNW, UIC,ac,in> Link to wobsite of UGC
</A><br><br>
<A NAME="about uga">
i4 The University Grants Commission (UGC)
oame 1nto oxistenca on
28th December, 19S3 and became a
statutory
Governmont of India by an Act of ParliamontOrganization of the
in 1956, for the
coordination,detemination and maintenance of standards of
15
-teaching, examination and rosearoh in university eduoation. </A>
</body>
L</htnl>

f 3.12 : a i à fis I (HH s: Anchor.htm )


(ht àI <A> H ERfif feH 3.12 (AÅ S) 30t faa 3.13 (AI3TT fAs0
ASZYE) gefoi

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 METHOD = "GET IPOST" ACTION = URL>


<INPUT>
<INPUT>

</FORM>
3.9 ;

type=

feteat 3.9: <input> ¥tfayiyaId

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

fs eHHÍS GZ yuMCT sah S ,local server R


HA4 As ET R7, 31 3r 32R} a3.14 S3Rfsi

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>&emsp;&emsp;
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>

3.2.2 ÎyH TUHcadt (CSS Selector)

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

color h1 {color: #0000FF;} or


H7:4 , }RHSHA, RS0T h1 {color-blue;}

|background-attachment
td (text-align: center;}

| background-color yY4-T p {background-color: #FFCC60;}

|background-imageygy-sa
y sfa tr À fy h2 {background-image: url("ile.
|jpeg");}

|background-repeat e`S- fTs 34THfT I h2 {background-inmage: url("tile.


H:fe-qeH, fie-as, fiz, jpeg"); background-repeat: repeat; }

p{ font-style: italic;
font-weight: bold;
font-size: 40px;
font-family: arial, sans-serif; text-align: center;
letter-spacing: 3pX;
text-transform: capitalize;

You might also like