A finales de los años 1980, Tim Berners-Lee desarrolló los fundamentos de Internet mientras trabajaba en un proyecto interno en la Organización Europea para la Investigación Nuclear (CERN) que debía permitir el intercambio transnacional de información en su red de laboratorios, distribuida entre Francia y Suiza. Como base de esta infraestructura, el informático utilizó el lenguaje de hipertexto, un tipo de escritura que transmite información mediante hipervínculos (hyperlinks) y se escribe con lenguajes de marcado como el Hypertext Markup Language o HTML, desarrollado por Berners-Lee expresamente para el proyecto.

Junto a otros componentes como el protocolo de transferencia HTTP, el localizador URL, así como los navegadores y los servidores web, HTML constituye, aún tres décadas después, la piedra angular de la interconexión digital global. Esto hace que aprender a utilizar este lenguaje web se cuente entre los primeros deberes de cualquier desarrollador. En este tutorial de HTML se han recopilado los principios básicos de este lenguaje de marcado, así como algunos consejos de HTML para principiantes, para que tus primeros pasos en el mundo del desarrollo web sean firmes y tus conocimientos sólidos.

¿Qué es HTML?

El lenguaje de marcado de hipertexto hace parte de aquellos lenguajes informáticos que las máquinas pueden entender y que facilitan la interacción con el hombre. Marcándolos como tales, HTML permite definir y articular titulares, párrafos, listas, tablas o gráficos en una web, de tal forma que cualquier navegador que pueda interpretar el código puede mostrar visualmente cada elemento. Mediante los metadatos, HTML también puede proporcionar información adicional, como por ejemplo, sobre el autor. Hoy día, y al contrario de lo que ocurría en sus inicios, HTML solo se usa para estructurar la página internamente y no para definir su aspecto visual, algo de lo que se ocupan lenguajes como CSS (Cascading Style Sheets).

HTML se desarrolló a partir del hoy ya casi desaparecido metalenguaje SGML (Standard Generalized Markup Language), estándar ISO reconocido (8879:1986) del que heredó su forma de escribir. Esta escritura se basa en definir cada elemento con un par de etiquetas o tags rodeadas por corchetes angulares, compuesto por la de inicio <> y la de cierre </>. Algunos elementos no requieren de esta última, como el <br>, que además carece de contenido. Además de las etiquetas, los siguientes atributos de HTML también recuerdan a su predecesor:

Declaración del tipo de documento: aquí se proporciona información sobre la versión de HTML utilizada, como, por ejemplo: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Empleo de entidades HTML: los signos de puntuación, los caracteres con tilde o los símbolos especiales se traducen en entidades HTML para poder visualizarse en el navegador (p. ej., ñ para "ñ" o é para "é").

Comentarios: los comentarios ocultos para el navegador pero visibles para los programadores se integran con la etiqueta

Atributos: los atributos amplían la definición de los elementos y siguen el esquema <etiqueta atributo="variable">

Qué software necesitas para escribir código HTML

En los inicios de nuestro breve curso de HTML es menester aclarar de qué manera se puede escribir HTML y qué aportan las diferentes opciones, puesto que, por un lado, al no tener grandes requisitos, es suficiente con disponer de un simple editor de texto como el que se encuentra en cualquier sistema operativo y, por el otro, es verdad que algunas aplicaciones especiales ofrecen algunas facilidades a la hora de escribir. Dicho esto, ¿cuál es la mejor alternativa si se quiere aprender a escribir HTML?

Editor de texto

No es necesario disponer de ningún software especial para escribir un código HTML limpio y ordenado. Un editor de texto como Notepad de Windows o su equivalente en Mac, TextEdit, en texto sin formato, es suficiente. Este programa no permite cambiar el aspecto del texto, tarea que recae directamente en el código HTML. En teoría se podrían utilizar también procesadores de texto como Microsoft Word u OpenOffice Writer, pero no tiene mucho sentido hacerlo si se quiere aprender HTML, porque no se van a utilizar todas sus funciones, las cuales, además, podrían frenar el proceso de aprendizaje. En definitiva, para aprender a escribir HTML, la decisión más acertada es utilizar un editor de textos al uso como el que se encuentra instalado en cualquier sistema operativo.

Editores de HTML

Un paso intermedio entre los editores de texto y los programas más complejos lo constituyen aquellos editores con una funcionalidad más completa que incluye, por ejemplo, la de destacar cromáticamente las etiquetas, de modo que proporciona una visión general muy clara sobre el código que se ha escrito y permite, así, detectar errores sintácticos más rápidamente. Otra función estándar muy útil es la de autocompletar, que propone formas de ampliar o completar las etiquetas, incluso cerrándolas automáticamente. Muchos editores disponen, además, de una función de vista preliminar que permite ir comprobando el resultado de lo que se lleva escrito.

Para los usuarios de Windows, un editor de texto muy recomendable es Notepad++, de código abierto y distribuido con licencia General Public, mientras que los usuarios de sistemas unixoides pueden recurrir a la solución gratuita Vim.

Editores con visualización en tiempo real

