SlideShare a Scribd company logo
1 of 27
ESTRUCTURA
CÓMO FUNCIONA LA ESTRUCTURA
HEADLINE
(ENCABEZADO)
CÓMO FUNCIONA LA ESTRUCTURA
TEXTO
CÓMO FUNCIONA LA ESTRUCTURA
IMAGENES
CÓMO FUNCIONA LA ESTRUCTURA
SUBHEADING
(SUBTITULO)
CÓMO FUNCIONA LA ESTRUCTURA
Las versiones
digitales
generalmente
tienen una
estructura similar
ESTRUCTURA EN DOCUMENTOS
DE WORD
Encabezados y
subtitulos reflejan
Jerarquía de la
informació n.
ESTRUCTURA EN DOCUMENTOS
DE WORD
Encabezados
principales e
informació n
importante se
muestran primero
ESTRUCTURA EN DOCUMENTOS
DE WORD
Para la informació n
de menor jerarquía
se emplean
subtitulos
HTML: ESTRUCTURA DE PÁGINAS
<html>
</html>
<body>
</body>
<h1>Este es el encabezado principal</h1>
<h2>Este es un subtitulo</h2>
<h2>Otro subtítulo</h2>
<p>Este texto puede ser una introducción
al resto de la página.</p>
<p>Otro párrafo.</p>
<p>Artículos extensos tienen subtítulos
para ayudar al seguimiento de la
estructura.</p>
UNA MIRADA A LAS ETIQUETAS
ETIQUETA DE APERTURA ETIQUETA DE CIERRE
CARACTER CARACTER
SIGNO MENOR QUE SIGNO MAYOR QUE
DIAGONAL
langlang en-usen-us
LOS ATRIBUTOS NOS DICEN MÁS
DE LOS ELEMENTOS
<a =" ">Paragraph in English</p>
NOMBRE
DEL ATRIBUTO
VALOR DEL
ATRIBUTO
BODY, HEAD & TITLE
<html>
<head>
<title>Este es el título de...</title>
</head>
<body>
<h1>Este es el cuerpo de la página</h1>
<p>Cualquier cosa dentro del cuerpo de
la página web se muestra en la
ventana principal del navegador.</p>
</body>
</html>
BODY, HEAD & TITLE
<html>
<head>
<title>Este es el título de...</title>
</head>
<body>
<h1>Este es el cuerpo de la página</h1>
<p>Cualquier cosa dentro del cuerpo de
la página web se muestra en la
ventana principal del navegador.</p>
</body>
</html>
BODY, HEAD & TITLE
BODY, HEAD & TITLE
<html>
<head>
<title>Este es el título de...</title>
</head>
<body>
<h1>Este es el cuerpo de la página</h1>
<p>Cualquier cosa dentro del cuerpo de
la página web se muestra en la
ventana principal del navegador.</p>
</body>
</html>
BODY, HEAD & TITLE
Las páginas HTML son en
realidad documentos de
texto.
RESUMEN
El HTML utiliza etiquetas
que actuan como
contenedores.
RESUMEN
A las etiquetas se les hace
referencia a menudo como
elementos.
RESUMEN
Las etiquetas generalmente
estan en pares. Etiquetas
de apertura denotan el inicio
de un contenido, y las de
cierre denotan el final.
RESUMEN
Las etiquetas de apertura
pueden contener atributos
que indican informació n
adicional del elemento que
contienen.
RESUMEN
Los atributos requieren
nombre y valor.
RESUMEN
ARCHIVOS HTML
Una página es un archivo donde está
contenido el código HTML en forma de
texto. Estos archivos tienen extensión
.html o .htm (es indiferente cuál
utilizar).
Consejo: Utiliza siempre la misma
extensión en tus archivos HTML. Eso
evitará que te confundas al escribir los
nombres de tus archivos unas veces con
.htm y otras con .html.
ARCHIVOS HTML
Consejo: Utiliza nombres en tus archivos
que tengan algunas normas básicas para
ahorrarte disgustos y líos. No utilices
acentos ni espacios ni otros caracteres
especiales.( !”·$%&/=*ª ñ etc.)
También te ayudará escribir siempre las
letras en minúsculas. Emplea nombres
descriptivos para que te aclaren lo que
hay dentro. Algún caracter como el guión
"-" o el guión bajo "_" te puede ayudar a
separar las palabras.
Por ejemplo quienes_somos.html
01 estructura

More Related Content

What's hot (16)

Introducción a HTML
Introducción a HTMLIntroducción a HTML
Introducción a HTML
 
10 etiquetas basicas de html
10 etiquetas basicas de html10 etiquetas basicas de html
10 etiquetas basicas de html
 
Etiquetas de xhtml
Etiquetas de xhtmlEtiquetas de xhtml
Etiquetas de xhtml
 
Etiquetas html
Etiquetas htmlEtiquetas html
Etiquetas html
 
Helen Valverde 2C3
Helen Valverde 2C3Helen Valverde 2C3
Helen Valverde 2C3
 
Colegio nacional nicolas esguerra
Colegio nacional nicolas esguerraColegio nacional nicolas esguerra
Colegio nacional nicolas esguerra
 
Estructura html
Estructura htmlEstructura html
Estructura html
 
Santiago
SantiagoSantiago
Santiago
 
Lenguaje html
Lenguaje htmlLenguaje html
Lenguaje html
 
Html
HtmlHtml
Html
 
Universidad técnica de ambato
Universidad técnica de ambatoUniversidad técnica de ambato
Universidad técnica de ambato
 
Html5
Html5Html5
Html5
 
codigos HTLM
codigos HTLMcodigos HTLM
codigos HTLM
 
El código html
El código htmlEl código html
El código html
 
Producto 3 joon y jorge 9no a
Producto 3 joon y jorge 9no aProducto 3 joon y jorge 9no a
Producto 3 joon y jorge 9no a
 
Etiquetas básicas-en-html
Etiquetas básicas-en-htmlEtiquetas básicas-en-html
Etiquetas básicas-en-html
 

Similar to 01 estructura (20)

Manual de-html
Manual de-htmlManual de-html
Manual de-html
 
Html
HtmlHtml
Html
 
Curso HTML 5 & jQuery - Leccion 1
Curso HTML 5 & jQuery - Leccion 1 Curso HTML 5 & jQuery - Leccion 1
Curso HTML 5 & jQuery - Leccion 1
 
Html
HtmlHtml
Html
 
GUIA DE FORMULARIOS HTML - PARA LA ACTIVIDAD 1.pdf
GUIA DE FORMULARIOS HTML - PARA LA ACTIVIDAD 1.pdfGUIA DE FORMULARIOS HTML - PARA LA ACTIVIDAD 1.pdf
GUIA DE FORMULARIOS HTML - PARA LA ACTIVIDAD 1.pdf
 
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
 
Lissette lainez
Lissette lainezLissette lainez
Lissette lainez
 
Lissette lainez
Lissette lainezLissette lainez
Lissette lainez
 
Tutorial html
Tutorial htmlTutorial html
Tutorial html
 
Investigacion de html y xml
Investigacion de html y xmlInvestigacion de html y xml
Investigacion de html y xml
 
Clase HTML.pptx
Clase HTML.pptxClase HTML.pptx
Clase HTML.pptx
 
1.3.2 elementos del lenguaje html
1.3.2 elementos del lenguaje html1.3.2 elementos del lenguaje html
1.3.2 elementos del lenguaje html
 
HTML 2011
HTML 2011HTML 2011
HTML 2011
 
Html
HtmlHtml
Html
 
Slideshare
SlideshareSlideshare
Slideshare
 
html
htmlhtml
html
 
Lenguaje HTML
  Lenguaje HTML  Lenguaje HTML
Lenguaje HTML
 
QUE SON CODIGOS HTML.docx
QUE SON CODIGOS HTML.docxQUE SON CODIGOS HTML.docx
QUE SON CODIGOS HTML.docx
 
Texto del manual de html
Texto del manual de htmlTexto del manual de html
Texto del manual de html
 

More from sinaibucio

02 introduccion-css
02 introduccion-css02 introduccion-css
02 introduccion-csssinaibucio
 
00 introduccion
00 introduccion00 introduccion
00 introduccionsinaibucio
 
08 Anatomía de un sitio web.
08 Anatomía de un sitio web.08 Anatomía de un sitio web.
08 Anatomía de un sitio web.sinaibucio
 
07 Estrategias de comunicación a través de las redes sociales.
07 Estrategias de comunicación a través de las redes sociales.�07 Estrategias de comunicación a través de las redes sociales.�
07 Estrategias de comunicación a través de las redes sociales.sinaibucio
 
06 Estrategias de comunicación visual utilizadas en aplicaciones web
06 Estrategias de comunicación visual utilizadas en aplicaciones web06 Estrategias de comunicación visual utilizadas en aplicaciones web
06 Estrategias de comunicación visual utilizadas en aplicaciones websinaibucio
 
04 Comercio Electrónico y creación de imagen de marca
04 Comercio Electrónico y creación de imagen de marca04 Comercio Electrónico y creación de imagen de marca
04 Comercio Electrónico y creación de imagen de marcasinaibucio
 
03 Publicidad on-line
03 Publicidad on-line03 Publicidad on-line
03 Publicidad on-linesinaibucio
 
02 Las búsquedas en internet como estrategia de comunicación
02 Las búsquedas en internet como estrategia de comunicación02 Las búsquedas en internet como estrategia de comunicación
02 Las búsquedas en internet como estrategia de comunicaciónsinaibucio
 
01 Marketing Digital
01 Marketing Digital01 Marketing Digital
01 Marketing Digitalsinaibucio
 
La evolución de la Sociedad de la Información
La evolución de la Sociedad de la InformaciónLa evolución de la Sociedad de la Información
La evolución de la Sociedad de la Informaciónsinaibucio
 
Calendario Pres Induccion
Calendario Pres InduccionCalendario Pres Induccion
Calendario Pres Induccionsinaibucio
 
Presentacion Sinai00
Presentacion Sinai00Presentacion Sinai00
Presentacion Sinai00sinaibucio
 

More from sinaibucio (17)

Links html
Links htmlLinks html
Links html
 
02 introduccion-css
02 introduccion-css02 introduccion-css
02 introduccion-css
 
00 introduccion
00 introduccion00 introduccion
00 introduccion
 
08 Anatomía de un sitio web.
08 Anatomía de un sitio web.08 Anatomía de un sitio web.
08 Anatomía de un sitio web.
 
07 Estrategias de comunicación a través de las redes sociales.
07 Estrategias de comunicación a través de las redes sociales.�07 Estrategias de comunicación a través de las redes sociales.�
07 Estrategias de comunicación a través de las redes sociales.
 
06 Estrategias de comunicación visual utilizadas en aplicaciones web
06 Estrategias de comunicación visual utilizadas en aplicaciones web06 Estrategias de comunicación visual utilizadas en aplicaciones web
06 Estrategias de comunicación visual utilizadas en aplicaciones web
 
04 Comercio Electrónico y creación de imagen de marca
04 Comercio Electrónico y creación de imagen de marca04 Comercio Electrónico y creación de imagen de marca
04 Comercio Electrónico y creación de imagen de marca
 
03 Publicidad on-line
03 Publicidad on-line03 Publicidad on-line
03 Publicidad on-line
 
02 Las búsquedas en internet como estrategia de comunicación
02 Las búsquedas en internet como estrategia de comunicación02 Las búsquedas en internet como estrategia de comunicación
02 Las búsquedas en internet como estrategia de comunicación
 
01 Marketing Digital
01 Marketing Digital01 Marketing Digital
01 Marketing Digital
 
Clase 1
Clase 1Clase 1
Clase 1
 
La evolución de la Sociedad de la Información
La evolución de la Sociedad de la InformaciónLa evolución de la Sociedad de la Información
La evolución de la Sociedad de la Información
 
Presentation1
Presentation1Presentation1
Presentation1
 
Flickr
FlickrFlickr
Flickr
 
Calendario Pres Induccion
Calendario Pres InduccionCalendario Pres Induccion
Calendario Pres Induccion
 
Web Tut
Web TutWeb Tut
Web Tut
 
Presentacion Sinai00
Presentacion Sinai00Presentacion Sinai00
Presentacion Sinai00
 

Recently uploaded

