HTML Introduction Part 2: TAGS

Transcription/प्रतिलिपि
In the last session, we introduced you to Hyper Text Markup Language or HTML. HTML is structure of tags which are used to display text in specific style. Let’s look in to it in more detail.

Paragraph Tag - As the name suggest, if the HTML page contains multiple paragraphs, this tag helps in defining the paragraphs body. It is a type of container tag and, it is a way to structure your text into different paragraphs. Each paragraph of text should go in between an opening and a closing tag.

Open a notepad and copy the code from description and save it as HTML file. Open saved HTML file by double click. Notice text with and without paragraph.

Line Break Tag is used to Whenever you use the BR element or break rule, anything following it starts from the next line. This tag is an example of an empty element, where you do not need opening and closing tags, as there is nothing to go in between them.

Open a notepad and copy the code from description and save it as HTML file. Open saved HTML file by double click. Notice text with and without link break.

Some tags can define the properties of the text to be displayed more specifically with the property known as attributes. Attributes are defined in the starting tag angular bracket itself. We can give different values to these attributes to display the text more to our requirement. For example, starting and ending body tag pair defines the text to be displayed but it can also specify the background to be shown behind the Text, Color of the text and background color.

Syntax of body tag can be ＜body background="background.jpg"＞. Attributes are optional properties and are not necessary most of the time but are required for some tags.

Let’s consider some attributes of body tag with an example

Background - Specify a background image for an HTML document.

Open a notepad and copy the code from description and save it as HTML file. Open saved HTML file by double click. Notice Background Image.

Bgcolor - Specify a background color for an HTML document.

Open a notepad and copy the code from description and save it as HTML file. Open saved HTML file by double click. Notice Background Color.

Text Color - Specify the color of text in an HTML document

Open a notepad and copy the code from description and save it as HTML file. Open saved HTML file by double click. Notice Text Color.

Some of the attributes can be used together also for example

Open a notepad and copy the code from description and save it as HTML file. Open saved HTML file by double click. Notice both background color and Text color have changed.

Now let’s consider some other tags

Heading Tags - as in books we have headings which are bold and bigger in size. In HTML, also we can define different headings sizes based on their importance. The ＜h1＞ to ＜h6＞ tags are used to define HTML headings. ＜h1＞ defines the most important heading. ＜h6＞ defines the least important heading.

Open a notepad and copy the code from description and save it as HTML file. Open saved HTML file by double click. Notice different sizes of Heading tags.

Font Tag - Specify the font size, font face and color of text.

Open a notepad and copy the code from description and save it as HTML file. Open saved HTML file by double click. Notice different font colors, sizes and faces.

Bold Tag - Make the sentences bold

Italic Tag - Make the sentences italic

Underline Tag - underline the sentences

Open a notepad and copy the code from description and save it as HTML file. Open saved HTML file by double click. Notice bold italic and underline sentences.

Source: https://www.w3schools.com/tags/ref_byfunc.asp

Code:

-----------------------------------------
＜html＞
 ＜head＞
  ＜title＞HTML Introduction - Part 2＜/title＞
 ＜/head＞
 ＜body＞
  ＜h1＞Before Applying Paragraph Tag＜/h1＞
  As the name suggest, if the HTML page contains multiple paragraphs, this tag helps in defining the paragraphs body. It is a type of container tag and, It is a way to structure your text into different paragraphs. Each paragraph of text should go in between an opening and a closing tag. Browsers automatically add some space (margin) before and after each paragraph element


  ＜h1＞After Applying Multiple Paragraph Tag＜/h1＞
  ＜p＞As the name suggest, if the HTML page contains multiple paragraphs, this tag helps in defining the paragraphs body. It is a type of container tag and, It is a way to structure your text into different paragraphs.＜p＞＜/p＞ Each paragraph of text should go in between an opening and a closing tag. Browsers automatically add some space (margin) before and after each paragraph element＜/p＞
 ＜/body＞
＜/html＞
-----------------------------------------
＜html＞
 ＜head＞
  ＜title＞HTML Introduction - Part 2＜/title＞
 ＜/head＞
 ＜body＞
  ＜h1＞Before Applying br Tag＜/h1＞
  This is a sentence. This is another sentence.


  ＜h1＞After Applying br Tag＜/h1＞
  This is a sentence.＜br＞ This is another sentence.
 ＜/body＞
＜/html＞
-----------------------------------------
＜html＞
 ＜head＞
  ＜title＞HTML Introduction - Part 2＜/title＞
 ＜/head＞
 ＜body＞
  ＜h1＞Before Applying background attribute＜/h1＞
  This HTML page has no background image.
 ＜/body＞
＜/html＞
-----------------------------------------
＜html＞
 ＜head＞
  ＜title＞HTML Introduction - Part 2＜/title＞
 ＜/head＞
 ＜body background="background.jpg"＞
  ＜h1＞After Applying background attribute＜/h1＞
  This HTML page has a background image.
 ＜/body＞
＜/html＞
-----------------------------------------
＜html＞
 ＜head＞
  ＜title＞HTML Introduction - Part 2＜/title＞
 ＜/head＞
 ＜body ＞
  ＜h1＞Before Applying text color attribute＜/h1＞
  This HTML page text has default color.
 ＜/body＞
＜/html＞
-----------------------------------------
＜html＞
 ＜head＞
  ＜title＞HTML Introduction - Part 2＜/title＞
 ＜/head＞
 ＜body text="orange" ＞
  ＜h1＞After Applying text color attribute＜/h1＞
  This HTML page text has ORANGE color.
 ＜/body＞
＜/html＞
-----------------------------------------
＜html＞
 ＜head＞
  ＜title＞HTML Introduction - Part 2＜/title＞
 ＜/head＞
 ＜body bgcolor="purple" text="orange" ＞
  ＜h1＞After Applying background color & text color attribute＜/h1＞
  This HTML page has purple background and text has ORANGE color.
 ＜/body＞
＜/html＞
-----------------------------------------
＜html＞
 ＜head＞
  ＜title＞HTML Introduction - Part 2＜/title＞
 ＜/head＞
 ＜body ＞
  ＜h1＞This is H1 heading and biggest in size.＜/h1＞＜br＞
  ＜h2＞This is H2 heading.＜/h2＞＜br＞
  ＜h3＞This is H3 heading.＜/h3＞＜br＞
  ＜h4＞This is H4 heading.＜/h4＞＜br＞
  ＜h5＞This is H5 heading.＜/h5＞＜br＞
  ＜h6＞This is H6 heading and smallest in size.＜/h6＞＜br＞
 ＜/body＞
＜/html＞
-----------------------------------------
＜html＞
 ＜head＞
  ＜title＞HTML Introduction - Part 2＜/title＞
 ＜/head＞
 ＜body ＞
  ＜font size="3" color="red"＞＜h1＞This is H1 heading with color Red.＜/h1＞＜br＞＜/font＞
  ＜font size="2" color="blue"＞＜h2＞This is H2 heading with size 2 therefore smaller than other headings in size and color is blue.＜/h2＞＜br＞＜/font＞
  ＜font face="verdana" color="green"＞＜h3＞This is H3 heading with different font and color green.＜/h3＞＜br＞＜/font＞
 ＜/body＞
＜/html＞
-----------------------------------------
＜html＞
 ＜head＞
  ＜title＞HTML Introduction - Part 2＜/title＞
 ＜/head＞
 ＜body ＞
   This is normal sentence ＜br＞＜br＞
  ＜h3＞ ＜b＞This is bold sentence＜/b＞ ＜/h3＞  ＜br＞
  ＜h3＞ ＜i＞This is italic sentence＜/i＞ ＜/h3＞  ＜br＞
  ＜h3＞ ＜u＞This is underline sentence ＜/u＞＜/h3＞  ＜br＞
 ＜/body＞
＜/html＞
-----------------------------------------