SlideShare ist ein Scribd-Unternehmen logo
1 von 10
HyperText Markup Language
(Lenguaje de Marcado de Hipertexto).
Docente: Oscar Eduardo Delgado Maya
 Es el lenguaje de marcado predominante para
la construcción de páginas web.
 Describe la estructura y el contenido en
forma de texto.
 Permite complementar el texto con objetos
tales como imágenes.
 Se escribe en forma de "etiquetas", rodeadas
por corchetes angulares (<,>).
 Los elementos son la estructura básica de HTML.
 Poseen propiedades básicas: atributos y contenido.
 Generalmente tienen una etiqueta de inicio y una
etiqueta de cierre que encierran el contenido.
<nombre-de-elemento>contenido</nombre-de-elemento>
 Estructural:Describe el propósito del texto.
◦ <h2>Golf</h2> encabezamiento de segundo
nivel.
 Presentacional:Describe la apariencia del
texto.
• <b>negrita</b> Texto resaltado.
 Hipertextual: Enlazar partes del documento
con otros documentos o con otras partes del
mismo documento.
• <a>
 <html>: Define el inicio del documento
HTML, le indica al navegador que lo que viene
a continuación debe ser interpretado como
código HTML.
 <head>: Define la cabecera del documento
HTML, esta cabecera suele contener
información sobre el documento que no se
muestra directamente al usuario.
 <body>: Define el contenido principal o
cuerpo del documento. Esta es la parte del
documento html que se muestra en el
navegador.
 <img>: imagen. Requiere del atributo src, que
indica la ruta en la que se encuentra la imagen.
 <b>: texto en negrita (Etiqueta descartada. Se
recomienda usar la etiqueta <strong>).
 <i>: texto en cursiva.
La mayoría de etiquetas deben cerrarse como se
abren, pero con una barra ("/")
<h1><i>BIENVENIDOS A MI PAGINA WEB</i></h1>
La estructura básica de todo documento web tiene:
 Una cabecera <HEAD>: donde va el título y
algunas cosas más que no se ven en la página, y
su cierre </HEAD>.
 Un cuerpo <BODY>: donde irá lo que se verá, y
su cierre </BODY>.
 Además, una etiqueta al principio de todo
<HTML> y otra al final de todo </HTML>.
Veamos como queda la estructura básica:
<HTML>
<HEAD>
.....
</HEAD>
<BODY>
.....
</BODY>
</HTML>
 Es posible añadir atributos a determinados
elementos.
 LOS ELEMENTOS estructuran el contenido de
todo el documento HTML. Indican al
navegador cómo debería presentarse el
contenido.
 En algunos elementos se puede añadir más
información. Esa información extra se
denomina atributo.
 Los atributos se incluyen siempre dentro de la
etiqueta de inicio y llevan inmediatamente detrás
el signo de igual ("=") con los valores de dichos
atributos entre comillas ("").
<nombre-eti atributo1="valor1" atributo2="valor2">conte</nombre-eti>
Elemento HTML
Etiqueta de apertura
Atributos y sus Valores

Weitere ähnliche Inhalte

Was ist angesagt?

(Fast) Introduction to HTML & CSS
(Fast) Introduction to HTML & CSS (Fast) Introduction to HTML & CSS
(Fast) Introduction to HTML & CSS Dave Kelly
 
Etiquetas mas utilizadas del lenguaje html
Etiquetas mas utilizadas del lenguaje htmlEtiquetas mas utilizadas del lenguaje html
Etiquetas mas utilizadas del lenguaje htmlDoraliza Hugo Vera
 
HTML and CSS crash course!
HTML and CSS crash course!HTML and CSS crash course!
HTML and CSS crash course!Ana Cidre
 
Html & Css presentation
Html  & Css presentation Html  & Css presentation
Html & Css presentation joilrahat
 
Presentación Powerpoint HTML
Presentación Powerpoint HTMLPresentación Powerpoint HTML
Presentación Powerpoint HTMLLola1234__
 
