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: 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.

 

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

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: https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/Escudo_de_Santaella_(C%C3%B3rdoba).svg/2000px-Escudo_de_Santaella_(C%C3%B3rdoba).svg.png           (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.

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 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.

<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.