martes, diciembre 27, 2011

Tutorial de desarrollo web, parte XII: Formato con HTML

Previously, on The CubeBlog...
Parte I: Introducción
Parte II: Hola, mundo
Parte III: Estructurando el texto. Encabezados, párrafos y saltos de línea. Entidades
Parte IV: Hipervínculos e imágenes. Atributos. Rutas absolutas y relativas
Parte V: Introducción al CSS
Parte VI: Jerarquía en HTML. Herencia en CSS
Parte VII: Tablas (1). Bordes CSS (1)
Parte VIII: Tablas (2). Bordes CSS (2)
Parte IX: Identificadores y clases (1)
Parte X: Listas
Parte XI: Contenedores span y div. La instrucción display

Bueno, ya estamos en épocas navideñas y de vacaciones de clases y demás, pero en este blog no nos tomamos ningún descanso y tampoco, por supuesto, en este tutorial, así que aquellos que estéis de vacaciones tendréis que poneros las pilas a la vuelta. De todas maneras, esta semana, por suerte, el tutorial no es bastante complicado de entender, después de haber estado con los "span" y "div" la semana pasada, esta semana tenemos algo facilito. Respecto al ejercicio de la semana pasada, la cantidad de resultados posibles que había es tanta que me parece absurdo intentar dar una posible solución
Bien, para comenzar esta entrega del tutorial tenemos que hablar un poco de la historia del HTML. Como ya he comentado anteriormente, el HTML, que comenzó como un simple lenguaje de marcado orientado a internet, donde se añadía la peculiaridad de los hipervínculos, empezó a "pervertirse" cuando se empezaron a incluir distintas etiquetas y atributos orientadas a modificar el aspecto del texto, y, por ello, con el tiempo la mayoría de estas etiquetas de estilo se fueron desaconsejando hasta ser erradicadas al tiempo que se incluía un nuevo lenguaje, el CSS, cuyo cometido sería dar estilo a las etiquetas.
Como sabemos hasta ahora, a pesar de que el estilo haya quedado fuera de la "jurisdicción" del HTML, hay etiquetas que todavía conservan algo de estilo, como he comentado, un "regalo" de los desarrolladores, pero que, si no los controlamos, puede ser ejecutado de forma distinta depende del navegador (esto pasa con casi todo, pero en el caso de los formatos predefinidos del HTML es todavía más posible, por eso es recomendable siempre asegurarnos de tener nuestras hojas de estilos que indique cómo debe ser exactamente el aspecto). Sin embargo, existen una serie de etiquetas que han sobrevivido a esta criba y aún en HTML5 se siguen permitiendo y cuyo único propósito es dar distintos formatos o "estilos" al texto. Y de ellas vamos a hablar hoy, aunque en muchos cursos de HTML hablan de todas ellas bastante más temprano. Si les digo la verdad, las veo tan básicas que hasta hace un par de semanas no me había dado cuenta de que no las había explicado.
En primer lugar, las más básicas son las que definen el texto en negrita (<b>) y la cursiva (<i>). El uso de estas dos etiquetas no podía ser más simple:
<p>Parte de este texto está en <b>negrita</b> y otra parte está en <i>cursiva</i>.</p>
El resultado de este código sería el siguiente:
Parte de este texto está en negrita y otra parte está en cursiva.
Simple, ¿no? Como ves, es una manera bastante simple de definir pequeños formatos en algunas partes. Todo esto se podría haber escrito también de la siguiente manera:
<p>Parte de este texto está en <span style="font-weight: bold;">negrita</span> y otra parte está en <span style="font-style: italic">cursiva</span>.</p>
Podéis comprobar que este último código hace exactamente lo mismo que el anterior, lo único que usando las instrucciones "font-weight" y "font-style" del CSS y, como vimos la semana pasada, usando etiquetas "span", que, como ya avisé, nos serán muy útiles para este tipo de cosas.
Sin embargo, una vez más, hemos de recordar que ante todo, HTML es un lenguaje de marcado, por lo tanto, nuestra prioridad con este lenguaje será etiquetar correctamente nuestro texto, incluso aunque el formato que nos deje no sea el que deseemos, pero eso siempre será corregible con CSS. Por ello, vamos a enseñar algunas etiquetas que, visualmente, parecerán igual que estas, pero que, en la práctica, significarán cosas distintas:

