conceptos de html

ELEMENTOS Y ETIQUETAS

HTML es un lenguaje de marcas compuesto por un conjunto de elementos que son la base de su estructura. Estos elementos conforman una caja de herramientas que los autores pueden utilizar para dar forma a sus documentos. Por ejemplo, puedes encontrar elementos que insertan párrafos, videos u otros documentos, o elementos que marcan citas, texto importante o los títulos de libros, películas, trabajos y otras obras.

El trabajo llevado a cabo por los navegadores es vital en este esquema, siendo éstos los responsables del procesamiento y transformación de los elementos en documentos representados. Con respecto a esto, los autores deben considerar que algunos elementos no tienen una representación tangible: su propósito es el de proveer significados semánticos a la porción de documento que afectan. A veces, la información provista por estos elementos semánticos, es usada por diferentes tipos de agentes de usuario (navegadores, motores de búsqueda, procesadores de documentos, etc) para extraer información adicional acerca del documento y sus partes.

Un elemento HTML está normalmente compuesto por dos etiquetas: la etiqueta de apertura y la etiqeta de cierre. Una etiqueta de apertura se compone del nombre del elemento encerrado por los símbolos menor-que "<" y mayor-que ">". La etiqueta de cierre se construye de igual manera que la de apertura pero, en este caso, el nombre del elemento es precedido por una barra diagonal ("/"). En el siguiente ejemplo, verás las etiquetas de apertura y cierre para el elemento b.

Ten presente que los elementos no son etiquetas. Los elementos están representados por etiquetas en el código. Sin embargo son habitualmente considerados, de manera errónea, la misma cosa.

<b>Texto importante</b>

Texto importante

Como puedes ver, allí están las etiquetas de apertura ("<b>") y de cierre ("</b>"). Ahora, el texto que ves en el medio, "Texto importante", es conocido como el contenido del elemento. A medida que progreses en el aprendizaje de este lenguaje, verás que algunos elementos no están pensados para (y no tienen permitido) tener contenido. Estos son los elementos vacíos.

Elementos y atributos

ATRIBUTOS

Los atributos son la forma que tienen los autores de definir propiedades para un elemento. Estas propiedades habitualmente cambian la forma en que los navegadores interpretan al elemento, al cambiar su significado o presentación. Por ejemplo, el elemento a inserta un vínculo en el documento, pero el atributo rel indica la relación entre el documento actual (el que contiene al vínculo) y el recurso de destino (al cual el vínculo está apuntando).

Muchos de los atributos en HTML5, aquellos conocidos como atributos globales, están disponibles para todos los elementos del estándar. Pero la mayoría de los elementos tienen además un conjunto de atributos específicos que sólo están disponibles o específicamente adaptados para ellos.

Como ya hemos visto en ejemplos previos, los atributos son declarados indicando su nombre, seguido de un signo igual ("=") y el valor asignado entre comillas. Pero algunos atributos, que solo pueden tomar valores booleanos (verdadero o falso), aplican su valor tan sólo con su presencia. En estos casos, los atributos pueden ser declarados con sólo indicar su nombre.

En el siguiente ejemplo, el elemento button tiene tres atributos presentes: id y acceskey, que son atributos globales, y disabled(booleano), el cual no es global pero si lo comparten un grupo particular de elementos.

<button id="boton-ok-1" acceskey="O" disabled>Ok</a>

EVENTOS

Los eventos son mecanismos provistos por el estándar HTML, diseñados para permitir a los autores la ejecución de programas en sus páginas web en respuesta a la interacción del usuario o el sistema. El propósito de un evento es el de asociar una acción, llevada a cabo por el usuario o por el sitema (como, por ejemplo, cuando el usuario hace un click sobre un elemento o el documento termina de cargarse), con una función o script, escrito en un lenguaje del lado cliente.

La sintaxis usada para declarar eventos es muy similar a la sintaxis de los atributos y consta de: el nombre del evento seguido por el signo igual ("=") y la función o el script entre comillas.

En el siguiente ejemplo, insertaremos una línea de texto con énfasis (elemento em) con un par de eventos: onmouseover, que llama a su función cuando el puntero del mouse se posa sobre el elemento, y onmouseout, que llama a su función cuando el puntero del mouse pasa a estar fuera del área ocupada por el elemento. Las funciones declaradas en los eventos cambian el color de fondo del elemento para que puedas apreciar mejor la funcionalidad.

Las funciones provistas en este ejemplo se encuentran fuera del enfoque de este sitio web y no serán explicadas en este documento.

<em onmouseover="changeColor(this.parentNode)" onmouseout="changeColor(this.parentNode)">Etiquetas y atributos HTML</em>

Etiquetas y atributos HTML

En HTML5 existe un solo conjunto de eventos, denominado eventos globales. Cada evento en este grupo, puede ser utilizado con cualquier elemento en el estándar, sin importar si el elemento puede activar ese evento o no. En otras palabras, existen algunos eventos, como oncanplay u onautocomplete, que, a pesar de ser globales, están específicamente diseñados para un grupo particular de elementos y no serán activados por los elementos fuera de ese grupo.

En la referencia sobre eventos globales encontrarás una lista de todos los eventos disponibles en HTML5, con descripciones e información acerca de los elementos que son capaces de activarlos.

EJEMPLOS

En esta sección veremos algunos ejemplos, para que puedas comprender mejor la estructura de los elementos. Primero, comencemos por insertar un párrafo (elemento p) donde unas cuantas palabras al comienzo son resaltadas para atraer la atención del usuario. Esto lo hacemos encerrando esas palabras con el elemento b.

<p><b>Para continuar con el proceso</b>, no olvides renovar tu licencia!</p>

Para continuar con el proceso, no olvides renovar tu licencia!

Ahora intentemos algo más complejo, al agregar un enlace. Los enlaces no son enlaces (esto es, no apuntan a otro recurso) si no tienen declarado el atributo href. Así que esta vez insertaremos un vínculo, mediante el elemento a, con una URI en el atributo href (estos conceptos serán tratados posteriormente).

<p>También puedes acceder a los <a href="../../tutorials.html">tutoriales HTML</a> gratuitamente.</p>

También puedes acceder a los tutoriales HTML gratuitamente.

