CSS y HTML: Documento con tres elementos de distintos colores.

En esta actividad queremos configurar una página web con el aspecto que aparece en la imagen de abajo.

Para ello vamos a usar una hoja de estilo CSS, usando un selector de clase, asignando las características especificadas mediante el atributo class en el archivo HTML.

El archivo CSS será el que aparece en la imagen de abajo. Utilizaremos las propiedades color (color del texto), background-color (color de fondo), width (anchura) y height (altura). Es importante que el archivo de estilo tenga la extensión css, incluyendo este fichero en una carpeta con el nombre css.

El archivo HTML para esta web se puede analizar en la siguiente imagen.

No hay que olvidar la última línea con la etiqueta link, para que el archivo HTML rescate la configuración establecida en el archivo CSS

Creación de página web con HTML. Provincias de Andalucía.

Para repasar para la próxima prueba de HTML, vamos a confeccionar una web con el aspecto que muestra la imagen de abajo.

La página web tiene las siguientes características:

• La web tendrá el título «Provincias andaluzas».
• Se trata de mostrar una estética en la que predominen los colores blanco y verde.
• En la parte superior, y sobre fondo verde, tenemos dos tipos de encabezados, y en la parte central, y en fondo blanco, el texto se escribe con letra más pequeña y en cursiva. Todas las frases estarán centradas.
• Dividiendo las diferentes partes de la web aparecen rayas horizontales de color verde.
• La web presenta una lista con los nombres de las ocho provincias de Andalucía, incluyendo enlaces a la página de la Wikipedia correspondiente a cada provincia. El hiperenlace se configurará en negrita, siendo de color blanco y no azul, como se configura por defecto. La lista estará centrada.
• La web muestra también un panel de imágenes de las provincias andaluzas, realizado a partir de una tabla. Cada imagen tiene un tamaño de 150×150 píxeles, excepto las imágenes laterales, que se presentan con un tamaño de 200×300 píxeles. Cada imagen incluirá un texto alternativo con el nombre de la provincia, así como un hiperenlace a la web de la Wikipedia utilizado en la lista de arriba.
• En la parte inferior y alineado a la derecha se mostrará el nombre del autor o autora, así como un enlace a nuestro blog. Este texto estará en cursiva y el enlace deberá configurarse de color verde, así como el nombre del autor o autora.

Tabla con imágenes incluyendo enlaces en HTML

Queremos conseguir una tabla que contenga imágenes, y que a su vez, enlacen a páginas web. Además, queremos incluir un enlace debajo de la tabla.

Un ejemplo puede ser éste:

Para ello, vamos a utilizar las siguientes etiquetas:

<table> Tabla, se emplea para estructurar una serie de datos alineados según un esquema de filas y columnas.

<tr> Table row, es decir, indica que comenzaslimjetmos una fila en la tabla.

<td> Contenido de la celda.

<border> Atributo aplicado a la etiqueta <table> para configurar el grosor de los bordes de la tabla.

<rowspan> Atributo aplicado a la etiqueta <td>para unir filas.

<colspan> Atributo aplicado a la etiqueta <td>para unir columnas.

<img> Etiqueta que sirve para incluir imágenes.

<src> Atributo de la etiqueta <img> que especifica la ruta de la imagen.

<width> Atributo que establece la anchura de la imagen.

<height> Atributo que señala la altura de la imagen.

<alt> Atributo aplicado a la etiqueta <img> para mostrar un texto alternativo a la imagen.

<a> Etiqueta utilizada para configurar enlaces.

<href> Atributo usado para señalar la ruta hacia la página que enlazará la etiqueta <a>.

El código para configurar la tabla arriba es el que se muestra abajo.

 

 

Lista anidada con tres niveles en HTML

En esta práctica queremos anidar hasta tres niveles de listas ordenadas, situando en cada nivel un tipo de numeración diferente. Por ejemplo, una lista como la que aparece más abajo.

Para ello vamos a necesitar las siguientes etiquetas del código HTML:

<div> División, es decir, seleccionar una sección de la página web.

<ol> Lista ordenada.

<li> Elemento de la lista.

<meta charset =”UTF-8″> Se emplea para indicarle al navegador el tipo de codificación de caracteres, y no tener problemas con los caracteres especiales, como las tildes.

Es aconsejable presentar el código de una forma ordenada y estructurada para mejorar la comprensión del mismo.

Asimismo, tendremos que cerrar las etiquetas abiertas cuando no queramos que sigan haciendo su función.

El código HTML para la lista anidada de arriba es el siguiente:

Realizar tablas uniendo celdas en HTML

Para realizar una tabla uniendo celdas en HTML utilizaremos las siguientes etiquetas:

<table> Tabla, se emplea para estructurar una serie de datos alineados según un esquema de filas y columnas.

<tr> Table row, es decir, indica que comenzamos una fila en la tabla.

<td> Contenido de la celda.

<border> Atributo aplicado a la etiqueta <table> para configurar el grosor de los bordes de la tabla.

<rowspan> Atributo aplicado a la etiqueta <td>para unir filas.

<colspan> Atributo aplicado a la etiqueta <td>para unir columnas.

Así, en la actividad trabajada en clase, queríamos obtener una tabla como la que aparece abajo.

El código HTML para generar esa tabla es el que aparece en esta imagen: