Curso básico de HTML 5.

Ya usted, ellos, ellas y yo lo sé: hay infinidad de tutoriales en internet sobre HTML: sería «llover sobre mojado» volver a tratar el tema, pero ¿quién dijo miedo? 😉

En mi caso, el que me ocupa, es actualizarme al HTML 5 y enfrentar a dos viejos «demonios» en esto de la creación de páginas web. Y no, no me refiero a los servicios en GNU/Linux a los cuales llamamos «D.A.E.MON» si no a los dos grandes problemas que debemos enfrentar antes de comenzar a escribir una sola línea de código en HTML:

1. La multitud de navegadores web existentes y el legado que traemos a rastras, ya que muchas personas se niegan a actualizar sus programas. Agreguemos a eso las particularidades de los nuevos celulares con Android y ni mencionemos los celulares con WAP (y por ende WML) que aún están en uso con sus micronavegadores.
2. Los gustos de nosotros los seres humanos en cuanto a diseño, colores y funcionalidad de las páginas web (en otra entrada presentaré las hojas de estilo en cascada con las cuales enfrentaremos este aspecto).

Y para no abrumarlos ni abrumarlas más comienzo de una vez el tema.

Prefacio.

La «World Wide Web», tal como la conocemos hoy día, vino de la genial idea del profesor Tim Berners-Lee (inspirado por Ted Nelson y convencido por Richard Matthew Stallman) y es quien actualmente aún lleva las riendas al presidir la «World Wide Web Consortium«, una organización creada en 1994, que agrupa a nivel mundial a más de 300 entes y quienes en conjunto recomiendan las normas del HTML. Y sí, leyeron bien, RECOMIENDAN las normativas ya que el HTML no es en realidad un lenguaje de programación sino un lenguaje de marcado, que además descansa sobre dos tecnologías llamada URL y HTTP. Por ahora sólo necesitamos saber de dónde viene y cuál es la situación actual, si quereís ahondar en conocimientos allí mismo teneís los enlaces (gracias de nuevo Señor Tim Berners-Lee).

Los lenguajes de marcado son (y para poder explicarlo y que sea comprensible rápidamente) como el antiguo dictado oral que hacíamos a las secretarias y/o mecanógrafas (casi siempre eran mujeres por su talento natural para lidiar con formas, colores y seres humanos) en el siglo pasado:

«Ponga estilo de carta. ponga comillas, ponga mayúsculas, Estimado Juan, ponga dos puntos, aparte, sangría, ponga primera letra mayúscula, te escribo esta carta, ponga negrillas, de forma muy urgente, cierre negrilla, ya que no me has enviado… etcétera«.

Y para los que nacimos y tuvimos la oportunidad de vivir en el siglo pasado, cada empleada tenía su manera de escribir y presentar las cartas, de allí la actuación de los navegadores web, cada uno ofrece ventajas y desventajas y cada quien escoge de acuerdo a sus necesidades.

Aclaratoria.

A menos que se diga expresamente lo contrario, todo a lo que nos refiramos es HTML versión 5, la del año 2014, la recomendada. Por supuesto que las etiquetas html presentan cierta compatibilidad hacia atrás, y también hay unas totalmente nuevas para esta versión. No entraré demasiado en dichas compatibilidades, si quereís estudiar ese aspecto por favor seguid los enlaces que presento a lo largo y ancho de la entrada. Si ya sabéis, habéis adquirido conocimiento con antelación, os recomiendo un tema más avanzado escrito en este mismo blog: «Un CAPTCHA fácil y sencillo de implementar«.

Otra cosa que os parecerá harto extraño (pasado el tiempo lo comprenderíes con la experiencia que logréis) yo seguiré la siguiente consigna:

«Cualquiera puede equivocarse, excepto nosotros«.

¿Qué significa lo anterior? Que seremos más estrictos en la sintaxis del HTML pero sin llegar a declararnos explícitamente como XHTML, así tendremos lo mejor de ambos mundos.

Mi primera página web.

Así que llegamos a dar nuestros pininos en el internet como protagonistas y no como simples lectores. Las páginas web descansan en archivos de texto plano con la extensión .htm o para los sistemas operativos modernos .html y dichas extensiones permiten que identifiquemos qué tipo de contenido albergan más sin embargo para nuestras computadoras el contenido es lo importante. Es así que debemos conocer nuestro primer elemento del lenguaje HTML dentro del archivo nombrado (recordemos que los nombres de archivos son sensibles a mayúsculas y minúsculas):

