Foros aprenderaprogramar.com
Didáctica y divulgación de la programación

Crea un documento HTML y un archivo con la hoja de estilos CSS que cumpla con estos requisitos:

a) Deben exisitir dos contenedores (div1, div2) situados en horizontal, cada uno con margin 25px en todas direcciones, sin relleno, ancho de 200 píxeles, altura de 300 píxeles y borde sólido de 5 píxeles de anchura con color de borde violeta.

b) El div 1 debe contener un texto con varios links (etiqueta <a> de html). Al pasar el cursor sobre cualquiera de los links dentro del div1 el cursor deberá ponerse en modo help (es decir, se verá un pequeño interrogante junto al cursor).

c) El div 2 debe contener una imagen con anchura 200 píxeles y altura igual o superior a 300 píxeles. La imagen debe a su vez ser un link a otro documento HTML al que denominamos documento 2 y que debe abrirse en una nueva pestaña cuando se pulse sobre la imagen. Al pasar el cursor sobre la imagen el cursor deberá ponerse en modo zoom-in, es decir, mostrar una lupa con un pequeño + en su interior.  En el documento 2 debemos tener la misma imagen pero con mayor tamaño, por ejemplo 600 píxeles de anchura. Antes de crear el código tendrás que preparar las imágenes: partir de una imagen con un tamaño más amplio, y con la ayuda de cualquier programa de edición de imágenes crear su gemela con menores dimensiones.

Crea un documento HTML con tres tablas, todas ellas iguales, con un título de tabla, cinco columnas y 7 filas (la primera ella, fila de encabezados que no son datos propiamente dichos). Aplícale los siguientes estilos y comprueba la visualización obtenida:

a) La tabla 1 tendrá una anchura de 600 píxeles y cada columna tendrá un 20% de la anchura total de la tabla. Existirán bordes únicos de color gris y tendrán un grosor de 8 píxeles.

b) La tabla 2 tendrá una anchura igual al 100 % disponible en la ventana y cada columna tendrá un 20 % de la anchura total de la tabla. Existirán bordes dobles de color marrón y tendrán un grosor de 2 píxeles.

c) La tabla 3 tendrá una anchura de 500 píxeles y cada columna tendrá 100 píxeles de anchura. Sólo existirán bordes en la parte inferior de las filas (es decir, no habrá bordes laterales ni superiores), tipo borde único, con un grosor de 6 píxeles y color azul.

Crea una lista ul con 27 elementos li (puedes partir del menú que tenemos en el código HTML de base que venimos empleando a lo largo del curso si lo deseas). Sobre dicha lista aplica los siguientes estilos a los elementos de la lista: los tres primeros elementos tipo disc y outside sin usar la propiedad shorthand, los tres siguientes tipo circle e inside sin usar la propiedad shorthand, los tres siguientes tipo square e inside, los tres siguientes none, los tres siguientes decimal y outside, los tres siguientes decimal-leading-zero y outside, los tres siguientes lower-roman e inside, los tres siguientes upper-alpha e inside, y los tres últimos con una imagen mediante list-style-image.

Crea un documento HTML y un archivo con la hoja de estilos CSS que cumpla con estos requisitos:

a) Deben exisitir tres contenedores (div1, div2 y div3) situados uno debajo de otro, cada uno con margin 33px en todas direcciones, con relleno 25 px en todas direcciones, ancho 100% del disponible, y borde sólido de 5 píxeles de anchura con color de borde rojo.

b) El div 1 debe contener un texto suficientemente largo (varios párrafos), tipo de fuente genérica serif, tamaño de fuente 18 píxeles y al menos un párrafo de varias líneas con la fuente establecida como mayúscula condensada (small caps).

c) El div 2 debe contener un texto suficientemente largo (varios párrafos), tipo de fuente genérica sans serif, tamaño de fuente 14 píxeles y color del texto #B22222.

d) El div 3 debe contener un texto suficientemente largo (varios párrafos), y las propiedades de texto establecidas con la propiedad CSS font (shorthand). El tipo de fuente será genérica fantasy y el tamaño del texto 2 veces lo normal .

Crea un documento HTML y un archivo con la hoja de estilos CSS que cumpla con estos requisitos:

a) Deben exisitir tres contenedores (div1, div2 y div3) situados en horizontal, cada uno con margin 33px en todas direcciones, sin relleno, ancho de 180 píxeles, altura de 300 píxeles y borde sólido de 6 píxeles de anchura con color de borde rojo.

b) El div 1 debe contener un texto suficientemente largo, con numerosos párrafos, como para exceder el tamaño del contenedor. El texto del html debe transformarse completamente a mayúsculas mediante el uso de propiedades CSS. La separación entre letras debe ser un 5% superior a lo normal. La primera letra de cada párrafo debe tener un tamaño un 250% lo normal.

c) El div 2 debe contener un texto suficientemente largo como para exceder el tamaño del contenedor. El texto del html debe transformarse completamente a minúsculas mediante el uso de propiedades CSS. La separación entre letras debe ser un 10% superior a lo normal. Debe contener una palabra (cadena de texto cualquiera) de gran longitud, de modo que no quepa en el contenedor, y “romperse” para no exceder la capacidad del contenedor usando la propiedad word-wrap.

d) El div 3 debe contener un texto suficientemente largo como para exceder el tamaño del contenedor. El texto del html debe transformarse para que toda palabra comience con una letra mayúscula mediante el uso de propiedades CSS. La separación entre palabras debe ser un 10% superior a lo normal. Debe contener una palabra (cadena de texto cualquiera) de gran longitud, de modo que no quepa en el contenedor, y no romperse.

Crea un documento HTML y un archivo con la hoja de estilos CSS que cumpla con estos requisitos:

a) Deben exisitir tres contenedores (div1, div2 y div3) situados en horizontal, cada uno con margin 20px en todas direcciones, relleno de 10 píxeles en todas direcciones, ancho de 200 píxeles, altura de 400 píxeles y borde sólido de 4 píxeles de anchura.

b) El div 1 debe tener alineación del texto centrada, color de texto #FF6347. Debe contener un texto suficientemente largo, con algunas palabras subrayadas y el primer párrafo indentado un 10%.

c) El div 2 debe tener alineación del texto a la derecha, color de texto #008080. Debe contener un texto suficientemente largo, con algunas palabras subrayadas por encima y el primer párrafo indentado en 50 píxeles. Este div estará definido en el HTML como un texto con saltos de línea definidos en ciertos puntos. Al mostrarse por pantalla, deben usarse propiedades CSS para se mantengan los saltos de línea definidos en el documento HTML, se colapsen secuencias de espacios en blanco y se usen espacios en blanco para generar nuevas líneas si es necesario

d) El div 3 debe tener alineación del texto justificada, color de texto #8B4513. Debe contener un texto suficientemente largo, con algunas palabras tachadas, y el primer párrafo indentado en un 20%. Además el texto contendrá una frase donde existan 15 espacios en blanco seguidos, y dichos espacios deben mostrarse cuando se visualice el texto (si coincide con un borde del contenedor deberán continuar en una nueva línea).

Crea un contenedor div con las siguientes características definidas a través de CSS: ancho y alto 200 píxeles, color de fondo amarilo, borde color azul de 2 píxeles de ancho tipo sólido, un texto de tamaño 30 píxeles y con un largo suficiente para exceder la capacidad del div contenedor, y mediante la propiedad overflow haz que aparezcan scrolls horizontal y vertical que permitan visualizar todo el texto.