SlideShare une entreprise Scribd logo
1  sur  32
HTML TAGS BY NIRMAL FELIX.K
INTRODUCTION: ,[object Object],[object Object],[object Object],[object Object],[object Object]
Basic HTML Tag  Tag  Description <html>  Defines an HTML document <head>  Defines information about the  document <title>  Defines the document title <body>  Defines the document's body <h1> to <h6>  Defines header 1 to header 6 <p>  Defines a paragraph <br>  Inserts a single line break <hr>  Defines a horizontal rule
<html>tag This element tells a browser that this is an HTML document. This tag is defined at the top of the HTML file and at the end of file.   Format: <html> <body>..............body of HTML.............</body></html>   Example: <html> <body> this is my first page </body></html>
<head> tag The head tag defines information about the document. The browser does not display the &quot;head information&quot; to the user. The following tags can be in the head section: <base>, <link>, <meta>, <script>, <style>, and <title>. The head tag is used between <html> and <body> tags.   Format: <html> <head>.....head sections....</head><body>......body of HTML........</body></html>   Example: <html> <head><title>Basic tag</title></head>>body> this is my first page </body></html>
<title> tag Title tag defines the title of the document which appears in the Title bar of the explorer window. Title tag is used in between <head> and </head> tag because it is title tag is section of <head> tag.   Format: <html> <head><title>Title of the Page</title></head><body>.....body of HTML......</body></html>   Example: <html> <head><title>Basic tag</title></head><body> this is my first page </body></html>
<body> tag The body element defines the document's body. It contains all the contents of the document (like text, images, colors, graphics etc).   Format: <body bgcolor =&quot;color_name&quot; background=&quot;file_name&quot; links=&quot;color_name&quot; text=&quot;color_name&quot;>    Example: <body bgcolor =&quot;red&quot; background=&quot;c:mgky.jpg&quot; links=&quot;blue&quot; text=&quot;black&quot;>  
<hn>...</hn> Heading Tags These tags are used to display headings in an HTML document. through these tags you can increase the size of the text. In these tags <h1> tag defines the largest header & <h6> defines smallest.   These tags are <h1> </h1>, <h2> </h2>, <h3> </h3>, <h4> </h4>, <h5> </h5> Format: <hn>.............. text..............</hn> Example: <h1> this is my first page </h1> or <h1 align=&quot;right&quot;>text</h1> Attribute of the <hn> Tag.
<p>.....</p> Paragraph Tag This tag is used for creating the paragraph in the web page. It is used inside the body of file.   Format: <p>......longtext..........</p>   Example: <p> This is the test of paragraph tag........</p>   In this tag align attribute can be used.
<br> tag The <br> tag inserts a single line break. Use the <br> tag to enter blank lines, not to separate paragraphs. This tag has no end tag.   Format text........<br> .....text   Example: This is a break <br> in the line.
<hr> tag The <hr> tag inserts a horizontal rule. The <hr> tag has no end tag.   Format: text......<hr> ......text or text......<hr align=&quot; &quot; size=&quot; &quot; width=&quot; &quot;>.... text   Example: This is the test of the tag <hr>  
<!--...--> Comment Tag The comment tag is used to insert a comment in the source code. A comment will be ignored by the browser. You can use comments to explain your code, which can help you when you edit the source code at a later date.   You can also store program-specific information inside comments. In this case they will not be visible for the user, but they are still available to the program. A good practice is to comment the text inside the script and style elements to prevent older browsers, that do not support scripting or styles, from showing it as plain text.   Format: <!-- add here your comments these will not be displayed -->   Example: <!-- add here your comments these will not be displayed -->
 
