Construir un sitio web no es una tarea difícil en la era digital. Ya no se limita a una codificación sofisticada y un diseño web complejo. Hay montones de opciones que puedes elegir para construir un sitio web, y el uso de HTML se considera una forma rentable de crear un sitio web. No necesitas muchos conocimientos técnicos para empezar a escribir códigos HTML. Si tienes algo de tiempo en tus manos para poner en marcha tu sitio web, también podrías aprender HTML y construir un sitio web de HTML.
Este artículo tiene dos propósitos. El primero es servir de guía de HTML para los principiantes que quieran crear un sitio web de HTML para su negocio. Y el otro es darles una idea clara de otras opciones que tienen, en caso de que descubran que construir un sitio web de HTML no es realmente algo que quieran hacer.
Empezaremos por mostrarte los fundamentos de HTML y los pasos necesarios para crear un sitio web de HTML funcional. Pero, para entender el HTML básico de un sitio web, debes conocer algunos de los términos básicos y sus funciones en un sitio web de HTML.
¿Qué es HTML y cómo funciona?
Si quieres aprender HTML y construir un sitio web de HTML por tu cuenta sin la ayuda de un desarrollador, es posible que quieras pasar por este tutorial de HTML para ponerte al día con la construcción de tu sitio web de HTML.
Saber qué significa HTML puede no ser la clave para construir tu sitio web de HTML, pero seguro que te ayudará en algún momento.
HTML son las siglas de Hypertext Markup Language. No es un lenguaje de programación. No se puede utilizar para crear diseños y gráficos webs dinámicos, sino que permite organizar y dar formato al diseño y la estructura de un sitio web. Puedes hacer cualquier cosa como crear secciones, párrafos, encabezados, enlaces y aplicaciones utilizando HTML.
Componentes de un sitio web de HTML
Para construir tu sitio web en HTML, necesitas conocer algunos componentes clave. Los sitios web de HTML tienen dos componentes principales:
- Las etiquetas
- Los atributos
Aunque se utilizan simultáneamente, los propósitos que cumplen varían.
- Etiquetas HTML
Una etiqueta HTML es el medio para dar instrucciones a tu sitio web de HTML. Si quieres que tu sitio web muestre una cabecera, o que organice el diseño de la página, utilizarás una etiqueta. Una etiqueta se indica generalmente con paréntesis angulares como (), [],{} y el texto contenido en ellos es la instrucción de la etiqueta.
Un ejemplo de etiqueta es
<h1>
La mayoría de las etiquetas deben abrirse < h1 > y cerrarse < /h1 > para poder funcionar.
• Atributos HTML
Los atributos HTML, por su parte, proporcionan instrucciones principalmente relacionadas con la funcionalidad, para etiquetas específicas. Suelen ir dentro de una etiqueta y están marcados por los mismos corchetes angulares. Se utilizan para añadir imágenes, vídeos, enlaces y otros aspectos externos de diseño y funcionalidad para el sitio web de HTML.
Un ejemplo de atributo es:
<img src="product.jpg" alt="Our latest product.">
Aquí, la fuente de la imagen (src) y el texto alt (alt) son atributos de la etiqueta < img >.
¿Cómo hacer un sitio web con HTML?
No necesitas un software sofisticado en un ordenador de alta gama para crear un sitio web de HTML. Puedes hacerlo en el editor de HTML de tu sistema, que es principalmente el bloc de notas. Una vez que abras el bloc de notas, puedes seguir estos pasos para empezar a construir tu sitio web de HTML.
• El Doctype
Empecemos con el doctype HTML. La creación de tu sitio web de HTML comienza en el momento en que creas un archivo Doctype. Este archivo indica al navegador web que el documento es un archivo de sitio web de HTML.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
Así es como se inicia el HTML básico de tu sitio web de HTML. Incluso si quieres crear un sitio web bastante sencillo, tendrás que escribir mucho código. De ahí que siempre se aconseja mantener todos los archivos HTML en una sola carpeta para tenerlo todo en un solo lugar.
Aquí tienes una representación de cómo está organizada tu web.
Imagen tomada del sitio web de Strikingly
El archivo doctype sólo indica al navegador cómo leer el archivo. Ahora tienes que poner los códigos que especifican las páginas, su diseño, contenido y disposición. Por ejemplo, About-us.html, Product.html, Services.html, Contact-us.html, etc.
Cada una de estas páginas se crea por separado con códigos que definen sus particularidades.
• Otras etiquetas
El Doctype es el archivo que define el diseño básico de la página. A continuación, tienes que añadir otros elementos y atributos al sitio web de HTML.
La etiqueta < head > contiene todos los elementos y atributos relacionados con el título, la etiqueta meta, etc.
La etiqueta < title > es donde se inserta el título de la página.
Mira cómo será el código de la sección de la cabecera.
<head>
<title>My HTML Website</title>
<meta charset="UTF-8">
<meta name="description" content="The information bout your page will be displayed here.">
</header>
¿Cómo añadir contenido?
La siguiente sección es la etiqueta
.Todo el contenido de tu sitio web de HTML se muestra aquí. Incluye texto, imágenes, tablas, formularios y todas las demás entradas de diseño en tu sitio web de HTML.
• Añadir encabezados a tu sitio web de HTML
En HTML, los encabezados se escriben en los siguientes elementos:
<h1>
<h2>
<h3>
<h4>
<h5>
<h6>
Las etiquetas < h1 > y < h2 > son los títulos más importantes, mientras que el resto de etiquetas se utilizan como subtítulos y otros contenidos adicionales.
Nota: Esta información ayuda a los bots de los motores de búsqueda a entender qué mostrar en los resultados de búsqueda.
• Crear tu encabezado
Vamos a probarlo. En una nueva línea del editor HTML, escribe:
<h1>Welcome to My HTML Website</h1>
Guarda este archivo como "index.html" en una nueva carpeta y asígnale el nombre de "My Webpage". Abre el archivo en tu navegador web para ver los cambios.
• Cómo añadir texto en HTML
Añadir texto a nuestra página HTML es sencillo utilizando un elemento abierto con la etiqueta < p > que crea un nuevo párrafo. Colocamos todo nuestro texto normal dentro del elemento < p >.
Cuando escribimos un texto en HTML, también tenemos una serie de elementos que podemos utilizar para personalizar el texto o hacer que aparezca de una manera determinada.
Etiquetas HTML de uso común
Imagen tomada del sitio web de Strikingly
Estas etiquetas deben abrirse y cerrarse alrededor del texto en cuestión.
Vamos a probarlo. En una nueva línea del editor HTML, escribe el siguiente código HTML:
<p>Welcome to <em> my</em> HTML website. You can all my < strong > latest updates<strong> here.</p>
Guarda tu página para ver los cambios.
Añadir una hoja de estilo
Crea una hoja de estilo y desígnase como 'style.css' y guárdala en una nueva carpeta llamada 'css'. Y este archivo style.css nos ayudará a dar estilo a tu página web.
Recuerda que justo antes de cerrar la etiqueta añade una línea que diga...
<link href="css/style.css" rel="stylesheet" type="text/css">
Esta línea de código informa al navegador de que debe buscar la hoja de estilos mientras carga la página web.
Ahora estás listo para empezar a crear tu propio sitio web de HTML.
¿Por qué no codificar tu propio sitio web?
Codificar tu propio sitio web puede parecer la mejor manera de crear un sitio web. Pero hay ciertas desventajas que tal vez quieras mirar antes de continuar y empezar a codificar tu sitio web.
- No basta con tener unos conocimientos básicos de codificación si quieres crear un sitio web completo. Tienes que tener un buen conocimiento de la codificación HTML o sólo vas a perder un tiempo valioso que podrías haber puesto en otro lugar.
- La codificación no es rápida. Incluso si vas a contratar a un profesional, te llevará tiempo. Así que puedes imaginar cómo puede ser si estuvieras planeando seguir algunos tutoriales de HTML y construir tu sitio web de HTML.
- Y no es que tu trabajo esté hecho una vez que hayas construido el sitio web. No. Tendrás que mantener tu sitio web actualizado, lo que significa que tendrás que modificar constantemente los códigos. Esto puede dificultar tu posicionamiento SEO.
Aprender HTML no es tan fácil como algunos videos tutoriales lo hacen parecer. Hay muchos entresijos que podrías no entender y que podrían crear un bloqueo en tu negocio. Podrías utilizar plantillas HTML ya hechas, pero eso no lo hace muy diferente de cómo es. Y aunque tienen numerosas ventajas con un sitio web de HTML, tienes que sopesar qué es lo que mejor te funciona en lugar de dejarte llevar por la opinión de la masa.
Un constructor de sitios web es una herramienta que puede ayudarte a alcanzar el mismo objetivo, pero por un camino alternativo. A diferencia de un sitio web de HTML, en el que tienes que escribir manualmente todos los códigos para todos y cada uno de los aspectos del diseño y la funcionalidad, los creadores de sitios web tienen códigos incorporados. Todo lo que tienes que hacer es saber qué tipo de diseño o función quieres que tenga tu sitio web. Después de eso, sólo tienes que hacer clic en las opciones que te gustan y ¡bang! Ya tienes tu sitio web listo.
Utilizar códigos HTML puede ser mucho más sencillo e igualmente impresionante.
La herramienta Website Builder ayuda a sus clientes a construir rápidamente sitios web completos. Su cliente puede cobrar en función del espacio web y del número de páginas web especificadas con un plan concreto.
La modificación de tu sitio web de HTML no es tan difícil como el tiempo que requiere. Cuando tu negocio está funcionando a toda máquina, es posible que no tengas tiempo para escribir códigos HTML para cada uno de los cambios en tu sitio web. Por otro lado, los creadores de sitios web tienen plantillas de diseño incorporadas, paletas de colores y funcionalidades que sólo necesitan un clic en un botón.
Ventajas de utilizar un constructor
Aquí hay algunas razones de peso para convencerte de que construye tu sitio web utilizando un constructor de sitios web profesional.
- No hay necesidad de codificar - Una gran ventaja es que tienes todo disponible. No tienes que aprender ninguna codificación o entender cómo funcionan los constructores de sitios web. Todo lo que necesitas es configurar una cuenta con un constructor de sitios web como Strikingly y comenzar a editar una de las muchas plantillas de sitios web gratuitos.
- Rápido - Si vas a aprender HTML y construir un sitio web, no va a suceder en un día. Pero construir un sitio web en una plataforma como Strikingly es mucho más rápido en comparación con la construcción de un sitio web de HTML. El proceso es rápido ya que los códigos están incorporados. Sólo tienes que aplicar el conjunto correcto de códigos para crear tu sitio web.
- Fácil de usar - Puedes ser un total desconocido en el uso de una plataforma de construcción de sitios web. Aun así, puedes construir un sitio web que se vea mucho mejor que un sitio web de HTML. Puedes tomar como ejemplo la sencilla interfaz de usuario de Strikingly. Cualquier persona con conocimientos básicos de informática puede crear un sitio web totalmente funcional sin ninguna ayuda externa.
- Se actualiza fácilmente en un sitio web de HTML, es una verdadera tarea cambiar o actualizar el sitio web. Los creadores de sitios web como Strikingly son notablemente sencillos. El aspecto fácil de usar reduce la gestión del sitio web a unos pocos clics. Cualquier cosa, desde añadir una nueva página, cambiar el banner, añadir una lista de correo electrónico, etc se puede hacer con la mayor facilidad.
- Crear grandes sitios web - La gran variedad de opciones de diseño, maquetación, esquemas de color y widgets puede ayudarte a construir un sitio web a partir de tu imaginación. Cuando se compara con un sitio web de HTML, cuando se construye en una plataforma como Strikingly, no sólo tienes opciones para crear un sitio web impresionante. Con un sitio web de Strikingly, tu negocio se lanza a los principales interesados en tu negocio, dándote el empuje que tu negocio necesita.
Personalización con HTML vs. Strikingly
Esta es una comparación de cómo construir tu sitio usando HTML frente a usar un constructor de sitios web. Los constructores de sitios web tienen una notable simplicidad y facilidad de uso en comparación con los sitios web HTML.
Imagen tomada del producto Strikingly
El ejemplo aquí muestra lo que tienes que hacer para cambiar el color del texto. En un sitio web de HTML, tienes que añadir en la etiqueta específica, el código para el color y el tamaño de forma individual. En un constructor de sitios web como Strikingly, es sólo unos pocos clics y ya está.
Así que entiendes por qué podrías optar por un constructor de sitios web como Strikingly y evitar la codificación por completo. ¿Pero no sabes cómo hacer el proceso de creación de un sitio web? No te preocupes. Strikingly ha llevado la facilidad de creación de sitios web al siguiente nivel.
¿Cómo crear un sitio web con Strikingly?
A continuación, te presentamos un método rápido para poner en marcha tu sitio web:
1. Crear una cuenta
Lo primero que necesitas es una cuenta registrada en Strikingly. Puedes utilizar tu ID de correo electrónico o iniciar sesión con tu cuenta de Google.
Imagen tomada del producto Strikingly
2. Elegir una plantilla
Una vez que te hayas registrado, podrás elegir una de las muchas plantillas notables de la vasta biblioteca de Strikingly. Hay plantillas categorizadas para que la elección de la plantilla adecuada para tu negocio no sea un problema.
Imagen tomada del producto Strikingly
3. Editar la plantilla
Después de elegir la plantilla, serás redirigido a la página donde puedes empezar a editar tu página. Asegúrate de añadir todas las páginas, botones, imágenes, texto y contenido necesarios para que tu página destaque entre las demás.
Imagen tomada del producto Strikingly
4. Publicar tu sitio
El siguiente paso es publicar tu sitio y ver cómo se ve en la web. Puedes probar todos los aspectos visuales y funcionales del sitio web.
Tu sitio web está listo para funcionar. Asegúrate de registrar un dominio para tu sitio web. Esto registrará tu sitio web en Internet y creará un espacio donde se aloja tu sitio web.
Y ahí lo tienes. Es así de sencillo. Sin necesidad de aprender códigos HTML, sin problemas de edición o actualización, y todo ello en un día de trabajo. No hay que pensarlo dos veces si tienes poco tiempo y recursos o si necesitas un sitio web personal para tu negocio inicial. No es necesario un sitio web de HTML. ¿A qué esperas? ¡Consigue tu sitio web gratuito en Strikingly y olvídate de tus problemas de creación de sitios web!
