Categoría: HTML + CSS + JavaScript

¿Qué es un hipervínculo?

Los hipervínculos son una de las innovaciones más interesantes que ofrece la Web. Han formado parte de esta desde el principio, pero hacen que la web sea web: Los hipervínculos nos permiten vincular documentos a otros documentos o recursos, vincular a partes específicas de documentos o hacer que las aplicaciones estén disponibles en una dirección web. Prácticamente cualquier contenido web se puede convertir en un enlace que, al pulsarlo (activarlo), dirija el navegador a la dirección web a la que apunta el enlace (URL).

Una URL puede apuntar a archivos HTML, archivos de texto, imágenes, documentos de texto, archivos de audio o vídeo, y cualquier otra cosa que se pueda mostrar en la web. Si el navegador no sabe qué hacer con un archivo, te preguntará si lo quieres abrir (en cuyo caso la tarea de abrirlo y leerlo se transferirá a la aplicación nativa instalada en el dispositivo) o si lo quieres descargar (en cuyo caso podrás ocuparte de él más tarde).

Por ejemplo, si observamos cualquier página web en la que se publiquen noticias (la página web de la BBC, por ejemplo), observaremos que contiene una gran cantidad de enlaces que apuntan a multitud de noticias en diferentes apartados (funcionalidad de navegación), secciones de acceso/registro (herramientas de usuario) y otras.

El elemento <a>

The elemento <a> (o elemento ancla) junto con el atributo href , crea a hipervínculo a páginas web, ficheros, correos electrónicos, enlaces dentro de la misma página, o cualquier cosa a la que una URL pueda apuntar. El contenido dentro del elemento <a> debería proporcionar una descripción clara de dónde nos dirigiremos al hacer click.

Los enlaces también proporcionan información implícitamente sobre la actividad de navegación, ya que el estilo de los enlaces cambia según vamos haciendo click en ellos:

• Un enlace no visitado aparece subrayado y con texto azul.
• Un enlace visitado aparece subrayado y en color morado.
• Un enlace activo aparece subrayado y en rojo.

Un enlace básico se crea incluyendo el texto (o cualquier otro contenido), que queramos convertir en un enlace usando un elemento ancla <a>, dándole un atributo href (también conocido como «Hypertext Reference», «target» u objetivo) que contendrá la dirección web hacia dónde queremos que apunte el enlace:

<p>Crea un enlace a
<a href="https://www.mozilla.org/es-ES/">la página de inicio de Mozilla</a>.
</p>

The code above gives as the following result: I’m creating a link to the Mozilla homepage.

Añadiendo información con el atributo «title»

Otro atributo que posiblemente quieras agregar a tus enlaces es title. El título contiene información adicional sobre el enlace, como qué tipo de información contiene la página o cosas que debes tener en cuenta en la página web. Por ejemplo:

<p>Crea un enlace a
  <a href="https://www.mozilla.org/es-ES/"
    title="El mejor lugar para encontrar más información acerca de la misión de Mozilla
           y cómo contribuir">la página de inicio de Mozilla</a>.
</p>

Este código producirá el siguiente resultado (el título se mostrará al pasar el ratón sobre el texto del enlace):

Crea un enlace a la página de inicio de Mozilla.

Debemos tener en cuenta que el título de un enlace solo será visible al pasar el ratón por encima, lo cual significa que los usuarios que naveguen usando los controles de sus teclados, o pantallas táctiles, tendrán dificultades para acceder a la información proporcionada por el título. Si la información del título es verdaderamente importante para el uso de la página, deberemos presentar el título de manera que sea accesible a todos los usuarios, por ejemplo incluyéndola como parte del texto del enlace.

Ejercicio propuesto: Enlaces con información

Crea una página web como la que se muestra a continuación o una similar, mostrando información en español y en inglés. Utiliza encabezados del tipo <h1> y <h2>, y varios párrafos y enlaces a diversas páginas, como las que se indican.

Nota: Deberás utilizar el atributo title para mostrar información sobre cada enlace al pasar el ratón por encima.

