💻 ¿Cómo hacer una página web HTML? Paso a paso y desde cero

¿Cómo hacer una página web en HTML desde cero? En esta guía enseñamos a hacerlo paso a paso

Luis del Rio | HR Head de HCL Tech México - 09 Nov 21

Articulo

7 min.

Embarcarte en la aventura de hacer una página web en HTML puede ser más sencillo de lo que imaginas, incluso para quienes recién están comenzando a conocer el mundo del desarrollo y la programación web.

¿Cuál es el truco? Aprender y avanzar de manera ordenada. Te aseguramos que, una vez que sepas exactamente el paso a paso para hacer un sitio web HTML, podrás crear sitios funcionales y atractivos que te permitirán generar el tráfico que necesitas.

Antes de lanzarte en el proceso de construir una página web HTML básica, es importante que sepas de qué se trata exactamente el lenguaje HTML. Si bien es algo bastante simple de comprender, es importante diferenciar el HTML de cualquier otra estructura de desarrollo web.

Acompáñanos en esta nota, y verás que hacia el final habrás encontrado toda la información que necesitas saber para programar en HTML sin ser ningún experto.

¿Ya estás listo para dar el primer paso? ¡A construir ese sitio web HTML!

¿Cómo comienzo a hacer mi página web HTML?

Para empezar, veamos de qué hablamos cuando hablamos de crear un sitio web en HTML desde cero. El lenguaje HTML te permitirá comenzar a estructurar tu página web, es decir que al momento de hacer una página web en HTML, lo que en realidad hacemos es crear un código que luego será interpretado y procesado por los navegadores y, hacia el final, será el resultado de dicha codificación lo que los usuarios verán en tu sitio.

Para comenzar a construir una página web en HTML, solo necesitas un editor de texto, como por ejemplo, el bloc de notas de tu ordenador Windows o TextEdit en Mac.

Una vez que hayas elegido tu editor de texto, comenzaremos a escribir los códigos o etiquetas HTML, los cuales serán los elementos básicos del sitio web y la manera en que toda la información se estructurará.

Conociendo las etiquetas para crear la estructura de mi sitio web HTML

Existe una gran diversidad de marcas y etiquetas que permiten etiquetar el contenido de un sitio web en HTML, algunos de los ejemplos más básicos y que no podrán faltar en tu bloc de notas son las siguientes:

<head>
<title>
<body>
<section>
<video>

El uso de estas etiquetas te permitirá demarcar el diseño y la jerarquización de los elementos que conformarán tu página web HTML. Así, podrás definir títulos, párrafos, variaciones en la tipografía y demás.

Si bien realizar un sitio web en HTML es uno de los procedimientos más sencillos del mundo de la programación, sabemos que, al principio, esto puede parecerte un poco abstracto. Pero no te preocupes, aquí te dejamos una guía básica para dar tus primeros pasos en etiquetas HTML.

Fuente: Pexels

La estructura básica de un sitio web en HTML

Ahora sí, para avanzar en el paso a paso para crear una página web en HTML simple, podemos escribir el siguiente código de control, el cual es conocido como el más básico y elemental:

<!DOCTYPE html>
<html>
<head>
<meta charset = “utf-8”>
<title> </title>
</head>
<body>
</body>
</html>

Fuente: Diseño Web Akus Net

¿Pero qué significa todo esto? Tranquilo, es más simple de lo que parece. A continuación, te explicamos brevemente la función de cada una de las etiquetas.

<!DOCTYPE html>: Esta etiqueta es la encargada de decirle al navegador que se está utilizando el lenguaje HTML, y es imprescindible para que el documento se comporte correctamente. Importante: debe colocarse al inicio.
<html> </html>: Este elemento envuelve todo el contenido de la página HTML.
<head> </head>: Aquí se encuentra toda la información descriptiva del sitio web. Hablamos del title, meta title, tags, entre otros.
<title> </title>: Esta etiqueta contiene el título atractivo que tu sitio web mostrará en el navegador
<body> </body>: Dentro de estas marcas se encuentran todos los elementos visibles de tu web, es decir, el cuerpo completo de tu página HTML

Otros tipos de etiquetas para realizar mi sitio web en HTML

Actualmente, existen más de 140 etiquetas diferentes en el lenguaje del HTML, pero la realidad es que no todos ellos son igual de importantes para tener en cuenta al momento de hacer una página web en HTML desde cero. Por eso, si estás comenzando en el mundo del desarrollo web, a continuación te dejamos una lista de etiquetas HTML y propiedades CSS que te ayudarán a comprender algunos aspectos básicos de la creación de sitios web.

Fuente: Unsplah

Para hacer una página web en HTML correctamente, debes tener en cuenta que existen dos tipos de etiquetas diferentes que conformarán el código de tu sitio web.

Las que necesitan cerrarse: estas presentan la sintaxis <body> </body>, y deben estar cerradas para que el sitio web las reconozca como tal y funcionen correctamente.
Las que no necesitan cerrarse: a estas marcas puedes identificarlas por la siguiente estructura: <tag/>.

¿Por qué te comentamos la importancia del uso correcto de etiquetas HTML? Bueno, pues, porque tenemos un dato que tal vez pueda interesarte. Según una nota de la revista Forbes de México, “una buena estructura HTML combinada con un contenido de alta calidad, es la combinación infalible para generar tráfico a tu sitio web con un presupuesto acotado, o incluso, inexistente”.

