Computación Web (2023/24)

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 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:

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:

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 Twitter. La aplicación consistirá, entre otras, de las siguientes vistas:

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: