SESSION 3

Vista previa del material en texto

INTRODUCCIÓN A HTML5
HTML es un lenguaje muy sencillo que permite describir hipertexto, es decir, texto presentado de forma estructurada y agradable, con enlaces (hyperlinks) que conducen a otros documentos o fuentes de información relacionadas, y con inserciones multimedia (gráficos, sonido...). La descripción se basa en especificar en el texto la estructura lógica del contenido (títulos, párrafos de texto normal, enumeraciones, definiciones, citas, etc.) así como los diferentes efectos que se quieren dar (cursiva, negrita, o un gráfico determinado).
HTML es el lenguaje con el que se "escriben" las páginas web. Se puede resumir la filosofía del HTML con los siguientes puntos:
· Es muy sencillo.
· No hay variables.
· No se compila.
· Es un lenguaje interpretado.
· A las instrucciones se les llama etiquetas o marcas
· Permite escribir hipertexto
El programa que interpreta este lenguaje es el navegador (Internet Explorer, Netscape, Firefox, etc.). Este lenguaje es el usado por los navegadores para mostrar las páginas web.
A las instrucciones se les llama marcas ó etiquetas, Las etiquetas de HTML tienen la siguiente sintaxis:
<identificador-de-etiqueta Atributos: información adicional>
Un ejemplo de la etiqueta <b> (bold) que se utiliza poner el texto en negrita. Algunas etiquetas envuelven texto y marcan el comienzo de un bloque.
La sintaxis para cerrar el bloque es:
</identificador-de-etiqueta>
Veamos un ejemplo:
El código HTML:
<b> HOLA MUNDO </b>
se verá:
HOLA MUNDO
Una característica de HTML es que es pasivo. Esto es no interactúa con el usuario. Simplemente se baja el código de HTML del servidor al navegador del cliente y este nos lo muestra.
De una forma directa un documento de HTML no puede pedir información al usuario, procesarla y desplegarla. Por esto no se considera a HTML con un lenguaje de programación.
Es un lenguaje muy parecido a como trabaja un procesador de textos. HTML es un lenguaje transferible, es decir, se pueden visualizar las páginas con cualquier sistema
operativo y, por supuesto también crearlas. El HTML está formado por tan sólo 90 elementos.
Una de las características más importantes del HTML es el hipertexto. Esto quiere decir que las páginas no son elementos aislados, sino que están unidas a otras mediante los links o enlaces hipertexto. Gracias a estos enlaces el navegante de internet puede pulsar sobre un texto (texto al que llamaremos de ahora en adelante enlace) de una página para navegar hasta otra página. Será cuestión del programador de la página inicial decidir que palabras o frases serán activas (enlaces) y a donde nos conducirá pulsar sobre ellas.
EDITORES DE CODIGO
Un editor es un programa que nos permiten redactar documentos. Hoy en día existen un gran número de editores que permiten crear páginas web sin la necesidad de escribir ni una sola línea de código HTML. Estos editores disponen de un entorno visual, y generan automáticamente el código de las páginas. Al poder ver en todo momento cómo quedará la página en el navegador, se facilita la creación de las páginas, y el uso de menús permite ganar rapidez.
Estos editores visuales pueden generar en ocasiones código basura, es decir, código que no sirve para nada, en otras ocasiones puede ser más efectivo corregir directamente el código por lo que resulta necesario saber HTML para poder depurar el código de nuestras páginas.
Es aconsejable comenzar utilizando una herramienta lo más sencilla posible, para tener que insertar nosotros mismos el código HTML. Esto permite familiarizarse con el lenguaje, para poder utilizar algún editor visual posteriormente, y depurar el código cuando fuera necesario.
Para crear páginas web escribiendo directamente el código HTML puedes utilizar la herramienta Wordpad, el Bloc de notas que proporciona Windows, visual studio code, sublime text, Apache NetBeans.
ETIQUETAS ESTRUCTURALES SITIO HTML5: El HTML es un lenguaje de marcas que basa su sintaxis en un elemento de base al que llamamos etiqueta. A través de las etiquetas vamos definiendo los elementos del documento, como enlaces, párrafos, imágenes, etc. Así pues, un documento HTML estará constituido por texto y un conjunto de etiquetas para definir la forma con la que se tendrá que presentar el texto y otros elementos en la página.
La etiqueta presenta frecuentemente dos partes:
Una apertura de forma general <etiqueta> Un cierre de tipo </etiqueta>
Todo lo incluido en el interior de esa etiqueta sufrirá las modificaciones que caracterizan a esta etiqueta. Así, por ejemplo:
Las etiquetas <b> y </b> definen un texto en negrita. Si en nuestro documento HTML escribimos una frase con el siguiente código:
<b>Lo incluido en el interior de esta etiqueta estará en negrita</b>
El resultado será:
Lo incluido en el interior de esta etiqueta estará en negrita
Las etiquetas <p> y </p> definen un párrafo: introduce un salto y deja una línea en blanco antes de continuar con el resto del documento. Si en nuestro documento HTML escribiéramos:
<p><b>Hola, estamos escribiendo en un primer párrafo</b></p>
<p>Ahora ya hemos cambiado de párrafo</p>
El resultado sería:
Hola, estamos escribiendo en un primer párrafo
Ahora ya hemos cambiado de párrafo.
Cualquier página web debe contener al menos este código para desarrollarse correctamente
· DOCTYPE HTML: se utiliza para indicar la versión HTML 5.0 (la usada actualmente).  es el elemento raíz y es el más importante dentro de la estructura HTML, pues es el que contendrá el resto de las etiquetas de atributos de la página web. 
· HEAD: es la etiqueta principal que incluye metadatos; son atributos que no se muestran al usuario, solo describen referencias de la página
· META: puede utilizarse para imitar la respuesta HTTP de un encabezado o para anclar meta información adicional en el documento HTML, como el autor de un texto con una etiqueta de autor, o la forma en que los caracteres se mostrarán a través de la etiqueta de tipo de contenido. En HTML5 hay un total de cinco atributos válidos que están disponibles para la etiqueta meta: charset, http-equiv, nombre, esquema y contenido. El http-equiv se usa para imitar la respuesta HTTP del encabezado. Los meta tags pueden ser declarados en la cabecera del documento HTML o XHTML.
· TITLE: es la etiqueta para colocar el título de la página web
· BODY: es la etiqueta para desarrollar todo el cuerpo de la página web y engloba datos desde textos hasta enlaces.
ETIQUETAS SEMANTICAS DE CONTENIDO
Aquellas que dan un significado a las partes del documento. 
· HEADER: Se usa para marcar un grupo de elementos de introducción o de navegación dentro de una sección o documento. Normalmente se usa para incluir los encabezados (<h1>–<h6> o <hgroup>) pero no es obligatorio. También puede contener otras cosas como el índice de una sección, un formulario de búsqueda, logos relevantes, ...
El uso de la etiqueta <header> no está restringido a una por documento, sino que se puede usar una por cada sección del mismo, de esta forma:
<header>
	<h1>Título del documento</h1>
	<p>Más información</p>
