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)

CSS
CSSCSS
CSS
 
Basic HTML
Basic HTMLBasic HTML
Basic HTML
 
Introduction to html
Introduction to htmlIntroduction to html
Introduction to html
 
Css
CssCss
Css
 
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 Text formatting tags
HTML Text formatting tagsHTML Text formatting tags
HTML Text formatting tags
 
Html
HtmlHtml
Html
 
(Fast) Introduction to HTML & CSS
(Fast) Introduction to HTML & CSS (Fast) Introduction to HTML & CSS
(Fast) Introduction to HTML & CSS
 
HTML Introduction
HTML IntroductionHTML Introduction
HTML Introduction
 
Html
HtmlHtml
Html
 
Html basics
Html basicsHtml basics
Html basics
 
BasicHTML
BasicHTMLBasicHTML
BasicHTML
 
1. HTML
1. HTML1. HTML
1. HTML
 
Intro to HTML and CSS basics
Intro to HTML and CSS basicsIntro to HTML and CSS basics
Intro to HTML and CSS basics
 
Introduction to HTML and CSS
Introduction to HTML and CSSIntroduction to HTML and CSS
Introduction to HTML and CSS
 
Basic html structure
Basic html structureBasic html structure
Basic html structure
 
Html & CSS
Html & CSSHtml & CSS
Html & CSS
 
Html and css presentation
Html and css presentationHtml and css presentation
Html and css presentation
 
Basic-CSS-tutorial
Basic-CSS-tutorialBasic-CSS-tutorial
Basic-CSS-tutorial
 
Cascading Style Sheet
Cascading Style SheetCascading Style Sheet
Cascading Style Sheet
 

Ä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)
 
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
 
Introduction to HTML
Introduction to HTMLIntroduction to HTML
Introduction to HTML
 
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
 
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
 
html.pptx
html.pptxhtml.pptx
html.pptx
 

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

The basics of sentences session 2pptx copy.pptx
The basics of sentences session 2pptx copy.pptxThe basics of sentences session 2pptx copy.pptx
The basics of sentences session 2pptx copy.pptxheathfieldcps1
 
Key note speaker Neum_Admir Softic_ENG.pdf
Key note speaker Neum_Admir Softic_ENG.pdfKey note speaker Neum_Admir Softic_ENG.pdf
Key note speaker Neum_Admir Softic_ENG.pdfAdmir Softic
 
Sociology 101 Demonstration of Learning Exhibit
Sociology 101 Demonstration of Learning ExhibitSociology 101 Demonstration of Learning Exhibit
Sociology 101 Demonstration of Learning Exhibitjbellavia9
 
Unit-IV- Pharma. Marketing Channels.pptx
Unit-IV- Pharma. Marketing Channels.pptxUnit-IV- Pharma. Marketing Channels.pptx
Unit-IV- Pharma. Marketing Channels.pptxVishalSingh1417
 
General Principles of Intellectual Property: Concepts of Intellectual Proper...
General Principles of Intellectual Property: Concepts of Intellectual  Proper...General Principles of Intellectual Property: Concepts of Intellectual  Proper...
General Principles of Intellectual Property: Concepts of Intellectual Proper...Poonam Aher Patil
 
PROCESS RECORDING FORMAT.docx
PROCESS      RECORDING        FORMAT.docxPROCESS      RECORDING        FORMAT.docx
PROCESS RECORDING FORMAT.docxPoojaSen20
 
Micro-Scholarship, What it is, How can it help me.pdf
Micro-Scholarship, What it is, How can it help me.pdfMicro-Scholarship, What it is, How can it help me.pdf
Micro-Scholarship, What it is, How can it help me.pdfPoh-Sun Goh
 
Beyond the EU: DORA and NIS 2 Directive's Global Impact
Beyond the EU: DORA and NIS 2 Directive's Global ImpactBeyond the EU: DORA and NIS 2 Directive's Global Impact
Beyond the EU: DORA and NIS 2 Directive's Global ImpactPECB
 
Z Score,T Score, Percential Rank and Box Plot Graph
Z Score,T Score, Percential Rank and Box Plot GraphZ Score,T Score, Percential Rank and Box Plot Graph
Z Score,T Score, Percential Rank and Box Plot GraphThiyagu K
 
Python Notes for mca i year students osmania university.docx
Python Notes for mca i year students osmania university.docxPython Notes for mca i year students osmania university.docx
Python Notes for mca i year students osmania university.docxRamakrishna Reddy Bijjam
 
ICT role in 21st century education and it's challenges.
ICT role in 21st century education and it's challenges.ICT role in 21st century education and it's challenges.
ICT role in 21st century education and it's challenges.MaryamAhmad92
 
Activity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdfActivity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdfciinovamais
 
microwave assisted reaction. General introduction
microwave assisted reaction. General introductionmicrowave assisted reaction. General introduction
microwave assisted reaction. General introductionMaksud Ahmed
 
Unit-V; Pricing (Pharma Marketing Management).pptx
Unit-V; Pricing (Pharma Marketing Management).pptxUnit-V; Pricing (Pharma Marketing Management).pptx
Unit-V; Pricing (Pharma Marketing Management).pptxVishalSingh1417
 
Russian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in Delhi
Russian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in DelhiRussian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in Delhi
Russian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in Delhikauryashika82
 
Mixin Classes in Odoo 17 How to Extend Models Using Mixin Classes
Mixin Classes in Odoo 17  How to Extend Models Using Mixin ClassesMixin Classes in Odoo 17  How to Extend Models Using Mixin Classes
Mixin Classes in Odoo 17 How to Extend Models Using Mixin ClassesCeline George
 
Holdier Curriculum Vitae (April 2024).pdf
Holdier Curriculum Vitae (April 2024).pdfHoldier Curriculum Vitae (April 2024).pdf
Holdier Curriculum Vitae (April 2024).pdfagholdier
 
The basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptxThe basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptxheathfieldcps1
 

Kürzlich hochgeladen (20)

INDIA QUIZ 2024 RLAC DELHI UNIVERSITY.pptx
INDIA QUIZ 2024 RLAC DELHI UNIVERSITY.pptxINDIA QUIZ 2024 RLAC DELHI UNIVERSITY.pptx
INDIA QUIZ 2024 RLAC DELHI UNIVERSITY.pptx
 
The basics of sentences session 2pptx copy.pptx
The basics of sentences session 2pptx copy.pptxThe basics of sentences session 2pptx copy.pptx
The basics of sentences session 2pptx copy.pptx
 
Key note speaker Neum_Admir Softic_ENG.pdf
Key note speaker Neum_Admir Softic_ENG.pdfKey note speaker Neum_Admir Softic_ENG.pdf
Key note speaker Neum_Admir Softic_ENG.pdf
 
Sociology 101 Demonstration of Learning Exhibit
Sociology 101 Demonstration of Learning ExhibitSociology 101 Demonstration of Learning Exhibit
Sociology 101 Demonstration of Learning Exhibit
 
Unit-IV- Pharma. Marketing Channels.pptx
Unit-IV- Pharma. Marketing Channels.pptxUnit-IV- Pharma. Marketing Channels.pptx
Unit-IV- Pharma. Marketing Channels.pptx
 
General Principles of Intellectual Property: Concepts of Intellectual Proper...
General Principles of Intellectual Property: Concepts of Intellectual  Proper...General Principles of Intellectual Property: Concepts of Intellectual  Proper...
General Principles of Intellectual Property: Concepts of Intellectual Proper...
 
PROCESS RECORDING FORMAT.docx
PROCESS      RECORDING        FORMAT.docxPROCESS      RECORDING        FORMAT.docx
PROCESS RECORDING FORMAT.docx
 
Micro-Scholarship, What it is, How can it help me.pdf
Micro-Scholarship, What it is, How can it help me.pdfMicro-Scholarship, What it is, How can it help me.pdf
Micro-Scholarship, What it is, How can it help me.pdf
 
Beyond the EU: DORA and NIS 2 Directive's Global Impact
Beyond the EU: DORA and NIS 2 Directive's Global ImpactBeyond the EU: DORA and NIS 2 Directive's Global Impact
Beyond the EU: DORA and NIS 2 Directive's Global Impact
 
Z Score,T Score, Percential Rank and Box Plot Graph
Z Score,T Score, Percential Rank and Box Plot GraphZ Score,T Score, Percential Rank and Box Plot Graph
Z Score,T Score, Percential Rank and Box Plot Graph
 
Python Notes for mca i year students osmania university.docx
Python Notes for mca i year students osmania university.docxPython Notes for mca i year students osmania university.docx
Python Notes for mca i year students osmania university.docx
 
ICT role in 21st century education and it's challenges.
ICT role in 21st century education and it's challenges.ICT role in 21st century education and it's challenges.
ICT role in 21st century education and it's challenges.
 
Activity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdfActivity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdf
 
microwave assisted reaction. General introduction
microwave assisted reaction. General introductionmicrowave assisted reaction. General introduction
microwave assisted reaction. General introduction
 
Unit-V; Pricing (Pharma Marketing Management).pptx
Unit-V; Pricing (Pharma Marketing Management).pptxUnit-V; Pricing (Pharma Marketing Management).pptx
Unit-V; Pricing (Pharma Marketing Management).pptx
 
Russian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in Delhi
Russian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in DelhiRussian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in Delhi
Russian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in Delhi
 
Asian American Pacific Islander Month DDSD 2024.pptx
Asian American Pacific Islander Month DDSD 2024.pptxAsian American Pacific Islander Month DDSD 2024.pptx
Asian American Pacific Islander Month DDSD 2024.pptx
 
Mixin Classes in Odoo 17 How to Extend Models Using Mixin Classes
Mixin Classes in Odoo 17  How to Extend Models Using Mixin ClassesMixin Classes in Odoo 17  How to Extend Models Using Mixin Classes
Mixin Classes in Odoo 17 How to Extend Models Using Mixin Classes
 
Holdier Curriculum Vitae (April 2024).pdf
Holdier Curriculum Vitae (April 2024).pdfHoldier Curriculum Vitae (April 2024).pdf
Holdier Curriculum Vitae (April 2024).pdf
 
The basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptxThe basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptx
 

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