FPE Diseñador Web y Multimedia<br />Carmina Barreiro. Curso de Adams.<br />Módulo 1. <br />Teoría. Planificar y entender. ...
EL HTML<br />Definición:<br />HTML:  HyperTextMarkupLanguage (Lenguaje de Marcado de Hipertexto), es el lenguaje de marcad...
EL HTML<br />Un poco de historia<br />En 1991 Tim Berners-Lee hace la primera descripción de HTML, en un documento llamado...
EL HTML<br />Estructura básica del código:<br />Etiquetas <--><br />Elementos. Formado por Etiquetas, atributo y contenido...
EL HTML<br />Estructura básica del código:<br /><p align=“center”> Esto es un párrafo </p><br />Elemento<br />Etiqueta Ini...
El atributo de un elemento se especifica en la etiqueta de inicio.
La mayoría de los atributos de un elemento son pares nombre-valor, separados por un signo de igual «=»</li></li></ul><li>E...
EL HTML<br />Tipos de marcado<br />Presentacional o de formato:<br />El marcado presentacionaldescribe la apariencia del t...
EL HTML<br />Tipos de marcado<br />Estructural:<br />El marcado estructuraldescribe el propósito del texto.<br />El marcad...
EL HTML<br />Tipos de marcado<br />Hipertextual:<br />El marcado hipertextual se utiliza para enlazar partes del documento...
EL HTML<br />Partes esenciales del documento HTML<br />-HTML define el inicio del documento HTML, le indica al navegador q...
EL HTML<br />Así se ve el código<br /><html><head><title>Un Ejemplo</title></head><body><p>Esta es una página web con <str...
EL HTML<br />Etiquetas del <Head><br /><title>: define el título de la página. Aparece en la ventana del navegador y en la...
EL HTML<br />Etiquetas de Formato:<br /><b>: texto en negrita (etiqueta desaprobada. Se recomienda usar la etiqueta <stron...
EL HTML<br />Tabla de Acentos:<br />
EL HTML<br />Etiquetas HTML:<br /><h1> a <h6>: encabezados o títulos del documento con diferente relevancia.<br />Atributo...
EL HTML<br />Etiquetas HTML:<br /><p>: etiqueta para párrafo.<br />Atributo etiquetas <p> align<br />Valores: center cen...
EL HTML<br />Etiquetas HTML:<br /><ul><li>: etiquetas para listas.<br /><blockquote>: etiqueta para citas. Aumenta el marg...
EL HTML<br />Etiquetas HTML:<br /><img>: imagen. Requiere del atributo src, que indica la ruta en la que se encuentra la i...
EL HTML<br />Etiquetas HTML:<br /><font>: determina el tipo de letra en que se mostrará en contenido.<br /><fontface=“Time...
EL HTML<br />Etiquetas HTML:<br /><a>: hipervínculo o enlace. <br />Atributo href Tipo de enlaces:<br />Internos:<br />Ab...
EL HTML<br />Etiquetas HTML:<br /><a>: hipervínculo o enlace. <br />Atributos:<br />title: información extra<br />target:<...
EL HTML<br />Etiquetas HTML:<br /><a>: hipervínculo o enlace. <br />Estado de los enlaces:<br />No visitado  unvisited<br...
EL HTML<br />Etiquetas HTML:<br /><body>: especifica características de la página como el fondo, ancho, apariencia de los ...
EL HTML<br />Etiquetas HTML:<br /><body>: especifica características de la página como el fondo, ancho, apariencia de los ...
EL HTML<br />Etiquetas HTML:<br /><br/>: salto de linea<br /><hr /> linea horizontal<br />
EL HTML<br />Etiquetas HTML:<br /><table>: define una tabla.<br /><tr>: fila de una tabla.<br /><td>: celda de una tabla (...
EL HTML<br />Etiquetas HTML:<br /><table><br />Atributos de tamaño y disposición:<br />align<br />width<br />height<br />v...
EL HTML<br />Etiquetas HTML:<br /><table><br />Atributos de color y apariencia:<br />border<br />background<br />bgcolor<b...
EL HTML<br />Etiquetas HTML:<br /><tr><br />Atributos:<br />align<br />background<br />bgcolor<br />bordercolor<br />borde...
EL HTML<br />Etiquetas HTML:<br /><td><br />Atributos:<br />align<br />background<br />bgcolor<br />bordercolor<br />borde...
Upcoming SlideShare
Loading in …5
×

Curso FPE Diseño Web. Módulo 2. El HTML

2,282 views

Published on

Módulo 2 del Curso FPE de Diseño Web impartido en Adams, Sevilla. Segundo Módulo, sobre la estructura y principales etiquetas del HTML 4

Published in: Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,282
On SlideShare
0
From Embeds
0
Number of Embeds
144
Actions
Shares
0
Downloads
113
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Curso FPE Diseño Web. Módulo 2. El HTML

  1. 1. FPE Diseñador Web y Multimedia<br />Carmina Barreiro. Curso de Adams.<br />Módulo 1. <br />Teoría. Planificar y entender. <br />Módulo 2. <br />HTML. El esqueleto de la web.<br />
  2. 2. EL HTML<br />Definición:<br />HTML: HyperTextMarkupLanguage (Lenguaje de Marcado de Hipertexto), es el lenguaje de marcado predominante para la elaboración de páginas web. <br />Usado para describir la estructura y el contenido en forma de texto, así como para complementar el texto con objetos tales como imágenes<br />
  3. 3. EL HTML<br />Un poco de historia<br />En 1991 Tim Berners-Lee hace la primera descripción de HTML, en un documento llamado HTML Tags (Etiquetas HTML).<br />Describía 22 elementos que comprendían el diseño inicial y relativamente simple de HTML. <br />Trece de estos elementos todavía existen en HTML 4<br />
  4. 4. EL HTML<br />Estructura básica del código:<br />Etiquetas <--><br />Elementos. Formado por Etiquetas, atributo y contenido.<br />Elemento<br />Etiqueta Inicio<br />EtiquetaCierre<br />Contenido<br /><p align=“center”> Esto es un párrafo </p><br />atributo<br />variable<br />
  5. 5. EL HTML<br />Estructura básica del código:<br /><p align=“center”> Esto es un párrafo </p><br />Elemento<br />Etiqueta Inicio<br />EtiquetaCierre<br />Contenido<br />atributo<br />variable<br /><ul><li>Cada elemento está contenido entre la etiqueta de inicio y cierre.
  6. 6. El atributo de un elemento se especifica en la etiqueta de inicio.
  7. 7. La mayoría de los atributos de un elemento son pares nombre-valor, separados por un signo de igual «=»</li></li></ul><li>EL HTML<br />Tipos de marcado o etiquetado<br />Presentacional o de formato<br />Estructural<br />Hipertextual<br />
  8. 8. EL HTML<br />Tipos de marcado<br />Presentacional o de formato:<br />El marcado presentacionaldescribe la apariencia del texto, sin importar su función. <br />Por ejemplo, <b>negrita</b> indica que los navegadores web visuales deben mostrar el texto en negrita.<br />La mayoría del marcado presentacional ha sido desechada con HTML 4.0, en favor de hojas de estilo en cascada.<br />
  9. 9. EL HTML<br />Tipos de marcado<br />Estructural:<br />El marcado estructuraldescribe el propósito del texto.<br />El marcado estructural no define cómo se verá el elemento, pero la mayoría de los navegadores web han estandarizado el formato de los elementos. <br />(Ver ejemplo)<br />
  10. 10. EL HTML<br />Tipos de marcado<br />Hipertextual:<br />El marcado hipertextual se utiliza para enlazar partes del documento con:<br />Otros sitios<br />Otras páginas<br />Partes de la misma página<br />
  11. 11. EL HTML<br />Partes esenciales del documento HTML<br />-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. <html></html><br />- Head define la cabecera del documento HTML; contiene información sobre el documento que no se muestra directamente al usuario. <head></head><br />-Bodydefine el contenido principal o cuerpo del documento. Esta es la parte del documento html que se muestra en el navegador<body></body><br />
  12. 12. EL HTML<br />Así se ve el código<br /><html><head><title>Un Ejemplo</title></head><body><p>Esta es una página web con <strong>negritas</strong>, con <em>cursivas</em>, combinando <em><strong>negritas y cursivas</strong></em>.</p><blockquote> <p>Con un párrafo más abajo y con la sangría aumentada.<br /> Así cómo un salto de línea </p></blockquote></body></html><br />Así se ve la web<br />
  13. 13. EL HTML<br />Etiquetas del <Head><br /><title>: define el título de la página. Aparece en la ventana del navegador y en la barra de título encima de la ventana.<br /><link>: para vincular el sitio a hojas de estilo o iconos. <br /><style>: para colocar el estilo interno de la página usando CSS, u otros lenguajes similares. No es necesario colocarlo si se va a vincular a un archivo externo usando la etiqueta <link>.<br /><meta>: para metadatos como la autoría, la descripción de la página y las palabras claves para buscadores.<br />
  14. 14. EL HTML<br />Etiquetas de Formato:<br /><b>: texto en negrita (etiqueta desaprobada. Se recomienda usar la etiqueta <strong>).<br /><i>: texto en cursiva (etiqueta desaprobada. Se recomienda usar la etiqueta <em>).<br /><s>: texto tachado (etiqueta desaprobada. Se recomienda usar la etiqueta <del>).<br /><u>: texto subrayado.<br />
  15. 15. EL HTML<br />Tabla de Acentos:<br />
  16. 16. EL HTML<br />Etiquetas HTML:<br /><h1> a <h6>: encabezados o títulos del documento con diferente relevancia.<br />Atributo etiquetas <h1> a <h6> align<br />Valores: center centradoleft izquierdaright derecha<br /><h1 align="center">Nombre de la web</h1><br />
  17. 17. EL HTML<br />Etiquetas HTML:<br /><p>: etiqueta para párrafo.<br />Atributo etiquetas <p> align<br />Valores: center centradoleftizquierdaright derecha<br /><p align="center">Texto de la web</p><br />
  18. 18. EL HTML<br />Etiquetas HTML:<br /><ul><li>: etiquetas para listas.<br /><blockquote>: etiqueta para citas. Aumenta el margen izquierdo y derecho en 40 píxeles aproximadamente.<br />
  19. 19. EL HTML<br />Etiquetas HTML:<br /><img>: imagen. Requiere del atributo src, que indica la ruta en la que se encuentra la imagen. Por ejemplo:<br /><imgsrc=“mifoto.jpg" height=“100” width=“80” alt=“Foto Alumno”><br />Atributos:<br />align<br />alt<br />border<br />hspace<br />vspace<br />
  20. 20. EL HTML<br />Etiquetas HTML:<br /><font>: determina el tipo de letra en que se mostrará en contenido.<br /><fontface=“Times, Arial, san-serif” size=“3”>Es es el texto</font><br />Atributos:<br />face (nombre o familia como: serif, san-serife)<br />size<br />point-size<br />color<br />
  21. 21. EL HTML<br />Etiquetas HTML:<br /><a>: hipervínculo o enlace. <br />Atributo href Tipo de enlaces:<br />Internos:<br />Absolutos<br />Relativos<br />Externos<br />Anclas:<br /><a href=“#nombre-seccion”> (enlace apunta al ancla)<br /><a name=“nombre-seccion”> (ancla a la que apunta)<br />
  22. 22. EL HTML<br />Etiquetas HTML:<br /><a>: hipervínculo o enlace. <br />Atributos:<br />title: información extra<br />target:<br />_blank_parent_self_topframename<br />
  23. 23. EL HTML<br />Etiquetas HTML:<br /><a>: hipervínculo o enlace. <br />Estado de los enlaces:<br />No visitado  unvisited<br />Activo  active<br />Visitado  visited<br />
  24. 24. EL HTML<br />Etiquetas HTML:<br /><body>: especifica características de la página como el fondo, ancho, apariencia de los enlaces.<br />Atributos del fondo:<br />bgcolor: color de fondo<br />background: imagen de fondo<br />bgproperties: lo mantiene fijo al hacer scroll. Valor: fixed<br />Atributos de márgenes:<br />topmargin<br />rightmargin<br />bottommargin<br />leftmargin<br />marginwidth<br />marginheight<br />
  25. 25. EL HTML<br />Etiquetas HTML:<br /><body>: especifica características de la página como el fondo, ancho, apariencia de los enlaces.<br />Atributos de color de los enlaces:<br />link: enlaces no visitados.<br />alink: enlaces activos.<br />vlink: enlaces visitados.<br />Otros atributos:<br />text: color del texto.<br />
  26. 26. EL HTML<br />Etiquetas HTML:<br /><br/>: salto de linea<br /><hr /> linea horizontal<br />
  27. 27. EL HTML<br />Etiquetas HTML:<br /><table>: define una tabla.<br /><tr>: fila de una tabla.<br /><td>: celda de una tabla (debe estar dentro de una fila).<br />
  28. 28. EL HTML<br />Etiquetas HTML:<br /><table><br />Atributos de tamaño y disposición:<br />align<br />width<br />height<br />vspace<br />hspace<br />cellpadding<br />cellspacing<br />
  29. 29. EL HTML<br />Etiquetas HTML:<br /><table><br />Atributos de color y apariencia:<br />border<br />background<br />bgcolor<br />bordercolordark<br />bordercolorlight<br />
  30. 30. EL HTML<br />Etiquetas HTML:<br /><tr><br />Atributos:<br />align<br />background<br />bgcolor<br />bordercolor<br />bordercolorlight<br />bordercolordark<br />height<br />valign<br />width<br />
  31. 31. EL HTML<br />Etiquetas HTML:<br /><td><br />Atributos:<br />align<br />background<br />bgcolor<br />bordercolor<br />bordercolorlight<br />bordercolordark<br />height<br />valign<br />width<br />nowrap<br />colspan<br />rowspan<br />
  32. 32. EL HTML<br />Etiquetas HTML:<br />Los comentarios. Las “chuletas” del código<br /><!-- TEXTO DEL COMENTARIO --><br />Ejemplo:<br /><!-- Aquí empiezan los RSS del Blog --><br />

×