SlideShare a Scribd company logo
1 of 12
iFour Consultancy
HTML (Hyper Text Markup Language)
https://www.ifourtechnolab.com/
Introduction To HTML
 What Is HTML?
• Markup language for describing web pages
• HTML stands for Hyper Text Markup Language, a language with set of markup tags
• Documents are described by HTML tags
• Each HTML tag describes different document content
•A markup language is a set of markup tags
•A markup language is a set of markup tags
https://www.ifourtechnolab.com/
Creating HTML Pages
 An HTML file must have an .htm or .html file extension
 HTML files can be created with text editors:
• NotePad, NotePad ++, PSPad
 Or HTML editors (WYSIWYG Editors):
• Microsoft FrontPage
• Macromedia Dreamweaver
• Netscape Composer
• Microsoft Word
• Visual Studio
3
https://www.ifourtechnolab.com/
HTML Structure
 HTML is comprised of “elements” and “tags”
• Begins with <html> and ends with </html>
 Elements (tags) are nested one inside another:
 Tags have attributes:
 HTML describes structure using two main sections: <head> and <body>
4
<html> <head></head> <body></body> </html>
<img src="logo.jpg" alt="logo" />
https://www.ifourtechnolab.com/
HTML Code Formatting
 The HTML source code should be formatted to increase readability and facilitate
debugging
• Every block element should start on a new line
• Every nested (block) element should be indented
• Browsers ignore multiple whitespaces in the page source, so formatting is harmless
 For performance reasons, formatting can be sacrificed
5
https://www.ifourtechnolab.com/
First HTML Page
6
<!DOCTYPE HTML>
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<p>This is some text...</p>
</body>
</html>
Test.html
https://www.ifourtechnolab.com/
First HTML Page: Tags
7
Opening tag
Closing tag
 An HTML element consists of an opening tag, a closing tag and the content
inside.
<!DOCTYPE HTML>
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<p>This is some text...</p>
</body>
</html>
https://www.ifourtechnolab.com/
<!DOCTYPE HTML>
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<p>This is some text...</p>
</body>
</html>
First HTML Page: Header
8
HTML header
https://www.ifourtechnolab.com/
<!DOCTYPE HTML>
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<p>This is some text...</p>
</body>
</html>
First HTML Page: Body
9
HTML body
https://www.ifourtechnolab.com/
Some Simple Tags
 Hyperlink tags
 Image tags
 Text formatting tags
10
<a href="http://www.telerik.com/"
title="Telerik">Link to Telerik Web site</a>
<img src="logo.gif" alt="logo" />
This text is <em>emphasized.</em>
<br />new line<br />
This one is <strong>more emphasized.</strong>
https://www.ifourtechnolab.com/
Tags Attributes
 Tags can have attributes
• Attributes specify properties and behavior
• Example:
 Few attributes can apply to every element:
• Id, style, class, title
• The id is unique in the document
• Content of title attribute is displayed as hint when the element is hovered with the
mouse
• Some elements have obligatory attributes
11
<img src="logo.gif" alt="logo" />
Attribute alt with value "logo"
https://www.ifourtechnolab.com/
Interesting, right?
This is just a sneak preview of the full presentation. We hope you like it! To see the
rest of it, just click here to view it in full on PowerShow.com. Then, if you’d like, you
can also log in to PowerShow.com to download the entire presentation for free.

More Related Content

Similar to An-Introduction-to-HTML

Introduction to PHP - Slide 1
Introduction to PHP - Slide 1 Introduction to PHP - Slide 1
Introduction to PHP - Slide 1 pctechnology
 
Basics of html for web development by software outsourcing company india
Basics of html for web development   by software outsourcing company indiaBasics of html for web development   by software outsourcing company india
Basics of html for web development by software outsourcing company indiaJignesh Aakoliya
 
Basic HTML
Basic HTMLBasic HTML
Basic HTMLSayan De
 
Html css java script basics All about you need
Html css java script basics All about you needHtml css java script basics All about you need
Html css java script basics All about you needDipen Parmar
 
215077679 introduction to HTML
215077679  introduction to HTML215077679  introduction to HTML
215077679 introduction to HTMLXolani Madlopha
 
4. html css-java script-basics
4. html css-java script-basics4. html css-java script-basics
4. html css-java script-basicsNikita Garg
 
4. html css-java script-basics
4. html css-java script-basics4. html css-java script-basics
4. html css-java script-basicsxu fag
 
POLITEKNIK MALAYSIA
POLITEKNIK MALAYSIAPOLITEKNIK MALAYSIA
POLITEKNIK MALAYSIAAiman Hud
 
4. html css-java script-basics
4. html css-java script-basics4. html css-java script-basics
4. html css-java script-basicsMinea Chem
 
3 1-html-fundamentals-110302100520-phpapp02
3 1-html-fundamentals-110302100520-phpapp023 1-html-fundamentals-110302100520-phpapp02
3 1-html-fundamentals-110302100520-phpapp02Aditya Varma
 
What is HTML - An Introduction to HTML (Hypertext Markup Language)
What is HTML - An Introduction to HTML (Hypertext Markup Language)What is HTML - An Introduction to HTML (Hypertext Markup Language)
What is HTML - An Introduction to HTML (Hypertext Markup Language)Ahsan Rahim
 
Ankit (221348051) BCA-Aiml.pptx
Ankit (221348051) BCA-Aiml.pptxAnkit (221348051) BCA-Aiml.pptx
Ankit (221348051) BCA-Aiml.pptxHKShab
 
HTML Notes And Some Attributes
HTML Notes And Some AttributesHTML Notes And Some Attributes
HTML Notes And Some AttributesHIFZUR RAHMAN
 

Similar to An-Introduction-to-HTML (20)

Introduction to PHP - Slide 1
Introduction to PHP - Slide 1 Introduction to PHP - Slide 1
Introduction to PHP - Slide 1
 
Basics of html for web development by software outsourcing company india
Basics of html for web development   by software outsourcing company indiaBasics of html for web development   by software outsourcing company india
Basics of html for web development by software outsourcing company india
 
HTML Basics by software development company india
HTML Basics by software development company indiaHTML Basics by software development company india
HTML Basics by software development company india
 
HTML 5 Tutorial
HTML 5 TutorialHTML 5 Tutorial
HTML 5 Tutorial
 
HTML guide for beginners
HTML guide for beginnersHTML guide for beginners
HTML guide for beginners
 
Basic HTML
Basic HTMLBasic HTML
Basic HTML
 
Html css java script basics All about you need
Html css java script basics All about you needHtml css java script basics All about you need
Html css java script basics All about you need
 
Html
HtmlHtml
Html
 
215077679 introduction to HTML
215077679  introduction to HTML215077679  introduction to HTML
215077679 introduction to HTML
 
Html - Tutorial
Html - TutorialHtml - Tutorial
Html - Tutorial
 
4. html css-java script-basics
4. html css-java script-basics4. html css-java script-basics
4. html css-java script-basics
 
4. html css-java script-basics
4. html css-java script-basics4. html css-java script-basics
4. html css-java script-basics
 
POLITEKNIK MALAYSIA
POLITEKNIK MALAYSIAPOLITEKNIK MALAYSIA
POLITEKNIK MALAYSIA
 
4. html css-java script-basics
4. html css-java script-basics4. html css-java script-basics
4. html css-java script-basics
 
Html
HtmlHtml
Html
 
HTML Fundamentals
HTML FundamentalsHTML Fundamentals
HTML Fundamentals
 
3 1-html-fundamentals-110302100520-phpapp02
3 1-html-fundamentals-110302100520-phpapp023 1-html-fundamentals-110302100520-phpapp02
3 1-html-fundamentals-110302100520-phpapp02
 
What is HTML - An Introduction to HTML (Hypertext Markup Language)
What is HTML - An Introduction to HTML (Hypertext Markup Language)What is HTML - An Introduction to HTML (Hypertext Markup Language)
What is HTML - An Introduction to HTML (Hypertext Markup Language)
 
Ankit (221348051) BCA-Aiml.pptx
Ankit (221348051) BCA-Aiml.pptxAnkit (221348051) BCA-Aiml.pptx
Ankit (221348051) BCA-Aiml.pptx
 
HTML Notes And Some Attributes
HTML Notes And Some AttributesHTML Notes And Some Attributes
HTML Notes And Some Attributes
 

Recently uploaded

MENTAL STATUS EXAMINATION format.docx
MENTAL     STATUS EXAMINATION format.docxMENTAL     STATUS EXAMINATION format.docx
MENTAL STATUS EXAMINATION format.docxPoojaSen20
 
POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptx
POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptxPOINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptx
POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptxSayali Powar
 
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptxSOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptxiammrhaywood
 
18-04-UA_REPORT_MEDIALITERAСY_INDEX-DM_23-1-final-eng.pdf
18-04-UA_REPORT_MEDIALITERAСY_INDEX-DM_23-1-final-eng.pdf18-04-UA_REPORT_MEDIALITERAСY_INDEX-DM_23-1-final-eng.pdf
18-04-UA_REPORT_MEDIALITERAСY_INDEX-DM_23-1-final-eng.pdfssuser54595a
 
Crayon Activity Handout For the Crayon A
Crayon Activity Handout For the Crayon ACrayon Activity Handout For the Crayon A
Crayon Activity Handout For the Crayon AUnboundStockton
 
The Most Excellent Way | 1 Corinthians 13
The Most Excellent Way | 1 Corinthians 13The Most Excellent Way | 1 Corinthians 13
The Most Excellent Way | 1 Corinthians 13Steve Thomason
 
Concept of Vouching. B.Com(Hons) /B.Compdf
Concept of Vouching. B.Com(Hons) /B.CompdfConcept of Vouching. B.Com(Hons) /B.Compdf
Concept of Vouching. B.Com(Hons) /B.CompdfUmakantAnnand
 
Q4-W6-Restating Informational Text Grade 3
Q4-W6-Restating Informational Text Grade 3Q4-W6-Restating Informational Text Grade 3
Q4-W6-Restating Informational Text Grade 3JemimahLaneBuaron
 
Alper Gobel In Media Res Media Component
Alper Gobel In Media Res Media ComponentAlper Gobel In Media Res Media Component
Alper Gobel In Media Res Media ComponentInMediaRes1
 
Micromeritics - Fundamental and Derived Properties of Powders
Micromeritics - Fundamental and Derived Properties of PowdersMicromeritics - Fundamental and Derived Properties of Powders
Micromeritics - Fundamental and Derived Properties of PowdersChitralekhaTherkar
 
_Math 4-Q4 Week 5.pptx Steps in Collecting Data
_Math 4-Q4 Week 5.pptx Steps in Collecting Data_Math 4-Q4 Week 5.pptx Steps in Collecting Data
_Math 4-Q4 Week 5.pptx Steps in Collecting DataJhengPantaleon
 
mini mental status format.docx
mini    mental       status     format.docxmini    mental       status     format.docx
mini mental status format.docxPoojaSen20
 
Hybridoma Technology ( Production , Purification , and Application )
Hybridoma Technology  ( Production , Purification , and Application  ) Hybridoma Technology  ( Production , Purification , and Application  )
Hybridoma Technology ( Production , Purification , and Application ) Sakshi Ghasle
 
Call Girls in Dwarka Mor Delhi Contact Us 9654467111
Call Girls in Dwarka Mor Delhi Contact Us 9654467111Call Girls in Dwarka Mor Delhi Contact Us 9654467111
Call Girls in Dwarka Mor Delhi Contact Us 9654467111Sapana Sha
 
Industrial Policy - 1948, 1956, 1973, 1977, 1980, 1991
Industrial Policy - 1948, 1956, 1973, 1977, 1980, 1991Industrial Policy - 1948, 1956, 1973, 1977, 1980, 1991
Industrial Policy - 1948, 1956, 1973, 1977, 1980, 1991RKavithamani
 
Organic Name Reactions for the students and aspirants of Chemistry12th.pptx
Organic Name Reactions  for the students and aspirants of Chemistry12th.pptxOrganic Name Reactions  for the students and aspirants of Chemistry12th.pptx
Organic Name Reactions for the students and aspirants of Chemistry12th.pptxVS Mahajan Coaching Centre
 
Grant Readiness 101 TechSoup and Remy Consulting
Grant Readiness 101 TechSoup and Remy ConsultingGrant Readiness 101 TechSoup and Remy Consulting
Grant Readiness 101 TechSoup and Remy ConsultingTechSoup
 
Employee wellbeing at the workplace.pptx
Employee wellbeing at the workplace.pptxEmployee wellbeing at the workplace.pptx
Employee wellbeing at the workplace.pptxNirmalaLoungPoorunde1
 

Recently uploaded (20)

