Visual Studio Code. Uso de extensiones para el curso Páginas web HTML y hojas de estilo CSS

En esta lección se comenta la utilización de algunas de las extensiones de Visual Studio Code recomendadas para seguir este curso, concretamente:

Extensión Tag Inserter: Inserción de etiquetas

La información sobre esta extensión se encuentra en la lección Configuración recomendada para el curso Páginas web HTML y hojas de estilo CSS.


Esta etiqueta permite añadir etiquetas a un bloque de texto. En este curso utilizaremos esta extensión para realizar los ejercicios, ya que en la mayoría de ellos las plantillas incluyen texto de la página web sin etiquetas.

El procedimiento es el siguiente:

  1. Seleccione el texto alrededor del cual quiere añadir una etiqueta:

    VSC. Extensión Imagen preview

  2. Escriba el atajo de teclado Alt+Shift+i y se abrirá una ventana en la parte superior:

    VSC. Extensión Imagen preview

  3. Escriba en la ventana la etiqueta deseada (sin escribir desigualdades < >):

    VSC. Extensión Imagen preview

  4. La etiqueta se añadirá alrededor del texto seleccionado:

    VSC. Extensión Imagen preview

Tag Inserter permite también añadir etiquetas con atributos:

  1. Seleccione el texto alrededor del cual quiere añadir una etiqueta:

    VSC. Extensión Imagen preview

  2. Escriba el atajo de teclado Alt+Shift+i y en ventana superior escriba la etiqueta y su atributo (sin escribir desigualdades < >):

    VSC. Extensión Imagen preview

  3. La etiqueta se añadirá alrededor del texto seleccionado:

    VSC. Extensión Imagen preview

Tag Inserter permite también añadir etiquetas que agrupen varios elementos:

  1. Seleccione el texto alrededor del cual quiere añadir una etiqueta:

    VSC. Extensión Imagen preview

  2. Escriba el atajo de teclado Alt+Shift+i y en ventana superior escriba la etiqueta y su atributo (sin escribir desigualdades < >):
    VSC. Extensión Imagen preview
  3. La etiqueta se añadirá alrededor del texto seleccionado:

    VSC. Extensión Imagen preview

Extensión Image preview: Información de imágenes

La información sobre esta extensión se encuentra en la lección Configuración recomendada para el curso Páginas web HTML y hojas de estilo CSS.


Al situar el cursor sobre la ruta de una imagen, se muestra un cuadro con una miniatura de la imagen y el tamaño de la imagen. Además, haciendo Ctrl+clic se abre la imagen en otra pestaña.

Esta extensión muestra también el tamaño de las imágenes insertadas, lo que nos permite rellenar los atributos width y height fácilmente. De todas formas, para esta tarea se aconseja utilizar el atajo de teclado de Emmet ctrl+alt+e ctrl+alt+s que se comenta en la lección Uso de Visual Studio Code.

  1. Cree la etiqueta <img> con los atributos src y alt. En el borde izquierdo del editor Visual Studio Code muestra una miniatura de la imagen (esta miniatura es independiente de la extensión Image Preview):

    VSC. Extensión Imagen preview

  2. Sitúe el cursor sobre el atributo src y se mostrará un cuadro con una miniatura de la imagen y el tamaño de la imagen y enlaces para varias acciones:

    VSC. Extensión Imagen preview

  3. Puede añadir los atributos width y height con los valores indicados en el cuadro:

    VSC. Extensión Imagen preview