Diseño web

Cómo hacer una página web en HTML: Crea la tuya desde cero (Parte 1)

Si estás pensando en crear tu propio sitio web, seguro que te has planteado hacer una página web en HTML. La verdad es que puede ser un buen comienzo, dada la sencilla curva de dificultad que entraña el aprendizaje de HTML. Podemos afirmar que comprender el uso de HTML está al alcance de prácticamente todo el mundo. Por eso, si te has decidido a emprender el viaje, en los próximos artículos vamos a acompañarte para mostrarte cómo afrontar el desarrollo de tu página web en HTML, desde cero y paso a paso. ¡Vamos allá!

Qué es HTML y por qué debería aprenderlo

Antes de nada, debemos comprender qué es HTML. En primer lugar, hay que recalcar que no se trata de un lenguaje de programación, sino un «lenguaje de marcado». Esto se debe a que su función principal es estructural. Sirve para «construir los cimientos» de cualquier página web. De ahí que resulte fundamental su conocimiento de cara al desarrollo de cualquier página web, puesto que aunque usemos herramientas como constructores visuales u otros, todos se van a basar en el uso de HTML.

Cómo funciona HTML

Como ya hemos hablado en numerosas ocasiones, HTML se basa en el uso de una serie de etiquetas o elementos que, por norma general, cuentan con una apertura y un cierre. Estas etiquetas pueden contener, textos, elementos multimedia u otras etiquetas.

La anatomía más elemental de un elemento HTML consiste en la siguiente estructura:

<p>Esto es un párrafo.</p>

En este ejemplo vemos cómo se estructura un simple párrafo. Como podrás comprobar, el elemento consta de una etiqueta de apertura «<p>», puesto que se trata de un párrafo; una etiqueta de cierre, distinguida por el uso de «/»; y entre ambas, el contenido del párrafo. Por último, sabemos que se trata de un párrafo porque «p» está reservado en HTML para este cometido.

Dicho lo cual, podemos comprender la importancia que posee conocer las distintas etiquetas de HTML y su cometido. Si quieres conocer más acerca de las etiquetas te recomendamos echarle un vistazo a nuestro listado actualizado de etiquetas HTML.

¿Debería aprender HTML?

Ahora que ya sabemos qué es y en qué consiste HTML, es momento de formularnos la eterna pregunta: «¿Debería aprender HTML?». Sin duda alguna, habrás oído todo tipo de opiniones al respecto. Y es que, técnicamente, para llevar a cabo un sitio web hoy en día no es necesario conocer HTML. Esto se debe al sinfín de posibilidades que se han puesto a disposición de los usuarios, como maqueadores web visuales, plantillas o generadores automáticos de código, entre otros.

Sin embargo, el precio de usar este tipo de recursos suele llevar implícito una serie de limitaciones traducidas en precio, aprendizaje de distintos entornos visuales, aumento considerable de peso y recursos del sitio web en sí, y por supuesto, una amplia limitación de recursos técnicos.

Para explicarnos mejor, permitidnos emplear un símil: Desarrollar un sitio web es como cocinar. Si deseamos hacer una pizza, podemos reducir cada tarea hasta el proceso más elemental; crear la masa, crear la salsa, e incluso crear nuestro queso favorito…; o, por el contrario, podemos optar por recursos más sencillos, como adquirir estos ingredientes precocinados, e incluso la pizza lista para hornear. A simple vista, la opción más sencilla parece la mejor, pero como en el caso de una web, optar por algo ya desarrollado no deja margen a modificaciones ni detalles personalizados; es como la adquiriste y punto. Depende escoger el camino a priori más sencillo y automatizado, o el más complejo, con un control total sobre el código.

Dicho esto, cabe destacar que hoy en día, casi la totalidad de las webs se desarrollan bajo un CMS como WordPress, Joomla, PrestaShop, etc. Todos ellos cuentan con facilidades que no requieren conocimientos de HTML, sin embargo, se antoja enormemente útil comprender HTML, puesto que todos ellos se basan en él. Si deseas conocer más al respecto, no te pierdas nuestra entrada al respecto.