OCTAVO SEGUNDO PERIODO. EMPRENDIEMIENTO VS
OCTAVO SEGUNDO PERIODO. EMPRENDIEMIENTO VSOCTAVO SEGUNDO PERIODO. EMPRENDIEMIENTO VS
OCTAVO SEGUNDO PERIODO. EMPRENDIEMIENTO VSYadi Campos
 
LA LITERATURA DEL BARROCO 2023-2024pptx.pptx
LA LITERATURA DEL BARROCO 2023-2024pptx.pptxLA LITERATURA DEL BARROCO 2023-2024pptx.pptx
LA LITERATURA DEL BARROCO 2023-2024pptx.pptxlclcarmen
 
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í
 
PLAN DE REFUERZO ESCOLAR MERC 2024-2.docx
PLAN DE REFUERZO ESCOLAR MERC 2024-2.docxPLAN DE REFUERZO ESCOLAR MERC 2024-2.docx
PLAN DE REFUERZO ESCOLAR MERC 2024-2.docxiemerc2024
 
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
 
SEPTIMO SEGUNDO PERIODO EMPRENDIMIENTO VS
SEPTIMO SEGUNDO PERIODO EMPRENDIMIENTO VSSEPTIMO SEGUNDO PERIODO EMPRENDIMIENTO VS
SEPTIMO SEGUNDO PERIODO EMPRENDIMIENTO VSYadi Campos
 
Prueba de evaluación Geografía e Historia Comunidad de Madrid 2º de la ESO
Prueba de evaluación Geografía e Historia Comunidad de Madrid 2º de la ESOPrueba de evaluación Geografía e Historia Comunidad de Madrid 2º de la ESO
Prueba de evaluación Geografía e Historia Comunidad de Madrid 2º de la ESOluismii249
 
Feliz Día de la Madre - 5 de Mayo, 2024.pdf
Feliz Día de la Madre - 5 de Mayo, 2024.pdfFeliz Día de la Madre - 5 de Mayo, 2024.pdf
Feliz Día de la Madre - 5 de Mayo, 2024.pdfMercedes Gonzalez
 
Tema 10. Dinámica y funciones de la Atmosfera 2024
Tema 10. Dinámica y funciones de la Atmosfera 2024Tema 10. Dinámica y funciones de la Atmosfera 2024
Tema 10. Dinámica y funciones de la Atmosfera 2024IES Vicent Andres Estelles
 
SEXTO SEGUNDO PERIODO EMPRENDIMIENTO.pptx
SEXTO SEGUNDO PERIODO EMPRENDIMIENTO.pptxSEXTO SEGUNDO PERIODO EMPRENDIMIENTO.pptx
SEXTO SEGUNDO PERIODO EMPRENDIMIENTO.pptxYadi Campos
 
6.-Como-Atraer-El-Amor-01-Lain-Garcia-Calvo.pdf
6.-Como-Atraer-El-Amor-01-Lain-Garcia-Calvo.pdf6.-Como-Atraer-El-Amor-01-Lain-Garcia-Calvo.pdf
6.-Como-Atraer-El-Amor-01-Lain-Garcia-Calvo.pdfMiNeyi1
 
ACRÓNIMO DE PARÍS PARA SU OLIMPIADA 2024. Por JAVIER SOLIS NOYOLA
ACRÓNIMO DE PARÍS PARA SU OLIMPIADA 2024. Por JAVIER SOLIS NOYOLAACRÓNIMO DE PARÍS PARA SU OLIMPIADA 2024. Por JAVIER SOLIS NOYOLA
ACRÓNIMO DE PARÍS PARA SU OLIMPIADA 2024. Por JAVIER SOLIS NOYOLAJAVIER SOLIS NOYOLA
 
origen y desarrollo del ensayo literario
origen y desarrollo del ensayo literarioorigen y desarrollo del ensayo literario
origen y desarrollo del ensayo literarioELIASAURELIOCHAVEZCA1
 
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
 
Prueba de evaluación Geografía e Historia Comunidad de Madrid 4ºESO
Prueba de evaluación Geografía e Historia Comunidad de Madrid 4ºESOPrueba de evaluación Geografía e Historia Comunidad de Madrid 4ºESO
Prueba de evaluación Geografía e Historia Comunidad de Madrid 4ºESOluismii249
 