MENTAL STATUS EXAMINATION format.docx
MENTAL     STATUS EXAMINATION format.docxMENTAL     STATUS EXAMINATION format.docx
MENTAL STATUS EXAMINATION format.docx
 
POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptx
POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptxPOINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptx
POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptx
 
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptxSOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
 
Model Call Girl in Tilak Nagar Delhi reach out to us at 🔝9953056974🔝
Model Call Girl in Tilak Nagar Delhi reach out to us at 🔝9953056974🔝Model Call Girl in Tilak Nagar Delhi reach out to us at 🔝9953056974🔝
Model Call Girl in Tilak Nagar Delhi reach out to us at 🔝9953056974🔝
 
18-04-UA_REPORT_MEDIALITERAСY_INDEX-DM_23-1-final-eng.pdf
18-04-UA_REPORT_MEDIALITERAСY_INDEX-DM_23-1-final-eng.pdf18-04-UA_REPORT_MEDIALITERAСY_INDEX-DM_23-1-final-eng.pdf
18-04-UA_REPORT_MEDIALITERAСY_INDEX-DM_23-1-final-eng.pdf
 
Crayon Activity Handout For the Crayon A
Crayon Activity Handout For the Crayon ACrayon Activity Handout For the Crayon A
Crayon Activity Handout For the Crayon A
 
The Most Excellent Way | 1 Corinthians 13
The Most Excellent Way | 1 Corinthians 13The Most Excellent Way | 1 Corinthians 13
The Most Excellent Way | 1 Corinthians 13
 
Concept of Vouching. B.Com(Hons) /B.Compdf
Concept of Vouching. B.Com(Hons) /B.CompdfConcept of Vouching. B.Com(Hons) /B.Compdf
Concept of Vouching. B.Com(Hons) /B.Compdf
 
Q4-W6-Restating Informational Text Grade 3
Q4-W6-Restating Informational Text Grade 3Q4-W6-Restating Informational Text Grade 3
Q4-W6-Restating Informational Text Grade 3
 
Alper Gobel In Media Res Media Component
Alper Gobel In Media Res Media ComponentAlper Gobel In Media Res Media Component
Alper Gobel In Media Res Media Component
 
Micromeritics - Fundamental and Derived Properties of Powders
Micromeritics - Fundamental and Derived Properties of PowdersMicromeritics - Fundamental and Derived Properties of Powders
Micromeritics - Fundamental and Derived Properties of Powders
 
_Math 4-Q4 Week 5.pptx Steps in Collecting Data
_Math 4-Q4 Week 5.pptx Steps in Collecting Data_Math 4-Q4 Week 5.pptx Steps in Collecting Data
_Math 4-Q4 Week 5.pptx Steps in Collecting Data
 
Staff of Color (SOC) Retention Efforts DDSD
Staff of Color (SOC) Retention Efforts DDSDStaff of Color (SOC) Retention Efforts DDSD
Staff of Color (SOC) Retention Efforts DDSD
 
mini mental status format.docx
mini    mental       status     format.docxmini    mental       status     format.docx
mini mental status format.docx
 
Hybridoma Technology ( Production , Purification , and Application )
Hybridoma Technology  ( Production , Purification , and Application  ) Hybridoma Technology  ( Production , Purification , and Application  )
Hybridoma Technology ( Production , Purification , and Application )
 
Call Girls in Dwarka Mor Delhi Contact Us 9654467111
Call Girls in Dwarka Mor Delhi Contact Us 9654467111Call Girls in Dwarka Mor Delhi Contact Us 9654467111
Call Girls in Dwarka Mor Delhi Contact Us 9654467111
 
Industrial Policy - 1948, 1956, 1973, 1977, 1980, 1991
Industrial Policy - 1948, 1956, 1973, 1977, 1980, 1991Industrial Policy - 1948, 1956, 1973, 1977, 1980, 1991
Industrial Policy - 1948, 1956, 1973, 1977, 1980, 1991
 
Organic Name Reactions for the students and aspirants of Chemistry12th.pptx
Organic Name Reactions  for the students and aspirants of Chemistry12th.pptxOrganic Name Reactions  for the students and aspirants of Chemistry12th.pptx
Organic Name Reactions for the students and aspirants of Chemistry12th.pptx
 