Por último, agregaremos una imagen con el elemento img. Este elemento requiere la presencia del atributo src a fin de mostrar una imagen. Además, declararemos el atributo alt como una alternativa textual al propósito de la imagen.

<p>Nacionalidad: <img src="../../../images/canada-flag-icon.gif" alt="Canada"></p>

Nacionalidad: 

Como habrás notado, img es un elemento vacío, razón por la cual no hay una etiqueta de cierre en el ejemplo anterior.

ESTRUCTURA DE DIRECTORIOS

Al margen de las preferencias personales, las formas en que un sitio web puede ser organizado depende fuertemente de su tipo y alcance. En este tutorial analizaremos algunos modelos que pueden ayudarte a organizar los archivos de tu sitio web y hacer de su actualización un trabajo placentero.

Puede ser definitivamente una buena idea crear un directorio en tu computadora para cada proyecto que comiences. Entonces, todo archivo de un sitio web caerá en algún lugar dentro de su correspondiente carpeta, independientemente de la estructura interna que diseñes para ellos. Habiendo dicho esto, es importante que no crees vínculos en tus documentos a recursos fuera de la carpeta del sitio, ya que estas son propensas a ser trasladados, especialmente si consideras la idea de hacer público tu sitio web.

Acerca del diseño de la estructura interna de tu carpeta, deberías considerar que poner todos los archivos en el directorio principal (también denominado "raíz") puede estar bien para un sitio pequeño (digamos, 5 páginas y 3 imágenes). Pero si tienes que manejar 20 páginas y 200 imágenes, ese modelo organizacional puede convertirse en un serio problema y darte dificultades a la hora de encontrar un documento entre tantas imágenes. Entonces, lo que puedes hacer en tal situación, es comenzar a agrupar los archivos de alguna forma y colocarlos en diferentes directorios para hacer que tu sitio sea un poco más fácil de manejar y actualizar.

ESTRUCTURA PARA SITIOS PEQUEÑOS

Para sitios pequeños es mejor mantener la estructura de directorios simple. Por ejemplo, digamos que tienes un sitio donde muestras tus obras de arte: una colección de 5 imágenes diseñadas por tí mismo. Luego de considerarlo por un momento, decides que construirás una sola página para mostrar las imágeness, más la página de inicio y la de contacto. Esto hace un total de 3 paginas y 5 imágenes. No es mucho, así que puedes optar por la siguiente estructura de directorios:

• 
  

Como puedes ver, la estructura de directorios consiste de un directorio principal o raíz que contiene un sub-directorio llamado "imagenes". En este modelo organizacional pones todo tu arte en el directorio "imagenes" y todos los documentos en el "raíz".

DIVIDIENDO EN CATEGORÍAS

La estructura previa es clara y simple, y trabaja muy bien para los archivos que necesita contener. Pero suponte que, en los meses siguientes, continúas creando más obras de arte. Antes de darte cuenta, tienes 100 imágenes y comienzas a pensar que esta estructura de directorios está quedando obsoleta, en la medida que has colocado más de cien archivos en un solo directorio.

En este escenario, Una solución viable podría ser la división de tus imágenes en grupos temáticos: "flores", "personas", "animales", "fantasia" y "surrealismo". De este modo puedes mostrar todas las imágenes correspondientes a una categoría en una sola página, tienendo una página por cada categoría. Veamos cómo luce esto.

• 
  

Puedes poner ahora, cada imagen en su correspondiente directorio, obteniendo un promedio de 20 imágenes por directorio. Y más aún, estos directorios pueden ser subdivididos: por ejemplo, el directorio, "animales" puede contener sub-directorios como "pajaros", "caballos" o "felinos".

Pero justo cuando comienzas a sentirte bien con esta estructura, agregando y agregando nuevas categorías según es necesario, tus amigos comienzan a pedirte que les des la oportunidad de mostrar sus trabajos en tu sitio. Te gusta mucho esta idea, pero luego de un poco de consideración, te das cuenta que la estructura de directorios actual no será suficiente.

DIVIDIENDO EN SUB-SITIOS

Una buena idea para resolver el problema presentado en el párrafo anterior es utilizar los modelos propuestos en las secciones anteriores pero como sub-seccones del sitio, teniendo como resultado un pequeño sitio para cada uno de los artistas que muestra sus trabajos en él. En este esquema, cada artista tendrá un directorio con todas sus imágenes y páginas organizadas apropiadamente. Echemos un vistazo a esto, para poder continuar mejor con una imagen más clara.

• 
  

Ahora, presta atención a la carpeta "artistas". Esto es un agregado que provee organización y posibilidades de expansión, haciendo a la estructura más flexible frente a la inclusión de nuevos artistas. Y el archivo "index.html" dentro de la carpeta "artistas" contiene un documento que muestra a todos los artistas presentes en el sitio. Colocar este archivo allí resulta apropiado en un sentido de pertenencia: es la lista de artistas; debería estar presente en el directorio "artistas".

Hasta aquí, has visto tres posibles estructuras para tres situaciones diferentes, pero existen muchas más. Podrías, por ejemplo, agregar categorías para las imágenes de cada artista o usar categorías primero y colocar a los artistas dentro de ellas.

Diseñar la estructura de archivos en un sitio web es acerca de encontrar soluciones a un problema de organización. Y una cosa particular acerca de las soluciones (o más específicamente, acerca de los enfoques) es que siempre hay más de una. De modo que los enfoques propuestos en este documento son, en su mejor instancia, una opción entre tantas.

ENTRELAZANDO RECURSOS

Una vez que tengas la estructura de directorios en su lugar, puedes comenzar a crear tus documentos. Y es en este proceso que necesitarás saber cómo llegar a un recurso particular en la estructura para, por ejemplo, incluir una imagen en un documento o estrablecer un vínculo.

Existen dos formas de construir un vínculo: usando URLs completos o URIs relativos. La forma más sencilla de hacerlo es utilizando un URL completo, y por allí es por donde comenzaremos.

UTILIZANDO URLS COMPLETOS

Este método de refereniar a un recurso, consiste en especificar su dirección completa (o URL), la cual incluye el nombre de la computadora. Como la dirección es completa, no interesa si el recurso está siendo referenciado desde el mismo directorio o desde una computadora al otro lado del mundo: la dirección es única y universal. Y eso es lo que hace a este método mucho más sencillo: sólo necesitas saber cuál es la dirección del recurso y usarla, tal y como es, cuando sea necesario.