<!doctype html>

 Como vemos comienza con el signo «mayor que» y finaliza con «menor que». He aquí la primera diferencia con los lenguajes de programación: aquí dichos símbolos carecen de significado matemático alguno, sirven más bien como delimitadores. Ya que le damos ese uso, nuestra mente cambia el enfoque y los asocia a los paréntesis, que trabajan por pares donde uno «abre» y el otro «cierra». Dentro de esta categoría están los corchetes y luego las llaves: ( [ { } ] ) , en ese orden anidado. Como son rectos y se parecen más a los corchetes que a los otros dos optamos por llamarlos corchetes angulares y así son llamados en inglés angle brackets (y en inglés antiguo chevrons). Y hemos de referirnos al inglés porque precisamente es éste el idioma en el que está escrito el HTML, angle brackets es la traducción literal de corchetes angulares.

Dentro de estos delimitadores está el cierre del signo de admiración acompañado de la palabra doctype que es un recurso nemotécnico abreviado de  «DOCument TYPE» y traduciremos como «tipo de documento» acompañado, por supuesto, de la palabra html. Para este caso particular el uso de mayúsculas y minúsculas es indistinto pero tiene una excepción: como esta declaración se incluye por compatibilidad con anteriores versiones del lenguaje y dichos identificadores para cada versión son un tanto largas y complicadas y de paso eran obligatorias se decidió incorporar lo que yo llamo «un relleno» que debe ser escrito literalmente y entre comillas dobles o simples para aquellos servidores que buscan estos identificadores: dicha sentencia es «about:legacy-compat» que viene a ser leida por nosotros como «acerca de:compatibilidad heredada». Nuestra primera linea quedaría de la siguiente manera:

<!doctype html system "about:legacy-compat">

La segunda linea a continuación define la página web en sí y tiene el propio nombre html para declarar dónde comienza y dónde termina:

<html lang="es-419"> ... </html>

Donde están los puntos suspensivos colocaremos todo el código, notemos la nomenclatura para definir el idioma y región de nuestro país según el organismo Naciones Unidas: «es-419»; (y ratificado por el W3C en esta página, sin embargo muchos utilizan la norma ISO 639-1 ambos son válidos si recordamos que la W3C sólo recomienda, no obliga) y si necesitaramos programar para alguna otra región del mundo acá está el resto de los códigos.

A partir de este momento colocaré el código completo de la página web las cual ustedes introducirán con el editor de texto de su preferencia, hay muchos, a mi me gusta el nano, notepad++ y gedit. Para uso avanzado están vi y vim. Las capturas de pantalla que verán son tomadas al gedit que viene con ubuntu al cual le hice unas cuantas modificaciones de perfil, para verlas en detalle haga click aquí.

<!doctype html system "about:legacy-compat">
<html lang="es-419">

</html>

Nosotros los seres humanos necesitamos, nos gusta, tener información adicional que nos guía o aclara el código pero que para las máquinas no tiene relevancia. La manera de que ellas «ignoren» dichos datos es colocándolo como comentarios con la siguiente sintaxis:

<!-- ... -->

Donde están los tres puntos insertamos el comentario que deseemos, no importa si ocupa varias lineas pero lo importante es que tengan su apertura y cierre. ¿Recuerdan que les dije que gedit lo utilizo con una configuración especial? Comparen el código que llevamos en purito texto plano y vean como lo presenta el editor de texto gedit:

<!doctype html system "about:legacy-compat"><!--Declara HTML5-->
<html lang="es-419"><!--Escrito en castellano de América-->

</html>

¡Qué diferencia! Al suministrar el nombre al archivo, con todo y extensión, gedit automáticamente codifica al lenguaje html como pueden obervar en la barra de estado inferior de la ventana.

El siguiente paso que haremos es ir a la carpeta donde guardamos nuestro archivo ( al que le dimos el nombre «primera_clase.html») y lo abrimos ya sea con doble click, click izquierdo o click derecho+abrir en navegador. Cada sistema operativo moderno tiene un navegador web predeterminado, así es que se puede visualizar nuestra primera página web, MÁS SIN EMBARGO NO VEREMOS NADA PUES AÚN FALTAN MÁS LÍNEAS DE CÓDIGO. ¿Por qué entonces yo pido abrirla de una vez, sin más?

La respuesta es: pedirle al navegador web que nos muestre la página web que estamos haciendo para visualizar el código fuente (generalmente haciendo click derecho sobre nuestra página web abierta en navegador). Quiero hacer énfasis que una página web, a pesar de todo nuestro empeño de escribirla bien -según las recomendaciones- depende de algunas cosas más. Les muestro lo que interpreta nuestro navegador web, en este caso Mozilla Firefox:

