SlideShare ist ein Scribd-Unternehmen logo
1 von 17
HTML
• Language for describing web pages.
• Hyper Text Markup Language
• Its not a programming language, it is a
markup language
• A markup language is a set of markup
tags
HTML Tags
• HTML markup tags = HTML tags
• Keywords surrounded by angle
brackets like <html>
• Normally come in pairs like
<b> and </b>
• The first tag in a pair is the start tag
(opening tag) and the second tag is the
end tag (closing tag)
HTML Pages
• HTML Documents = Web Pages
• HTML documents describe web pages
• HTML documents contain HTML tags
and plain text
• HTML documents are also called web
pages
Browser
• The purpose of a web browser (like
Internet Explorer or Firefox) is to read
HTML documents and display them as
web pages.
• The browser does not display the
HTML tags, but uses the tags to
interpret the content of the page
Browser
• <html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph</p>
</body>
</html>
HTML Editor
• A simple text editor can be use to write
html tags.
• HTM or HTML extension can be use.
Heading Tags
<h1> This is heading 1 </h1>
<h2> This is heading 2 </h2>
<h3> This is heading 3 </h3>
<h4> This is heading 4 </h4>
<h5> This is heading 5 </h5>
<h6> This is heading 6 </h6>
Paragraph Tags
<html>
<body>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</body>
</html>
Anchor Tags
<html>
<body>
<a href="http://www.jetskill.com">
This is a link</a>
</body>
</html>
This is a link
Image Tags
<html>
<body>
<img src=“jetskill.jpg"
width="104"
height="142" />
</body>
</html>
Empty HTML Elements
HTML elements without content are
called empty elements. Empty
elements can be closed in the start
tag.
<br> is an empty element without a
closing tag (it defines a line break).
Empty HTML Elements
In XHTML, XML, and future versions
of HTML, all elements must be closed.
Adding a slash to the start tag, like
<br/>, is the proper way of closing empty
elements, accepted by HTML, XHTML
and XML.
Lowercase Tags
HTML tags are not case sensitive:
<P> means the same as <p>.
Plenty of web sites use uppercase HTML
tags in their pages.
the World Wide Web Consortium
(W3C) recommends lowercase in
HTML 4, and demands lowercase tags
in future versions of (X)HTML.
HTML Attributes
• HTML elements can have attributes
• Attributes provide additional
information about the element
• Attributes are always specified in the
start tag
• Attributes come in name/value pairs
like: name="value"
HTML Attributes
<body bgcolor="#E6E6FA">
<font face="verdana"
size="2"
color="blue">
This is some text!
</font>
Text Formatting
<p><b>This text is bold</b></p>
This text is bold
<p><big>This text is big</big></p>

This text is big
<p><i>This text is italic</i></p>
This text is italic
Text Formatting
<code>This is computer output</code>
This is computer output
This is<sub> subscript</sub> and
<sup>superscript</sup>
This is subscript and superscript

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Html
HtmlHtml
Html
 
HTML Introduction
HTML IntroductionHTML Introduction
HTML Introduction
 
Html tutorials
Html tutorialsHtml tutorials
Html tutorials
 
Html notes with Examples
Html notes with ExamplesHtml notes with Examples
Html notes with Examples
 
Html ppt
Html pptHtml ppt
Html ppt
 
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
 
Introduction to HTML and CSS
Introduction to HTML and CSSIntroduction to HTML and CSS
Introduction to HTML and CSS
 
Html links
Html linksHtml links
Html links
 
1 03 - CSS Introduction
1 03 - CSS Introduction1 03 - CSS Introduction
1 03 - CSS Introduction
 
Introduction to Cascading Style Sheets (CSS)
Introduction to Cascading Style Sheets (CSS)Introduction to Cascading Style Sheets (CSS)
Introduction to Cascading Style Sheets (CSS)
 
Html / CSS Presentation
Html / CSS PresentationHtml / CSS Presentation
Html / CSS Presentation
 
Introduction to html
Introduction to htmlIntroduction to html
Introduction to html
 
Basic HTML
Basic HTMLBasic HTML
Basic HTML
 
Introduction to HTML
Introduction to HTMLIntroduction to HTML
Introduction to HTML
 