• …
• https://es.wikipedia.org/wiki/Castillo_de_Santa_Bárbara (El castillo de Santa Bárbara es un castillo ubicado en el centro de la ciudad española de Alicante, sobre el monte Benacantil)
• https://es.wikipedia.org/wiki/Puerto_de_Alicante (El puerto de Alicante es un puerto marítimo español, situado en la ciudad de Alicante, en el mar Mediterráneo con actividades comerciales, con transporte de mercancías y de viajeros, pesqueras y de recreo)
• https://es.wikipedia.org/wiki/Benacantil (El Benacantil es una elevación rocosa, colindante con el mar, que tuvo un papel clave para la construcción del castillo de Santa Bárbara, y consecuentemente con el desarrollo de la ciudad española de Alicante.)
• …
• https://en.wikipedia.org/wiki/Castle_of_Santa_Bárbara (Santa Bárbara Castle is a fortification in the center of Alicante, Spain)
• https://en.wikipedia.org/wiki/Port_of_Alicante (The Port of Alicante is a seaport in Alicante, Spain on the Mediterranean Sea used for commercial and passenger traffic)
• https://en.wikipedia.org/wiki/Mount_Benacantil (Mount Benacantil is a mount (or rather a large hill) that dominates the urban part of Alicante, and is the characteristic image of the city)
• …

Alicante

Español

Entre las principales características de la ciudad se encuentran el Castillo de Santa Bárbara, ubicado muy por encima de la ciudad, y el Puerto de Alicante. Este último fue objeto de una amarga controversia en 2006-2007 cuando los residentes lucharon, con éxito, para evitar que se convirtiera en un polígono industrial.

El castillo de Santa Bárbara está situado en el Monte Benacantil, con vistas a la ciudad. La torre (La Torreta) en la parte superior, es la parte más antigua del castillo, mientras que parte de la zona más baja y las murallas se construyeron a finales del siglo XVIII.

English

Amongst the most notable features of the city are the Castle of Santa Bárbara, which sits high above the city, and the port of Alicante. The latter was the subject of bitter controversy in 2006–2007 as residents battled, successfully, to keep it from being changed into an industrial estate.

The Santa Bárbara castle is situated on Mount Benacantil, overlooking the city. The tower (La Torreta) at the top, is the oldest part of the castle, while part of the lowest zone and the walls were constructed later in the 18th century.

URLs y rutas

Para comprender completamente a dónde apuntan los enlaces, necesitas conocer las URLs y las rutas. En esta sección proporcionaremos la información que necesitas sobre el tema.

Una URL (de las iniciales en inglés «Uniform Resource Locator») es simplemente una secuencia de caracteres de texto que definen donde está situado algo en la web. Por ejemplo, la página de Mozilla está ubicada en https://www.mozilla.org/es-ES/.

Las URLs utilizan rutas para encontrar los archivos. Las rutas especifican dónde se encuentra el archivo que buscas dentro del sistema de archivos. Veamos un ejemplo de una estructura de directorios (ve el directorio creating-hyperlinks).

Al directorio raíz de esta estructura de directorios lo hemos llamado creating-hyperlinks. Al trabajar en modo local en una web, habrá un directorio que contendrá toda la información. En nuestro ejemplo, dentro de la raíz, encontramos el archivo index.html y el archivo contacts.html. En una web real, index.html es el punto de entrada a la web, lo que se conoce como página de inicio.

Observamos también dos directorios dentro de nuestro directorio raíz que son: pdfs y projects. Cada uno de ellos tiene archivos en su interior — un archivo PDF (project-brief.pdf) y un archivo index.html, respectivamente. Observa que es posible tener sin problemas dos archivos index.htmlen un proyecto siempre y cuando se encuentren alojados en ubicaciones diferentes de nuestra estructura de archivos — muchos sitios web lo hacen. El segundo index.html será la página de inicio para la información relativa a los proyectos.

Mismo directorio

Si queremos incluir un hipervínculo dentro del archivo index.html (el index.html del nivel más alto) que apunte al archivo contacts.html, simplemente especificaremos el nombre del archivo al que hacemos referencia, porque se encuentra en el mismo directorio en el que se encuentra el archivo index.html desde donde lo queremos llamar. Por lo tanto, usamos la URL contacts.html — veamos el código:

<p>¿Quieres contactar con un miembro específico del personal?
Encuentra los detalles en nuestra <a href="contacts.html">página de contactos</a>.</p>

Bajando por la estructura de subdirectorios

Si queremos incluir un hipervínculo dentro del archivo index.html (el index.html de nivel más alto) que apunta a projects/index.html, debemos bajar hasta el directorio projects antes de indicar al archivo al que queremos enlazar. Para ello especificamos el nombre del directorio y le añadimos una barra inclinada hacia adelante, y a continuación el nombre del archivo. Por lo tanto, utilizaremos la URL projects/index.html:

<p>Visita mi <a href="projects/index.html">página de inicio del proyecto</a>.</p>

Subiendo por nuestro sistema de archivos

Si ahora queremos incluir un hipervínculo dentro del archivo projects/index.html que apunte a pdfs/project-brief.pdf, hay que subir un nivel en nuestro sistema de directorios, para luego bajar al directorio pdf. Para «Subir un nivel» utilizamos los dos puntos — (..) — por lo que usamos la URL ../pdfs/project-brief.pdf:

<p>Un enlace a mi<a href="../pdfs/project-brief.pdf"> resumen del proyecto</a>.</p>

Podemos combinar más de una instancia de estas características y generar URLs más complejas, si es necesario, por ejemplo: ../../../ruta/compleja/a/mi/archivo.html.

Ejercicio propuesto: Menú de navegación

Crea un fichero «index.html» que enlace varias ficheros web con un menú de navegación. Este índice puede enlazar todas las páginas que hayas creado antes. Echa un vistazo al ejemplo y tendrás una idea de cómo deberá quedar tu código fuente. Además, deberás utilizar el atributo title para insertar la descripción de la página web enlazada:

<h1>Ejercicios de HTML</h1>

<h2>Encabezados y párrafos</h2>

<p><a href="encabezados_y_parrafos_1.html">Ejemplo de encabezados y párrafos 1</p>
<p><a href="encabezados_y_parrafos_2.html">Ejemplo de encabezados y párrafos 2</p>
...

<h2>Formato de texto</h2>

<p><a href="formato_texto_1.html">Ejemplo de formato de texto 1</p>
<p><a href="formato_texto_2.html">Ejemplo de formato de texto 2</p>
...

Fragmentos de documento

Es posible apuntar hacia una parte concreta de un documento HTML en vez de a todo un documento. Para ello hay que asignar previamente un atributo id al elemento hacia el que apuntamos. Esto se debe hacer en el encabezado y quedará así:

<h2 id="direccion_de_envio">Dirección de envío</h2>

Posteriormente para hacer referencia a este id concreto, lo añadiremos al final de la URL precedido por una almohadilla — veamos el ejemplo:

<p>¿Quieres mandarnos una carta? Aquí tienes nuestra <a href="contacts.html#direccion_de_envio">Dirección de envío</a>.</p>

También podemos usar esta referencia a un fragmento de documento para apuntar hacia otra parte del mismo documento:

<p>La <a href="#direccion_de_envio">Dirección de envío de la empresa</a> se encuentra al final de esta página.</p>

Ejercicio propuesto: Índice

Crea una página similar a esta: https://es.wikipedia.org/wiki/Alicante (puedes escoger cualquier otra página similar, que tenga un índice con enlaces). Debes comenzar escribiendo el índice, colocando a continuación las diferentes secciones, cada una de ellas con el correspondiente encabezado y los diferentes párrafos. Inserta además otros enlaces a otras páginas de la wikipedia, tal como se hace en la página original, sin olvidar rellenar los atributos «title». Cuando acabes prueba el resultado en el navegador. Tu código debería parecerse al siguiente:

<h1>Alicante</h1>

<p><a href="#geografia">Geografía física</a></p>
<p><a href="#demografia">Demografía</a></p>
...

<h2 id="geografia">Geografía física</h2>

La ciudad se halla a orillas del <a href="https://es.wikipedia.org/wiki/Mar_Mediterráneo">Mediterráneo</a>, en una planicie sorteada por una serie de colinas y elevaciones. El monte <a href="https://es.wikipedia.org/wiki/Benacantil">Benacantil</a>, con 169 m de altura, sobre el que se asienta el <a href="https://es.wikipedia.org/wiki/Castillo_de_Santa_Bárbara_(Alicante)">castillo de Santa Bárbara</a>, domina la fachada urbana y constituye la imagen más característica de la urbe..
...

<h2 id="demografia">Demografía</h2>

En la actualidad, según los datos del INE del 1 de enero de 2019 la ciudad cuenta con 334.887 habitantes, siendo la segunda ciudad valenciana y la 11ª de España en población. Según los datos del Ayuntamiento de Alicante a 1 de enero de 2017​ la población de la ciudad era de 336.478 habitantes, de los cuales vivían en el núcleo urbano 329.635 y 6.843 en las partidas rurales, siendo los barrios más populosos <a href="https://es.wikipedia.org/wiki/Playa_de_San_Juan_(Alicante)">Playa de San Juan</a>, con 22.424 habitantes y <a href="https://es.wikipedia.org/wiki/Polígono_San_Blas">Polígono de San Blas</a> con 22.292 habitantes.
...

Convertir bloques de contenido en enlaces

Como hemos mencionado anteriormente, puedes convertir cualquier contenido en un enlace, incluso elementos de bloque y elementos en línea. Si quieres convertir una imagen en un enlace, simplemente usa el elemento <a> encerrando el elemento <img> entre <a> y </a>.

<a href="https://www.mozilla.org/es-ES/">
  <img src="https://upload.wikimedia.org/wikipedia/commons/5/5c/Mozilla_dinosaur_head_logo.png" alt="Logotipo anterior de Mozilla que dirige a la página inicial de Mozilla">
