To Watch Video Click here.....
List & Images
There are following types of lists in HTML-
1. Unordered List
2. Ordered List
3. Definition List
1. Unordered List <UL>:- This tag is used to display a bulleted list.
2. List Item <LI>:- This tag is an empty tag used to display listed items in both ordered and unordered list.
Attributes of UL Tag:-
- Type: - It specifies the type of bullets used with <UL> tag. The default value of this tag is "DISC". The possible values are- disc, circle, square.
Ordered List <OL>: - The ordered list is used to display the list of items in a specified order. By default numbers are displayed.
Attributes of <OL> Tag:-
- Type: - It specifies the type of number used with <OL> tag. The possible values are- "A", "a", "I", "i", 1.
- Start: - It specifies the location from where the numbering order starts. Its value will be always a number.
Nested List: - When a list is created within a list it is called nested list.
Example 1:-
<Html>
<Head>
<Title> Lists in HTML</Title>
</Head>
<Body>
Computer and its Parts- <Br> There are two parts of computer.<Br>
<OL type="A" start=3>
<LI>Software
<UL type="circle">
<LI> System Software
<LI> Application Software
</UL>
<LI> Hardware
<UL type= "square">
<LI> Input Devices
<LI> Output Devices
<LI> Processing Device
<LI> Storage Devices
</UL>
</OL>
</Body>
</Html>
Definition Lists: - <DL> is used to present a list of definitions for terms. It consists a pair of <DT> Define Term and <DD> Definition Description elements.
Example 2:-
<Html>
<Head>
<Title> Definition Lists</Title>
</Head>
<Body>
<DL>
<DT> Computer</DT>
<DD> Computer is an electronic machine. </DD>
<DT> Hardware</DT>
<DD> Hardware is the physical parts of computer. </DD>
</DL>
</Body>
</Html>
Inserting Images:- <Img> tag is used to insert an image. It is an empty tag.
Attributes of <Img> tag:-
Src: - specifies Image Paths.
Align: - To set alignment. It may be Left, Top, right, bottom.
Border: - To set image border. It contains a number in pixel. Greater the number thicker the border.
Alt: - To display alternate text when browser does not display image.
Height: - To set image height in pixels.
Width: - To set image width in pixels.
Hspace: - Used to set space around the left and right of the image.
Vspace: - Used to set space around the top and bottom of the image.
Example 3:-
<Html>
<Head>
<Title> Images in HTML</Title>
</Head>
<Body>
<Img Src=" C:\Users\JRLAB\Desktop\bike.jpg" Height=150 width=300 Hspace=100
vspace=100 Border=5 align="right" Alt=" Future Bike">
</Body>
</Html>