Html
HtmlHtml
Html
 
Html project
Html projectHtml project
Html project
 
Introduction to HTML
Introduction to HTMLIntroduction to HTML
Introduction to HTML
 
HTML
HTMLHTML
HTML
 
Html training slide
Html training slideHtml training slide
Html training slide
 
Html coding
Html codingHtml coding
Html coding
 

Ähnlich wie HTML Introduction

Ähnlich wie HTML Introduction (20)

Html
HtmlHtml
Html
 
Html notes
Html notesHtml notes
Html notes
 
HTML Presentation
HTML Presentation HTML Presentation
HTML Presentation
 
htmlnotes-180924151434.pdf dafdkzndsvkdvdd
htmlnotes-180924151434.pdf dafdkzndsvkdvddhtmlnotes-180924151434.pdf dafdkzndsvkdvdd
htmlnotes-180924151434.pdf dafdkzndsvkdvdd
 
htmlnotes Which tells about all the basic
htmlnotes Which tells about all the basichtmlnotes Which tells about all the basic
htmlnotes Which tells about all the basic
 
Learn html from www
Learn html from wwwLearn html from www
Learn html from www
 
Learning html. (Part- 1)
Learning html. (Part- 1)Learning html. (Part- 1)
Learning html. (Part- 1)
 
SEO Training in Noida- Skyinfotech.in
SEO Training in Noida- Skyinfotech.inSEO Training in Noida- Skyinfotech.in
SEO Training in Noida- Skyinfotech.in
 
Html_Day_One (W3Schools)
Html_Day_One (W3Schools)Html_Day_One (W3Schools)
Html_Day_One (W3Schools)
 
Basic Html Notes
Basic Html NotesBasic Html Notes
Basic Html Notes
 
Html ppt by Fathima faculty Hasanath college for women bangalore
Html ppt by Fathima faculty Hasanath college for women bangaloreHtml ppt by Fathima faculty Hasanath college for women bangalore
Html ppt by Fathima faculty Hasanath college for women bangalore
 
Html example
Html exampleHtml example
Html example
 
Html basics NOTE
Html basics NOTEHtml basics NOTE
Html basics NOTE
 
Html basics
Html basicsHtml basics
Html basics
 
Basic Html Knowledge for students
Basic Html Knowledge for studentsBasic Html Knowledge for students
Basic Html Knowledge for students
 
HTML-Hyper Text Markup Language
HTML-Hyper Text Markup LanguageHTML-Hyper Text Markup Language
HTML-Hyper Text Markup Language
 
Introduction to html
Introduction to htmlIntroduction to html
Introduction to html
 
Htmlnotes 150323102005-conversion-gate01
Htmlnotes 150323102005-conversion-gate01Htmlnotes 150323102005-conversion-gate01
Htmlnotes 150323102005-conversion-gate01
 
Html
HtmlHtml
Html
 
Lecture 2 introduction to html
Lecture 2  introduction to htmlLecture 2  introduction to html
Lecture 2 introduction to html
 

Mehr von Jainul Musani

Mehr von Jainul Musani (20)

React js t8 - inlinecss
React js   t8 - inlinecssReact js   t8 - inlinecss
React js t8 - inlinecss
 
React js t7 - forms-events
React js   t7 - forms-eventsReact js   t7 - forms-events
React js t7 - forms-events
 
React js t6 -lifecycle
React js   t6 -lifecycleReact js   t6 -lifecycle
React js t6 -lifecycle
 
React js t5 - state
React js   t5 - stateReact js   t5 - state
React js t5 - state
 
React js t4 - components
React js   t4 - componentsReact js   t4 - components
React js t4 - components
 
React js t3 - es6
React js   t3 - es6React js   t3 - es6
React js t3 - es6
 
React js t2 - jsx
React js   t2 - jsxReact js   t2 - jsx
React js t2 - jsx
 
React js t1 - introduction
React js   t1 - introductionReact js   t1 - introduction
React js t1 - introduction
 
ExpressJs Session01
ExpressJs Session01ExpressJs Session01
ExpressJs Session01
 
