HTML Tutorial Topic 3

Topics

Today I Cover This All Topics
List
Blocks
Classes and id
Iframes
Some Useful Tips

List

List as we know it contains list of item in ordered or unordered.

Unordered List

Apple
Mango
Guava
Orange

Ordered List

Apple
Mango
Guava
Orange
Banana

We Can Create Easily List in HTML By Using

is a nested Element Which Comes Inside Both in ul and ol for list Items.E.g –
- First Item

We Can Customize List Item Easily Like Ordered List in Roman no. Format or Unordered List Item in square type items.

For Ordered List

We Use Attribute type=”value”

Where Values is
1 = For Number List Items
A= For uppercase Numbered List Item
a= For Lowercase Numbered
I = For Uppercase Roman Numbered
i = For Lowercase Roman Numbered

For UnOrdered List

We Use CSS style=”list-style:values”

Where Values is
circle = For Circle Number List Items
disc = For disc Numbered List Item
square = For Square Numbered
none = For Simply Print item without Bullets

List Example HTML


List



Unordered List




 	Mango


 	Guava


 	Orange


 	Apple


 	Banana




Ordered List




 	Carrot


 	Onion


 	Potato


 	Tomato


 	Cabbage

Result

Block and Inline Elements

Block Elements – Block elements are such elements that stretch full width under body and start with new line.

E.g :

Inline Elements – Inline Elements are such which does not takes full width cover only small part that it needs.

E.g : ,

Simple Example



I am A Block Element, I used Border So it Clearly Show Much It Takes Width, Padding For items don’t touch the Div Border and Margin bottom So i dont Touch the Span



I am a inline with border and (Padding so i dont Touch the Border Of Span

Result

Some List Of Block Elements

HTML Tutorial Topic 3