</a>

Encontrarás más información y ejercicios sobre el manejo de imágenes en próximos artículos en esta web.

Ejercicio propuesto: Imagen con hipervínculo

Utilizando la imagen https://iessanvicente.com/ies_san_vicente.jpg, crea un enlace a la web https://iessanvicente.com para que al hacer clic sobre la imagen, el navegador nos dirija a la web del IES San Vicente.

Nota: Debes utilizar la url completa de la imagen como valor del atributo src del elemento <img>.

Test

Comprueba tus conocimientos con este test sobre formato de texto y otros conceptos relacionados con esta unidad.

Introducción

HTML («Hypertext Markup Language«) no es exactamente un lenguaje de programación. Es un lenguaje de marcado que le dice a los navegadores web cómo estructurar las páginas web que estás visitando. Puede ser tan complejo o tan simple como desee el desarrollador web. Este lenguaje está formado por varios elementos que definen diversos tipos de contenido. Un fichero HTML se puede editar con un simple editor de texto, pero hay algunos editores que usan colores y consejos para ayudar al desarrollador. Uno de los mejores editores es el Visual Studio Code. Se puede descargar desde aquí.

Elementos

HTML consiste en una serie de elementos, que puedes utilizar para encerrar, delimitar o marcar diferentes partes del contenido para hacer que aparezcan de una cierta manera, o actúen de determinada forma. Las etiquetas que delimitan un fragmento de contenido pueden hacer que dicho contenido enlace con otra página, ponga una palabra en cursiva, etcétera.

Cada elemento tiene dos partes, una al comienzo y otra al final, y el contenido se coloca en medio:

<etiqueta>Contenido...</etiqueta>

El elemento HTML quedará definido por todo ese bloque, desde la etiqueta de apertura, hasta la etiqueta de cierre. Por ejemplo:

<h1>Mi primer encabezado</h1>
<p>Mi primer párrafo</p>

Las etiquetas HTML no distinguen entre mayúsculas y minúsculas. Así que se pueden escribir tanto en mayúsculas como en minúsculas. Por ejemplo, una etiqueta <title> se puede escribir como <title>, <TITLE>, <Title>, <TiTle>, etc., y funcionará correctamente. Sin embargo, se recomienda escribir todas las etiquetas en minúsculas para mantener la coherencia y legibilidad, entre otros motivos.

Elementos vacíos

No todos los elementos siguen el patrón de etiqueta de apertura, contenido y etiqueta de cierre. Algunos elementos consisten solo en una etiqueta única, que se utiliza generalmente para insertar/incrustar algo en el documento en el lugar donde se quiera incluir. Por ejemplo, podemos utilizar el elemento  <br> para insertar un salto de línea, y el elemento <img> para insertar una imagen en la página de la siguiente forma:

<p>Mi perro es un gruñón.<br />Tiene muy malas pulgas.</p>

Atributos

Los elementos también pueden tener atributos. Los atributos contienen información extra sobre el elemento. Por ejemplo, con siguiente código podemos utilizar el atributo class para asignar al elemento un identificador que se puede utilizar para dotarlo de información de estilo:

<p class="estilo">Mi perro es un gruñón</p>

Para ver otro ejemplo, podemos utilizar el siguiente código para saltar a la página https://www.wikipedia.org (la etiqueta <a> define un hipervínculo, y el atributo href especifica la url donde queremos saltar):

<a href="https://www.wikipedia.org">Wikipedia</a>

Es muy importante que tengamos en cuenta que un atributo deberá tener:

• Un espacio entre este y el nombre del elemento. Para un elemento con más de un atributo, los atributos también deben estar separados por espacios.
• El nombre del atributo, seguido por un signo igual.
• Un valor del atributo, rodeado de comillas de apertura y cierre.

Omitir comillas en valores de atributos

Cuando observas diferentes páginas web, puedes encontrarte con todo tipo de estilos de etiquetado extraños, que incluyen valores de atributos sin comillas. Esto se permite en ciertas circunstancias, pero provocará un error en otras. Por ejemplo, si volvemos a revisar el ejemplo del enlace, sería posible escribir una versión básica con solo el atributo href, así:

<a href=https://www.wikipedia.org/>Wikipedia</a>

Sin embargo, el código no sería correcto si añadimos el atributo title también sin comillas:

<a href=https://www.wikipedia.org/ title=La página de inicio de Wikipedia>Wikipedia</a>

