Crea tu primera web básica en HTML

Si estás dando tus primeros pasos en el fascinante mundo del desarrollo web y te has preguntado cómo empezar, seguramente la duda principal que ronda tu mente es: ¿Cómo hacer una página web en HTML? Es una excelente pregunta para iniciar, ya que HTML es la base fundamental de casi todas las páginas que visitas en internet. Aunque hoy en día existen herramientas muy potentes que facilitan la creación de sitios web, comprender HTML te da una ventaja invaluable y te permite tener un control mucho mayor sobre tus proyectos.

Es importante aclarar desde el principio que HTML no es un lenguaje de programación. En cambio, es un lenguaje de marcado. ¿Qué significa esto? Que su función principal es describir la estructura, ordenar y formatear el contenido dentro de una página web. Piensa en él como el esqueleto de tu sitio web. Es relativamente sencillo de aprender, lo que lo hace perfecto para principiantes.

Si bien actualmente no se construyen sitios web complejos utilizando únicamente HTML (normalmente se combina con CSS para el diseño y JavaScript para la interactividad), conocer sus fundamentos es esencial. Además, el auge de los Sistemas de Gestión de Contenido (CMS) como WordPress, Magento o Joomla ha simplificado enormemente el proceso de creación web, permitiendo a muchos usuarios crear sitios funcionales sin escribir una sola línea de código. Sin embargo, aquellos que sí conocen HTML pueden aprovechar al máximo las capacidades de estos CMS y personalizar sus sitios de maneras que otros no podrían.

¿Estás listo para embarcarte en esta aventura y dar tus primeros pasos en la creación de tu primera página web en HTML? ¡Vamos a comenzar este emocionante proyecto!

¿Qué es HTML?

HTML son las siglas de Hypertext Markup Language, que se traduce como Lenguaje de Marcado de Hipertexto. Fue creado por el científico de la computación Tim Berners-Lee con el propósito de desarrollar un sistema de hipertexto para internet. Su primera versión fue lanzada en 1991, conteniendo 18 etiquetas básicas, conocidas como tags. Desde entonces, HTML ha evolucionado significativamente, incorporando nuevas versiones y ganando una inmensa popularidad hasta convertirse en el estándar oficial para la construcción de páginas web en internet.

Según la Referencia de Elementos HTML, actualmente existen más de 140 etiquetas disponibles, aunque es cierto que algunas han quedado obsoletas y no son completamente compatibles con los navegadores modernos. Las especificaciones y el desarrollo de HTML son supervisados por el Consorcio World Wide Web (W3C), la organización encargada de mantener la documentación y promover las nuevas versiones del lenguaje.

Uno de los hitos más importantes en su historia reciente fue el lanzamiento de HTML5 en 2014. Esta versión introdujo nuevas etiquetas semánticas que ayudan a estructurar el contenido de manera más clara y significativa, como por ejemplo, las etiquetas para definir secciones de un artículo, encabezados o pies de página.

Comenzando: Tu Primer Proyecto HTML

Ahora que tenemos una comprensión clara de qué es HTML y su rol fundamental en la web, es momento de pasar a la práctica y comenzar a desarrollar tu primer proyecto. Crear un documento HTML es más sencillo de lo que imaginas.

Los documentos HTML son básicamente archivos de texto plano que se guardan con la extensión .html o .htm. Estos archivos pueden ser abiertos y visualizados por cualquier navegador web (como Chrome, Firefox, Edge, Safari, etc.). La función del navegador es leer el código HTML contenido en el archivo e interpretar las instrucciones de marcado para renderizar el contenido de forma visual, permitiendo a los usuarios interactuar con la página.

Lo interesante es que puedes crear un documento HTML utilizando prácticamente cualquier editor de texto que tengas instalado en tu computadora. No necesitas software especializado y costoso para empezar. A continuación, te presentamos un paso a paso detallado para iniciar oficialmente tu proyecto de creación web.

1. Elegir el Editor de Texto Adecuado

El primer paso es seleccionar la herramienta con la que vas a escribir tu código. Existen numerosas opciones de editores de texto disponibles en el mercado, tanto gratuitas como de pago. Para empezar, las opciones gratuitas suelen ofrecer todas las funcionalidades que necesitas.

Los editores de texto se pueden clasificar principalmente en dos categorías:

Editores WYSIWYG: Este acrónimo significa "What You See Is What You Get", que se traduce como "Lo que ves es lo que obtienes". Estos editores son muy visuales y te permiten ver una representación casi en tiempo real de cómo se verá el código que estás escribiendo una vez que se muestre en una página web. Son altamente recomendables para principiantes, ya que no requieren experiencia previa en codificación. Algunos ejemplos populares de este tipo de editores incluyen: Atom, Sublime Text, Notepad++ y Brackets.

