Universidad Autónoma de Nuevo
León.
Facultad de Ingeniería Mecánica y
Eléctrica.
Agosto – Diciembre 2024
LABORATORIO DE PROGRAMACIÓN WEB.
Práctica 2: HTML.
Ingeniera: Laura Patricia Del Bosque Vega.
Grupo: 436
Fecha: 19/09/2024
Nombre Matricula Carrera
Miguel Angel 2007035 IAS
Montemayor Coronado
Hector Daniel Catana 1999654 IAS
Achulla
Maximo Alejandro Trejo 2022641 IAS
Sanchez
2.1.-Introducción a HTML
Actividad 2.1.- Cree el marcado de HTML5 que produzca la tabla que se
muestra en la Ilustración 1. Use etiquetas <em> y <strong> según sea
necesario.
Primero se hace el “esqueleto”, En segundo introducimos todas las etiquetas necesarias
para la información como, en este caso, se requiere las etiquetas <table> para la tabla
que es la parte principal, las etiquetas <tr> y <td> para la única fila y las dos columnas a
crear, las etiquetas <h1>, <ul> y <li> y <p> para el contenido de la primera columna y la
etiqueta <img> para la segunda columna.
Actividad 2.2.- Escriba un documento de HTML5 que produzca la tabla que se
muestra en la Ilustración 2.
introducimos todas las etiquetas necesarias para la información, en este caso
se ocupa nuevamente las etiquetas de <table>, <h1>, <tr> y <td> a diferencia
de la inclusión de la etiqueta<caption>, se añade los detalles solicitados para
hacer que se parezca a la imagen de manera fiel, ahora mediante el uso de
atributos como “colspan” para hacer que las filas de una tabla abarquen
cierto número de columnas
Actividad 2.3 .- Cree un formulario de registro de un sitio Web para obtener
el primer nombre, apellido y dirección de correo electronico de un usuario.
Incluya además una pregunta de encuesta opcional que pida el semestre en
el que se encuentra el usuario en la universidad (Por ejemplo, primer
semestre). Coloque la pregunta de encuesta opcional en el elemento details
que el usuario puede expandir para ver la pregunta.
Este código HTML crea un formulario de registro en el que los usuarios
pueden ingresar su nombre, apellido, correo electrónico y, opcionalmente, el
semestre universitario mediante un elemento desplegable (`<details>`). Que
enlaza a un archivo CSS externo (`style2.3.css`) para aplicar estilos. El
formulario está organizado con campos de entrada, un botón de envío, y
elementos estilizados mediante las clases `controls` y `botons`, asegurando
que los campos requeridos se completen antes de enviar el formulario.
Actividad 2.4 .- Haga una plantilla de diseño que contenga un elemento
header y dos párrafos. Use float para alinear los dos párrafos como
columnas, uno al lado del otro. Asigne un borde y/o un color de fondo al
elemento header y a los dos párrafos, para que pueda ver en dónde están.
Este HTML nos muestra primero que nada el cuerpo del programa, en la
parte de “<head>”, tenemos el título de la página, al igual que lo que nos
enlaza a nuestro CSS que veremos en un momento. En el “<body>” tenemos
la estructura que le da vida a nuestro proyecto, abrí un “<header>” en el cual
decidí meter un class para poder modificar su diseño.
Actividad 2.5: Cree un botón de navegación mediante un elemento div con
un vínculo en su interior. Asígnele un borde, fondo y color de texto y haga
que cambien cuando el usuario pase el ratón sobre el botón. Use una hoja de
estilo externa. Asegúrese de que su hoja de estilos se valide en
http://jigsaw.w3.org/css-validator/. Tenga en cuenta que algunas
advertencias tal vez no puedan evitarse, pero su CSS no debera tener errores.
tenemos nuestro head con los elementos básicos que se agregan por default
al seleccionar el formato antes mencionado, cambiando el contenido de la
etiqueta “tittle” a nuestro gusto, siguiendo con el “body”, en el cual se colocó
una etiqueta div, en la cual insertamos la clase “nav-button” para crear
nuestro botón de navegación.