Una alternativa muy atractiva, hoy incluida en casi la mayor parte de sistemas de gestión de contenidos y de diseño de páginas web, consiste en utilizar los editores conocidos como WYSIWYG, que permiten escribir viendo el resultado en tiempo real. Las siglas equivalen a "What You See Is What You Get" ("Lo que ves es lo que obtienes") y es el principio que fundamenta a estos programas, desarrollados con el objetivo de permitir crear código HTML sin conocimientos sobre lenguaje de marcado. Funcionando de forma parecida a como lo hace un procesador de textos, el texto se articula utilizando las funciones predeterminadas disponibles en el menú, sin tener que escribir manualmente las etiquetas, que el editor genera en un segundo plano. Esto tiene, sin duda, sus ventajas, pero no a la hora de aprender HTML, incluso aunque se pueda acceder en todo momento a la vista de código. BlueGriffon o Dreamweaver de la casa Adobe son dos de las muchas opciones de editores con vista preliminar en tiempo real.

Otras alternativas

Por último, tenemos soluciones que nos facilitan ciertas empresas para realizar paginas web de forma fácil y muy intuitiva. Ademas, ofrecen ya el alojamiento para dicha pagina web en Internet. Se basa en editores a través de páginas web que permiten la publicación rápida y fácil de contenidos. Como contrapartida decir que no son totalmente personalizables. Algunas alternativas pueden ser Google Sites, Wix o Ionos.

Introducción a HTML: crear la primera página

En el primer paso de nuestro tutorial de HTML mostraremos cómo crear una página sencilla que se podrá visualizar en el navegador. Esta página no es un documento HTML válido, estructurado según determinados estándares de calidad, sino una mera página de prueba. Tanto para la creación de esta página como para el resto de ejemplos contenidos en este manual de HTML básico se toma el editor Notepad++ como herramienta de referencia, de modo que si usas otro programa diferente, tendrás que tener en cuenta que los pasos podrían variar.

Abre el editor y guarda un documento nuevo con el nombre de test. Como formato de archivo escoge "Hypertext markup language file" para que el navegador pueda entender más adelante que se trata de una página de HTML y lo abra como tal. En el caso que utilices el editor de textos simple, selecciona "Todos los archivos" como formato de archivo y la codificación UTF-8. En este editor hay que indicar manualmente que se trata de un documento HTML. Lo haremos guardando el archivo con el nombre test.html.

Este documento debería poder mostrarse en tu navegador haciendo doble clic sobre él, pero como aún no tiene ningún contenido verás una página en blanco. En el siguiente paso añadimos entonces un texto de prueba como "This is my first webpage!" ("Esta es mi primera página web"). Guardamos el documento y lo volvemos a abrir. Deberías ver algo así al abrirlo en el explorador:

HTML básico: cómo estructurar un texto con etiquetas

Así habrás creado una primera página web, incluso sin haber escrito ni una línea de código. Si, de la misma manera, intentas añadir un texto bien articulado con títulos y párrafos, pronto te darás cuenta de que es imposible hacerlo sin etiquetas. Cualquier formato añadido, por ejemplo, con un procesador de texto, desaparecerá de la vista en el navegador cuando abras el documento HTML: los puntos aparte desaparecen, los espacios se eliminan, etc. La solución pasa indefectiblemente por marcar todos los componentes formales de texto como tales mediante los elementos estructuradores adecuados, que no es otra cosa que adentrarnos en el mundo de las etiquetas de HTML.

Definir párrafos con la etiqueta <p>

Este elemento, cuya nomenclatura proviene del inglés "paragraph" ("párrafo") es necesario para crear separaciones por párrafos. Con la etiqueta de inicio <p> se marca dónde comienza el párrafo y con el de cierre </p> dónde acaba. El texto se escribe entre estas dos etiquetas.

En todas las versiones de HTML, excepto en XHTML, el tag de cierre es opcional, aunque conviene acostumbrarse a usarlo no solo durante el aprendizaje sino también porque denota un buen estilo.

Puedes probar a marcar párrafos con la etiqueta <p> en tu página de prueba, añadiendo otra frase ("This is the second paragraph of my first webpage" en este ejemplo o "Este es el segundo párrafo de mi primera página web") a aquella primera y marcándolas con la etiqueta, por ejemplo, así:

<p>This is my first webpage!</p>

<p>This is the second paragraph of my first webpage.</p>

Nota: en realidad no sería necesario separar las frases como hemos hecho aquí, ya que al navegador, que solo es capaz de interpretar las etiquetas, poco le importa cómo lo leamos nosotros. Si se ha escrito así es meramente por una mejor visualización.

Este sería el resultado en la ventana del explorador:

Añadir títulos y subtítulos con la etiqueta <h>

Los títulos también se cuentan entre los elementos básicos de un texto bien estructurado. Gracias a los marcadores estructurales no solo puedes señalar un título como tal sino que también tienes la posibilidad de crear una jerarquía de títulos principales y secundarios. Para ello cuentas con las etiquetas <h1> hasta <h6>, aunque <h1> representa el titular principal de cada subpágina y solo habría que usarlo una única vez, al contrario que todos los demás a partir de <h2>.

Aquí, es importante mantener la jerarquía correcta y no utilizar los diferentes niveles al azar para que tanto el lector como el buscador puedan entender la estructura del texto a partir de los diferentes títulos.

Para añadirle a esta primera página de prueba un título principal y un título secundario puedes utilizar los siguientes comandos:

<h1>Main heading: my first webpage</h1>

