#13 HTML Lists

As we learn in the previous post tables are very important and easy to represent the data in tabular form. Lists are also helping us to represent the data in lists form.

HTML Lists

Generally, The HTML lists are of three types.

(1) Unordered list - defines inside <ul> tag.

The items inside unordered lists are defined inside the <li> tag. By default, the list items in unordered lists are marked with bullets (•). We can the style of the marker using the CSS list-style-type property [Values- disc (default), circle, square, none].

(2) Ordered list - defines inside <ol> tag.

The items inside ordered lists are defined inside the <li> tag. By default, the list items in ordered lists marked with numbers (1,2...so on). We can the style of the marker using the type attribute [Values- "1" (default), "A", "a", "I", "i"].Here we can control the counting of the list using start attributes.

(3) Description list - defines inside <dl> tag.

The items of the description list as defined in the below example. 

• <dt> tag - It defines the term (name) in description list.
• <dd> tag - It defines the each term in description list.

⭐Example of an HTML Table :

📌Find more examples here:- 🔗https://codepen.io/arwazkhan189/pen/bGePMMP

(1) Unordered list example

(2) Ordered list example

(3) Description list example

📌You can find some more  about Lists and examples here 🔗https://html.com/lists/

❗We can style the Lists using CSS. It will be posted later.🙂

❗We can create a nested list.

=======================================================================

📌Here is the Codepen link to the above examples:- 🔗https://codepen.io/arwazkhan189/pen/bGePMMP

Next, we will learn about HTML Block & Inline elements and Class & ID attributes...

Keep Learning and practice, practice, and practice.. !!!

Follow me on Codepen 🔗https://codepen.io/arwazkhan189

LIKE, COMMENT, SHARE, SUBSCRIBE to the Blog!

#12 HTML Tables

 Tables are very important and easy to represent the data in tabular form.

HTML Table

The HTML <table> tag defines an HTML Table. Some basic elements are:-

• <tr> - This tag defines the table row.
• <th> - This tag defines the table header. By default, the text in the <th> tag is bold and centered. 
• <td> - This tag defines the cell/column. By default, the text in the <td> tag is regular and left aligned. 
• <caption> - This element is used to define a table caption.

⭐Example of an HTML Table :

HTML Table - Attributes 

• colspan - This attribute is used to make a cell span many columns.
• rowspan - This attribute is used to make a cell span many rows. 

📌You can find some more Table elements and examples here 🔗https://html.com/tables/

❗We can style the table using CSS. It will be posted later.🙂

=======================================================================

📌Here is the Codepen link to the above examples:- 🔗https://codepen.io/arwazkhan189/pen/ZEOdWqR

Next, we will learn about HTML Lists ...

Keep Learning and practice, practice, and practice.. !!!

Follow me on Codepen 🔗https://codepen.io/arwazkhan189

LIKE, COMMENT, SHARE, SUBSCRIBE to the Blog!

#11 HTML Images

Images in a website play an important role in attracting users.

HTML Images  

The HTML <img> tag is used to embed an image in web page.

syntax:- <img src='path of the image' alt='alternate text for the image'>

HTML Images - src Attribute 

The src attribute specifies the path (URL) to the image. 

HTML Images - alt Attribute 

The alt attribute provides alternate text for an image if the user somehow cannot view the image then the alternate text will be displayed.

⭐Example of an HTML Images :

❗ If the user for some reason cannot view the image then the alternate text will be displayed.

HTML Images - width and Height 

We can specify the width and the height attribute to give a size an image. The width and height attributes define the width and height of the images in pixels.

syntax:- <img src='url' alt='alternate-text' width='200' height='300'>

⭐Example of an HTML image with width and height attributes :

❗ We can style the images using  CSS like background images etc. It will be discussed further.  

=======================================================================

📌Here is the Codepen link to the above examples:- 🔗https://codepen.io/arwazkhan189/pen/vYKwyWO

Next, we will learn about HTML Tables ...

Keep Learning and practice, practice, and practice.. !!!

Follow me on Codepen 🔗https://codepen.io/arwazkhan189

LIKE, COMMENT, SHARE, SUBSCRIBE to the Blog!