USD
UYU
Si eres un emprendedor que querés iniciar un negocio en Internet, debes conocer qué son y cómo funcionan los códigos HTML para páginas web.
Si bien existen formas más accesibles de diseñar un sitio web, cómo utilizar un Constructor de sitios donde podés personalizar una plantilla predefinida arrastrando, moviendo y editando a tu gusto, entender cómo funcionan los distintos lenguajes de programación te permitirá diferenciarte de tus competidores a la hora de diseñar tu sitio.
Introducción a HTML
HTML fue inventado por Tim Berners-Lee, un físico del instituto de investigación CERN en Suiza. Se le ocurrió la idea de un sistema de hipertexto basado en Internet y publicó la primera versión de HTML en 1991. Desde entonces, cada nueva versión del lenguaje HTML viene con nuevas etiquetas y atributos para el marcado.
También cabe destacar que HTML es considerado ahora un estándar oficial de la web. El World Wide Web Consortium (W3C) mantiene y desarrolla las especificaciones de HTML, además de proporcionar actualizaciones periódicas.
El Lenguaje de Marcado de Hipertexto (HTML) es un lenguaje de marcado utilizado para crear sitios web. Este lenguaje utiliza etiquetas HTML para estructurar las páginas web, de modo que tengan un encabezado, un cuerpo, una barra lateral y un pie de página.
Las etiquetas HTML también se utilizan para dar formato al texto, incrustar imágenes o atributos, crear listas y enlazar a archivos externos. Esta última función permite modificar el aspecto de la página incrustando archivos CSS y otros objetos.
Es importante utilizar las etiquetas HTML adecuadas, ya que una estructura incorrecta puede romper el sitio web y, lo que es peor, puede que los motores de búsqueda no sean capaces de leer la información presentada dentro de las etiquetas.
En este artículo, repasaremos los fundamentos de HTML, incluyendo su funcionamiento, sus ventajas y desventajas, y su relación con CSS y JavaScript.
Las etiquetas y elementos HTML más utilizados
Actualmente, existen 142 etiquetas HTML que nos permiten crear diversos elementos. Aunque los navegadores modernos ya no soportan algunas de estas etiquetas, aprender los diferentes elementos disponibles sigue siendo beneficioso.
En esta sección hablaremos de las etiquetas HTML más utilizadas y de dos elementos principales: los elementos de bloque y los elementos en línea.
Elementos de bloque
Un elemento de bloque ocupa todo el ancho de la página. Siempre comienza una nueva línea en el documento. Por ejemplo, un elemento de encabezado estará en una línea separada de un elemento de párrafo.
Todas las páginas HTML utilizan estas tres etiquetas:
- La etiqueta <html> es el elemento raíz que define todo el documento HTML.
- La etiqueta <head> contiene información meta como el título y el conjunto de caracteres de la página.
- La etiqueta <body> encierra todo el contenido que aparece en la página.
<html><head><!-- INFORMACION META--></head><body><!-- CONTENIDO DE LA PAGINA --></body></html>Otras etiquetas de bloque populares son:
- Etiquetas de encabezado. Estas van desde <h1> a <h6>, donde h1 es el tamaño más grande, disminuyendo a medida que se avanza hasta el h6.
- Etiquetas de párrafo. Todas se encierran utilizando la etiqueta <p>.
- Etiquetas de listas. Tienen distintas variaciones. Usa la etiqueta <ol> para las listas ordenadas y <ul> para las no ordenadas. Luego, encierra los elementos individuales de la lista con la etiqueta <li>.
Elementos en línea
Un elemento en línea da formato al contenido interno de los elementos de bloque, agregando por ejemplo enlaces y texto enfatizado. Los elementos en línea se utilizan sobre todo para dar formato al texto sin romper el flujo del contenido.
Por ejemplo, una etiqueta <strong> muestra un elemento en negrita, mientras que la etiqueta <em> lo muestra en cursiva. Los hipervínculos también son elementos en línea que utilizan una etiqueta <a> y un atributo href para indicar el destino del enlace:
<a href="https://ejemplo.com/">Haz click aquí</a>¿Cómo funciona HTML?
Con HTML, los desarrolladores web consiguen crear y estructurar secciones, párrafos y enlaces mediante elementos, etiquetas y atributos.
Estos son algunos de los usos más comunes de HTML:
- Desarrollo web. Los desarrolladores utilizan el código HTML para diseñar la forma en que un navegador muestra los elementos de la página web, como el texto, los hipervínculos y los archivos multimedia.
- Navegación por Internet. Los visitantes pueden navegar fácilmente y seguir enlaces entre páginas y sitios web relacionados, ya que el HTML se utiliza en gran medida para incrustar hipervínculos.
- Documentación web. HTML permite organizar y dar formato a los documentos, de forma similar a Microsoft Word.
Un sitio web normal incluye varias páginas HTML diferentes. Por ejemplo, una página de inicio, una página de presentación y una página de contacto tienen archivos HTML distintos.
Los documentos HTML son archivos que terminan con una extensión .html o .htm. El navegador web lee el archivo HTML y muestra su contenido para que los usuarios de Internet puedan verlo.
Todas las páginas HTML cuentan con una serie de elementos HTML, formados por un conjunto de etiquetas y atributos. Los elementos HTML son los bloques de construcción de una página web. Una etiqueta indica al navegador dónde empieza y termina un elemento, mientras que un atributo describe las características de un elemento.
Las tres partes principales de un elemento son:
- Etiqueta de apertura. Se utiliza para indicar dónde comienza a tener efecto un elemento. Esta se envuelve con corchetes de apertura y cierre. Por ejemplo, usa la etiqueta de apertura <p> para crear un párrafo.
- Contenido. Es el resultado que ven los demás usuarios.
- Etiqueta de cierre. Igual que la de apertura, pero con una barra inclinada antes del nombre del elemento. Por ejemplo, </p> para terminar un párrafo.
La combinación de estas tres partes creará un elemento HTML:
<p>Así es como se añade un párrafo en HTML.</p>Otra parte fundamental de un elemento HTML es su atributo, que tiene dos secciones: un nombre y un valor de atributo. El nombre identifica la información adicional que el usuario quiere añadir, mientras que el valor del atributo da más especificaciones.
Por ejemplo, un elemento de estilo que añada el color púrpura y la tipografía verdana tendrá el siguiente aspecto:
<p style="color:purple;font-family:verdana">Así es como se añade un párrafo en HTML.</p>Otro atributo, la clase, es el más importante para el desarrollo y la programación. El atributo class añade información de estilo que puede funcionar en diferentes elementos con el mismo valor de class.
Por ejemplo, usaremos el mismo estilo para un encabezado <h1> y un párrafo <p>. El estilo incluye el color de fondo, el color del texto, el borde, el margen y el relleno, bajo la clase .important. Para obtener el mismo estilo entre <h1> y <p>, añada class=’important’ después de cada etiqueta de apertura:
<html><head><style>.important { background-color: blue; color: white; border: 2px solid black; margin: 2px; padding: 2px;}</style></head><body><h1 class="important">Esto es un título.</h1><p class="important">Esto es un párrafo.</p></body></html>La mayoría de los elementos tienen una etiqueta de apertura y otra de cierre, pero algunos elementos no necesitan las de cierre para funcionar, como los elementos vacíos. Estos elementos no utilizan una etiqueta de cierre porque no tienen contenido:
<img src="/" alt="Image">Esta etiqueta de imagen tiene dos atributos: un atributo src, la ruta de la imagen, y un atributo alt, el texto descriptivo. Sin embargo, no tiene contenido ni etiqueta final.
Por terminar, todo documento HTML debe comenzar con una declaración <!DOCTYPE> para informar al navegador sobre el tipo de documento. Con HTML5, la declaración pública doctype HTML será:
<!DOCTYPE html>Evolución de HTML: ¿Cuál es la diferencia entre HTML y HTML5?
La primera versión de HTML constaba de 18 etiquetas. Desde entonces, cada nueva versión trajo nuevas etiquetas y atributos añadidos al marcado. La actualización más significativa del lenguaje hasta ahora fue la introducción de HTML5 en 2014.
La principal diferencia entre HTML y HTML5 es que este último admite nuevos tipos de controles de formulario. HTML5 también introdujo varias etiquetas semánticas que describen claramente el contenido, como <article>, <header> y <footer>.
Ventajas y desventajas de HTML
Como cualquier otro lenguaje informático, HTML tiene sus puntos fuertes y sus limitaciones.
Ventajas:
- Para principiantes. HTML tiene un marcado limpio y consistente, así como una curva de aprendizaje poco pronunciada.
- Soporte. El lenguaje es muy usado, con muchos recursos y una gran comunidad de apoyo.
- Accesible. Es de código abierto y completamente gratuito. HTML se ejecuta de forma nativa en todos los navegadores web.
- Flexible. HTML es fácilmente integrable con lenguajes backend como PHP y Node.js.
Desventajas:
- Estático. Este lenguaje se utiliza principalmente para páginas web estáticas. Para una funcionalidad dinámica, puede ser necesario utilizar JavaScript o un lenguaje de back-end como PHP.
- Página HTML independiente. Los usuarios tienen que crear páginas web individuales para HTML, aunque los elementos sean los mismos.
- Compatibilidad con los navegadores. Algunos navegadores tardan en adoptar nuevas funciones. A veces, los navegadores más antiguos no reproducen las nuevas etiquetas.
¿Cómo se relacionan HTML, CSS y JavaScript?
El HTML se utiliza para añadir elementos de texto y crear la estructura del contenido. Sin embargo, no es suficiente para construir un sitio web profesional y totalmente responsivo. Por eso, HTML necesita la ayuda de las Hojas de Estilo en Cascada (CSS) y de JavaScript para crear la mayor parte del contenido del sitio web.
El CSS es responsable de estilos como el fondo, los colores, el diseño, el espaciado y las animaciones. Por otro lado, JavaScript añade funcionalidades dinámicas como sliders, pop-ups y galerías de fotos. Estos tres lenguajes son los fundamentos del desarrollo front-end.
HTML en WordPress
Sabiendo que más del 40% de las páginas web que existen en el mundo utiliza WordPress, es muy probable que te estes preguntando: ¿Se llevan WordPress y HTML? ¿Cómo puedes aprovechar este lenguaje de marcado en este gestor de contenidos?
Dentro de las funcionalidades de WordPress, es posible añadir código HTML personalizado en entradas, páginas y widgets. También puedes editar temas directamente, pero esto último no es recomendable a menos que tengas un tema hijo en WordPress sobre el cual trabajar. En todo caso, hay varios lugares donde puedes utilizar HTML en WordPress.
Aprendé HTML y mejorá tus conocimientos
Aprender sobre HTML es un gran primer paso para quienes quieren convertirse en desarrolladores web.
Hay un montón de cursos disponibles online para aprender a programar, pero hemos enumerado tres de las mejores plataformas de cursos sobre HTML:
- W3Schools. Tiene recursos, ejemplos y ejercicios para aprender HTML básico de forma gratuita. También hay un tutorial de HTML a tu ritmo que cuesta 95 dólares y proporciona un certificado oficial.
- Codecademy. Ofrece cursos introductorios gratuitos con tutoriales interactivos. Codecademy utiliza una pantalla dividida que muestra automáticamente el resultado de tu código en un archivo HTML. Hay contenido exclusivo disponible por 19,99 dólares al mes.
- Coursera. Ofrece varios cursos con explicaciones detalladas y ejemplos de la vida real. El precio de la suscripción es de 49 dólares al mes y hay una prueba gratuita de 7 días para empezar.
Conclusión
HTML es un lenguaje amigable para principiantes y se utiliza principalmente para páginas web estáticas. HTML funciona mejor junto con CSS para el estilo y JavaScript para la funcionalidad.