Veamos un ejemplo de esto. Suponte que, en la última estructura de directorios analizada, necesitas establecer un vínculo a la biografía de Isaac. En tal caso deberías escribir, mirando la estructura de directorios, cada carpeta que tienes que atravesar para llegar desde el directorio raíz al archivo "bio.html" en la carpeta de Isaac, separando las carperas entre sí con una barra ("/"). Al hacer este proceso obtendrás "raiz/artistas/isaac/bio.html", pero no me creas a mi y fíjate por tí mismo.

• 
  
• 
  

Todo lo que resta hacer con esta ruta es reemplazar el directorio raíz por el nombre de la computadora precedido por el protocolo (normalmente "http://"). Por ejemplo, si esta estructura está alojada en el sitio web "www.hey-este-es-mi-arte-bro.com", el URL para la biografía de Isaac sería "http://www.hey-este-es-mi-arte-bro.com/artistas/isaac/bio.html".

Este método es bueno para establecer vínculos a recursos fuera de la computadora que aloja al documento. Pero como tal vez ya te hayas dado cuenta, su lado malo para vínculos internos (entre dos recursos en la misma computadora) es que depende de conocer el nombre de la computadora para determinar la ubicación de un recurso. Esta particularidad implica que mudar un sitio a un nuevo servidor o cambiar su nombre de dominio, requiere la actualización de todos los vínculos que utilicen URLs. Las siguientes alternativas solucionarán este problema.

UTILIZANDO REFERENCIAS DE RUTA ABSOLUTAS

A veces, puede ser útil hacer un vínculo a un recurso en la misma computadora por su URL, pero sin tener que especificar el nombre de la computadora, ya que sabemos que está en la misma máquina. Esto podría evitar los problemas relacionados al cambio de nombre de dominio del sitio que mencionamos anteriormente.

Afortunadamente, las referencias de ruta absolutas hacen exactamente eso. Con una referencia de ruta absoluta puedes utilizar el mismo método que para los URLs, pero en lugar de reemplazar el directorio raíz por el nombre de la computadora y el protocolo, solo debes eliminarlo. Una referencia de ruta absoluta para la biografía de Isaac sería entonces "/artistas/isaac/bio.html". Esta ruta podría ser utilizada por cualquier documento en el mismo sitio web, independientemente del nombre de dominio asociado a éste.

UTILIZANDO REFERENCIAS DE RUTA RELATIVAS

Las referencias de ruta relativas, también conocidas como URIs relativas, no tratan simplemente de determinar la ubicación del recurso. En este método, es igualmente importante desde dónde se hace la referencia al recurso. Esto es lo que las hace relativas.

Para ilustrar esto con un ejemplo, supongamos que necesitas crear un vínculo desde la página principal de la sección de artistas (el documento "index.html" en el directorio "artistas") a las imágenes de Isaac (el documento "imagenes.html" en la carpeta "isaac"). El proceso es el mismo que usamos previamente: recorrer la estructura, tomando nota de cada directorio que atraviesas, hasta que llegas al recurso, separando las carpetas entre sí con una barra ("/"). La particularidad esta vez es el directorio desde el cual debes empezar.

Con los métodos anteriores, siempre comienzas desde el directorio raíz, pero en este caso tienes que empezar desde el directorio que contiene al documento donde se encuentra el enlace. La carpeta que contiene al documento con el vínculo es, en este caso, "artistas". La ruta resultante de este proceso es "isaac/imagenes.html".

• 
  
• 
  
• 
  

Puedes estar preguntándote por qué el directorio donde se encuentra el documento con el vínculo no está incluido. Esto se debe a que el documento está en ese directorio y la siguiente cosa que necesitas saber para encontrar el recurso referido es a dónde ir desde allí.

Existe un caso especial a considerar con los URIs relativos, que sucede cuando necesitas moverte hacia arriba en la estructura de directorios. En tal caso no puedes simplemente ir tomando nota de todos los directorios que atraviesas en tu camino hacia arriba. Esta simplemente no es la forma apropiada. Para indicar que te estás moviendo un nivel hacia arriba en la estructura de directorios debes usar el directorio especial ".." (dos puntos), el cual representa al directorio padre de un directorio.

Ya que existe una sola forma de ir hacia arriba en la estructura de directorios, los URIs usan el directorio especial ".." en lugar del nombre del directorio. Asimismo, se espera que todos los directorios especificados por nombre se encuentren camino abajo.

Para ejemplificar esto, suponte que necesitas establecer un vínculo a la página de contacto ("contacto.html") desde la biografía de Isaac (documento "bio.html" en la carpeta "isaac"). Comenzando desde la carpeta que contiene al documento con el vínculo ("isaac"), la ruta resulta en "../../contacto.html" (sí, nos desplazamos dos veces hacia arriba).

• 