El punto que quiero recalcar es la palabra América la cual se muestra incorrectamente, con unos caracteres extraños, así que hemos de reparar en que nuestro bello idioma castellano sea escrito (y visualizado) correctamente. A pesar de derivar del latín, (idioma que nunca tuvo acentos ni signos ortogŕaficos) con la evolución de nuestro idioma se llegó a un lenguaje de marcado (ver inicio de esta entrada) que ayuda muchísimo a transmitir mejor las ideas; o lo que yo llamo «degustar las palabras». Es por ello que en el lenguaje HTML se tomó la previsión de mostrar correctamente dichos caracteres con etiquetas especiales, así tenemos que para mostrar nuestras vocales acentuadas y la letra eñe (las mayúsculas siguen la misma normativa):

á -> á
é -> é
í -> í
ó -> ó
ú -> ú
ñ -> ñ

Y para los acentos en idioma catalán y francés (aquí podeís ver una lista de los más utilizados):

à -> à
è -> è
ì -> ì
ò -> ò
ù -> ù

â -> â
ê -> ê
î -> î
ô -> ô
û -> û

Si insertamos los anteriores caracteres «especiales» (no usados en el idioma inglés) en nuestra primera página web, la guardamos y abrimos con nuestro navegador web (y pedimos visualizar nuestro código fuente) veríamos algo similar a esto en el programa gedit:

Y en el navegador web Mozilla Firefox:

Como pueden notar el navegador cumple con su trabajo de mostrar los caracteres especiales, más sin embargo podemos observar que la palabra América en el comentario sigue sin visualizarse correctamente y no, no es porque no utilicé el &ecute; (si quieren hagan la prueba) es por otro motivo más importante. Y, yo ya se que los comentarios no revisten importancia, pensarán ustedes, total eso no se muestra en nuestra página web, sigamos adelante y comprenderán.

Mi primera página web es en castellano.

Ya que hay muchísimas páginas web en inglés, pues vaya que le toca al castellano llenar espacio. Antes de proseguir debo aclarar que lo que los voy a comentar lo aprendí en esta página web. (si no está en línea, prueben este otro enlace o este otro). Si quieren saber la historia de la codificación de caracteres puede leer (en inglés) esta otra página web del lenguaje de programación Python. Debemos indicar también que tocaremos brevemente ciertos aspectos inherentes a los programas que sirven páginas web, «servidores web».

Volviendo a nuestro archivo de texto plano con extensión .html y editado con el programa gedit debemos tener especial cuidado en guardar dicho archivo en la codificación de caracteres utf-8 tal como muestro al escoger la opción «Guardar como», les resalto con una elipse para acentuar la opción:

¿Por qué usar UTF-8 en vez de otros sistemas de codificación?

La respuesta les va a sorprender (y el que me quiera refutar, por favor escriba abajo en los comentarios): USAMOS EL UTF-8 POR COSTUMBRE HEREDADA DEL IMPERIO ROMANO, nacido además en Grecia, cuna de nuestra civilización occidental. Es así, de hecho, que en marzo de 2015 el 83% de las páginas web utilizan esta codificación, y de paso es la recomendada por la World Wide Web Consortium (W3C) por su compatibilidad hacia atrás con la codificación ASCII y hacia adelante con los caracteres (o más bien ideogramas) orientales (hindi, coreano, chino, etc). Esta «compatibilidad hacia adelante» se ve sacrificada por el aumento de bytes en página ya que el UTF-8 fue pensado para ser de longitud variable: si escribimos en cualquier lengua indoeuropea usaremos menos espacio y si escribimos en ideogramas usaremos un poco más de espacio. Es por ello que elegimos UTF-8 PERO NO SE LIMITEN A ELLO si se les presenta la oportunidad de trabajar en otro país de Asia (ejemplo loable cuenta Twitter: @Kopepasah ), si ese fuera su caso, están las codificaciones UTF-16 y la más completa por ahora UTF-32 (vean aquí cómo se estructuran los caracteres); agregarlas a nuestro programa gedit es bien fácil, sólo hacemos click en la ‘flechita’ de codificación de caracteres (ver gráfico anterior) y escogemos «añadir o quitar» y nos muestra este cuadro de diálogo:

Seleccionamos la codificación que necesitaramos y listo, lo guardamos en esa codificación PERO CON EL CUIDADO ESPECIAL DE ESPECIFICARLO EN NUESTRA PÁGINA WEB.

El metacomando para declarar la codificación de caracteres escogida es:

 y debe ser incluida en el meta comando head:

<head><meta charset="UTF-8"></head>

Sólo queda informar dos detalles más acerca de esto y es referida explícitamente al programa servidor web Apache utilizado ampliamente en el mundo:

• Lo correcto es que incluyamos dicha sentencia en todas y cada una de nuestras páginas html pero hay quienes piensan que debemos simplificarnos la vida y configurar a Apache a que automáticamente ‘emita’ nuestra página web con dicha configuración UTF-8.
• Debido a lo anterior podemos especificar en el archivo .htacces en el directorio raíz de nuestro sitio web (subdirectorios ‘heredarán’ la configuración) que contenga la sentencia «AddDefaultCharset UTF-8«.
• Si se configura según el punto anterior, el servidor obviará la sentencia que coloquemos en el fichero .html: si por ejemplo especificamos <head><meta charset=»UTF-16″></head> se obviará UTF-16 y será emitido como UTF-8.
• Si especificamos en el fichero /etc/apache2/conf.d/charset la sentencia «AddDefaultCharset UTF-8» tendrá el mismo efecto con la diferencia que afectará a todos y cada uno de los sitios web alojados en ese servidor (esta configuración es muy común para ahorrar hardware con sitios web de poco tráfico).
• Es por tanto que recomendamos agregar en el archivo .htacces la sentencia «AddDefaultCharset OFF» y simplemente a cada archivo .html le especificamos <head><meta charset=»UTF-8″></head>.
• De ser posible que tengamos acceso /etc/apache2/conf.d/charset (osea, el servidor está entera y únicamente a nuestro sitio web) agregarlo allí también para mayor seguridad (si desea saber más vaya usted a este enlace).
• Para finalizar este punto, existe un método para indicar la codificación de caracteres empleando lenguaje PHP pero escapa al alcance de este tutorial, no obstante anótenlo para tenerlo siempre presente cuando evolucionemos.

Agregando más comandos a <head></head>.

Al comando para declarar la codificación de caracteres, agregaremos las siguientes etiquetas para que el navegador muestre nuestro título de página en la ventana , si es que el dispositivo lo permite (por ejemplo los celulares no lo hacen):

<title>Titulo de la página web.</title>

En dicha cabecera (que sería la traducción al castellano), además de <meta> y <title> admite los siguientes elementos:

• <style>…</style>:permite especificar estilos como color de fondo, color de texto, etc. aplicadas a cada sección o texto de la página web.
• <link>: si por el contrario queremos especificar dichos estilos en un archivo aparte para servir distintos archivos .html en un mismo directorio, podemos usarlo y ahorrar esfuerzo y espacio en disco. No tiene etiqueta de cierre. Dichos aspectos son cubiertos por las Hojas de Estilo en Cascada (cascading style sheets o CSS) y las presentaremos en el siguiente capítulo, por ahora basta saber que la sintaxis será (ejemplo): <link rel=»stylesheet» href=»mystyle.css»>
• <script></script>: sirve para encerrar código en lenguaje de programación interpretado del lado del cliente (nuestro navegador web) denominado JavaScript (aunque también tiene una versión del lado del servidor). Merece una entrada totalmente aparte.
• <base>: permite especificar una directorio diferente al que por defecto está nuestra página web. No tiene etiqueta de cierre. En nuestro caso, por ejemplo, nos serviría para especificar imágenes alojadas incluso en otro servidor web (si lo permite) ahorrándonos la escritura de código adicional. Ejemplo: <base href=«http://www.w3schools.com/images/»>
• Por último volvemos a la etiqueta <meta></meta>, la cual puede contener numerosos valores, ya vimos charset pero además acepta name, http-equiv, e itemprop.

Como pueden ver, las opciones se nos agigantaron rápidamente, pero cuando algo es complejo debemos picarlo en trozos para luego digerirlos uno por uno. Volviendo a nuestra primera página quedaría de la siguiente manera:

Cuerpo de página:la etiqueta <body></body>.

Como pueden observar hasta ahora lo único  «visible» que hemos hecho son los caracteres especiales los cuales incluimos con propósitos didácticos. Para estar en lo correcto debemos encerrarlas entre las etiquetas <body>…</body>, donde están los puntos supensivos. Dentro de estas etiquetas irá toda nuestra página web ordenadas con las siguientes etiquetas:

• <header></header>: un resúmen de la página, pudiéndose indicar además algún ícono y/o datos del autor. Se pueden declarar varias veces, de ser necesario, aunque nuestro estilo será declararlo una sola vez por página.
• <section></section>: donde se desglosará lo planteado en el punto anterior pero además debemos encerrarlos entre <article>…</article>. Se pueden declarar las veces que sean necesarias, pero recuerden anidar correctamente cada uno: <section><article></article></section>.
• Refinando el punto anterior, HTML5 no manda ni ordena anidar de la forma en que yo lo explico pero ¿A quién NO le gusta el orden y sentido?
• Si queremos mostrar una figura e incluso colocarle un texto descriptivo usaremos <figure> </figure> y <figure> (imagen) <figcaption> (texto) </figcaption></figure>.
• Si queremos mostrar un menú lateral debemos usar <aside></aside>.
• Para finalizar el elemento de pie de página <footer></footer> donde podemos indicar autoría, licencias de uso, datos de contacto, mapa del sitio o enlaces externos o internos como siguiente o previo.
• NÓTESE EL EXTRAORDINARIO PARECIDO con escribir un libro:
  1. Datos de imprenta: <doctype>.
  2. Lomo del libro: <head> y <title>.
  3. El libro en si mismo: <html>.
  4. Prólogo y/o índice: <header>.
  5. Capítulos y subcapítulos: <section><article>.
  6. Imágenes y/o gráficos explicativos: <figure>.
  7. Comentarios al margen: <aside>.
  8. Pie de página -mayor analogía imposible-: <footer>.

Texto básico de página

En este pudo podemos entonces tener un esquema básico de fichero HTML para todo nuestro sitio web y luego agregar el contenido que necesitemos y guardar con ontro nombre de archivo:

<!doctype html system "about:legacy-compat">
<html lang="es-419">
<head>
        <meta charset="UTF-8">
        <title>Mi primera página web es en castellano.</title>
</head>
<body>
        <h2>Título principal</h2>
        <h3>Título secundario</h3>
</body>
</html>

Diseño de página.

Llámenme «conservador» pero Gutenberg y el medioevo siguen vigentes hoy día, así como físicamente un libro debe ser diagramado según unos valores armónicos, nosotros también debemos otorgárselo a nuestra página web. He aquí cómo se hacía antes y hacia adonde vamos ahora:

Tal como en la antigüedad se dieron a la tarea de diagramar los libros hoy en día hay gente que se ha dado a la tarea de ahorrarnos ese trabajo con unos marcos de trabajo (framework) para el lenguaje HTML pero eso lo explicaré en su entrada respectiva.

En este punto les muestro cómo es la estructura de cualquiera página web, lo que está en color blanco es lo que nos muestra finalmente nuestro navegador web preferido:

En el gráfico anterior, si detallan bien, hay dos elementos que aún no he explicado: son los comandos que nos permiten insertar un título y su párrafo correspondiente; ¿recuerdan la analogía con un libro? Pues ahora vamos a ello.

Títulos y párrafos.

Los títulos que deseemos deben ir dentro de la siguiente estructura de comando, siendo 1 el tamaño más grande y el 6 el más pequeño. No debemos preocuparnos por la fuente de letra que utilice el navegador, dicho programa al leer  el tamaño del título se encargará de mostrarlo adecuadamente.

<h1>Título 1.</h1>
<h2>Título 2.</h2>
<h3>Título 3.</h3>
<h4>Título 4.</h4>
<h5>Título 5.</h5>
<h6>Título 6.</h6>

Acá pueden observar, «en vivo», cómo se mostraría nuestra página web en castellano en su navegador favorito o escogido para leer mi enseñanza.

Antes de continuar debo explicaros ciertos detallitos con propósitos didácticos y prácticos:

• Ya nuestra página tiene 35 líneas y es difícil de mostrar en una sola captura de pantalla, si haceís click en la última imagen podrán verla en una ventana (o pestaña) nueva en su tamaño original.
• El código indentado facilita la legibilidad a los humanos pero ocupa espacio -tanto en disco como en tráfico- cuando el usuario solicita la página.
• Dicho código indentado me fue posible escribirlo rápidamente con la personalización que le hice a gedit, el indentado ayuda a visualizar y los resaltados de colores nos ayuda a encontrar errores de sintaxis.
• Podríamos eliminar los «espacios sobrantes» a fin  de optimizarla para cuando la vayamos a publicar pero dicho trabajo es titánico a la larga.
• Además podríamos indicarle a nuestro servidor Apache que comprima todo lo que vaya a enviar a los usuarios, pero ese tema escapa a este tutorial.
• Debido a todo lo anterior en lo sucesivo sólo explicaré el comando correspondiente y su enlace «en vivo» para que vean cómo lo interpreta su navegador web y con click derecho (o el método adecuado) observen el código fuente, analízenlo y vuelven por estos lares. Ojito pues. 😉
• Por supuesto debo acotar que esto último de los espacios extras para el código html ya otras personas han tenido que lidiarlo y lo han sobrellevado pero que muy bien; por ejemplo en esta página web nos hacen el trabajo: copiando , pegando y ejecutando me dice que pudo cortar 123 espacios, éso son 984 bits ahorrados, multipliquen eso por las miles o decenas de miles de visitas a su página web: bueno «éso no son conchas de ajo» como dice el refrán.

Formato básico del texto.

Ya sabemos cómo agregar títulos y párrafos en lenguaje html, ahora veremos cómo darle formato a nuestro texto, verbi gratia a lo largo de este tutorial hacemos gala de ello.

