A continuación, se te presenta un documento web con algunos errores de sintaxis y a nivel de estructura del documento web, corrígelos.
Crea una página web con el siguiente texto formateado tal cual puedes ver en la imagen de la derecha. En este ejercicio no debes usar css.
De cara a tener información de todos los empleados de una empresa en su intranet se
necesitan ciertos datos en formato HTML. Los datos a incluir son:
1.Nombre y apellidos.
2.Estudios.
3.Email.
El documento HTML que crees debe incluir:
·Estructura completa de un documento HTML.
·Comentarios.
·Etiquetas H1, H2 y H3.
·Uso de (div) para agrupar los trabajadores y dentro otros (div) para agrupar los
datos personales y estudios.
·Uso de (pre) para alinear la información (no usar listas todavía).
El documento debe quedar como el de la imagen de abajo.
En este ejercicio no debes usar css.
Partiendo del ejercicio 02 haz los siguientes cambios:
● Elimina el formato con (pre) y usa una lista.
● Subraya Nombre, Email y Teléfono de los datos personales de los empleados.
Aplica los estilos necesarios para que el ejercicio se vea como el de la imagen de abajo.
Los estilos deberán ir en un fichero css aparte del documento html.
Vamos a practicar las etiquetas de quotation a la vez que le damos un poco de estilo.
Los requisitos a cumplir son:
● Body
○ Fuente: Arial, sans-serif
○ Color de fondo: blanco
○ Color: 333
● Encabezados
○ H1
■ Tamaño de letra: 24px
■ Color: #003366
○ H2
■ Tamaño de letra: 20px
■ Color: #006699
● Párrafos
○ Tamaño de fuente: 16px
● Blockquote
○ Tamaño de fuente: 18px
○ Color: #444
○ Color de fondo: #e0f7fa
● Abbr
○ Color: #d32f2f
● Cite
○ Estilo de fuente: Italic
○ Color: #d32f2f
● Address
○ Tamaño de fuente: 16px
○ Color: #e0f7fa
● a
○ Color: #00796b
● bdo
○ Izquierda a derecha
■ Color: #00796b
○ Derecha a izquierda
■ Color: #d32f2f
Aplica los estilos necesarios para que el ejercicio se vea como la imagen de abajo.
8
En este ejercicio utilizarás el atributo style dentro de las etiquetas para aplicar los estilos.
No crearás un archivo CSS aparte.
Crea la siguiente página web con los cheros “queen.html” y “estilos.css”, teniendo en
cuenta las siguientes indicaciones:
Realiza la web que se muestra en la imagen de abajo teniendo en cuenta las siguientes restricciones del css.
Realiza la web que se muestra a continuación teniendo en cuenta las siguientes restricciones CSS:
Realiza la web que se muestra a continuación teniendo en cuenta las siguientes restricciones CSS:
Etiquetas:
● Una etiqueta de sección h1 para el título.
● Varias etiquetas de párrafo p, una para cada cita.
● El nombre del escritor en el primer párrafo lleva la etiqueta strong.
● Los nombres de las obras se ven en cursiva. Podrían utilizarse etiquetas em, pero
para este tipo de información es más adecuado el uso de la etiqueta cite, que
también se ve en cursiva cuando no se aplica ninguna hoja de estilo.
Etiquetas
Las únicas etiquetas de bloque utilizadas son h1, p y div.
Clases
Cada cita tiene la letra inicial diferente al resto del párrafo. Se podría utilizar una etiqueta
con clase, pero puesto que se trata del primer carácter, se puede utilizar
simplemente el pseudo-elemento ::first-letter, que no requiere añadir nada al código
fuente html.
Estilos
● Formulario:
○ Centrado horizontalmente
○ Tamaño de fuente: 14px.
○ Color del texto: #6B121B
○ Borde: 1px punteado #B8BFCB.
○ Radio del borde: 7px.
○ Padding: 14px.
● Fieldset:
○ Borde: 1px punteado gris
○ Radio del borde: 6px.
○ Margen inferior: 15px.
○ Padding superior 0px;
○ Padding arriba y abajo: 0px
○ Padding izquierda y derecha: 20px
● Legend:
○ Color del texto: gris
○ Tamaño de letra: 13px
○ Margen inferior: 16px
● Input:
23
○ Color de fondo: blanco
○ Radio del borde: 4px
○ Color del texto: #264F96
○ Tamaño de fuente: 16px
○ Padding superior: 3px
○ Padding derecha: 3px
○ Padding inferior: 3px
○ Padding izquierda: 10px
○ Outline none (Esto permite que no se resalte el input al colocarnos en él)
Ejercicio 13
De forma completamente autónoma reproduce con la mayor exactitud posible la siguiente
estructura de una página web.
La sección que se ve en la imagen corresponde con la pestaña “Inicio” del panel de
navegación.
En los recursos de la tarea tenéis la imagen que se adjunta más abajo para que podáis
abrirla y analizarla con mayor detalle.
De forma completamente autónoma reproduce con la mayor exactitud posible la siguiente
estructura de una página web.
La sección que se ve en la imagen corresponde con la pestaña “Nosotros” del panel de
navegación.
En los recursos de la tarea tenéis la imagen que se adjunta más abajo para que podáis
abrirla y analizarla con mayor detalle