SESION DE PERSONAL SOCIAL. La convivencia en familia 22-04-24 -.doc
SESION DE PERSONAL SOCIAL.  La convivencia en familia 22-04-24  -.docSESION DE PERSONAL SOCIAL.  La convivencia en familia 22-04-24  -.doc
SESION DE PERSONAL SOCIAL. La convivencia en familia 22-04-24 -.docRodneyFrankCUADROSMI
 
NUEVAS DIAPOSITIVAS POSGRADO Gestion Publica.pdf
NUEVAS DIAPOSITIVAS POSGRADO Gestion Publica.pdfNUEVAS DIAPOSITIVAS POSGRADO Gestion Publica.pdf
NUEVAS DIAPOSITIVAS POSGRADO Gestion Publica.pdfUPTAIDELTACHIRA
 

Recently uploaded (20)

OCTAVO SEGUNDO PERIODO. EMPRENDIEMIENTO VS
OCTAVO SEGUNDO PERIODO. EMPRENDIEMIENTO VSOCTAVO SEGUNDO PERIODO. EMPRENDIEMIENTO VS
OCTAVO SEGUNDO PERIODO. EMPRENDIEMIENTO VS
 
Unidad 3 | Metodología de la Investigación
Unidad 3 | Metodología de la InvestigaciónUnidad 3 | Metodología de la Investigación
Unidad 3 | Metodología de la Investigación
 
LA LITERATURA DEL BARROCO 2023-2024pptx.pptx
LA LITERATURA DEL BARROCO 2023-2024pptx.pptxLA LITERATURA DEL BARROCO 2023-2024pptx.pptx
LA LITERATURA DEL BARROCO 2023-2024pptx.pptx
 
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
 
PLAN DE REFUERZO ESCOLAR MERC 2024-2.docx
PLAN DE REFUERZO ESCOLAR MERC 2024-2.docxPLAN DE REFUERZO ESCOLAR MERC 2024-2.docx
PLAN DE REFUERZO ESCOLAR MERC 2024-2.docx
 
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
 
SEPTIMO SEGUNDO PERIODO EMPRENDIMIENTO VS
SEPTIMO SEGUNDO PERIODO EMPRENDIMIENTO VSSEPTIMO SEGUNDO PERIODO EMPRENDIMIENTO VS
SEPTIMO SEGUNDO PERIODO EMPRENDIMIENTO VS
 
Power Point: Fe contra todo pronóstico.pptx
Power Point: Fe contra todo pronóstico.pptxPower Point: Fe contra todo pronóstico.pptx
Power Point: Fe contra todo pronóstico.pptx
 
Prueba de evaluación Geografía e Historia Comunidad de Madrid 2º de la ESO
Prueba de evaluación Geografía e Historia Comunidad de Madrid 2º de la ESOPrueba de evaluación Geografía e Historia Comunidad de Madrid 2º de la ESO
Prueba de evaluación Geografía e Historia Comunidad de Madrid 2º de la ESO
 
Feliz Día de la Madre - 5 de Mayo, 2024.pdf
Feliz Día de la Madre - 5 de Mayo, 2024.pdfFeliz Día de la Madre - 5 de Mayo, 2024.pdf
Feliz Día de la Madre - 5 de Mayo, 2024.pdf
 
Tema 10. Dinámica y funciones de la Atmosfera 2024
Tema 10. Dinámica y funciones de la Atmosfera 2024Tema 10. Dinámica y funciones de la Atmosfera 2024
Tema 10. Dinámica y funciones de la Atmosfera 2024
 
SEXTO SEGUNDO PERIODO EMPRENDIMIENTO.pptx
SEXTO SEGUNDO PERIODO EMPRENDIMIENTO.pptxSEXTO SEGUNDO PERIODO EMPRENDIMIENTO.pptx
SEXTO SEGUNDO PERIODO EMPRENDIMIENTO.pptx
 
6.-Como-Atraer-El-Amor-01-Lain-Garcia-Calvo.pdf
6.-Como-Atraer-El-Amor-01-Lain-Garcia-Calvo.pdf6.-Como-Atraer-El-Amor-01-Lain-Garcia-Calvo.pdf
6.-Como-Atraer-El-Amor-01-Lain-Garcia-Calvo.pdf
 
