HTML Tags

Tags in HTML :
Tags are hidden keywords within a webpage that define how your web browser display the content.
Tags have two parts one is opening and another is closing.
For ex :
<html> is opening tag.
</html> is closing tag.
Tag
Description
<html>
This tag is root tag of them all which tells that it is a HTML document.
<head>
<head> tag can keep other HTML tags like <title> etc.
<title>
<title> tag is used to give the document a title.
It lies In <head> tag.
<body>
The <body> tag is used to keep all other tag than above.
It holds tag like <h1>, <p> etc.
Learning HTML is pretty easy you just have to understand he tags and their attributes in order to
understand where to use them.
It is recommended by World Wide Web Consortium to use lowercase tags by the release of HTML-4.
We will study all the tags and their attributes as follows :
  1. Heading Tags :
All documents start with heading. There are six levels of headings in HTML, namely <h1>, <h2>, <h3>,
<h4>, <h5>, <h6>. Browser you use, adds one line before and after the heading. While displaying it.
For ex :
<html>
<head>
<title> Example</title>
</head>
<body>
<h1> HEADING 1</h1>
<h2> HEADING 2</h2>
<h3> HEADING 3</h3>
<h4> HEADING 4</h4>
<h5> HEADING 5</h5>
<h6> HEADING 6</h6>
</body>
</html>
The above code will give you the following output :
Screen Clipping

  1. Paragraph Tag :
HTML provides a paragraph tag <p>…</p> to write a text into different paragraphs.
For ex :
<html>
<head>
<title> Example 2 </title>
</head>
<body>
<p> This is a 1st paragraph. </p>
<p> This is a 2nd paragraph. </p>
<p> This is a 3rd paragraph. </p>
</body>
</html>
The above code will produce the following output :
Screen Clipping
  1. Break-Line Tag :
The break-line tag <br /> tag is used to start anything from next line. There is no need to open and
close the tag, it is void tag.
<br> tag is not valid in HTML.  There is a space between character br and forward slash.
For ex :
<html>
<head>
<title> Example 3 </title>
</head>
<body>
<p>Hey there !<br />
You are learning HTML with Classbroom<br />
All the best !<br />
Share it with your friend</p>
</body>
</html>
The above code will produce the following output :
Screen Clipping
  1. Center Tag :
The <center> tag is used for putting any text at the center of page.
For ex :
<html>
<head>
<title> Example 4 </title>
</head>
<body>
<p> HTML is easy to learn. </p>
<center>
<p> HTML is used for making webpages.</p>
</center>
</body>
</html>
The above code will produce the following output :
Screen Clipping
  1. Horizontal Line Tag :
This tag <hr /> will put a horizontal line in a text. This is helpful in making horizontal partitions.
This one is also type of void where you do not need to open and close the tags.
For ex :
<html>
<head>
<title> Example 4</title>
</head>
<body>
<p> This is your 1st paragraph.</p>
<hr />
<p> and this is your 2nd paragraph.</p>
</body>
</html>
The above code will produce the following output :
Screen Clipping
  1. Preserve Format Tag :
The <pre>…</pre> tag is used when you want your text exactly same as you typed in
your editor. This tag preserves the formatting and keep it as it is in a source document.
For ex :
<html>
<head>
<title> Example 5 </title>
<body>
<pre>
C program for addition of two number :
Void main()
{
int a, b, c;
Printf(“Enter value for a, b”);
Scanf(“%d %d”, &a, &b);
c = a + b;
printf(“The sum is %d”, c);
}
</pre>
</body>
</html>
The above code will produce the following output :
Screen Clipping
HTML Elements :
An HTML element is an individual component of an HTML document or web pages.
<p>…</p> is an HTML element. 
Void element in an HTML is the element which does not require to end it.
For ex: Horizontal line <hr /> is a void element.
HTML Formatting :
Formatting a word or text in HTML is easy as Word processor. You can make a text Bold, Italic,
Underlined as follows :
  1. Italic Text :
All the text lies in <i>…</i> element is displayed on webpage as a italic taxt.
For ex :
<html>
<head>
<title> Example 6 </title>
</head>
<body>
<p> Hey there ! <i>How are you ? </i></p>
</body>
</html>
The above code will produce the following output :
Screen Clipping
  1. Bold Text :
All the text appears in <b>…</b> is displayed as bold text in webpage.
For ex :
<html>
<head>
<title> Example 7 </title>
</head>
<body>
<p> Hey there ! <b>How are you ? </b></p>
</body>
</html>
The above code will produce the following output :
Screen Clipping
  1. Underline Text :
All the text appears in <u>…</u> element, is displayed with underline in webpage.
For ex :
<html>
<head>
<title> Example 8 </title>
</head>
<body>
<p> Hey there ! <u>How are you ? </u></p>
</body>
</html>
The above code will show you the following output :
Screen Clipping
  1. Strikethrough Text :