• PRÁCTICA

  Esta práctica consistirá en la creación de una estructura básica de directorios que contendrá al documento que hemos venido desarrollando en las prácticas anteriores. Consideraremos a este sitio como un proyecto estilo blog donde el archivo creado hasta ahora, es una de sus publicaciones.
  Antes de empezar a considerar la estructura de directorios, necesitamos crear una carpeta y arrojar nuestro archivo allí dentro. Puedes llamar a esta carpeta como quieras ("miblog", "primerproyecto", "practica", "raiz", etc). Su nombre no es importante, siempre y cuando puedas identificar la carpeta del sitio web en el sistema de archivos de tu computadora. En cualquier caso, debes tener presente que esta carpeta actuará como el directorio raiz del sitio web.
  Crear una carpeta es un proceso que puede variar dependiendo del sitema operativo que utilices, pero nunca demasiado. Aquí explicaré cómo crear una carpeta en Windows 8, y dejaré que descifres cómo hacerlo en otros sistemas operativos.
  Para crear una carpeta en Windows 8, tienes que hacer un click derecho sobre el escritorio (o la carpeta en la que te encuentras) y, cuando el menú contextual se despliegue, seleccionar las opciones "Nuevo" y luego "Carpeta". A continuación, selecciona un nombre para tu nueva carpeta y presiona ENTER.
  Eso es todo. Ahora, arroja el archivo dentro y estamos listos hasta aquí. Deberías tener la siguiente estructura:
  
  • 
    
  Ya puedes cambiar el nombre de tu archivo por algo más significativo, como "aprendiendo-html.html". Esto mejorará la organización del sitio y te permitirá identificar al archivo durante un proceso de actualización. Puedes elegir otro nombre, pero ten en cuenta que yo me referiré a este archivo como "aprendiendo-html.html".
  Es hora de agregar algunas carpetas a esta estructura. Por ahora, solamente estaremos creando una carpeta llamada "recursos" dentro de nuestro raíz, y luego dos carpetas más llamadas "imagenes" y "videos" dentro de la primera. El proceso de creación de una carpeta es simple y se ha tratado anteriormente en esta práctica. La única particularidad en este caso es que debes hacerlo dentro de la carpeta correspondiente para obtener la estructura deseada. Al final, deberías tener esta estructura:
  
  • 
    
  Lo próximo que debes hacer es agregar un archivo "index". En este documento, podrías presentarte al usuario y contarle acerca de los temas tratados en tu sitio web. Pero lo más importante de todo, es que este archivo "index" es lo que se mostrará cuando un usuario entre a tu sitio por primera vez. Este es el vestíbulo de tu sitio, así que será mejor que lo utilices para recibir a tus invitados.
  Hasta este punto, la estructura debería verse así:
  
  • 
    
  Como este es un sitio web al estilo blog, se supone que agregarás al menos un artículo por semana. A este ritmo, tu directorio raíz pedría volverse un lío muy pronto. En un intento de prevenir tal situación, haremos un par de cosas: primero, crearemos una carpeta "publicaciones" para contener a todos los artículos; y segundo, dividiremos los artículos por mes (una carpeta por cada mes). Por ahora, solo agregaremos la carpeta para el mes corriente, que incluirá en su nombre el mes y el año ("2018-06") para evitar ambigüedades.
  Por último, no olvides mover el archivo a su nueva ubicación y revisa que tu estructura quede así:
  
  Como puedes ver en la estructura anterior, también existe un archivo "index.html" dentro de la carpeta "publicaciones". Este archivo se supone listará todos los artículos del sitio. Al comienzo será solamente un archivo, pero en la medida que tu colección siga creciendo, tendrás que pensar en dividirlo en dos o más archivos, una técnica conocida como "paginación".
  Aquí te recomiendo que hagas una pausa, que comiences a crear otros documentos para llenar esta estructura y que enlaces los documentos unos con otros, de modo que se consolide el conocimiento hasta aquí adquirido. Cuando creas que has tenido suficiente, puedes pasar al siguiente tutorial.

VÍNCULOS EN HTML

CONCEPTO

Los vínculos son una parte vital de HTML y consituyen la razón misma por la cual la WWW existe. Internet es considerada una "red" debido a cómo los vínculos conectan todas estas partes singulares (o documentos) unas con otras.

La función básica de un vínculo es la de hacer una referencia, de un documento HTML a un recurso, que puede ser a su vez otro documento. En otras paralabras, un enlace define una relación entre dos recursos en la web.

EL ELEMENTO A

El elemento a puede ser utilizado para insertar vínculos dentro del contenido del documento. En general estos vínculos, en conjunto con las funcionalidades de los navegadores, permiten a los usuarios trasladarse de un documento a otro de una manera muy directa.

Los navegadores resaltan el contenido de este elemento (por defecto, mostrándolo en azul y subrayado) y permiten a los usuarios seguir el vínculo con un click.

De entre las muchas formas que los autores tienen para construir un vínculo, la más básica consiste en el elemento a con su contenido (el texto entre las etiquetas de apertura y cierre) y una referencia al recurso apuntado (una URI especificada en el atributo href). En el ejemplo siguiente definiremos un vínculo básico siguiendo este criterio: la etiqueta de apertura con la URI del recurso en el atributo href, el contenido y la etiqueta de cierre.

Para mejorar la accesibilidad, el texto de un vínculo (habitualmente conocido como "anchor text") debe proveer una descripción concisa acerca de los contenidos del recurso enlazado.

<a href="../reference/uri-url.html">Definición de URI y URL</a>

Definición de URI y URL

Si te estás preguntando qué es esa "URI", no te preocupes. Por ahora solamente digamos que es una "ruta" para ir desde un recurso a otro. Más tarde, veremos este tema en detalle en el tutorial "Organizando un sitio web".

En el ejemplo anterior creamos un vínculo con una línea de texto como contenido, pero en realidad puedes enlazar casi cualquier cosa con el elemento a, especialmente desde que HTML5 entró en la escena. En el siguiente ejemplo haremos un vínculo con un trozo de documento que incluye una imagen (img) y texto.

<a href="http://www.w3.org/">
  <img src="../../images/w3c-icon.gif">
  El consorcio de la WWW
</a>

 El consorcio de la WWW

ENLAZANDO A FRAGMENTOS

Un vínculo también puede ser más específico y enlazar a un fragmento particular de otro documento. Para crear este tipo de vínculos, debes llevar a cabo dos tareas:

1. Preparar el documento de destino, agregando un atributo id al elemento al que necesitas enlazar. Es un buena práctica crear enlaces dirigidos a secciones de un documento, definidas mediante elementos de seccionamiento como section, article, h1, etc. Cualquiera sea el identificador que uses en este atributo, lo necesitarás en la segunda parte de este proceso.
2. Crear el vínculo en el documento de origen (con el elemento a) agregando al URI del documento de destino, un símbolo numeral ("#") y el identificador usado en el paso anterior.

Para dejarlo más claro, veamos un ejemplo. Primero, analizaremos la estructura de este sitio web con el fin de hacer un vínculo a una de sus secciones. En cualquiera de sus páginas, encontrarás un buen número de atributos id siendo usados para propósitos de vinculación. De hecho, cada sección en este documento está lista para ser enlazada. En el siguiente código, develaremos la estructura de la primera sección en este documento, llamada "Concepto".

<section id="concept">
  <h2>Concepto</h2>
  ... contenido, ejemplos, etc. ...
</section>

Aquí puedes ver, básicamente, tres cosas: el elemento section estableciendo límites y conteniendo a todos los elementos de la sección; el encabezado h2 definiendo un título para la sección; y el contenido. Tomando ventaja de la presencia del elemento section, establecimos el atributo id allí, para que los vínculos puedan hacer referencia a "esta sección del documento".

Ahora viene la segunda parte donde estableceremos un vínculo que apunte a esa sección. Esto es más bien simple, y consiste básicamente en la creación de un vínculo a esta misma página, agregando el símbolo numeral ("#") y el valor del atributo id de la sección enlazada, al URI en el atributo href. Debido a que estamos enlazando desde y hacia el mismo documento, el URI es la cadena vacía (""). Agregando a éste el símbolo numeral ("#") y el id obtenemos "#concept".

Creemos ese vínculo en un ejemplo y veamos qué hace el navegador por nosotros cuando hacemos click sobre él.

<a href="#concept">Volver a la sección "Concepto"</a>

Volver a la sección "Concepto"

Como puedes ver, el navegador hace lo mismo que con los enlaces comunes: te lleva al contenido enlazado.

VÍNCULOS DE E-MAIL

La idea detrás de este tipo de vínculos no trata acerca de la alteración del elemento o de la utilización de uno nuevo. El secreto de los vínculos de e-mail es que existe un tipo particular de URI que ha sido especialmente diseñado para lacanzar recursos a través de la mensajería de Internet.

Entonces, la clave de este asunto está en cómo estas URIs son construidas. El formato más básico de URI de e-mail consiste en la cadena "mailto:" seguida por una lista de una o más direcciones de e-mail separadas por comas. El siguiente ejemplo utiliza esta estructura en una vínculo real.

<a href="mailto:webmaster@htmlquick.com">mándame un e-mail!</a>

mándame un e-mail!

La acción típica que los navegadores llevan a cabo cuando haces click en este vínculo es la de abrir la aplicación de e-mail predeterminada y componer un nuevo mensaje con la información provista por el vínculo. Pero cuando el sistema no posee un cliente de e-mail predeterminado, la activación de este vínculo no tiene consecuencias en absoluto.

También existe la posibilidad de proveer información adicional para completar otros campos en el e-mail compuesto, como Cc, Bcc, sujeto y cuerpo. Para incluir uno o más de estos campos en el link necesitas agregar, luego de la lista de direcciones de e-mail, un signo de interrogación ("?") y la ista de parámetros separados por un signo "&". Ahora, cada uno de estos parámetros también tienen una estructura específica, que consiste del nombre del parámetro (Cc, Bcc, subject, body) seguido por un símbolo igual ("=") y el valor.

Este parte se tornó un tanto complicada, así que usaremos el siguiente ejemplo para hacer todo esto más tangible. Allí, agregaremos al ejemplo anterior, una segunda dirección a campo Cc, un sujeto y un cuerpo.

<a href="mailto:webmaster@htmlquick.com?cc=archive@htmlquick.com&subject=Desde_la_web...&body=Pon_tu_mensaje_aqui...">mándame un e-mail!</a>

mándame un e-mail!

Podrías preguntarte por qué usamos guiones bajos ("_") en lugar de espacios en el ejemplo anteior. Esto se debe a que estamos escribiendo en un URI, y los URIs necesitan que algunos caracteres sean codificados (espacios, barras, signos de interrogación, etc). De modo que, en un esfuerzo por mantener las cosas simples, reemplazamos los espacios por guines bajos.

Peor antes de irnos, veamos cómo luce ese ejemplo anterior con los espacios codificados ("%20").

<a href="mailto:webmaster@htmlquick.com?cc=archive@htmlquick.com&subject=Desde%20la%20web...&body=Pon%20tu%20mensaje%20aquí...">mándame un e-mail!</a>

mándame un e-mail!

Complicado, ¿no?. Pero no te preocupes, te acostumbras con el tiempo.

EL ELEMENTO LINK

El elemento link puede ser utilizado de dos formas. Esta sección sólo cubrirá uno de estos usos (con el atributo rel), dejando el otro para ser tratado más tarde.

Este tipo de vínculo es muy particular. Es utilizado para proveer información relacional acerca del documento entero, razón por la cual sólo es declarado en el encabezado del documento (head).

Los vínculos declarados con el elemento link permanecen habitualmente ocultos del usuario. Aún así, su información podría ser mostrada, por ejemplo, en una barra de herramientas o en una ventana con información resumida.

Las muchas relaciones que este elemento puede establecer, dependen principalmente del valor del atributo rel. En los casos más usuales define la estructura del sitio web (documento próximo o anterior), provee versiones alternativas del documento (para impresora, en otro lenguaje, etc.) y apunta a recursos externos con información de estilo para el documento.

El siguiente ejemplo muestra la sección de encabezado de un documento con la siguiente información relacional (en ese orden): un índice; los documentos siguiente y anterior en una secuencia; información sobre los derechos de copia del documento; una versión alternativa para impresión; una versión alternatica en inglés; y un recurso con información de estilo para ser aplicada en el documento.

<head>
<link rel="index" href="index.html" />
<link rel="prev" href="doc1.html" />
<link rel="next" href="doc3.html" />
<link rel="license" href="copyright.html" />
<link rel="alternate" media="print" href="doc2-impresora.html" />
<link rel="alternate" lang="en" href="en/doc2.html" />
<link type="text/css" href="estilos.css" media="screen" />
</h

TABLAS EN HTML

Este tutorial presenta el concepto de tabla y analiza su estructura y algunas de sus propiedades más básicas. Se enfoca escencialmente en aquellos aspectos de las tables que se utilizan regularmente en el desarrollo de documentos.

TABLA DE CONTENIDOS

• 01Concepto
• 02Celdas de encabezado
  • El atributo scope
• 03El título
• 04Unificación de celdas
• 05Agrupando filas
• 06Grouping columns
• 07Práctica

CONCEPTO

Una tabla no es otra cosa más que un medio de organizar datos en filas y columnas. Este concepto ha estado presente en nuestra sociedad por un largo período de tiempo y ha sido adoptado por HTML en sus etapas iniciales, como una forma de transmitir información que, de otro modo, no sería comprendida tan fácilmente.

En documentos HTML una tabla puede ser considerada, resumidamente, como un grupo de filas donde cada una contiene a un grupo de celdas. Esto es conceptualmente distinto a un grupo de columnas que contiene a un grupo de filas, y esta diferencia tendrá un impacto en la composición y comportamiento de la tabla.