Example for basic command: <html> <head> <title>In body tag</title> </head> <body bgcolor=&quot;lightyellow&quot; text=&quot;red&quot;> In body tag, background color is defined as black and textcolor is defined as the white. <hr> <h1> this is the h1 header </h1> <h2> this is the h2header </h2> <h3> this is the h3 header </h3> <h4> this is the h4 header </h4> <h5> this is the h5 header </h5> <hr>This is the use of &quot;Break&quot; tag<br> and you will see use of more tags<br> <hr> look at the use of comment tag it is<!-- It is a comment line --> good <hr><p> This is the use of paragraph tag and you will see use of more tags </p> The effect of &quot;hr&quot; tag <br> <hr> </body> </html>
<hr>This is the use of &quot;Break&quot; tag<br> and you will see use of more tags<br> <hr> look at the use of comment tag it is<!-- It is a comment line --> good <hr><p> This is the use of paragraph tag and you will see use of more tags </p> The effect of &quot;hr&quot; tag <br> <hr> </body> </html>
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
<small> Displays small text   <strong> Displays strong text   <sub> Displays subscripted text <sup>   Displays superscripted text <bdo> Defines the direction of text display <font> Defines the font face, size, and color of  text
<b> Tag The <b> tag is used to make the text bold.   Format: <b> ................text.........</b>   <i> Tag The <i> tag displays the italic text.   Format: <i> ................text.........</i>;     <tt> Tag The <tt> tag displays the typewriter text.   Format: <tt> ................text.........</tt>  
<u> Tag The <u> tag displays the underlined text.   Format: <u> ................text.........</u>   <em> Tag The <em> tag displays the emphasized text.   Format: <em> ................text.........</em>     <big> Tag The <big> tag displays the big text.   Format: <big> ................text.........</big>  
<small> Tag The <small> tag displays the small text.   Format: <small> ................text.........</small>   <strong> Tag The <strong> tag displays strong text.   Format: <strong> ................text.........</strong>   <sub> Tag The <sub> tag displays text in subscripted format.   Format: <sub> ................text.........</sub>
<sup> Tag The <sup> tag displays superscripted text.   Format: <sup> ................text.........</sup>     <bdo> Tag The <bdo> tag defines the direction of the text.    Format: <bdo> ................text.........</bdo>     <font> Tag The <font> tag defines the font, color, size of the text.   Format: <font face=&quot;font_name&quot; color=&quot;color_name&quot; size=&quot;number&quot;>........text.........</font>   
Example: for character tag: <html>< body>  <b>This text is bold</b> <br>  <strong> This text is strong </strong> <br>  <big> This text is big </big> <br>  <em> This text is emphasized </em> <br>  <i> This text is italic </i> <br>  <small> This text is small </small> <br>  <u> this is underlined text </u> <br>  This text contains  <sub> subscript </sub>
<br>  This text contains  <sup> superscript </sup>  <br> The use of font tag  <font face=&quot;arial&quot; size=&quot;3&quot; color=&quot;green&quot;>  this is use of font tag</font> </body> html>
 
Output Tags   These tags are often used to display computer/programming code. You might be surprised for &quot;how to display the text containing the spaces, line breaks, programming codes, sample text, define variable&quot;. Do not worry, because in this chapter we are going to show you how easily you can do easily.    So lets start with these tags:    Tag Description <pre> Defines preformatted text <code> Defines computer code text <tt> Defines teletype text <kbd> Defines keyboard text <var> Defines a variable <dfn> Defines a definition term <bdo> Defines the direction of text display <samp> Defines sample computer code  
<pre>.........</pre>Tag This is preformatted text. It preserves both spaces and line breaks. The pre tag is good for displaying computer code. Format: <pre> .....text.....</pre> Example: <pre> for i = 1 to 10 print i next i </pre> Output: for i = 1 to 10 print i next i
<code> .....text ......</code> Tag  This tag is also used to display the computer code. But better you use <pre> tag. Format: <code> .....text.....</code>  <kbd>.....Keyboard Input......</kbd> Tag  This tag displays the Keyboard Input. Format: <kbd> ........ Keyboard Input......</kbd>  <tt>......text....</tt> Tag  This tag displays the typewriter text. Format: <tt> .....text.....</tt>
<samp>....sample text...</samp> Tag  This tag displays the sample text.   Format: <samp> .....sample text.....</samp>  <var> computer variable </var>  This tag defines the computer variable.   Format: <var> computer variable </var>   <dfn> definition term </dfn>  this tag is used for definition term.
EXAMPLE <html>  <body> <code>Computer code</code>  <br>  <kbd>Keyboard input</kbd>  <br>  <tt>Teletype text</tt>  <br>  <samp>Sample text</samp>  <br>
<var>Computer variable</var>  <br>  <p>  <b>Note:</b>  These tags are often used to display computer/programming code.  </p>  </body>  </html>
 