Comienza a jugar en tu página web HTML

Una vez que ya estás familiarizado con las diferentes etiquetas HTML, es momento de comenzar a volcar contenido atractivo en el body de tu página. En esta instancia, tenemos la posibilidad de insertar diferentes códigos web para distinguir títulos, tipografías, insertar vínculos o imágenes.

Con tanto contenido de interés que encontramos en los buscadores, nuestra página web HTML debe ser llamativa no solo en cuanto a la información que brindamos, sino también en la manera en que lo hacemos.

Por esto, te recomendamos que tomes nota de las siguientes etiquetas, las cuales te serán de gran ayuda para agregar variaciones que le darán un toque especial a tu página web HTML, como por ejemplo negritas, subrayados o cursivas.

<h1> te permite definir el título de nivel 1</h1> y se puede extender hasta el <h6></h6>
<p> te permite definir un párrafo</p>
<br/> permite realizar un salto de línea.
</u> te permite escribir con subrayado</u>
</i> te permite escribir en cursiva</i>
</b> te permite escribir en negrita</b>
<del> te permite tachar un texto<del>

Ahora bien, tal vez suceda que, mientras estés construyendo tu sitio web HTML desde cero, intentes generar diferentes espacios y saltos de línea para organizar tu página. Para dominar esto, te recomendamos explorar en profundidad las diversas maneras de insertar saltos en blancos en HTML de manera fácil y rápida.

¿Necesitas ideas para tu sitio? ¡No te pierdas las mejores páginas web para inspirarán tus diseños en el 2022!

Agrégale un poco de color a tu sitio web HTML

Crear una página web HTML desde cero no significa que tenga que ser un sitio que luzca aburrido, poco atractivo o poco profesional. Aprovecha los códigos de color y agrega pequeños detalles que distingan tu contenido, y que a la vez, lo hagan lucir moderno y competente.

Elige las oraciones o el texto que deseas diferenciar y colócalos entre la etiqueta <span> junto al nombre del color en inglés o al código hexadecimal de la siguiente manera:

<span style=»color:red»> texto </span>

<span style=»color:#ffff50″> texto </span>

Sí, también puedes modificar la fuente de tu página web HTML

Como ya lo habrás notado hasta ahora, construir una página web HTML básica es muy simple. Sin embargo, eso no significa que dejaremos de lado detalles fundamentales. Como todo usuario de internet, debes conocer la importancia de las diferencias en tamaños y fuentes dentro de un sitio web. Esto es fundamental para que nuestros lectores accedan a nuestro contenido de la manera más legible y organizada posible. De esta manera, quienes visiten tu página web, seguramente le presten más atención a tu contenido de calidad y, por consecuencia, permanezcan scrolleando en ella durante más tiempo.

Ahora sí, una vez comprendido esto, elige las fuentes para tus párrafos utilizando la etiqueta <span> de la siguiente manera:

<span style=»font-family:’Comic Sans MS’»> aquí introduces tu texto </span>

De la misma forma, modifica el tamaño predeterminado escribiendo, dentro del código HTML, los píxeles de tamaño en los que deseas que tu texto se muestre en tu página web.

<span style=»font-size:12px»> aquí introduces tul texto </span>

¡Cuidado! Un sitio web atractivo no puede ser solo texto: ¿cómo insertar imágenes en tu página web HTML?

Pues sí, las imágenes forman parte de esas herramientas que le darán un poco de vida a todo el contenido volcado en el body de tu website.
Recuerda siempre los formatos que tu página web HTML aceptará como válidos. Estos son: JPG, GIF y PNG.

Ahora bien, una vez que hayas elegido tus imágenes, insértalas utilizando el siguiente código

<img src=»immagine.gif» alt=»descripción de tu imagen» height=»42″ width=»42″ >

Solo debes reemplazar “immagine.gif” por el nombre de tu imagen, ¡y listo! Ya podrás verla en tu sitio web.

Momento de poner a prueba tu página web HTML hecha desde cero

¿Cómo resultará este tutorial para crear una página web HTML? Veamos…

Luego de escribir códigos y etiquetas, llegó el momento de guardar nuestro documento y descubrir el resultado final.

Guarda tu documento con la opción Guardar con nombre, reemplaza el formato «.txt» por «.html» y nómbralo index.html. Así, indicamos que index es el nombre, y html. el formato de archivo.

¡Ahora vamos a lo más importante! Para ver cómo luce tu página web en HTML, haz clic derecho en el archivo y elige el navegador en el que te gustaría ver el resultado de tu sitio web HTML.

De esta manera, podrás revisar, corroborar y detectar si hay algún error que debas corregir desde tu bloc de notas.

Fuente: Unsplash

¿Ya viste lo simple que es hacer una página web HTML paso a paso? Lo único que necesitas es tener nuestra guía a mano y comenzar a escribir y diseñar el código de tu sitio web. Recuerda que siempre puedes partir de la estructura básica, y luego añadirle diferentes detalles para que tu página web luzca tal cual lo deseas.

Si llegaste hasta aquí, es porque esta pequeña parte del mundo de la programación y desarrollo web te parece tan fascinante como a nosotros.
¿Es así? ¡Anímate a iniciarte en el Desarrollo Web Front End y aprende a diseñar todo lo que imaginas en código HTML!

El mundo de la programación es inmenso y atrapante, ¡mantente siempre actualizado con la mejor información!
Hasta la próxima.