En este punto el navegador interpretará mal el código y pensará que el elemento <a> tiene atributos incorrectos y esto causará errores o comportamientos inesperados. Por ello es muy importante incluir siempre las comillas en los atributos. Evitarás muchos problemas y además obtendrás un código más legible.

Comillas simples o dobles

En esta unidad todos los valores de los atributos se han incluido en comillas dobles. Sin embargo, se pueden ver comillas simples en algún código HTML. Es una cuestión de estilo. Puedes elegir libremente cuál prefieres. Ambas líneas de código son equivalentes:

<a href="http://www.ejemplo.com">Un enlace a mi ejemplo.</a>

<a href='http://www.ejemplo.com'>Un enlace a mi ejemplo.</a>

Asegúrate de no mezclar ambos tipos de comillas. El siguiente ejemplo muestra un código incorrecto:

<a href="http://www.ejemplo.com'>Un enlace a mi ejemplo.</a>

Si utilizas un tipo de comillas en tu documento HTML, puedes incluir el otro tipo de comillas para tus valores de atributo sin que esto te cause problemas:

<a href="http://www.ejemplo.com" title="¿A que es 'divertido'">Un enlace a mi ejemplo.</a>

Sin embargo, si deseas anidar unas comillas dentro de otras del mismo tipo (ya sea simples o dobles), tendrás que utilizar entidades HTML para las comillas. Por ejemplo, el siguiente código no va a funcionar:

<a href='http://www.ejemplo.com' title='¿A que es 'divertido'?'>Un enlace a mi ejemplo.</a>

Así que tendrás que hacer esto:

<a href='http://www.ejemplo.com' title='¿A que es &apos;divertido&apos;?'>Un enlace a mi ejemplo.</a>

Internet y páginas web

Para que un usuario pueda obtener y leer el contenido de una página web, se deben seguir algunos pasos básicos:

• Para crear páginas web, el desarrollador tiene que crear archivos escritos en HTML (con cualquier editor de texto) y colocarlos en un servidor web (por ejemplo, usando un cliente ftp).
• El código HTML de una página web le dice al navegador lo que necesita saber para mostrar la página. Si el programador completa el desarrollo de la página web correctamente, las páginas incluso se mostrarán bien en dispositivos móviles y de escritorio.
• Una vez que los archivos se colocan en un servidor web, cualquier navegador puede recuperar las páginas web a través de Internet.
• Finalmente, los usuarios utilizarán un ordenador o cualquier otro dispositivo conectado a Internet para visualizar la página web mediante un navegador.

El servidor web

Un servidor web es simplemente un ordenador conectado a Internet esperando peticiones de navegadores:

• Los programadores almacenan HTML, archivos, imágenes, sonidos y otros tipos de archivos.
• Los navegadores solicitan páginas HTML u otros recursos, como imágenes.
• Si el servidor puede localizar los recursos, los envía a los navegadores.

El navegador web

Un navegador simplemente es una aplicación que se encarga de mostrar páginas web. El código HTML realizará el siguiente recorrido:

• El código HTML parte del servidor, quien se encarga de enviar páginas web completas a los navegadores.
• Los navegadores recuperan las páginas.
• Los navegadores muestran las páginas HTML a los usuarios finales.

Elementos <!doctype> y <html>

En sus inicios, cuando el HTML llevaba poco tiempo (alrededor de 1991-1992), los doctypes servían como enlaces al conjunto de reglas que la página HTML debía seguir para que fuera considerado buen HTML. Un elemento doctype de aquella época podía parecerse a esto:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

En la actualidad se ignora y se considera un legado histórico que hay que incluir para que todo funcione correctamente. <!DOCTYPE html> es la secuencia de caracteres más corta que se acepta como elemento doctype válido, que indica estamos utilizando la última versión de HTML (HTML5).

En segundo lugar debemos utilizar obligatoriamente el elemento <html> (elemento raíz), que incluirá todo el contenido de la página.

En resumen, todos los documentos HTML deben comenzar con una declaración de tipo de documento seguida del código de la página web en sí entre las etiquetas <html> and </html>:

<!doctype html>
<html lang="es">
...
</html>

El elemento <head>

Este elemento actúa como contenedor para todos los parámetros que se quieran incluir en el documento HTML que no serán visibles a los visitantes de la página. Incluye cosas como palabras clave y la descripción de la página que se quieran mostrar en los resultados de búsqueda, así como la hoja de estilo para formatear nuestro contenido, declaraciones de codificación de caracteres y más. Por ejemplo:

<!doctype html>
<html lang="es">
  <head>
    <!-- Etiquetas obligatorias -->
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

    <!-- Hoja de estilos (CSS) de Bootstrap -->
    <link rel="stylesheet" href="bootstrap.min.css" />
    ...
  </head>  
  ...
