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

  Crea un documento HTML con 2 elementos div de anchura 250 píxeles, con un margen de 20px en todas direcciones y uno junto al otro (en horizontal). En cada div introduce un texto (p.ej. div 1, div 2) y aplícale los siguientes estilos de borde y relleno a ambos elementos. Color de fondo #FFB6C1. La parte superior con borde de puntos redondeados, grosor 15 píxeles, color #DC143C y relleno de 30 píxeles. La parte derecha con borde de trazos o segmentos rectangulares, grosor 10 píxeles, color verde y relleno de 45 píxeles. La parte inferior con borde de línea doble, grosor 10 píxeles, color #FF00FF y relleno 0 píxeles. La parte izquierda con borde con efecto ridge, grosor 40 píxeles, color #2F4F4F y relleno 60 píxeles.

a) ¿Cuál es el ancho total ocupado por cada div (incluyendo sus bordes y rellenos)?

b) ¿Cuál es el alto total ocupado por cada div (incluyendo sus bordes y rellenos)?

c) ¿Cuál es el ancho total desde el límite izquierdo del borde del div más a la izquierda hasta el límite derecho del borde del div más a la derecha (teniendo en cuenta márgenes, bordes y rellenos)?

Crea un documento HTML con 2 divisiones, cada una separada de la anterior por dos elementos <br/>. En cada división introduce un texto (p.ej. div 1, div 2) y aplícale los siguientes estilos de borde escribiendo de forma individual cada una de las siguientes propiedades CSS:

a) Para el div 1: la parte superior con borde de puntos redondeados, grosor 10 píxeles y color verde. La parte derecha con borde de trazos o segmentos rectangulares, grosor 20 píxeles y color azul. La parte inferior con borde de línea doble, grosor 10 píxeles y color #A52A2A. La parte izquierda con borde con efecto groove, grosor 30 píxeles y color #2F4F4F.

b) Para el div 2: la parte superior con borde con efecto inset, grosor 30 píxeles y color #B22222. La parte derecha con borde sólido, grosor 22 píxeles y color #DAA520. La parte inferior con borde de línea doble, grosor 25 píxeles y color #4B0082. La parte izquierda con borde de puntos redondeados, grosor 17 píxeles y color #808000.

Crea un documento HTML con el mismo aspecto y propiedades CSS que las descritas para el ejercicio 1, pero en este caso usando la notación shorthand de bordes CSS y la propiedad border abreviada. Para comprobar si tus respuestas son correctas puedes consultar en los foros aprenderaprogramar.com.

Los navegadores aplican un tamaño por defecto a los títulos h1 a h6, aunque estos tamaños no son siempre los mismos sino que dependen del navegador que se emplee. Para el navegador que estés empleando, divide la página web en una cuadrícula con 5 espacios a lo ancho y 6 espacios a lo alto, tal y como se ve en la siguiente tabla. En cada espacio, muestra un texto y la forma en que se ha definido el tamaño. Por ejemplo: h1 (predefinido), h1 (px), h1 (em), h1 (pt), h1 (%). El resultado ha de ser que todo se vea del mismo tamaño y modo, pero sin embargo la forma de definir el estilo será diferente en cada caso. Para comprobar si tus respuestas y código son correctos puedes consultar en los foros aprenderaprogramar.com.

Orientación: h1 suele ser 24px ó 2em en la mayoría de los casos, pero tendrás que comprobarlo en el navegador que estés empleando.

Crea un documento HTML que conste de los siguientes elementos: un título h1 con el texto “Aprendizaje de la programación”. Una división div con id menú que contenga: un título h2 con el texto “Menú” y una lista de elementos ordenados (ol) con los siguientes items: Programación básica, Programación intermedia y Programación avanzada. Finalmente, una división div con id footer con el texto “Curso aprenderaprogramar.com”. Establece diferentes valores de las propiedades color, background-color y font-size para:

a) Los elementos h1

b) Los elementos h2

c) Los elementos ol y partes internas a este (elementos li de listas).

d) El elemento con id footer.

A continuación utiliza el W3C validator y comprueba si no te indica ningún error, o qué errores o warnings te indica y trata de identificar el por qué de ellos y corregirlos.

Crea un documento HTML donde la ventana del navegador esté dividida en 6 partes, cada una con su borde. En cada división pon como color de fondo lo siguiente:

a) División 1: un color expresado con notación RGB.

b) División 2: un color expresado con notación RGBA.

c) División 3: un color expresado con notación hexadecimal.

d) División 4: un color expresado con notación HSL.

e) División 5: un color expresado con notación HSLA.

f) División 6: un color designado con un nombre.

En cada división incluye un texto con la notación y color empleado. Por ejemplo <<Notación RGB, color 218, 165, 32>>.

En la siguiente tabla están mal ordenados los códigos de colores. Ordénalos de forma que en cada fila estén los códigos equivalentes de forma ordenada y crea un documento HTML donde se muestre un cuadrado donde aparezca como texto el color con la notación empleada, y como color de fondo el color. En total deberás tener 15 cuadrados, cada uno con su texto y su color, correspondientes a las 15 celdas de la tabla.

  Analiza el siguiente código HTML. En él encontrarás tres etiquetas div. Haz lo siguiente:

a) Establece atributos class para cada una de ellas con valores <<principal>> para la primera, y <<secundario>> para la segunda y la tercera.

b) Usando CSS establece como color de texto el rojo (red) y tamaño de fuente el 130% respecto de lo normal para los elementos h1 que se encuentren dentro de un elemento cuyo valor class sea <<principal>>.

c) Usando CSS establece como color de texto el verde y tamaño de fuente el 110% respecto de lo normal para los elementos h3 que se encuentren dentro de un elemento cuyo valor class sea <<secundario>>.

d) Usando CSS establece como color de fondo el amarillo (yellow) para los elementos span que se encuentren dentro de elementos h3 que se encuentren dentro de elementos cuyo atributo class sea <<secundario>>.

e) Establece como tipo de fuente para todo el documento HTML el tipo Arial.

EJERCICIO

Analiza el siguiente código HTML. En él encontrarás tres etiquetas div. Haz lo siguiente:

a) Establece atributos id para cada una de ellas con valores <<novedades>> para la primera, <<xFashion>> para la segunda y <<tMotion>> para la tercera.

b) Usando CSS establece como color de texto el rojo (red) para los elementos h1 que se encuentren dentro del elemento con id <<novedades>>.

c) Usando CSS establece como color de texto el verde para los elementos h3 que se encuentren dentro de los elementos con id <<xFashion>> y <<tMotion>>.

d) Usando CSS establece como color de fondo para el elemento con id <<novedades>> el amarillo (yellow).

A partir del siguiente código:

Modifica el código HTML anterior para cumplir con estos requisitos mediante la aplicación de estilos en línea:

a) La etiqueta h1 debe mostrar su texto en color rojo.

b) La etiqueta h3 con el texto relativo a X-FASHION debe mostrar su texto en color verde.

c) La etiqueta h3 con el texto relativo a X-MOTION debe mostrar su texto en color azul.

d) Todos los párrafos deben mostrar su texto en color brown (marrón).

Crea tres archivos HTML con diferente contenido y guárdalos con tres nombres de archivo distintos, por ejemplo webpage1.html, webpage2.html y webpage3.html. Establece links entre cada una de las páginas webs para que se pueda pasar de una a otra, por ejemplo desde webpage1.html hemos de poder pasar con un link a webpage2.html y webpage3.html, etc.. A continuación sube los tres documentos HTML al servidor y comprueba que puedan visualizarse y navegar mediante los links entre una página y otra.