Quieres crear el sitio web de tus sueños, pero no quieres que tenga el aspecto de una plantilla genérica. Cualquier persona familiarizada en diseño web te dirá que primero tienes que saber HTML. Pero, ¿qué es HTML y cómo puedes aprenderlo?
Quieres que el sitio web que publiques destaque y sea original. Quieres elementos y diseños que nadie más en tu sector esté utilizando. Al fin y al cabo, tu sitio web es la primera impresión que muchos clientes potenciales se llevan de tu negocio.
Pero antes de poder hacerlo, tienes que aprender un lenguaje informático llamado HTML. Esencialmente, es el lenguaje que establece lo que un navegador web debe mostrar a un visitante cuando llega a tu sitio web.
En este artículo, vamos a explicar qué es el HTML, cómo surgió, cómo se utiliza, cómo funciona, y te ofrecemos una formación básica en HTML con consejos sobre cómo puedes aprender más.
¿Estás preparado para aprender a programar tu sitio web sin crear una página rota? Entremos de lleno.
¿Qué es el HTML?
HTML significa «lenguaje de marcas de hipertexto» y es un lenguaje relativamente sencillo utilizado para crear páginas web. Como no permite variables ni funciones, no se considera un «lenguaje de programación», sino un «lenguaje de marcas», un lenguaje que utiliza etiquetas para definir elementos dentro de un documento.
Si preguntas a cualquier persona del mundo del diseño web qué es el HTML, es probable que recibas una larga explicación que te dejará la cabeza dando vueltas, sobre todo si eres como la mayoría del mundo y no tienes ni idea de programación ni de crear un sitio web desde cero.
Entonces, ¿qué significa «lenguaje de marcado de hipertexto»? Vamos a desglosarlo.
El hipertexto es un texto colocado en orden que conecta elementos relacionados, normalmente mediante enlaces (también llamados hipervínculos). El lenguaje de marcas describe el estilo y la estructura de una página a los navegadores web.
Así pues, el HTML es lo que garantiza que el texto y las imágenes aparezcan en el lugar correcto, y que los usuarios puedan navegar por tu sitio web sin problemas. Los navegadores web cargan esta información desde tu servidor web para generar los sitios web que ves cada día.
Si miramos el HTML en estado puro, veremos un montón de símbolos y paréntesis que aparentemente no tienen sentido. Sin embargo, todo contribuye al producto final de cara al cliente.
La propia estructura de los sitios web se crea mediante HTML. Este lenguaje funciona junto con CSS (hojas de estilo en cascada) y JavaScript para crear sitios web visualmente atractivos e interactivos para que los usuarios los disfruten.
La conclusión es que el HTML es la base de una buena página web. Sin él, no podrías compartir texto con los visitantes del sitio web, y mucho menos añadir tu toque personal al sitio web de tus sueños.
La Historia del HTML
Sir Tim Berners-Lee creó el HTML a finales de 1991, pero el lenguaje de programación no se dio a conocer a las masas hasta 1993.
Fue entonces cuando apareció HTML1. Desde el principio, fue concebido como un medio para compartir datos a través de los navegadores web.
El crecimiento de HTML se estancó poco después de su lanzamiento porque no había muchos desarrolladores creando sitios web en ese momento.
El HTML2 se publicó en 1995 con características adicionales, convirtiéndose en el lenguaje de marcado estándar para el diseño web hasta 1997.
Fue entonces cuando Dave Raggett desarrolló HTML3. Proporcionó a los administradores de la web características más potentes para el diseño de páginas. Por desgracia, se adelantó a su tiempo. Las características de HTML3 en realidad ralentizaban los navegadores, ya que aún no estaban equipados para aplicarlas.
HTML4.01 se desarrolló en 1999, y vino con soporte para opciones multimedia. Esta actualización también incluía hojas de estilo, facilidades de impresión y lenguajes de scripting adicionales.
Más recientemente, el HTML5 fue lanzado en 2015. El lanzamiento de HTML5 añadió más soporte de almacenamiento de medios y elementos de contenido específicos. También se simplificó mucho la incrustación de doctype inline, audio y vídeo.
En 2022, el mundo trabaja con HTML5.2, que mejora la política de seguridad de los contenidos en el momento en que más lo necesitamos.
También se ha centrado en el comercio electrónico, añadiendo una API de solicitud de pagos. Esta actualización también ha añadido aplicaciones de Internet ricas en accesibilidad para las personas discapacitadas.
¿Para Qué se Utiliza el HTML?
La respuesta sencilla a esta pregunta es que el HTML se utiliza para crear sitios web de uso personal y empresarial en todo el mundo.
La respuesta real es mucho más detallada que eso.
El HTML ha sido el lenguaje por defecto utilizado para los documentos y sitios web desde la década de 1990. Funciona con los navegadores para ayudarles a entender la estructura de un sitio web y el estilo asociado a ellos.
Esencialmente, el HTML es un plano que indica al navegador web cómo armar tu sitio web para el visitante. Cuando un usuario teclea tu URL, el navegador monta la página basándose en los bloques de construcción establecidos en el código HTML.
Esto, a su vez, ayuda a que la página tenga el aspecto deseado cuando la ve un usuario, cuando se combina con una hoja de estilos CSS que da estilo a los elementos dispuestos en tu documento HTML.
La versión actual de HTML también permite que el vídeo, el audio, las hojas de cálculo y otras aplicaciones se ejecuten directamente en los sitios web. Si alguna vez te has maravillado con estos elementos en un sitio web, se lo tienes que agradecer a HTML5.
Este lenguaje de marcado también garantiza una navegación interna fluida de un sitio web, gracias a los hipervínculos.
Los diseñadores de sitios web también pueden utilizar el HTML para crear formularios de generación de leads para recopilar correos electrónicos y nombres (siempre que potencie la acción con un archivo programado en otro lenguaje).
Si utilizas plugins externos, también puedes usar HTML para crear sistemas de reserva o formularios de búsqueda dentro de un sitio, lo que facilita la reserva y la navegación.
El HTML es la forma de incluir contenido no dinámico en un sitio web: contenido que quieres que todos los visitantes vean de la misma manera. Si quieres contenido dinámico, debes usar JavaScript, PHP u otros lenguajes de programación.
¿Cómo Funciona el HTML?
En mayo de 2022, hay más de 3.560 millones de páginas web en Internet. Muchas de esas páginas son simples archivos HTML. (Ten en cuenta que no estamos hablando de sitios web, sino de páginas web)
Anteriormente, si tu sitio tenía 150 páginas, probablemente tenías 150 archivos HTML separados. Pero hoy las cosas han cambiado. Si utilizas un sistema de gestión de contenidos (CMS), como hace la mayoría de la gente, esto no será así, ya que suele generar dinámicamente las páginas a partir de los datos almacenados en una base de datos.
Estos archivos también se denominan documentos HTML, y son los bloques de construcción de tu sitio web. Cada página tiene varios elementos dentro y fuera de la página que tienen un lugar en los documentos HTML. Esto incluye elementos de backend como las metaetiquetas, las etiquetas de título y las etiquetas alt, pero también incluye elementos físicos como vídeos, imágenes, bloques de texto y otros elementos orientados al usuario.
¿En qué Consiste un Documento HTML?
Todos los documentos HTML terminan con la extensión .html o .htm. Estos documentos contienen todo el texto y las etiquetas que proporcionan información estática a un navegador web.
El documento HTML es el manual de instrucciones que utiliza el navegador web del usuario para construir el sitio. Todos los archivos a los que hace referencia (hojas de estilo CSS, archivos JavaScript que potencian los elementos dinámicos, etc.) son leídos por el navegador, que luego renderiza la página en consecuencia, permitiendo a los espectadores verla tal y como se pretende. El renderizado es la construcción real, y tiene lugar cada vez que alguien navega a una página específica de tu sitio.
Si hay problemas con tu documento HTML o con alguno de los archivos que incluye, el sitio no se renderizará correctamente. Sería como intentar montar un escritorio de IKEA sin una pieza o herramienta vital.
Los sitios web modernos contienen varios elementos HTML formados por etiquetas y atributos. Estos elementos crean la estructura de una página. Las etiquetas asociadas a cada elemento muestran dónde empiezan y terminan. Sin una etiqueta que cierre un elemento, el navegador pondrá todo el contenido siguiente dentro de esa columna o fila, aunque no sea lo que pretendías.
Los atributos asociados a cada elemento de una página ilustran las distintas características que los componen.
Todos los documentos HTML comienzan con una declaración <!DOCTYPE>. Esta definición del tipo de documento, también conocida como DTD, determina la estructura y los elementos de un documento XML.
Mientras que <div> solía ser la opción principal para crear bloques de contenido, en HTML5, también tienes bloques específicos como <main> que indican el tipo de contenido que habrá en un bloque a los rastreadores – en este caso, el contenido principal del blog/artículo.
Conceptos Básicos de HTML
Si quieres convertirte en diseñador web o al menos participar en la creación del sitio web de tu empresa, tienes que aprender HTML. Como casi todo lo que hay que aprender en este mundo, tienes que empezar por lo básico para tener una sólida comprensión de los elementos más avanzados que vendrán más adelante.
Por supuesto, puedes utilizar un editor de HTML gratuito o Sublime Text, pero tener una sólida comprensión de cómo funciona el HTML te ayudará a mejorar la personalización de los sitios web que construyas.
Vamos a desglosar algunos elementos básicos de HTML en las siguientes secciones para que empieces a recorrer el camino hacia el dominio del HTML.
Elementos de HTML
Todos los elementos de HTML, independientemente de lo que estén creando, tienen los mismos tres componentes. Tienes una etiqueta de apertura, el contenido propiamente dicho y una etiqueta de cierre.
Tus etiquetas de apertura muestran al navegador web dónde empiezan los elementos de tu página. Por ejemplo, puede mostrar dónde empieza un reproductor de vídeo o un párrafo de texto en la página. Todas las etiquetas de apertura utilizan paréntesis angulares de apertura y cierre para marcarse a sí mismas. Por ejemplo, la etiqueta de apertura <em> pone énfasis en el contenido, como la cursiva. Colocarías esta etiqueta antes del texto que quieres enfatizar.
El contenido propiamente dicho es la información real que ve el usuario. Puede ser un texto escrito, como una entrada de blog. También puede ser una imagen o un código de inserción de un vídeo. Si se coloca después de la etiqueta de apertura, el contenido comenzará donde se designe.
La etiqueta de cierre es la misma que la de apertura, pero añade una barra inclinada antes del nombre del elemento. Para volver a nuestro ejemplo de la etiqueta de énfasis de antes, colocarías la etiqueta </em> al final del texto que quieres enfatizar.
Así, por ejemplo, si quieres poner en cursiva la palabra «exactamente», lo codificarías así
<em>Exactamente.</em>
En la página real de cara al usuario, se vería así:
Exactamente.
Los elementos HTML también incluyen atributos, que contienen un nombre y un valor de atributo. El nombre del atributo muestra lo que el usuario está añadiendo, mientras que el valor proporciona información adicional.
En el caso de las etiquetas de imagen, obviamente tienes que especificar qué imagen quieres mostrar, de modo que se ve así:
<img src=»img_girl.jpg»>
Si quieres hacer que un párrafo de tu página sea de color rojo mientras usas la fuente Arial, puedes usar el atributo de estilo:
<p style=»color:red;font-family:arial»>
En este ejemplo, estamos utilizando la etiqueta de apertura <p> para un nuevo párrafo. Con estos atributos adjuntos, todo en ese párrafo sería rojo en la fuente Arial, hasta la etiqueta de cierre </p>.
Pero en el desarrollo web moderno, la práctica habitual es no utilizar el atributo de estilo HTML para ajustar el diseño de los elementos individuales, sino dar estilo a toda la página con una hoja de estilos CSS independiente.
La clase HTML y el ID son dos atributos de un elemento HTML que los «nombran» y te ayudan a orientar estos elementos con CSS o JavaScript posteriormente. Esto ayuda al desarrollo y lo hace más eficaz. Utilizando el ID o la clase de un elemento, puedes insertar información de estilo en elementos como el color de fondo, los bordes, el color de la fuente, etc.
Por ejemplo, en lugar de dar estilo al texto en rojo dentro del documento HTML, podrías hacer esto:
<p class=”redtext”>
And in the CSS stylesheet, target the class like this:
.redtext {
color:red;
font-family:arial;
}>/code>Etiquetas y Elementos HTML Más Utilizados
Hay 142 etiquetas HTML diferentes que te permiten crear elementos. Éstas se componen de elementos a nivel de bloque y inline.
Los elementos a nivel de bloque abarcan todo el ancho de una página, iniciando una nueva línea dentro de un documento.
Estas son algunas de las etiquetas comunes a nivel de bloque que puedes utilizar en tu sitio web:
- <head> Esta etiqueta es para listar la meta-información, como el título de la página.
- <html> Este es un elemento root. Aparece al principio y define el documento HTML.
- <body> La etiqueta body identifica el contenido de una página.
- <h1> a <h6> Estas seis etiquetas diferentes identifican los distintos encabezados que puedes utilizar.
- <p> Esta es la etiqueta de párrafo, que dicta el comienzo de un nuevo párrafo en tu contenido.
- <ol> Esta etiqueta crea una lista ordenada.
- <ul> La etiqueta ul crea listas desordenadas.
- <li> Esta es la etiqueta de elemento de lista. Está encerrada dentro de etiquetas de lista ordenada o desordenada para cada elemento de la lista.
- <div> Esta es una etiqueta de elemento de bloque que crea una «sección» que puedes rellenar con contenido (y dar estilo después con CSS. La mayoría de los sitios y plantillas dependen en gran medida de ellas para estructurar su contenido.
- <header> Es una etiqueta de elemento de bloque específica para el contenido de la cabecera.
- <main> Esta es una etiqueta de bloque específicamente para el contenido principal del blog.
- <footer> Esta etiqueta de bloque es para la información de tu pie de página, como el copyright, los enlaces, etc.
Los elementos inline son los que dan formato al contenido dentro de tus elementos de nivel de bloque. Esto puede incluir texto enfatizado, como fuentes en negrita y cursiva. El contenido inline también pueden ser enlaces, tanto a contenido interno como externo.
Los enlaces inline dan formato al texto sin romper el flujo de contenido.
Hay algunas etiquetas inline comunes que puedes utilizar en tu sitio web. Éstas son algunas de ellas, sin ningún orden en particular:
- <strong> Esto es lo que usarías para crear texto en negrita.
- <em> La etiqueta em, que hemos utilizado en un ejemplo anterior, muestra la cursiva.
- <a> Esta es la etiqueta de hipervínculo. También necesitaría un atributo href para mostrar hacia dónde apunta el enlace (igual que las etiquetas img necesitan un atributo src).
HTML, CSS y JavaScript
Ya hemos mencionado brevemente CSS y JavaScript en este artículo. Suelen ir de la mano del HTML para crear sitios web modernos y avanzados con un toque personalizado. Pero, ¿qué son CSS y JavaScript? ¿Y en qué se diferencian del HTML?
Como ya sabemos a estas alturas, el HTML se utiliza para crear una estructura y añadir elementos a tus páginas. Pero, como también sabes, eso no es todo lo que se necesita para un diseño sólido de un sitio web. Aquí es donde entran en juego CSS y JavaScript.
CSS son las siglas de Cascading Style Sheets (hojas de estilo en cascada). Es el lenguaje y los archivos que los desarrolladores web modernos utilizan para diseñar los fondos, los colores, el espaciado, los diseños y las animaciones que se ven en un sitio web. Esencialmente, CSS describe la presentación de un documento HTML, dando al diseñador web más flexibilidad y control.
También puede ayudarte a aplicar el mismo formato a varias páginas web mediante archivos .css. Estas hojas de estilo aseguran que no tendrás que rehacer el formato para cada página. Además, el archivo .css puede almacenarse en caché, lo que reduce la velocidad de carga entre páginas que comparten el mismo formato.
Luego está el Javascript. Javascript crea funciones dinámicas, como galerías de fotos, ventanas emergentes y sliders. Es un lenguaje de programación muy popular que utilizan el 97% de los sitios web de todo el mundo. Los principales navegadores web incluyen motores de Javascript dedicados, lo que hace que la implementación de estas funciones sea más fácil y eficaz.
Juntos, Javascript, CSS y HTML trabajan juntos para crear lo que vemos cada día como una página web completa, bien diseñada e interactiva, tanto en plataformas de escritorio como móviles.
Cómo Aprender HTML
Hemos repasado qué es el HTML y algunos de los aspectos básicos asociados a él. Ahora, es el momento de hablar del proceso de aprender realmente a usar HTML y de cómo puede ayudar a tu futuro y a tus aspiraciones profesionales.
HTML es más que un lenguaje de programación popular. Es el lenguaje de Internet, y eso no va a cambiar pronto. Trabaja mano a mano con servicios populares como WordPress, y puedes usar HTML para alterar muchas plantillas de WordPress y convertirlas en algo exclusivamente tuyo.
Así que, empecemos por el motivo por el que alguien querría aprender WordPress en primer lugar.
¿Por Qué Aprender HTML?
Aprender HTML es importante para cualquiera que quiera tener una carrera en el desarrollo web. Los desarrolladores web con talento siempre están demandados, tanto si trabajan para agencias como de forma independiente, y aprender HTML es la base de ese conjunto de habilidades.
No sólo hay mucha demanda para este puesto, sino que los desarrolladores web pueden ganar fácilmente salarios de seis cifras. En 2022, el salario medio de los desarrolladores web es de 98.565 dólares.
Un gran conocimiento de HTML es una habilidad esencial que buscan los reclutadores cuando contratan a desarrolladores web.
Si no eres un desarrollador web pero quieres contratar a uno, un conocimiento rudimentario de HTML, CSS y JS y de cómo interactúan te ayudará a la hora de entrevistar a los candidatos. Podrás saber qué preguntas hacer y descartar fácilmente a los que no saben de qué están hablando.
Recursos de Aprendizaje
Existen varios recursos de aprendizaje gratuitos para aquellos que quieran ampliar su formación en HTML. Te guiaremos por algunos de los mejores en este momento.
Codecademy
Codecademy es un servicio que ofrece cursos de nivel introductorio gratuitos. Incluye tutoriales interactivos y utiliza una pantalla dividida que muestra los resultados de tu programación HTML a medida que avanzas.
Puedes acceder a contenidos exclusivos a través del programa por 19,99 dólares al mes.
Coursera
Coursera incluye varios cursos que profundizan en el HTML y proporcionan ejemplos del mundo real. Este servicio tiene un coste de 49$ al mes con una semana de prueba gratuita.
W3Schools
W3Schools es otro servicio gratuito que enseña HTML básico. Utiliza ejemplos, ejercicios y diversos recursos para conseguirlo.
También puedes pagar 95 dólares por un curso oficial a tu propio ritmo que incluye un certificado al final.
Asamblea General Dash
General Assembly Dash es un recurso educativo de HTML que proporciona proyectos para los principiantes que quieren adentrarse en las aguas del diseño web. Este programa funciona con un enfoque basado en objetivos y te ayuda a comprender las aplicaciones en el mundo real de lo que aprendes. Consigues construir un sitio web en lugar de limitarte a completar módulos.
Una vez que hayas terminado estos proyectos, podrás realizar un curso de tutoría online que te otorgará un certificado al finalizarlo. La matrícula completa cuesta 3.950 dólares, pero hay opciones de financiación flexibles y planes de pago a plazos.
Resumen
El HTML seguirá siendo la columna vertebral del diseño web en un futuro próximo. Un buen conocimiento de estos conceptos puede incluso ayudarte a crear tu propio sitio web de WordPress a partir de HTML.
Cuando llegue el momento de embarcarte en la creación de un nuevo sitio web, vas a necesitar un alojamiento web sólido. Si estás pensando en crear un sitio web con WordPress, ponte en contacto con Kinsta hoy mismo para programar una demostración y descubrir por qué más de 24.000 empresas han confiado su presencia online a nuestro servicio de alojamiento gestionado de primera calidad.
