Las páginas web se pueden clasificar por su forma, tecnología y funcionalidad. Se crean en formato HTML y se utilizan en blogs, foros, instituciones, medios de comunicación, buscadores, webs corporativas, tiendas online, entre muchas más opciones.
HTML, a primera vista, parece complicado y laborioso, pero saber utilizarlo 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 y con nuestra guía verás lo rápido que te familiarizarás 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 web que las conformarán, para darles un orden jerárquico. 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 contenido multimedia.
- 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 realizar tu página con códigos HTML, veamos algunos conceptos fundamentales, pues seguramente los aplicarás. No te preocupes, en este enlace encontrarás esos elementos explicados a detalle, para que los utilices durante todo tu proceso de programación.
Lo más relevante que debes conocer para comprender la estructura del 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 abarca 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>.
Se calcula que hay alrededor de 142 etiquetas HTML; sin embargo, muchas de ellas ya han caído en desuso, sobre todo con la aparición de HTML5, la versión más reciente del código que incluye valiosas funciones nuevas.
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.
Como principiante, también puedes usar los editores WYSIWYG, del inglés «what you see is what you get», los cuales sirven para visualizar directamente cómo se muestra la página conforme se va escribiendo el código HTML. Entre algunos programas de este tipo están:
- Sublime Text: este editor de texto web está habilitado tanto para código HTML como CSS personalizado. Es fácil de usar y resalta las líneas de código en la sintaxis.
- Notepad ++: un programa gratuito para redactar varios lenguajes como el HTML, CSS, JavaScript o PHP. Es nativo de Microsoft y es el básico de los programadores.
- Visual Studio Code: disponible para todos los sistemas operativos, ofrece una versión gratuita y funciones de desarrollo personalizado.
- Atom: un editor de código abierto para HTML, JavaScript, CSS y Node.js. Cuenta con autocompletado inteligente y permite la instalación de paquetes.
- Coda: exclusivo del sistema macOS, soporta múltiples lenguajes de programación; es sencillo de manejar y su sistema te permite guardar fragmentos de código.
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. Cambia el color del texto
Para cambiar el color del texto, escribe la etiqueta correspondiente escribiendo el color que prefieras entre comillas. Por ejemplo:
También con el código HTML puedes indicar los colores de fondo de tu sitio web; existen más de 16 millones de opciones con los sistemas RGB y HEX.
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 añadir 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 contenido multimedia
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 mostrar. 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.
![<< Guía básica sobre HTML y CSS para marketers [Descargar gratis] >>](https://no-cache.hubspot.com/cta/default/53/81607f16-1f47-4f2d-9363-c6ac8242f7db.png){kind=small}
Video
Hoy en día los videos son uno de los contenidos más cotizados de las páginas web. Para insertarlos en tu sitio coloca este código:
<video width="320" height=240" controls>
<source src="animación.mp4" type="video/mp4">
Tu navegador no soporta este formato de video
</video>
Donde «height» y «width» establecen el tamaño del video, «source» es la clave del video, «src» indica la URL del video o la ubicación del archivo y «type» sirve para señalar el formato de video. En caso de no poder reproducirlo, aparecerá la leyenda «Tu navegador no soporta este formato de video». También puedes insertar un video de YouTube con el código de inserción que ya te ofrece la plataforma.
Audio
Respecto a los audios o canciones, puedes agregar este código:
<audio controls>
<source src="cancion.mp3" type="audio/mp3">
Tu navegador no soporta este formato de audio
</audio>
En este caso «src» describe el nombre o ubicación del archivo y «type» sirve para indicar el formato del audio. Si no es posible reproducirlo aparecerá la frase «Tu navegador no soporta este formato de audio».
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 puedan visualizarse correctamente todos los códigos que utilizaste. Estos se cierran de la siguiente forma:
Verifica que las etiquetas de todos los códigos estén abiertas y cerradas y que todo esté escrito correctamente.
9. Guarda tu documento HTML
Para guardar el texto que creaste, 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. Si utilizas esto, en conjunto con el código CSS, puedes optimizar la parte visual y con el lenguaje JavaScript puedes agregar elementos dinámicos para crear páginas interactivas para tus visitantes.
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 se ajusten a 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, 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
Las páginas web originales se caracterizan por mostrar la personalidad de la marca de forma creativa. Para ello se compaginan diversos elementos como los fondos de colores y texturas, animaciones, efectos en el cursor, interfaz intuitiva de secciones, iconos, entre otros.
¿Puedes crear una página web sin saber el código HTML?
Para aprender y dominar el lenguaje HTML es necesario practicar mucho, sobre todo para lograr hacer una personalización de sitios web que sea realmente atractiva para los usuarios y clientes de una marca. Así que si quieres ahorrar el proceso manual de programación HTML, existe la posibilidad de usar un sistema de gestión de contenidos (CMS).
Como CMS Hub, un software que te permite desarrollar páginas con temas predeterminados, en los que podrás agregar diversos elementos interactivos con la herramienta de arrastrar y soltar, por lo que no necesitas tener conocimientos de programación para editar.
Desde nuestra plataforma podrás gestionar todo el contenido de tu página web, incluyendo la sección de blog, en conjunto con recomendaciones SEO automáticas. Es muy fácil de usar y de actualizar con su sistema de alerta de códigos erróneos. Además, cuenta con una monitorización contra ataques cibernéticos las 24 horas del día.
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á límites 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.