ACRÓNIMO DE PARÍS PARA SU OLIMPIADA 2024. Por JAVIER SOLIS NOYOLA
ACRÓNIMO DE PARÍS PARA SU OLIMPIADA 2024. Por JAVIER SOLIS NOYOLAACRÓNIMO DE PARÍS PARA SU OLIMPIADA 2024. Por JAVIER SOLIS NOYOLA
ACRÓNIMO DE PARÍS PARA SU OLIMPIADA 2024. Por JAVIER SOLIS NOYOLA
 
origen y desarrollo del ensayo literario
origen y desarrollo del ensayo literarioorigen y desarrollo del ensayo literario
origen y desarrollo del ensayo literario
 
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
 
Prueba de evaluación Geografía e Historia Comunidad de Madrid 4ºESO
Prueba de evaluación Geografía e Historia Comunidad de Madrid 4ºESOPrueba de evaluación Geografía e Historia Comunidad de Madrid 4ºESO
Prueba de evaluación Geografía e Historia Comunidad de Madrid 4ºESO
 
SESION DE PERSONAL SOCIAL. La convivencia en familia 22-04-24 -.doc
SESION DE PERSONAL SOCIAL.  La convivencia en familia 22-04-24  -.docSESION DE PERSONAL SOCIAL.  La convivencia en familia 22-04-24  -.doc
SESION DE PERSONAL SOCIAL. La convivencia en familia 22-04-24 -.doc
 
NUEVAS DIAPOSITIVAS POSGRADO Gestion Publica.pdf
NUEVAS DIAPOSITIVAS POSGRADO Gestion Publica.pdfNUEVAS DIAPOSITIVAS POSGRADO Gestion Publica.pdf
NUEVAS DIAPOSITIVAS POSGRADO Gestion Publica.pdf
 
Tema 11. Dinámica de la hidrosfera 2024
Tema 11.  Dinámica de la hidrosfera 2024Tema 11.  Dinámica de la hidrosfera 2024
Tema 11. Dinámica de la hidrosfera 2024
 

