Tutorial básico de HTML: crea tu propio proyecto web
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?
- Qué software necesitas para escribir código HTML
- Introducción a HTML: crear la primera página
- HTML básico: cómo estructurar un texto con etiquetas
- Componer la estructura interna de una página web con HTML
- Cómo puedes incluir imágenes, vídeos o gráficos en tu página web
- Cómo enlazar páginas y contenidos: la importancia de los hipervínculos
- La recta final: lanzar la página online
- CSS y JavaScript: por qué HTML solo es el comienzo
¿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.
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:
<table border="1">
<thead>
<tr>
<th>Column heading 1</th>
<th>Column heading 2</th>
<th>Column heading 3</th>
</tr>
</thead>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</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>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="Here you can find all information about the HTML basic framework">
<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:
<img src="images/graphic1.png" />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í:
<img src="images/graphic1.png" width="960" height="274" alt="Learn HTML: this is how the embedded sample graphic 'click here' appears:" />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 mantenimiento del 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.
Artículos similares
Nociones básicas sobre HTML5
HTML5 es el nuevo lenguaje de Internet, sin embargo hay desarrolladores web que siguen usando lenguajes de hipertexto anticuados, como HTML 4.01 o XHTML, que precisan de numerosos plugins externos que ponen en peligro tanto la compatibilidad como la seguridad de las páginas web. Al contrario, HTML5 hace posible la directa integración de elementos multimedia e interfaces de programación basadas en…
¿Cuáles son las novedades que ofrece HTML 5.1?
Ha pasado mucho tiempo hasta que el anhelado HTML5 viera la luz en otoño de 2014 y ahora, con HTML 5.1, se ha puesto a disposición la primera actualización del estándar web. A este respecto se han dado numerosos cambios, entre los que destaca la adaptación sencilla al diseño web responsivo. Sin embargo, a estos se suman diversas novedades en HTML, como el hecho de que algunos elementos y atributos…
Cómo comprimir CSS y mejorar el rendimiento de una web
Encontrar elementos estructurales directamente en el código HTML no es muy común. Colores, fuentes y tamaños de otros elementos HTML son definidos normalmente en las llamadas hojas de estilo, como por ejemplo CSS. Si se trata de una web compleja, el número de archivos CSS necesarios para su correcto funcionamiento será mayor, lo que puede tener un impacto significativo en el tiempo de carga. Así,…
lucadpShutterstock Compilador e intérprete: definición y diferencias
Con el paso de los años, los lenguajes de programación se han ido simplificando cada vez más con el fin de facilitar su escritura y utilización lo máximo posible. En este sentido, uno de los aspectos más importantes de cualquier lenguaje es optimizar la legibilidad del código escrito. Para que los procesadores informáticos puedan interpretarlo, se requiere un compilador o intérprete que lo…
Tutorial básico de HTML: crea tu propio proyecto web
En la época de los sistemas de gestión de contenidos y plantillas para el diseño web, aprender HTML parece hoy una tarea superflua e innecesaria, y en realidad es todo lo contrario. En cuanto se presentan problemas de funcionamiento en una página o esta requiere la inclusión de elementos dinámicos, se revelará la necesidad de contar con conocimientos en HTML. En este completo tutorial de HTML para…