THANK YOU

Contenu connexe

Tendances

Tendances (19)

Html1
Html1Html1
Html1
 
Html
HtmlHtml
Html
 
Eye catching HTML BASICS tips: Learn easily
Eye catching HTML BASICS tips: Learn easilyEye catching HTML BASICS tips: Learn easily
Eye catching HTML BASICS tips: Learn easily
 
Html ppt
Html pptHtml ppt
Html ppt
 
Html text formatting
Html text formattingHtml text formatting
Html text formatting
 
Understanding THML
Understanding THMLUnderstanding THML
Understanding THML
 
Learning HTML
Learning HTMLLearning HTML
Learning HTML
 
Intro Html
Intro HtmlIntro Html
Intro Html
 
The Basics of (X)HTML Tags
The Basics of (X)HTML TagsThe Basics of (X)HTML Tags
The Basics of (X)HTML Tags
 
Html introduction
Html introductionHtml introduction
Html introduction
 
Html
HtmlHtml
Html
 
Introduction to html
Introduction to htmlIntroduction to html
Introduction to html
 
Introduction to html
Introduction to htmlIntroduction to html
Introduction to html
 
HTML (Web) basics for a beginner
HTML (Web) basics for a beginnerHTML (Web) basics for a beginner
HTML (Web) basics for a beginner
 
Html Presentation Of Web Page Making
Html Presentation Of Web Page MakingHtml Presentation Of Web Page Making
Html Presentation Of Web Page Making
 
Lecture 2 introduction to html
Lecture 2  introduction to htmlLecture 2  introduction to html
Lecture 2 introduction to html
 
LAMP_TRAINING_SESSION_3
LAMP_TRAINING_SESSION_3LAMP_TRAINING_SESSION_3
LAMP_TRAINING_SESSION_3
 
Html ppt computer
Html ppt computerHtml ppt computer
Html ppt computer
 
static dynamic html tags
static dynamic html tagsstatic dynamic html tags
static dynamic html tags
 

En vedette

En vedette (20)

Lab#2 overview of html
Lab#2 overview of htmlLab#2 overview of html
Lab#2 overview of html
 
Java 8 Collection API Updates
Java 8 Collection API UpdatesJava 8 Collection API Updates
Java 8 Collection API Updates
 
Html tags slides 2016
Html tags slides 2016Html tags slides 2016
Html tags slides 2016
 
Pertemuan 3-html
Pertemuan 3-htmlPertemuan 3-html
Pertemuan 3-html
 
TUGAS 2 KELOMPOK_0916
TUGAS 2 KELOMPOK_0916TUGAS 2 KELOMPOK_0916
TUGAS 2 KELOMPOK_0916
 
Mikko
MikkoMikko
Mikko
 
Visual programming
Visual programmingVisual programming
Visual programming
 
TUGAS 2 KELOMPOK_0916
TUGAS 2 KELOMPOK_0916TUGAS 2 KELOMPOK_0916
TUGAS 2 KELOMPOK_0916
 
Java collection
Java collectionJava collection
Java collection
 
Html tag html 10 x10 wen liu art 2830
Html tag html 10 x10 wen liu art 2830Html tag html 10 x10 wen liu art 2830
Html tag html 10 x10 wen liu art 2830
 
HTML Tags
HTML TagsHTML Tags
HTML Tags
 
Tag html
Tag htmlTag html
Tag html
 
Human Ear
Human EarHuman Ear
Human Ear
 
