html-lists-ordered-unordered-and-links.ppt
likhithareddymedapal
153 views
21 slides
Dec 14, 2023
Slide 1 of 21
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
About This Presentation
html lists and links
Slide Content
LISTS AND LINKS
Explained By:
SarbjitKaur.
Lecturer, Department of Computer Application,
PGG.C.G., Sector: 42, Chandigarh
Explained By:
SarbjitKaur.
Lecturer, Department of Computer Application,
PGG.C.G., Sector: 42, Chandigarh
INTRODUCTION TO LISTS
Listsarethebestwaytoprovideinformation
inastructured,easy-to-readformat.Theyhelp
tovisitoreasilyspotinformation,andthey
drewattentiontoimportantinformation.
listsarethebestmethodof
oranganizginformationandpresentingitina
structuredfashion.
Listsarethebestwaytoprovideinformation
inastructured,easy-to-readformat.Theyhelp
tovisitoreasilyspotinformation,andthey
drewattentiontoimportantinformation.
listsarethebestmethodof
oranganizginformationandpresentingitina
structuredfashion.
TYPES OF LISTS
There are three kinds of lists:
•Ordered List (Numbered List)
•Unordered List (Bulleted List)
•Definition Lists
There are three kinds of lists:
•Ordered List (Numbered List)
•Unordered List (Bulleted List)
•Definition Lists
Ordered List (Numbered List)
•Ordered list also called as Numbered list, is
used to present a numbered list of item in the
order of importance or the item(paragraph) is
marked with a number.
•An ordered list must begin with the <OL>
followed by an <LI>list item tag.
•Ordered list also called as Numbered list, is
used to present a numbered list of item in the
order of importance or the item(paragraph) is
marked with a number.
•An ordered list must begin with the <OL>
followed by an <LI>list item tag.
Example: An HTML document orderedList.html shows
the use of Ordered List
<HTML>
<HEAD>
<TITLE>
An Ordered List
</TITLE>
</HEAD>
<BODY>
<ol>
<li>Coffee>
<li>Milk
<li>Tea
<li>sugar
</ol>
</OL>
</BODY>
</HTML>
the use of Ordered List
<HTML>
<HEAD>
<TITLE>
An Ordered List
</TITLE>
</HEAD>
<BODY>
<ol>
<li>Coffee>
<li>Milk
<li>Tea
<li>sugar
</ol>
</OL>
</BODY>
</HTML>
Output
1.Coffee
2.Milk
3. Tea
4. sugar
1.Coffee
2.Milk
3. Tea
4. sugar
Attributes of <OL> tag
•COMPACT: render a list in compact form.
•TYPE : allows marking list items with different types.
By default the list Item markers are set to numbers
1,2,3… so on.Othervalues of TYPE attribute are:
•Attribute Description
•Type = A Capital letter eg. A, B, C………
•Type = a Small letter eg. a, b, c,………
•Type = I Uppercase Roman Numbers eg. I, II, III……
•Type = i Lowercase Roman Numbers eg. i, ii, iii……
•Type = 1 eg. 1, 2, 3……
•COMPACT: render a list in compact form.
•TYPE : allows marking list items with different types.
By default the list Item markers are set to numbers
1,2,3… so on.Othervalues of TYPE attribute are:
•Attribute Description
•Type = A Capital letter eg. A, B, C………
•Type = a Small letter eg. a, b, c,………
•Type = I Uppercase Roman Numbers eg. I, II, III……
•Type = i Lowercase Roman Numbers eg. i, ii, iii……
•Type = 1 eg. 1, 2, 3……
Attributes of <OL> tag
•The start attribute: The attribute is used to override default
list numbering when a list is divide into multiple parts. E.g:
<HTML>
<HEAD>
<TITLE>
An Ordered List
</TITLE>
</HEAD>
<BODY>
Impact printers
<ol>
<li>DOT MATRIX
•The start attribute: The attribute is used to override default
list numbering when a list is divide into multiple parts. E.g:
<HTML>
<HEAD>
<TITLE>
An Ordered List
</TITLE>
</HEAD>
<BODY>
Impact printers
<ol>
<li>DOT MATRIX
EXAMPLE OF START ATTRIBUTE
<li>CHAIN PRINTER
<li>DRUM PRINTER
</ol>
<P>NON-IMPACT PRINTER</P>
<OL START=4>
<li>LASER PRINTER
<li>ELECTROSTATIC PRINTER
</OL>
</BODY>
</HTML>
<li>CHAIN PRINTER
<li>DRUM PRINTER
</ol>
<P>NON-IMPACT PRINTER</P>
<OL START=4>
<li>LASER PRINTER
<li>ELECTROSTATIC PRINTER
</OL>
</BODY>
</HTML>
OUTPUT
Impact printers
1.DOT MATRIX
2.CHAIN PRINTER
3.DRUM PRINTER
NON-IMPACT PRINTER
4.LASER PRINTER
5.ELECTROSTATIC PRINTER
Impact printers
1.DOT MATRIX
2.CHAIN PRINTER
3.DRUM PRINTER
NON-IMPACT PRINTER
4.LASER PRINTER
5.ELECTROSTATIC PRINTER
Nested Order List
•OneorderedlistmightcontainoneormoreorderedlistthatIscalledasNested
Orderlists.
•Example:AnHTMLdocumentnested.htmlshowstheuseofNestedOrderLists
withattributes:
<HTML>
<HEAD>
<TITLE>UseofNestedOrderedLists</TITLE>
</HEAD>
<BODY>
<OLTYPE=ASTART=3>
<LI>Fruits
<OLTYPE=I>
<LI>Apple
<LI>MANGO
<LI>Orange
</OL>
•OneorderedlistmightcontainoneormoreorderedlistthatIscalledasNested
Orderlists.
•Example:AnHTMLdocumentnested.htmlshowstheuseofNestedOrderLists
withattributes:
<HTML>
<HEAD>
<TITLE>UseofNestedOrderedLists</TITLE>
</HEAD>
<BODY>
<OLTYPE=ASTART=3>
<LI>Fruits
<OLTYPE=I>
<LI>Apple
<LI>MANGO
<LI>Orange
</OL>
Example: An HTML document nested.html shows the use of
Nested Order Lists with attributes
•<LI>VEGETABLES
•<OLTYPE=I>
•<LI>Brinjal
•<LI>Cabbage
•<LI>Tomato
•</OL>
•</OL>
•</BODY>
•</HTML>
Nested Order Lists with attributes
•<LI>VEGETABLES
•<OLTYPE=I>
•<LI>Brinjal
•<LI>Cabbage
•<LI>Tomato
•</OL>
•</OL>
•</BODY>
•</HTML>
Unordered List <UL>
•UnorderedListalsocalledasbulletedlist,
usedtopresentlistofitemsmarkedwith
bullets.Anunorderedliststartswithin<UL>
followedby<LI>(ListItem)tag.Useof<UL>is
verysimilarto<OL>(orderedlist).
•UnorderedListalsocalledasbulletedlist,
usedtopresentlistofitemsmarkedwith
bullets.Anunorderedliststartswithin<UL>
followedby<LI>(ListItem)tag.Useof<UL>is
verysimilarto<OL>(orderedlist).
Use of Unordered List and Various
Attributes
<HTML>
<HEAD><TITLE> Use of Unordered List </TITLE>
</HEAD>
<BODY>
<UL>
<LI> FRUITS
<UL>
<LI> Apple
<LI> Mango
<LI> Orange
</UL>
<LI> VEGETABLE
<UL>
<LI> Brinjal
<LI> Cabbage
<LI> Tomato
</UL>
</UL>
</BODY>
</HTML>
Attributes
<HTML>
<HEAD><TITLE> Use of Unordered List </TITLE>
</HEAD>
<BODY>
<UL>
<LI> FRUITS
<UL>
<LI> Apple
<LI> Mango
<LI> Orange
</UL>
<LI> VEGETABLE
<UL>
<LI> Brinjal
<LI> Cabbage
<LI> Tomato
</UL>
</UL>
</BODY>
</HTML>
OUTPUT
•FRUITS
--Apple
-Mango
-Orange
•VEGETABLE
-Brinjal
-Cabbage
-Tomato
•FRUITS
--Apple
-Mango
-Orange
•VEGETABLE
-Brinjal
-Cabbage
-Tomato
Definition Lists
•Adefinitionlistisalistofitems,witha
descriptionofeachitem.The<dl>tagdefinesa
definitionlist.The<dl>tagisusedinconjunction
with<dt>(definestheiteminthelist)and<dd>
(describestheiteminthelist):E.g.
•<dl>
<dt>Coffee</dt>
<dd>-black hot drink</dd>
<dt>Milk</dt>
<dd>-white cold drink</dd>
</dl>
•Adefinitionlistisalistofitems,witha
descriptionofeachitem.The<dl>tagdefinesa
definitionlist.The<dl>tagisusedinconjunction
with<dt>(definestheiteminthelist)and<dd>
(describestheiteminthelist):E.g.
•<dl>
<dt>Coffee</dt>
<dd>-black hot drink</dd>
<dt>Milk</dt>
<dd>-white cold drink</dd>
</dl>
OUTPUT
•Coffee
-black hot drink
•Milk
-white cold drink
•Coffee
-black hot drink
•Milk
-white cold drink
INTRODUCTION HTML Hyperlinks (Links)
•Ahyperlink(orlink)isaword,groupofwords,orimagethatyou
canclickontojumptoanewdocumentoranewsectionwithinthe
currentdocument.WhenyoumovethecursoroveralinkinaWeb
page,thearrowwillturnintoalittlehand.
•HTMLprovides<A>AnchorTagtocreatelinks.Theformatofusing
anchortagisasfollows:
<AHREF="URL">MakeMeTheLink</A>
HREF(HyperLinkReference)isamandatoryattributeused
torefertheURLoftheresource.URL(UniformResourceLocator)is
anaddresstellsthebrowseraboutthefiletolinkto.Itidentifiesfile
locations(Addresses)ontheweboronthelocalharddrive.These
addressescanbethoseofHTMLdocumentsorelementssuchas
images,scripts,appletsandotherfiles.Itisalwaysenclosedin
quotes.
•Ahyperlink(orlink)isaword,groupofwords,orimagethatyou
canclickontojumptoanewdocumentoranewsectionwithinthe
currentdocument.WhenyoumovethecursoroveralinkinaWeb
page,thearrowwillturnintoalittlehand.
•HTMLprovides<A>AnchorTagtocreatelinks.Theformatofusing
anchortagisasfollows:
<AHREF="URL">MakeMeTheLink</A>
HREF(HyperLinkReference)isamandatoryattributeused
torefertheURLoftheresource.URL(UniformResourceLocator)is
anaddresstellsthebrowseraboutthefiletolinkto.Itidentifiesfile
locations(Addresses)ontheweboronthelocalharddrive.These
addressescanbethoseofHTMLdocumentsorelementssuchas
images,scripts,appletsandotherfiles.Itisalwaysenclosedin
quotes.
HTML Link Syntax
•The HTML code for a link is simple. It looks like
this:
•<a href="url">Link text</a>
•The href attribute specifies the destination of a
link.
•Example:
•<a href=“http://www.flowers.com/”>
flowers</a>which will display like this:flowers
•Clicking on this hyperlink will send the user to
flowers. COM' homepage
•The HTML code for a link is simple. It looks like
this:
•<a href="url">Link text</a>
•The href attribute specifies the destination of a
link.
•Example:
•<a href=“http://www.flowers.com/”>
flowers</a>which will display like this:flowers
•Clicking on this hyperlink will send the user to
flowers. COM' homepage
Linking a text to a web site / an external document
•Example:
<A HREF ="http://www.nios.ac.in">Link to Website of NIOS</A>
OR
<A HREF="http://www.nios.ac.in/offices.htm">Links to Contact Us page of NIOS</A>
Opening Address of the document Link text Closing Anchor Tag
Anchor Tag
Intheaboveexamplethelinktext“LinkstoContactUspageof
NIOS”wouldappearunderlinedandinacolordifferentfromany
othertextinthedocumenttodistinguishalinkfromnormaltext.
Alsoyouwouldfindthatthemousepointerchangesintoahand
likesymbolwhentakenoverthehyperlink.
•Example:
<A HREF ="http://www.nios.ac.in">Link to Website of NIOS</A>
OR
<A HREF="http://www.nios.ac.in/offices.htm">Links to Contact Us page of NIOS</A>
Opening Address of the document Link text Closing Anchor Tag
Anchor Tag
Intheaboveexamplethelinktext“LinkstoContactUspageof
NIOS”wouldappearunderlinedandinacolordifferentfromany
othertextinthedocumenttodistinguishalinkfromnormaltext.
Alsoyouwouldfindthatthemousepointerchangesintoahand
likesymbolwhentakenoverthehyperlink.
Linking (jumping) to a specific place within the same
document.
•Sometimes, it is required to jump different sections
in the same document. For this it needs two steps,
first; identify section with a name and or second; use
jumps to the location using the name used.
•The syntax is:
<A HREF="#section_name"> link to another section of
the same document </A>
•This link text jumps to the section named with HREF
on click.The # symbol before the section name is
must.
document.
•Sometimes, it is required to jump different sections
in the same document. For this it needs two steps,
first; identify section with a name and or second; use
jumps to the location using the name used.
•The syntax is:
<A HREF="#section_name"> link to another section of
the same document </A>
•This link text jumps to the section named with HREF
on click.The # symbol before the section name is
must.
Tags
Categories
GeneralDownload
Download Slideshow Get the original presentation fileQuick Actions
Statistics
- Views 153
- Slides 21
- Age 721 days
Related Slideshows
22
Pray For The Peace Of Jerusalem and You Will Prosper
RodolfoMoralesMarcuc
32 views
26
Don_t_Waste_Your_Life_God.....powerpoint
chalobrido8
35 views
31
VILLASUR_FACTORS_TO_CONSIDER_IN_PLATING_SALAD_10-13.pdf
JaiJai148317
32 views
14
Fertility awareness methods for women in the society
Isaiah47
30 views
35
Chapter 5 Arithmetic Functions Computer Organisation and Architecture
RitikSharma297999
29 views
5
syakira bhasa inggris (1) (1).pptx.......
ourcommunity56
30 views