NodeJs Session03
NodeJs Session03NodeJs Session03
NodeJs Session03
 
NodeJs Session02
NodeJs Session02NodeJs Session02
NodeJs Session02
 
Nodejs Session01
Nodejs Session01Nodejs Session01
Nodejs Session01
 
Java exercise1
Java exercise1Java exercise1
Java exercise1
 
Fundamentals of JDBC
Fundamentals of JDBCFundamentals of JDBC
Fundamentals of JDBC
 
Core Java Special
Core Java SpecialCore Java Special
Core Java Special
 
Core Java Special
Core Java SpecialCore Java Special
Core Java Special
 
Cassandra-vs-MongoDB
Cassandra-vs-MongoDBCassandra-vs-MongoDB
Cassandra-vs-MongoDB
 
MongoDB-SESSION03
MongoDB-SESSION03MongoDB-SESSION03
MongoDB-SESSION03
 
MongoDB-SESSION02
MongoDB-SESSION02MongoDB-SESSION02
MongoDB-SESSION02
 
MongoDB-SESION01
MongoDB-SESION01MongoDB-SESION01
MongoDB-SESION01
 

Kürzlich hochgeladen

Keynote by Prof. Wurzer at Nordex about IP-design
Keynote by Prof. Wurzer at Nordex about IP-designKeynote by Prof. Wurzer at Nordex about IP-design
Keynote by Prof. Wurzer at Nordex about IP-designMIPLM
 
Karra SKD Conference Presentation Revised.pptx
Karra SKD Conference Presentation Revised.pptxKarra SKD Conference Presentation Revised.pptx
Karra SKD Conference Presentation Revised.pptxAshokKarra1
 
Earth Day Presentation wow hello nice great
Earth Day Presentation wow hello nice greatEarth Day Presentation wow hello nice great
Earth Day Presentation wow hello nice greatYousafMalik24
 
ENGLISH 7_Q4_LESSON 2_ Employing a Variety of Strategies for Effective Interp...
ENGLISH 7_Q4_LESSON 2_ Employing a Variety of Strategies for Effective Interp...ENGLISH 7_Q4_LESSON 2_ Employing a Variety of Strategies for Effective Interp...
ENGLISH 7_Q4_LESSON 2_ Employing a Variety of Strategies for Effective Interp...JhezDiaz1
 
4.18.24 Movement Legacies, Reflection, and Review.pptx
4.18.24 Movement Legacies, Reflection, and Review.pptx4.18.24 Movement Legacies, Reflection, and Review.pptx
4.18.24 Movement Legacies, Reflection, and Review.pptxmary850239
 
Barangay Council for the Protection of Children (BCPC) Orientation.pptx
Barangay Council for the Protection of Children (BCPC) Orientation.pptxBarangay Council for the Protection of Children (BCPC) Orientation.pptx
Barangay Council for the Protection of Children (BCPC) Orientation.pptxCarlos105
 
HỌC TỐT TIẾNG ANH 11 THEO CHƯƠNG TRÌNH GLOBAL SUCCESS ĐÁP ÁN CHI TIẾT - CẢ NĂ...
HỌC TỐT TIẾNG ANH 11 THEO CHƯƠNG TRÌNH GLOBAL SUCCESS ĐÁP ÁN CHI TIẾT - CẢ NĂ...HỌC TỐT TIẾNG ANH 11 THEO CHƯƠNG TRÌNH GLOBAL SUCCESS ĐÁP ÁN CHI TIẾT - CẢ NĂ...
HỌC TỐT TIẾNG ANH 11 THEO CHƯƠNG TRÌNH GLOBAL SUCCESS ĐÁP ÁN CHI TIẾT - CẢ NĂ...Nguyen Thanh Tu Collection
 
Grade 9 Q4-MELC1-Active and Passive Voice.pptx
Grade 9 Q4-MELC1-Active and Passive Voice.pptxGrade 9 Q4-MELC1-Active and Passive Voice.pptx
Grade 9 Q4-MELC1-Active and Passive Voice.pptxChelloAnnAsuncion2
 
Field Attribute Index Feature in Odoo 17
Field Attribute Index Feature in Odoo 17Field Attribute Index Feature in Odoo 17
Field Attribute Index Feature in Odoo 17Celine George
 
