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

Las extensiones que se aconseja instalar para seguir el curso de Páginas web HTML y hojas de estilo CSS de mclibre.org se encuentran en la lección sobre la Configuración recomendada de Visual Studio Code.

En esta lección se comenta la utilización de algunas de esas extensiones, concretamente:

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.

En este curso, utilizaremos esta extensión para ver el tamaño de las imágenes insertadas y poder rellenar los atributos width y height fácilmente.

  1. Cree la etiqueta <img> con los atributos src y alt:

    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:

    VSC. Extensión Imagen preview

  3. Añada los atributos width y height con los valores indicados en el cuadro:

    VSC. Extensión Imagen preview

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, en los que se proporciona el 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 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 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