HTML representa las iniciales de Hypertext Markup Language, siendo el núcleo lingüístico que impulsa la World Wide Web. En sus inicios, fue concebido como una herramienta para dotar de significado a documentos científicos; sin embargo, ha evolucionado para estructurar los cimientos de portales digitales y aplicaciones en línea.
Un ejemplo ilustrativo: HTML se erige como el método para definir el componente titular de un documento, identificar elementos listados y dar forma a imágenes. De igual manera, posibilita la vinculación de palabras, la inserción de gráficos, la modificación de la tipografía e incluso más allá.
En el lejano 1989, Tim Berners-Lee dio a luz a este concepto. En la actualidad, HTML tiñe el 94 % de todos los sitios web existentes, una presencia que abarca prácticamente cada rincón de la red que recorres.
Tal como se ha mencionado previamente, HTML es una abreviatura que desglosamos de forma minuciosa. Hypertext, traducido como hipertexto, engloba un texto que contiene referencias a otros textos o páginas, frecuentemente denominados hipervínculos. Estos hipervínculos actúan como portales que nos transportan a diversas partes de la web con un simple clic. Ya no estamos limitados a la lectura lineal impuesta por el autor, como se experimenta en la versión impresa. Mediante los hipervínculos, tenemos la capacidad de saltar a diferentes secciones de la misma página, explorar otros confines del sitio actual o adentrarnos en territorios completamente nuevos.
La conexión de información bajo este paradigma transformó la esencia de la web. HTML e internet, juntos, han materializado la posibilidad de que cualquier individuo acceda a una vasta gama de información global, dispuesta en el orden que se antoje.
Por otro lado, el término markup, traducido como marcado, hace referencia a cómo HTML «etiqueta» la página mediante anotaciones insertas en el propio archivo HTML. Si bien estas anotaciones no se exponen en la página web, su función opera en segundo plano, otorgando instrucciones a los navegadores sobre la presentación del documento a los visitantes. En breve, nos adentraremos en estos conceptos de forma más exhaustiva.
Finalmente, el término language, idioma en español, representa el aspecto más comprensible. Tal como cualquier lenguaje, HTML se compone de una sintaxis y un alfabeto distintivos. No obstante, nos planteamos qué tipo de lenguaje representa. Esta incógnita será desentrañada a continuación.
¿Cuál es el propósito del lenguaje HTML?
HTML tiene un propósito fundamental: construir sitios web cautivadores. Gracias a su naturaleza de código abierto y su compatibilidad impecable con los navegadores contemporáneos, HTML emerge como una herramienta gratuita y segura que garantiza que tus palabras, imágenes y otros elementos se muestren de manera excepcional.
Mediante HTML, no solo moldeas tus documentos con títulos, párrafos, listados y otros componentes, sino que también integras sinfín de recursos multimedia, tales como imágenes, vídeos y archivos de audio, a través de enlaces hipertexto. Adicionalmente, enlazar con otras páginas, ya sea dentro de tu propio sitio web o desde otros dominios, se convierte en una brisa. Este proceso facilita a los visitantes explorar con fluidez tu espacio digital y navegar sin esfuerzo entre diferentes servidores.
Aun después de adicionar encabezados, imágenes y enlaces, te encontrarás con una página web en su forma más elemental, lo cual es completamente intencional. La esencia de HTML radica en construir un cimiento sencillo sobre el cual puedan incorporarse hojas de estilo en cascada, conocidas como CSS, y JavaScript (JS). Por medio del CSS, personalizas el estilo y diseño, alterando colores, tipografías y la alineación de cada componente. La conjunción del CSS y JS añade funciones dinámicas, tales como ventanas emergentes y elegantes carruseles de imágenes.
A parte de la creación de páginas web, el universo de aplicaciones de HTML se expande. Descubre cómo puedes utilizarlo para:
- Generar tablas para estructurar datos de manera ordenada
- Crear formularios que recojan información del usuario, gestionen transacciones, reservas o solicitudes
- Diseñar correos electrónicos atractivos y funcionales con la magia de HTML
Ya sea que tu objetivo sea edificar páginas web, elaborar tablas organizativas, formularios interactivos o mensajes electrónicos vistosos, necesitarás cultivar tus habilidades en la escritura de HTML.
Guía para Escribir en HTML
HTML, en su esencia, es una estructura compuesta por etiquetas y atributos que da vida a las páginas web.
Etiquetas en HTML
Las etiquetas son las que definen los elementos en HTML. La mayoría de estos elementos tienen tanto una etiqueta de apertura como una de cierre. Las etiquetas de apertura preceden al contenido y tienen el nombre del elemento entre los símbolos de menor que «<» y mayor que «>». Por otro lado, las etiquetas de cierre son iguales a las de apertura, pero con una barra inclinada que antecede al nombre del elemento. Estas etiquetas permiten crear distintos componentes que se mostrarán en las páginas web, como la configuración del color de fondo.
Imaginemos que deseamos incorporar un párrafo a nuestro sitio web, y el texto que queremos usar es «Esto es un párrafo». Para ello, empleamos las etiquetas de párrafo HTML: <p></p>. Como resultado, el código HTML se vería de la siguiente forma:
<p>Esto es un párrafo.</p>
Estos tres elementos son los pilares para crear un párrafo en HTML. En su mayoría, los elementos en HTML siguen esta estructura: etiqueta de apertura, contenido y etiqueta de cierre. No obstante, existen elementos como <br> (salto de línea) que solo requieren una etiqueta de apertura, por lo que se llaman etiquetas vacías.
Cabe mencionar que los nombres de los elementos no distinguen entre mayúsculas y minúsculas. Esto significa que se pueden escribir en cualquier formato, ya sea en mayúsculas, minúsculas o una combinación de ambas. Por ejemplo, la etiqueta <p> también puede escribirse como <P>. Sin embargo, es recomendable seguir la práctica de usar minúsculas para los nombres de los elementos.
Atributos en HTML
El propósito principal de HTML es estructurar contenido. Aunque todos los elementos HTML requieren etiquetas, no todos necesitan atributos. Los atributos añaden información adicional sobre un elemento HTML, y esta información puede ser esencial o opcional.
Por ejemplo, una imagen siempre necesita un atributo «src» que indique la URL de la imagen o la ruta del archivo. Sin este atributo, el navegador no sabrá qué imagen mostrar. Lo mismo sucede con los enlaces: el elemento «a» (ancla) necesita un atributo «href» que especifique el destino del enlace. Si falta este atributo, al hacer clic en el enlace, el navegador no redirigirá al visitante a ninguna parte.
Aunque no es obligatorio incluir otros atributos, se considera una práctica recomendada. Por ejemplo, un navegador puede mostrar una imagen sin el atributo «alt», que proporciona un texto alternativo para la imagen. No obstante, las personas con discapacidad visual no podrán comprender la imagen sin una descripción alternativa.
Ahora que comprendemos la importancia de los atributos, es fundamental saber cómo identificarlos y utilizarlos. Los atributos siempre se encuentran en las etiquetas de apertura de los elementos HTML y siguen la sintaxis: nombre=valor o name=value.
Cada elemento puede tener su propio conjunto de atributos que influyen en la forma en que se muestra el contenido en la página. Los atributos pueden escribirse en cualquier orden dentro de la etiqueta de apertura. Sin embargo, es esencial evitar repetir el mismo atributo varias veces en una misma etiqueta HTML.
Antes de adentrarnos en cómo crear un archivo HTML, es crucial comprender las herramientas necesarias para llevar a cabo esta tarea.
Cómo Utilizar HTML de Manera Efectiva
Dominar el uso de HTML puede marcar la diferencia en tu experiencia de desarrollo web. Aquí te presentamos una guía detallada para comenzar en este emocionante mundo.
Paso 1: Equiparte con la Herramienta Adecuada
Antes de sumergirte en el mundo del HTML, necesitarás una herramienta confiable para escribir tu código. Asegúrate de tener un editor de texto a mano. Una excelente opción es Notepad++, aunque también puedes optar por SublimeText para una experiencia más enriquecedora.
Paso 2: SublimeText – Tu Compañero en este Viaje
Si estás buscando un editor que funcione tanto en Mac como en Windows, SublimeText es tu respuesta. Dirígete al sitio web oficial y descarga la versión más reciente que se ajuste a tu sistema operativo. Una vez completada la descarga, procede a descomprimir el archivo descargado. Dentro encontrarás el tesoro: el ejecutable de SublimeText. Doble clic y ¡voilà!, el mundo de la codificación está a tus pies.
Paso 3: Sumergiéndote en el Código
Ha llegado el momento de sumergirse en el código HTML. No te preocupes, no necesitas ser un experto desde el principio. Copia el siguiente fragmento de código y pégalo en la ventana de SublimeText.
Paso 4: Guardando tu Obra Maestra
El arte que estás creando merece ser preservado. Dirígete a la esquina superior izquierda, haz clic en «Archivo» y selecciona «Guardar como». Aquí es donde tu creatividad cobra vida: nombra el archivo como «index.html». Siéntete libre de elegir el destino, ya sea en tu escritorio para un acceso rápido o en una carpeta de tu elección.
Paso 5: El Gran Debut – Visualiza tu Creación
La anticipación crece mientras te preparas para ver tus logros en acción. Abre tu navegador favorito y arrastra el archivo «index.html» hacia la ventana. ¿Ves cómo cobra vida tu creación? Si lo prefieres, puedes optar por hacer doble clic en el archivo o hacer clic derecho y seleccionar «Abrir». ¡Tu sitio está a solo un clic de distancia!
Descubriendo la Magia de la Creación de un Archivo HTML
Si deseas dar vida a un sitio web a través del arte del HTML, tu primer paso es la creación de un archivo HTML. Dentro de este archivo yace la esencia misma del código que dará forma a tu sitio, y este archivo se alojará en el refugio de tu servidor web. Así, cuando un curioso navegante busque la entrada a tu rincón en línea, el servidor desplegará el archivo HTML ante el ojo inquisitivo del visitante, y el navegador se encargará de tejer la experiencia visual.
Mantente junto a nosotros mientras desglosamos este proceso en pasos concretos, diseñados para acomodar incluso a los novatos en esta travesía digital.
El Acto Inicial: Incluir la Declaración <!DOCTYPE>
Todo relato comienza con una declaración, y en el mundo del HTML, esa declaración toma la forma de <!DOCTYPE html>. Como el telón que se alza al principio de una obra maestra, esta declaración marca el comienzo de tu creación.
El Lienzo: Añadir el Elemento <html>
Dentro del lienzo digital, el elemento primordial es el <html>. Como si fuese la esencia misma del lenguaje que utilizarás para narrar tu historia digital, este elemento sirve como la columna vertebral de tu creación. Ubicado bajo el telón inicial, lo acompañará su contraparte de cierre, </html>.
La Voz en la Multitud: Indicar el Atributo del Idioma
Cada historia merece ser contada en su propio idioma. Del mismo modo, dentro de la etiqueta <html>, resuena el atributo del idioma, lang. Este sencillo adorno no solo guía a los lectores de pantallas en su viaje, sino que también revela la accesibilidad de tu rincón digital. Sin esta guía, las voces electrónicas se enredarán en un laberinto de lenguajes, y la pronunciación errática será su destino.
Dado que el acto que representamos es en español, declaramos el atributo lang como «es».
El Preludio: Agregar la Sección de la Cabeza y el Cuerpo
Una creación digital es como una sinfonía en dos movimientos. La primera parte es la sección de la cabeza, donde los misterios se desvelan solo para los ojos de los entendidos. La segunda es la sección del cuerpo, donde la narrativa se despliega en todo su esplendor visual. Añade estas secciones al compás de tu creatividad, entre las etiquetas <html> y </html>.
El Título Revelado: Anunciar en la Sección de la Cabeza
En la sección de la cabeza, el telón se alza nuevamente, y en el centro del escenario, el título se presenta. Este es el nombre que das a tu creación. En nuestro ejemplo, el título proclamado es «Mi Rincón Digital». Sus palabras están envueltas en la elegancia de las etiquetas <title></title>.
La Paleta Creativa: Infundir Estilo a Través de las Etiquetas <style>
Un artista nunca está completo sin su paleta de colores, y en el mundo del HTML, esto se logra con las etiquetas <style></style>. Aquí es donde los trazos de tu creatividad se encuentran con el lienzo digital. Dentro de estas etiquetas, el CSS cobra vida, otorgando estilo a tu creación. Permítenos introducir un marcador de posición para este ejemplo. Los comentarios en el lenguaje de estilo y en el lenguaje de la web son tus aliados en esta travesía.
Cabe mencionar que en algunas historias digitales, no encontrarás el toque de estilo directamente en la trama, pero en cambio, descubrirás un enlace a un elegante pergamino de estilo en la sección principal.
El Corazón de la Narrativa: Tejer Elementos en la Sección del Cuerpo
En la sección del cuerpo, se despliega el corazón de tu historia digital. Aquí, un título toma forma con las etiquetas <h1></h1>, mientras que un párrafo cobra vida entre las etiquetas <p></p>.
Y así, como un escriba antiguo infundiendo tinta en pergamino, completamos esta narrativa digital. Recuerda, aunque la sangría es un mero adorno en este teatro digital, otorga claridad y estructura a las líneas entrelazadas. Tu historia es ahora tuya para tejer y explorar en el vasto mundo en línea.
