DOCTYPE
Antes de ponernos a hablar sobre el DOCTYPE, creo que es momento de recomendar un artículo de nuestro compañero Eduardo donde nos cuenta un poco más sobre las buenas prácticas a la hora de escribir HTML. Una de ellas, la primera, de hecho, es declarar el DOCTYPE correcto. Esto es fundamental, y se nos puede pasar de largo si no tenemos cuidado –aunque generalmente, herramientas como Dreamweaver y similares nos insertan el código de DOCTYPE de forma automática-.
El DOCTYPE es, básicamente, una forma de indicarle al navegador la versión de HTML que estamos usando. Es como una especie de identificador que le permite al browser saber con qué está lidiando. Para poder explicar un poco mejor el DOCTYPE, tenemos que meternos un poco en el mundo de XML. Si no lo habíamos dicho antes, ahora es un buen momento: el XHTML, la versión más usada del código hoy en día, es un derivado del lenguaje XML, y como tal toma muchas de las características de su sintaxis.
Dentro del XML, una de las cosas más importantes a tener en cuenta es el Document Type Definition, o DTD, que es un documento que nos indica las normas y prohibiciones que tiene que tener un documento en la web o en el entorno en el que estemos. Por ejemplo, si vamos a trabajar con discos, podemos hacer a través del DTD que uno de los campos obligatorios sea el nombre.
Tomando el DTD de estos documentos, el estándar XHTML nos permite usar 3 versiones diferentes, que veremos ahora. Lo que tenemos que tener en cuenta es que la etiqueta DOCTYPE se incluye fuera de la etiqueta <html>, es lo único que va por fuera, dado que es un indicativo para el navegador más que otra cosa.La inclusión de la etiqueta <doctype> antes de <html> es algo fundamental que no puede faltar en ninguna página web.
Volviendo a los tipos de DOCTYPE, en realidad dependen de la versión de HTML que estamos usando en el momento. Tenemos tres tipos: Strict, Transitional y Frameset. Por supuesto, cada una de estas varía dependiendo de la versión, por lo que recomendamos que antes de poner un DOCTYPE consultemos con W3Schools para saber si lo estamos haciendo de forma correcta. Usualmente, los documentos de Dreamweaver cuentan con un DOCTYPE transicional.
Así como siempre tenemos que cerrar todas las etiquetas que abrimos, también es importantísimo poner el DOCTYPE antes de la primera etiqueta.
Los vínculos
Uno de los aspectos más importantes del HTML son los vínculos. De hecho, son algo así como su gracia, porque uno de los propósitos principales de este lenguaje es la creación de hipertexto. Cuando se incorporó el HL (Hyper Link) al HTML, el éxito estaba garantizado. Los vínculos también pueden llamarse enlaces, y hoy en día forman una parte crucial del ecosistema de internet, además de generar toda una mentalidad diferente a la hora de leer. Pero eso lo podemos dejar para otra ocasión.
Tenemos que tener en cuenta que un enlace tiene un destino y un final. El recorrido no importa, pero cada una de estas puntas son denominadas anclas, o anchors en inglés. Hablaremos más en profundidad dentro de algunas líneas, pero primero repasaremos qué es y cómo funciona una URL. Seguro ya damos por sentado que sabemos qué es y qué hace, pero seguramente tenemos una vaga idea de cómo funciona.
Las Uniform Resource Locator son una forma de identificar cada uno de los recursos presentes en internet. Como tales, no pueden ser compartidas por diferentes recursos, son identificaciones únicas. Además de servir como identificador, para el usuario son una forma rápida de acceder a un sitio, dado que de otra forma tendríamos que ingresar una importante colección de números. Las URL se componen de diferentes partes:
- El protocolo: se trata del mecanismo implementado por el navegador para acceder a un determinado sitio web. Los más conocidos son, por ejemplo, HTTP y HTTPS.
- El servidor: es el lugar donde se encuentra almacenado el sitio al que queremos acceder. El nombre de cada servidor permite que el navegador identifique dónde queremos ir cada vez que ingresamos un determinado nombre.
- La ruta: una vez que le indicamos al navegador el protocolo y el servidor, quizás también tengamos que agregar una ruta para identificar una parte o página específica dentro del sitio. Por ejemplo, para acceder a nuestra sección sobre redes sociales, tendrían que sumar a la URL la ruta /redes-sociales.
Estos son los tres componentes principales de una URL, aunque también hay otros, como por ejemplo:
- La consulta: esto seguramente lo han visto varias veces en búsquedas que se realizan en blogs, dentro de la URL se puede visualizar como ?=búsqueda=bitelia. Las palabras están siempre separadas por estos dos caracteres, = y & (para agregar una nueva variable).
- La sección: también dentro de cada página web podemos, a través de la URL, acceder a una determinada sección de una misma página. Dentro de la URL está simbolizado con el #, y pueden probarlo por ustedes mismos haciendo clic en “Comentarios” para que los lleve directamente al fondo de la página.
Ahora que ya tenemos bien comprendidas las URLs podemos comenzar con los vínculos. Entender que es una URL antes es importante porque son las URLs las que estarán insertadas en el vínculo, y son la forma que tenemos de darle a entender al navegador que queremos ir a otra parte.
Tipos de vínculos
En esta sección de nuestro curso ahondaremos en los diferentes tipos de vínculos que tenemos disponibles gracias a HTML. Se trata de los vínculos relativos, los vínculos absolutos y los vínculos de email. Cada uno tiene un código propio, aunque similar, y hay que tener cuidado con no confundirlos. También tienen atributos propios, que debemos usar para dejar en claro cómo queremos que se comporte el navegador ante la presencia de un link.
En una página web lo más probable es que usemos vínculos absolutos todo el tiempo, así que nos concentraremos en esta parte. Para poder crear un hipervínculo, tenemos que usar el código <a>, pero acompañado de determinados atributos. Un hipervínculo normal que nos lleva a otra página web es:
<a href=”http://www.bitelia.com/”>Esto es un hipervínculo</a>
Como podemos ver, la etiqueta <a> está acompañada del atributo que marca la dirección o URL a la cual tiene que dirigirse el enlace. Dentro del interior de la etiqueta aparecerá el texto que más tarde estará destacado en el texto como hipervínculo.
Otro de los atributos más importantes de la etiqueta <a> es el target. Básicamente, el target indicará dónde tiene que ir el navegador hoy en día. Si es una nueva pestaña, una nueva ventana, o dentro de la misma ventana. Gracias a las ventajas de las pestañas hoy en día casi todos los navegadores modernos nos permiten obviar el target dado que se abrirán automáticamente en una nueva pestaña. Pero, por las dudas, el código para hacerlo es:
<a href=”http://www.bitelia.com/” target=”_blank”>Esto es un hipervínculo</a>
Unos párrafos atrás hablábamos del enlace como “destacado” en el texto. Esto se puede lograr a través de atributos, también, pero hoy en día es algo que genera un código muy pesado y desprolijo y es completamente evitable gracias a CSS.
Para ir cerrando el tema de los vínculos, también tenemos que tener el cuenta la etiqueta para enviar correos electrónicos. Para poder modificar un enlace tenemos que agregar algo de código a lo que vimos anteriormente:
<a href=”mailto:info@bitelia.com/”>Envíanos un correo</a>
En un documento HTML, cuando hacemos clic sobre este enlace se nos abrirá una ventana con el cliente de correo que tengamos por default en la computadora. Hoy en día no es recomendable por una serie de motivos, siendo la seguridad el más importante. Existe una infinidad de bots que recorre internet buscando correos electrónicos para SPAM, y además, los usuarios muchas veces no aprecian tener que abrir su cliente de correo electrónico de forma inesperada. Una de las prácticas usadas para reemplazar el mailto es el formulario, del cual hablaremos en la próxima entrega.
Las anclas
Seguramente han notado con anterioridad que, en Wikipedia, cuando hacemos clic en uno de los enlaces del índice, ubicado a principio de página, nos lleva no a un documento HMTL, sino a un sector dentro del mismo documento. Esto se puede lograr usando anclas, y es muy útil a la hora de diseñar páginas que contienen mucho texto y que necesitan de una buena división para no “marear” demasiado al usuario. Si vamos a crear una web, la idea es que sea cómoda y navegable, por supuesto.
El código para realizar anclas es muy simple, y a través de Dreamweaver el proceso también es súper fácil. Tenemos que tomarlo como un enlace perfectamente normal, pero con la diferencia de que en lugar de tener una URL, la etiqueta <a> tendrá un ancla, un lugar dentro del texto donde dirigirse. Ahora bien, para que este lugar pueda ser identificado tendrá que recibir una determinada etiqueta. Para eso, con cada ancla que usemos que tenemos que usar además una etiqueta id. Parece algo confuso al principio, pero ampliaremos.
Este es el código desde dónde vamos a partir. Imaginemos que es una pregunta en la sección de FAQ de una página:
<a href=”#ancla1”>¿Cómo voy hasta abajo?<p id=”ancla1”>Pues poniendo un ancla.</p>
Si desguazamos las partes de las etiquetas, notaremos que el ancla superior está precedida por un #, que como dijimos antes en las URLs marca una determinada sección de un documento. Por otra parte, lo que estamos haciendo en el segundo pedazo de código es indicarle al navegador cuál es la identificación de ese determinado párrafo. Por ende, este párrafo en particular, marcado con la etiqueta <p>, es único en todo el documento, pues tiene el id “ancla1” que no le corresponde a ningún otro párrafo. Así es como, haciendo clic en el primer enlace, terminaremos en esta parte del documento.
La etiqueta id es también súper útil a la hora de diseñar con CSS, pero eso tendremos que dejarlo para otra entrega.
