h t m l tema 2 formatos, listas y tablas
DESCRIPTION
Tema 2 HTML - pruebas con slide shareTRANSCRIPT
![Page 1: H T M L Tema 2 Formatos, Listas Y Tablas](https://reader035.vdocuments.pub/reader035/viewer/2022062405/558333f2d8b42a752f8b4c60/html5/thumbnails/1.jpg)
HTML
Tema 2: Formatos, listas y tablas
![Page 2: H T M L Tema 2 Formatos, Listas Y Tablas](https://reader035.vdocuments.pub/reader035/viewer/2022062405/558333f2d8b42a752f8b4c60/html5/thumbnails/2.jpg)
Curso 2006 - 2007 Antonio Berrocal PirisI.A.I.G.
HTML – Tema 2: Formatos, listas y tablas
Diapositiva resumen
1. Espacios, tabuladores, …2. Texto preformateado - <pre>3. Elementos en línea o en bloque4. Atributos title y align 5. Bloques de texto - <div> y
<span>6. Párrafos y saltos de línea – <p>
y <br>7. Elementos para títulos o
cabeceras8. Texto estructurado – Elementos
de frase – <em>, <strong>, …
9. Citas - <BLOCKQUOTE> y <Q>
10. Subíndices y superíndices - <sub> y <sup>
11. Elementos <Font> y <BaseFont>
12. Colores en HTML13. Elementos de estilo de fuente -
<tt>, <i>, <b>, …14. Elemento separador - <hr>15. Listas16. Tablas
![Page 3: H T M L Tema 2 Formatos, Listas Y Tablas](https://reader035.vdocuments.pub/reader035/viewer/2022062405/558333f2d8b42a752f8b4c60/html5/thumbnails/3.jpg)
Curso 2006 - 2007 Antonio Berrocal PirisI.A.I.G.
HTML – Tema 2: Formatos, listas y tablas
Espacios, tabuladores, …
Cuando un navegador lee el código HTML de una página y lo interpreta para mostrar la página, todos los espaciados múltiples, tabulados o saltos de línea que se haya incluido en los textos serán interpretados como un único espacio (a excepción de la etiqueta <pre>). Lo vemos en un ejemplo:
Ejemplo 2.1: Crea una página Web en la que introduzcas cualquier texto, utiliza saltos de línea, espaciado múltiple y tabulaciones. Comprueba si el navegador respeta el formato que has utilizado.
Ejercicio 2.1
![Page 4: H T M L Tema 2 Formatos, Listas Y Tablas](https://reader035.vdocuments.pub/reader035/viewer/2022062405/558333f2d8b42a752f8b4c60/html5/thumbnails/4.jpg)
Curso 2006 - 2007 Antonio Berrocal PirisI.A.I.G.
HTML – Tema 2: Formatos, listas y tablas
Texto preformateado - <pre>
<pre> Texto preformateado, implica que se respetan los espacios, tabuladores, etc </pre>
Ejercicio 2.2
![Page 5: H T M L Tema 2 Formatos, Listas Y Tablas](https://reader035.vdocuments.pub/reader035/viewer/2022062405/558333f2d8b42a752f8b4c60/html5/thumbnails/5.jpg)
Curso 2006 - 2007 Antonio Berrocal PirisI.A.I.G.
HTML – Tema 2: Formatos, listas y tablas
Atributos title y align
title = “texto” título del elemento. En algunos elementos, como acronym o abbr, al pasar el ratón sobre ellos se muestra el texto de este atributo.
align = left, center, right o justify (izquierda, centrado, derecha o justificado) especifica la alineación horizontal, para elementos tipo bloque como los párrafos (<p>)
![Page 6: H T M L Tema 2 Formatos, Listas Y Tablas](https://reader035.vdocuments.pub/reader035/viewer/2022062405/558333f2d8b42a752f8b4c60/html5/thumbnails/6.jpg)
Curso 2006 - 2007 Antonio Berrocal PirisI.A.I.G.
HTML – Tema 2: Formatos, listas y tablas
Elementos en línea o en bloque
Elementos en bloque suelen provocar un salto de línea antes y otro después. Pueden contener otros elementos en línea y algunos también otros elementos en bloque. Por ejemplo: <p> (párrafo), <ol> (lista ordenada) o <li> (lista)
Elemento en línea no pueden contener elementos en bloque. No suelen provocar un salto de línea. Por ejemplo: <em> (énfasis) o <abbr> (abreviatura).
![Page 7: H T M L Tema 2 Formatos, Listas Y Tablas](https://reader035.vdocuments.pub/reader035/viewer/2022062405/558333f2d8b42a752f8b4c60/html5/thumbnails/7.jpg)
Curso 2006 - 2007 Antonio Berrocal PirisI.A.I.G.
HTML – Tema 2: Formatos, listas y tablas
Bloques de texto - <div> y <span>
Se utilizan para añadir estructura a los documentos Contenedores genéricos
Si el contenido es en línea, por ejemplo, una frase de un párrafo, utilizamos <span> y si es en bloque, como los párrafos, utilizamos <div>
Se utilizan mucho junto con CSS (hojas de estilo)
<center>Texto centrado</center> equivale a <div align=“center”>Texto centrado</div>
Ejercicio 2.3
![Page 8: H T M L Tema 2 Formatos, Listas Y Tablas](https://reader035.vdocuments.pub/reader035/viewer/2022062405/558333f2d8b42a752f8b4c60/html5/thumbnails/8.jpg)
Curso 2006 - 2007 Antonio Berrocal PirisI.A.I.G.
HTML – Tema 2: Formatos, listas y tablas
Párrafos y saltos de línea – <p> y <br>
<p> párrafo </p> no puede contener otros elementos de tipo bloque (por ejemplo anidar con otro <p>), sí de línea
<br> salto de línea (no tiene etiqueta de cierre)
Ejercicio 2.4
![Page 9: H T M L Tema 2 Formatos, Listas Y Tablas](https://reader035.vdocuments.pub/reader035/viewer/2022062405/558333f2d8b42a752f8b4c60/html5/thumbnails/9.jpg)
Curso 2006 - 2007 Antonio Berrocal PirisI.A.I.G.
HTML – Tema 2: Formatos, listas y tablas
Elementos para títulos o cabeceras
Elementos de tipo título para diferenciar partes del contenido.
Muchos lo utilizan simplemente para aumentar el tamaño del texto, pero es incorrecto.
Inicio Ejercicio 2.5
![Page 10: H T M L Tema 2 Formatos, Listas Y Tablas](https://reader035.vdocuments.pub/reader035/viewer/2022062405/558333f2d8b42a752f8b4c60/html5/thumbnails/10.jpg)
Curso 2006 - 2007 Antonio Berrocal PirisI.A.I.G.
HTML – Tema 2: Formatos, listas y tablas
Texto estructurado – Elementos de frase (I) – <em>, <strong>, …
Normalmente <em> se representa como cursiva y <strong> como negrita.
Los sintetizadores de voz pueden cambiar los parámetros de síntesis, como el volumen, el tono y la velocidad
Indican el significado del texto que encierran, no cómo se tiene que representar
![Page 11: H T M L Tema 2 Formatos, Listas Y Tablas](https://reader035.vdocuments.pub/reader035/viewer/2022062405/558333f2d8b42a752f8b4c60/html5/thumbnails/11.jpg)
Curso 2006 - 2007 Antonio Berrocal PirisI.A.I.G.
HTML – Tema 2: Formatos, listas y tablas
Texto estructurado – Elementos de frase (II)
![Page 12: H T M L Tema 2 Formatos, Listas Y Tablas](https://reader035.vdocuments.pub/reader035/viewer/2022062405/558333f2d8b42a752f8b4c60/html5/thumbnails/12.jpg)
Curso 2006 - 2007 Antonio Berrocal PirisI.A.I.G.
HTML – Tema 2: Formatos, listas y tablas
Texto estructurado – Elementos de frase (y III)
Valor del atributo título al pasar el ratón
Continúa Ejercicio 2.5
![Page 13: H T M L Tema 2 Formatos, Listas Y Tablas](https://reader035.vdocuments.pub/reader035/viewer/2022062405/558333f2d8b42a752f8b4c60/html5/thumbnails/13.jpg)
Curso 2006 - 2007 Antonio Berrocal PirisI.A.I.G.
HTML – Tema 2: Formatos, listas y tablas
Citas - <BLOCKQUOTE> y <Q>
<blockquote> cita larga, contenido en bloque. Muchos lo utilizan para dar márgenes al texto, aunque está desaprobado. </blockquote>
<q> cita corta, contenido en línea que no produce cambio de párrafo. </q>
Continúa Ejercicio 2.5
![Page 14: H T M L Tema 2 Formatos, Listas Y Tablas](https://reader035.vdocuments.pub/reader035/viewer/2022062405/558333f2d8b42a752f8b4c60/html5/thumbnails/14.jpg)
Curso 2006 - 2007 Antonio Berrocal PirisI.A.I.G.
HTML – Tema 2: Formatos, listas y tablas
Subíndices, superíndices y direcciones - <sub>, <sup> y <address>
<sub> subíndice </sub> <sup> superíndice </sup>
<address> dirección-información de contacto</address>
Fin Ejercicio 2.5
![Page 15: H T M L Tema 2 Formatos, Listas Y Tablas](https://reader035.vdocuments.pub/reader035/viewer/2022062405/558333f2d8b42a752f8b4c60/html5/thumbnails/15.jpg)
Curso 2006 - 2007 Antonio Berrocal PirisI.A.I.G.
HTML – Tema 2: Formatos, listas y tablas
Elementos <Font> y <BaseFont>
<font> y <basefont> se utilizan para dar formato al texto (ambos están desaprobados)
<basefont> establece las propiedades de fuente por defecto para el documento. Normalmente se pone después de la etiqueta <body>.
Atributo Descripción Valores
size Tamaño Valor entero entre 1 y 7, por defecto es el 3. Si ponemos + o – delante es incremento con respecto a la base (establecida con basefont)
color Color Ver diapositiva de color
face Fuente Lista de nombres de fuentes separados por comas. El navegador mostrará la primera que conozca
Inicio Ejercicio 2.6
![Page 16: H T M L Tema 2 Formatos, Listas Y Tablas](https://reader035.vdocuments.pub/reader035/viewer/2022062405/558333f2d8b42a752f8b4c60/html5/thumbnails/16.jpg)
Curso 2006 - 2007 Antonio Berrocal PirisI.A.I.G.
HTML – Tema 2: Formatos, listas y tablas
Elementos de estilo de fuente - <tt>, <i>, <b>, …
Elemento Descripción Ejemplo
<tt> Como de máquina de escribir (ancho fijo)
<i> Texto en itálica (cursiva)
<b> Texto en negrita
<big> Tamaño de texto mayor
<small> Tamaño de texto menor
<u> Texto subrayado
<strong>, <em>, … indican cómo interpretar el texto (más importante, menos, etc), mientras que <b>, <i>, .. Indican cómo representarlo
en la práctica la mayoría de los navegadores representan <strong> igual que <b>
(negrita) y <em> igual que <i> (cursiva)
Continúa Ejercicio 2.6
![Page 17: H T M L Tema 2 Formatos, Listas Y Tablas](https://reader035.vdocuments.pub/reader035/viewer/2022062405/558333f2d8b42a752f8b4c60/html5/thumbnails/17.jpg)
Curso 2006 - 2007 Antonio Berrocal PirisI.A.I.G.
HTML – Tema 2: Formatos, listas y tablas
Elemento separador - <hr>
<hr> muestra una línea horizontal No tiene etiqueta de cierre
Atributo Descripción Valores
align Alineación center (valor por defecto), left (izquierda) o right (derecha)
noshade Sin sombra No tiene valor
size Tamaño (alto) Alto de la barra en píxeles.
width Tamaño (ancho)
Ancho de la barra en píxeles o en tanto por ciento
Fin Ejercicio 2.6
![Page 18: H T M L Tema 2 Formatos, Listas Y Tablas](https://reader035.vdocuments.pub/reader035/viewer/2022062405/558333f2d8b42a752f8b4c60/html5/thumbnails/18.jpg)
Curso 2006 - 2007 Antonio Berrocal PirisI.A.I.G.
HTML – Tema 2: Formatos, listas y tablas
Listas (I)
OrdenadasDesordenadas
De definición
![Page 19: H T M L Tema 2 Formatos, Listas Y Tablas](https://reader035.vdocuments.pub/reader035/viewer/2022062405/558333f2d8b42a752f8b4c60/html5/thumbnails/19.jpg)
Curso 2006 - 2007 Antonio Berrocal PirisI.A.I.G.
HTML – Tema 2: Formatos, listas y tablas
Listas (y II) - atributos para las listas ordenadas <ol> y desordenadas <ul>
La etiqueta final de <li> puede omitirse Pueden estar anidadas
Atributo Descripción Valores
type Tipo del objeto <OL> 1 (1, 2, 3,…), a (a, b, c, …), A (A, B, C, …), i (i, ii, iii,….), I (I, II, III,…)
<UL> disc (disco), square (cuadrado), circle (círculo)
start Valor inicial Es el número de comienzo de la lista, por defecto es 1. Sólo se aplica a <ol>
value Valor Es el número del elemento. Solo se aplica a <li>
compact Modo compacto
No tiene valor
Ejercicio 2.7
![Page 20: H T M L Tema 2 Formatos, Listas Y Tablas](https://reader035.vdocuments.pub/reader035/viewer/2022062405/558333f2d8b42a752f8b4c60/html5/thumbnails/20.jpg)
Curso 2006 - 2007 Antonio Berrocal PirisI.A.I.G.
HTML – Tema 2: Formatos, listas y tablas
Tablas - Introducción
Es una estructura compleja que necesita la unión de varios elementos, todos contenidos dentro de <table>
Se suelen utilizar para organizar la presentación de los contenidos pero es mejor utilizar hojas de estilo.
Cada fila se identifica por el elemento <tr> y cada celda por <th> (celda tipo encabezado) o <td>. Las celdas pueden contener cualquier elemento HTML: texto, imágenes, enlaces e incluso otras tablas anidadas
También hay otros elementos útiles en la construcción de tablas:– <caption> título de la tabla, aparece después de la etiqueta <table> y
sólo una vez– <thead>, <tfoot> y <tbody> para dividir la tabla en secciones (cabecera,
pie y cuerpo)– <colgroup> y <col> para definir la estructura de la tabla y ayudar a su
representación por parte de los navegadores.
El tamaño especificado a la tabla es respetado por los navegadores siempre que quepa el contenido, si no, se redimensiona de forma automática.
![Page 21: H T M L Tema 2 Formatos, Listas Y Tablas](https://reader035.vdocuments.pub/reader035/viewer/2022062405/558333f2d8b42a752f8b4c60/html5/thumbnails/21.jpg)
Curso 2006 - 2007 Antonio Berrocal PirisI.A.I.G.
HTML – Tema 2: Formatos, listas y tablas
Tablas – Atributos de <table> (I)
Vista en Internet ExplorerVista en Mozilla Firefox
Width, cellpadding y cellspacing pueden ser: pixeles (p.e. 3) o porcentaje del espacio libre (p.e. 40%)
Align alineación de la tabla no de su contenido
![Page 22: H T M L Tema 2 Formatos, Listas Y Tablas](https://reader035.vdocuments.pub/reader035/viewer/2022062405/558333f2d8b42a752f8b4c60/html5/thumbnails/22.jpg)
Curso 2006 - 2007 Antonio Berrocal PirisI.A.I.G.
HTML – Tema 2: Formatos, listas y tablas
Tablas – Atributos de <table> (II)
![Page 23: H T M L Tema 2 Formatos, Listas Y Tablas](https://reader035.vdocuments.pub/reader035/viewer/2022062405/558333f2d8b42a752f8b4c60/html5/thumbnails/23.jpg)
Curso 2006 - 2007 Antonio Berrocal PirisI.A.I.G.
HTML – Tema 2: Formatos, listas y tablas
Tablas – Atributos de <table> (y III)
Vista en Internet Explorer
Vista en Internet Explorer
![Page 24: H T M L Tema 2 Formatos, Listas Y Tablas](https://reader035.vdocuments.pub/reader035/viewer/2022062405/558333f2d8b42a752f8b4c60/html5/thumbnails/24.jpg)
Curso 2006 - 2007 Antonio Berrocal PirisI.A.I.G.
HTML – Tema 2: Formatos, listas y tablas
Tablas – Atributos de <caption>
Vista en Mozilla Firefox
![Page 25: H T M L Tema 2 Formatos, Listas Y Tablas](https://reader035.vdocuments.pub/reader035/viewer/2022062405/558333f2d8b42a752f8b4c60/html5/thumbnails/25.jpg)
Curso 2006 - 2007 Antonio Berrocal PirisI.A.I.G.
HTML – Tema 2: Formatos, listas y tablas
Tablas – Atributos de filas <tr>
Vista en Mozilla Firefox
Estos atributos afectan a todas las celdas de la fila
![Page 26: H T M L Tema 2 Formatos, Listas Y Tablas](https://reader035.vdocuments.pub/reader035/viewer/2022062405/558333f2d8b42a752f8b4c60/html5/thumbnails/26.jpg)
Curso 2006 - 2007 Antonio Berrocal PirisI.A.I.G.
HTML – Tema 2: Formatos, listas y tablas
Tablas – Atributos de celdas <th> y <td>
Vista en Mozilla Firefox
Width y height pueden ser: pixeles (p.e. 30) o porcentaje del espacio libre (p.e. 40%)
Nowrap deshabilita el ajuste automático de línea, es decir, no divide una línea en varias
Colspan, rowspan combinación de celdas Ejercicios 2.8 - 2.11
![Page 27: H T M L Tema 2 Formatos, Listas Y Tablas](https://reader035.vdocuments.pub/reader035/viewer/2022062405/558333f2d8b42a752f8b4c60/html5/thumbnails/27.jpg)
Fin Tema 2 – Formatos, listas y tablas
Volver al índice