Editores HTML Textuales: Estos editores se basan puramente en texto y requieren que tengas un conocimiento más profundo del código HTML, ya que no ofrecen una vista previa en vivo del resultado final de tu código. El Bloc de Notas (Notepad) nativo de Windows o incluso un procesador de texto como Word (aunque no recomendado para código) entran en esta categoría, aunque hay editores textuales mucho más avanzados diseñados específicamente para código.

Para nuestro ejemplo práctico, utilizaremos un editor como Atom, pero siéntete libre de usar cualquiera de los mencionados o el que prefieras. Abre tu editor de texto seleccionado y crea un nuevo documento vacío. Este será nuestro lienzo digital.

2. Definir el Proyecto

Antes de escribir código, piensa en el tema de tu primera página. ¿Ya tienes una idea? No te preocupes si no es así; puedes crear una página simple sobre ti, un tema que te interese, o simplemente usar un ejemplo práctico. Siguiendo la información proporcionada, podemos crear una página que hable sobre los editores de texto.

Con el tema definido (los editores de texto) y tu editor abierto con un documento nuevo, estamos listos para el siguiente paso.

3. Estructurar el Código HTML Básico

Todo documento HTML sigue una estructura fundamental. Vamos a escribir el esqueleto básico de nuestra página.

<!DOCTYPE HTML>
<html>
<head>
<title>Título de mi página</title>
<meta charset="UTF-8">
<meta name="description" content="Una breve descripción de mi página.">
<meta name="keywords" content="palabra clave 1, palabra clave 2">
</head>
<body>
<!-- Aquí irá el contenido visible -->
</body>
</html>

Analicemos cada parte de este código:

• <!DOCTYPE HTML>: Esta es la primera línea del documento. Indica al navegador qué versión de HTML se está utilizando. especifica que es HTML5, la versión más reciente.
• <html>: Esta es la etiqueta principal y envuelve todo el contenido de la página HTML. Es la raíz del documento. Todo lo demás va dentro de estas etiquetas de apertura y cierre (<html> y </html>).
• <head>: Esta sección contiene metainformación sobre la página, es decir, información que no es visible directamente para el usuario en la página renderizada, pero que es importante para el navegador y los motores de búsqueda. Aquí se incluye el título de la página, la codificación de caracteres, descripciones, palabras clave, etc.
• <title>: Dentro de la etiqueta <head>, la etiqueta <title> define el título de la página que aparece en la barra de título de la ventana del navegador o en la pestaña. Es un elemento crucial tanto para la experiencia del usuario como para el SEO.
• <meta charset="UTF-8">: Esta etiqueta meta especifica la codificación de caracteres del documento. UTF-8 es la codificación más común y recomendada, ya que soporta una amplia gama de caracteres, incluyendo tildes y otros símbolos especiales.
• <meta name="description" content="...">: Esta etiqueta meta proporciona una breve descripción del contenido de la página. Aunque no afecta directamente al ranking en los motores de búsqueda, es el texto que a menudo aparece debajo del título en los resultados de búsqueda, por lo que una buena descripción puede atraer más clics.
• <meta name="keywords" content="...">: Históricamente, esta etiqueta se usaba para listar palabras clave relevantes para el contenido de la página. Hoy en día, su importancia para el SEO es mínima, ya que los motores de búsqueda modernos se basan más en el contenido real de la página.
• </head>: Cierra la sección de metainformación.
• <body>: Esta es la sección más importante en términos de contenido visible. Todo lo que escribas dentro de las etiquetas <body> y </body> será lo que el usuario vea en la ventana del navegador: texto, imágenes, tablas, formularios, etc.
• </body>: Cierra la sección del cuerpo.
• </html>: Cierra la etiqueta principal del documento HTML.

¡Es fundamental recordar que la mayoría de las etiquetas HTML vienen en pares: una etiqueta de apertura (ej. <p>) y una etiqueta de cierre (ej. </p>)! La etiqueta de cierre siempre incluye una barra inclinada (/) antes del nombre de la etiqueta para indicar que ese bloque de contenido ha terminado.

4. Crear Contenido para el Cuerpo de la Página

Con la estructura básica lista, es hora de añadir el contenido que será visible para el usuario. Pero antes de eso, es un buen momento para guardar tu documento.