</html>

El elemento <meta>

Metadata

Es importante que las páginas web contengan una lista de elementos de metadatos para proporcionar a los motores de búsqueda (por ejemplo, Google, DuckDuckGo, Bing, etc.) información semántica como el autor, palabras clave, descripción, etc. Dado que este tipo de información no se muestra al usuario directamente por el navegador, los elementos de metadatos deben colocarse dentro del elemento <head>:

<head>
  <meta name="description" content="My página web" />
  <meta name="keywords" content="HTML, CSS, JavaScript" />
  <meta name="author" content="Fernando" />
</head>

Charset

Uno de los elementos <meta> más importantes es el que define la especificación del charset. Es muy habitual especificar que el documento HTML usará la codificación UTF-8, que incluye la gran mayoría de caracteres de todos los idiomas humanos escritos. De esta forma, el navegador mostrará correctamente cualquier contenido textual que pongamos en el documento, tales como caracteres á, é, ü, ñ, etc.:

<meta charset="utf-8" />

Viewport

HTML5 introdujo un método para permitir a los desarrolladores controlar ciertos parámetros del área visible de la página web (viewport), a través de la etiqueta <meta> . El viewport puede variar dependiendo del dispositivo, y puesto que hay diferencias entre un móvil y una pantalla de ordenador, es conveniente establecer el comportamiento adecuado para que nuestra página web se muestre correctamente en cualquier dispositivo. Podemos utilizar por ejemplo la siguiente línea de código en todas nuestras páginas web:

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

El elemento <title>

Este elemento establece el título de la página web, que es el título que aparece en la pestaña del navegador en la que se carga dicha página. El título también se utiliza para describir la página cuando se marca como favorita. Se puede definir de la siguiente forma:

<title>Mi primera página web</title>

El elemento <link>

El elemento <link> especifica que el documento actual se encuentra enlazado con un recurso externo. El uso más habitual de este elemento es el de aplicar hojas de estilos al documento.

Mediante el atributo <rel> especificaremos el tipo de relación del documento enlazado con el actual. El atributo debe ser una lista de tipos de enlaces separados por espacio. El uso más común para este atributo es especificar el enlace a una hoja de estilos externa: el atributo rel se establece con valor stylesheet, y el atributo href se establece con la URL de la hoja de estilos externa para dar formato a la página:

<link rel="stylesheet" href="estilos.css" />

El elemento <script>

El elemento <script> se utiliza para incluir código ejecutable o datos. Se usa principalmente para incluir o enlazar código JavaScript, aunque también se puede usar para incluir otros lenguajes de programación tales como  WebGL o incluso también datos en formato JSON. Utilizando el atributo <src> podemos especificar la url de un fichero externo (esto se puede usar como alternativa a incluir el código JavaScript directamente en nuestro documento). Por ejemplo, en el caso de querer utilizar código JavaScript en nuestra página web, procederíamos de la siguiente forma:

<!-- Fichero externo con código JavaScript -->
<script src="javascript.js"></script>
...
<!-- Definimos código JavaScript dentro del fichero HTML -->
<script>
function miFuncion() {
  document.getElementById("demo").innerHTML = "¡Hola JavaScript!";
}
</script>

El elemento <body>

El elemento <body> contiene todo el contenido que quieres mostrar a los usuarios cuando visitan tu página, ya sea texto, imágenes, vídeos, juegos, pistas de audio reproducibles o cualquier otra cosa. Se abre justo después de cerrar el elemento <head> y se debe cerrar justo antes de cerrar el elemento <html>. Por ejemplo, con el siguiente código, el navegador sólo mostrará en pantalla el texto «¡Hola mundo!»:

<!doctype html>
<html lang="es">
<head>
  <meta charset="utf-8" />
  <meta name="description" content="Mi primera página web" />
  <meta name="keywords" content="HTML, CSS, JavaScript" />
  <meta name="author" content="Fernando" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <title>Página de ejemplo</title>
</head>
<body>
  ¡Hola mundo!
</body>
</html>

Debemos matizar que dentro de una página web no podemos poner directamente los caracteres “<” y “>” porque el navegador los confundiría con los caracteres que se utilizan para la creación de etiquetas.

Para cierto tipo de caracteres, es necesario utilizar otra sintaxis que suele constar de un ampersand seguido de su nombre identificativo y un punto y coma. Por ejemplo:

Ejercicio propuesto: Hola mundo

Crea una página web para mostrar el texto «¡Hola mundo, mi nombre es … !» dentro del elemento <body>. Además, deberás utilizar el elemento <head> para mostrar el texto «Saludos» como título en la pestaña del navegador. Para finalizar, añade y completa la página web con el resto de elementos <meta> (charset, viewport, author, description y keywords), y comprueba el resultado en el navegador.