All the text appears in <strike>…</strike> element is displayed as strikethrough in webpage.
For ex :
<html>
<head>
<title> Example 9 </title>
</head>
<body>
<p> Hey there ! <strike>How are you ? </strike></p>
</body>
</html>
The above code will show you the following output :
Screen Clipping
  1. Superscript & Subscript Text :
All the content lies in <sup>…</sup> is shown as superscripted text and <sub>…</sub> is shown as
subscripted text on webpage.
For ex :
<html>
<head>
<title> Example 10 </title>
</head>
<body>
<p>This is superscript text <sup>Hey there !</sup>This is subscript text <sub>How are you ?
</sub></p>
</body>
</html>
The above code will show you the following output :
Screen Clipping
  1. Larger & Smaller Text :
All the text lies in <big>…</big> is shown as text larger in size then the normal and <small>…</small> element is used to show the text in smaller the size then normal size.
For ex :
<html>
<head>
<title> Example 11 </title>
</head>
<body>
<p> This is large text <big>Hey there !</big> This is small text<small>How are you ? </small></p>
</body>
</html>
The above code will show you the following output :
Screen Clipping
HTML Attributes :
Attributes are the extra additional information about an element.
Following are some of them :
  1. src attribute :
The filename of source image is mentioned the src attribute.
For ex :
<img src=“img_flower.jpg”>
  1. href attribute :
HTML links are defined in <a> tag. The address of link is mentioned in href attribute.
For ex :
<a
href=https://notes.classsbroom.me>This is your link</a>
HTML links are hyperlinks.
  1. alt attribute :
Sometimes an image is failed to display. The alt attribute helps to display alternative
text to be displayed, when such a problem occurs.
For ex :
<img src=“img_flower.jpg” alt=“ The tulip flower”>

  1. style attribute :
This attribute is used to specify the styling of elements color, font, size etc.
  1. Text color :
The color of text can be defined here. 
For ex :
<p style=“color : blue”> This is a paragraph</p>
  1. Text size :
Font-size is used to define the size of text.
For ex :
<h1 style=“font-size:260%;”> This is a heading</h1> 
  1. Alignment of text :
The text-align is used to define the alignment of the text.
For ex :
<h3 style=“text-align:center;”> This is heading</h3>

  1. Font type :
The font-family is used to define the font of text.
For ex :
<h2 style=“font-family:courier;”>This is a heading </h2>
  1. lang attribute :
This tag is used to declare the language of document.
For ex :
<html lang=“en-UK”>
<body>
…
</body>
</html>

  1. width and height attribute :
All the images in HTML have a set of size attributes which specifies the width and height of the image.
For ex :
<img src=“img_flower.jpg” width=“1080” height=“2160”>
HTML Colors :
HTML colors are specified using predefined color name or RGB, HSLA values.
Color names :
Tomato, Orange, DodgerBlue, MediumSeaGreen, Gray, StateBlue, Violet, LightGray etc. Html
supports 140 stndard colors.
  1. You can set the background color to the elements.
For ex :
<h1 style=“background-color:Gray;”> The text is here</h1>
  1. You can set the color to the respective text :
For ex :
<h2 style=“color:Violet;”> The text is here</h2>
  1. You can set the color to the borders :
For ex :
<h3 style=“border:2px solid Tomato;”> The text is here</h3>
HTML Tables :
An HTML table is defined with <table> tag. Each row is defined with <tr> tag. A table header
with <th> tag, By default table headings are bold and centered. 
A table cell is defined with <td> tag. You can also give them borders.
<html>
<head>
<style>table, th, td {
border: 1px solid black;
border-collapse: collapse;
}</style></head><body>
<table style=“width:200%”>
<tr>
<th> Name</th>
<th>RollNo.</th>
<th>Address</th>
</tr>
<tr>
<th> Shubham</th>
<th>F120,</th>
<th>Pune</th>
</tr>
<th> raj</th>
<th>F129,</th>
<th>Pune</th>
</tr>
</table>
</body>
</html>
The above code will give you the following output :
Screen Clipping
HTML Class :
The HTML class attribute is used to define equal styles for elements with the same class name.
All the HTML elements with the same class attribute will have the same format and style.
For ex :
<html>
<head>
<style>
.flowers {
background-color: black;
color: white;
margin: 20px;
padding: 20px;
}
</style></head>
<body>
<div class=“flower”>
<h2> Rose </h2>
<p>Rose is Red</p></div>
<div class=“flower”>
<h2> Lotus</h2>
<p> Lotus is Pink</p></div>
</body>
</html>
The above code will give you the following output :
Screen Clipping
HTML Iframes :
An <iframe> tag is used to display a webpage within a webpage.
We can specify its height and width. By default it has border around it . 
For ex :
<html>
<body>
<h1>Iframe example</h1>
<p>Here we have included its height and width.</p>
Height=“200” width=”300”></iframe>
</body>
</html>
The above code will give you the following output :
Screen Clipping

Maitained by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)