Archivo de la categoría: Diseño y edición de páginas web

Prueba sobre CSS


Vamos a realizar una web, programando un archivo CSS con el estilo que se detalla a continuación.

  1. Crea tres bloques <div>. Cada bloque va a tener un estilo definido en el archivo CSS, que puede ser configurado con selectores de id. (1 punto)
  2. El primer bloque mostrará un rectángulo de 1000 px de ancho y 30 px de altura. El color de fondo es verde, el texto de tamaño extra grande, en negrita, centrado y color blanco. Se presentará la frase “Historia de Córdoba”. (2 puntos)
  3. En el segundo bloque se incluirá un texto suficientemente largo como para que aparezca un scroll vertical. Puedes descargar en este enlace un archivo de texto para incluir en este <div>: historia.txt. El color del texto será azul, en negrita y el fondo de este bloque se presentará de color amarillo. (2 puntos)
  4. El tercer bloque presentará un rectángulo de 1000 px de ancho y 20 px de altura. El color de fondo es verde, el texto de tamaño grande, en negrita, centrado y color blanco. Se presentará la frase “Web realizada por ……………………”. (2 puntos)
  5. Tanto el primer bloque como el tercero deben permanecer fijos en la página. (1 punto)
  6. Establece un espacio o margen interno entre el primer bloque y el texto, así como entre el tercer bloque y el texto de 30px, con el objetivo de no estar ocultado parte del texto por el encabezado y el pie de la página web. (1 punto)
  7. No olvides referenciar en el archivo HTML la ruta del archivo CSS que marcará el estilo de la web. (1 punto)
  8. Una vez programados los archivos HTML y CSS guarda cada uno de ellos con el formato HTMLnombreapellidos y CSSnombreapellidos y envía estos dos archivos adjuntos a mi correo josempanadero@gmail.com. Recuerda escribir en el asunto “Examen de Nombre Apellidos”.

El resultado debe visualizarse como la imagen de abajo:

pruebacss

Anuncios

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.

 

prueba_html_santaella

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!

Encabezado y pie de página en posición fija en CSS


En esta actividad vamos a ampliar el ejercicio realizado anteriormente que se resolvió en una entrada de este blog. Se exponían los ingredientes de la receta de un bizcocho, y ahora queremos añadir una serie de párrafos en los que se explique la preparación, de modo que el tamaño total del contenido obligue a hacer scroll vertical.

Además, vamos a disponer un elemento <div> como encabezado de la página, con un fondo azul oscuro y situado a modo de barra superior en la página. Se mantendrá en esa posición fija incluso cuando el usuario haga scroll.

También se tendrá que añadir otro elemento <div> que corresponda al pie de página, con un fondo de color verde oscuro y anclado en la parte inferior de la página.

Asimismo, para que no haya espacio entre los elementos, se eliminará el margen, estableciéndolo en 0 píxeles.

Finalmente, se tendrá que establecer un margen interior para el contenido, con el objetivo de que no quede tapado por el encabezado o el pie de página.

El resultado final aparece en la imagen de abajo, así como el código HTML y CSS.

act9p83

htmlact9p83i

htmlact9p83ii

cssact9p83i

cssact9p83ii

Transparencia en colores de fondo en CSS


Vamos a realizar un ejercicio en el que se superpongan tres cuadros de diferentes colores para apreciar las mezclas de los mismos. Para ello necesitamos utilizar la propiedad CSS background-color haciendo uso de rgba, en el que configuramos los valores para rojo, verde y azul y especificamos un valor para la transparencia del tono, que estará comprendido entre 0 y 1.

Para seleccionar un tono es recomendable visitar cualquiera de las diferentes webs que existen en la red para obtener la combinación rgb.

Así, para obtener una salida como la que se ve más abajo, se pueden apreciar a continuación los códigos HTML y CSS utilizados para ello.

act8p83

htmlact8p83

cssact8p83

Lista desordenada con diferentes bordes en CSS


En esta actividad queremos crear una lista desordenada en la que los elementos pares tengan un borde punteado rojo, y estén desplazados veinte píxeles hacia la derecha con respecto a los elementos impares. Estos últimos tendrán un borde continuo, pero con un color diferente para cada lado. Además, todos los elementos tendrán un margen interno con respecto al contenido de cinco píxeles.

act7p82

Para afrontar esta actividad, vamos a utilizar dos clases par e impar en el documento HTML.

Así, los archivos HTML y CSS que solucionan este ejercicio se muestran abajo.

htmlact7p82

cssact7p82

Formato de texto en CSS


En esta práctica vamos a configurar un archivo HTML utilizando un estilo establecido en un fichero CSS. Queremos mostrar una receta con el aspecto de texto que aparece en esta imagen.

act5p82

La idea es no utilizar etiquetas HTML para modificar el aspecto del texto, sino, únicamente la etiqueta <span> junto con clases para el formato del texto configuradas en el archivo CSS.

Así, una posible solución para el archivo HTML y el fichero CSS se aprecia en las imágenes de abajo.

htmlact5p82

cssact5p82

Imágenes de fondo en CSS


Para incluir imágenes de fondo en CSS utilizaremos las propiedades background-image para indicar la ruta de la imagen, background-position para establecer la alineación vertical y horizontal de la imagen y background-repeat.

El uso de background-repeat se debe a que si la imagen es más pequeña que el elemento se repetirá por defecto, horizontal y verticalmente hasta ocupar todo el espacio disponible. Si queremos modificar este comportamiento, se puede hacer con los valores no-repeat (no se repite), repeat-x (se repite horizontalmente) y repeat-y (se repite verticalmente).

Asimismo, con la propiedad background-size especificaremos el tamaño de la imagen.

De esta forma hemos diseñado una web con imágenes de la Mezquita de Córdoba, creando tres bloques <div> de 200px de ancho y 200px de alto. Hemos asignado a cada uno de los bloques una imagen de fondo de 50×50 y un borde distinto. Además, se cumplen los siguientes requisitos:

  • En el primer bloque la imagen de fondo no se repite y está centrada tanto vertical como horizontalmente.
  • En el segundo bloque, la imagen se repetirá horizontalmente y estará situada en la parte inferior.
  • En el tercer bloque, la imagen se repetirá verticalmente y se situará a la derecha.

El resultado es el que aparece en la imagen de abajo.

act1p79

El código HTML y CSS para obtener este resultado se muestra a continuación.

htmlact1p79

cssact1p79