Seamos claros desde el principio: si deseas que tu negocio exista, debes estar en la red. Actualmente los usuarios de internet ya superan la mitad de la población global: a finales de 2020, la IWS estimó la población mundial en 7.838.004.158 personas, de las cuales, 4.949.868.338 son usuarios de Internet.
![<< Guía básica sobre HTML y CSS para marketers [Descargar gratis] >>](https://i0.wp.com/no-cache.hubspot.com/cta/default/53/81607f16-1f47-4f2d-9363-c6ac8242f7db.png?w=1080&ssl=1)
Y, como se sabe, las páginas web se han convertido en las grandes aliadas de las empresas para dar a conocer sus productos o servicios. Por ello es importante poseer un sitio web bien estructurado que genere tráfico y consumidores.
Las páginas web se pueden clasificar por su forma, tecnología y funcionalidad. Son creadas en formato HTML y se utilizan en blogs, foros, instituciones, medios de comunicación, buscadores, webs corporativas, tiendas online, entre muchas más opciones.
Diversas empresas optan por plataformas que les facilitan crear sus páginas web de forma predeterminada. Esto puede considerarse como un beneficio pues ahorran tiempo y dinero (ya que muchas de ellas son gratuitas); están alojadas en la nube, su instalación no es compleja y basta con registrarse, crear una cuenta y elegir una plantilla. La desventaja es que al ser formatos de diseño predeterminados no cuentan con muchas opciones y, probablemente, ninguna te convenza al 100 % para el sitio de tu empresa. Otro inconveniente es que estas plataformas, por ser gratuitas y de uso inmediato, colocan en tu web publicidad ajena a la tuya, por lo que tu contenido puede no apreciarse adecuadamente y tus usuarios suelen confundirse. Tu marca pierde valor cuando esto ocurre; imagina tu sitio saturado de anuncios que no permiten al usuario ver con claridad lo que ofreces.
Por esa razón es conveniente crear tu propio sitio web y HTML será una herramienta de gran ayuda.
HTML, a primera vista, parece complicada y laboriosa, pero saber utilizarla te permitirá construir tu página con los elementos que necesitas sin restricciones, y realizar cambios concretos dentro de tu sitio. Aprender HTML es más fácil de lo que crees, con nuestra guía verás lo rápido que te familiarizas con él.
¿Qué es una página web en HTML?
Una página HyperText Markup Language o HTML es un documento de texto con marcas. Forma parte del lenguaje utilizado para la elaboración de sitios web y hace referencia a los enlaces que conectan páginas web entre sí, dentro de un único sitio o varios.
Las marcas utilizadas en HTML sirven para etiquetar diferentes elementos dentro de un página web: imágenes, texto, videos, entre otros. Seguro ya has visto de qué te hablamos, pero te mostramos algunos ejemplos de etiquetas:
- <head>
- <title>
- <body>
- <section>
- <video>
Otro ejemplo más claro del uso de etiquetas es el siguiente:
<h1>Cómo hacer una página web en HTML</h1>
Aquí, la etiqueta <h1> indica que se trata de un título.
Las etiquetas son vitales en la creación de páginas web en HTML, pues con ellas se aplicarán las pautas de diseño que las conformarán. Con las etiquetas pueden realizarse diferentes indicaciones como el tipo de fuente, su tamaño y color, entre otros atributos.
Cómo hacer una página web en HTML
- Conoce los conceptos básicos de las páginas HTML.
- Abre el editor de texto y comienza con una estructura básica.
- Trabaja el texto en HTML.
- Cambia el color del texto.
- Da formato al texto.
- Incluye un enlace a otra página.
- Agrega imágenes.
- Cerciórate de que todas las etiquetas estén cerradas.
- Guarda tu documento HTML.
1. Conoce los conceptos básicos de las páginas HTML
Antes de comenzar a realizar tu página con códigos HTML, veamos algunos conceptos fundamentales para que te familiarices con ellos, pues los seguramente los aplicarás. No te preocupes, en este enlace encontrarás estos conceptos, explicados a detalle, para que los utilices durante todo tu proceso de programación.
Lo más relevante que debes conocer para comprender el HTML es lo siguiente:
- Las etiquetas deben tener apertura y cierre (<h1> texto </h1>). De lo contrario, el código no será reconocido por el sitio y los cambios que realices no se visualizarán. Siempre es importante revisar este aspecto, antes de poner un nuevo código, para evitar una posterior revisión exhaustiva en busca de un error.
- La estructura básica de una página web se compone por las etiquetas <html>, <head> y <body>. La primera indica el comienzo de la página; la segunda es la cabecera y contiene información descriptiva del sitio; y la tercera es la que contiene todos los elementos visibles dentro de la página.
- Los niveles de títulos pueden variar desde la etiqueta h1 hasta la h6.
- La etiqueta <p> corresponde a los párrafos.
- La etiqueta <a> representa los enlaces.
- Los metadatos contienen información sobre la página, como: estilos, buscadores, scripts, por mencionar algunos. Estos se conforman por las etiquetas <base>, <head>, <link>, <meta>, <style> y <title>.
2. Abre el editor de texto y comienza con una estructura básica
Si tienes una computadora Windows, podrás encontrar el editor de texto como «Bloc de notas»; en una computadora Mac puedes utilizar «TextEdit». Después de abrirlo, escribe una estructura base de HTML como la que te mostramos en la siguiente imagen:
Puedes utilizar esta estructura para personalizar el título principal de tu página, la descripción del contenido y codificar de una manera sencilla todo el sitio.
3. Trabaja el texto en HTML
Trabajar el texto en HTML es uno de los pasos más sencillos. Aquí podrás utilizar las etiquetas de título que te mencionamos anteriormente (h1, h2, h3, h4, h5, h6). Su uso dependerá de la jerarquización que desees darle a cada título o subtítulo.
La etiqueta <p> marca los párrafos. Con ambos elementos ya puedes comenzar a codificar el texto de tu página.
4. Cambiar el color del texto
Para cambiar el color del texto, escribe la etiqueta correspondiente escribiendo el color que prefieras entre comillas. Por ejemplo:
5. Da formato al texto
Para dar formato solo escribe el código como en el siguiente ejemplo:
- Texto en negrita usa la etiqueta <b>texto</b>
- Texto subrayado <u>texto</u>
- Texto en cursivas o itálicas <i>texto</i>
6. Incluye un enlace a otra página
Si en el texto quieres incluir un enlace a otra página, debes utilizar la etiqueta:
Aquí debes incluir el URL que deseas enlazar. El atributo «blank» se utiliza para que el enlace que agregues se pueda abrir en una nueva pestaña o página. En caso de que quieras que la liga se abra en la misma página, escribe «self».
7. Agrega imágenes
Un elemento vital en una página web son las imágenes. Para añadirlas en HTML debes usar la etiqueta <img>:
El atributo «src» es para abrir un URL para la imagen que quieres que se visualice. El apartado «alt» permite visualizar un texto alterno descriptivo, en caso de que por error de carga del sitio la imagen no pueda verse. El texto en la imagen también sirve como posicionamiento en buscadores, como Google.
Los atributos «height» y «width» corresponden a las dimensiones que desees que tenga cada imagen, a lo alto y ancho.
8. Cerciórate de que todas las etiquetas estén cerradas
Antes de guardar el documento y ver los resultados, es muy importante que cierres todas las etiquetas en la parte inferior del documento para que todos los códigos que utilizaste puedan visualizarse. Estos se cierran de la siguiente forma:
Para revisar que tus códigos estén correctos, verifica que las etiquetas estén abiertas y cerradas y que todo esté bien escrito.
9. Guarda tu documento HTML
Para guardar el texto que realizaste, recuerda cambiar el formato «.txt» por «.html». Para abrirlo y ver los resultados, da clic derecho sobre el archivo y selecciona el navegador de tu preferencia. Si percibes errores en el diseño de la página, deberás regresar al editor de texto o bloc de notas para revisar a detalle en dónde está el error.
¡Listo! Ahora ya sabes cómo crear una página web en HTML.
3 ejemplos de páginas web sencillas en HTML
- Bedow
- AIAIAI
- Monograph
1. Bedow
Si el diseño de tu sitio web requiere más contenido visual que texto, este es un excelente ejemplo. Para lograrlo, tendrás que prestar más atención a las etiquetas HTML de imágenes y ajustarlas de modo que queden con las dimensiones que deseas.
Imagen de Bedow
2. AIAIAI
Si quieres hacer una página web en HTML que te desafíe a agregar diferentes tipos de fuentes, tamaños y colores de texto, inspírate en el sitio web de AIAIAI. Además, también puedes practicar el manejo de diversas dimensiones de imágenes.
Imagen de AIAIAI
3. Monograph
Si quieres intentar combinaciones de colores más complejas para avanzar en tu entrenamiento para crear páginas web en HTML, observa el sitio de Monograph. Su contenido se destaca por el uso de texto con un colorido fondo que atrae toda la atención.
Imagen de Monograph
Como puedes ver, programar una página web HTML requiere tiempo y dedicación, pero no es imposible. No olvides que la práctica hace al maestro. Si te surgen dudas en el proceso busca apoyo en tutoriales y foros donde hay personas que dominan este tipo de diseño. Poco a poco, aprenderás nuevas habilidades y no habrá limites para tu creatividad y talento.
Recuerda que HTML ofrece grandes ventajas por ser una herramienta verdaderamente útil para crear el sitio de tu empresa, exactamente como lo esperas.
Powered by WPeMatico
Síguenos!