Práctica 1: HTML y CSS

¡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.

Edición de contenido HTML

Descarga la página HTML que usamos como ejemplo en clase: ejemplo-harry-potter.tgz. 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, pero no uses ninguno de los ficheros JavaScript que se están enlazando desde example.html. 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

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.

Vistas para un servicio de microblogging

Durante las próximas semanas desarrollarás una aplicación Web de microblogging inspirada en el servicio X (anteriormente, 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="post">
    <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.