Collection Framework in java
Collection Framework in javaCollection Framework in java
Collection Framework in java
 
Keandalan Memori
Keandalan MemoriKeandalan Memori
Keandalan Memori
 
Material Konduktor
Material KonduktorMaterial Konduktor
Material Konduktor
 
Pemrograman Python untuk Pemula
Pemrograman Python untuk PemulaPemrograman Python untuk Pemula
Pemrograman Python untuk Pemula
 
Code HTML Lengkap
Code HTML LengkapCode HTML Lengkap
Code HTML Lengkap
 
Java Collection framework
Java Collection frameworkJava Collection framework
Java Collection framework
 
Java Collections
Java CollectionsJava Collections
Java Collections
 

Similaire à Html tag (20)

Htmltag.ppt
Htmltag.pptHtmltag.ppt
Htmltag.ppt
 
Introduction to html
Introduction to htmlIntroduction to html
Introduction to html
 
Prabu html
Prabu htmlPrabu html
Prabu html
 
Html
HtmlHtml
Html
 
Html
HtmlHtml
Html
 
Html intro
Html introHtml intro
Html intro
 
Html intro
Html introHtml intro
Html intro
 
Cascading Style Sheets
Cascading Style SheetsCascading Style Sheets
Cascading Style Sheets
 
Diva
DivaDiva
Diva
 
Html
HtmlHtml
Html
 
Html
HtmlHtml
Html
 
Tags in html
Tags in htmlTags in html
Tags in html
 
Html part2
Html part2Html part2
Html part2
 
Html part2 (1)
Html part2 (1)Html part2 (1)
Html part2 (1)
 
AK html
AK  htmlAK  html
AK html
 
Html
HtmlHtml
Html
 
Html tutorial
Html tutorialHtml tutorial
Html tutorial
 
Module 2
Module 2Module 2
Module 2
 
HTML Fundamentals
HTML FundamentalsHTML Fundamentals
HTML Fundamentals
 
Html Ppt
Html PptHtml Ppt
Html Ppt
 

Plus de NIRMAL FELIX (8)

Mobile phones
Mobile phonesMobile phones
Mobile phones
 
php basics
php basicsphp basics
php basics
 
Ajax
AjaxAjax
Ajax
 
Css
CssCss
Css
 
My resume
My resumeMy resume
My resume
 
My sql with querys
My sql with querysMy sql with querys
My sql with querys
 
Apache
ApacheApache
Apache
 
Linux50commands
Linux50commandsLinux50commands
Linux50commands
 

Dernier

Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Drew Madelung
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdfhans926745
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAndrey Devyatkin
 
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?Antenna Manufacturer Coco
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonAnna Loughnan Colquhoun
 
Developing An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of BrazilDeveloping An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of BrazilV3cube
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...DianaGray10
 
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsMaria Levchenko
 
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUnderstanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUK Journal
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerThousandEyes
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)Gabriella Davis
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityPrincipled Technologies
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProduct Anonymous
 
HTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation StrategiesHTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation StrategiesBoston Institute of Analytics
 
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024The Digital Insurer
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc
 
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Enterprise Knowledge
 
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...Neo4j
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationRadu Cotescu
 

Dernier (20)

Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
 
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
 
Developing An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of BrazilDeveloping An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of Brazil
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed texts
 
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUnderstanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
HTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation StrategiesHTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation Strategies
 
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
 
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...
 
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
 

