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

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:

   

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

   

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

   

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

   

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

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

   

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

   

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

   

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

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

   

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

   

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+t 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):

   

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:

   

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