SlideShare une entreprise Scribd logo
1  sur  13
By: Miguel A. Martínez
Course: Principios Tecnológicos
Table of Contents
 What is HTML?
 What is the difference between a
  programming language and a
  markup language?
 How does HTML work?
 Tags and Attributes
 Making your first simple web page
What is HTML?

 HTML stands   for Hyper Text Markup
  Language
 It is a computer language that is used to
  create web sites.
 A web site is created by many lines of
  short codes using this language.
 With a web browser, the .html document
  can be seen as the web site that was
  formed by the numerous line of code.
 HyperText   is the method by which
  you move around on the web —
  by clicking on special text
  called hyperlinks which bring
  you to the next page.
 Click Here
 Markup    is what HTML
  tags do to the text inside
  them. They mark it as a
  certain type of text
  (italicized text, for example).
 HTML is a Language, as it
  has code-words and syntax
  like any other language.
What is the difference between
a programming language and a
markup language?
 Markup  language by its definition “is
 a modern system for annotating a
 text in a way that is syntactically
 distinguishable from that text." For
 example, in HTML, you have your
 text. Then you have your Hyper Text
 Markup Language which defines
 how that text should look.
 Programming  language is designed
 to communicate instructions to a
 computer. So the main difference is
 that programming languages are
 designed to write programs and
 software. A markup language is
 designed to manipulate the content
 it's marking up, hence the term
 Markup Language.
How does HTML work?
 The   HTML documents known by the
  file type .html or .htm are composed
  of its elements. These are its tags
  and its plain text.
 Tags are what separate normal text
  from HTML text.
 These tags are keywords
  surrounded by angle brackets like
  so: <html>.
Tags and Attributes
 HTML tags   come in pairs, their
  opening tags and their closing tags,
  like so: <p> </p>.
 The start and end tags are what
  define a certain effect on the web
  page, and what is written between
  them is what the start and end tags
  make an effect on.
 Exception: Only has opening tags:
  some can only be like so: <br>.
 Attributes  provide additional
  information about the element.
 They are specified in the start tag
  with a name and its value, like so:
  <a
  href="http://www.w3schools.com">T
  his is a link</a>
Making your first simple web
    page
   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
    4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
      <title>My First HTML Page</title>
    </head>
    <body>
      My text goes here.
    </body>
    </html>
References
   http://en.wikipedia.org/wiki/HTML#Markup
   http://www.w3schools.com
   http://www.yourhtmlsource.com
   http://www.web-
    source.net/html_codes_chart.htm
   http://en.wikipedia.org/wiki/Programming_l
    anguage
   http://en.wikipedia.org/wiki/Markup_langua
    ges

Contenu connexe

Tendances (20)

Basic knowledge on html and dhtml
 Basic knowledge on html and dhtml Basic knowledge on html and dhtml
Basic knowledge on html and dhtml
 
Html tag
Html tagHtml tag
Html tag
 
The Difference between HTML, XHTML & HTML5 for Beginners
The Difference between HTML, XHTML & HTML5 for BeginnersThe Difference between HTML, XHTML & HTML5 for Beginners
The Difference between HTML, XHTML & HTML5 for Beginners
 
Html lecture1
Html lecture1Html lecture1
Html lecture1
 
Lecture 2 introduction to html basics
Lecture 2 introduction to html basicsLecture 2 introduction to html basics
Lecture 2 introduction to html basics
 
Html basic
Html basicHtml basic
Html basic
 
INTRODUCTION TO HTML
INTRODUCTION TO HTMLINTRODUCTION TO HTML
INTRODUCTION TO HTML
 
HTML and DHTML
HTML and DHTMLHTML and DHTML
HTML and DHTML
 
Basic HTML
Basic HTMLBasic HTML
Basic HTML
 
Html
HtmlHtml
Html
 
HTML- Hyper Text Markup Language
HTML- Hyper Text Markup LanguageHTML- Hyper Text Markup Language
HTML- Hyper Text Markup Language
 
Html for beginners part I
Html for beginners part IHtml for beginners part I
Html for beginners part I
 
HTML (Hyper Text Markup Language)
HTML (Hyper Text Markup Language)HTML (Hyper Text Markup Language)
HTML (Hyper Text Markup Language)
 
[Basic HTML/CSS] 1. html - basic tags
[Basic HTML/CSS] 1. html - basic tags[Basic HTML/CSS] 1. html - basic tags
[Basic HTML/CSS] 1. html - basic tags
 
What Is Html
What Is HtmlWhat Is Html
What Is Html
 
Html
HtmlHtml
Html
 
Class2
Class2Class2
Class2
 
HTML5 and DHTML
HTML5 and DHTMLHTML5 and DHTML
HTML5 and DHTML
 
Hyper Text Mark-up Language
Hyper Text Mark-up Language Hyper Text Mark-up Language
Hyper Text Mark-up Language
 
HTML
HTMLHTML
HTML
 

En vedette

En vedette (19)

