2 Bachillerato – SA1 – HTML

Herramientas para el desarrollo web

Visual Studio Code

W3School

Actividad 1 – Instalación y configuración de Visual Studio Code

En esta actividad vamos a preparar nuestro entorno de desarrollo para trabajar con Visual Studio Code.

Primero debemos instalarlo en nuestros ordenadores, en el caso de los ordenadores del aula buscaremos en el centro de software.

Segundo, vamos a instalar las siguientes extensiones:

  • Live Server (por Ritwick Dey)
    Para qué sirve: Abre un servidor local en el navegador con un solo clic. Cada vez que se guarda el archivo (Ctrl + S), la página web se actualiza automáticamente sin necesidad de recargar el navegador manualmente.

  • Prettier – Code Formatter (por Prettier)
    Para qué sirve: Formatea el código automáticamente (ordena las sangrías, alineación de etiquetas y espacios) al guardar.

  • Auto Rename Tag (por Jun Han)
    Para qué sirve: Cuando cambias la etiqueta de apertura (por ejemplo, de <h1> a <h2>), la etiqueta de cierre </h1> se modifica automáticamente.

  • Spanish Language Pack for Visual Studio Code: Si se prefiere tener la interfaz de VS Code completamente en español.

Actividad 2 – Primera toma de contacto

Hola Mundo

Actividad 3

Una vez hemos estudiado algunas de las etiquetas HTML relacionadas con el texto, crea una página web que se muestre como en la imagen.

Colores, unidades absolutas y relativas y CSS

Practica las etiquetas

Actividad 4

A continuación, accede al fichero PDF donde encontrarás 4 códigos de 4 páginas web, debes:

  1. Observar el código.
  2. Responder a las preguntas de cada ejercicio.
  3. Crear una página web por cada ejercicio donde uses el código expuesto.
  4.  ¿Qué resultado se obtiene? ¿Coincide con lo que creías que debía salir?