How Cascading Style Sheets (CSS) Works
How Cascading Style Sheets (CSS) WorksHow Cascading Style Sheets (CSS) Works
How Cascading Style Sheets (CSS) WorksAmit Tyagi
 
Etiquetas HTML
Etiquetas HTMLEtiquetas HTML
Etiquetas HTMLpablo3022
 
Basic Html Tags Tutorial For Kids
Basic Html Tags Tutorial For KidsBasic Html Tags Tutorial For Kids
Basic Html Tags Tutorial For KidsOlivia Moran
 
Introduction to html
Introduction to htmlIntroduction to html
Introduction to htmlveena parihar
 
HTML CSS and Web Development
HTML CSS and Web DevelopmentHTML CSS and Web Development
HTML CSS and Web DevelopmentRahul Mishra
 
Html and css presentation
Html and css presentationHtml and css presentation
Html and css presentationumesh patil
 

Was ist angesagt? (20)

(Fast) Introduction to HTML & CSS
(Fast) Introduction to HTML & CSS (Fast) Introduction to HTML & CSS
(Fast) Introduction to HTML & CSS
 
Html Ppt
Html PptHtml Ppt
Html Ppt
 
Etiquetas mas utilizadas del lenguaje html
Etiquetas mas utilizadas del lenguaje htmlEtiquetas mas utilizadas del lenguaje html
Etiquetas mas utilizadas del lenguaje html
 
HTML and CSS crash course!
HTML and CSS crash course!HTML and CSS crash course!
HTML and CSS crash course!
 
Html TAGS
Html TAGSHtml TAGS
Html TAGS
 
Introducing CSS Grid
Introducing CSS GridIntroducing CSS Grid
Introducing CSS Grid
 
Bootstrap 5 basic
Bootstrap 5 basicBootstrap 5 basic
Bootstrap 5 basic
 
Html & Css presentation
Html  & Css presentation Html  & Css presentation
Html & Css presentation
 
Presentación Powerpoint HTML
Presentación Powerpoint HTMLPresentación Powerpoint HTML
Presentación Powerpoint HTML
 
Html basics
Html basicsHtml basics
Html basics
 
How Cascading Style Sheets (CSS) Works
How Cascading Style Sheets (CSS) WorksHow Cascading Style Sheets (CSS) Works
How Cascading Style Sheets (CSS) Works
 
HTML
HTMLHTML
HTML
 
Etiquetas HTML
Etiquetas HTMLEtiquetas HTML
Etiquetas HTML
 
Introduction to HTML and CSS
Introduction to HTML and CSSIntroduction to HTML and CSS
Introduction to HTML and CSS
 
Basic html
Basic htmlBasic html
Basic html
 
Basic Html Tags Tutorial For Kids
Basic Html Tags Tutorial For KidsBasic Html Tags Tutorial For Kids
Basic Html Tags Tutorial For Kids
 
Introduction to html
Introduction to htmlIntroduction to html
Introduction to html
 
HTML CSS and Web Development
HTML CSS and Web DevelopmentHTML CSS and Web Development
HTML CSS and Web Development
 
Html
HtmlHtml
Html
 
Html and css presentation
Html and css presentationHtml and css presentation
Html and css presentation
 

Ähnlich wie HTML: Lenguaje de Marcado de Hipertexto

Ähnlich wie HTML: Lenguaje de Marcado de Hipertexto (20)

Slideshare
SlideshareSlideshare
Slideshare
 
Html
HtmlHtml
Html
 
Investigacion de html y xml
Investigacion de html y xmlInvestigacion de html y xml
Investigacion de html y xml
 
HTML HyperText Markup Language
HTML HyperText Markup LanguageHTML HyperText Markup Language
HTML HyperText Markup Language
 