1989 -como interpretar un plano
1989  -como interpretar un plano1989  -como interpretar un plano
1989 -como interpretar un plano
 
时尚品分享社区调研分析
时尚品分享社区调研分析时尚品分享社区调研分析
时尚品分享社区调研分析
 
Tieng anh chuyen_nganh_cntt_-_ly_thuyet
Tieng anh chuyen_nganh_cntt_-_ly_thuyetTieng anh chuyen_nganh_cntt_-_ly_thuyet
Tieng anh chuyen_nganh_cntt_-_ly_thuyet
 
Proyecto
ProyectoProyecto
Proyecto
 
Green presentation complate
Green presentation complate Green presentation complate
Green presentation complate
 
шаблон презентации результатов работы
шаблон презентации результатов работышаблон презентации результатов работы
шаблон презентации результатов работы
 
100 cau gioi_tu_dap_an_9373(1)
100 cau gioi_tu_dap_an_9373(1)100 cau gioi_tu_dap_an_9373(1)
100 cau gioi_tu_dap_an_9373(1)
 
Cèsar Manjarrez
Cèsar ManjarrezCèsar Manjarrez
Cèsar Manjarrez
 
To be print_all
To be print_allTo be print_all
To be print_all
 
Omni Intro
Omni IntroOmni Intro
Omni Intro
 
Fabricio Arèvalo
Fabricio ArèvaloFabricio Arèvalo
Fabricio Arèvalo
 
шаблон презентации результатов работы
шаблон презентации результатов работышаблон презентации результатов работы
шаблон презентации результатов работы
 
The Present Perfect Tense
The Present Perfect TenseThe Present Perfect Tense
The Present Perfect Tense
 
Leer es mi cuento
Leer es mi cuentoLeer es mi cuento
Leer es mi cuento
 
Causatives
CausativesCausatives
Causatives
 
Cayley Aerospace Inc USA
Cayley Aerospace Inc USACayley Aerospace Inc USA
Cayley Aerospace Inc USA
 
historia-de-enfermeria
 historia-de-enfermeria historia-de-enfermeria
historia-de-enfermeria
 
The verb be in the past (was and were)
The verb be in the past (was and were)The verb be in the past (was and were)
The verb be in the past (was and were)
 
NRF 2017 : Compte-rendu et analyse signés Niji
NRF 2017 : Compte-rendu et analyse signés Niji NRF 2017 : Compte-rendu et analyse signés Niji
NRF 2017 : Compte-rendu et analyse signés Niji
 

Similaire à HTML Intro: Understanding Markup Language Basics

Introduction to HTML
Introduction to HTMLIntroduction to HTML
Introduction to HTMLMayaLisa
 
HTML element is everything between the start tag and the end tag
HTML element is everything between the start tag and the end tagHTML element is everything between the start tag and the end tag
HTML element is everything between the start tag and the end tagssuser6478a8
 
HTML & JAVA Script
HTML & JAVA ScriptHTML & JAVA Script
HTML & JAVA ScriptNitesh Gupta
 
Html for Beginners
Html for BeginnersHtml for Beginners
Html for BeginnersSriram Raj
 
Web Engineering UNIT III as per RGPV Syllabus
Web Engineering UNIT III as per RGPV SyllabusWeb Engineering UNIT III as per RGPV Syllabus
Web Engineering UNIT III as per RGPV SyllabusNANDINI SHARMA
 
Computer fundamentals-internet p2
Computer fundamentals-internet p2Computer fundamentals-internet p2
Computer fundamentals-internet p2Leo Mark Villar
 
Internet programming notes
Internet programming notesInternet programming notes
Internet programming notesDurgadevi palani
 
1 introduction to html
1 introduction to html1 introduction to html
1 introduction to htmlmyrajendra
 
Web Designing Training in Ambala ! BATRA COMPUTER CENTRE
Web Designing Training in Ambala ! BATRA COMPUTER CENTREWeb Designing Training in Ambala ! BATRA COMPUTER CENTRE
Web Designing Training in Ambala ! BATRA COMPUTER CENTREjatin batra
 
Web engineering notes unit 3
Web engineering notes unit 3Web engineering notes unit 3
Web engineering notes unit 3inshu1890
 

Similaire à HTML Intro: Understanding Markup Language Basics (20)

Introduction to HTML
Introduction to HTMLIntroduction to HTML
Introduction to HTML
 
Html
HtmlHtml
Html
 
HTML element is everything between the start tag and the end tag
HTML element is everything between the start tag and the end tagHTML element is everything between the start tag and the end tag
HTML element is everything between the start tag and the end tag
 
HTML & JAVA Script
HTML & JAVA ScriptHTML & JAVA Script
HTML & JAVA Script
 
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
 
Html for Beginners
Html for BeginnersHtml for Beginners
Html for Beginners
 
Web Engineering UNIT III as per RGPV Syllabus
Web Engineering UNIT III as per RGPV SyllabusWeb Engineering UNIT III as per RGPV Syllabus
Web Engineering UNIT III as per RGPV Syllabus
 