GRADE 4 - SUMMATIVE TEST QUARTER 4 ALL SUBJECTS
GRADE 4 - SUMMATIVE TEST QUARTER 4 ALL SUBJECTSGRADE 4 - SUMMATIVE TEST QUARTER 4 ALL SUBJECTS
GRADE 4 - SUMMATIVE TEST QUARTER 4 ALL SUBJECTSJoshuaGantuangco2
 
AMERICAN LANGUAGE HUB_Level2_Student'sBook_Answerkey.pdf
AMERICAN LANGUAGE HUB_Level2_Student'sBook_Answerkey.pdfAMERICAN LANGUAGE HUB_Level2_Student'sBook_Answerkey.pdf
AMERICAN LANGUAGE HUB_Level2_Student'sBook_Answerkey.pdfphamnguyenenglishnb
 
Proudly South Africa powerpoint Thorisha.pptx
Proudly South Africa powerpoint Thorisha.pptxProudly South Africa powerpoint Thorisha.pptx
Proudly South Africa powerpoint Thorisha.pptxthorishapillay1
 
Incoming and Outgoing Shipments in 3 STEPS Using Odoo 17
Incoming and Outgoing Shipments in 3 STEPS Using Odoo 17Incoming and Outgoing Shipments in 3 STEPS Using Odoo 17
Incoming and Outgoing Shipments in 3 STEPS Using Odoo 17Celine George
 
DATA STRUCTURE AND ALGORITHM for beginners
DATA STRUCTURE AND ALGORITHM for beginnersDATA STRUCTURE AND ALGORITHM for beginners
DATA STRUCTURE AND ALGORITHM for beginnersSabitha Banu
 