Tags actividad 11 jmar 180112
Tags actividad 11 jmar 180112Tags actividad 11 jmar 180112
Tags actividad 11 jmar 180112
 
El código html
El código htmlEl código html
El código html
 
Html 121
Html 121Html 121
Html 121
 
Html
HtmlHtml
Html
 
Sitio Web / Introducción a HTML
Sitio Web / Introducción a HTMLSitio Web / Introducción a HTML
Sitio Web / Introducción a HTML
 
Html
HtmlHtml
Html
 
Lissette lainez
Lissette lainezLissette lainez
Lissette lainez
 
Lissette lainez
Lissette lainezLissette lainez
Lissette lainez
 
etiquetas basicas de html
etiquetas basicas de htmletiquetas basicas de html
etiquetas basicas de html
 
Israel
IsraelIsrael
Israel
 
Israel
IsraelIsrael
Israel
 
Acerca de html
Acerca de htmlAcerca de html
Acerca de html
 
Deber de htmly xml
Deber de htmly xmlDeber de htmly xml
Deber de htmly xml
 
Taller 1 mariana barreto
Taller 1 mariana barretoTaller 1 mariana barreto
Taller 1 mariana barreto
 
Emily
EmilyEmily
Emily
 
Html
HtmlHtml
Html
 

Kürzlich hochgeladen

Neurociencias para Educadores NE24 Ccesa007.pdf
Neurociencias para Educadores  NE24  Ccesa007.pdfNeurociencias para Educadores  NE24  Ccesa007.pdf
Neurociencias para Educadores NE24 Ccesa007.pdfDemetrio Ccesa Rayme
 
Qué es la Inteligencia artificial generativa
Qué es la Inteligencia artificial generativaQué es la Inteligencia artificial generativa
Qué es la Inteligencia artificial generativaDecaunlz
 
La empresa sostenible: Principales Características, Barreras para su Avance y...
La empresa sostenible: Principales Características, Barreras para su Avance y...La empresa sostenible: Principales Características, Barreras para su Avance y...
La empresa sostenible: Principales Características, Barreras para su Avance y...JonathanCovena1
 
TECNOLOGÍA FARMACEUTICA OPERACIONES UNITARIAS.pptx
TECNOLOGÍA FARMACEUTICA OPERACIONES UNITARIAS.pptxTECNOLOGÍA FARMACEUTICA OPERACIONES UNITARIAS.pptx
TECNOLOGÍA FARMACEUTICA OPERACIONES UNITARIAS.pptxKarlaMassielMartinez
 
origen y desarrollo del ensayo literario
origen y desarrollo del ensayo literarioorigen y desarrollo del ensayo literario
origen y desarrollo del ensayo literarioELIASAURELIOCHAVEZCA1
 
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURAFORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURAEl Fortí
 
ACERTIJO DE POSICIÓN DE CORREDORES EN LA OLIMPIADA. Por JAVIER SOLIS NOYOLA
ACERTIJO DE POSICIÓN DE CORREDORES EN LA OLIMPIADA. Por JAVIER SOLIS NOYOLAACERTIJO DE POSICIÓN DE CORREDORES EN LA OLIMPIADA. Por JAVIER SOLIS NOYOLA
ACERTIJO DE POSICIÓN DE CORREDORES EN LA OLIMPIADA. Por JAVIER SOLIS NOYOLAJAVIER SOLIS NOYOLA
 
Planificacion Anual 2do Grado Educacion Primaria 2024 Ccesa007.pdf
Planificacion Anual 2do Grado Educacion Primaria   2024   Ccesa007.pdfPlanificacion Anual 2do Grado Educacion Primaria   2024   Ccesa007.pdf
Planificacion Anual 2do Grado Educacion Primaria 2024 Ccesa007.pdfDemetrio Ccesa Rayme
 
PLAN DE REFUERZO ESCOLAR primaria (1).docx
PLAN DE REFUERZO ESCOLAR primaria (1).docxPLAN DE REFUERZO ESCOLAR primaria (1).docx
PLAN DE REFUERZO ESCOLAR primaria (1).docxlupitavic
 