</header>
<article>
	<header>
		<h1>Título del artículo</h1>
		<p>Autor del artículo</p>
	</header>
	<p>Texto del artículo</p>
</article>
· NAV: La etiqueta <nav> se usa para marcar una sección del documento cuya función es la navegación por la página web. Esta etiqueta no debe ser usada para marcar todos los grupos de enlaces, únicamente los bloques principales de navegación por la página. Por ejemplo, los típicos enlaces que hay en el pie de página no se deben marcar con <nav>.
· (DIV): 
· SECTION: La etiqueta <section> se usa para marcar una sección genérica de un documento o aplicación. Una sección, en este contexto, es una agrupación temática del contenido, típicamente con un encabezado. Ejemplos de uso de <section> podrían ser: capítulos, las pestañas en un menú tabulado o, en la página principal de un sitio web, la introducción, lista de noticias e información de contacto. Sólo se debería usar <section> para contenido independiente al que se podría ponerun encabezado y que no sea susceptible de ir marcado con <article>, <aside> o <nav>. Existe cierta confusión sobre cuándo usar <article> y cuándo <section> ya que ambos se parecen bastante. En general, se debe usar <article> cuando el contenido sea susceptible de ser sindicado (por ejemplo en unas RSS). Un ejemplo de uso de las dos etiquetas podría ser en la página principal de una web con un listado de noticias, de esta forma:
<h1>Título de la página</h1>
<section id="news-list">
	<h2>Noticias</h2>
	<article>
		<h3>Noticia 1</h3>
		<p>Desarrollo de la noticia 1</p>
	</article>
	<article>
		<h3>Noticia 2</h3>
		<p>Desarrollo de la noticia 2</p>
	</article>
