Saturday, 21 November 2020

#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!

Friday, 20 November 2020

#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!

Thursday, 19 November 2020

#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!

Sunday, 13 September 2020

#10 HTML Links


link is simply an address that specifies the location of a resource on the Internet just like an URL which takes you to the web pages identified by the linked URLs. 

Hyperlinks, on the other hand, are links that you can click on or activate with a pointing device in order to jump to the target page.

HTML Links  

The HTML <a> tag defines a hyperlink. The href attribute indicates the link's destination.By default, links will appear as follows in all browsers :

  • An unvisited link is underlined and blue.
  • A visited link is underlined and purple
  • An active link is underlined and red
❗Using CSS we can style the links !!!


⭐Example of a HTML Link:



HTML Links - target Attribute 

By default, the linked page will be displayed in the current browser window. To change this , we must specify another target for the link.

The target attribute specifies where to open the linked document . The target attribute can have one of the followings values :

  •  _self - Default , Opens the document in the same tab as it was clicked.

  • _blank - Opens the document in a new window or tab.

  • _parent - Opens the document in the parent frame .

  • _top - Opens the document in the full body of the window.

⭐Example of a HTML Links with the target attributes :




Absolute URL & Relative URL

Absolute URL is a full web address in the href attribute.

Relative URL is a local link i.e. link to a page within same website .


❗Link to a page (or file) located in Absolute URL & Relative URL is same as we organize files in website.. Previous post resolve this problem go checkout the post.. 

Link is here 🔗Click here !

⭐Example of Absolute URL and Relative URL :










❗We cover the basics of HTML Links , but HTML Links can be used as following listed below :-
  • An image as a Link
  • Link to an Email Address
  • Button as a Link
⭐Examples as above listed :





⭐Extras on HTML Links - Link Titles , Bookmarks :

The title attribute specifies extra information about an element. The information is shown when the mouse hover the text .

             

Bookmarks are generally useful for a very long web page. To create bookmark ,first create the bookmark  using id attributes and then add link to it using  href attributes.This will be discussed later with more examples.

Uses of Bookmarks :
  • We can easily navigate a very long web page  using bookmark. 
  • We can also navigate from one page to another page using bookmark.   







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

📌Here is Codepen link of above examples :- 🔗https://codepen.io/arwazkhan189/pen/qBZKOag


Next we will learn about HTML Images  ...

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

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

LIKE , COMMENT , SHARE , SUBSCRIBE  the Blog!