Hacer una página web HTML desde cero

Ya sea para crear un sencillo sitio web, una landing page o una página auxiliar, si te has decidido por emplear HTML, vamos a comenzar con el tutorial para llegar a buen puerto.

Creando nuestro código HTML

Si te has decidido por generar tu página web en HTML, lo primero que vas a necesitar es un editor de código. Un editor de código es una plataforma en la que poder construir nuestra web mediante HTML. Aunque técnicamente es posible realizar esta tarea desde cualquier editor de texto como un «bloc de notas», no resultaría muy ortodoxo. En el desarrollo de cualquier código es frecuente cometer errores, y un editor de código nos ayudará a redactar más cómodamente, sugiriéndonos soluciones y corrigiendo errores.

Actualmente, existen numerosos editores de texto (de pago y gratuitos), aunque nosotros te recomendamos optar por alguno de los más sencillos, completos y gratuitos; Sublime Text, Note Pad ++, o nuestro favorito, Visual Studio Code. Este último ha ganado popularidad en los últimos años y cuenta con una amplia comunidad de desarrolladores detrás, que facilitarán tu día a día gracias a sus numerosas extensiones. Puedes echarle un ojo a algunas de las más útiles en nuestro último artículo al respecto.

Estructura elemental de HTML

Aquí puedes comprobar la estructura más básica de un documento HTML. Esta consta de una serie de elementos característicos con funciones muy concretas que debemos conocer:

Elemento «Doctype»: Este elemento es un perteneciente a los inicios del HTML. Actualmente, se especifica para indicar que el tipo de documento es HTML.
Elemento HTML: Este elemento raíz es el contenedor de todo nuestro archivo HTML.
Elemento Head: Dentro de este elemento se alberga la información relacionada con el documento, como palabras clave, enlaces a hojas de estilos, codificación de caracteres, y otros metadatos que pese a no ser visibles por parte de los usuarios, los navegadores y robots de búsqueda tendrán muy en cuenta. En el ejemplo podemos comprobar cómo alberga el elemento «meta charset: utf-8», mediante el que especificamos el conjunto de caracteres del que el documento hará uso.
Elemento body: Dentro de este elemento concentraremos todo el contenido visible por el usuario, como textos, imágenes, videos y otros.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Mi página web</title>
  </head>
  <body>
    <p>Esta es mi página</p>
  </body>
</html>

Nuestro primer archivo HTML

Es necesario que el archivo raíz se nombre como «index.html». Ahora, partiendo de la sencilla estructura anterior, podemos comenzar a construir nuestro documento mediante el sistema de cajas o contenedores.

Como veremos en la siguiente parte de nuestro artículo, procederemos a maquetar nuestro contenido. Por norma general, se tratará de guardar una jerarquía y semántica lógica que nos ayudará a definir la anatomía del documento. Por ejemplo, una cabecera o «header», un elemento principal o «main» con secciones o «section», y un pie de página o «footer», resultan muy habituales.

Continúa con tu página web en HTML en el próximo artículo

Ahora que ya hemos definido la naturaleza y utilidad de HTML, debemos profundizar en las bases de su maquetación; su jerarquía, sus etiquetas más habituales, propiedades, atributos, etc. Esto y mucho más en la segunda parte de nuestro artículo.

Gracias por tu interés. Si quieres compartir cualquier duda o impresión con nosotros, te animamos a utilizar la sección de comentarios para ello.

¡Nos vemos en el siguiente artículo!

David de Lamo

David de Lamo te descubre, en el blog de Caronte Web Studio, las tendencias de diseño, tanto gráfico como web. Nuestro responsable del área de diseño en Caronte Web Studio te cuenta todo lo que debes saber sobre imagen de empresa, cartelería, diseño gráfico, diseño web, papelería, rotulaciones... Aprende con él y sumérgete en el apasionante mundo del diseño.