Puesta en marcha de Visual Studio Code

Estos ejercicios permiten comprobar que se ha configurado correctamente Visual Studio Code.

Para facilitar la realización de los ejercicios, se proporcionan unas plantillas de los ejercicios Visual Studio Code. Puesta en marcha.

VS Code 1 - Abrir páginas en el navegador

  1. Descargue y descomprima las plantillas.
  2. Abra en Visual Studio Code la página vscode-1.html.
  3. Abra la página vscode-1.html en Firefox y Chrome con los atajos de teclado Ctrl+Alt+f y Ctrl+Alt+c.

    Si no se abre el navegador correspondiente, revise los atajos de teclado creados en Visual Studio Code, como se explica en la lección Configuración de Visual Studio Code.

  4. Compruebe que la dirección de la página es file:///C://Users/NombreDeUsuario/Documents/LMSGI/HTML/ejercicios/puesta-en-marcha/vscode-1.html, donde NombreDeUsuario es el nombre del usuario de Windows.
  5. El resultado en el navegador debe ser el siguiente:
    ERROR (no puede mostrarse el objeto)
    Enlace a ejemplo

VS Code 2 - Extensión HTMLHint

  1. Cree en Visual Studio Code la página vscode-2.html.
  2. Copie y pegue el siguiente código HTML en la página vscode-2.html:
    <html LANG="es">
    <!DOCTYPE html+css>
    <head>
      <meta charset="utf-8" charset="utf-8">
      <link rel="stylesheet" href="">
    </head>
    
    <body>
      <P id="a">Esta página web NO es una página HTML válida.
    
      <p id='a'> 5 > 4</p>
    
      <p><img src="a.png"></p>
    </body>
    </html>
    
    
  3. Compruebe que en la barra lateral inferior el indicador de error indica la existencia de 13 avisos. Haga clic en él para ver los errores detectados.

    VSC. Errores HTMLHint

    Si no se muestran los 12 avisos, compruebe que la extensión HTMLHint está instalada y revise la configuración de la extensión HTMLHint, como se explica en la lección Configuración de Visual Studio Code.

  4. Corrija algunos de los errores y compruebe que van desapareciendo de la lista a medida que se van corrigiendo:

    VSC. Errores HTMLHint

VS Code 3 - CSS Lint

  1. Cree en Visual Studio Code la página vscode-3.css.
  2. Copie y pegue el siguiente código CSS en la página vscode-3.css:
    @font-face { }
    
    @test { }
    
    p {
        colour: black;
        -webkit-flex: flex;
    }
    
    a { }
    
    #ab { color red}
      
  3. Compruebe que en la barra lateral inferior el indicador de error indica la existencia de 7 avisos. Haga clic en él para ver los errores detectados.

    VSC. Errores CSS Lint

VS Code 4 - Extensión Close HTML/XML Tag

  1. Abra en Visual Studio Code la página vscode-4.html.
  2. Borre la etiqueta de cierre </p> (línea 13).
  3. Compruebe que en la barra lateral inferior el indicador de error indica la existencia de un error. Haga clic en él para ver el error detectado. Compruebe que efectivamente señala la ausencia del cierre de la etiqueta <p>

    VSC. Error HTMLHint

    Si no se muestra el error, compruebe que la extensión HTMLHint está instalada y revise la configuración de la extensión HTMLHint, como se explica en la lección Configuración de Visual Studio Code.

  4. Corrija el error situando el cursor al final del párrafo y pulsando el atajo de teclado Alt+.. Compruebe que se añade el cierre de la etiqueta </p>. Compruebe que el indicador de error ya no muestra ningún error.

    VSC. Error HTMLHint

    Si no se añade la etiqueta , compruebe que la extensión Close HTML/XML Tag está instalada y revise la configuración de la extensión Close HTML/XML Tag, como se explica en la lección Configuración de Visual Studio Code.

VS Code 5 - Extensión Tag Inserter

  1. Abra en Visual Studio Code la página vscode-5.html.
  2. Compruebe que el texto de la línea 11 no está rodeado de etiquetas.
  3. Seleccione el texto de la línea 11 (sin los espacios iniciales).
  4. Pulse el atajo de teclado Alt+Mayús+i. Compruebe que se abre un cuadro de texto en la parte superior, escriba h2 y pulse Intro.

    Si la línea 11 no aparece rodeada de la etiqueta <h2>, compruebe que la extensión Tag Inserter está instalada.

  5. Sitúe el cursor en la etiqueta <h2>. Compruebe que aparece un segundo cursor en la etiqueta de cierre. Borre el nombre de la etiqueta (sin borrar las desigualdades < >) y corríjalo por <h1>. Compruebe que se cambia simultáneamente la etiqueta de cierre </h1>.

    Compruebe que también puede modificar ambas etiquetas editando la etiqueta de cierre.

VS Code 6 - Extensión Image Preview

  1. Abra en Visual Studio Code la página vscode-6.html.
  2. Abra la página en el navegador. El resultado debe ser el siguiente (el logotipo es muy grande, pues ocupa todo el ancho de la pantalla):
    ERROR (no puede mostrarse el objeto)
    Enlace a ejemplo
  3. Sitúe el cursor encima del nombre de la imagen y observe como se muestra una ventana que contiene una miniatura de la imagen y su tamaño.

    Si no se muestra la ventana, compruebe que la extensión Image Preview está instalada.

  4. Pulse el atajo Ctrl+Alt+e Ctrl+Alt+t y compruebe que se añaden los atributos width = 100 y height = 100.
  5. Guarde la página en Visual Studio Code y actualice la página en el navegador. Compruebe que la imagen ya se muestra al tamaño 100px x 100px.

    VSC. Atributos width y height en imagen

VS Code 7 - Extensión CSScomb

  1. Abra en Visual Studio Code la página vscode-7.html.
  2. Abra la página en el navegador. El resultado debe ser el siguiente:
    ERROR (no puede mostrarse el objeto)
    Enlace a ejemplo
  3. Abra la hoja de estilo vscode-7.css. Esta hoja de estilo no es incorrecta, pero no sigue el estilo recomendado en estos apuntes.
         BODY      {background-color:wheat;font-family : sans-serif    ;     }
      h1 { text-transform       : uppercase;      text-align       :     center     }
    
    
    
    
  4. Pulse el atajo Alt+Mayús+c Alt+Mayús+f y compruebe que se formatea más o menos correctamente la hoja de estilo (una propiedad por línea, etiquetas en minúsculas, un espacio de separación, orden de etiquetas, punto y coma tras cada propiedad, etc).
         body {
      background-color: wheat;
      font-family: sans-serif    ;
    }
    
    h1 {
      text-align: center;     ;
      text-transform: uppercase;
    }
    
    

    Si no obtiene este resultado, compruebe que la extensión CSScomb está instalada y revise la configuración de la extensión CSScomb, como se explica en la lección Configuración de Visual Studio Code.

    ¡Atención! Nota: CSSComb no corrige los espacios iniciales de la primera línea y añade un segundo punto y coma en la propiedad reordenada que antes no tenía punto y coma. El 16/10/2019 abrí dos issues (csscomb#621 y csscomb#622) en el repositorio del proyecto CSSComb para aclarar si es un problema de CSSComb o de la configuración propuesta en estos apuntes.

  5. Guarde la hoja de estilo y actualice la página en el navegador. Compruebe que la página se ve exactamente igual que antes.