Como muchas otras estructuras de HTML, las tablas son construidas utilizando elementos. En particular, una tabla básica puede ser declarada usando tres elementos, a saber, table (el contenedor principal), tr (representando a las filas contenedoras de las celdas) y td (representando a las celdas). Dejémoslo más claro con un ejemplo:

<table class="egt">
  <tr>
    <td>Celda 1</td>
    <td>Celda 2</td>
    <td>Celda 3</td>
  </tr>
  <tr>
    <td>Celda 4</td>
    <td>Celda 5</td>
    <td>Celda 6</td>
  </tr>
</table>

Celda 1	Celda 2	Celda 3
Celda 4	Celda 5	Celda 6

Ten en cuenta que a esta tabla se le han aplicado estilos mediante CSS para mejorar su comprensión y legibilidad. No se deberían esperar estos resultados en tablas sin atributos presentacionales asignados.

Puedes ver claramente en el ejemplo anterior, el concepto de filas conteniendo columnas del que hablamos previamente. Aquí se hace evidente como las celdas, que han sido numeradas de acuerdo a su aparición en el código, siguen una secuencia en la representación que va de izquierda a derecha, una fila por vez. Esto tendrá implicaciones futuras, especialmente cuando se trate el tema de unificación de celdas y agrupamiento.

CELDAS DE ENCABEZADO

Ahora que ya hemos tratado la estructura básica de una tabla, es hora de comenzar a crear tablas más útiles.

Una celda de encabezado es un tipo especial de celda utilizada para organizar y categorizar otras celdas en la tabla. Dicho esto, es diícil imaginar una tabla donde una celda de encabezado no tenga utilidad. Casi cualquier tabla puede beneficiarse de un grupo de celdas de encabezado bien ubicado.

En el siguiente ejemplo, construiremos una tabla para mostrar información acerca del clima en los próximos días. Aquí, las celdas de encabezado, representadas por el elemento th, son ubicadas en la primera fila de la tabla, encima de las celdas comunes.

<table class="egt">
  <tr>
    <th>Hoy</th>
    <th>Mañana</th>
    <th>Viernes</th>
  </tr>
  <tr>
    <td>Soleado</td>
    <td>Mayormente soleado</td>
    <td>Parcialmente nublado</td>
  </tr>
  <tr>
    <td>19°C</td>
    <td>17°C</td>
    <td>12°C</td>
  </tr>
  <tr>
    <td>E 13 km/h</td>
    <td>E 11 km/h</td>
    <td>S 16 km/h</td>
  </tr>
</table>

Hoy	Mañana	Viernes
Soleado	Mayormente soleado	Parcialmente nublado
19°C	17°C	12°C
E 13 km/h	E 11 km/h	S 16 km/h

Es fácil ver aquí cómo cada celda de encabezado en la tabla, provee información para el resto de las celdas en la columna a la que pertenece. Algunos agentes, como los navegadores de voz, hacen el mismo análisis cuando deben informar al usuario qué celda de encabezado está asociada a una celda en particular. Pero en algunos casos, las ambigüedades necesitan ser evitadas y es por este motivo que HTML provee algunos atributos como scope.

EL ATRIBUTO SCOPE

El atributo scope provee un mecanismo para indicar explícitamente a qué celdas afecta una celda de encabezado. Este atributo solo puede ser declarado en una celda de encabezado y tomar los valores "col", "row", "colgroup" y "rowgroup". Los valores "col" y "row" indican que la celda de encabezado provee información para el resto de las celdas en la columna o fila (respectivamente) en que está presente. Los otros dos valores tendrán sentido más adelante en este tutorial.

En el siguiente ejemplo, la tabla presentada anteriormente ha sido mejorada con más celdas de encabezado, con el fin de aumentar la legibilidad. Aquí, la celda en la esquina superior izquierda de la tabla, proveería información ambigua si el atributo scope no estuviera presente. En otras palabras, afectaría a las celdas en su columna, así como a las celdas en su fila. La presencia del atributo scope ha dejado en claro que las celdas afectadas por este encabezado son aquellas en la misma fila.

<table class="egt">
  <tr>
    <th scope="row">Día</th>
    <th>Hoy</th>
    <th>Mañana</th>
    <th>Viernes</th>
  </tr>
  <tr>
    <th>Condición</th>
    <td>Soleado</td>
    <td>Mayormente soleado</td>
    <td>Parcialmente nublado</td>
  </tr>
  <tr>
    <th>Temperatura</th>
    <td>19°C</td>
    <td>17°C</td>
    <td>12°C</td>
  </tr>
  <tr>
    <th>Vientos</th>
    <td>E 13 km/h</td>
    <td>E 11 km/h</td>
    <td>S 16 km/h</td>
  </tr>
</table>

Día	Hoy	Mañana	Viernes
Condición	Soleado	Mayormente soleado	Parcialmente nublado
Temperatura	19°C	17°C	12°C
Vientos	E 13 km/h	E 11 km/h	S 16 km/h

HOJAS DE ESTILO EN CASCADA (CSS)

Este tutorial está pensado para presentar el concepto y la utilización básica de CSS*. En sus páginas, intentaré cubrir los aspectos básicos de las hojas de estilo, lo que te permitirá continuar aprendiendo con recursos más específicos.

*CSS (Cascading Style Sheets, u Hojas de Estilo en Cascada) es la tecnología desarrollada por el World Wide Web Consortium (W3C) con el fin de separar la estructura de la presentación.

CONCEPTO

CSS es un estándar diseñado principalmente para separar los atributos presentacionales (como el color de fondo, el tamaño de la fuente o la sangría) del contenido. Aunque éste puede trabajar con muchos tipos de documentos, es mayormente utilizado como una forma de proveer información presentacional en páginas web.

La separación entre contenido y presentación mejora la flexibilidad, permitiendo a los autores definir un único conjunto de estilos que miles de documentos utilizarán, reduciendo así el tiempo y trabajo que se debe invertir en cada actualización. Asimismo, la implementación de CSS permite a un documento ser exclusivamente semántico, al liberarlo de la necesidad de usar elementos presentacionales.

DECLARACIONES, PROPIEDADES Y VALORES

La declaración es la unidad básica de CSS, lo que significa que no puedes usar nada más pequeño que esto en tus documentos. Una declaración consiste, básicamente, en la asignación de un valor a una propiedad.