Grant Readiness 101 TechSoup and Remy Consulting
Grant Readiness 101 TechSoup and Remy ConsultingGrant Readiness 101 TechSoup and Remy Consulting
Grant Readiness 101 TechSoup and Remy Consulting
 
Employee wellbeing at the workplace.pptx
Employee wellbeing at the workplace.pptxEmployee wellbeing at the workplace.pptx
Employee wellbeing at the workplace.pptx
 

An-Introduction-to-HTML

  • 1. iFour Consultancy HTML (Hyper Text Markup Language) https://www.ifourtechnolab.com/
  • 2. Introduction To HTML  What Is HTML? • Markup language for describing web pages • HTML stands for Hyper Text Markup Language, a language with set of markup tags • Documents are described by HTML tags • Each HTML tag describes different document content •A markup language is a set of markup tags •A markup language is a set of markup tags https://www.ifourtechnolab.com/
  • 3. Creating HTML Pages  An HTML file must have an .htm or .html file extension  HTML files can be created with text editors: • NotePad, NotePad ++, PSPad  Or HTML editors (WYSIWYG Editors): • Microsoft FrontPage • Macromedia Dreamweaver • Netscape Composer • Microsoft Word • Visual Studio 3 https://www.ifourtechnolab.com/
  • 4. HTML Structure  HTML is comprised of “elements” and “tags” • Begins with <html> and ends with </html>  Elements (tags) are nested one inside another:  Tags have attributes:  HTML describes structure using two main sections: <head> and <body> 4 <html> <head></head> <body></body> </html> <img src="logo.jpg" alt="logo" /> https://www.ifourtechnolab.com/
  • 5. HTML Code Formatting  The HTML source code should be formatted to increase readability and facilitate debugging • Every block element should start on a new line • Every nested (block) element should be indented • Browsers ignore multiple whitespaces in the page source, so formatting is harmless  For performance reasons, formatting can be sacrificed 5 https://www.ifourtechnolab.com/
  • 6. First HTML Page 6 <!DOCTYPE HTML> <html> <head> <title>My First HTML Page</title> </head> <body> <p>This is some text...</p> </body> </html> Test.html https://www.ifourtechnolab.com/
  • 7. First HTML Page: Tags 7 Opening tag Closing tag  An HTML element consists of an opening tag, a closing tag and the content inside. <!DOCTYPE HTML> <html> <head> <title>My First HTML Page</title> </head> <body> <p>This is some text...</p> </body> </html> https://www.ifourtechnolab.com/
  • 8. <!DOCTYPE HTML> <html> <head> <title>My First HTML Page</title> </head> <body> <p>This is some text...</p> </body> </html> First HTML Page: Header 8 HTML header https://www.ifourtechnolab.com/
  • 9. <!DOCTYPE HTML> <html> <head> <title>My First HTML Page</title> </head> <body> <p>This is some text...</p> </body> </html> First HTML Page: Body 9 HTML body https://www.ifourtechnolab.com/
  • 10. Some Simple Tags  Hyperlink tags  Image tags  Text formatting tags 10 <a href="http://www.telerik.com/" title="Telerik">Link to Telerik Web site</a> <img src="logo.gif" alt="logo" /> This text is <em>emphasized.</em> <br />new line<br /> This one is <strong>more emphasized.</strong> https://www.ifourtechnolab.com/
  • 11. Tags Attributes  Tags can have attributes • Attributes specify properties and behavior • Example:  Few attributes can apply to every element: • Id, style, class, title • The id is unique in the document • Content of title attribute is displayed as hint when the element is hovered with the mouse • Some elements have obligatory attributes 11 <img src="logo.gif" alt="logo" /> Attribute alt with value "logo" https://www.ifourtechnolab.com/
  • 12. Interesting, right? This is just a sneak preview of the full presentation. We hope you like it! To see the rest of it, just click here to view it in full on PowerShow.com. Then, if you’d like, you can also log in to PowerShow.com to download the entire presentation for free.

Editor's Notes

  1. Software Outsourcing Company India - http://www.ifourtechnolab.com/
  2. Software Outsourcing Company India - http://www.ifourtechnolab.com/
  3. 07/16/96
  4. 07/16/96
  5. 07/16/96
  6. 07/16/96
  7. 07/16/96
  8. 07/16/96
  9. 07/16/96
  10. 07/16/96
  11. Software Outsourcing Company India - http://www.ifourtechnolab.com/