</section>
· FOOTER: se usa para marcar el pie de una sección o documento y que contiene información sobre el mismo como el autor, licencia, términos de uso, ...
ETIQUETAS DE CONTENIDO
Son las etiquetas que permiten darle contenido al documento HTML
· H1-H6: Tamaño de la letra, el H1 es el más grande y el H6 el más pequeño, los otros tamaños se reparten.
· ARTICLE: utilizada para definir un contenido autónomo y de importancia en una página web
· P: Etiqueta para definir un párrafo en la página web 
· LISTAS: permite crear conjuntos de elementos en forma de lista dentro de una página, todos los cuales irán precedidos, generalmente, por un guion o número. Los tipos de listas en HTML son los siguientes:
· Listas ordenadas
· Listas desordenadas
· Listas de definiciones
Listas Ordenadas
Las listas ordenadas en HTML son aquellas que nos muestran los elementos de la lista en orden. Para representar el orden tendremos los elementos numerados. Es decir, cada uno de los elementos irá precedido de un número o letra que establezca su orden.
Las listas ordenadas en HTML se representan mediante el elemento OL.
<ol>
 <li>Elemento 1</li>
 <li>Elemento 2</li>
 ...
 <li>Elemento N</li>
</ol>
Ejemplo
<ol>
 <li>Julio</li>
 <li>Carmen</li>
 <li>Ignacio</li>
 <li>Elena</li>
</ol>
Número de inicio de la lista: start
El atributo start nos permite indicar el número por el cual queremos que empiece la lista, ya que por defecto las listas ordenadas en HTML empiezan por el número 1.
<ol start="numero"> ... </ol>
De esta forma, si queremos que la lista empiece por el número 5, escribiremos el siguiente código:
<ol start="5">
 <li>Julio</li>
 <li>Carmen</li>
 <li>Ignacio</li>
 <li>Elena</li>
</ol>
Que produciría el siguiente efecto:
5. Julio
6. Carmen
7. Ignacio
8. Elena
Tipo de lista ordenada: type
De igual manera podemos indicar el tipo de lista ordenada en HTML que queremos representar.
Entre los tipos de listas que podemos representar tenemos:
· 1 - Listas decimales
· a - Listas alfabéticas en minúsculas
· A - Listas alfabéticas en mayúsculas
· i - Listas de números romanos en minúsculas
· I - Listas de números romanos en mayúsculas
Los valores indicados al principio son los que le podemos asignar al atributo type de la lista ordenada en HTML.
<ol type="tipo"> ... </ol>
Si queremos que nuestra lista aparezca ordenada mediante letras en mayúsculas escribimos lo siguiente:
<ol type=”A”>
 <li>Julio</li>
 <li>Carmen</li>
 <li>Ignacio</li>
 <li>Elena</li>
</ol>
En este caso la lista se representará de la siguiente forma:
<ol type=”A”>
 Julio
 Carmen
 Ignacio
 Elena
</ol>
Atributos start/type en HTML 4.01
Aunque en HTML 5 han vuelto a la especificación los atributos type y start hay que tener cuidado con ellos, ya que en ciertas versiones como HTML 4.01 fueron declarados obsoletos, por lo cual si usamos tipos de documentos HTML 4.01 strict podríamos tener un problema en su definición.
Para estos casos (y para todos en general) podemos utilizar las hojas de estilo CSS de cara a dar estilo a las listas en HTML.
De esta forma en CSS podemos escribir lo siguiente:
<style type=”text/css”>
ol {
 list-style-type: lower-roman;
}
</style>
Lo cual hará que las listas ordenadas en HTML se muestren en números romanos y en minúsculas.
Listas en orden inverso: reversed
En HTML 5 aparece el atributo reversed para las listas ordenadas. El atributo reversed nos permite invertir el orden de la lista. Es decir, realiza la numeración de la lista de forma inversa.
Para utilizarlo simplemente indicamos el atributo reversed sobre el elemento OL.
<ol reversed> ... </ol>
En este caso, si escribimos la siguiente lista:
<ol reversed>
 <li>Julio</li>
 <li>Carmen</li>
 <li>Ignacio</li>
 <li>Elena</li>
</ol>
Lo que obtendremos por pantalla será lo siguiente:
1. Julio
2. Carmen
3. Ignacio
4. Elena
Listas Desordenadas
Las listas desordenadas en HTML nos sirven para mostrar los elementos sin ningún tipo de orden, simplemente precedidos por una viñeta que puede ser un punto, un cuadrado,…
Para definir una lista desordenada en HTML utilizamos el elemento ul.
<ul> ... </ul>
Para representar los elementos de la lista desordenada utilizamos el mismo elemento que con las listas ordenadas, es decir, el elemento li.
<ul>
 <li>Elemento 1</li>
 <li>Elemento 2</li>
 ...
 <li>Elemento N</li>
</ul>
De esa forma podríamos tener el siguiente código HTML:
<ul>
 <li>FC. Barcelona</li>
 <li>Real Madrid</li>
 <li>Real Betis</li>
 <li>Atlético de Madrid</li>
</ul>
Lo que nos mostrará por pantalla:
· FC. Barcelona
· Real Madrid
· Real Betis
· Atlético de Madrid
Tipos de lista desordenada
En el caso de las listas desordenadas, no podemos indicarle el tipo de lista mediante HTML. En este caso tenemos que recurrir a CSS para poder indicar el tipo de lista utilizando el atributo list-style-type
<style type=”text/css”>
ul {
 list-style-type: circle;
}
</style>
Listas de Definiciones
Las listas de definiciones en HTML nos sirven para montar listas en las que tenemos la estructura valor y definición. Suelen ser listas para definir términos, como si fuese un diccionario, si bien pueden ser cualquier par valor-definición.
Las listas de definiciones en HTML se construyen mediante el elemento dl.
<dl> ... </dl>
En este caso, dentro de las listas de definiciones en HTML tenemos dos elementos anidados: el que representa al valor dt y el que representa a la definición dd. De esta forma la estructura de las listas en HTML de definiciones es la siguiente:
<dl>
 <dt>Término1</dt>
 <dd>Definición 1</dd>
 <dt>Término 2</dt>
 <dd>Definición 2</dd>
 ...
 <dt>Término N</dt>
 <dd>Definición N</dd>
</dl>
Si queremos crear una lista en HTML con definiciones de palabras, podemos escribir lo siguiente:
<dl>
 <dt>Pizpireta</dt>
 <dd>Dicho de una mujer: Viva, pronta y aguda.</dd>
 <dt>Pulular</dt>
 <dd>Dicho de las personas, animales o cosas: Abundar y bullir en un lugar.</dd>
 <dt>Concupiscencia</dt>
 <dd>En la moral católica, deseo de bienes terrenos y, en especial, apetito desordenado de placeres deshonestos.</dd>
</dl>
Lo cual nos acabará mostrando por pantalla lo siguiente:
Pizpireta
Dicho de una mujer: Viva, pronta y aguda.
Pulular
Dicho de las personas, animales o cosas: Abundar y bullir en un lugar.
Concupiscencia
En la moral católica, deseo de bienes terrenos y, en especial, apetito desordenado de placeres deshonestos.
Por defecto los navegadores dejan el término y en la siguiente líne, junto con un tabulador, la definición.
Listas anidadas
Cuando estemos manejando listas podemos anidar unas en otras independientemente del tipo de lista que estemos anidando.
Para crear listas anidadas en HTML simplemente tenemos que hacer que el elemento de una de las listas sea a su vez una lista. Es decir, el esquema de listas sería parecido al siguiente:
<ul>
 <li>Elemento 1</li>
 <li>Elemento 2</li>
 <li>
 <ol>
 <li>Elemento 2.1</li>
 <li>Elemento 2.2</li>
 ...
 <li>Elemento 2.N</li>
 </ol>
 </li>
 <li>Elemento 3</li>
 ...
 <li>Elemento N</li>