<p>This is my first webpage!</p>

<h2>Second heading</h2>

<p>This is the second paragraph of my first webpage.</p>

Nota: al tratarse de un documento HTML muy sencillo sin metadatos, algunos navegadores, como Firefox, no muestran los acentos o caracteres especiales de forma correcta. Para este test sería recomendable utilizar Google Chrome o traducirlos a entidades HTML.

En el explorador se verá de la siguiente manera:

Destacar palabras o fragmentos de texto: <i>, <em>, <b> y <strong>

Entre los elementos básicos de formato de HTML se encuentran también aquellas etiquetas que permiten destacar de alguna forma tanto palabras aisladas como frases o fragmentos de texto, con la finalidad de dirigir el foco de atención del lector a elementos clave de contenido o funcionales y ayudarle a percibirlos. Para acentuar frases, expresiones técnicas, citas o reflexiones en cursiva podemos utilizar las etiquetas <i> (itálica) y <em> (énfasis). No obstante, conviene utilizar con prudencia la cursiva, ya que frena la lectura. Más importantes son, sin embargo, los elementos <b> (negrita) y <strong> (énfasis fuerte), que destacan en negrita aunque con diferencias en cuanto a su utilización. La etiqueta <b> debería utilizarse para marcar aquellos elementos sobre los que se ha de llamar especialmente la atención del usuario, mientras que <strong> está prevista para destacar contenido relevante.

Lo veremos ampliando nuestra página de prueba con algunas etiquetas de formato:

<h1>Main heading: <i>my first webpage</i></h1>

<p>This is my<strong>first</strong>first webpage!</p>

<h2>Second heading</h2>

<p>This is the second paragraph of my <em>first webpage</em>.</p>

<p><b>Note</b>:Typical example for the<b>-tag.</p>

Nota: para que el ejemplo de código HTML del pasaje añadido no se muestre como texto plano hemos traducido los corchetes (< y >) como entidades HTML (< y >). Hay que seguir teniendo en cuenta los acentos y otros caracteres especiales.

Crear listas con las etiquetas <ul>, <ol> y <li>

No solo a la hora de hacer la compra recurrimos a las listas. También en la edición de textos se revelan como un medio muy útil para descongestionar párrafos y optimizar la lectura. Con HTML se pueden crear listas con o sin numeración (con viñetas o puntos) con las etiquetas <ol> ("ordered list"=lista ordenada) o <ul> ("unordered list"=lista desordenada) respectivamente. Para definir los puntos de la lista se utiliza <li>, que solo se puede usar si se combina con las dos etiquetas de listado mencionadas.

Ahora podrás probarlo en tu página de prueba:

<ul> <li>first unordered-list item</li>

<li>second unordered-list item</li>

<li>third unordered-list item</li>

</ul>

Nota: recuerda que puedes escribir el texto que prefieras. En este caso la elección del inglés como idioma de los ejemplos solo tiene motivos editoriales.

El resultado debería parecerse a esto:

Si, por el contrario, quieres crear una lista numerada solo hay que cambiar la etiqueta que define el tipo de lista y marcarla como lista ordenada con <ol>:

<ol> <li>first ordered-list item</li> <li>second ordered-list item </li> <li>third ordered-list item </li> </ol>

Como consecuencia, en lugar de las viñetas aparece una lista numerada:

Presentar información en tablas: <table>, <tr> y <td>

Durante mucho tiempo fue habitual utilizar las tablas de HTML tanto para presentar datos complejos de una forma más sencilla, como también para estructurar por entero el diseño de una página web o para subdividir el texto en varias columnas. Sin embargo, con el aumento de la popularidad de CSS este papel extra de las tablas pasó a un segundo plano, de tal modo que hoy las tablas asumen únicamente la función para lo que fueron pensadas, es decir, la presentación de datos de forma ordenada. Las tablas se componen, por lo menos, de estos tres elementos:

<table>: esta etiqueta marca el inicio y el cierre de una tabla en HTML, aunque por sí sola no informa al navegador de aspectos necesarios para mostrarse como el número de filas o de columnas.

<tr>: con el elemento "table row" (fila de la tabla) se añaden tantas filas a la tabla como sea necesario.

<td>: las columnas completan la estructura básica de una tabla. Para ello necesitamos el tag "table data" (datos de la tabla), que se subordina a una etiqueta <tr>, puesto que, dentro de una fila, se crean varias celdas (una por columna). El contenido de una celda se sitúa entre la etiqueta de inicio <td> y el de cierre </td>.

Creamos a continuación una tabla sencilla para entender la estructura de tabla en HTML. En nuestra prueba se compone únicamente de una línea y dos columnas:

<table> <tr> <td>first data field</td> <td>second data field</td> </tr> </table>

Al mostrar la vista preliminar en el explorador, pronto se detecta que la tabla no se muestra como debería, pues ni se distinguen las dos columnas ni se reconoce siquiera si se trata de una tabla. La explicación es más sencilla de lo que parece y es que, por defecto, las celdas de HTML no tienen borde. Esta característica tan propia de las tablas se marca ampliando la etiqueta <table> con el atributo border y la variable 1, como en nuestro ejemplo:

<table border="1"> <tr> <td>first data field</td> <td>second data field</td> </tr> </table>