Párrafos y secciones

Para que el contenido textual de una página web resulte más legible, es muy importante utilizar párrafos y secciones.

El texto de cada párrafo se debe colocar entre las etiquetas <p> y </p>, y para indicar el comienzo de cada sección de nuestro contenido, disponemos de encabezados de varios niveles: <h1>, <h2>, <h3>, <h4>, <h5> y <h6> (del más grande al más pequeño). Podemos utilizar estos elementos de la siguiente forma:

...
<h1>Encabezado de primer nivel</h1>
<p>Mi primer párrafo</p>
<p>Mi segundo párrafo</p>
<p>Mi tercer párrafo</p>

<h2>Encabezado de segundo nivel</h2>
<p>Mi cuarto párrafo</p>
<p>Mi quinto párrafo</p>
...

Ejercicio propuesto: Párrafos

Crea una página web para mostrar diferentes párrafos utilizando las etiquetas <p> y </p>, todos ellos con diferentes líneas de cualquier texto. A continuación, añade el resto de elementos <meta> (charset, viewport, author, description, keywords y title), y comprueba el resultado utilizando tu navegador.

Ejercicio propuesto: Encabezados y párrafos

Crea una página web para mostrar varios encabezados de diferentes niveles, utilizando las etiquetas <h1> a <h6>. Añade además varios párrafos (encerrados entre las etiquetas <p> y </p> ) con cualquier texto, colocando un párrafo diferente después de cada encabezado. Para concluir, añade el resto de elementos <meta> (charset, viewport, author, description, keywords and title), y comprueba el resultado en tu navegador.

Ejercicio propuesto: Párrafos dentro de la misma sección

Utilizando las etiquetas correspondientes (<h1> y <p>), añade el código HTML necesario para crear una página web que muestre el siguiente texto con el formato correcto:

Alicante

Alicante (en valenciano y cooficialmente Alacant) es una ciudad y un municipio de España, capital de la provincia homónima, en la Comunidad Valenciana. Ciudad portuaria, está situada en la costa mediterránea. Con 337.482 habitantes (INE, 2020), es el segundo municipio más poblado de la comunidad autónoma y el undécimo del país.

Forma una conurbación de 468.782 habitantes con muchas de las localidades de la comarca del Campo de Alicante: San Vicente del Raspeig, San Juan de Alicante, Muchamiel y Campello. Estadísticamente se asocia también con el área metropolitana de Alicante-Elche, que cuenta con 757 085 habitantes. 

Ciudad eminentemente turística y de servicios, es uno de los destinos turísticos más importantes de España.

Ejercicio propuesto: Encabezados de diferente nivel

Utilizando las etiquetas HTML adecuadas, crea una página web que tenga seis encabezados con el texto «Hola». Comienza con el encabezado más importante (el más grande) y ves bajando hasta el de menor relevancia (el más pequeño).

Ejercicio propuesto: Encabezados, niveles y párrafos

Utiliza las etiquetas correctas (<h1>, <h2>, <h3> y <p>) sobre el texto que aparece a continuación:

Valencia

Valencia (en valenciano y oficialmente, València) ​es un municipio y una ciudad de España, capital de la provincia homónima y de la Comunidad Valenciana. Con una población de 800.215 habitantes (2020), que sube a 1.581.057 habitantes (2020) si se incluye su espacio urbano.​ Es la tercera ciudad y área metropolitana más poblada de España, por detrás de Madrid y Barcelona.

Geografía

Localización

La ciudad de Valencia se encuentra en la costa mediterránea de la península ibérica, sobre la gran llanura aluvial de los ríos Júcar y Turia, justo en el centro del golfo de Valencia. La ciudad primitiva estaba ubicada a unos cuatro kilómetros del mar, en una isla fluvial del Turia. Los montes más cercanos a la ciudad son algunas de las últimas estribaciones del sistema Ibérico en la Comunidad Valenciana, como el Cabeçol de El Puig y la sierra Calderona, a unos 12 km y 25 km al norte de la ciudad respectivamente.

Clima

Valencia cuenta con un clima mediterráneo suave y ligeramente lluvioso durante los inviernos y caluroso y seco durante los veranos. De acuerdo con los criterios de la clasificación climática de Köppen, Valencia tiene un clima de transición entre los climas mediterráneo y semiárido cálido. La temperatura media anual es de 18.4 °C.

El elemento <br>

El elemento HTML line break <br> produce un salto de línea en el texto (retorno de carro). Es útil para escribir un poema o una dirección, donde la división de las líneas es muy relevante.

