2.

HTML Y XHTML
(PARTE II)
CARMEN MARTÍNEZ SÁNCHEZ
1. Imágenes
 Las imágenes pueden mejorar el diseño y la apariencia de una página web.
 La etiqueta HTML <img> se utiliza para incrustar una imagen en una página
web. Las imágenes no se insertan técnicamente en una página web, las
imágenes están vinculadas a la página web. La etiqueta <img> crea un espacio
para la imagen referenciada.
 La etiqueta <img> está vacía, solo contiene atributos y no tiene una etiqueta de
cierre con dos atributos “obligatorios”
 src: especifica la ruta a la imagen. Cuando se carga una página web, es el navegador, en ese
momento, el que obtiene la imagen de un servidor web y la inserta en la página. Por lo tanto,
asegúrese de que la imagen permanezca en el mismo lugar en relación con la página web, de
lo contrario, sus visitantes obtendrán un icono de enlace roto. El icono de enlace roto y el
texto alternativo se muestran si el navegador no puede encontrar la imagen.
 alt: proporciona un texto alternativo para una imagen, si el usuario por alguna razón no puede
verla (debido a una conexión lenta, un error en el atributo src, o si el usuario usa un lector
de pantalla). El valor del atributo alt debe describir la imagen
 <img src="url" alt=”texto alternativo">
 Es posible usar el atributo style para especificar el ancho (width) o la altura
(height) de una imagen.
 <img src=”URL" alt=”texto alternativo" style="width:500px;height:600px;">

 Es posible utilizar los atributos width y height directamente (sin style).

 <img src=”URL" alt=”texto alternativo" width="500" height="600">

 Los atributos de ancho y alto siempre definen el ancho y alto de la imagen

en píxeles
 ¿Es mejor indicar width y height dentro del atributo style o como atributos
directamente? La recomendación es utilizar el atributo de estilo, de esta
manera evitamos que las hojas de estilos cambien el tamaño de las imágenes
 HTML permite gifs animados
 Es posible utilizar la propiedad <float> para dejar que la imagen “flote” a la
derecha o a la izquierda de un texto.
 Se puede especificar una imagen de fondo para casi cualquier elemento HTML.
 Para agregar una imagen de fondo en un elemento HTML, use el atributo
style y propiedad CSS background-image
 Como podemos ver, si la imagen de fondo es más pequeña que el elemento,
la imagen se repetirá, horizontal y verticalmente, hasta llegar al final del
elemento.
 Para evitar que la imagen de fondo se repita, se esteblece la propiedad
background-repeat con el valor no-repeat.
 Si la imagen de fondo sale no repetida saldrá situada en la parte superior
izquierda. Para evitar esto podemos utilizar la propiedad background-position y
darle por ejemplo el valor center si queremos que trate de centrar dicha
imagen
 Esta propiedad es bastante compleja, en este enlace podemos ver más
información sobre la cantidad y utilidad de los valores que puede tomar la
misma: https://uniwebsidad.com/libros/referencia-css2/background-position
 Si desea que la imagen de fondo cubra todo el elemento, puede establecer la
propiedad background-size con el valor cover.

 Además, para asegurarse de que todo el elemento vaya a estar cubierto, se

deberá establecer la propiedad background-attachment en fixed.

 La imagen de fondo cubrirá todo el elemento, sin estiramiento (la imagen

mantendrá sus proporciones originales).
 Para que la imagen de fondo se estire para ajustarse a todo el elemento,
puede establecer la propiedad background-size en 100% 100%
 Aunque se cambie el tamaño de la ventana del navegador la imagen se
estirará, pero siempre cubrirá todo el elemento.
 Además del elemento <img> existe el elemento HTML <picture> que brinda a
los diseñadores web más flexibilidad para especificar recursos de imágenes.
 El elemento <picture> contiene a su vez uno o más elementos <source>,
cada uno de los cuales hace referencia a diferentes imágenes a través del
atributo srcset. De esta forma, el navegador puede elegir la imagen que mejor
se adapte a la vista y/o dispositivo.
 Cada elemento <source> tiene un atributo media que define cuándo la imagen es la más
adecuada.
 Se recomienda especificar siempre un elemento <img> como último elemento secundario del
elemento <picture> que será el que utilicen los navegadores que no admiten el elemento
<picture>, o si ninguna de las etiquetas <source> coincide.
 En el navegador del ordenador se muestra:
 Imagen en un dispositivo móvil
 ¿Cuándo usar el elemento Picture?
 Para que los dispositivos que tienen una pantalla o dispositivo pequeño, no tengan la
necesidad de cargar un archivo de imagen grande. El navegador utilizará el primer elemento
<source> con valores de atributo coincidentes e ignorará cualquiera de los siguientes
elementos.
 Es posible que algunos navegadores o dispositivos no admitan todos los formatos de imagen.