Al guardar el archivo, dale un nombre significativo y asegúrate de que la extensión sea .html. Por convención, la página principal de un sitio web suele llamarse index.html. Así que, guarda tu archivo como index.html. Esto le indica al navegador y a los servidores web que este es el archivo principal a cargar cuando alguien visita la dirección de tu sitio.

Ahora, dentro del bloque <body> </body>, vamos a añadir algo de texto y estructura.

<h2>Ejemplos de editores de texto WYSIWYG</h2>

La etiqueta <h2> define un encabezado de nivel 2. Los encabezados en HTML van desde <h1> (el más importante, generalmente usado una vez por página para el título principal del contenido) hasta <h6> (el menos importante). Usar encabezados ayuda a estructurar tu contenido y hacerlo más legible tanto para los usuarios como para los motores de búsqueda.

<p>Son editores que te permiten ver cómo el código se muestra en una página web en marcha. Para los que están empezando, los editores WYSIWYG son muy recomendados, ya que no se requiere ninguna experiencia en codificación.</p>

Para crear un párrafo de texto, utilizamos la etiqueta <p>. Todo el texto que vaya entre <p> y </p> será considerado un párrafo. En este caso, hemos añadido una breve descripción de los editores WYSIWYG.

<h3>4 editores de texto WYSIWYG comunes</h3>
<ol>
<li>Atom</li>
<li>Sublime Text</li>
<li>Notepad ++</li>
<li>Brackets</li>
</ol>

Aquí hemos añadido un encabezado de nivel 3 y luego una lista. Para crear una lista ordenada (una lista donde el orden de los elementos importa y se numeran automáticamente), usamos la etiqueta <ol> (Ordered List). Cada elemento dentro de la lista se define con la etiqueta <li> (List Item). HTML también permite crear listas desordenadas (con viñetas) utilizando la etiqueta <ul> (Unordered List) en lugar de <ol>.

Hasta aquí, hemos creado una estructura básica con un título, un párrafo y una lista. ¿Qué te parece? Bastante sencillo, ¿verdad? Pero una página en blanco y negro puede ser un poco aburrida. ¡Vamos a añadir algunos detalles para hacerla más atractiva!

5. Agregando Detalles: Color y Enlaces

HTML, por sí solo, se centra en la estructura y el contenido. Para el diseño visual (colores, fuentes, espaciado, etc.), normalmente se utiliza CSS (Cascading Style Sheets). Sin embargo, HTML permite aplicar estilos básicos en línea directamente sobre los elementos, aunque no es la práctica recomendada para sitios complejos.

Color del Texto:

Para cambiar el color de una parte específica del texto, podemos usar la etiqueta genérica <span> junto con el atributo style. El atributo style nos permite aplicar estilos CSS directamente. Por ejemplo:

<p>Esta es una parte normal del texto, y <span style="color:red;">esta parte es roja</span>.</p>

Dentro del atributo style, especificamos la propiedad CSS color seguida de dos puntos y el valor del color. Puedes usar nombres de colores en inglés (como red, blue, green) o, de manera más precisa, códigos hexadecimales (HEX) o RGB. Por ejemplo, el rojo también se puede representar como `#FF0000`. Existen herramientas en línea, como el HTML Color Picker del W3CSchools mencionado en el texto, que te ayudan a elegir colores y obtener sus códigos.

Enlaces (Hipervínculos):

Una de las características más poderosas de HTML es la capacidad de crear enlaces que conectan una página con otra, ya sea dentro del mismo sitio web o a sitios externos. Esto se logra con la etiqueta <a>, que significa "anchor" (ancla).

La etiqueta <a> requiere un atributo esencial: href. El atributo href especifica la URL (dirección) a la que apunta el enlace.

<a href="https://www.ejemplo.com">Visita Ejemplo.com</a>

El texto que aparece entre las etiquetas <a> y </a> es el texto visible sobre el que el usuario hará clic.

Otro atributo útil para los enlaces es target. Este atributo indica dónde se abrirá la URL enlazada:

• target="_self": Abre el enlace en la misma ventana o pestaña (es el comportamiento por defecto si no se especifica).
• target="_blank": Abre el enlace en una nueva ventana o pestaña del navegador.

Un ejemplo usando target="_blank":

<a href="https://www.ejemplo.com" target="_blank">Visita Ejemplo.com en una nueva pestaña</a>

Tabla Comparativa de Editores

Para ilustrar la diferencia entre los tipos de editores mencionados, podemos crear una tabla simple:

Esta tabla utiliza las etiquetas <table> para definir la tabla, <thead> para la sección del encabezado, <tbody> para el cuerpo, <tr> para cada fila, <th> para las celdas de encabezado (en la cabecera) y <td> para las celdas de datos (en el cuerpo).

