Ejercicios prácticos de HTML5 y CSS3

HTML5 y CSS3

Utilizando HTML5 y CSS3, diseña un portal web personal siguiendo las siguientes directrices.

  • Crea un diseño web adaptable para los siguientes tamaños de dispositivo:
    • Monitor: min-width: 1000px.
    • Tablets: min-width: 500px and max-width: 1000px.
    • Móviles: max-width: 500px.
  • La capa general o contenedor (<div>) con el contenido estará centrada en el navegador y la medida según el dispositivo será:
    • Monitor: 920px (incluido el padding).
    • Tablets: 700px (incluido el padding).
    • Móviles: 100%.
  • El contenido dentro del contenedor se estructurará en los siguientes bloques. Utiliza las etiquetas nuevas que proporciona HTML5 o capas en su defecto.
    • Cabecera (<header>).
    • Menú (<nav>).
    • Contenido (<div>), que se dividide en Artículo (<article>) y Columna (<aside>).
    • Pie (<footer>).
  • En el diseño Monitor, las capas Artículo y Columna estarán una al lado de otra. En los diseños Tablets y Móviles, las capas estarán una encima de otra.
  • Utiliza la directiva @font-face para cambiar el tipo de letra del portal.
  • Capa Cabecera:
    • Nombre del portal.
  • Capa Menú:
    • Diseñarlo mediante etiquetas <ul> y <li>.
    • En los diseños Monitor y Tablets aparecerá como botones uno al lado de otro, que tengan sombras y los bordes redondeados.
    • En el diseño Móviles aparecerán los botones hacia abajo y ocupando todo el ancho de la capa.
    • Es opcional incluir submenús y utilizar Javascript para añadir efectos.
  • ​Capa Artículo:
    • ​Incluir al menos una imagen que ocupe el 100% de ancho de la capa.
    • Incluir texto suficiente crear títulos y subtítulos que se enumeren automáticamente.
    • Permitir que el texto sea editable.
  • Capa Columna:
    • Incluir un formulario para subscribirse a las novedades de la página que incluya los siguientes campos: "Nombre", "Email", "Blog personal" y "Fecha nacimiento". Marca "Nombre" e "Email" como requeridos.
  • Capa Pie:
    • ​Incluir una columna a la izquierda con los datos de contacto y otra a la derecha con los iconos de las redes sociales más utilizadas (no utilizar tablas). Sólo en el diseño Móviles aparecerán una debajo de otra.
    • Insertar debajo de las dos columnas un mapa con un ancho del 100% del contenido con la dirección de contacto (Ejemplo). Configurar las medidas del iframe mediante una clase, ya que utilizar <iframe width="100%"...> da errores de validación.

Licencia Creative Commons

Este artículo publicado en TicArte pertenece a Rafa Morales y está protegido bajo una Licencia Creative Commons.

Tags: 
Ir arriba