Abre ahora tu documento HTML en tu navegador y observa la tabla resultante.

Nota: HTML5 ya no soporta el atributo border, una función que ha asumido CSS.

A pesar de su sencillo formato, HTML también permite destacar los títulos de las columnas. Para ello se ha de marcar la fila correspondiente con la etiqueta <thead> (table head) y marcar las celdas como <th>. Con este código de abajo diseñas una tabla con cuatro filas, tres columnas y títulos:

<thead>

<tr>

<th>Column heading 1</th>

<th>Column heading 2</th>

<th>Column heading 3</th>

</tr>

</thead>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

Componer la estructura interna de una página web con HTML

En el siguiente capítulo de este tutorial de HTML nos ocupamos de la estructura básica de una página web. Los documentos HTML no solo contienen texto, enlaces y otro tipo de contenido como imagen o vídeo, sino también los ya mencionados metadatos, que revelan al navegador, pero también a los crawlers de los buscadores, cómo han de leer la página.

Algunos de estos metadatos son invisibles al usuario que abre una página, pero otros se muestran en la pestaña del título, en el historial o como titular de los resultados del buscador.

Reducido a sus elementos mínimos necesarios, el código básico de una página de HTML en castellano sería algo así:

<!DOCTYPE html>

<title>Learn HTML: The basic framework</title>

</head>

<body>

</body>

</html>

Un documento HTML se compone, según este ejemplo, de las tres secciones DOCTYPE, head (cabecera) y body (cuerpo del documento), aunque el primero, al tratarse de la definición del tipo de documento que viene a continuación, es el único que ha de figurar antes de la etiqueta <html> que encierra el contenido del archivo. DOCTYPE permite indicar a la aplicación que lee el documento qué estándar ha seguido su programador. En este caso es HTML5, un tipo de documento que cualquier navegador puede reconocer y que permite tanto el uso del código actual como los más antiguos, razón por la cual es conveniente utilizarlo, en especial si se está aprendiendo a escribir con HTML.

En la cabecera, enmarcada por la etiqueta <head>, hemos incluido la codificación de caracteres que ha de usar el navegador (meta charset), la metadescripción, relevante para el buscador (meta name="description") o el título de la página web (title), que aparece en la parte superior del navegador. Además de estos, que aunque opcionales son muy recomendables para favorecer una buena valoración por parte del buscador, también se pueden añadir numerosos metadatos. La única excepción la constituye el elemento <title>, puesto que constituye el único obligatorio en un documento HTML, junto a la definición del tipo de documento. Más tarde se añadirá un vínculo al archivo CSS a la cabecera donde están contenidos los aspectos de diseño y formato.

La etiqueta <body> marca lo que el navegador ha de mostrar al usuario.

Nota: las etiquetas para la estructura básica de HTML son opcionales, es decir, podrían, en teoría, no incluirse. En este caso, el navegador crearía de forma automática las etiquetas <html>, <head> y <body> y les subordinaría los elementos correspondientes. Sin embargo, lo normal es crearlas. El desglose facilita la legibilidad del documento, lo cual beneficia especialmente a los principiantes.

Cómo puedes incluir imágenes, vídeos o gráficos en tu página web

No hay duda que el texto es el componente principal de cualquier página web, pero estímulos visuales en la forma de imágenes, fotos o gráficos tienen una gran influencia en la experiencia del usuario, lo que las hace imprescindibles si se aspira a diseñar una buena página. Habitualmente se utilizan estos tres formatos, soportados por todos los navegadores:

JPG: el formato JPG se utiliza para fotos, o gráficos semejantes a fotografías, con un fuerte contraste y una gran diversidad cromática, ya que puede representar más de 16 millones de colores y comprimir considerablemente los archivos, aunque vaya ligado a una pérdida de calidad de la imagen.

PNG: este es el formato de los gráficos y los logos, ya que puede representar entre 256 (PNG8) y 16,7 millones de colores (PNG24) y, al contrario que JPG, comprime sin pérdida cualitativa. Como contrapartida, el archivo es más grande.

GIF: los archivos en formato GIF solo pueden representar 256 colores, aunque son muy utilizados en el desarrollo web porque permite crear pequeñas animaciones, elementos de navegación o gráficos sencillos.

La etiqueta que permite añadir una imagen a un archivo HTML es <img> ("image"=imagen), a la que se añade el directorio donde está almacenada la imagen para que el navegador sepa adónde ha de ir a buscarla. Para ello se utiliza el atributo src, del inglés "source" (fuente), así como la ruta del archivo.

Es recomendable crear una subcarpeta con el nombre "Imágenes" en el directorio del proyecto que también contiene el documento HTML y guardar en ella todas las imágenes que se vayan a utilizar en la web.

La imagen de ejemplo de nuestro tutorial de HTML se llama grafico1.png y se encuentra en la mencionada carpeta "Imágenes". De este modo, la línea de código que deberíamos escribir para integrar este elemento visual en la web sería:

Existen otros atributos de imagen, como la anchura (width), la altura (height) o el texto alternativo, cuyo uso es muy recomendable. Definir el tamaño de la imagen en anchura y altura permite al navegador reservar un espacio para ella ya durante la carga de la página, de tal forma que, durante ese lapso de tiempo y hasta que esté cargada por completo, puede ir mostrando paralelamente otros contenidos menos pesados en la ventana del navegador sin que tenga que concluir el proceso de descarga del archivo de imagen, lo que frenaría la carga de la web en su conjunto.

El atributo alt, por otro lado, permite escribir un texto alternativo para la imagen, que aparece cuando esta no se puede mostrar y que conviene incluir en el repertorio básico de HTML por tres motivos:

Favorece la accesibilidad de la página porque ofrece información sobre la fotografía en caso de problemas de visualización.

Ayuda a los robots de los buscadores a clasificar la imagen y cuenta como contenido extra para su posicionamiento.

Así lo dictan las especificaciones de uso de HTML.

Ampliada con estos atributos que hemos mencionado, la frase de código HTML resultaría así:

Nota: Las variables '960' y '274' para la anchura y la altura corresponden, respectivamente, a la medida original de la imagen gráfica. El navegador calcula automáticamente su equivalencia en píxeles.

Cómo enlazar páginas y contenidos: la importancia de los hipervínculos

Los hiperenlaces o hipervínculos, nombre procedente de la voz inglesa "hyperlink" y popularmente conocidos como "links", son la principal razón del éxito sin precedentes de la world wide web y no pueden faltar en un curso de introducción a HTML. Sin estas referencias electrónicas que conducen al usuario de una a otra página o que inician alguna acción, como podría ser la descarga de un documento, no podría existir una interconexión como la que ofrece la red de redes. Se pueden distinguir tres tipos de enlace:

Internos: los enlaces internos articulan una página web y guían al usuario en su navegación. Esta estructura interna puede tener diversas formas, desde una lineal, por ejemplo, en la cual el usuario puede ir de una subpágina a otra de la web en un determinado orden, a una de tipo arbóreo, en la que el usuario escoge a dónde ir desde la página principal. También es posible utilizar enlaces internos en una misma página, cuya función podría consistir en dirigir al usuario al principio del texto una vez ha llegado al final.

Externos: estos son los vínculos que envían al usuario a otra web y se usan para ofrecerle un valor añadido o recomendar una oferta diferente. En este caso, si se quiere evitar una valoración negativa en el buscador, conviene evitar un exceso de enlaces externos, así como también hay que controlar regularmente la calidad del contenido que se enlaza y el propio funcionamiento del enlace.

Otros enlaces: no todos los vínculos enlazan a documentos HTML. Algunos también refieren a la descarga de un documento, abren el cliente de correo electrónico o activan el visor de PDF.

Enlaces internos: así articulas tu proyecto

Con el tiempo podrás aplicar las nociones adquiridas en este curso de HTML en la estructuración de proyectos más complejos, pero antes comenzaremos enlazando dos páginas. Será necesario que crees otra página que puedas enlazar a aquella primera test.html. Esta nueva página ha de tener un nombre diferente, targetpage.html ("página objetivo"), por ejemplo, y ha de guardarse en el mismo directorio que la primera.

Para generar un vínculo se utiliza la etiqueta de HTML <a>, que deriva de "anchor", ancla en castellano, y cuya función es simplemente indicar que la información enmarcada es un enlace. Esto hace que siempre necesite un atributo, href (hiperreferencia), que señale a dónde dirige en enlace. El texto del enlace que el navegador muestra por defecto en azul y subrayado se escribe enmarcado en la etiqueta <a>.

Incluyendo la siguiente línea de código en la página de prueba la enlazamos a la segunda página (target page):

<a href="targetpage.html">Jump to target page</a>

Si el hipervínculo funciona correctamente debería abrirse una página vacía, ya que aún no se ha realizado ninguna acción en esta segunda página. En el siguiente paso incluimos en esta nueva página otro enlace interno que redirija a la original (previous page):

<a href="test.html">Back to previous page</a>

Nota: si la página a enlazar no se encuentra en el directorio principal hay que indicar la ruta que lleva a la subcarpeta donde está guardada, subcarpeta/targetpage.html. En el enlace a la primera habría que indicar también la subcarpeta y la página: <a href="https://www.ionos.es/digitalguide../test.html">.

Enlazar a contenidos externos

Para crear un enlace externo en una página no se necesita una etiqueta diferente, pero tampoco es necesario saber en qué directorio se encuentra la página a enlazar, puesto que referir a un contenido ajeno solo requiere conocer la dirección web completa o URL donde se encuentra, que ya contiene toda la información necesaria. No obstante, como este contenido no reside en tu propio servidor web no tienes ningún tipo de influencia en la calidad del enlace, por lo que se hace necesaria una revisión regular.

Es importante invertir tiempo en la redacción de un texto preciso y atractivo para el enlace, puesto que palabras vacías como "aquí" proporcionan al usuario muy poca información sobre lo que va a encontrar si hace clic en él.

Prueba incluir un enlace externo en tu página con la siguiente línea de código, que genera un vínculo a nuestra Guía Digital:

<p>HTML tutorial and numerous guides on the topic of websites, hosting, and much more at

<a href=" https://www.ionos.com/digitalguide ">IONOS Digital Guide</a>

</p>

