Guía de Taller

1
Diseño y Maquetación Web – Introducción y fundamentos de las páginas web
______________________________________________________________________
_

Diseño y Maquetación Web

Introducción y fundamentos de las páginas web

Sesión 1

LOGRO DE LA SESIÓN
Conoce la línea de tiempo de las páginas web. Uso de un editor de código: instalación y preparación de
extensiones.

MATERIALES

a) EQUIPOS: PC de escritorio / Laptop

b) HERRAMIENTAS: Visual Studio Code y sus extensiones
c) CONSUMIBLES:

PROCEDIMIENTO

BREVE HISTORIA DE LAS PÁGINAS WEB

Diseño y Maquetación Web – Formación Continua

Guía de Taller
2
Diseño y Maquetación Web – Introducción y fundamentos de las páginas web
______________________________________________________________________
_

Diseño y Maquetación Web – Formación Continua

Guía de Taller
3
Diseño y Maquetación Web – Introducción y fundamentos de las páginas web
______________________________________________________________________
_
EDITOR DE CÓDIGO, INSTALACIÓN Y PREPARACIÓN DE EXTENSIONES

La página oficial de Visual Studio Code es https://code.visualstudio.com/

Desde la página principal se puede descargar la última versión estable (mediante el cuadro azul grande situado
a la izquierda) o acceder a la página de descargas (mediante el cuadro azul más pequeño situado arriba a la
derecha):

Instalar Visual Studio Code

1. Haga doble clic sobre el instalador de Visual Studio Code.

2. Acepte la licencia de Visual Studio Code.
3. Pulse el botón Siguiente en las ventanas sucesivas y por último Finalizar

Diseño y Maquetación Web – Formación Continua

Guía de Taller
4
Diseño y Maquetación Web – Introducción y fundamentos de las páginas web
______________________________________________________________________
_

Primera ejecución

La primera vez que se abre Visual Studio Code después de la instalación, se muestra una página de bienvenida:

Diseño y Maquetación Web – Formación Continua

Guía de Taller
5
Diseño y Maquetación Web – Introducción y fundamentos de las páginas web
______________________________________________________________________
_

Agregar extensiones

Para agregar extensiones en Visual Studio Code haga clic en el icono Extensiones

Escriba el nombre de la extensión luego pulse en Install de la extensión que desea agregar

Diseño y Maquetación Web – Formación Continua

Guía de Taller
6
Diseño y Maquetación Web – Introducción y fundamentos de las páginas web
______________________________________________________________________
_

 Live Server
Es un servidor web virtual que permite visualizar los cambios realizados en una página web en tiempo
real.

Para probar Live Server haga clic derecho en la ventana de cóodigo y elija Open with Live Server

Diseño y Maquetación Web – Formación Continua

Guía de Taller
7
Diseño y Maquetación Web – Introducción y fundamentos de las páginas web
______________________________________________________________________
_

ESTRUCTURA HTML

Creación de proyecto web

Visual Studio Code implementa los sitios basados en proyectos. Para crear un proyecto haga lo siguiente:
1. En el escritorio crea una carpeta de nombre SitioWeb1
2. Arrastra la carpeta al panel derecho del editor

Diseño y Maquetación Web – Formación Continua

Guía de Taller
8
Diseño y Maquetación Web – Introducción y fundamentos de las páginas web
______________________________________________________________________
_
Creación de página html en el proyecto

Contenido de la página html

Diseño y Maquetación Web – Formación Continua

Guía de Taller
9
Diseño y Maquetación Web – Introducción y fundamentos de las páginas web
______________________________________________________________________
_
Despliegue de la página en Live Server

Vista de la página en Live Server

Diseño y Maquetación Web – Formación Continua