SlideShare uma empresa Scribd logo
1 de 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

Mais conteúdo relacionado

Mais procurados

Html notes with Examples
Html notes with ExamplesHtml notes with Examples
Html notes with Examples
isha
 

Mais procurados (20)

HTML CSS JS in Nut shell
HTML  CSS JS in Nut shellHTML  CSS JS in Nut shell
HTML CSS JS in Nut shell
 
The Complete HTML
The Complete HTMLThe Complete HTML
The Complete HTML
 
Basic Html Notes
Basic Html NotesBasic Html Notes
Basic Html Notes
 
Html
HtmlHtml
Html
 
How to learn HTML in 10 Days
How to learn HTML in 10 DaysHow to learn HTML in 10 Days
How to learn HTML in 10 Days
 
Introduction to Javascript
Introduction to JavascriptIntroduction to Javascript
Introduction to Javascript
 
Html
HtmlHtml
Html
 
Introduction To PHP
Introduction To PHPIntroduction To PHP
Introduction To PHP
 
HTML, CSS and Java Scripts Basics
HTML, CSS and Java Scripts BasicsHTML, CSS and Java Scripts Basics
HTML, CSS and Java Scripts Basics
 
Basic HTML
Basic HTMLBasic HTML
Basic HTML
 
Bootstrap 5 basic
Bootstrap 5 basicBootstrap 5 basic
Bootstrap 5 basic
 
cascading style sheet ppt
cascading style sheet pptcascading style sheet ppt
cascading style sheet ppt
 
Lab #2: Introduction to Javascript
Lab #2: Introduction to JavascriptLab #2: Introduction to Javascript
Lab #2: Introduction to Javascript
 
Introduction to back-end
Introduction to back-endIntroduction to back-end
Introduction to back-end
 
Html1
Html1Html1
Html1
 
Html notes with Examples
Html notes with ExamplesHtml notes with Examples
Html notes with Examples
 
Javascript
JavascriptJavascript
Javascript
 
Introduction to html 5
Introduction to html 5Introduction to html 5
Introduction to html 5
 
Html5 semantics
Html5 semanticsHtml5 semantics
Html5 semantics
 
Html5 Basics
Html5 BasicsHtml5 Basics
Html5 Basics
 

Semelhante a HTML Introduction

htmlnotes-180924151434.pdf dafdkzndsvkdvdd
htmlnotes-180924151434.pdf dafdkzndsvkdvddhtmlnotes-180924151434.pdf dafdkzndsvkdvdd
htmlnotes-180924151434.pdf dafdkzndsvkdvdd
hemanthkalyan25
 
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
hemanthkalyan25
 

Semelhante a 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
 
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
 

Mais de Jainul Musani

Mais de 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
 

Último

Making and Justifying Mathematical Decisions.pdf
Making and Justifying Mathematical Decisions.pdfMaking and Justifying Mathematical Decisions.pdf
Making and Justifying Mathematical Decisions.pdf
Chris Hunter
 
An Overview of Mutual Funds Bcom Project.pdf
An Overview of Mutual Funds Bcom Project.pdfAn Overview of Mutual Funds Bcom Project.pdf
An Overview of Mutual Funds Bcom Project.pdf
SanaAli374401
 
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
PECB
 

Último (20)

Measures of Dispersion and Variability: Range, QD, AD and SD
Measures of Dispersion and Variability: Range, QD, AD and SDMeasures of Dispersion and Variability: Range, QD, AD and SD
Measures of Dispersion and Variability: Range, QD, AD and SD
 
Advanced Views - Calendar View in Odoo 17
Advanced Views - Calendar View in Odoo 17Advanced Views - Calendar View in Odoo 17
Advanced Views - Calendar View in Odoo 17
 
Making and Justifying Mathematical Decisions.pdf
Making and Justifying Mathematical Decisions.pdfMaking and Justifying Mathematical Decisions.pdf
Making and Justifying Mathematical Decisions.pdf
 
Código Creativo y Arte de Software | Unidad 1
Código Creativo y Arte de Software | Unidad 1Código Creativo y Arte de Software | Unidad 1
Código Creativo y Arte de Software | Unidad 1
 
microwave assisted reaction. General introduction
microwave assisted reaction. General introductionmicrowave assisted reaction. General introduction
microwave assisted reaction. General introduction
 
Ecological Succession. ( ECOSYSTEM, B. Pharmacy, 1st Year, Sem-II, Environmen...
Ecological Succession. ( ECOSYSTEM, B. Pharmacy, 1st Year, Sem-II, Environmen...Ecological Succession. ( ECOSYSTEM, B. Pharmacy, 1st Year, Sem-II, Environmen...
Ecological Succession. ( ECOSYSTEM, B. Pharmacy, 1st Year, Sem-II, Environmen...
 
Application orientated numerical on hev.ppt
Application orientated numerical on hev.pptApplication orientated numerical on hev.ppt
Application orientated numerical on hev.ppt
 
Accessible design: Minimum effort, maximum impact
Accessible design: Minimum effort, maximum impactAccessible design: Minimum effort, maximum impact
Accessible design: Minimum effort, maximum impact
 
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
 
An Overview of Mutual Funds Bcom Project.pdf
An Overview of Mutual Funds Bcom Project.pdfAn Overview of Mutual Funds Bcom Project.pdf
An Overview of Mutual Funds Bcom Project.pdf
 
Basic Civil Engineering first year Notes- Chapter 4 Building.pptx
Basic Civil Engineering first year Notes- Chapter 4 Building.pptxBasic Civil Engineering first year Notes- Chapter 4 Building.pptx
Basic Civil Engineering first year Notes- Chapter 4 Building.pptx
 
APM Welcome, APM North West Network Conference, Synergies Across Sectors
APM Welcome, APM North West Network Conference, Synergies Across SectorsAPM Welcome, APM North West Network Conference, Synergies Across Sectors
APM Welcome, APM North West Network Conference, Synergies Across Sectors
 
Web & Social Media Analytics Previous Year Question Paper.pdf
Web & Social Media Analytics Previous Year Question Paper.pdfWeb & Social Media Analytics Previous Year Question Paper.pdf
Web & Social Media Analytics Previous Year Question Paper.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
 
Nutritional Needs Presentation - HLTH 104
Nutritional Needs Presentation - HLTH 104Nutritional Needs Presentation - HLTH 104
Nutritional Needs Presentation - HLTH 104
 
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
 
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
 
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
 
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptxSOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
 
Measures of Central Tendency: Mean, Median and Mode
Measures of Central Tendency: Mean, Median and ModeMeasures of Central Tendency: Mean, Median and Mode
Measures of Central Tendency: Mean, Median and Mode
 

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