Al usar el elemento <picture>, puede agregar imágenes de todos los formatos, y el navegador
usará el primer formato que reconozca e ignorará cualquiera de los siguientes elementos (en
el siguiente ejemplo, si el navegador no puede abrir imágenes png, abrirá la jpg y en su
defecto el gif).
2. Tablas

 Tienen como principal función permitir organizar los datos en filas y columnas.
 Está formada por celdas dentro de filas y columnas.
TD
 Cada celda de la tabla está definida por una etiqueta <td> y </td>.
 Todo entre <td> y </td> es el contenido de la celda de la tabla.
 td  table data

 Una celda de datos puede contener todo tipo de elementos HTML, texto,
imágenes, listas, otras tablas, etc.
TR
 Cada fila de la tabla comienza con una etiqueta <tr> y termina con una etiqueta
</tr>.
 tr  table row

 Se pueden tener tantas filas como se deseen en una tabla (OJO: debemos
asegurarnos que la cantidad de celdas sea la misma en cada fila, aunque en
ocasiones puede darse que una fila pueda tener más o menos celdas que otra).
TH
 A veces es posible que sus celdas sean encabezados, en estos casos
debemos usar la etiqueta <th> en lugar de la etiqueta <td>.
 De forma predeterminada, el texto de los elementos <th> está en negrita y
está centrado, pero puede cambiarlo con CSS.
2.1. Bordes

 Las tablas HTML pueden tener bordes de diferentes estilos y formas.

 Al añadir un borde a una tabla, también se pueden añadir bordes alrededor
de cada celda de la tabla.
 Para añadir bordes, se utiliza la propiedad border en los elementos table, th
y td.
 Recordatorio propiedad border: Se deben indicar tres valores: border-width, border-style y
border-color
 Para evitar tener bordes dobles como en el ejemplo anterior, se puede
utilizarla propiedad CSS border-collapse dándole el valor collapse. Esto hará
que los bordes colapsen en un solo borde.

 ¿Qué otros valores puede tomar la propiedad border-collapse y cuál sería el

efecto de cada uno de ellos?
 Valores de border-collapse
 separate  Valor por defecto. Cada celda tiene sus propios bordes.
 collapse  Los bordes se ”juntan” en un solo borde cuando es posible.
 initial  Establece esta propiedad en su valor predeterminado: separate.
 inherit  Hereda esta propiedad de su elemento padre.

 TRUCO: Si se establece un color de fondo para cada celda y se le da al

borde un color blanco (el mismo que el fondo del documento), tendrá la
impresión de un borde invisible
 Con la propiedad border-radius, los bordes obtienen esquinas redondeadas

 Modifica el style para ver el efecto de border-radius en una tabla

convencional sin bordes blancos.
 ¿Y si solamente quiero que salgan en las celdas?
2.2 Tamaños de tabla
 Las tablas HTML pueden tener diferentes tamaños
para cada columna, fila o la tabla completa.
 Para ello se utilizan las propiedades ya conocidas
width y height del atributo Style.
 Si usamos el porcentaje para el ancho significa
qué tan ancho en comparación con su elemento
principal, en este caso el elemento <body>.

¿Cómo podemos hacer para que las dos primeras columnas tengan un
mayor tamaño que la de Nota?
 Al igual que con el ancho, se puede hacer lo mismo con la altura. ¿Cómo
podemos darle una mayor altura a la última fila?
2.3. Encabezados de tabla

 Las tablas HTML pueden tener encabezados para cada columna o fila, o para
muchas columnas/filas.
 Los encabezados son definidos con el elemento th que a su vez representa
una celda.
 Para usar la primera columna como encabezado de la tabla, defina la primera
celda de cada fila como un elemento th
¿Cómo sería el ejemplo que estamos utilizando para que la cabecera fuera la
primera columna en lugar de ser la primera fila?
 Por defecto, los
encabezados de las
tablas están en
negrita y centrados.
 Es posible utilizar el
elemento <caption>
para agregar un
título que sirva para
la tabla completa.
 2.4. Relleno y espaciado de tablas
 Es posible ajustar el relleno dentro de las celdas y
también el espacio entre las mismas.
 Con relleno nos referimos al espacio existente entre los
bordes de la celda y el contenido de la celda. De forma
predeterminada este tiene el valor 0.
 Para poder ajustarlo se utiliza la propiedad CSS padding
 En lugar de padding que hace el relleno de manera
uniforme, si se desea que este sea distinto en cada lado
se pueden utilizar las propiedades: padding-top, padding-
bottom, padding-left y padding-right.
 Para establecer espacio entre celdas se deberá utilizar la propiedad CSS
border-spacing, cuyo valor por defecto es de 2 pixels.
 Para ver mejor la diferencia vamos a quitar la opción border-collapse
2.5 Colspan y Rowspan

 Las tablas HTML pueden