Texto en negritas:

<p>«Los Estados Unidos parecen destinados por la Providencia a plagar la América de miserias en nombre de la libertad».<br><b>Simón Bolívar.</b></p>

El pensamiento de nuestro Libertador arriba expresado en lenguaje html introduce el salto de línea para separar la cita del autor ya que debemos tener en cuenta que los navegadores hacen sólo lo que le ordenamos: todo el texto es un párrafo y así lo muestra, seguido, pero a fin de darle un sentido de relación (pensamiento-autor) se le debe insertar el comando <br> cuantas veces lo necesitemos recordando siempre que separa líneas, no párrafos.

En XHTML se debe escribir como <br />, con un espacio entre la letra erre y la barra, teniendo un así un «autocierre» pero en HTML dicho comando no tiene cierre y si le agregamos (</br> o <br/>) los navegadores lo admiten e interpretan como <br>. Yo prefiero utilizar <br /> tal y como convenimos al comienzo de este documento.

¿Recuerdan lo que hablamos sobre eliminar los espacios del texto indentado? Pues bien he de añadirles que si escribimos varios espacios entre las palabras y saltos de línea nuestro navegador web lo mostrará exactamente igual. Así el código arriba mostrado es igual a este:

<p>«Los Estados Unidos   parecen destinados por la Providencia a plagar   la América de   miserias en    nombre de la libertad».<br>


<b>Simón&nbsp;Bolívar.</b></p>

Noten esas letras que agregué entre el nombre y apellido: se conoce como espacio irrompible y se utiliza para decirle al navegador que mantenga esas dos palabras unidas por un espacio sin importar ningún otro comando (centrado, justificado, etc.) y se representa como &nbsp; y observen el recurso nemotécnico: nbsp=NoBlankSPace (encerrado entre et y punto y coma tal como lo vimos para representar caracteres especiales; si lo pensamos bien es un comando de apertura y cierre no simétrico en html).

Texto en cursivas:

<i>Fuente</i>: de la carta al Coronel Campbell, Guayaquil, 5 de agosto de 1829.

Si queremos «aislar» dicho pensamiento podemos agregar una linea horizontal antes y después y no es necesario escribir una serie de guiones como estilan los editores de texto avanzados, simplemente le colocamos <hr> y para ser más preciso con su correspondiente autocierre <hr /> (tal como lo expliqué dos párrafos hacia arriba).

Texto enfatizado:

Es diferente de las cursivas (también llamadas «italics» en inglés) y nos sirve para hacer notar algo, por ejemplo fechas, tal como lo muestro:

<i>Fuente</i>: de la carta al Coronel Campbell, <em>Guayaquil, 5 de agosto de 1829</em>.

Tal vez veamos iguales a cursivas y enfatizados en nuestro navegador web. Pero hay diferencia, y aquí voy a englobar la etiqueta de negritas <b> con la etiqueta fuerte <strong>: mientras que <i> y <b> es opcional para el navegador el mostrarlo diferente, las etiquetas <em> y <strong> obligan a mostrarlo diferente.

Aún más allá, como los dispositivos electrónicos han adquirido gran poder de cálculo, eso ha permitido que incluso dichos aparatos lean en voz alta a personas discapacitadas de la vista y cuando encuentran las etiquetas <em> y <strong> el tono de voz cambia de manera correspondiente.

Texto «grande» y «pequeño»:

Encierro entre comillas los términos sólamente para que noten que dependerá del tamaño predefinido en su navegador web: en base a ese tamaño mostrará más grande o más pequeño los textos a mostrar:

<p>
  <big>«Los Estados Unidos   parecen destinados por la Providencia a plagar la América de miserias en nombre de la libertad».<br />
  <b>Simón&nbsp;Bolívar.</b></big><br />
  <small><i>Fuente</i>: de la carta al Coronel Campbell, <em>5 de agosto de 1829</em></small>.
</p>

Texto «preformateado»:

Muchas veces necesitamos, por ejemplo, escribir fórmulas matemáticas (y ya sabemos cómo insertar caracteres especiales) y por practicidad se definió este comando para que el navegador lo presente con una fuente monoespaciada y respetando los espacios y saltos de lineas sin necesidad de etiquetas especiales tal como hemos venido aprendiendo. Aquí la simplicidad es bienvenida, imaginen todo el esfuerzo en tecleo de comando para mostrar esto:

<pre>
   y =  x + 3
y -3 =  x
  -x = -y +3
   x =  y + 3
</pre>

Ese cuadro semisombreado que ven está hecho con el comando <pre> pero es el estilo aplicado en este blog lo que lo hace así, sirva como introductorio a las hojas de estilos en cascada.

Superíndices y subíndices.

