CSS: uso de position relative

Hemos realizado una práctica en la que queremos configurar una web con el aspecto que aparece abajo.

Para ello tenemos que hacer uso la propiedad CSS position:relative. Así, podemos desplazar a una posición relativa con respecto a los otros elementos añadiendo las propiedades top, bottom, left y right.

Asimismo, hemos hecho uso de la propiedad dipslay: inline-block, que hace que el elemento se establezca como un bloque, pero se comporte como un elemento en línea, respetando anchos y altos.

Además, se ha utilizado la propiedad CSS padding, configurando el margen interno entre un elemento y su contenido.

El archivo HTML y el CSS se pueden descargar en los enlaces de abajo:

Archivo HTML

Archivo CSS

 

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

CSS y HTML: Propiedades de formato de texto

En esta práctica vamos a trabajar con propiedades del formato de texto en archivos CSS.

Así, usaremos diferentes propiedades, modificando sus valores en cuatro selectores de clase distintos, para visualizar su resultado.

El archivo CSS podría tener el siguiente código:

Las propiedades usadas han sido color (color del texto), background-color (color del fondo), text-align (alineación del texto), text-decoration (subrayado, tachado, …), text-transform (transformación en mayúsculas, minúsculas, …), font-size (tamaño de fuente), font-family (tipo de letra), font-style (cursiva), font-weight (negrita), width (anchura) y height (altura).

El archivo HTML para esta actividad es el que se ve a continuación.

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.

El resultado obtenido con el archivo HTML y la hoja de estilo CSS configuradas anteriormente es el que se muestra abajo.

 

Prueba de HTML

La prueba consiste en la creación de una página web que presente el aspecto que se puede ver en la imagen de abajo.

 

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

1. La web tendrá el título “Santaella”. (1 punto)
2. En la parte superior tenemos un encabezado de primer nivel con el texto “Santaella”. Este texto estará centrado y será de color azul. Más abajo, se dispondrá una línea horizontal de color azul para separar esta parte de la web del resto de la página. (1 punto)
3. Más abajo del encabezamiento principal de la web se mostrará una imagen con el escudo de Santaella, apareciendo centrado. Se tendrá que añadir a la etiqueta de imagen los atributos de anchura 200 píxeles y altura 200 píxeles. El enlace donde está alojada la imagen es:              IMAGEN DEL ESCUDO DE SANTAELLA                (2 puntos)
4. La web presenta una lista con fiestas populares. Así, con encabezado de segundo nivel y de color azul se mostrará el texto “Fiestas populares”.  A continuación se publicará la lista desordenada con dos fiestas, apareciendo el texto en color azul y en negrita. Las fiestas y los textos son: “La Feria se celebra los días 8, 9 y 10 de septiembre” y “Romería de San Isidro se celebra el 15 de mayo”. (2 puntos)
5. Además, se publicará una tabla. Para ello, con un encabezado de segundo nivel y de color azul, aparecerá el texto “Datos”. La tabla incluye los textos “Población en 2014” y “Superficie” en color azul y negrita. Los datos “6097 habitantes” y “272 kilómetros cuadrados” se mostrarán en color azul. (2 puntos)
6. En la parte inferior y con una alineación centrada se dispondrá 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 azul, así como el nombre del autor o autora. Separando esta información del resto de la web se establecerá una línea horizontal de color azul. (2 puntos)
7. El archivo HTML lo tendrás que adjuntar a un correo que enviarás a josempanadero@gmail.com, con el asunto “Prueba HTML. Nombre y apellidos”.

¡Mucha suerte!

Solución a la actividad creación de página web con HTML. Provincias de Andalucía.

Recientemente planteé una actividad para crear una página web en HTML sobre las provincias de Andalucía.

Puedes consultar la solución completa haciendo click sobre la imagen de abajo, descargándose de esta forma, el código HTML completo.