HTML BASIC TAGS PART 3

on

 Now we gonna look remaining basic tags in HTML:

1.<bdo> tag bdo means Bi-Directional Override,

PROGRAM: 

<html>

<body>

<p> here bdo not used </p> 

<!-- using bdo -->

<p><bdo dir ="rtl"> look at the difference when the bdo tag is used</bdo></p>

<p> <bdo dir = "ltr">look at here no difference when the bdo tag is used</bdo></p>

</body>

</html> 

OUTPUT:

The output will be displayed as,

here bdo not used

desu si gat odb eht nehw ecnereffid eht ta kool <!-- here the text is displayed from right to left --> 

look at here no difference when the bdo tag is used

this is the use of <bdo> tag dir is attribute rtl is value (right to left) ltr left to right.

2.<code> 

this code tags used to display a specific content in monospace font.

 PROGRAM:
<html>

<body>

<p> here we gonna see the effect of code tag</p>

<p> we welcome you all with <code> GREAT PLEASURE</code></p>

</body>

</html>

OUTPUT:

 

here we gonna see the effect of code tag

we welcome you all with GREAT PLEASURE

look at the highlighted word its different

 3.<ins>

ins means insert, which is used to insert a text and the inserted text will be underlined by browser.

 PROGRAM:
<html>

<body>

<p> here we gonna see the effect of code tag</p>

<p>ins tag is<ins> used</ins> to insert a text.</p>

</body>

</html>

OUTPUT:

here we gonna see the effect of code tag

ins tag is used to insert a text.<!-- Used is inserted text and is underlined -->

4.<del>

 del is delete,which is used to delete the text,the browser will strike a line in the deleted text.

PROGRAM:
<html>

<body>

<p> here we gonna see the effect of code tag</p>

<p>ins tag is<del> used</del> to delete a text.</p>

</body>

</html>

OUTPUT:

here we gonna see the effect of code tag

ins tag is used to delete a text.

5.<hr>

hr means horizontal line

PROGRAM: 

 <html>

<body>

<p> here we gonna see the effect of code tag</p>

<p>Greeting is an act of communication in which human beings intentionally make their presence known to each other, to show attention to, and to suggest a type of relationship (usually cordial) or social status (formal or informal) between individuals or groups of people coming in contact with each other..</p>

<hr>

<p>Greeting is an act of communication in which human beings intentionally make their presence known to each other, to show attention to, and to suggest a type of relationship (usually cordial) or social status (formal or informal) between individuals or groups of people coming in contact with each other.</p>

<hr>

<p>Greeting is an act of communication in which human beings intentionally make their presence known to each other, to show attention to, and to suggest a type of relationship (usually cordial) or social status (formal or informal) between individuals or groups of people coming in contact with each other.</p> <hr>

</body>

</html>

OUTPUT:

here we gonna see the effect of code tag

Greeting is an act of communication in which human beings intentionally make their presence known to each other, to show attention to, and to suggest a type of relationship (usually cordial) or social status (formal or informal) between individuals or groups of people coming in contact with each other..

Greeting is an act of communication in which human beings intentionally make their presence known to each other, to show attention to, and to suggest a type of relationship (usually cordial) or social status (formal or informal) between individuals or groups of people coming in contact with each other.

Greeting is an act of communication in which human beings intentionally make their presence known to each other, to show attention to, and to suggest a type of relationship (usually cordial) or social status (formal or informal) between individuals or groups of people coming in contact with each other.


Now you all can see a horizontal line below each paragraph.

 6.<q>

quotation tag places quotatio around text,

PROGRAM:

<html>

<body>

<p><q>Greeting is an act of communication in which human beings intentionally make their presence known to each other, to show attention to, and to suggest a type of relationship (usually cordial) or social status (formal or informal) between individuals or groups of people coming in contact with each other</q>.</p>

</body>

</html>

OUTPUT: 

"Greeting is an act of communication in which human beings intentionally make their presence known to each other, to show attention to, and to suggest a type of relationship (usually cordial) or social status (formal or informal) between individuals or groups of people coming in contact with each other".

 7.<table>

 In the table we will see about table tag and all tag related table such as <th>,<tr>,<td>

PROGRAM:


<html>
<body>

<table>
  <tr>
    <th>name</th>
    <th>class</th>
    <th>sub</th>
  </tr>
  <tr>
    <td>rohit</td>
    <td>IT</td>
    <td>c</td>
  </tr>
  <tr>
    <td>sharma</td>
    <td>CS</td>
    <td>c++</td>
  </tr>
  <tr>
    <td>tendulkar</td>
    <td>BCA</td>
    <td>java</td>
  </tr>
</table>

</body>
</html> 

OUTPUT:

It just html there is no table look,we can customize the table using css in later post,now just know concept and how to use......

tr-table row (create row ).

th- table header is given in th tag.

td-table content is given in td tag.

8.<ul>

<ul> is un ordered list,list items are described in <li>,

PROGRAM:

<html>

<body>

<ul>

<li>java</li>

<li>c</li>

<li>python</li>

<li> c++</li>

</ul>

</body>

</html>

OUTPUT: 

 

  • java
  • c
  • python
  • c++ 
The bullet items are removed in css property list-style-type:none; 
we will discuss in later.
9.<ol> 
 <ol> ordered list show the content in some order like Numerical or Alphabetical or in Roman letter ,before moving to <ol> there some attributes to be known
reversed,start,type.
 PROGRAM:
 <html>
<body>
<ol>
<li>c</li>
<li>c++</li>
<li>java</li>
<li> python</li>
</ol>
</body>
</html>
OUTPUT:

  1. c
  2. c++
  3. java
  4. python

The list is in the Numerical order 1,2,3........

REVERSED: 

 PROGRAM:

 <html>
<body>
<ol reversed>
<li>c</li>
<li>c++</li>
<li>java</li>
<li> python</li>
</ol>
</body>
</html>
OUTPUT: 
  1. c
  2. c++
  3. java
  4. python
The list is in the reversed order 4,3,2,1....
START: 
 
 If you want start a list in certain  number like after 10 or 20,the start attribute is used.
PROGRAM:
 <html>
<body>
<ol start = "10">
<li>c</li>
<li>c++</li>
<li>java</li>
<li> python</li>
</ol>
</body>
</html>
OUTPUT: 
  1. c
  2. c++
  3. java
  4. python
 
 TYPE:
 PROGRAM:
 <html>
<body>
<ol type = "a">
<li>c</li>
<li>c++</li>
<li>java</li>
<li> python</li>
</ol>
</body>
</html>
 OUTPUT:
  1. c
  2. c++
  3. java
  4. python
 
 
 PROGRAM:
 <html>
<body>
<ol type = "A">
<li>c</li>
<li>c++</li>
<li>java</li>
<li> python</li>
</ol>
</body>
</html>
 OUTPUT:
  1. c
  2. c++
  3. java
  4. python
Comment your opinion 👇

 

 

 

Comments

Post a Comment