TEMA 13 ESPAÑA EN DEMOCRACIA:DISTINTOS GOBIERNOS
TEMA 13 ESPAÑA EN DEMOCRACIA:DISTINTOS GOBIERNOSTEMA 13 ESPAÑA EN DEMOCRACIA:DISTINTOS GOBIERNOS
TEMA 13 ESPAÑA EN DEMOCRACIA:DISTINTOS GOBIERNOSjlorentemartos
 
INSTRUCCION PREPARATORIA DE TIRO .pptx
INSTRUCCION PREPARATORIA DE TIRO   .pptxINSTRUCCION PREPARATORIA DE TIRO   .pptx
INSTRUCCION PREPARATORIA DE TIRO .pptxdeimerhdz21
 
La triple Naturaleza del Hombre estudio.
La triple Naturaleza del Hombre estudio.La triple Naturaleza del Hombre estudio.
La triple Naturaleza del Hombre estudio.amayarogel
 
Curso = Metodos Tecnicas y Modelos de Enseñanza.pdf
Curso = Metodos Tecnicas y Modelos de Enseñanza.pdfCurso = Metodos Tecnicas y Modelos de Enseñanza.pdf
Curso = Metodos Tecnicas y Modelos de Enseñanza.pdfFrancisco158360
 
SELECCIÓN DE LA MUESTRA Y MUESTREO EN INVESTIGACIÓN CUALITATIVA.pdf
SELECCIÓN DE LA MUESTRA Y MUESTREO EN INVESTIGACIÓN CUALITATIVA.pdfSELECCIÓN DE LA MUESTRA Y MUESTREO EN INVESTIGACIÓN CUALITATIVA.pdf
SELECCIÓN DE LA MUESTRA Y MUESTREO EN INVESTIGACIÓN CUALITATIVA.pdfAngélica Soledad Vega Ramírez
 
Dinámica florecillas a María en el mes d
Dinámica florecillas a María en el mes dDinámica florecillas a María en el mes d
Dinámica florecillas a María en el mes dstEphaniiie
 
ACUERDO MINISTERIAL 078-ORGANISMOS ESCOLARES..pptx
ACUERDO MINISTERIAL 078-ORGANISMOS ESCOLARES..pptxACUERDO MINISTERIAL 078-ORGANISMOS ESCOLARES..pptx
ACUERDO MINISTERIAL 078-ORGANISMOS ESCOLARES..pptxzulyvero07
 
Estrategia de prompts, primeras ideas para su construcción
Estrategia de prompts, primeras ideas para su construcciónEstrategia de prompts, primeras ideas para su construcción
Estrategia de prompts, primeras ideas para su construcciónLourdes Feria
 

Kürzlich hochgeladen (20)

Neurociencias para Educadores NE24 Ccesa007.pdf
Neurociencias para Educadores  NE24  Ccesa007.pdfNeurociencias para Educadores  NE24  Ccesa007.pdf
Neurociencias para Educadores NE24 Ccesa007.pdf
 
Qué es la Inteligencia artificial generativa
Qué es la Inteligencia artificial generativaQué es la Inteligencia artificial generativa
Qué es la Inteligencia artificial generativa
 
Tema 8.- PROTECCION DE LOS SISTEMAS DE INFORMACIÓN.pdf
Tema 8.- PROTECCION DE LOS SISTEMAS DE INFORMACIÓN.pdfTema 8.- PROTECCION DE LOS SISTEMAS DE INFORMACIÓN.pdf
Tema 8.- PROTECCION DE LOS SISTEMAS DE INFORMACIÓN.pdf
 
La empresa sostenible: Principales Características, Barreras para su Avance y...
La empresa sostenible: Principales Características, Barreras para su Avance y...La empresa sostenible: Principales Características, Barreras para su Avance y...
La empresa sostenible: Principales Características, Barreras para su Avance y...
 
TECNOLOGÍA FARMACEUTICA OPERACIONES UNITARIAS.pptx
TECNOLOGÍA FARMACEUTICA OPERACIONES UNITARIAS.pptxTECNOLOGÍA FARMACEUTICA OPERACIONES UNITARIAS.pptx
TECNOLOGÍA FARMACEUTICA OPERACIONES UNITARIAS.pptx
 
origen y desarrollo del ensayo literario
origen y desarrollo del ensayo literarioorigen y desarrollo del ensayo literario
origen y desarrollo del ensayo literario
 
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURAFORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
 
Medición del Movimiento Online 2024.pptx
Medición del Movimiento Online 2024.pptxMedición del Movimiento Online 2024.pptx
Medición del Movimiento Online 2024.pptx
 
ACERTIJO DE POSICIÓN DE CORREDORES EN LA OLIMPIADA. Por JAVIER SOLIS NOYOLA
ACERTIJO DE POSICIÓN DE CORREDORES EN LA OLIMPIADA. Por JAVIER SOLIS NOYOLAACERTIJO DE POSICIÓN DE CORREDORES EN LA OLIMPIADA. Por JAVIER SOLIS NOYOLA
ACERTIJO DE POSICIÓN DE CORREDORES EN LA OLIMPIADA. Por JAVIER SOLIS NOYOLA
 
Planificacion Anual 2do Grado Educacion Primaria 2024 Ccesa007.pdf
Planificacion Anual 2do Grado Educacion Primaria   2024   Ccesa007.pdfPlanificacion Anual 2do Grado Educacion Primaria   2024   Ccesa007.pdf
Planificacion Anual 2do Grado Educacion Primaria 2024 Ccesa007.pdf
 
PLAN DE REFUERZO ESCOLAR primaria (1).docx
PLAN DE REFUERZO ESCOLAR primaria (1).docxPLAN DE REFUERZO ESCOLAR primaria (1).docx
PLAN DE REFUERZO ESCOLAR primaria (1).docx
 
TEMA 13 ESPAÑA EN DEMOCRACIA:DISTINTOS GOBIERNOS
TEMA 13 ESPAÑA EN DEMOCRACIA:DISTINTOS GOBIERNOSTEMA 13 ESPAÑA EN DEMOCRACIA:DISTINTOS GOBIERNOS
TEMA 13 ESPAÑA EN DEMOCRACIA:DISTINTOS GOBIERNOS
 
INSTRUCCION PREPARATORIA DE TIRO .pptx
INSTRUCCION PREPARATORIA DE TIRO   .pptxINSTRUCCION PREPARATORIA DE TIRO   .pptx
INSTRUCCION PREPARATORIA DE TIRO .pptx
 
La triple Naturaleza del Hombre estudio.
La triple Naturaleza del Hombre estudio.La triple Naturaleza del Hombre estudio.
La triple Naturaleza del Hombre estudio.
 
Curso = Metodos Tecnicas y Modelos de Enseñanza.pdf
Curso = Metodos Tecnicas y Modelos de Enseñanza.pdfCurso = Metodos Tecnicas y Modelos de Enseñanza.pdf
Curso = Metodos Tecnicas y Modelos de Enseñanza.pdf
 
SELECCIÓN DE LA MUESTRA Y MUESTREO EN INVESTIGACIÓN CUALITATIVA.pdf
SELECCIÓN DE LA MUESTRA Y MUESTREO EN INVESTIGACIÓN CUALITATIVA.pdfSELECCIÓN DE LA MUESTRA Y MUESTREO EN INVESTIGACIÓN CUALITATIVA.pdf
SELECCIÓN DE LA MUESTRA Y MUESTREO EN INVESTIGACIÓN CUALITATIVA.pdf
 
Dinámica florecillas a María en el mes d
Dinámica florecillas a María en el mes dDinámica florecillas a María en el mes d
Dinámica florecillas a María en el mes d
 
ACUERDO MINISTERIAL 078-ORGANISMOS ESCOLARES..pptx
ACUERDO MINISTERIAL 078-ORGANISMOS ESCOLARES..pptxACUERDO MINISTERIAL 078-ORGANISMOS ESCOLARES..pptx
ACUERDO MINISTERIAL 078-ORGANISMOS ESCOLARES..pptx
 
Sesión de clase: Fe contra todo pronóstico
Sesión de clase: Fe contra todo pronósticoSesión de clase: Fe contra todo pronóstico
Sesión de clase: Fe contra todo pronóstico
 
Estrategia de prompts, primeras ideas para su construcción
Estrategia de prompts, primeras ideas para su construcciónEstrategia de prompts, primeras ideas para su construcción
Estrategia de prompts, primeras ideas para su construcción
 

HTML: Lenguaje de Marcado de Hipertexto

  • 1. HyperText Markup Language (Lenguaje de Marcado de Hipertexto). Docente: Oscar Eduardo Delgado Maya
  • 2.  Es el lenguaje de marcado predominante para la construcción de páginas web.  Describe la estructura y el contenido en forma de texto.  Permite complementar el texto con objetos tales como imágenes.  Se escribe en forma de "etiquetas", rodeadas por corchetes angulares (<,>).
  • 3.  Los elementos son la estructura básica de HTML.  Poseen propiedades básicas: atributos y contenido.  Generalmente tienen una etiqueta de inicio y una etiqueta de cierre que encierran el contenido. <nombre-de-elemento>contenido</nombre-de-elemento>
  • 4.  Estructural:Describe el propósito del texto. ◦ <h2>Golf</h2> encabezamiento de segundo nivel.  Presentacional:Describe la apariencia del texto. • <b>negrita</b> Texto resaltado.  Hipertextual: Enlazar partes del documento con otros documentos o con otras partes del mismo documento. • <a>
  • 5.  <html>: Define el inicio del documento HTML, le indica al navegador que lo que viene a continuación debe ser interpretado como código HTML.  <head>: Define la cabecera del documento HTML, esta cabecera suele contener información sobre el documento que no se muestra directamente al usuario.  <body>: Define el contenido principal o cuerpo del documento. Esta es la parte del documento html que se muestra en el navegador.
  • 6.  <img>: imagen. Requiere del atributo src, que indica la ruta en la que se encuentra la imagen.  <b>: texto en negrita (Etiqueta descartada. Se recomienda usar la etiqueta <strong>).  <i>: texto en cursiva. La mayoría de etiquetas deben cerrarse como se abren, pero con una barra ("/") <h1><i>BIENVENIDOS A MI PAGINA WEB</i></h1>
  • 7. La estructura básica de todo documento web tiene:  Una cabecera <HEAD>: donde va el título y algunas cosas más que no se ven en la página, y su cierre </HEAD>.  Un cuerpo <BODY>: donde irá lo que se verá, y su cierre </BODY>.  Además, una etiqueta al principio de todo <HTML> y otra al final de todo </HTML>.
  • 8. Veamos como queda la estructura básica: <HTML> <HEAD> ..... </HEAD> <BODY> ..... </BODY> </HTML>
  • 9.  Es posible añadir atributos a determinados elementos.  LOS ELEMENTOS estructuran el contenido de todo el documento HTML. Indican al navegador cómo debería presentarse el contenido.  En algunos elementos se puede añadir más información. Esa información extra se denomina atributo.
  • 10.  Los atributos se incluyen siempre dentro de la etiqueta de inicio y llevan inmediatamente detrás el signo de igual ("=") con los valores de dichos atributos entre comillas (""). <nombre-eti atributo1="valor1" atributo2="valor2">conte</nombre-eti> Elemento HTML Etiqueta de apertura Atributos y sus Valores