EtiquetaFormato equivalente Uso
<strong><b>Texto importante.
<em><i>Enfatiza su contenido.
<dfn><i>Definición.
<var><i>Muestra una variable (algo de lo que hablaremos cuando veamos Javascript).
<cite><i>Título de algún trabajo.
<em><i>Texto a enfatizar.

Sé que es un poco latoso, así que siempre viene bien hacerse un esquema para recordar para qué usar cada una de estas etiquetas... y de las siguientes que vamos a ir viendo.
Nuestro siguiente paso es "marcar" una parte del texto mediante la etiqueta <mark>. Esta etiqueta provocará el mismo efecto que los marcadores que usamos para resaltar texto en libros y apuntes. Para que lo entendáis mejor, un ejemplo:
<p>Aquí queremos <mark>marcar algo de texto</mark>.</p>
El resultado de este código será:
Aquí queremos marcar algo de texto.
Una vez más, este mismo efecto lo podríamos haber conseguido con estilos, de esta manera:
<p>Aquí queremos <span style="background-color: yellow;">marcar algo de texto</span>.</p>
Algo también bastante sencillo, en mi opinión.
Las siguientes etiquetas que mostraremos son un poco difíciles de entender y, si el lector no entiende de programación, probablemente no las use para nada. Estas etiquetas cambiaran nuestra fuente para darle un aspecto más parecido al que mostraban los antiguos ordenadores, con caracteres que todos ocupan el mismo ancho. Son las etiquetas <code>, <samp> y <kbd>. Las tres se usarán en momentos concretos cuando se hable de códigos de programación, la primera para escribir código, la segunda para mostrar la salida que el ordenador daría frente a un código concreto, y la tercera para mostrar lo que un usuario debería escribir por teclado. Sé que esto es algo raro para la mayoría de la gente, pero quien entienda de programación entenderá a lo que me refiero (o eso espero) y quien no, no le harán mucha falta estas etiquetas. Como curiosidad, la primera de las tres etiquetas, la etiqueta "code", es la que llevo usando durante todo el tutorial para mostrar los ejemplos de código, y las tres etiquetas provocan ese mismo resultado en pantalla.
Pasando a algo más sencillo de entender, tenemos las etiquetas <del> y <ins>. Estas dos etiquetas deben ir siempre juntas, dentro de la primera habrá texto que será falso y en la segunda introduciremos la corrección. Parecerá una chorrada, pero es algo bastante habitual en muchas páginas, y se usaría así:
<p><del>Este texto está mal.</del> <ins>Este texto está bien.</ins></p>
Y su resultado sería:



Este texto está mal. Este texto está bien.
Como anotación, también podemos introducir texto tachado con la etiqueta <s>, pero el subrayado sólo lo podremos conseguir mediante CSS, usando la instrucción text-decoration: underline; (con la cual también podemos conseguir el tachado, con text-decoration: line-through;, e incluso podemos poner una línea sobre nuestro texto, con text-decoration: overline;).
Una etiqueta de cambio de formato bastante curiosa es la etiqueta <pre> ya que nos permitirá escribir el código que queramos literalmente, con nuestros espacios y saltos de línea. Eso sí, el formato del texto será parecido al de los "code", "samp" y "kbd". Un ejemplo aquí:
<pre>Aquí meto un salto de línea
Y pongo muchos espacios      porque la etiqueta "pre" me lo permite.</pre>
Y, en efecto, este código se verá así:
Aquí meto un salto de línea
Y pongo muchos espacios      porque la etiqueta "pre" me lo permite.
Como véis, aunque quede un poco feo visualmente, la etiqueta "pre" nos permite introducir todo lo que queremos. Incluso podemos incluir <, > y otros símbolos reservados sin necesidad de usar entidades. Como el lector imaginará, no es recomendable usarlo siempre, pero hay momentos en los que esta etiqueta puede ser bastante útil.
Lo siguiente que vamos a ver, entrando ya en la recta final de este post, son las "citas". Aunque ya arriba vimos un atributo llamado "cite", en ese caso sólo hablábamos de títulos, mientras que ahora pretendemos en nuestro documento tener frases o incluso párrafos citando una fuente externa. Para ello tenemos las etiquetas <q> y <blockquote>.
El uso de una u otra dependerá de la longitud de la cita que queramos hacer. Si sólo queremos referenciar una frase, usaremos la etiqueta "q" de este modo:
<p>Según Albert Einstein, <q>si buscas resultados distintos, no hagas siempre lo mismo</q>.</p>
Cuyo resultado sería tan simple como este:
 Según Albert Einstein, si buscas resultados distintos, no hagas siempre lo mismo.