01 estructura

  • 1.
  • 3. CÓMO FUNCIONA LA ESTRUCTURA HEADLINE (ENCABEZADO)
  • 4. CÓMO FUNCIONA LA ESTRUCTURA TEXTO
  • 5. CÓMO FUNCIONA LA ESTRUCTURA IMAGENES
  • 6. CÓMO FUNCIONA LA ESTRUCTURA SUBHEADING (SUBTITULO)
  • 7. CÓMO FUNCIONA LA ESTRUCTURA Las versiones digitales generalmente tienen una estructura similar
  • 8. ESTRUCTURA EN DOCUMENTOS DE WORD Encabezados y subtitulos reflejan Jerarquía de la informació n.
  • 9. ESTRUCTURA EN DOCUMENTOS DE WORD Encabezados principales e informació n importante se muestran primero
  • 10. ESTRUCTURA EN DOCUMENTOS DE WORD Para la informació n de menor jerarquía se emplean subtitulos
  • 11. HTML: ESTRUCTURA DE PÁGINAS <html> </html> <body> </body> <h1>Este es el encabezado principal</h1> <h2>Este es un subtitulo</h2> <h2>Otro subtítulo</h2> <p>Este texto puede ser una introducción al resto de la página.</p> <p>Otro párrafo.</p> <p>Artículos extensos tienen subtítulos para ayudar al seguimiento de la estructura.</p>
  • 12. UNA MIRADA A LAS ETIQUETAS ETIQUETA DE APERTURA ETIQUETA DE CIERRE CARACTER CARACTER SIGNO MENOR QUE SIGNO MAYOR QUE DIAGONAL
  • 13. langlang en-usen-us LOS ATRIBUTOS NOS DICEN MÁS DE LOS ELEMENTOS <a =" ">Paragraph in English</p> NOMBRE DEL ATRIBUTO VALOR DEL ATRIBUTO
  • 14. BODY, HEAD & TITLE <html> <head> <title>Este es el título de...</title> </head> <body> <h1>Este es el cuerpo de la página</h1> <p>Cualquier cosa dentro del cuerpo de la página web se muestra en la ventana principal del navegador.</p> </body> </html>
  • 15. BODY, HEAD & TITLE <html> <head> <title>Este es el título de...</title> </head> <body> <h1>Este es el cuerpo de la página</h1> <p>Cualquier cosa dentro del cuerpo de la página web se muestra en la ventana principal del navegador.</p> </body> </html>
  • 16. BODY, HEAD & TITLE
  • 17. BODY, HEAD & TITLE <html> <head> <title>Este es el título de...</title> </head> <body> <h1>Este es el cuerpo de la página</h1> <p>Cualquier cosa dentro del cuerpo de la página web se muestra en la ventana principal del navegador.</p> </body> </html>
  • 18. BODY, HEAD & TITLE
  • 19. Las páginas HTML son en realidad documentos de texto. RESUMEN
  • 20. El HTML utiliza etiquetas que actuan como contenedores. RESUMEN
  • 21. A las etiquetas se les hace referencia a menudo como elementos. RESUMEN
  • 22. Las etiquetas generalmente estan en pares. Etiquetas de apertura denotan el inicio de un contenido, y las de cierre denotan el final. RESUMEN
  • 23. Las etiquetas de apertura pueden contener atributos que indican informació n adicional del elemento que contienen. RESUMEN
  • 24. Los atributos requieren nombre y valor. RESUMEN
  • 25. ARCHIVOS HTML Una página es un archivo donde está contenido el código HTML en forma de texto. Estos archivos tienen extensión .html o .htm (es indiferente cuál utilizar). Consejo: Utiliza siempre la misma extensión en tus archivos HTML. Eso evitará que te confundas al escribir los nombres de tus archivos unas veces con .htm y otras con .html.
  • 26. ARCHIVOS HTML Consejo: Utiliza nombres en tus archivos que tengan algunas normas básicas para ahorrarte disgustos y líos. No utilices acentos ni espacios ni otros caracteres especiales.( !”·$%&/=*ª ñ etc.) También te ayudará escribir siempre las letras en minúsculas. Emplea nombres descriptivos para que te aclaren lo que hay dentro. Algún caracter como el guión "-" o el guión bajo "_" te puede ayudar a separar las palabras. Por ejemplo quienes_somos.html

Editor's Notes

  1. Explain: HTML uses tags to act like containers. They indicate the structure of things found inside them. Click: Outlines around &amp;lt;html&amp;gt; Click: Outlines around &amp;lt;body&amp;gt; Click: Outlines around &amp;lt;h1&amp;gt; Click: Outlines around &amp;lt;h2&amp;gt; Click: Outlines around &amp;lt;p&amp;gt;
  2. Explain: Most tags come in pairs: an opening and closing tag. Mention use of the term &amp;quot;element&amp;quot;. Click: Opening tag Click: Closing tag Click: Label for character(s) which indicates purposes of tag Click: Label for left-angle bracket Click: Label for right-angle bracket Click: Label for forward slash
  3. Explain: Attributes can be used on opening tags. They tell us more about the content of that element. Click: Highlights the attribute name Click: Highlights the attribute value
  4. Explain: The overall structure of a page is comprised of two parts: the &amp;lt;head&amp;gt; and the &amp;lt;body&amp;gt;.
  5. Explain: The &amp;lt;title&amp;gt; tag sits inside the &amp;lt;head&amp;gt; element.
  6. Explain: This highlights where the content of the &amp;lt;title&amp;gt; tag appears.
  7. Explain: The &amp;lt;body&amp;gt; comes directly after the &amp;lt;head&amp;gt; and everything inside this element is shown in the main browser window.
  8. Explain: This highlights where the content of the &amp;lt;body&amp;gt; tag appears.
  9. Clicks: Load individual bullet points.
  10. Explain: The &amp;lt;body&amp;gt; comes directly after the &amp;lt;head&amp;gt; and everything inside this element is shown in the main browser window.
  11. Explain: The &amp;lt;body&amp;gt; comes directly after the &amp;lt;head&amp;gt; and everything inside this element is shown in the main browser window.