Escribir y estructurar tu primera página web con HTML

Clase 5 de 27 • Curso de Creación de Páginas Web con Wordpress y No-code

Clase anteriorSiguiente clase

Resumen

¿Cómo comenzar con HTML?

HTML es la columna vertebral del desarrollo web y, aunque inicialmente pueda parecer abrumador debido a la gran cantidad de etiquetas disponibles, el primer paso es comenzar a escribir código. Es crucial familiarizarse con las etiquetas básicas y cómo usarlas, y para eso, consultar la documentación oficial en MDN Web Docs puede ser de gran ayuda.

¿Qué es y cómo se escribe el primer archivo HTML?

Crear un documento HTML es la base para desarrollar cualquier página web. Para empezar, se necesita un editor de código, como Visual Studio Code, instalado y configurar un nuevo archivo con la extensión .html:

<!DOCTYPE html>
<html>
<head>
    <title>Un título chido</title>
    <meta charset="UTF-8">
</head>
<body>
    <!-- Aquí va el contenido de la página web -->
</body>
</html>

Al guardar cambios en el archivo, se elimina el indicador de cambios no guardados, marcado como un pequeño círculo en el editor. Visual Studio Code facilita esta acción con un simple ctrl + S en Windows o command + S en macOS.

¿Cómo visualizar el archivo HTML en un navegador?

Para abrir este archivo en un navegador web:

  1. Copia la ruta absoluta del archivo haciendo clic derecho sobre él y selecciona "Copy Path" (Copiar ruta).
  2. Pega esta ruta en la barra de direcciones del navegador.

¿Por qué agregar una declaración de meta charset?

Añadir meta charset="UTF-8" es esencial para admitir caracteres especiales, como los acentos en español. Esto asegura que el título y demás texto se muestren correctamente en todos los navegadores.

¿Cómo estructurar contenido con HTML?

Al construir una página web es importante seguir una estructura sólida en HTML. La etiqueta <body> aloja todo el contenido visible para los usuarios. Aquí puedes incluir encabezados, párrafos, imágenes y listas:

¿Cuál es el propósito de usar las etiquetas de encabezado?

Los encabezados, como <header> y <h1> a <h6>, son cruciales para organizar el contenido. <header> suele contener el logotipo y el título principal de la página.

¿Cómo se utiliza la etiqueta 'div' para agrupar contenido?

La etiqueta genérica <div> se usa principalmente para agrupar otros elementos HTML y aplicar estilos CSS posteriormente. Aunque no tiene un significado semántico, permite mantener el contenido organizado y gestionar mejor el diseño.

¿Cómo insertar imágenes en HTML?

Para incluir imágenes, usa la etiqueta <img> que requiere el atributo src para indicar la ubicación de la imagen:

<img src="imagenes/logo.jpg" alt="Descripción del logo">

Al guardar y actualizar el navegador, la imagen debería mostrarse si la ruta es correcta.

¿Cuál es la importancia de utilizar un editor de código para HTML?

Elegir un editor adecuado, como Visual Studio Code, ofrece autocompletado, permite navegar fácilmente entre archivos y previsualizar cambios instantáneamente. Además, puede manejar proyectos complejos con directorios de archivos e imágenes de manera eficiente, lo que facilita enormemente el proceso de desarrollo web.

Invita a explorar más sobre HTML y experimentar con diversas etiquetas. La práctica continua no solo refuerza el aprendizaje, sino que mejora las habilidades de codificación, esenciales para cualquier desarrollador web. ¡El aprendizaje nunca se detiene, sigue adelante y conviértete en un maestro del HTML!