De nuevo las fórmulas matemáticas son las que mayor uso dan a estas etiquetas:

<pre>
   y<sub>1</sub> =  x<sup>2</sup> + 3
</pre>

Texto resaltado:

Si queremos indicar algo importante, podemos resaltarlo (teniendo siempre en cuenta que cada navegador lo muestra a su manera prestablecida):

y = 5 - 3
<mark>y = 2</mark>

Texto insertado y eliminado:

Muchas veces queremos explicar cómo se llegó a un punto determinado agregando y eliminando explicaciones, encuentro útil siempre las fórmulas matemáticas; siguiendo con el ejemplo anterior:

y = 5 - 3
y = 5 - <ins>(+</ins>3<ins>)</ins>
y = 5 - <del>(+</del>3<del>)</del>
<mark>y = 2</mark>

Observación especial: el insertado puede confundirse con el comando subrayado <u></u>, etiqueta esta que no he explicado aún porque lo considero en desuso ya que se confunde fácilmente con los enlaces «links» en los navegadores. Tanto es así que ahora se utiliza para denotar palabras mal escritas (o en uso especial para el idioma chino); valga la acotación.

Todo lo que explico sobre formato de texto está en este enlace para que lo visualicen y analicen.

Con lo que hemos aprendido es suficiente para comenzar a escribir una página web decente, pero en camino a la excelencia debemos aprender más sobre el sueño de Tim Berners Lee: el hipertexto.

Enlaces y tipos de enlaces.

 La razón de ser del html: los enlaces que permiten guiar hacia otros contenidos, construídos unos sobres otros. Es lo que he hecho con este tutorial, los «links» que he colocado indican de dónde he obtenido información e incluso permiten profundizar los conocimientos de usted amable lector o lectora, si así lo quisiera. Sin más lo presento:

<a href="http://www.seniat.gob.ve/">Servicio Nacional Integrado de Administración Aduanera y Tributaria.</a>

Tal como pueden apreciar, tiene su apertura y cierre <a>…</a> pero además se debe incluir la dirección web (que no será visible a menos que el usuario ubique el puntero sobre el enlace) y en los tres puntos colocaremos la descripción del sitio a donde queramos referir al internauta.

Es de hacer notar que incluso podemos especificar la dirección ip del servidor a consultar (si es dedicado, es decir, sirve una sola página web) y hasta por cual puerto vamos a hacer la consulta. El siguiente ejemplo nos permite preguntarle al Instituto Nacional de Higiene «Rafael Rangel», ente que tiene en Venezuela el monopolio sobre la aprobación o negación de nuevos medicamentos o la renovación de los mismos, sobre los medicamentos vigentes cuyos nombre comiencen con la letra hache:

<a href="http://190.202.114.146:7474/ef/aprobados_int/productos-1.php?l=H">Medicamentos aprobados en Venezuela, letra H.</a>

 Por el contrario, si lo que queremos es referirnos a una página web que está en nuestro mismo servidor y en la misma carpeta lo que debemos hacer es simplemente colocar el archivo que contiene la página web:

<a href="ejemplo.html">Ver ejemplo</a>

Para que cambiemos la búsqueda por defecto en nuestro propio servidor web sólo debemos colocar el comando <base> el cual explicamos brevemente y ahora vamos a ampliar:

<head>
<base>href="https://www.ks7000.net/images/"</base>
</head>

Siendo así que este comando <base> esté declarado en <head> por defecto el penúltimo enlace de ejemplo será buscado en el dominio «ks7000.net» en la carpeta «images» en vez de la carpeta donde está alojada la página abierta.

Otra opción muy útil es especificar si el enlace se abrirá en la misma ventana o pestaña de donde se le llama o en una nueva, aquí en este tutorial las he colocado en una nueva ventana o pestaña para poder seguir el hilo del tema principal de estudio. Así el comando que necesitamos es:

<a href="http://www.ivss.gob.ve" target="_blank"></a>

El otro valores para target es «_self», que es el valor por defecto y generalmente no se escribe («_parent», «_top» y «framename», que se usaban con frame –no  soportado por HTML5- dejaron de usarse). El comando <base> también acepta ambos parámetros.

 Imágenes.

La inclusión de imágenes en una página web pasa por hablar brevemente sobre la historias de los formatos utilizados para representarlas. Pero primero veamos el comando utilizado por HTML para decirle al navegador cual imagen debe «cargar» y luego ahondaremos el tema de la historia de las imágenes digitales:

<img src="mi_imagen.jpg" alt="Mi imagen" />

Como ven el comando no tiene un cierre sino más bien un autocierre (opcional en HTML pero obligatorio en XHTML). En este ejemplo asume que la imagen está alojada en la misma carpeta que contiene el archivo .html (a menos que usemos el comado <base>, visto anteriormente dentro de <head>). Si la imagen estuviera ubicada en una subcarpeta, simplemente colocaríamos:

