Ejercicio: Creación de una página HTML

  • 5 minutos

En este ejercicio, comenzará a crear la página web para su currículum. Para empezar, agregue información de alto nivel, como el nombre y los encabezados de sección. También agrega algunos comentarios, que usamos como marcadores de dónde agregar información en un ejercicio posterior.

En este ejercicio se usa vscode.dev : una versión basada en web de Visual Studio Code y CodeSwing. Estas herramientas ayudan a simplificar el proceso de desarrollo. Para completar los ejercicios siguientes, no se requiere ninguna instalación local.

Creación de una página HTML con CodeSwing

Para empezar, cree una carpeta, configure las herramientas y cree un "swing" mediante CodeSwing en vscode.dev. Un cambio muestra automáticamente los resultados del código que crea en vscode.dev. Esto le permite realizar rápidamente modificaciones y las actualizaciones se producen en tiempo real.

En el vídeo siguiente se muestra cómo instalar CodeSwing en Visual Studio Code. Estos pasos también se encuentran en los pasos del ejercicio.

  1. Cree una carpeta en el escritorio denominado resume.
  2. Abra vscode.dev.
  3. Seleccione Abrir carpeta.
  4. Vaya a la carpeta resume que creó anteriormente y seleccione Seleccionar carpeta.
  5. Cuando se le solicite que permita al sitio ver archivos, seleccione Ver archivos.
  6. Seleccione el botón Extensiones .

    Captura de pantalla del icono Extensiones.

  7. En el cuadro de texto Buscar extensiones en Marketplace , escriba CodeSwing.
  8. Seleccione Instalar para instalar CodeSwing.
  9. Para abrir la paleta de comandos, seleccione Ctl-Shift-P o Cmd-Shift-P en un equipo Mac.
  10. Escriba CodeSwing en la paleta de comandos y seleccione CodeSwing: New Swing in Directory....
  11. Seleccione Seleccionar carpeta para usar el directorio actual (que es el que creó en un paso anterior).
  12. Seleccione Básico: Solo HTML.
  13. Cuando se le pida que guarde los cambios para reanudar, seleccione Guardar cambios.

Visual Studio Code crea dos ventanas en paralelo. El lado izquierdo es el editor, donde puede escribir el código HTML. La parte derecha se comporta como un navegador, mostrando los resultados de tu código HTML.

Agregar HTML para crear la estructura de la página

A continuación, agregue el código HTML para crear la estructura de la página. Cree los tres elementos principales de html, heady body. Dentro de body, agrega una sección que contiene información general sobre usted, como su nombre y la información de redes sociales. A continuación, agregue secciones que enumeren su educación y experiencia.

En el vídeo siguiente se muestra cómo crear HTML en Visual Studio Code y hacer que el código se represente en CodeSwing. Estos pasos también se encuentran en los pasos del ejercicio.

No dude en reemplazar Su nombre por su nombre. En otros ejercicios, vas a crear listas y vínculos a tu dirección de correo electrónico, identificadores de redes sociales, y formación y experiencia profesional.

Después de agregar el código, vas a revisar qué código se ha agregado.

  1. En index.html, agregue el código HTML siguiente:
<html>
<head>
  <title>Your Name resume</title>
</head>
<body>
  <h1>My Name</h1>
  <!-- email address -->
  <h2>Social Media</h2>
  <!-- social media -->
  <h2>Education</h2>
  <!-- education -->
  <h2>Experience</h2>
  <!-- experience -->
</body>
</html>

Cada uno de los elementos del CÓDIGO HTML hace cosas específicas. En la tabla siguiente se describen las etiquetas que usó en el código HTML y cómo los entiende el explorador.

Etiqueta Descripción
<html> Etiqueta "contenedor" para todo el documento HTML. Todas las demás etiquetas se escriben dentro del elemento HTML.
<head> Contenedor de encabezado. El encabezado normalmente incluye referencias a otros archivos que necesita la página o el sitio. También puede incluir datos que los motores de búsqueda y los sitios de redes sociales usan para encontrar mejor su sitio web.
<body> Esta etiqueta crea el contenedor body para la página web. La mayoría de los elementos de visualización van en el elemento body.
<div> La etiqueta de división crea una sección en HTML. Las secciones suelen tener contenido o contenido similar relacionado entre sí.
<h1> - <h6> Estas son etiquetas de encabezado. Proporcionan alguna estructura al documento HTML. Indican al explorador que dé formato al texto entre ellos de una manera específica para mostrar esa jerarquía.
<!-- comment text --> Estas etiquetas son comentarios en HTML. No crean la salida renderizada. Los desarrolladores los usan para facilitar la búsqueda, el uso compartido y la comprensión del código.
/* CSS comment */ Estas etiquetas de comentario se usan en hojas de estilos en cascada.
  1. A medida que escribe, la página se actualiza automáticamente; El resultado final parece similar a la siguiente imagen:

Captura de pantalla de la estructura del currículum.

Revisión del código

Cada página HTML tiene html como elemento principal raíz, con todo el contenido incluido dentro de ella. html normalmente tiene dos elementos secundarios directos, head que contienen metadatos y body que contienen la información que se va a mostrar.

Observe cómo se usa solo un h1 elemento para el nombre y h2 elementos para los encabezados de cada una de las secciones. Esto es para ayudar a resaltar las partes más importantes de la página. El nombre es la información más importante de la página, por lo que se destaca con h1.

Por último, hay comentarios para la dirección de correo electrónico, las redes sociales, la educación y la experiencia. Se usan como marcadores de posición y se reemplazan en un ejercicio posterior de este módulo.