Computer fundamentals-internet p2
Computer fundamentals-internet p2Computer fundamentals-internet p2
Computer fundamentals-internet p2
 
Web Designing
Web DesigningWeb Designing
Web Designing
 
Html - Tutorial
Html - TutorialHtml - Tutorial
Html - Tutorial
 
Internet programming notes
Internet programming notesInternet programming notes
Internet programming notes
 
1 introduction to html
1 introduction to html1 introduction to html
1 introduction to html
 
WHAT IS HTML.pdf
WHAT IS HTML.pdfWHAT IS HTML.pdf
WHAT IS HTML.pdf
 
WHAT IS HTML.pdf
WHAT IS HTML.pdfWHAT IS HTML.pdf
WHAT IS HTML.pdf
 
WHAT IS HTML.pdf
WHAT IS HTML.pdfWHAT IS HTML.pdf
WHAT IS HTML.pdf
 
Over view of html
Over view of htmlOver view of html
Over view of html
 
Web Designing Training in Ambala ! BATRA COMPUTER CENTRE
Web Designing Training in Ambala ! BATRA COMPUTER CENTREWeb Designing Training in Ambala ! BATRA COMPUTER CENTRE
Web Designing Training in Ambala ! BATRA COMPUTER CENTRE
 
Introduction to HTML.pptx
Introduction to HTML.pptxIntroduction to HTML.pptx
Introduction to HTML.pptx
 
Web engineering notes unit 3
Web engineering notes unit 3Web engineering notes unit 3
Web engineering notes unit 3
 
introdution-to-html.ppt
introdution-to-html.pptintrodution-to-html.ppt
introdution-to-html.ppt
 

Dernier

Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)wesley chun
 
[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
 
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfThe Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfEnterprise Knowledge
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationSafe Software
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘RTylerCroy
 
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
 
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking MenDelhi Call girls
 
A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?Igalia
 
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptxHampshireHUG
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Miguel Araújo
 
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
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slidevu2urc
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsEnterprise Knowledge
 
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
 
Advantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your BusinessAdvantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your BusinessPixlogix Infotech
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...Martijn de Jong
 
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
 
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
 
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of ServiceCNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Servicegiselly40
 
Breaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path MountBreaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path MountPuma Security, LLC
 

Dernier (20)

Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
 
[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
 
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfThe Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘
 
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
 
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men
 
A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?
 
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 
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
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
 
Advantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your BusinessAdvantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your Business
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
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
 
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...
 
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of ServiceCNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Service
 
Breaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path MountBreaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path Mount
 

HTML Intro: Understanding Markup Language Basics

  • 1. By: Miguel A. Martínez Course: Principios Tecnológicos
  • 2. Table of Contents  What is HTML?  What is the difference between a programming language and a markup language?  How does HTML work?  Tags and Attributes  Making your first simple web page
  • 3. What is HTML?  HTML stands for Hyper Text Markup Language  It is a computer language that is used to create web sites.  A web site is created by many lines of short codes using this language.  With a web browser, the .html document can be seen as the web site that was formed by the numerous line of code.
  • 4.  HyperText is the method by which you move around on the web — by clicking on special text called hyperlinks which bring you to the next page.  Click Here
  • 5.
  • 6.  Markup is what HTML tags do to the text inside them. They mark it as a certain type of text (italicized text, for example).  HTML is a Language, as it has code-words and syntax like any other language.
  • 7. What is the difference between a programming language and a markup language?  Markup language by its definition “is a modern system for annotating a text in a way that is syntactically distinguishable from that text." For example, in HTML, you have your text. Then you have your Hyper Text Markup Language which defines how that text should look.
  • 8.  Programming language is designed to communicate instructions to a computer. So the main difference is that programming languages are designed to write programs and software. A markup language is designed to manipulate the content it's marking up, hence the term Markup Language.
  • 9. How does HTML work?  The HTML documents known by the file type .html or .htm are composed of its elements. These are its tags and its plain text.  Tags are what separate normal text from HTML text.  These tags are keywords surrounded by angle brackets like so: <html>.
  • 10. Tags and Attributes  HTML tags come in pairs, their opening tags and their closing tags, like so: <p> </p>.  The start and end tags are what define a certain effect on the web page, and what is written between them is what the start and end tags make an effect on.  Exception: Only has opening tags: some can only be like so: <br>.
  • 11.  Attributes provide additional information about the element.  They are specified in the start tag with a name and its value, like so: <a href="http://www.w3schools.com">T his is a link</a>
  • 12. Making your first simple web page  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>My First HTML Page</title> </head> <body> My text goes here. </body> </html>
  • 13. References  http://en.wikipedia.org/wiki/HTML#Markup  http://www.w3schools.com  http://www.yourhtmlsource.com  http://www.web- source.net/html_codes_chart.htm  http://en.wikipedia.org/wiki/Programming_l anguage  http://en.wikipedia.org/wiki/Markup_langua ges