Estos hipervínculos alejan a tus visitas de tu página y aunque pueden regresar pulsando el botón de "vuelta atrás" del navegador (←) no se puede confiar en que lo hagan. Existe, no obstante, la posibilidad de que la página enlazada se abra automáticamente en una pestaña o una ventana nueva, de modo que la primera página (tu página) se mantenga abierta: el atributo target describe en donde se ha de abrir el documento enlazado y con la variable _blank (en blanco) se especifica su apertura en una nueva ventana.

Esto se escribe de la siguiente forma:

<a href="https://www.ionos.com/digitalguide" target="_blank">IONOS Digital Guide</a>

La recta final: lanzar la página online

En esta introducción a HTML, hemos visto cómo crear y enlazar dos documentos HTML, sin embargo, solo has podido ver estas páginas en tu navegador. Si quieres mostrárselas a otras personas verás que no es posible, porque tanto las hojas de HTML, como las imágenes que has incluido en ellas, se encuentran localizados en tu ordenador, por lo que no se pueden entregar al navegador que hace la petición. Si quieres mostrar al mundo tus logros has de registrar el proyecto en la red y contratar el servicio de alojamiento más adecuado para tu proyecto.

El primer paso consiste en encontrar un dominio (dirección web) para el proyecto y registrarlo en un proveedor de Internet como IONOS, que ofrece un servicio online de registro de dominios. Una vez hecho esto, el siguiente paso consiste en proporcionar el fundamento más adecuado al proyecto instalando y configurando un servidor web propio o alquilándolo en un proveedor de alojamiento web, siendo esta última, la opción más indicada para aquellos con menos experiencia. Alquilando un servidor web evitas ocuparte tú mismo de la selección, la instalación y el mantenimientodel software para el servidor, pudiendo escoger el paquete que garantiza el espacio de almacenamiento que necesita tu proyecto.

Finalmente, se han de subir los documentos HTML que componen tu web al espacio web que tienes a tu disposición. Para ello necesitas un programa de transferencia de archivos o FTP (File Transfer Protocol). Este programa cliente permite intercambiar datos con el servidor FTP de tu proveedor mediante el protocolo que le da nombre. En este artículo de nuestra guía presentamos una excelente selección de programas FTP. Toda la información que necesites para acceder al servidor FTP, así como otro tipo de indicaciones o instrucciones, la proporciona el proveedor donde alquilas el espacio web. Ten en cuenta que al subir los documentos al servidor FTP la estructura de archivos no se ve modificada, por lo que merece la pena cuidar este aspecto desde el principio.

CSS y JavaScript: por qué HTML solo es el comienzo

A lo largo de nuestro curso de HTML básico hemos mencionado que si bien este lenguaje constituye el fundamento de toda página web, su papel en el desarrollo web moderno ya no incluye tareas de diseño visual, labor que recae en el lenguaje de hojas de estilo CSS o Cascading Style Sheets. CSS permite definir el color de los distintos elementos de una página, su composición básica o el formato de los pasajes de texto, de los títulos o de otros elementos de contenido, otorgando a las páginas un aspecto visual atractivo y contemporáneo. Esta estricta separación entre contenido (código) y diseño facilita enormemente el análisis y el mantenimiento de los proyectos más complejos. Todo esto hace que sea necesario ocuparse de este lenguaje web una vez ya familiarizados con HTML.

Aún no hemos mencionado otro componente básico del diseño web moderno como JavaScript, con cuya ayuda se incluyen elementos dinámicos en las páginas en HTML que permiten a los usuarios interactuar con la página. Estos pueden ser galerías de imágenes, menús de navegación dinámicos o la descarga de datos externos.

En cualquiera de los casos, los desarrolladores web cuentan con un repertorio de fragmentos de código o code snippets que se pueden integrar fácilmente en las hojas HTML. Aun así, es recomendable desarrollar un cierto grado de comprensión básica de ambos lenguajes de programación para implementarlos correctamente o saber encontrar el error en caso de problemas.

¿Cómo lo llevas?

Veamos un ejemplo con lo que llevamos aprendido

Y aquí puedes ver el resultado de este código en un navegador web:

Cómo insertar audio y vídeo en páginas HTML

Hoy en día estamos acostumbrados a páginas web con vídeo y audio.

La tecnología ha avanzado mucho y es realmente simple trabajar con audio y vídeo en la web.

Aquí vamos a diferenciar dos casos:

Insertar ficheros alojados por ti de audio y video en HTML (normalmente con formatos MP3 y MP4).
Insertar audio y vídeo alojado en otras plataformas de podcasting y vídeo como SoundCloud, iVoox, Youtube, Vimeo y similares.

También quiero recomendarte encarecidamente que uses, en la medida de lo posible, siempre la segunda opción para hacerlo, ya que alojar este tipo de ficheros en tu propio servidor implica un consumo de espacio en disco y ancho de banda muy elevado si tienes un tráfico relevante.

El típico hosting para blogs WordPress, por ejemplo, no está pensado para esto. Por tanto, alojar ficheros audio y video uno mismo debería ser algo que se haga sólo en casos muy especiales que realmente lo justifiquen.

Cómo insertar audio MP3 y otros formatos en HTML

Con HTML 5 nos lo han puesto muy fácil para usar audio en una página web.

Con esta estructura tu página mostrará el típico reproductor de audio con un botón de play, barra de progreso, control de volumen, etc.:

Tu navegador no soporta este elemento de audio.

</audio>