Debemos tener en cuenta que no se debe utilizar <br> para incrementar el espacio entre líneas de texto; para ello se debe utilizar la propiedad margin de CSS o el elemento <p>.

Como se puede observar en el siguiente ejemplo, se utiliza un elemento <br /> cada vez que queremos cambiar de línea. El texto que coloquemos después del elemento <br /> aparecerá al comienzo de la siguiente línea:

<p> 
  Mozilla Foundation<br />
  1981 Landings Drive<br />
  Building K<br />
  Mountain View, CA 94043-0801<br />
  USA
</p>

Ejercicio propuesto: Poemas

Crea una página web que contenga diversos poemas de diversos autores, como el que tienes a continuación. Debes utilizar <h1> y <h2> para los títulos, y párrafos y saltos de línea para el resto.

Nota: Deberías utilizar <h1> para el encabezado principal y <h2> para el resto de encabezados. Ten en cuenta también que no puedes utilizar <br /> para crear márgenes entre cada poema. Deberás usar párrafos que contengan cada poema, y saltos de línea para cada verso.

POEMAS

Gustavo Adolfo Bécquer

Del salón en el ángulo oscuro,
de su dueña tal vez olvidada,
silenciosa y cubierta de polvo,
veíase el arpa.

¡Cuánta nota dormía en sus cuerdas,
como el pájaro duerme en las ramas,
esperando la mano de nieve
que sabe arrancarlas!

¡Ay!, pensé; ¡cuántas veces el genio
así duerme en el fondo del alma,
y una voz como Lázaro espera
que le diga «Levántate y anda»!

...

Ejercicio propuesto: Direcciones

Crea una página web para mostrar diferentes direcciones, similares a la que tienes a continuación (debes usar encabezados de tipo <h1> y <h2> , párrafos y saltos de línea).

Nota: Deberías utilizar un encabezado <h1> para el título principal y <h2> para el resto de encabezados. Ten en cuenta también que no debes utilizar <br /> para crear márgenes entre cada dirección. Al igual que el ejercicio anterior, utiliza párrafos para cada dirección y saltos de línea para el resto.

DIRECCIONES

Mozilla

331 E. Evelyn Avenue
Mountain View, CA
94041
USA

...

El elemento <pre>

El elemento <pre> (o Texto HTML Preformateado) representa texto que mantiene la estructura que se utilizó en el editor. El texto en este elemento típicamente se muestra con una fuente fija o monoespaciada (no proporcional), exactamente como se mostraba en el archivo mientras se editaba. Los espacios dentro de este elemento también se muestran como se escribieran en el editor. Por ejemplo:

<pre>
 -----------------------------
< Soy un experto en mi campo. >
 -----------------------------
         \   ^__^ 
          \  (oo)\_______
             (__)\       )\/\
                 ||----w |
                 ||     ||
</pre>

Ejercicio propuesto: ASCII art

Crea un documento para mostrar diversos dibujos utilizando caracteres, de forma similar al ejemplo.

Nota: Puedes encontrar diversos ejemplos en los siguientes enlaces: https://www.asciiart.eu/ , https://en.wikipedia.org/wiki/ASCII_art , https://asciiart.website/ , https://fsymbols.com/text-art/ , etc.

 
  ----------------------------
< Soy un experto en mi campo. > 
  ----------------------------
        \   ^__^
         \  (oo)\_______ 
            (__)\       )\/\ 
                ||----w | 
                ||     ||


         .^.    .^.
        (   \  (   \
         \   }  \   }
        ( `  { ( `  {
         \   }  \   }
         ( `  \ ( `  \
          \   }  \   }
         ( `  { ( `  {
        .-\   |-^-. /
       (  .\ /     '.
        '/  O _______\
         | .-'#### ###
       ,-./  # / \ / \___
      { ,-     \@/_\@'   '.
      { `.       .'        }
       `._   /    )._     _"
          \   `--' __"---"
           `. /  ,'  \  \
   Ahas      /  /     |  )
            |  /      ; /
             \/ '-,,-'\/


$$$_____$$$$$$$_$$$$$$$_$$$_______$$$_$$$$$$$$$$
$$$____$$$____$$$____$$$_$$$_____$$$__$$$_______
$$$____$$$_____$_____$$$_$$$_____$$$__$$$_______
$$$_____$$$_________$$$___$$$___$$$___$$$$$$$$__
$$$______$$$_______$$$_____$$$_$$$____$$$_______
$$$_______$$$_____$$$______$$$_$$$____$$$_______
$$$$$$$$$___$$$$$$$_________$$$$$_____$$$$$$$$$$

...

Quiz

Test your skills with this quiz about paragraphs, headings, and some other concepts related to this unit.