02/06/2023

Aplicaciones Web
Práctica CSS 2

INTEGRANTES:

RODRIGUEZ GARCÍA EDWIN JULIAN

GONZALEZ NUÑEZ KEVIN ELÍAS
PAUL MACÍAS MARES
LÓPEZ MATA ARIANNA MONSERRATH

Maestra: Rosa Martha Nuñez Arroyo.

Se hace la creación de una nueva carpeta llamada “PRACTICACSS”, se agrega un archivo llamado
index.html, en el cual se coloca la estructura básica para la creación de una pagina web,
añadiendo el DOCTYPE, html, head, body, encabezados, etc.

Se coloca el titulo de la página, llamándola “Práctica 2 de CSS”.

Se agrega una etiqueta <div> que se emplea para definir un bloque de contenido o sección de la
página. y se le agrega un identificador id de tipo container.

Se define la cabecera de la página web, utilizando una etiqueta header y dentro de ella se coloca
la etiqueta <h1>.

Se hace la creación de un menú en el que se crea el vínculo entre tres páginas distintas, sirve para
tener un acceso directo y rápido. Todo esto dentro de una etiqueta <ul> que nos ayuda a crear
una lista desordenada.
Para el contenido se hace uso de una etiqueta <section> que sirve para determinar qué contenido
corresponde a qué parte de la página, algo así como un índice, es la forma en que se separan las
secciones de nuestra página web.

Con el siguiente código se hace la creación de una barra de búsqueda. Con un titulo de
“Búsqueda” que se agrega en una etiqueta h2.
 Resultado de ejecución en el navegador.

Se hace la modificación del formato dentro del mismo archivo html.

Se define el color de fondo de la página usando la etiqueta background-color, en este caso usando
un color amarillo pastel.

Resultado de ejecución en el navegador.

Se hace la creación de un nuevo archivo de estilos.css que servirá para darle una vista más
agradable a nuestra página web.

Se vincula con el anterior archivo creado.

Se le cambia el tipo de fuente agregando la propiedad font-family que define una lista de fuentes
o familias de fuentes, con un orden de prioridad, para utilizar, para esta página hemos utilizado
una tipografía de tipo “Arial y Sans Serif”.

Resultado de ejecución.
Se agrega ancho, un margen color morado y borde a la caja del contenido. Para esto se utilizaron
propiedades como width que establece el ancho de un elemento mediante un valor numérico en
este caso pixeles, margin establece el margen y border permite definir en una única regla todos
los bordes de los elementos seleccionados.

Se agregan también los formato a la cabecera poniéndole color, altura, anchura al igual que los
bordes y centrando el texto.
 Resultados de ejecución.

Se modifica el diseño del menú, colocándole una barra, ancho y alto, viñetas, color de texto y
opciones en una sola línea.
 Resultados de ejecución

Se modifica la barra de búsqueda dividiéndola en un espacio de la caja de texto, indicando el

espacio que se pretende dejar para el resto del contenido y el otro restante para la opción de
búsqueda, para esto de hace uso de la propiedad float que ubica un elemento al lado izquierdo o
derecho de su contenedor, permitiendo a los elementos de texto y en línea aparecer a su costado.
Se le agrega color a cada espacio para diferenciar los elementos.
Se agrega clearfix enseguida del cierre de la etiqueta para que se mantenga en cierto lugar.

Resultados de Ejecución
Para darle mejor visión al pie de página se le agrega color de fondo, color del texto una alineación
para que aparezca centrado.

Resultados de ejecución.

Se le agregan márgenes a la barra de manera en que se vea más estética la parte de búsquedas.
Se ajusta el contenido dentro de los elementos article, como el color, los márgenes y bordes en

Resultados de Ejecución.

Se cambia el tamaño de el contenido de las etiquetas <h2> al igual que el tamaño de los párrafos.
Resultado de Final de Ejecución de la práctica.
Nota: Fue necesario cambiar la altura de la sección de búsqueda al cambiar el tamaño de los
títulos y textos, debido los espacios que sobraban.

Antes

Después