Html tag

  • 1. HTML TAGS BY NIRMAL FELIX.K
  • 2.
  • 3. Basic HTML Tag Tag Description <html> Defines an HTML document <head> Defines information about the document <title> Defines the document title <body> Defines the document's body <h1> to <h6> Defines header 1 to header 6 <p> Defines a paragraph <br> Inserts a single line break <hr> Defines a horizontal rule
  • 4. <html>tag This element tells a browser that this is an HTML document. This tag is defined at the top of the HTML file and at the end of file.   Format: <html> <body>..............body of HTML.............</body></html>   Example: <html> <body> this is my first page </body></html>
  • 5. <head> tag The head tag defines information about the document. The browser does not display the &quot;head information&quot; to the user. The following tags can be in the head section: <base>, <link>, <meta>, <script>, <style>, and <title>. The head tag is used between <html> and <body> tags.   Format: <html> <head>.....head sections....</head><body>......body of HTML........</body></html>   Example: <html> <head><title>Basic tag</title></head>>body> this is my first page </body></html>
  • 6. <title> tag Title tag defines the title of the document which appears in the Title bar of the explorer window. Title tag is used in between <head> and </head> tag because it is title tag is section of <head> tag.   Format: <html> <head><title>Title of the Page</title></head><body>.....body of HTML......</body></html>   Example: <html> <head><title>Basic tag</title></head><body> this is my first page </body></html>
  • 7. <body> tag The body element defines the document's body. It contains all the contents of the document (like text, images, colors, graphics etc).   Format: <body bgcolor =&quot;color_name&quot; background=&quot;file_name&quot; links=&quot;color_name&quot; text=&quot;color_name&quot;>   Example: <body bgcolor =&quot;red&quot; background=&quot;c:mgky.jpg&quot; links=&quot;blue&quot; text=&quot;black&quot;>  
  • 8. <hn>...</hn> Heading Tags These tags are used to display headings in an HTML document. through these tags you can increase the size of the text. In these tags <h1> tag defines the largest header & <h6> defines smallest.   These tags are <h1> </h1>, <h2> </h2>, <h3> </h3>, <h4> </h4>, <h5> </h5> Format: <hn>.............. text..............</hn> Example: <h1> this is my first page </h1> or <h1 align=&quot;right&quot;>text</h1> Attribute of the <hn> Tag.
  • 9. <p>.....</p> Paragraph Tag This tag is used for creating the paragraph in the web page. It is used inside the body of file.   Format: <p>......longtext..........</p>   Example: <p> This is the test of paragraph tag........</p>   In this tag align attribute can be used.
  • 10. <br> tag The <br> tag inserts a single line break. Use the <br> tag to enter blank lines, not to separate paragraphs. This tag has no end tag.   Format text........<br> .....text   Example: This is a break <br> in the line.
  • 11. <hr> tag The <hr> tag inserts a horizontal rule. The <hr> tag has no end tag.   Format: text......<hr> ......text or text......<hr align=&quot; &quot; size=&quot; &quot; width=&quot; &quot;>.... text   Example: This is the test of the tag <hr>  
  • 12. <!--...--> Comment Tag The comment tag is used to insert a comment in the source code. A comment will be ignored by the browser. You can use comments to explain your code, which can help you when you edit the source code at a later date.   You can also store program-specific information inside comments. In this case they will not be visible for the user, but they are still available to the program. A good practice is to comment the text inside the script and style elements to prevent older browsers, that do not support scripting or styles, from showing it as plain text.   Format: <!-- add here your comments these will not be displayed -->   Example: <!-- add here your comments these will not be displayed -->
  • 13.  
  • 14. Example for basic command: <html> <head> <title>In body tag</title> </head> <body bgcolor=&quot;lightyellow&quot; text=&quot;red&quot;> In body tag, background color is defined as black and textcolor is defined as the white. <hr> <h1> this is the h1 header </h1> <h2> this is the h2header </h2> <h3> this is the h3 header </h3> <h4> this is the h4 header </h4> <h5> this is the h5 header </h5> <hr>This is the use of &quot;Break&quot; tag<br> and you will see use of more tags<br> <hr> look at the use of comment tag it is<!-- It is a comment line --> good <hr><p> This is the use of paragraph tag and you will see use of more tags </p> The effect of &quot;hr&quot; tag <br> <hr> </body> </html>
  • 15. <hr>This is the use of &quot;Break&quot; tag<br> and you will see use of more tags<br> <hr> look at the use of comment tag it is<!-- It is a comment line --> good <hr><p> This is the use of paragraph tag and you will see use of more tags </p> The effect of &quot;hr&quot; tag <br> <hr> </body> </html>
  • 16.
  • 17. <small> Displays small text <strong> Displays strong text <sub> Displays subscripted text <sup> Displays superscripted text <bdo> Defines the direction of text display <font> Defines the font face, size, and color of text
  • 18. <b> Tag The <b> tag is used to make the text bold.   Format: <b> ................text.........</b>   <i> Tag The <i> tag displays the italic text.   Format: <i> ................text.........</i>;     <tt> Tag The <tt> tag displays the typewriter text.   Format: <tt> ................text.........</tt>  
  • 19. <u> Tag The <u> tag displays the underlined text.   Format: <u> ................text.........</u>   <em> Tag The <em> tag displays the emphasized text.   Format: <em> ................text.........</em>     <big> Tag The <big> tag displays the big text.   Format: <big> ................text.........</big>  
  • 20. <small> Tag The <small> tag displays the small text.   Format: <small> ................text.........</small>   <strong> Tag The <strong> tag displays strong text.   Format: <strong> ................text.........</strong>   <sub> Tag The <sub> tag displays text in subscripted format.   Format: <sub> ................text.........</sub>
  • 21. <sup> Tag The <sup> tag displays superscripted text.   Format: <sup> ................text.........</sup>     <bdo> Tag The <bdo> tag defines the direction of the text.   Format: <bdo> ................text.........</bdo>     <font> Tag The <font> tag defines the font, color, size of the text.   Format: <font face=&quot;font_name&quot; color=&quot;color_name&quot; size=&quot;number&quot;>........text.........</font>  
  • 22. Example: for character tag: <html>< body> <b>This text is bold</b> <br> <strong> This text is strong </strong> <br> <big> This text is big </big> <br> <em> This text is emphasized </em> <br> <i> This text is italic </i> <br> <small> This text is small </small> <br> <u> this is underlined text </u> <br> This text contains <sub> subscript </sub>
  • 23. <br> This text contains <sup> superscript </sup> <br> The use of font tag <font face=&quot;arial&quot; size=&quot;3&quot; color=&quot;green&quot;> this is use of font tag</font> </body> html>
  • 24.  
  • 25. Output Tags   These tags are often used to display computer/programming code. You might be surprised for &quot;how to display the text containing the spaces, line breaks, programming codes, sample text, define variable&quot;. Do not worry, because in this chapter we are going to show you how easily you can do easily.   So lets start with these tags:   Tag Description <pre> Defines preformatted text <code> Defines computer code text <tt> Defines teletype text <kbd> Defines keyboard text <var> Defines a variable <dfn> Defines a definition term <bdo> Defines the direction of text display <samp> Defines sample computer code  
  • 26. <pre>.........</pre>Tag This is preformatted text. It preserves both spaces and line breaks. The pre tag is good for displaying computer code. Format: <pre> .....text.....</pre> Example: <pre> for i = 1 to 10 print i next i </pre> Output: for i = 1 to 10 print i next i
  • 27. <code> .....text ......</code> Tag This tag is also used to display the computer code. But better you use <pre> tag. Format: <code> .....text.....</code> <kbd>.....Keyboard Input......</kbd> Tag This tag displays the Keyboard Input. Format: <kbd> ........ Keyboard Input......</kbd> <tt>......text....</tt> Tag This tag displays the typewriter text. Format: <tt> .....text.....</tt>
  • 28. <samp>....sample text...</samp> Tag This tag displays the sample text.   Format: <samp> .....sample text.....</samp> <var> computer variable </var> This tag defines the computer variable.   Format: <var> computer variable </var>   <dfn> definition term </dfn> this tag is used for definition term.
  • 29. EXAMPLE <html> <body> <code>Computer code</code> <br> <kbd>Keyboard input</kbd> <br> <tt>Teletype text</tt> <br> <samp>Sample text</samp> <br>
  • 30. <var>Computer variable</var> <br> <p> <b>Note:</b> These tags are often used to display computer/programming code. </p> </body> </html>
  • 31.