Scribd Logo
Carica

Benvenuto in Scribd!

  • Practica01

    Caricato da

    laha
    62 visualizzazioni3 pagine
    Este documento proporciona instrucciones para crear tres páginas web utilizando HTML5 y CSS3. La primera página presenta contenido con artículos, la segunda muestra un video central y la tercera incluye un formulario de contacto. Se especifican los elementos, estilos y estructura requeridos para cada página, incluidos degradados, bordes, sombras y posicionamiento de elementos.

    Descrizione originale:

    RECURSOS PRACTICA HTML5 CSS3

    Titolo originale

    1. Practica01

    Copyright

    © © All Rights Reserved

    Formati disponibili

    PDF, TXT o leggi online da Scribd

    Hai trovato utile questo documento?

    Questo contenuto è inappropriato?

    Segnala questo documento
    Este documento proporciona instrucciones para crear tres páginas web utilizando HTML5 y CSS3. La primera página presenta contenido con artículos, la segunda muestra un video central y la tercera incluye un formulario de contacto. Se especifican los elementos, estilos y estructura requeridos para cada página, incluidos degradados, bordes, sombras y posicionamiento de elementos.

    Copyright:

    © All Rights Reserved
    Scarica in formato PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    62 visualizzazioni3 pagine

    Practica01

    Caricato da

    laha
    Este documento proporciona instrucciones para crear tres páginas web utilizando HTML5 y CSS3. La primera página presenta contenido con artículos, la segunda muestra un video central y la tercera incluye un formulario de contacto. Se especifican los elementos, estilos y estructura requeridos para cada página, incluidos degradados, bordes, sombras y posicionamiento de elementos.

    Copyright:

    © All Rights Reserved
    Scarica in formato PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    di 3

    IMPLANTACIÓN DE APLICACIONES WEB

    Práctica 1 – HTML5 y CSS3

    EJERCICIO 1

    En este ejercicio crearemos una página web como la que aparece en la siguiente imagen.

    Podéis encontrar todos los recursos necesarios en el fichero practica1recursos.zip del aula virtual. En este
    mismo fichero, encontraréis 3 imágenes en la que podéis observar cómo debe quedar la práctica.

    La estructura de la página, tendremos un <div id="page"> que será el contenedor de toda la página, y
    dentro de este, tendremos los siguientes elementos:
    • Un <header> que contendrá un <h1> con el título de la página.
    • Un <nav> que contendrá una lista desordenada con los enlaces del menú de navegación.
    • Un <main> que contendrá tres <article>.
    • Cada <article> contendrá un <header> que, a su vez, contendrá una imagen y un <h2> con el título
    del artículo. El <article> también contendrá un par de párrafos de texto.
    • Después del <main> tenemos un < footer> con el pie de página que contendrá un párrafo de texto.

    Algunos de los estilos utilizados son:

    • Elemento page:
    o Tendrá un ancho de 960px.

    • Elemento header:
    o La fuente Courier de color blanco y tamaño 1.1em.
    o El borde inferior tendrá 6px, será negro y de estilo sólido.
    o El color de fondo será #0170B9.

    IAW 1
    • Elemento nav:
    o La fuente será courier de tamaño 1.4em y color silver.
    o El texto estará alineado al centro.
    o El color del fondo será #D5BA32.

    • Elementos de nav:
    o Tener en cuenta que para los elementos <li>, además de propiedades comunes, cada
    opción de menú tiene una imagen distinta.
    o Controlar padding para nos quepan las imágenes de cada uno de los enlaces. Controlar
    también los márgenes de forma independiente.
    o Para los enlaces:
    Color de la fuente orange.
    Color de la fuente cuando el ratón está sobre ellos white.

    • Elemento main:
    o Fuente verdana de tamaño 0.8em.
    o Color de fondo blanco (tener en cuenta el alto de esta caja).

    • Elementos de la clase article:


    o Ancho de 240px.
    o Borde de 1px color lightgray y estilo sólido.
    o Color de fondo white.
    o Alto de línea de 1.8em
    o Los márgenes internos los configuraremos de la siguiente forma: izquierdo, derecho y
    superior 5px, inferior 22px.
    o Los márgenes externos serán de 30px.
    o Los elementos de esta clase deben colocarse uno al lado del otro, por tanto, indicaremos
    que floten a la izquierda.

    • Elementos de la clase article_header:


    o Márgenes internos 10px.
    o Borde inferior de 1px sólido y color #999999.

    • Elementos <h2>:
    o Márgenes internos 10px.
    o Tamaño de fuente 1.2em.

    • Elemento footer:
    o Deberá colocarse debajo de los elementos flotantes.
    o Fuente de color white y tamaño 0.7em.
    o Color de fondo #313B44.
    o Borde superior de 6px color black y sólido.
    o Márgenes internos superior e inferior de 15px.

    • Enlaces que se encuentren dentro del elemento footer:


    o Color de fuente blanco.
    o El color de fondo será #0170B9.

    AD 2
    DEGRADADOS
    • Como fondo del <body> pondremos un degradado de arriba abajo que se iniciará con el color
    rgb(227, 76, 38) y acabará con el color rgb(240, 101, 41). El degradado irá desde la posición 0% a la
    90% y el color de finalización tendrá una opacidad del 0%. Para evitar un problema que surge en
    algunos navegadores cuando tenemos altas resoluciones de pantalla, pondremos el color de fondo
    del elemento <html> a blanco.

    BORDES
    • Para el efecto de bordes redondeado que tiene la página utilizaremos un radio de 20px (en este
    caso, deberemos indicarlo en varias partes de más de un elemento para que tome el aspecto que
    podéis ver en la imagen index.png del fichero de recursos).

    SOMBRAS
    • Para la sombra de la página utilizaremos 20px para los desplazamientos y la difuminación y gray
    para el color.
    • Para la sombra de los textos de los elementos <h2> utilizaremos 2px para los desplazamientos, 2px
    para la difuminación y gray para el color.

    PÁGINA VIDEO.HTML

    Esta sección la crearemos dentro de un documento llamado videos.html. Este documento será
    exactamente igual que el documento index.html, salvo una excepción:

    • Los contenidos del documento (elemento <main>) serán diferentes a los del documento
    index.html. Este contendrá solamente un video y habrá que estar centrado con sus
    correspondientes botones de controles.

    PÁGINA CONTACTO.HTML

    Para terminar, vamos a implementar la sección de contacto de nuestra página, que contendrá un
    formulario. Este formulario lo crearemos en un documento que llamaremos contacto.html y cuyo resultado
    será el que se muestra en la imagen que puedes encontrar en el fichero de recursos.

    • Este documento será exactamente igual a los de las secciones de contenidos y vídeos, salvo una
    excepción: el contenido de la sección main será diferente que tendremos lo siguiente:
    o Un <div> que contendrá el formulario y que tendrá el id contenedorFormulario. Dentro del
    <div> tendremos lo siguiente:
    Un <h1> con el texto Contáctenos.
    Un formulario con los siguientes campos:
    1. Un campo para solicitar el nombre del usuario que quiere contactar. Este
    campo será obligatorio y contendrá el texto de ejemplo siguiente: "Escriba
    su nombre".
    2. Un campo para solicitar el correo electrónico del usuario. Este campo será
    obligatorio y contendrá el texto de ejemplo siguiente: "Escriba su email".
    3. Un <textarea> para que el usuario escriba el mensaje que quiere enviar.
    Este campo será obligatorio y contendrá el texto de ejemplo siguiente: "Su
    mensaje…".
    4. Un botón submit para enviar los datos del formulario.

    No haremos caso al estilo porque lo arreglaremos con el framework BootStrap.

    AD 3

    Potrebbero piacerti anche