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

CSS: uso de position relative


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

act4p82

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

 

Simulación de circuitos eléctricos


Crocodile es un programa de simulación de circuitos eléctricos muy intuitivo. Con este programa podemos probar circuitos sin tener que utilizar componentes físicos.

Se puede descargar este software en este enlace.

crocodile

Seguiremos unas prácticas del blog de alextecnoeso. En este documento se proponen una gran número de experiencias, aumentando el grado de dificultad poco a poco.

 

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:

cssact1p75

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.

htmlact1p75

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.

act1p75

 

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.

act2p75

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.

cssact2p75

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

htmlact2p75

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

Introducción a la electricidad


Para comenzar a introducirnos en la unidad dedicada a la electricidad trabajaremos con varios recursos.

En primer lugar estudiaremos un ODE que elaboré sobre electricidad y que está alojado en la plataforma Agrega.

light-travel

 

En segundo lugar, trabajaremos los apuntes sobre electricidad elaborados por el profesor Pedro Landín.

Finalmente, para consolidar los conceptos vistos anteriormente, os dejo enlaces a una serie de actividades que he elaborado con Hot Potatoes.

Electricidad

Carga eléctrica

Circuitos eléctricos

Corriente eléctrica

Tipos de circuitos

Usos de la electricidad

Generación de electricidad

Riesgos de la electricidad

 

Protegido: Prueba de HTML


Este contenido está protegido por contraseña. Para verlo introduce tu contraseña a continuación: