Tuesday, April 21, 2020

Basic Tags of HTML (Hyper Text Markup Language)

HTML (Hyper Text Markup Language)

What is HTML?

HTML Stands for Hyper Text Markup Language. HTML is used to create Web Pages. HTML language is collection of tags. HTML Language is represented by < > tags. 




So lets discuss about types of HTML tags. Basically there are 2 types of tags in this language. First One is Paired Tags and Second one is Unpaired Tags. The difference between both tags is this Paired tags name indicates that comes in pair as well as Unpaired tags are single tags.

Have a Look on this Example:

<html></html>
<body></body>
<h1></h1>

All the above tags are paired tags means these tags required both starting and closing tags.
<br>
<hr>

The unpaired tags no need to be close.


Text Editor For HTML Language


Now, lets move on to the text Editors that are required for writing the HTML Language.  There are basically a lots of professional text editors are available but to Learn HTML we can use Simple Notepad Text Editor.


So, For Creating Our First HTML Page We need to Follow these Steps:


Step 1: Open the Notepad Window





Step 2: Save the File with .html  Extension.





Step 3: Now Start Writing Your First Program


How to Write HTML Tag?


To write HTML tag we need to use starting angular bracket and closing angular bracket like 

< > and then to close the html tag we need to add backslash between these brackets. 

Structure & Hierarchy of  HTML Page


So we must have to follow the hierarchy to create are HTML page. HTML page starts with <html> tag and close with </html> tag and second tag is <head></head> between head tag <title></title> tag is come and then <body> tag & body tag close </body>.


See this example:





Heading in HTML Language

There are 6 types of  HTML headings. Heading starts from <h1> tag to <h6> tag. H1 tag is used for large heading and H6 for small heading.





Paragraph Tag in HTML

<p> </p> Tag is used for writing paragraphs in HTML.










Lists in HTML

In HTML there are 3 types of Lists. And these Lists are:

  • Ordered List (OL)
  • Un-Ordered List (UL)
  • Data Definition List (DD)


  1. Ordered List : <OL> defines an ordered list. It can be numeric or alphabetic. We used <ol></ol> tag for ordered list then between ordered tag <li></li> tag comes that stands for List Item.



Order List with Type Attribute : We can also define the type of Ordered list. By default the ordered list type is numeric but we can change into alphabetic, roman letters.



2. Un-Ordered List <UL> defines an Un-Ordered list. It comes in Un-Ordered manner. It shows with bullets. We used <ul></ul> tag for Un-Ordered list then between Un-Ordered tag <li></li> tag comes that stands for List Item.







Un-Order List with Type Attribute : We can also define the type of Un-Ordered list. By default the type of un-ordered list  is Bullets but we can change into square.



3. Data Definition List:    Data Definition list is used to describe a term name in a description list. Data definition list is define by <dl></dl> inside this <dl> tag <dd></dd> tags comes that stands for data definition and then inside this <dd> tag <dt></dt> that stands for data term.





Bold(b), Italic(i), Underline(u), Mark (mark), Quotation (q), Delete  (del), Insert (ins), Abbreviation (abbr), Big (big), Small (small), Subscript (sub), Superscript (sup), Strong (strong), Emphasized (em), Address (address), Break (br), Horizontal Line(hr), Block quote Tags in html.


See all the above tags in this example






Anchor Tag in HTML :  Anchor tag is used for adding Hyperlinks in html . Anchor tag is represented by <a></a> tag with href attribute.


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


Image Tag in HTML 


Image tag is used for adding image in html page. Image tag is represented by <img> tag it is a singular tag and attribute used in image tag  is src (source) attribute. And we can define the width & height of image and alt is Alternate text of image.





Marquee Tag in HTML


Marquee is one of the important tags introduced in HTML to support such scroll able texts and images within a web page.


Attributes of Marquee Tag:



  • Direction of the Scroll able text-- Up, Down, Bottom, Right
  • Width & Height of the Marquee
  • Scroll amount of scroll able text
  • Bgcolor of marquee text
  • Loop
  • Behavior
  • Scroll Delay
  • Vspace - Vertical Space
  • Hspace - Horizontal Space


Table Tag in HTML:



The <table> tag defines an HTML table.
An HTML table consists of the <table> element and one or more <tr>, <th> and <td> elements.
The <tr> element defines a table row, the <th> element defines a table header, and the <td> element defines a table cell.
In table we can define the width and height of table and also border and bordercolor.

Rowspan & Collspan in Table tag:

Rowspan attribute specifies the number of rows a cell should span. Collspan attribute specifies the number of cells a row should span.

Lets discuss with example:







Form Tag in HTML: 

<form> tag is used to create an HTML form for user input. Attributes of <form> tag is: 

  • label
  • input
  • type
  • value
  • name