</ul>
En este caso hemos anidado una lista ordenada dentro del tercer elemento li de una lista desordenada.
Hay que tener cuidado de poner el elemento li dentro de la lista anidada, ya que si no lo ponemos estaremos generando un código incorrecto.
Las anidaciones de listas puede ser de cualquier tipo de lista y sin límite de anidación.Un ejemplo de listas anidadas sería una clasificación de animales como la siguiente:
<ul>
 <li>Carnívoro
 	<ul>
 		<li>León</li>
 		<li>Buitre</li>
 		<li>Hiena</li>
 	</ul>
 </li>
 <li>Herbívoro
 	<ul>
 		<li>Cabra</li>
 		<li>Vaca</li>
 	</ul>
 </li>
 <li>Omnívoro
 	<ul>
 		<li>Oso</li>
 		<li>Urraca</li>
 	</ul>
 </li>
</ul>
El efecto que obtendríamos sería el siguiente:
· Carnívoro
· León
· Buitre
· Hiena
· Herbívoro
· Cabra
· Vaca
· Omnívoro
· Oso
· Urraca
ENLACES: mediante los enlaces en HTML podemos comunicar una página con otra. De esta forma, enlazando documentos HTML podemos acabar tejiendo lo que es Internet.
Para crear un enlace en HTML utilizamos el elemento A con la siguiente sintaxis:
<a>Contenido del enlace</a>
Pero solo con esto el enlace no tendrá mucha utilidad ya que el principal objetivo del enlace es enlazar a un destino. Para poder indicar el destino de un enlace utilizamos el atributo href. En valor del atributo href puede ser cualquier URI que represente un recurso. Es decir, una página, una parte de una página, una URL genérica, un archivo,… De esta forma el enlace en HTML lo crearemos con la sintaxis:
<a href="URI">Contenido del enlace</a>
A modo de ejemplo podríamos tener los siguientes enlaces:
<a href="documento.html">Enlace a un documento</a>
<a href="documento.html#resumen">Enlace a una parte de un documento</a>
<a href="http://www.manualweb.net">Enlace a una web</a>
<a href="http://www.manualweb.net/tutorial-html/">Enlace a un directorio</a>
<a href="miimagen.png">Enlace a una imagen</a>
<a href="mimusica.mp3">Enlace a un archivo de sonido</a>
Destino del enlace
Pero, ¿dónde se abre el enlace? Pues por defecto y si no hemos configurado nada en el navegador web que estemos utilizando el enlace se abre en la misma ventana en la que tengamos el enlace.
Si bien, en el enlace, podemos indicar el destino que queremos darle a dicho enlace. Eso lo podemos hacer mediante el atributo target. Los posibles valores que admite el atributo target son:
· _blank, el agente de usuario intentará abrir el enlace en una nueva ventana. La nueva ventana no tendrá nombre.
· _self, el agente de usuario intentará abrir el enlace en el mismo marco donde está en código actual.
· _parent, el agente de usuario intentará abrir el enlace en el frameset inmediatamente superior al que se encuentra la página. Esto suele suceder cuando tenemos el enlace en un área de frames.
· _top, el agente de usuario intentará abrir el enlace en la ventana padre. En el caso de que exista un frameset lo eliminará y se hará con toda la ventana.
· nombre_marco, se podrá indicar el nombre de un frame. En este caso el agente de usuario intentará abrir el enlace en el frame que coincida con el nombre. En el caso de no existir un frame con ese nombre lo abrirá en una nueva ventana, asignándole dicho nombre.
Así podremos tener el siguiente código:
<a href="enlace.html" target="_blank">Abrir enlace en una nueva ventana</a>
<a href="enlace.html" target="_top">Abrir enlace en la ventana superior</a>
Título de los enlaces
El enlace en HTML, tal y como lo hemos visto hasta ahora, sirve para enlazar contra un recurso de la web: servidor, directorio, dominio,… Y lo que en mayor o menor medida describe lo que enlazamos es el contenido que encontramos entre las etiquetas A.
Si bien el elemento A nos ofrece un atributo llamado title. En el atributo title podemos describir de una forma textual el destino del enlace. Esto servirá no solo al usuario para que pueda obtener más información de dónde va, si no a las máquinas a la hora de asignar un nombre a la URI sobre la que estamos enlazando.
Un ejemplo sería:
<a href="http://www.manual.net" title="Web de Manuales y Tutoriales de Programación">Ir a Manual Web</a>
Enlaces en HTML a una parte del documento
Hasta el momento lo que hemos visto es como montar enlaces en HTML a documentos. Ya sea porque enlazamos directamente al documento o bien porque enlazamos a un servidor o directorio que nos dará un documento.
Pero otra capacidad que tenemos en HTML es la de enlazar a una parte concreta del documento. Imagina que en un documento tenemos un título y varios capítulos. Y lo que queremos hacer desde otro documento HTML o bien desde el mismo documento es enlazar directamente al inicio de un capítulo.
Marcando una parte del documento
Para poder enlazar a una parte concreta de un documento lo primero que tenemos que hacer es marcar esa parte del documento. Para ello contamos con el atributo name. Si creamos un enlace con el atributo name, este enlace se definirá como posición y no como enlace de navegación.
La sintaxis será:
<a name="partedocumento">Contenido</a>
En este caso el contenido puede ser vacío ya que no se ofrecerá nada para navegar. Es por ello que podemos ponerlo antes de nuestro capítulo.
<p>Parrafo</p>
<a name="cap2"></a><h2>Nuevo Capítulo</2>
Es muy importante el contenido que le demos al atributo name, ya que dicho contenido vamos a utilizarlo para acceder desde un enlace.
Enlazando a una parte del documento
Una vez que hemos creado el marcaje del enlace en HTML en un documento es hora de acceder a esa parte del documento. Para ello solo tenemos que poner el nombre que le hayamos dado al atributo name precedido de una almohadilla.
La sintaxis será:
<a href="#name">Enlace a parte del documento</a>
Es decir, en el caso de que la parte marcada en el documento la hayamos marcado con “cap2” el enlace que tenemos que conformar será:
<a href="#cap2">Enlace al capítulo 2</a>
La parte del documento al que accedemos no tiene por qué estar en el mismo documento del enlace, puede estar en otro documento o servidor. De esta forma podemos tener enlaces a partes de otros documentos de la siguiente forma:
<a href="documento2.html#cap2">Enlace al capítulo 2 del documento2</a>
<a href="http://servidor.com/#cap2">Enlace al capítulo 2 del servidor</a>
El utilizar la almohadilla como valor del href nos puede servir para acceder a la parte superior del documento. Es por ello que esto es utilizado como enlace en las partes inferiores de los documentos HTML para subir a la parte de arriba.
<a href="#">Ir Arriba</a>
Enlaces en HTML con imágenes
En lo que va de capítulo sólo hemos visto enlaces en HTML cuyo contenido era texto. Si bien como contenido de los enlaces podemos poner imágenes.
<a href="http://www.victorcuervo.com"><img src="victor.jpg" alt="Foto de Victor"/></a>
De esta forma toda la imagen será un elemento enlazable que nos llevará, en el caso de pinchar sobre ella, al destino indicado en el atributo href.
Esta técnica se suele utilizar para presentar una imagen de baja resolución y tamaño, que al pulsarla nos cargue una imagen con mayor resolución y tamaño. Un código que podría ser de la siguiente forma:
<a href="foto.png"><img src="thumbnail_foto.png" alt="Mi foto"/></a>
Enlaces en HTML para descargar fichero
Otro de los usos que se les da a los enlaces en HTML es el de habilitar la descarga de ficheros. En este caso el destino indicado por el atributo href debe de ser el fichero que queremos descargar. En estos casos es bueno que el fichero a descargar este comprimido.
El código quedaría de la siguiente forma:
<a href="fichero.zip">Descargar el fichero</a>
Es importante que sepas que el navegador siempre va a intentar abrir el fichero enlazado en el atributo href para poder mostrarlo visualmente. En el caso de que no encuentre ningún programa para abrirlo nos mostrará un menú emergente en el que nos dará la posibilidad de guardar el fichero.
Protocolos en la URL del enlace
Hasta ahora hemos visto que todos los enlaces en HTML se apoyan en el protocolo http, pero el enlace especificado en el atributo href no tiene porqué ser http, si no que podría ser otro protocolo como ftp, mailto,…
<a href="ftp://servidorftp.com">Servidor FTP</a>
Lo bueno de utilizar el protocolo mailto dentro de los enlaces en HTML es que el navegador web nos va a abrir directamente el programa de correo electrónico que tengamos predeterminado en el ordenador.
La estructura del protocolo mailtoen un enlace a sería la siguiente:
<a href="mailto:usuario@dominio.com">Email para usuario@dominio.com</a>
Lo bueno es que además podemos ponerle parámetros al modelo de mailto y se autorellenarán campos como el tema del email, campos CC, BCC,…
<a href="mailto:usuario@dominio.com?subject='Tema del Mensaje'">Email para usuario@dominio.com</a>
Relaciones entre documentos: el elemento link
Hasta ahora hemos visto enlaces explícitos entre diferentes recursos. Si bien el lenguaje HTML nos da la posibilidad de establecer relaciones entre documentos sin tener que explicitar directamente un enlace. Para ello HTML nos ofrece el elemento link.
La estructura del elemento link es:
<link href="destino" rel="relacion" rev="relacion-inversa"/>
Es importante saber que el elemento link solo aparece dentro de la cabecera o head del documento.
El atributo rel establece la relación que hay con el documento destino, mientras que el atributo rev define la relación del documento destino con el documento actual. Es decir, la relación inversa.
Por otro lado el atributo href es el que contiene la URI del documento destino.
Uno de los usos del elemento link es para establecer las relaciones de documentos que formen una publicación completa. De esta forma manejando los valores del atributo rel podemos establecer dónde está el índice, cuál es artículo anterior y cuál es el próximo artículo.
<link rel="index" href="indice.html">
<link rel="prev" href="c2.html">
<link rel="next" href="c4.html">
Aunque los enlaces de tipo link no son renderizados por el navegador pueden ser interpretados para añadir la información al navegador.
Tipos de relaciones entre documentos
Según el lenguaje HTML se definen los siguientes tipos de relaciones entre documentos. Estos valore pueden ser utilizados por los atributos rel y rev.
· alternate, indica una versión alternativa del documento.
· stylesheet, hace referencia a una hoja de estilo externa para el documento.
· start, primer documento de un conjunto de documento.
· next, siguiente documento al actual.
· prev, documento anterior al actual.
· contents, documento que contiene la tabla de contenidos.
· index, documento que contiene el índice.
· glossary, documento que contiene el glosario.
· copyright, información del copyright del documento actual.
· chapter, documento que actúa como capítulo en una colección de documentos.
· section, documento que actúa como sección en un conjunto de documentos.
· subsection, documento que actúa como subsección en un conjunto de documentos.
· appendix, documento que actúa como apéndice de una colección de documentos.
· help, documento de ayuda.
· bookmark, para marcar un punto concreto del documento.
Enlaces en HTLM para hojas de estilo
En elemento link nos servirá para cargar las hojas de estilo del documento HTML. Ya veremos más adelante qué son, pero digamos que nos sirven para darle estilo gráfico a la página.
Las hojas de estilos se almacenan en ficheros .css. Así que podemos utilizar el elemento link para enlazarlas indicando que su tipo es “text/css”, mediante el atributo type.
<link href="style.css" rel="style" type="text/css"/>