Si estás empezando en el mundo del desarrollo web y tienes ganas de hacer tu primer sitio, seguramente ya te habrás preguntado: ¿Cómo crear una página web en HTML?

Antes de que empecemos, es importante saber que HTML no es un lenguaje de programación. Sino un lenguaje de marcado que permite describir el diseño, ordenar y formatear una página web.

Este lenguaje de marcado es muy fácil de aprender, sin importar que seas principiante en el mundo del desarrollo web.

Actualmente, no se hacen páginas web solamente con el código HTML, ya que, para que la web funcione perfectamente, se requiere un alto conocimiento. Hoy en día, con el uso de los CMS (Content Management System) como WordPress, Magento o Joomla, es posible hacer todo el trabajo. Pero, claro, los que conocen el código HTML pueden aprovechar mucho más sus propiedades.

¿Listo para dar tus primeros pasos en cómo crear una página en HTML? ¡Comencemos!

¿Qué es HTML?

HTML es un acrónimo para Hypertext Markup Language, un lenguaje de marcado creado por el científico de la computación Tim Berners – Lee, con el objetivo de ser un sistema de hipertexto en Internet.

Su primera versión fue publicada en 1991 con 18 etiquetas (tags) y, desde entonces, ha ganado nuevas versiones, popularidad y ha crecido mucho en el mercado. Hoy, es considerado el estándar oficial de Internet.

De acuerdo con la Referencia de Elementos HTML, actualmente hay más de 140 etiquetas HTML, aunque algunas de ellas están obsoletas y no son soportadas por los navegadores. Las especificaciones del HTML pueden ser consultadas en el Consorcio World Wide Web (W3C), responsable de la documentación y nuevos desarrollos.

En 2014, el HTML5 fue lanzado y es la versión más reciente con nuevas etiquetas semánticas, como las <article>, <header> y<footer>.

¿Cómo hacer una página web en HTML?

Listo, ahora que sabemos qué es HTML y que es posible crear un sitio desde cero usando ese lenguaje de marcado, vamos a desarrollar tu primer proyecto.

Para empezar, veamos cuáles son los primeros pasos para hacer una página web en HTML.

Los documentos HTML son archivos con extensiones .html o .htm y pueden ser visualizados en cualquier navegador. El cual hace la lectura del archivo y renderiza el contenido para que los usuarios puedan verlo.

Ese documento puede ser creado a partir de cualquier editor de texto de que dispongas en tu computadora.

Pero, ¡no te preocupes! Ahora mismo, te presentamos un paso a paso e iniciamos oficialmente tu proyecto de creación.

1. Elige el editor de texto

Hay muchas opciones de editores de textos disponibles en Internet, tanto gratuitos como de pago. Entre las opciones gratis, hay varios que ofrecen todos los recursos que necesitas para crear tu página web.

Existen dos clases de editores:

Los editores WYSIWYG: – What You See Is What You Get (sí… ¡así se llaman!). Son aquellos que te permiten ver cómo el código se muestra en una página web, mientras la estás desarrollando.

Para los que están empezando, los editores WYSIWG son muy recomendados, ya que no se requiere ninguna experiencia en codificación. Como ejemplo, tenemos estos editores:

• Atom;
• Sublime;
• Notepad ++;
• Brackets.

Los editores HTML textuales: Son aquellos basados en texto, y es necesario que tengas conocimientos sobre HTML. Estos editores no permiten ver en vivo el resultado de tu código.

Como ejemplo de ellos, tenemos el Word y el Blog de Notas nativo de las computadoras con sistema operativo Windows.

En nuestro post sobre JavaScript usamos Fiddle, una plataforma en la que es posible ver el código que ejecutarlo.

2. Define el proyecto web

¿Ya definiste un asunto para tu primera página web en HTML? ¿No? No te preocupes, es tu sitio web así que puede crear esa idea que tanto te gusta, hablar de tí o usar algún tema como ejemplo. En este caso, hablaremos de los editores de texto.

¿Preparado? ¡Empecemos el proyecto!

Para hacer tu primera página web en HTML, escogimos el editor Atom. Pero tú puedes usar el que tengas instalado en tu computadora.

Abre tu editor de texto y crea un nuevo documento, en el cual empezaremos a trabajar.

3. Estructura el código HTML

Una vez que hayas creado el documento, vamos a empezar con el código.

En primer lugar, vamos a escribir el siguiente bloque:

Ahora, vamos a la explicación paso por paso del código.  

• <!DOCTYPE HTML>: Es la etiqueta que define que el documento es HTML;
• <HTML>: Es la principal etiqueta de una página HTML;
• <HEAD>: Es la etiqueta que abre el bloque de información sobre la web;
• <TITLE>: Acá, escribimos el título genial que daremos a la página web. Ese que aparece en el borde de la ventana del navegador.