6. Finalizando y Visualizando tu Página

Una vez que hayas añadido el contenido y los detalles que deseas, es momento de ver cómo ha quedado tu primer proyecto. Si aún no lo has hecho, guarda el archivo con la extensión .html (por ejemplo, index.html).

Para ver tu página, simplemente localiza el archivo index.html en tu explorador de archivos y haz doble clic sobre él. Se abrirá automáticamente en tu navegador web predeterminado. ¡Ahí lo tienes! Tu primera página web creada con HTML.

¿Ves? No fue tan complicado como quizás imaginabas. Hemos cubierto los atributos y etiquetas fundamentales para crear una página web básica. Sin embargo, el mundo de HTML es vasto y hay muchísimas más etiquetas y conceptos por explorar. Te animamos a seguir aprendiendo y experimentando.

HTML vs. CMS: ¿Cuándo usar cada uno?

Aunque este artículo se centra en HTML puro, es importante recordar lo que mencionamos al inicio: para crear sitios web modernos y funcionales, a menudo se utilizan CMS. La elección entre HTML puro (combinado con CSS y JS) y un CMS depende de tus necesidades:

• HTML (con CSS/JS): Te da el control total sobre cada aspecto de tu sitio. Es ideal para aprender cómo funciona la web, para proyectos pequeños y personalizados, o cuando necesitas un rendimiento muy específico y optimizado. Requiere conocimientos técnicos.
• CMS (WordPress, etc.): Permite crear sitios web complejos (blogs, tiendas online, portafolios) de manera mucho más rápida y con menos conocimiento técnico. Ofrecen temas (diseños) y plugins (funcionalidades) preconstruidos. Son ideales para gestionar contenido dinámico fácilmente.

Conocer HTML te beneficia incluso si usas un CMS, ya que te permite entender la estructura, hacer personalizaciones avanzadas y solucionar problemas.

Preguntas Frecuentes sobre HTML Básico

Aquí respondemos algunas dudas comunes que pueden surgir al empezar:

¿HTML es un lenguaje de programación?

No, HTML no es un lenguaje de programación. Es un lenguaje de marcado. Su función es estructurar y presentar contenido, no realizar operaciones lógicas o cálculos como lo haría un lenguaje de programación (como Python, Java o JavaScript).

¿Cómo se utiliza HTML para diseñar sitios web?

HTML define la estructura y el contenido de la página (qué elementos hay y en qué orden). El diseño visual (colores, fuentes, disposición, etc.) se maneja principalmente con CSS (Cascading Style Sheets), que se aplica sobre la estructura definida por HTML. Juntos, HTML y CSS, determinan la apariencia de la página.

¿Qué es una etiqueta o tag en HTML?

Una etiqueta HTML es una instrucción de marcado que se utiliza para definir un elemento en la página. Las etiquetas envuelven contenido para darle un significado o una función específica. Por ejemplo, la etiqueta <p> envuelve texto para marcarlo como un párrafo, y la etiqueta <a> envuelve texto para convertirlo en un enlace. La mayoría de las etiquetas tienen una apertura (<nombre>) y un cierre (</nombre>).

¿Qué significa la extensión .html o .htm?

Esta extensión en el nombre de un archivo indica que se trata de un documento HTML. Los navegadores web reconocen esta extensión y saben cómo interpretar el código que contiene para mostrar la página web.

Conclusión

Felicidades, has dado un paso fundamental en el mundo del desarrollo web aprendiendo a crear tu primera página básica utilizando HTML. Hemos explorado qué es HTML, cómo estructurar un documento, añadir contenido básico como párrafos y listas, y cómo incluir detalles como color y enlaces. Aunque hemos cubierto los fundamentos, recuerda que la práctica y la exploración son clave para dominar HTML y, posteriormente, otros lenguajes y tecnologías web como CSS y JavaScript.

Ten presente que, para que tu página web esté accesible en internet para que otros la vean, deberás seguir pasos adicionales como registrar un nombre de dominio (la dirección web, como www.tuweb.com) y contratar un servicio de alojamiento web (web hosting), que es un espacio en un servidor donde se almacenarán tus archivos HTML y otros recursos.

Esperamos que este artículo te haya sido de gran ayuda y te motive a seguir aprendiendo. El camino del desarrollo web es apasionante y está lleno de posibilidades.

Si quieres conocer otros artículos parecidos a Crea tu primera web básica en HTML puedes visitar la categoría Educación.