Home Blog/ Transformación digital/
Transformación digital

¬ŅC√≥mo hacer una p√°gina web en HTML desde cero? En esta gu√≠a ense√Īamos a hacerlo paso a paso

Luisina Avellaneda - 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. 

Joven mujer lee en computadora

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>

Modelo b√°sico de estructura 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.

Pantalla con etiquetas y códigos HTML 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. 

  1. 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.
  2. 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>

o

  • <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.

Hombre joven trabajando en su computadora 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.