Si te fijas, el elemento clave aquí es source y funciona parecido a img: el atributo src indica la URL con la ubicación del fichero de audio.

En el atributo type tenemos que especificar el tipo de formato de audio utilizado. En el ejemplo viene el más usado, MP3, pero también se admiten los formatos OGG (valor “audio/ogg” para type) y WAV (“audio/wav”).

Fíjate también en el texto de “Tu navegador…” que se ha añadido al elemento audio. Este texto normalmente no se visualizará, es para el caso de navegadores muy antiguos que no soporten este elemento de HTML 5, un escenario que hoy en día prácticamente puedes descartar. Pero, por si las moscas, tienes este recurso.

Cómo insertar video MP4 y otros formatos en HTML

El caso del vídeo es similar en HTML 5:

<<video width="320" height="240" controls>

Tu navegador no soporta este elemento de audio.

</video>

Como ves, este caso es similar al del audio no requiere mucha explicación. Añadir que también se soporta el formato OGG.

Usos típicos de los formularios HTML

Es decir, los formularios HTML hacen posible que un usuario envíe información a una web. El recuadro de Instagram, Facebook o Twitter en el que realizas tus publicaciones son ejemplos de formularios HTML.

Otros ejemplos muy típicos son las secciones de comentarios como en este mismo blog, los formularios en las tiendas online para realizar tus pedidos, formularios de contacto, los popups típicos de los blogs para el alta en una lista de correo, etc.

Ejemplo de formulario HTML: un formulario de contacto

Veamos de nuevo un ejemplo sencillo, un ejemplo de un formulario de contacto en HTML:

<p>Tu nombre:</p>

<p>Tu email:</p>

<p>Asunto de tu solicito:</p>

<p>Texto de tu solicitud:</p>

</form>

Puedes ver una versión real de un formulario así en prácticamente cualquier sitio web.

¿Qué está sucediendo en este ejemplo?

Es muy sencillo: con los elementos input podemos crear campos en la página que recogen la información que el usuario introduce, una información estructurada que puede ser procesada por una máquina.

En este ejemplo de formulario concreto, tenemos cuatro parejas campo – valor:

Nombre – [lo que haya tecleado el usuario]
Email - [lo que haya tecleado el usuario]
Asunto - [lo que haya tecleado el usuario]
Solicitud - [lo que haya tecleado el usuario]

En el momento que el usuario haga clic en el botón del formulario, esta información se envía a la URL especificada en el atributo action de la etiqueta form.

Esta información te la puedes imaginar estructurada como una hoja Excel con dos columnas: una con los nombre de los campos (atributo name de los elementos input) y otra con el valor (lo que el usuario haya tecleado en el formulario).

¿Cómo se procesa un formulario?

Lo que sucede a partir de ahora, en realidad, ya se sale de este post porque ya estamos en el servidor, ya no estamos en la página, la página ya ha hecho su trabajo: enviar al servidor esta información.

Pero te daré unas pinceladas:

Para poder usar el contenido de un formulario enviado por un usuario al servidor, tiene que haber algún tipo de programa que procese esa información.

En el ejemplo anterior, algo típico sería un programa que componga con esta información un correo electrónico y lo envíe a una dirección de email del propietario de la web previamente configurada. Así éste recibirá cómodamente lo que la gente envía desde la web. Eso es lo que hacen básicamente los típicos plugins de formularios de contacto en WordPress, por ejemplo.

Otro ejemplo de un procesado un poco más sofisticado serían los comentarios de un sitio web puesto que éstos (como en WordPress) se graban típicamente en una base de datos y cuando se visualiza esa página se vuelven a cargar de la base de datos. Así esta parte se mantiene dinámica, puede irse añadiendo más y más comentarios.

Usar colores en HTML

Aunque en este post no voy a entrar en el tema diseño de una página web porque requiere uno o varios posts dedicados (abajo te doy referencias), si quiero dar, al menos, algunas pinceladas sobre cómo se trabaja con algo tan fundamental dentro del diseño como lo es el color para los textos, fondos, etc.

Los códigos de colores en HTML

Existen diferentes sistemas para codificar colores. A efectos de la web, nos interesa el sistema RGB (de “Red Green Blue” en inglés, “rojo verde azul” en español) que es como el ojo humano percibe el color (con células fotoreceptoras sensibles a cada uno de estos colores) y el que usan también las pantallas de casi todos los dispositivos.

El fundamento de este sistema es que cualquier color se puede generar combinando con diferentes niveles de intensidad estos tres colores básicos: el rojo, verde y azul. Por razones “informáticas” se suelen usar 256 niveles en cada uno (de 0 a 255, corresponde a un byte).

Por tanto, con este sistema, tenemos un total de 256*256*256 = 16.777.216 combinaciones posibles que resultan en el mismo número de colores diferentes, más de lo que el ojo humano puede distinguir.

De ahí que en los códigos de colores en HTML y, en general cuando se trabaja con colores en un ordenador, se use casi siempre este sistema de codificación del color.

Estos códigos de colores HTML se suelen especificar en tripletes RGB, por ejemplo:

0,0,0: negro oscuro (todos los colores con intensidad cero).
255,255,255: blanco (todos los colores con máxima intensidad).
255,0,0: rojo puro intenso (máxima intensidad para el rojo y cero para el resto).
128,128,0: rojo y verde de mediana intensidad lo que daría un marrón verdoso.
Etc.