En otras palabras, una declaración es la respuesta a una pregunta. ¿Qué tan ancho debería ser esta tabla? ¿Cuán grueso este borde? ¿De qué color debería ser este fondo? ¿Qué tan grande la fuente en este párrafo? Y es exactamente así cómo defines el aspecto de tu documento: estableciendo declaraciones, una para cada propiedad que necesitas definir.

Pero CSS tiene un formato específico que debe seguir toda declaración. Éste consiste en el nombre de la propiedad seguido de dos puntos (":") y el valor que le será asignado. Cuando se provee más de una declaración en el mismo bloque, cada declaración debe ser separada de su próxima por un punto y coma (";"). Este es el motivo por el cual los autores normalmente usan un punto y coma al final de cada declaración, independientemente de la presencia de declaraciones siguientes. El próximo esquema describe las partes de una declaración CSS.

colorpropiedad: redvalor;

En el siguiente ejemplo, un conjunto de declaraciones son presentadas utilizando este formato. Aquí un quiebre de línea adicional es agregado al final de cada declaración, a fin de mejorar la legibilidad.

background-color: green;
font-size: 16px;
margin-top: 40px;
font-weight: bold;

SELECTORES

Con lo visto hasta el momento podemos construir declaraciones, pero ¿cómo indicamos qué elementos en el documento deben ser afectados por éstas? Aquí es donde los selectores CSS entran en la escena. Un selector es el medio para hacer una referencia a un grupo de uno o más elementos HTML, con el fin de aplicar a éste un conjunto de declaraciones CSS.

Existe una estructura con la que debes cumplir para usar un selector y está compuesta por el selector seguido del conjunto de declaraciones encerradas por llaves ("{}"). El siguiente ejemplo, en el cual espacios y quiebres de línea han sido agregados para mejorar la legibilidad, refleja esta estructura.

[selector] {
  background-color: green;
  font-size: 16px;
  margin-top: 40px;
  font-weight: bold;
}

Existe un amplio conjunto de selectores disponibles, lo que se traduce en una flexibilidad excepcional para la manipulación de propiedades. En las secciones siguientes, veremos algunos de los selectores más básicos, ya que éstos presentarán las ideas sobre las cuales otros selectores se constituirán.

EL SELECTOR UNIVERSAL

El selector universal se corresponde con todos los elementos en el documento. Éste es como una especie de comodín que tiene más sentido al ser usado en combinaciones. El siguiente código establece un par de propiedades para todos los elementos en el documento.

* {
  font-size: 1.5em;
  color: #444;
}

SELECTORES DE TIPO

El selector de tipo se corresponde con todos los elementos en el documento que tienen el tipo especificado. Con este selector puedes aplicar declaraciones a, por ejemplo, todos los párrafos (elementos p), todos los ítems de listas (elemento li) o todos los vínculos (elementos a) de un documento. El siguiente ejemplo provee declaraciones para todas las listas ordenadas (elementos ol) del documento.

ol {
  margin-left: 0;
  padding-left: 2em;
}

SELECTORES DE ID

El selector de ID se corresponde con todos los elementos que tienen el valor especificado en su atributo id. Como, por definición, los valores de id deben ser únicos, este selector puede afectar sólo a un elemento en el documento. En su declaración, el ID especificado debe estar precedido por el signo numeral ("#").

El siguiente ejemplo muestra un conjunto de declaraciones que están siendo aplicadas a un elemento que tiene el valor "titulo1" en el atributo id.

#titulo1 {
  font-size: 4em;
  color: blue;
  text-decoration: underline;
}

Para dejarlo absolutamente en claro, las declaraciones anteriores afectarían a un elemento como el siguiente.

<h1 id="titulo1">Abrazando las posibilidades</h1>

SELECTORES DE CLASE

Una clase es un concepto introducido por CSS con el propósito de agrupar declaraciones y aplicarlas a un conjunto personalizado de elementos, independientemente de su tipo o naturaleza. Desde otro punto de vista, una clase es una o más declaraciones CSS, agrupadas bajo un nombre que los elementos pueden utilizar para acceder a sus definiciones y ser afectados por ellas.

Dicho esto, un selector de clase aplica un conjunto de delcaraciones a todos los elementos que tienen el nombre de clase especificado en su atributo class. En su construcción, un punto (".") debe preceder al nombre de la clase. El siguiente ejemplo muestra un conjunto de declaraciones para la clase llamada "importante".

.importante {
  font-size: 1.2em;
  font-weight: bold;
  color: red;
}

Y estas declaraciones afectarían a elementos como los siguientes.

<h3 class="importante">Cuidado</h3>
<p class="importante">No abra la escotilla durante viajes interestelares!</p>

SELECTORES AVANZADOS

CSS permite realizar combinaciones con los cuatro selectores básicos descriptos arriba, haciendo referencia a las relaciones entre padres, hijos, hermanos, descendientes y más. Con algunas de estas herramientas podrías, por ejemplo, aplicar declaraciones a todos los párrafos que son hijos directos del cuerpo (body). Además, provee otros selectores basados en la composicón de los atributos o los estados que un elemento presenta, permitiendo a los autores aplicar declaraciones a, por ejemplo, todos los elementos input que son de tipo "radio" (atributo type).

A pesar de que algunos de los más nuevos son pobremente soportados, estos selectores avanzados son extremadamente útiles en el desarrollo de sitios web complejos. Sin embargo, no serán tratados en este tutorial debido a su acance. Esta sección es meramente informativa.

USO DE ESTILOS EN UN DOCUMENTO

Todo lo que hemos visto hasta ahora no es suficiente para usar nuestros estilos en un documento HTML real, ya que todavía no sabemos donde colocar las declaraciones CSS. El eslabón final en esta cadena es permitir a los agentes de usuario saber dónde pueden encontrar información de estilos para el documento que están interpretando. Y esto es algo que le corresponde a HTML.

Para este propósito, HTML presenta tres métodos para agregar información de estilo a un documento. Éstos son descriptos en las secciones siguientes.

EL ATRIBUTO STYLE

El uso del atributo style es la forma más fácil y directa de aplicar declaraciones de estilo a un elemento. Este atributo puede tener como contenido, cualquier número de declaraciones de estilo, separadas unas de otras por un punto y coma (";"). Como style es un atributo global, puede ser usado en cualquier elemento de HTML.

El ejemplo siguiente algunas propiedades de estilo son aplicadas a un par de elementos, mediante el atributo style.

<p style="background-color: gray;">Hola! Este va a ser un <b style="color: white; text-decoration: underline;">gran</b> día!</p>

Hola! Este va a ser un gran día!

Pero a pesar de toda su simplicidad e inmediatez, el uso de este método rompe de alguna manera uno de los principales beneficios de CSS: la posibilidad de crear declaraciones de estilo que pueden ser reutilizadas en tantos elementos como sea posible, algo que se traduce en flexibilidad y portabilidad. Solo imagínate teniendo que aplicar este mismo estilo a cientos de elementos en tus documentos.

Esto no significa que este enfoque no sea útil. De hecho, puede ser muy pertinente usarlo cuando necesitas aplicar un estilo a un solo elemento y por única vez. De cualquier modo, las alternativas siguientes resolverán el problema mencionado en el párrafo anterior.

EL ELEMENTO STYLE

El elemento style es un contenedor para declaraciones de estilo. Dentro de este elemento podemos arrojar cualquier número de declaraciones de estilo, siempre y cuando estén correctamente organizadas en grupos de selectores. En otras palabras, todos los ejemplos vistos en la sección sobre selectores, pueden ser ubicados en medio de las etiquetas de este elemento.

Este elemento tiene la particularidad de que, cuando es utilizado en su forma tradicional (esto es, sin que el atributo scoped esté presente), sólo puede ser declarado en la sección del encabezado (head) del documento.

El siguiente ejemplo muestra un extracto de un documento donde el elemento style está siendo utilizado para proveer atributos a algunos elementos en el cuerpo (body). Más específicamente, dos selectores de tipo proveen reglas de estilo para los elementos h1 y p.

<head>
  <title>Hombre de negro</title>
  <style>
    h1 {
      background-color: gray;
      margin: 0;
    }
 
    p {
      background-color: black;
      color: white;
      margin: 0;
    }
  </style>
</head>
<body>
  <h1>Mi color favorito</h1>
  <p>¿Te atreverías a adivinar cuál es mi color favorito?</p>
</body>

MI COLOR FAVORITO

¿Te atreverías a adivinar cuál es mi color favorito?

Ahora, con este método podemos compartir declaraciones entre los muchos elementos presentes en una misma página. Pero, ¿es posible tener declaraciones de estilo inter-documentos? Esto es algo que sólo se puede lograr con nuestro último enfoque.

ARCHIVOS EXTERNOS

La ventaja de utilizar un archivo externo para almacenar información de estilo reside en la posibilidad de compartir ese archivo entre un gran número de documentos. Cuando un documento es cargado, el navegador detecta la referencia al archivo de hojas de estilo, cargando y aplicando los estilos como si fueran parte del documento.

Un archivo externo de hojas de estilo puede ser insertando en el documento con el elemento link, teniendo el valor "text/css" en el atributo type, y el URI del archivo de hojas de estilo en el atributo href. Ten presente que, como style, este elemento solo puede estar ubicado en el bloque de encabezado (head) del documento.

Acerca de los contenidos del archivo de hojas de estilo, debe presentar el mismo tipo de información que encajaría en un elemento style, esto es, cualquier número de declaraciones de estilo organizadas en grupos de selectores. El código siguiente muestra el mismo documento presentado en el ejemplo anterior, solo que aquí la información de estilo se encuentra ubicada en un archivo externo.

<head>
  <title>Hombre de negro</title>
  <link type="text/css" href="estilos.css">
</head>
<body>
  <h1>Mi color favorito</h1>
  <p>¿Te atreverías a adivinar cuál es mi color favorito?</p>
</body>

MI COLOR FAVORITO

¿Te atreverías a adivinar cuál es mi color favorito?

HERENCIA

La herencia es un concepto por el cual los elementos descendientes heredan las propiedades declaradas para sus ancestros. Esto no es otra cosa más que el comportamiento deseado, y evita tener que redefinir las mismas propiedades en los hijos de un elemento. El siguiente ejemplo es prueba de la herencia en CSS. Allí, los elementos heredan todas las propiedades definidas para su ancestro, el cuerpo del documento (body).

<head>
  <title>Tormenta en el mar rojo</title>
  <style>
    body {
      color: red;
      font-style: italic;
    }
  </style>
</head>
<body>
  <h1>Tormenta en el mar rojo</h1>
  <p>Este viento está torciendo mi texto...</p>
</body>

TORMENTA EN EL MAR ROJO

Este viento está torciendo mi texto...

EL ORDEN DE ESPECIFICIDAD

Los estilos de diferentes orígenes y selectores son aplicados en un orden específico y unívoco. Este orden de especificidad ayuda a resolver conflictos y hace al sistema más predecible, lo que permite a los autores planear su esquema de estilos con certeza. Por ejemplo, si utilizas el atributo style y, dentro de un elemento style, un selector de clase para definir la misma propiedad de un elemento, la definición en el atributo style prevalecerá.

La siguiente lista muestra el orden de especificidad que se aplica en CSS. Cada forma de aplicar estilos en esta lista prevalecerá cuando compita con aquellos debajo de sí.

1. El atributo style.
2. El slector de ID.
3. El selector de clase.
4. El selector de tipo.
5. El selector universal.

En el próximo ejemplo, el color del párrafo está siendo definido dos veces: en el atributo style y en el selector de tipo. Como puede preverse, el color definido en el atributo style prevalecerá.

<head>
  <title>Por qué amo las máquinas de arcade</title>
  <style>
    p {
      color: gray;
    }
  </style>
</head>
<body>
  <h1>Por qué amo las máquinas de arcade</h1>
  <p style="color: blue">Todavía puedo oler la ficha de metal en mi mano cuando cierro los ojos...</p>
</body>

POR QUÉ AMO LAS MÁQUINAS DE ARCADE

Todavía puedo oler la ficha de metal en mi mano cuando cierro los ojos...

Por supuesto, la lista descripta anteriomente no dice nada acerca de los selectores avanzados, donde las combinaciones llevan al orden de especificidad lejos de la simplicidad. Sin embargo, existe un sistema para trabajar con eso también, pero el alcance de este tutorial evitará que hablemos al respecto. De cualquier modo, no deberías necesitarlo todavía, así que enfócate en los aspectos básicos y continúa con la práctica.

•