Docsity
Docsity

Prepara tus exámenes
Prepara tus exámenes

Prepara tus exámenes y mejora tus resultados gracias a la gran cantidad de recursos disponibles en Docsity


Consigue puntos base para descargar
Consigue puntos base para descargar

Gana puntos ayudando a otros estudiantes o consíguelos activando un Plan Premium


Orientación Universidad
Orientación Universidad


Práctica 1 Diseño Web HTML, Ejercicios de Informática

Práctica 1 continuación de diseño web en HTML 2º Bachillerato Informática

Tipo: Ejercicios

2020/2021

Subido el 03/10/2021

juan-jose-nogales-silvero
juan-jose-nogales-silvero 🇪🇸

3 documentos

1 / 3

Toggle sidebar

Esta página no es visible en la vista previa

¡No te pierdas las partes importantes!

bg1
Páginas web: HTML y CSS
PRÁCTICA 1
1.- Dentro de la carpeta WEB de tu Escritorio crea otra llamada PRACTICA1, que
contendrá los archivos de esta práctica.
2.- Con un editor de texto crea un documento HTML llamado chistes.htm y guárdalo
dentro de la carpeta PRACTICA1. Escribe en chistes.htm las etiquetas mínimas de código
más el código necesario para que el navegador muestre esta página:
Indicaciones:
En la pestaña del navegador aparece un favicón y un título. El favicón es la misma
imagen que aparece luego en el cuerpo de la página. Elige una que te guste en
Internet, siempre que sea cuadrada de unos 200x200 px, y guárdala en la carpeta
PRACTICA1.
La imagen del cuerpo de la página tiene texto explicativo.
Los títulos de la página son de tipo h1 y h2. El resto del texto son párrafos. La imagen
y el título principal están separados por dos saltos de línea.
El último párrafo está separado de los demás por dos saltos de línea, y contiene un
enlace a la página web https://www.1000chistes.com/chistes-cortos que se abre en
otra pestaña del navegador.
3.- Con el editor de texto crea un documento CSS llamado chistes.css y guárdalo en la
carpeta PRACTICA1. Escribe en el head de chistes.htm el enlace con chistes.css.
pf3

Vista previa parcial del texto

¡Descarga Práctica 1 Diseño Web HTML y más Ejercicios en PDF de Informática solo en Docsity!

PRÁCTICA 1

1.- Dentro de la carpeta WEB de tu Escritorio crea otra llamada PRACTICA1, que contendrá los archivos de esta práctica. 2.- Con un editor de texto crea un documento HTML llamado chistes.htm y guárdalo dentro de la carpeta PRACTICA1. Escribe en chistes.htm las etiquetas mínimas de código más el código necesario para que el navegador muestre esta página: Indicaciones:

  • En la pestaña del navegador aparece un favicón y un título. El favicón es la misma imagen que aparece luego en el cuerpo de la página. Elige una que te guste en Internet, siempre que sea cuadrada de unos 200x200 px, y guárdala en la carpeta PRACTICA1.
  • La imagen del cuerpo de la página tiene texto explicativo.
  • Los títulos de la página son de tipo h1 y h2. El resto del texto son párrafos. La imagen y el título principal están separados por dos saltos de línea.
  • El último párrafo está separado de los demás por dos saltos de línea, y contiene un enlace a la página web https://www.1000chistes.com/chistes-cortos que se abre en otra pestaña del navegador. 3.- Con el editor de texto crea un documento CSS llamado chistes.css y guárdalo en la carpeta PRACTICA1. Escribe en el head de chistes.htm el enlace con chistes.css.

4.- Modifica el archivo chistes.htm y escribe en chistes.css las reglas necesarias para que la página se muestre como sigue: Indicaciones:

  • Pon un color de fondo a la página.
  • Añade etiquetas span dentro de la etiqueta h1 y de las etiquetas h2 del archivo chistes.htm para que ciertas palabras o letras sean de color rojo y tamaño 40 px.
  • Para que la imagen quede centrada en la página es necesario escribir en chistes.css la regla img { display: block; (convierte la imagen, que es elemento “en línea”, en elemento “bloque”) margin: auto; (centra en horizontal un elemento “bloque”) }
  • Pon al título principal estas propiedades: ◦ Ancho: 600 px. ◦ Alto: 50 px. ◦ Texto centrado en la caja. ◦ Caja con fondo verde, borde blanco y sombra (box-shadow) gris. (O los colores que quieras, con tal de que haya tres). ◦ Caja centrada (margin: auto;).
  • El efecto de dos columnas se consigue como hiciste en la práctica 0: ◦ En el archivo chistes.htm introduce cada chiste dentro de una etiqueta div. En el archivo chistes.css indica que estos contenedores div tienen todos un ancho del 45% de la página, un alto de 180 px y un fondo de color gris claro (o el color que quieras). ◦ En el archivo chistes.htm introduce los dos primeros div en otro div con atributo class=”padre”, y lo mismo con los dos últimos chistes. ◦ Finalmente, en el archivo chistes.css , a la clase padre ponle anchura 100% de la página, altura 200 px (con esto garantizamos que caben dos div pequeños dentro de cada “padre”), el mismo fondo que a la página y las propiedades de caja flexible: display: flex; justify-content: space-between;