ISYU TUNGKOL SA SEKSWLADIDA (ISSUE ABOUT SEXUALITY
ISYU TUNGKOL SA SEKSWLADIDA (ISSUE ABOUT SEXUALITYISYU TUNGKOL SA SEKSWLADIDA (ISSUE ABOUT SEXUALITY
ISYU TUNGKOL SA SEKSWLADIDA (ISSUE ABOUT SEXUALITYKayeClaireEstoconing
 
What is Model Inheritance in Odoo 17 ERP
What is Model Inheritance in Odoo 17 ERPWhat is Model Inheritance in Odoo 17 ERP
What is Model Inheritance in Odoo 17 ERPCeline George
 
Like-prefer-love -hate+verb+ing & silent letters & citizenship text.pdf
Like-prefer-love -hate+verb+ing & silent letters & citizenship text.pdfLike-prefer-love -hate+verb+ing & silent letters & citizenship text.pdf
Like-prefer-love -hate+verb+ing & silent letters & citizenship text.pdfMr Bounab Samir
 
USPS® Forced Meter Migration - How to Know if Your Postage Meter Will Soon be...
USPS® Forced Meter Migration - How to Know if Your Postage Meter Will Soon be...USPS® Forced Meter Migration - How to Know if Your Postage Meter Will Soon be...
USPS® Forced Meter Migration - How to Know if Your Postage Meter Will Soon be...Postal Advocate Inc.
 

Kürzlich hochgeladen (20)

Keynote by Prof. Wurzer at Nordex about IP-design
Keynote by Prof. Wurzer at Nordex about IP-designKeynote by Prof. Wurzer at Nordex about IP-design
Keynote by Prof. Wurzer at Nordex about IP-design
 
Karra SKD Conference Presentation Revised.pptx
Karra SKD Conference Presentation Revised.pptxKarra SKD Conference Presentation Revised.pptx
Karra SKD Conference Presentation Revised.pptx
 
Earth Day Presentation wow hello nice great
Earth Day Presentation wow hello nice greatEarth Day Presentation wow hello nice great
Earth Day Presentation wow hello nice great
 
ENGLISH 7_Q4_LESSON 2_ Employing a Variety of Strategies for Effective Interp...
ENGLISH 7_Q4_LESSON 2_ Employing a Variety of Strategies for Effective Interp...ENGLISH 7_Q4_LESSON 2_ Employing a Variety of Strategies for Effective Interp...
ENGLISH 7_Q4_LESSON 2_ Employing a Variety of Strategies for Effective Interp...
 
4.18.24 Movement Legacies, Reflection, and Review.pptx
4.18.24 Movement Legacies, Reflection, and Review.pptx4.18.24 Movement Legacies, Reflection, and Review.pptx
4.18.24 Movement Legacies, Reflection, and Review.pptx
 
Barangay Council for the Protection of Children (BCPC) Orientation.pptx
Barangay Council for the Protection of Children (BCPC) Orientation.pptxBarangay Council for the Protection of Children (BCPC) Orientation.pptx
Barangay Council for the Protection of Children (BCPC) Orientation.pptx
 
FINALS_OF_LEFT_ON_C'N_EL_DORADO_2024.pptx
FINALS_OF_LEFT_ON_C'N_EL_DORADO_2024.pptxFINALS_OF_LEFT_ON_C'N_EL_DORADO_2024.pptx
FINALS_OF_LEFT_ON_C'N_EL_DORADO_2024.pptx
 
HỌC TỐT TIẾNG ANH 11 THEO CHƯƠNG TRÌNH GLOBAL SUCCESS ĐÁP ÁN CHI TIẾT - CẢ NĂ...
HỌC TỐT TIẾNG ANH 11 THEO CHƯƠNG TRÌNH GLOBAL SUCCESS ĐÁP ÁN CHI TIẾT - CẢ NĂ...HỌC TỐT TIẾNG ANH 11 THEO CHƯƠNG TRÌNH GLOBAL SUCCESS ĐÁP ÁN CHI TIẾT - CẢ NĂ...
HỌC TỐT TIẾNG ANH 11 THEO CHƯƠNG TRÌNH GLOBAL SUCCESS ĐÁP ÁN CHI TIẾT - CẢ NĂ...
 
Grade 9 Q4-MELC1-Active and Passive Voice.pptx
Grade 9 Q4-MELC1-Active and Passive Voice.pptxGrade 9 Q4-MELC1-Active and Passive Voice.pptx
Grade 9 Q4-MELC1-Active and Passive Voice.pptx
 
Field Attribute Index Feature in Odoo 17
Field Attribute Index Feature in Odoo 17Field Attribute Index Feature in Odoo 17
Field Attribute Index Feature in Odoo 17
 
GRADE 4 - SUMMATIVE TEST QUARTER 4 ALL SUBJECTS
GRADE 4 - SUMMATIVE TEST QUARTER 4 ALL SUBJECTSGRADE 4 - SUMMATIVE TEST QUARTER 4 ALL SUBJECTS
GRADE 4 - SUMMATIVE TEST QUARTER 4 ALL SUBJECTS
 
AMERICAN LANGUAGE HUB_Level2_Student'sBook_Answerkey.pdf
AMERICAN LANGUAGE HUB_Level2_Student'sBook_Answerkey.pdfAMERICAN LANGUAGE HUB_Level2_Student'sBook_Answerkey.pdf
AMERICAN LANGUAGE HUB_Level2_Student'sBook_Answerkey.pdf
 
Proudly South Africa powerpoint Thorisha.pptx
Proudly South Africa powerpoint Thorisha.pptxProudly South Africa powerpoint Thorisha.pptx
Proudly South Africa powerpoint Thorisha.pptx
 
Incoming and Outgoing Shipments in 3 STEPS Using Odoo 17
Incoming and Outgoing Shipments in 3 STEPS Using Odoo 17Incoming and Outgoing Shipments in 3 STEPS Using Odoo 17
Incoming and Outgoing Shipments in 3 STEPS Using Odoo 17
 
DATA STRUCTURE AND ALGORITHM for beginners
DATA STRUCTURE AND ALGORITHM for beginnersDATA STRUCTURE AND ALGORITHM for beginners
DATA STRUCTURE AND ALGORITHM for beginners
 
Raw materials used in Herbal Cosmetics.pptx
Raw materials used in Herbal Cosmetics.pptxRaw materials used in Herbal Cosmetics.pptx
Raw materials used in Herbal Cosmetics.pptx
 
ISYU TUNGKOL SA SEKSWLADIDA (ISSUE ABOUT SEXUALITY
ISYU TUNGKOL SA SEKSWLADIDA (ISSUE ABOUT SEXUALITYISYU TUNGKOL SA SEKSWLADIDA (ISSUE ABOUT SEXUALITY
ISYU TUNGKOL SA SEKSWLADIDA (ISSUE ABOUT SEXUALITY
 
What is Model Inheritance in Odoo 17 ERP
What is Model Inheritance in Odoo 17 ERPWhat is Model Inheritance in Odoo 17 ERP
What is Model Inheritance in Odoo 17 ERP
 
Like-prefer-love -hate+verb+ing & silent letters & citizenship text.pdf
Like-prefer-love -hate+verb+ing & silent letters & citizenship text.pdfLike-prefer-love -hate+verb+ing & silent letters & citizenship text.pdf
Like-prefer-love -hate+verb+ing & silent letters & citizenship text.pdf
 
USPS® Forced Meter Migration - How to Know if Your Postage Meter Will Soon be...
USPS® Forced Meter Migration - How to Know if Your Postage Meter Will Soon be...USPS® Forced Meter Migration - How to Know if Your Postage Meter Will Soon be...
USPS® Forced Meter Migration - How to Know if Your Postage Meter Will Soon be...
 

HTML Introduction

  • 1. HTML • Language for describing web pages. • Hyper Text Markup Language • Its not a programming language, it is a markup language • A markup language is a set of markup tags
  • 2. HTML Tags • HTML markup tags = HTML tags • Keywords surrounded by angle brackets like <html> • Normally come in pairs like <b> and </b> • The first tag in a pair is the start tag (opening tag) and the second tag is the end tag (closing tag)
  • 3. HTML Pages • HTML Documents = Web Pages • HTML documents describe web pages • HTML documents contain HTML tags and plain text • HTML documents are also called web pages
  • 4. Browser • The purpose of a web browser (like Internet Explorer or Firefox) is to read HTML documents and display them as web pages. • The browser does not display the HTML tags, but uses the tags to interpret the content of the page
  • 5. Browser • <html> <body> <h1>My First Heading</h1> <p>My first paragraph</p> </body> </html>
  • 6. HTML Editor • A simple text editor can be use to write html tags. • HTM or HTML extension can be use.
  • 7. Heading Tags <h1> This is heading 1 </h1> <h2> This is heading 2 </h2> <h3> This is heading 3 </h3> <h4> This is heading 4 </h4> <h5> This is heading 5 </h5> <h6> This is heading 6 </h6>
  • 8. Paragraph Tags <html> <body> <p>This is a paragraph.</p> <p>This is a paragraph.</p> <p>This is a paragraph.</p> </body> </html>
  • 9. Anchor Tags <html> <body> <a href="http://www.jetskill.com"> This is a link</a> </body> </html> This is a link
  • 11. Empty HTML Elements HTML elements without content are called empty elements. Empty elements can be closed in the start tag. <br> is an empty element without a closing tag (it defines a line break).
  • 12. Empty HTML Elements In XHTML, XML, and future versions of HTML, all elements must be closed. Adding a slash to the start tag, like <br/>, is the proper way of closing empty elements, accepted by HTML, XHTML and XML.
  • 13. Lowercase Tags HTML tags are not case sensitive: <P> means the same as <p>. Plenty of web sites use uppercase HTML tags in their pages. the World Wide Web Consortium (W3C) recommends lowercase in HTML 4, and demands lowercase tags in future versions of (X)HTML.
  • 14. HTML Attributes • HTML elements can have attributes • Attributes provide additional information about the element • Attributes are always specified in the start tag • Attributes come in name/value pairs like: name="value"
  • 15. HTML Attributes <body bgcolor="#E6E6FA"> <font face="verdana" size="2" color="blue"> This is some text! </font>
  • 16. Text Formatting <p><b>This text is bold</b></p> This text is bold <p><big>This text is big</big></p> This text is big <p><i>This text is italic</i></p> This text is italic
  • 17. Text Formatting <code>This is computer output</code> This is computer output This is<sub> subscript</sub> and <sup>superscript</sup> This is subscript and superscript