Práctica 2: HTML y CSS
Ejercicio 1
¡Hola Mundo!
Copia y pega en tu editor de código, por ejemplo Visual Studio Code, el siguiente
fichero HTML de ejemplo:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Mi primera página HTML</title>
</head>
<body>
<p>¡Hola Mundo!</p>
</body>
</html>
Abre el fichero en un navegador Web ejecutando, en una ventana de terminal, los
comandos chrome o firefox con el nombre del fichero como argumento. Observa
cómo se muestra en el navegador. Comprueba que todos los caracteres se
muestran correctamente, en particular la apertura de exclamación. Si no es así,
configura tu editor de código para que escriba el fichero con la codificación de
caracteres UTF-8.
Ejercicio 2
Edición de contenido HTML
Descarga la página HTML que usamos como ejemplo en clase (fichero ejemplo-
harry-potter.zip). Descomprime el fichero y carga example.html en tu
navegador desde el sistema de ficheros. Comprueba que se muestra correctamente.
Verás que si haces clic en el hipervínculo de Harry Potter no se carga ninguna
página. El motivo es que el fichero harry.html al que apunta no existe.
Crea, en el mismo directorio que example.html, una nueva página con nombre
harry.html. Usa en ella la misma hoja de estilos y añade contenido a la página,
tratando de usar una variedad de elementos de los que hemos visto en clase. A
medida que modifiques la página, comprueba cómo se presentan los contenidos en
tu navegador (usa el botón de recarga cada vez que necesites que el navegador lea
la nueva versión de la página).
Combina al menos un elemento de cada uno de los siguientes grupos:
article, section, header, footer, address
h1, h2, ..., h6
div, p, pre
ol, ul, li
em, strong, abbr, span
a
img
table, tr, th, td
form, input, label, option, select, textarea, datalist
Ejercicio 3
Edición de una hoja de estilos CSS
Edita la hoja de estilos usada por los ficheros HTML del ejercicio anterior. Cambia
algunas propiedades y comprueba su efecto en el navegador (usa el botón de
recarga para forzar al navegador a leer de nuevo la hoja de estilos). Prueba
diferentes selectores y algunas propiedades de las que hemos visto en clase.
Asegúrate de que cubres todos los siguientes temas:
Tipografías.
Fondos.
Bordes.
Márgenes y rellenos (padding).
Diferentes tipos de selectores, incluyendo pseudoclases.
También puedes probar el efecto de algunas propiedades con las herramientas para
desarrolladores de Firefox y Chrome, pero ten en cuenta que en este caso los
cambios no se escribirán de vuelta al fichero CSS original y, por tanto, se perderán.
Ejercicio 4
Vistas para un servicio de microblogging
Durante las próximas semanas desarrollarás una aplicación Web de microblogging
inspirada en el servicio Twitter. La aplicación consistirá, entre otras, de las siguientes
vistas:
Página de inicio: muestra, al menos, los mensajes más recientes de los
usuarios a los que sigue el usuario actual, información sobre el usuario actual,
como su nombre y su foto de perfil, y un formulario para crear nuevos
mensajes.
Página de perfil de usuario: muestra el perfil público de un usuario,
incluyendo sus mensajes más recientes, nombre y foto de perfil, así como un
botón o hipervínculo para comenzar a seguir al usuario.
En este ejercicio, como todavía no tenemos ningún código en el servidor,
programarás una versión estática de esas dos vistas con datos falsos (datos de perfil
de usuario, mensajes, etc.). Reutilizarás en los próximos laboratorios el código que
escribas en este ejercicio.
Crea una página HTML para cada una de las vistas, y una única hoja de estilos CSS
que sea compartida por ambas. Ten en cuenta las recomendaciones que se indican
a continuación:
Diseña la estructura HTML mediante la cual representarás un mensaje y sus
metadatos. Por ejemplo: el texto del mensaje, el creador, la fecha de
publicación y, si es un mensaje que responde a otro mensaje, un hipervínculo
que apunte a él. Trata de usar elementos div y span con el atributo class, de
manera que puedas aplicarles propiedades visuales fácilmente más adelante.
Por ejemplo:
<div class="message">
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Vestibulum et ligula sed elit euismod auctor.
</div>
<div class="metadata">
<span class="author">...</span>
<span class="date">...</span>
</div>
</div>
Usa secciones, cabeceras, títulos, etc. cuando sea posible para mejorar la
estructura de la página. De nuevo, usa el atributo class para etiquetar el
propósito de cada sección.
Usa hipervínculos que permitan navegar desde la página de inicio a la página
de perfil de usuario, y viceversa. Por ejemplo, los identificadores de usuario
pueden ser hipervínculos que apunten a la página de perfil del usuario falso
que has creado.
Añade un formulario a la página de inicio para crear nuevos mensajes. Añádele
también un botón a cada mensaje para permitir a los usuarios responder a
ellos. Por ahora, el formulario y los botones no harán nada cuando se pulsen.
Aplicaciones Web (OpenCourseWare, 2023)
