PRACTICA – HTML5 responsive con formulario

PRACTICA - HTML5 responsive con formulario 1

INSTRUCCIONES

  • 0.5 – Define un fondo del documento con una imagen que se repite para formar un patrón (bg.jpg)
    • Con imagen de fondo: 0.5pt
    • Sin imagen de fondo: 0pt
  • 0.5 – Define un div que contenga el resto de capas de la página. Este quedará centrado en la página
    • Capa contenedora centrada: 0.5pt
    • Capa contenedora no centrada: 0.25pt
    • Sin capa contenedora: 0pt
  • 1 – Utiliza correctamente las nuevas etiquetas semánticas de HTML5 (header, nav, footer, main, aside, article).
    • Utiliza seis etiquetas semánticas y la maquetación es correcta: 1pt
    • No se utilizan todas las etiquetas semánticas: 0.5pt
  • 1 – Posiciona la imagen logo.png al header de la página y añade un título al lado
    • Imagen y título se visualizan tal cual se muestra en la imagen: 1pt
    • Sólo se visualiza la imagen o los elementos no se visualizan en horitzontal: 0.5pt
    • Sólo se visualiza el título o los elementos no se visualizan en horizontal: 0.5pt
  • 1Construye una barra de navegación con seis enlaces, uno al lado del otro, y que cambien de color y de fondo con una transición animada cuando el ratón pasa por encima de cada uno de ellos.
    • La barra de navegación sale con todos los estilos de enlace, y con el cuadro de texto de búsqueda correctamente alineado a la derecha: 1pt
  • 0.5 – Define un título para el área de la imagen, para el area del formulario, el área de ‘overflow’ y el area de enlaces, con color gris de fondo, esquinas redondeadas y letra de color blanco.
    • Se definen todos los títulos con los criterios solicitados: 0.5pt
  • 0.5 – Dentro de la sección HTML5 coloca la imagen html5-imagen.jpg con un ‘lorem ipsum’ envolviéndola a su alrededor. Debe existir un margen de 5px entre el texto y la imagen.
    • Se visualiza la imagen con el texto a su alrededor y el margen solicitado: 0.5pt
    • Se visualiza la imagen con texto a su alrededor pero sin margen: 0.25pt
    • Se visualiza la imagen pero sin texto a su alrededor: 0.1pt
    • Sólo se visualiza el texto: 0pt
  • 0.5 – Aplicar los estilos ‘negrita’, ‘cursiva’ y ‘azul’ en algunas palabras del texto de la sección imagen flotante. Haz que el texto salga justificado.
    • Se aplican todos los estilos propuestos a la sección imagen flotante y el texto está justificado: 0.5pt
  • 0.5 – Introduce un ‘lorem ipsum’ en la sección ‘overflow’ y haz que desborde el tamaño de la caja. Controla este desbordamiento haciendo que aparezca una barra de desplazamiento en el lado derecho.
    • Hay barra de desplazamiento en la sección ‘overflow’: 0.5pt
  • 1 – Confecciona un formulario en la sección ‘formulario de contacto’ con las siguientes características:
    • Etiqueta para nombre y apellidos y dos campos de texto para cada unoEtiqueta correo electrónico y un campo de email para introducirloEtiqueta ‘suscribir un par de radio buttons excluyentesEtiqueta arrecife curso ‘y una combo con las opciones: html, javascript, phpUn botón de envío que salga centrado.Las etiquetas deben tener un ancho fijo.Todos los campos son obligatorios.
    • El formulario tiene todos los campos propuestos y las etiquetas están alineades: 1pt
    • El formulario tiene todos se campos pero las etiquetas no se encuentran al.lineades: 0.5pt
  • 0.5 – Define a sección ‘lista no ordenada una lista de 6 elementos, sin viñetas y con la apariencia propuesta
    • Se muestra una lista no ordenada sin viñetas y con la apariencia que se indica en el pantallazo: 0.5pt
  • 0.5 – Define los estilos CSS en un archivo externo
    • Se utiliza una hoja de estilos externa: 0.5pt
  • 2 – La página web es responsive
    • Todos los elementos se ubican correctamente, en vertical, sin verse recortados en ningún momento independientemente del tamaño de la pantalla, y adaptándose al tamaño de la misma. El cuadro de búsqueda se ubica en la esquina superior derecha. 2 pt
    • El cuadro de búsqueda no se ubica en la esquina superior derecha. 1.5 pt
    • Los elementos se ubican verticalmente pero se muestran recortados por los límites de la pantalla o mal distribuídos. 0.5 pt
PRACTICA - HTML5 responsive con formulario 2