<img src="/images/mi_imagen.jpg" alt="Mi imagen" />

O incluso, si estuviera ubicada en otro servidor de nuestra propiedad (por favor eviten el hotlinking ya que es de muy mal gusto «robar» el ancho de banda a otros entes o personas):

<img src="https://www.ks7000.net/images/mi_imagen.jpg" alt="Mi imagen en otro servidor" />

El parámetro alt es obligatorio ya que el navegador muestra el texto colocado entre comillas mientras descarga la imagen en sí y si no la puede descargar, pues bueno, el texto indica que allí debería ir una imagen. Otro uso importante es para los discapacitados visuales ya que los programas lectores usan este texto para narrar de que imágen se trata, así que ojito con colocarle acertadas palabras.

Un uso muy común para las imágenes es utilizarlas como botones para los enlaces ya que llaman más la atención que un mero texto subrayado, aquí debemos aplicar el anidado de instrucciones, fíjense:

<a href="www.a.com"><img src="mi_imagen.jpg" alt="Mi imagen" /></a>

Otro parámetro que soporta el comando <img> es <style> con el cual podemos especificarle al navegador web del usuario que la imagen deseada la convierta a un tamaño específico, ancho y alto en pixeles, por ejemplo:

<img src="/images/mi_imagen.jpg" alt="Mi imagen" style="width:128px;height:128px" />

Así, no importa el tamaño que tenga la imagen original, ésta será mostrada a 128×128 pixeles pero debe usarse esto con mucho cuidado: tengan presente que la imagen que descargará el usuario siempre ocupará el mismo ancho de banda, NO IMPORTA QUE SE VEA MÁS PEQUEÑA, la cantidad de bytes descargados siempre será la misma cantidad. Es por ello que ahora si hablaré de la historia de las imágenes digitales, tómense un café y vuelvan que esto se pone interesante. 😎

---

style=»text-align: justify;»>Imágenes digitales.

En el siglo pasado, cuando usamos rollos fotográficos (plásticos impregnados de químicos fotosensibles para fijar la luz, generalmente hechos a base de plata) quedaban como negativos fotográficos con los cuales se podían sacar las fotografías en sí, cuantas copias se necesitaran. Con las fotografías digitales sucede un proceso parecido: cada cámara o filmadora almacena la foto original en formato RAW o DCRAW que, esencialmente, consiste en millones de ceros y unos que representan los colores que recibió el sensor digital. Es, por tanto, muy grande y tiene muy poca pérdida de información sobre la fotografía tomada. Pero al igual que con los negativos fotográficos, esta información poco nos sirve por su dificultad de visualizarlos con el ojo humano. Es por ello que, para ahorrar en hardware, se decidió someter dichos datos RAW (existen cientos de formatos RAW, cada fabricante usa o inventa el que mejor le parece y la mejor alternativa a futuro es el formato libre DCRAW) a un proceso de pérdida de información y además compresión y codificación en un formato estandar para, de esta manera, poder compartir con el resto del mundo la fotografía tomada.

Es decir, nuestros navegadores web deben ser capaces de mostrar cualquier imagen siempre y cuando dicho fichero esté codificado en un formato normalizado, el formato RAW o DCRAW no nos sirve para este propósito de hacer páginas web. Simplificando: un programador de paginas web debe rápidamente hacerse estas preguntas antes de escoger un formato de imagen para el trabajo por el cual lo contrataron:

• ¿Necesita transparencia?
• ¿Necesita animación?
• ¿Necesita buena calidad de imagen?

---

Lo que paso a enseñar es un resúmen al máximo de lo publicado (en idioma inglés) de las siguientes páginas:

• «Image Compression for Web Developers» publicado por Colt McAnlis el 17 de septiembre de 2013.
• «A Picture Costs A Thousand Words» publicado por guypod el 19 de junio de 2013.
• «High DPI Images for Variable Pixel Densities» publicado por Boris Smus el 22 de agosto de 2012.
• Altamente recomendado (desempolvad los libros sobre Funciones Vectoriales): «Fundamentals of image procesing» por Jakub Szymanowski, Polonia.

---

Si tenemos en cuenta que las imágenes en una página web en promedio ocupan entre 60 y 70% del tamaño en bytes de la misma debemos prestar especial atención en escoger los formatos de imágenes correctos para ahorrar al usuario tiempo, dinero en conexión, y se queden más de un minuto en nuestro sitio web.

Fuentes consultadas.

En idioma inglés.

• «Serving WebP images for PNG and JPG files«
• «Writing Your First Code» by Peter Leow.