tener celdas que abarcan
varias filas y/o columnas.
 Para tener una celda que
ocupa más de una columna
se utiliza la propiedad
colspan
 Para tener una celda que
ocupe diferentes filas,
utilizaré el atributo
rowspan
2.6. Estilos en tablas - Selectores

 Es muy importante utilizar los estilos en las tablas para obtener un mejor
aspecto.
 Uno de los efectos que podemos utilizar es dar un color de fondo alterno
para cada fila (efecto de rayas de cebra), de tal manera que las filas pares
tengan un estilo y las impares tengan un estilo diferente (color de fondo y
demás) o viceversa.
 Para ello vamos a anticipar un concepto muy importante en HTML:
Selectores.
 Un selector es es el instrumento que proporciona CSS para determinar qué
partes de la página web se van a ver afectados por el código CSS que
indiquemos.
 A la hora de aplicar un estilo hemos visto que podemos aplicarlo para un
determinado elemento (por ejemplo, h1), pero también podemos hacer
selecciones más elaboradas para seleccionar un elemento concreto mediante
su identificador, seleccionar elementos mediante su jerarquía en la página,
valor de sus atributos, etc.

 Hacer buenas selecciones nos permitirá conseguir hojas de estilos muy

sofisticadas, coherentes y fáciles de mantener. Lo ideal es que HTML y CSS
funcionen de forma independiente, de forma que cuando queramos dar
formato a nuestros documentos, no tengamos que tocar el código HTML.
 Existen diferentes maneras de indicar un selector (simples, jerárquicos,
pseudoclases, etc.) que veremos en el tema de CSS.
 Uno de los selectores de tipo jerárquico es el que se aplica a los
descendientes de un elemento, en el caso de la tabla podemos indicar que
aplique un estilo diferente en función del número de hijo suyo que sea.
 De esta manera vamos a utilizar el selector  elemento:nth-child(num_hijo)

 Si queremos que la tercera fila tenga un estilo determinado podemos definir

un estilo para el elemento tr:nth-child(3), esto seleccionará la tercera fila de
una tabla.
 Si queremos seleccionar las filas impares se indicaría como tr:nth-child(odd) y las pares
como tr:nth-child(even)
 Esto también es posible conseguirlo como tr:nth-child(2n+1) para las impares y tr:nth-child(2n)
para las pares. Con la variable n se pueden conseguir fórmulas más complejas

¿Cómo podemos conseguir por tanto el efecto cebra en nuestra tabla?

 Podemos fijarnos que al aplicar el efecto sobre el elemento tr y las filas
pares, cuenta también la primera fila, es decir, la fila cuyos elementos son el
encabezado.
 Para conseguir el efecto en lugar de filas pares que sean para columnas
pares lo aplicaremos en el elemento td (debemos aplicarlo también en th si
queremos que el encabezado también salga con el formato cebra).
¿Cómo podríamos aplicar este estilo de cebra con un style Inline?
 Los estilos Inline son por elemento y cuando se utilizan selectores no se tiene
claro el elemento o los elementos a los que aplicar, por lo que tendría que
inyectar los estilos apropiados en el atributo de estilo de todos los demás
elementos tr.
 Pero claro, es posible que se estén generando estas filas dinámicamente.
 En definitiva, aplicar estilos Inline y Selectores no es algo trivial, por lo que
una posible solución en este caso es hacer una selección por identificador.
 He duplicado la tabla y a la primera la he identificado como tablaCebra y la segunda como
tablaNoCebra
¿Cómo se definen los estilos para un Selector por identificador?
 Para indicar el valor se usa el símbolo # seguido del identificador.
 Si quiero indicar un estilo para toda la tabla sería #NombreIdentificador y en
el caso de nuestro efecto cebra sería #NombreIdentificador seguido del
selector jerárquico.
 Por ejemplo para tablaNoCebra vamos a indicar que el color de letra sea rojo
y en tablaCebra el efecto indicado de que las columnas pares tengan el color
de fondo powderblue.
 Si queremos conseguir que nuestra tabla solamente tenga una línea en la
parte inferior podemos utilizar por ejemplo la propiedad border-bottom
2.7. Colgroup
 Se utiliza el elemento <colgroup> para diseñar un estilo para columnas
específicas de una tabla.
 Si tú quieres un estilo para columnas de una tabla puedes utilizar el
contenedor colgroup para ello.
 Cada grupo se especificará con un elemento <col> y el atributo span especificará cuántas
columnas obtendrán el estilo.

 Por ejemplo, si quieres que las dos primeras columnas tengan el color rojo y
la tercera el color rosa.
 Si es que los elementos están mitad de la tabla siempre puedes definir un
elemento <col> y no indicar ningún estilo para ello.
 Volviendo al ejemplo anterior, si solamente queremos tener la tercera columna
de color rosa.