¡Importante! En la estructura del código HTML, al “abrir” una etiqueta es, muy importante que la cierres. Usando la barra “/” para decir al código que aquel bloque de informaciones ha terminado.

Hoy, sabemos que no basta crear una web y subirla a Internet, sino que debemos facilitar el camino para que la encuentren. Por eso, vamos a usar en las etiquetas:

• <META =”description”>: Informa a los buscadores, por medio de la descripción que creaste, de que se trata tu web;
• <META =”keywords”>: Sirve para que tu web sea encontrada por medio de estas palabras clave.

Listo, creamos la principal información de tu página web y, ahora, vamos a elaborar un contenido para ella. Para eso, vamos a trabajar en la etiqueta <BODY>.

4. Crea un contenido para tu página web

Antes de crear el texto visible para el usuario, vamos a guardar el documento.

Al grabar el contenido, lo nombramos index.html, dónde index es el nombre del documento y .html es la extensión que define que se trata de un archivo HTML. ¿Hecho? ¡Seguimos!

Ahora, dentro del bloque <BODY> </BODY>, vamos a crear un texto para saludar al visitante de tu sitio web.

<h1> Ejemplos de editores de texto WYSIWG </h1>

La etiqueta <h1> define el título de nivel 1 y se puede extender hasta el <h6>.

<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 WYSIWG son muy recomendados, ya que no se requiere ninguna experiencia en codificación. </p>

Cuando necesitamos abrir un párrafo, tenemos que hacerlo por medio de la etiqueta <p>. En este caso, escribimos una breve introducción para que el lector sepa de lo que estamos hablando.

• <h2> 4 editores de texto WYSIWG </h2>
• <ol>
• <li>Atom</li>
• <li>Sublime</li>
• <li>Notepad ++</li>
• <li>Brackts</li>
• </ol>”

Para crear una lista con los nombres de los editores, usamos el elemento <ol> – que define el bloque de listas ordenadas – y el  <li> – que debe ser usado para cada ítem de la lista.

¿Qué te parece hasta aquí? ¿Fácil? ¿Qué tal añadir algunos detallitos a la web?

5. Agrega enlaces y colores al texto

Pues, ¡muy bien! Una página web apenas en blanco y negro no llama mucho la atención, ¿verdad? Entonces, vamos a agregar unas líneas más de código para hacer tu web un poco más atractiva.

Color

Para dar color a tus textos, hay que indicarlo entre las etiquetas:

<span style=”color:red“>  </span>

Pero hay una regla para definir el color del texto, además de las etiquetas: escribirlo de manera correcta.

Para eso, puedes consultar el HTML Color Picker de W3CSchools, elegir el color que más te gusta y copiar el código HEX – o escribir el nombre en la etiqueta.

¿Ves? No es para nada complicado.

Enlaces

Otra etiqueta muy importante es la <a> </a>, que agrega un enlace al texto colocado entre ellas.

Por ejemplo, si queremos que el visitante sea direccionado hacia otro sitio u otra pestaña de tu propia web, simplemente agregamos un texto entre esas etiquetas de esta manera:

<a target=”_blank” href=” [url del enlace]”> Texto del enlace </a>

La información “_blank” quiere decir que, al hacer clic en el enlace, la página se abre en una nueva pestaña. Pero si deseas que abra en el mismo documento, tienes que cambiar esa información por “_self”.

6. Termina tu página web

Bueno, ahora que hemos terminado de crear todo el código HTML de tu página web, vamos a ver cómo ha quedado tu primer proyecto. Dependiendo del editor podrás guardar el archivo como .html en tu computadora y este se abrirá en tu navegador. 

¿Qué tal? No te imaginabas que hacer una página web en HTML fuera tan fácil, ¿verdad?

Hemos trabajado con los principales atributos y etiquetas del HTML; Sin embargo, es importante que sigas explorando más información sobre cómo hacer una página web en HTML.

De la misma forma y como lo dijimos al inicio del contenido, el uso del CMS es lo más adecuado para crear un sitio. Pues además de ahorrar tiempo, brinda más funciones y posibilidades.

Conclusión

Ahora que ya sabes cómo crear una página web en HTML, recuerda que para que tu sitio web quede publicado en internet y funcionando normalmente, deberás registrar un dominio y alojar tu sitio web en algún plan de web hosting. 

Si te ha quedado alguna duda o quieres saber algo más sobre el HTML, escríbenos en los comentarios. ¡Es un gusto para nosotros compartir conocimiento!