<ALVESC /> ACADEMY
Introducción al Desarrollo Web y HTML Básico
Volver a clases
Fundamentos de Programación●Principiante

Introducción al Desarrollo Web y HTML Básico

120 min
44 vistas

Ecosistema web, instalación de herramientas y creación de la primera página con estructura HTML correcta.

Introducción

  • HTML, CSS y JavaScript: HTML define el contenido y la estructura, CSS define la presentación (colores, tamaños, layout) y JavaScript añade interacción (eventos, validaciones, peticiones a APIs). Los tres se cargan en el navegador: primero se parsea el HTML, se descarga el CSS para pintar la página y luego se ejecuta el JS sobre el DOM.
  • Frontend vs Backend: Frontend es todo lo que el usuario ve e interactúa en el navegador; backend es la lógica y datos en el servidor (APIs, bases de datos). Se comunican principalmente vía HTTP/HTTPS.
  • Motores de renderizado: Chrome usa Blink, Firefox usa Gecko y Safari usa WebKit. Todos convierten el HTML en un árbol DOM y aplican estilos para generar el render final.

Configuración del Entorno

  • VS Code + extensiones: Instala VS Code y agrega Live Server (servidor local con recarga), Prettier (formato consistente) y HTML CSS Support (autocompletado). Activa el formateo al guardar para mantener el código ordenado.
  • Estructura de proyecto: Crea una carpeta de trabajo (ej. mi-primera-web/), dentro un archivo index.html y una carpeta assets/ para imágenes. Abre la carpeta completa en VS Code (no solo el archivo) para usar bien el buscador y la terminal integrada.
  • Terminal integrada: Abre con Ctrl+` . Comandos básicos: ls/dir para listar, cd carpeta para moverte, y con Live Server inicia la vista previa desde el botón Go Live.

Estructura Básica de un Documento HTML

html
1<!DOCTYPE html>
2<html lang="es">
3  <head>
4    <meta charset="UTF-8" />
5    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6    <title>Mi primera página</title>
7  </head>
8  <body>
9    <h1>Hola mundo</h1>
10  </body>
11</html>
  • DOCTYPE indica al navegador que use el modo estándar de HTML5.
  • <html lang="es"> define el idioma para accesibilidad y buscadores.
  • <head> incluye metadatos: codificación, viewport, título, descripciones.
  • <body> contiene todo lo visible en la página.

Etiquetas de Texto y Listas

  • Encabezados y párrafos: Usa <h1> a <h6> para jerarquía de títulos y <p> para párrafos. Solo debe haber un <h1> principal por página.
  • Formato de texto: <strong> resalta importancia, <em> enfatiza, <mark> marca texto relevante, <small> para notas o disclaimers.
  • Saltos y separadores: <br> para saltos puntuales y <hr> para dividir secciones de forma visual.
  • Listas: <ul> listas sin orden, <ol> listas numeradas, cada elemento en <li>. Úsalas para pasos, checklists y menús.

Ejemplos de Código

3 ejemplos

Plantilla base

html
1<!DOCTYPE html>
2<html lang="es">
3  <head>
4    <meta charset="UTF-8" />
5    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6    <title>Título descriptivo</title>
7  </head>
8  <body>
9    <h1>Encabezado principal</h1>
10    <p>Contenido inicial.</p>
11  </body>
12</html>

Texto con listas

html
1<h1>Sobre mí</h1>
2<p>Soy estudiante de desarrollo web y disfruto aprender.</p>
3<ul>
4  <li>Habilidad: organización</li>
5  <li>Hobbie: videojuegos retro</li>
6  <li>Objetivo: publicar mi primer sitio estático</li>
7</ul>

Metadatos esenciales

html
1<html lang="es">
2  <head>
3    <meta charset="UTF-8" />
4    <meta name="description" content="Portafolio personal" />
5  </head>
6</html>

Recursos

6 recursos disponibles

Documentación Oficial

DocumentaciónPrincipiante

HTML Validator

Valida tu HTML y detecta errores de estructura o accesibilidad.

Validador de HTML

¡Hora de Practicar!

PrácticaPrincipiante15 min

Práctica Guiada

Crear una pagina HTML

  • Crear una página "Sobre mí" con un <h1>, dos párrafos descriptivos y dos listas: una de hobbies y otra de habilidades técnicas. Agregar un <hr> entre secciones.
  • Abrir con Live Server, inspeccionar el DOM en DevTools y comprobar que los encabezados siguen un orden lógico (h1 > h2 > h3).

Desafío de Código

EjercicioPrincipiante15 min

Ejercicios Prácticos

Sigue practicando

  1. Declara el idioma de la página con lang y agrega un título descriptivo.
  2. Crea un párrafo que incluya texto en negrita y cursiva.
  3. Construye una lista ordenada con tus 3 metas de aprendizaje.
  4. Agrega un separador <hr> y un encabezado secundario para otra sección.

Documentación Oficial

DocumentaciónPrincipiante15 min

Instalar VS Code

Link para descarga de IDE VS Code

Instalar VS Code

Documentación Oficial

DocumentaciónPrincipiante15 min

Live Server

Extensión para trabajar paginas HTML

Extensión Live Server

Documentación Oficial

DocumentaciónPrincipiante15 min

HTML: Introducción

Guía básica para comprender la estructura y los elementos principales.

MDN: Introducción a HTML

ALVESC ACADEMY - Plataforma Educativa