No hay nada de especial, la etiqueta "q" simplemente entrecomilla la cita en cuestión. Sin embargo, aunque parezca que no vale para nada, pero gracias a esto podemos darle mérito a la página donde hayamos cogido la cita, en mi caso:
<p>Según Albert Einstein, <q cite="http://www.proberbia.com">si buscas resultados distintos, no hagas siempre lo mismo</q>.</p>
 Aunque hasta ahora no he visto que el contenido de este atributo sea visible para el usuario, si que al menos estás dando crédito a quien escribió el material original.
Respecto a la otra de las dos etiquetas, la "blockquote", la hemos visto muchas veces a lo largo de este post y de los otros posts que he escrito. Normalmente se usa para citar párrafos enteros y lo que provoca es que el párrafo tenga unos márgenes izquierdo y derecho mayores a los del resto del texto. Así que sí, en todos los ejemplos que he puesto a lo largo de este post, se ha usado el "blockquote" para separarlo. Anotar que el "blockquote" también puede contener el atributo "cite".
Otra etiqueta que nos puede resultar interesante es la etiqueta <abbr>, en la cual podemos incluir abreviaturas y al mismo tiempo informar al lector de su significado. Un ejemplo:
<p>El <abbr title="World Wide Web Consortium">W3C</abbr> establece los estándares de los lenguajes de desarrollo web.</p>
Y su resultado sería:
El W3C establece los estándares de los lenguajes de desarrollo web.
Si pasamos el ratón por encima de la palabra "W3C" vemos que aparece la explicación de lo que significa ese acrónimo. Realmente el atributo "title" se puede usar en cualquier etiqueta y se comportará de la misma manera que esta (siempre que sea una etiqueta sobre la que se pueda pasar el ratón... por ejemplo, no podemos pasar el ratón por encima del "head", sin embargo, el "head" puede tener "title"). De todos modos, de eso hablaremos cuando hablemos de los atributos globales del HTML (aunque de algunos, como el "class" o el "id", ya hemos hablado).
Finalmente, una de las etiquetas más simples que tenemos es la etiqueta <small> que, como su nombre indica, nos permite hacer el texto un poco más pequeño, de la siguiente manera:
<p>El siguiente texto será <small>más pequeño</small>.</p>
Y su resultado:
El siguiente texto será más pequeño.
Ninguna dificultad, ¿no?
Bueno, y para cerrar este artículo, quiero hablar de una última etiqueta que no tiene que ver con el formato del texto, pero que también me había "dejado atrás" a pesar de su simpleza: la etiqueta <hr/>. Como veis, es otra de esas etiquetas que se cierran a sí mismas, y su objetivo es crear una línea horizontal en el texto, como la siguiente:


Se recomienda encarecidamente que el "hr" sólo se use para cambiar de tema y no como puro elemento decorativo.
Y, hasta aquí el tutorial de hoy, que ha sido creo de los más fáciles hasta la fecha, sobre todo considerando las cosas que habíamos visto las últimas semanas. Tal vez se haga un poco lioso usar cada cosa dependiendo de qué vayamos a usar, pero para ello recomiendo, como dije antes, hacerse un pequeño esquema donde escribamos para qué se usa cada etiqueta, y, en caso de que el estilo que le da por defecto no nos guste (por ejemplo, que queramos poner un texto enfatizado en negrita en vez de en cursiva) arreglarlo con CSS, no usar etiquetas donde no deben ir. Y para terminar, como todas las semanas:

EJERCICIO

Esta semana, ya que el post ha sido tan simple, también ofrezco un ejercicio simple: una página en la que probemos todas y cada una de las etiquetas de formato que he ido hablando aquí, separándolas todas por líneas horizontales las unas de las otras.

Y aquí terminamos la última entrega del tutorial de este año, nos vemos el año que viene con otra entrega, sin faltar nunca a nuestra cita semanal.

1 comentario:

curso de diseño web dijo...

Muy buen aporte. Los diseñadores web cuentan con innumerables oportunidades de trabajo a partir de la gran necesidad de las empresas de contar con un sitio para publicitar sus productos o servicios. Por este motivo capacitarse en esta área puede ser muy conveniente.