Cabe destacar que muchas veces no se usan los números “normales” del sistema decimal a los que estamos acostumbrados y que he usado en los ejemplos anteriores, sino que se usa también mucho el sistema de numeración hexadecimal, lo puedes reconocer porque con frecuencia se le antepone a un número así la almohadilla (#).

Por ejemplo: 255,138,138 en hexadecimal sería #FF8A8A.

Si los números hexadecimales son nuevos para ti, mi consejo es que no los uses y sigas utilizando los números normales.

En cualquier caso, si los necesitas, existen convertidores online como éste que te convierten un color RGB en hexadecimal en un triplete de números decimales.

Tablas y paletas de colores

Todo este sistema está muy bien para los ordenadores, pero tiene el problema de que no es nada intuitivo para humanos. Especialmente si no te dedicas profesionalmente a cuestiones relacionadas con ello, es prácticamente imposible que a partir de una combinación de un triplete como 197,82,203 te puedas imaginar qué color concreto va a resultar de ahí.

Por suerte, existe una infinidad de tablas y selectores de color online que te permiten obtener estos códigos de una manera muy fácil. El HTML Color Picker de W3CSchools que puedes ver arriba, por ejemplo, lo encuentro muy completo.

Otra herramienta indispensable son las paletas de colores.

Esto responde al problema de que no es fácil combinar colores que queden bien, en cambio es muy fácil meter la pata combinando colores que no armonizan bien y dan un resultado feo.

En esto ayudan mucho los esquemas o paletas de colores que proponen una combinación de colores ya hecha, una plantilla podríamos decir, con una combinación que resulta armonioso. La idea es que uses solamente los colores de esa paleta en tu web ya que así podrás estar seguro de un buen resultado estético.

Cómo poner color al texto en HTML

Ahora ya que lo fácil: ponerle color a un elemento HTML.

De manera general, puedes especificar el color de cualquier elemento HTML con el atributo style, con la misma sintaxis usada en este ejemplo:

<h2 style=”color=rgb(13,44,84)”>Título H2 en un azul oscuro</h2>

Del mismo modo puedes usar también valores hexadecimales:

<h2 style=”color=#0D2C54”>Título H2 en un azul oscuro</h2>

La opción que prefieras usar ya es una lección personal.

Cómo poner un color de fondo en HTML

Y esto mismo lo puedes usar también para especificar el color de fondo, en este caso aplicando a atributo anterior a la etiqueta body:

><body style=”color=#FFB400”>

Cómo crear un diseño avanzado para tu página web

En cualquier caso, no te recomiendo hacer lo que hemos hecho en los ejemplos anteriores: ir elemento por elemento especificando el color y muchas otras características como tipo de letra, tamaños, etc. que hay que especificar en un diseño un poco trabajado.

No te lo recomiendo porque es un trabajo ímprobo ir haciendo esto elemento por elemento y, sobre todo, tremendamente ineficiente por ser muy redundante al repetir muchas veces la misma acción.

Imagínate, por ejemplo, tener que aplicar el mismo color cientos de veces al cada párrafo, desesperante, ¿no?

De hecho, esto no es un problema nuevo. Esto ya se daba en los tradicionales editores de texto visuales como Word, OpenOffice, etc.

Aquí ya se inventó la solución a este problema que se utiliza también en HTML: los estilos.

Y éstos abarcan lógicamente no solamente el tratamiento del color, sino todo lo que tiene que ver con la estética y maquetación (la “presentación”) del contenido: tipos de letra, alineación del texto, tamaños y mil cosas más.

Con un “estilo” se define una vez la apariencia de cada elemento. Algo así como lo siguiente:

El fondo de la página debe ser blanco.
Todos los títulos de nivel 1 deben usar el tipo de letra “Open Sans”, tener un tamaño de 24 pixeles, estar alineados a la izquierda y tener un color gris oscuro con código rgb 192,192,192.
Todos los párrafos deben usar el tipo de letra “Verdana”, tener un tamaño de 16 pixeles, estar alineados a la izquierda y tener un color negro claro con código rgb 224,224,224.
Todas las tablas estar centradas en la página, deben tener una cabecera con un fondo gris claro con código rgb 64,64,64, un tipo de letra “Verdana” en negritas, el fondo del resto debe ser blanco, …
Etc., etc., etc.

¿Qué conseguimos?

Que con una definición de estilo así definimos una vez el diseño de nuestro sitio y a partir de ahí, nos podemos olvidar del diseño y centrarnos en crear el contenido, el diseño se aplicará automáticamente según el tipo de elemento del que se trate.

En HTML existe todo un lenguaje propio aparte, independiente de HTML, cuya misión es esto precisamente: las hojas de estilo CSS, Cascading Style Sheets en inglés o CSS a secas.

El lenguaje con el que se describen estas reglas de estilo en CSS es también bastante asequible. No obstante, permite hacer cosas muy sofisticadas que lógicamente ya no son tan triviales, pero el nivel que necesitas realmente en la práctica se mantiene bastante asequible.

ionos.es

Berto López 16 de agosto del 2022

Otras etiquetas

Creación de paginas WEB on line - Google Sites

Page updated

Report abuse