Instalación de Live Server en Visual Studio Code

  1. Abre Visual Studio Code y dirígete al apartado de Extensiones (icono de cubo en el lateral izquierdo).
  2. Busca Live Server en la barra de búsqueda.
  3. Selecciona la extensión que tiene más de 47 millones de descargas.
  4. Instálala igual que lo hiciste con otras extensiones como SSH.

Creación de un archivo HTML básico

  1. Cierra el panel de extensiones.
  2. Crea un nuevo archivo llamado ejemplos.html.
  3. Escribe la estructura básica de un documento HTML:
   <!DOCTYPE html>
   <html lang="es">
   <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>Ejemplos HTML</title>
   </head>
   <body>
       <h1>Ejemplos HTML</h1>
   </body>
   </html>
  1. Guarda el archivo.

Uso de etiquetas HTML comunes

Encabezados

<h1>Encabezado Principal</h1>
<h2>Subencabezado 1</h2>
<h3>Subencabezado 2</h3>

Párrafos y Texto

<p>Este es un párrafo.</p>
  • lorem7: Genera un párrafo de 7 palabras.
  • lorem*3: Genera 3 párrafos.

Formato de Texto

  • Negrita: <strong>Texto en negrita</strong>
  • Itálica: <em>Texto en itálica</em>
  • Subrayado: <u>Texto subrayado</u>

Uso de Div y Secciones

  • Div:
  <div>
      <p>Esto es un div.</p>
  </div>
  • Section:
  <section>
      <h2>Sección de Ejemplo</h2>
      <p>Texto dentro de la sección.</p>
  </section>

Crear listas en HTML

Listas Desordenadas

<ul>
    <li>Hacer la compra</li>
    <li>Estudiar HTML</li>
</ul>

Listas Ordenadas

<ol>
    <li>Encender el fuego</li>
    <li>Llenar la olla con agua</li>
</ol>

Visualización en tiempo real con Live Server

  1. Haz clic derecho en el archivo ejemplos.html.
  2. Selecciona Open with Live Server.
  3. Los cambios que realices en el archivo HTML se reflejarán automáticamente en el navegador.

Comentarios

No comments found.