Entre una de las cosas más útiles que he aprendido en mi vida figura el HTML, el cuál, podría decirse, es el lenguaje de la web. Por mi parte no llegué a aprender HTML sin conocimientos previos de computación, o tabula rasa, cómo díria John Locke. Si no sabes quién fue John Locke probablemente no tienes una adecuada formación humanista, pero no importa- si estás tabula rasa en conocimientos sobre el HTML, igual este post es para tí. Para mis amigos humanoides, trataré de hacerlo sencillo.
Creo que fueron incalculables los daños causados por Steve Jobs, el idiota de las manzanitas, cuando se popularizó su Macintosh, la primera computadora personal con una interfaz de usuario gráfica diseñada para hacer las computadoras amigables y fáciles de usar. Ese fué un hito importante en la trayectoria decadente de nuestra civilización hacia la idiotez. A partir de entonces, cuando la gente comenzó a usar las ventanitas y a señalar iconos y hacer clic sobre ellos para hacer las cosas, dejaron de pensar en cómo los computadores procesan información y cómo funcionan en verdad, con lo cuál se perdió una oportunidad de adquirir un poco de autoconocimiento (γνωθι σεαυτόν) sobre cómo nosotros pensamos y cómo podemos organizar mejor la información en nuestro cerebro. ¡Ah caramba! Me he salido del tema que traemos entre manos ...
A pesar de los iconos, las ventanitas, los emoticones, los videitos y todas esas farandulerías, las computadoras no han cambiado mucho en cuanto a sus principios operativos fundamentales:
Ahí lo tienen. Eso es todo lo que hacen las computadoras: recibir, procesar y enviar secuencias de bytes (input, process, output). Pero ... ¿y que hay del HTML? Vamos a eso - ya tenemos toda la teoría necesaria.
Un poquito de teoría
Creo que fueron incalculables los daños causados por Steve Jobs, el idiota de las manzanitas, cuando se popularizó su Macintosh, la primera computadora personal con una interfaz de usuario gráfica diseñada para hacer las computadoras amigables y fáciles de usar. Ese fué un hito importante en la trayectoria decadente de nuestra civilización hacia la idiotez. A partir de entonces, cuando la gente comenzó a usar las ventanitas y a señalar iconos y hacer clic sobre ellos para hacer las cosas, dejaron de pensar en cómo los computadores procesan información y cómo funcionan en verdad, con lo cuál se perdió una oportunidad de adquirir un poco de autoconocimiento (γνωθι σεαυτόν) sobre cómo nosotros pensamos y cómo podemos organizar mejor la información en nuestro cerebro. ¡Ah caramba! Me he salido del tema que traemos entre manos ...
A pesar de los iconos, las ventanitas, los emoticones, los videitos y todas esas farandulerías, las computadoras no han cambiado mucho en cuanto a sus principios operativos fundamentales:
- Son máquinas diseñadas para seguir rigurosamente las instrucciones especificadas detalladamente en un programa que elaboró algún ser humano, no entes mágicos que funcionan de manera impredecible y caprichosa.
- Procesan información que está almacenada en su memoria o en los dispositivos de almacenamiento. Esa información puede ser datos o las secuencias de instrucciones que conforman un programa.
- En última instancia, los datos o secuencias de instrucciones se almacenan como cadenas de caracteres o símbolos, a los cuales se les llaman bytes. Un byte, u octeto de ocho bits, puede considerarse como un código númerico entre 0 y 255, es decir, de 256 posibles valores. Por ser la unidad fundamental de información un dígito o código numérico, decimos que la computadora es un aparato digital.
- Todo programa, documento pdf, archivo de Word, imagen gráfica, archivo de sonido, video, texto, etc. puede reducirse a una secuencia de bytes almacenada en un archivo o en memoria. La cantidad de bytes de ese archivo es su tamaño, de ahí decimos por ejemplo que un archivo de sonido mp3 "pesa" 6,2 megabytes porque su tamaño es de aproximadamente 6,2 millones de bytes.
De la teoría a la práctica
En el campo de las humanidades, la gente suele limitarse a lo teórico. No es mi intención ser despectivo- después de todo, nosotros los matemáticos estudiamos el más teórico de los saberes tambien. Sin embargo, nos vendría bien experimentar un poco con el computador para fijar las ideas.
Abre el bloc de notas o algún editor de texto en tu computadora y escribe lo siguiente, exáctamente como lo coloco a continuación, sin espacios ni saltos de línea. Si quieres, copia (Ctrl-C) y pega en el editor (Ctrl-V).
Acabas de escribir una secuencia de 20 caracteres: los 10 dígitos numéricos seguido de 5 letras y 5 signos de puntuación. Guarda ese archivo en un lugar donde lo puedas ubicar fácilmente después y llamalo "experimento1.txt" o algo por el estilo. Cierra el programa editor de textos (el bloc de notas para mis amigos con Windows).
Ubica la carpeta donde guardaste el archivo de texto recien creado. Has clic sobre él con el botón derecho para ver sus propiedades. Busca el tamaño del archivo. Debería indicar 20 bytes.
¿De esto qué podemos concluir? Que los archivos de texto no son más que secuencias de caracteres (el espacio y los saltos de línea también cuentan como caracteres). Ahora bien, presta atención: las páginas web que tu puedes ver en tu navegador son archivos de texto también. Cuando navegas hacia alguna página, el navegador se conecta con un servidor remoto y descarga un archivo de texto con extensión .html qué le da el contenido de la página a visualizar.
Abre nuevamente el editor de texto y copia y pega lo siguiente:
Nota: Tomado de https://www.sigoaprendiendo.org/10-poemas-famosos-del-siglo-de-oro.html
Al pegar el texto copiado en el editor de texto, notamos que desaparece la numeración de las estrofas (1-4). Tampoco se logra capturar el hipervículo de la página web a la cual apunta el nombre de Baltasar del Alcázar. No importa, luego veremos como solventar esto. Por los momentos guárdalo como "experimento2.html" (fijate bién que la extensión no es .txt sino .html). Con esto acabamos de crear nuestra primera página web. Veamos cómo se ve con el navegador.
Desde la carpeta donde esta guardado, abre el archivo recién creado. Se abrirá con el navegador, porque al ser un archivo con extensión .html, el computador asume que es una página web (un documento HTML). Sin embargo, el resultado no es lo que esperamos:
Experimento 1
Abre el bloc de notas o algún editor de texto en tu computadora y escribe lo siguiente, exáctamente como lo coloco a continuación, sin espacios ni saltos de línea. Si quieres, copia (Ctrl-C) y pega en el editor (Ctrl-V).
0123456789abcde,.-=*
Acabas de escribir una secuencia de 20 caracteres: los 10 dígitos numéricos seguido de 5 letras y 5 signos de puntuación. Guarda ese archivo en un lugar donde lo puedas ubicar fácilmente después y llamalo "experimento1.txt" o algo por el estilo. Cierra el programa editor de textos (el bloc de notas para mis amigos con Windows).
Ubica la carpeta donde guardaste el archivo de texto recien creado. Has clic sobre él con el botón derecho para ver sus propiedades. Busca el tamaño del archivo. Debería indicar 20 bytes.
¿De esto qué podemos concluir? Que los archivos de texto no son más que secuencias de caracteres (el espacio y los saltos de línea también cuentan como caracteres). Ahora bien, presta atención: las páginas web que tu puedes ver en tu navegador son archivos de texto también. Cuando navegas hacia alguna página, el navegador se conecta con un servidor remoto y descarga un archivo de texto con extensión .html qué le da el contenido de la página a visualizar.
Experimento 2
Abre nuevamente el editor de texto y copia y pega lo siguiente:
Poesía del Siglo de Oro
Baltasar del Alcázar no está entre los cinco poetas más famosos del siglo de oro. Pero sólo porque el nivel de competencia en aquellos siglos era altísimo. He aquí algunas de sus redondillas más graciosas.Tres cosas
- Tres cosas me tienen preso
de amores el corazón:
la bella Inés, el jamón
y berenjenas con queso.
- Esta Inés, amantes, es
quien tuvo en mí tal poder,
que me hizo aborrecer
todo lo que no era Inés.
- Trájome un año sin seso,
hasta que en una ocasión
me dio a merendar jamón
y berenjenas con queso.
- En gusto, medida y peso
no les hallo distinción:
ya quiero Inés, ya jamón,
ya berenjenas con queso.
Nota: Tomado de https://www.sigoaprendiendo.org/10-poemas-famosos-del-siglo-de-oro.html
Al pegar el texto copiado en el editor de texto, notamos que desaparece la numeración de las estrofas (1-4). Tampoco se logra capturar el hipervículo de la página web a la cual apunta el nombre de Baltasar del Alcázar. No importa, luego veremos como solventar esto. Por los momentos guárdalo como "experimento2.html" (fijate bién que la extensión no es .txt sino .html). Con esto acabamos de crear nuestra primera página web. Veamos cómo se ve con el navegador.
Desde la carpeta donde esta guardado, abre el archivo recién creado. Se abrirá con el navegador, porque al ser un archivo con extensión .html, el computador asume que es una página web (un documento HTML). Sin embargo, el resultado no es lo que esperamos:
PoesÃa del Siglo de Oro Baltasar del Alcázar no está entre los cinco poetas más famosos del siglo de oro. Pero sólo porque el nivel de competencia en aquellos siglos era altÃsimo. He aquà algunas de sus redondillas más graciosas. Tres cosas Tres cosas me tienen preso de amores el corazón: la bella Inés, el jamón y berenjenas con queso. Esta Inés, amantes, es quien tuvo en mà tal poder, que me hizo aborrecer todo lo que no era Inés. Trájome un año sin seso, hasta que en una ocasión me dio a merendar jamón y berenjenas con queso. En gusto, medida y peso no les hallo distinción: ya quiero Inés, ya jamón, ya berenjenas con queso. Nota: Tomado de https://www.sigoaprendiendo.org/10-poemas-famosos-del-siglo-de-oro.html
Parece que metieron las tres cosas del poeta en una licuadora e hicieron un batido con la Inés de famosa beldad, el jamón de Aracena y el queso y la berenjena de española antigüedad. Observa que los versos aparecen todos en una sola línea, se colaron unos caracteres extraños donde había vocales con acentos y no se respetó en absoluto los espacios, saltos de líneas, el subrayado de la palabra "Nota" en la parte inferior ni los encabezados con letras en negrillas y más grandes en la parte superior.
¿Qué ocurrió? Si bien al guardar el documento de texto como un archivo con extensión .html hace que el navegador lo abra como sí fuese una página web, en realidad no es un documento HTML porque faltan ... las directrices y el código en HTML que hace que ese documento se visualice correctamente en un navegador. Veamos ahora ...
Un poco más de teoría
... Pero no demasiada, pues no pretendo hacer un curso completo sobre HTML en una sola entrada de este blog. Mi intención más bien es exponer la esencia de lo que es el HTML y darte las herramientas para que puedas seguir aprendiendo por tu cuenta (cómo amante del aprendizaje autodidacta que soy al fín). Volvamos entonces al problema que tenemos entre manos: hemos tomado un texto que se veía bien formateado en el editor de textos pero cuando lo visualizamos en el navegador parecía un revoltijo de jamón, queso y berenjenas pasado por la licuadora.
Veamos, ¿cuáles son los problemas con nuestro supuesto documento HTML y qué exactamente es lo que se ve mal en el explorador?
Estas preguntas nos servirán para orientar nuestro aprendizaje.
Vamos por el primer punto. Para indicar que nuestro documento de texto es un documento HTML, debemos incluir en la primera línea lo siguiente:
Con esa línea, le indicamos al navegador que el documento en cuestión es un documento HTML5 (HTML5 es la versión más reciente del HTML). El
Conviene destacar algo importante sobre las etiquetas en HTML. Puesto que siempre van encerradas entre los caracteres < y > en el texto del documento, estos caracteres son especiales. De hecho, son caca y no los puedes usar directamente en el texto porque el navegador se confunde pensando que estas indicando la presencia de etiquetas. Pero ¿y si queremos visualizar estos caracteres como yo lo acabo de hacer, cómo hacemos? Utilizamos las siguientes secuencias:
Pero en vista de que & es un caracter especial también porque es el que se usa para indicar caracteres especiales, ¿cómo le indicamos al navegador que queremos usar un simple caracter de & y no indicar un caractér especial? La respuesta es usando
Para terminar con el tema de cómo indicarle al navegador que nuestro archivo es un documento de HTML válido, hace falta algo más que la etiqueta
Podemos observar varias cosas aqui. Primero, la presencia de unas cuantas etiquetas. No sólo vemos a la ya conocida
Tambien vemos que cada etiqueta se corresponde con otra al final que comienza con el caractér "/" después del símbolo <. Así por ejemplo, tenemos
Hay en cambio algunas etiquetas que no vienen en parejas de apertura y cierre, como por ejemplo el
Es importante resaltar que cuando colocamos una etiqueta de apertura, como
Pudiésemos retomar el ejemplo del Experimento 2 (el poema "Tres cosas") y rellenar el esqueleto de arriba, colocandole un título apropiado entre las etiquetas
Esto se realiza de manera muy sencilla: indicamos trozos de texto como encabezados, con subrayado, etc. intercalando el texto entre etiquetas de apertura y cierre.
Aunque parezca un detalle, quisiera mencionar que las últimas dos etiquetas dadas arriba -
La diferencia estriba en lo que se conoce como la web semántica. Al usar la etiqueta
El contenido que nosotros colocamos "allí afuera" en la web no sólo es leído por personas, ciegas o no, sino también por máquinas con inteligencia artificial, como por ejemplo los motores de búsqueda. En HTML, nosotros podríamos darle a nuestro contenido puras indicaciones de estilo visual, cómo suele hacer la mayoría de las personas acostumbradas a usar procesadores de palabra. Por ejemplo, en vez de indicar un título como encabezado de una sección, simplemente lo resaltamos y lo colocamos en una letra de tamaño mayor y en negrillas - podríamos trabajar así en HTML también. Sin embargo, al colocar elementos que den pista sobre la estructura de nuestro contenido - jerarquía de secciones y subsecciones, conceptos importantes que queremos enfatizar, etc. - estaríamos ayudando a los motores de búsqueda a descifrar el sentido y la intención de lo que estamos escribiendo. Y eso sólo puede redundar en beneficio nuestro y de nuestra audiencia.
Sobre estas consideraciones volveremos luego. Por lo pronto, como ejercicio te sugiero que revises el archivo .html con el texto del poema de "Tres cosas" e incluyas las etiquetas para indicar el título "Poesía del Siglo de Oro" como un encabezado, encerrar las cuatro estrofas del poema en letras itálicas y subrayar la palabra "Nota" en la parte inferior. Al abrirlo en el navegador deberías de ver los cambios, pero todavía no está del todo bien porque falta saber
Cuando un navegador interpreta un documento en HTML, los saltos de línea que colocamos con la tecla ⏎ (la tecla de ENTER o salto de línea) así como los múltiples espacios en blanco, se asumen como un sólo espacio. Esto es debido a que los documentos HTML no sólo incluyen contenido, sino códigos o etiquetas de directrices, es decir, el HTML es una especie de lenguaje de programación y el archivo HTML se puede considerar como un archivo de código fuente. Entonces, los espacios en blanco (múltiples o no, saltos de línea, etc.) son para hacer más inteligible nuestro código fuente, no para que se visualice tal cual en el navegador. Por ejemplo, habrás observado las etiquetas
Si queremos indicar un salto de línea, debemos colocar una etiqueta
Como ejercicio, te sugiero que revises el documento HTML del poema "Tres Cosas" e incluyas los saltos de línea con
Al hacer las modificaciones pertinentes sobre el documento HTML y visualizarlo en el navegador, vemos que su apariencia empieza a mejorar significativamente.
Los enlaces son elementos importantísimos para la web. ¿Cómo podríamos navegar de una página a otra sin algún tipo de enlaces o hipervínculos? Un enlace tiene dos componentes básicos: el texto del enlace, que es el contenido que comúnmente aparece subrayado en azul cuando lo vemos en el navegador, y una dirección o URL, que es la dirección de la página web hacia la cual apunta el enlace. Veamos un ejemplo. El código HTML a continuación:
Produce lo siguiente:
Podemos destacar que:
Con esta nueva herramienta, ¿podrías revisar ahora el texto de "Tres cosas" para incluir los hipervínculos en "Baltasar del Alcázar" y "https://www.sigoaprendiendo.org/10-poemas-famosos-del-siglo-de-oro.html"?
Una estructura de contenido bastante utilizada en los textos son las listas, enumeradas o no. El HTML provee de etiquetas para estos casos. Si uno quiere incluir una lista enumerada, utiliza las etiquetas
Que produce el siguiente resultado:
Dentro de cada par de etiquetas
Otro tipo de lista frecuentemente utilizada es aquella en la que los items individuales no se enumeran, sino que se distinguen por puntos (bullets). Estas listas se construyen con
Ahora bien, utilizando las listas ordenadas, ¿cómo revisarías el ejemplo de las "Tres cosas" para enumerar cada estrofa?
Como última tarea, nos falta resolver el problema de los caracteres extraños que se ven en lugar de las vocales con acentos en nuestro texto. ¿Porqué ocurre eso? La respuesta tiene que ver con el tipo de codificación de caracteres que usamos.
Verás, al principio de esta entrada, yo mencione que cada caractér se codifica como un byte, que representa un número del 0 al 255. Mientras nos mantengamos dentro de los caracteres convencionales del alfabeto en inglés, donde no hay ni eñes ni acentos, no nos dariamos cuenta de este problema, pues estaríamos usando los caracteres ASCII. El ASCII en efecto es una codificación de los caracteres básicos, que incluye las 26 letras del alfabeto anglosajón (en mayúsculas y minúsculas), los 10 dígitos, algunos caracteres de puntuación e inclusive el espacio (código 32 ASCII) y el salto de línea (código 13 ASCII). Pero cuando escribimos en castellano con acentos y eñes, ahí comienzan los problemas. Tenemos que usar una tabla de caracteres extendida.
Existen varias codificaciones de caracteres, pero la más utilizada por ser la más universal es la de Unicode, específicamente el estándar UTF-8, cuyos primeros 128 caracteres coinciden con el código ASCII. Para utilizar la codificación UTF-8 en nuestra página, debemos colocar la siguiente meta-etiqueta dentro de la sección de encabezado de nuestra página (dentro de las etiquetas
Por último, terminemos de revisar el documento de "Tres Cosas" colocando la meta etiqueta de arriba dentro de la sección del encabezado (puede ser debajo de la etiqueta de
Veamos, ¿cuáles son los problemas con nuestro supuesto documento HTML y qué exactamente es lo que se ve mal en el explorador?
- Solo copiamos un texto y el nombre del archivo tiene una extensión .html, pero no incluimos ninguna directriz para indicar que eso es realmente un documento de HTML. Vale preguntar, ¿qué debe incluirse en el texto para indicar que ese texto es un documento HTML? ¿Cuál es la estructura de un documento HTML?
- ¿Cómo indicamos que queremos determinado trozo de texto como un encabezado? ¿Como indicamos el subrayado? ¿Las negrillas? Etc.
- No hay saltos de línea. Se supone que cada verso debe ir en su propia línea, pero a pesar de que así lo copiamos en el editor de textos, el explorador "ignoró los saltos de línea. ¿Cómo entonces indicar los saltos de línea en el documento?
- ¿Cómo hacemos para incluir los enlaces o hipervínculos? Si queremos que aparezca un texto (por ejemplo: "Baltasar del Alcázar") pero que apunte a una página web determinada hacia la cual queremos que el usuario navegue cuando hace clic sobre el enlace, ¿cómo logramos eso?
- ¿Como hacemos para enumerar las estrofas? ¿Ténemos que enumerarlas nosotros manualmente o existe una forma de que el navegador lo haga por nosotros?
- Y finalmente: ¿Que vamos a hacer con todos esos caracteres extraños que se ven donde habíamos colocado letras con acentos? ¿Porqué el navegador colocó esos caracteres extraños en vez de las vocales con acentos?
Estas preguntas nos servirán para orientar nuestro aprendizaje.
Cómo indicar que nuestro archivo es un documento HTML y como indicarle al navegador su estructura
Vamos por el primer punto. Para indicar que nuestro documento de texto es un documento HTML, debemos incluir en la primera línea lo siguiente:
<!doctype html>
Con esa línea, le indicamos al navegador que el documento en cuestión es un documento HTML5 (HTML5 es la versión más reciente del HTML). El
doctype html declara que el documento en cuestión es un documento de tipo HTML. Fíjense que en esa línea, el !doctype html va incluido entre los signos "menor qué" y "mayor qué" (< y >). En conjunto, cualquier cosa encerrada entre estos signos se conoce como un tag, o etiqueta en castellano. En efecto, cualquier documento de HTML que abras en el editor de texto se caracteriza por la presencia de un montón de etiquetas con sus correspondientes signos de < y >. Como veremos más adelante, es mediante estas etiquetas de HTML que le damos directrices al navegador sobre la forma y la estructura de nuestro contenido.Conviene destacar algo importante sobre las etiquetas en HTML. Puesto que siempre van encerradas entre los caracteres < y > en el texto del documento, estos caracteres son especiales. De hecho, son caca y no los puedes usar directamente en el texto porque el navegador se confunde pensando que estas indicando la presencia de etiquetas. Pero ¿y si queremos visualizar estos caracteres como yo lo acabo de hacer, cómo hacemos? Utilizamos las siguientes secuencias:
< para < y > para >.Pero en vista de que & es un caracter especial también porque es el que se usa para indicar caracteres especiales, ¿cómo le indicamos al navegador que queremos usar un simple caracter de & y no indicar un caractér especial? La respuesta es usando
& para producir el &. De hecho, hay toda una familia de caracteres especiales que puedes consultar esta tabla.Para terminar con el tema de cómo indicarle al navegador que nuestro archivo es un documento de HTML válido, hace falta algo más que la etiqueta
<!doctype html> al principio del mismo. Hay que indicarle cual es su estructura básica, y la estructura básica de un documento HTML consta de un encabezado o header donde colocamos alguna meta-información básica sobre el documento, como el título y otras cosas y el cuerpo o body donde colocamos el contenido como tal. El esqueleto, o estructura básica de un documento HTML es la siguiente:<!doctype html> <html> <head> <title>El Titulo de nuestra página</title> : : </head> <body> : : </body> </html>
Podemos observar varias cosas aqui. Primero, la presencia de unas cuantas etiquetas. No sólo vemos a la ya conocida
<!doctype html> que le indica al navegador que el nuestro es un documento HTML, sino también a otras nuevas, cómo <html>,<head> y <body>. Estas etiquetas no son imprescindibles en nuestro documento HTML, pero se considera buena práctica incluirlas para indicar la estructura de nuestro documento porque entre otras cosas, son útiles para que los motores de búsqueda puedan tener una información más detallada del documento.Tambien vemos que cada etiqueta se corresponde con otra al final que comienza con el caractér "/" después del símbolo <. Así por ejemplo, tenemos
<html> y </html>, <head> y </head>, además de <body> y </body>. Esto es característico del HTML: la mayoría de las etiquetas tienen esa estructura, en donde hay una etiqueta de apertura (sin el /) seguida de un contenido y finalizada en una etiqueta de cierre (con el /). En el esqueleto de arriba, hemos señalado el contenido con puntos suspensivos verticales (los :), pero se entiende que ahí va el contenido que el autor quiera a colocar.Hay en cambio algunas etiquetas que no vienen en parejas de apertura y cierre, como por ejemplo el
<!doctype html>. Una terna de etiqueta apertura, contenido y etiqueta de cierre, o bien una etiqueta individual sin su pareja de cierre y sin contenido se conoce como un elemento en HTML. Así por ejemplo, <title>El Título de nuestra página</title> conforma un elemento en nuestro documento HTML, que por cierto, le indica al navegador cuál es el titulo de la página que está visualizando. Obviamente, puedes sustituir el contenido entre las etiquetas <title> y </title> por cualquier texto para indicar tu propio titulo.Es importante resaltar que cuando colocamos una etiqueta de apertura, como
<title>, debemos después incluir una etiqueta de cierre (</title>). Es un error muy común entre los novatos omitir las etiquetas de cierre. Pero esto podría generar efectos no deseados o errores en la visualización del documento. En la elaboración de documentos HTML - y en cualquier lenguaje de programación realmente - hay que estar atentos a cerrar los paréntesis ( con ), cerrar las comillas " ... ", cerrar los signos de < con el > y cerrar las etiquetas. Adicionalmente, podemos anidar etiquetas dentro de otras - <etiqueta1><etiqueta2>...</etiqueta2></etiqueta1> pero siempre debemos de estar atentos a cerrar las etiquetas anidadas correctamente, como hacíamos con los paréntesis cuando estudiábamos matemáticas en bachillerato (ay! disculpa- esto es una exposición para humanoides).Pudiésemos retomar el ejemplo del Experimento 2 (el poema "Tres cosas") y rellenar el esqueleto de arriba, colocandole un título apropiado entre las etiquetas
<title> y </title>. Luego copiamos el texto que teniamos como contenido entre las etiquetas <body> y </body>, pues ese es el cuerpo del documento (su contenido). Finalmente, salvamos el archivo en el editor de texto y lo abrimos. Veremos exactamente lo mismo que antes, pues aún no hemos trabajado en los otros problemas que indicamos arriba.Cómo indicar encabezados de secciones, subrayados, letras negrillas, etc.
Esto se realiza de manera muy sencilla: indicamos trozos de texto como encabezados, con subrayado, etc. intercalando el texto entre etiquetas de apertura y cierre.
- Encabezados Existen en HTML 6 niveles de encabezados, del 1 al 6, en donde el nivel 1 se corresponde al nivel más general o externo y los niveles subsecuentes se corresponden a los encabezados de las secciones más especificas. Las etiquetas son como sigue:
<h1>...</h1>, en donde la h es la primera letra de header (encabezado) y el 1 puede ser cualquier dígito entre 1 y 6. Así por ejemplo:<h3>Este es un título de nivel 3</h3>produciria lo siguiente:
Este es un título de nivel 3
- Subrayados Para subrayar un texto, se debe colocar entre las etiquetas
<u>y</u>(la u es de underline). De esta forma, tenemos por ejemplo queEsto es un texto con una <u>palabra</u> subrayada.genera lo siguiente:
Esto es un texto con una palabra subrayada.
- Letras negrillas Para poner un texto entre letras negrillas, debes colocarlo entre las etiquetas
<b>y</b>(la letra b es de boldface o letras en negrilla). Por ejemplo,Esto es un texto con <b>letras en negrilla</b>.genera lo siguiente:
Esto es un texto con letras en negrilla.
- Itálicas Las letras itálicas son aquellas que se imprimen un poco inclinadas. Para esto, se usan las etiquetas
<i>e</i>.
Aunque parezca un detalle, quisiera mencionar que las últimas dos etiquetas dadas arriba -
<b> ... </b> e <i> ... </i> que son etiquetas de estilo porque determinan como se ve un contenido, son funcionalmente equivalentes a <strong> ... </strong> y <em> ... </em>, respectivamente. O por lo menos eso ocurre en la mayoría de los navegadores. Siendo así, ¿cual es la diferencia entre <i> ... </i> y <em> ... </em> si ambas producen el mismo resultado visual?La diferencia estriba en lo que se conoce como la web semántica. Al usar la etiqueta
<i> ... </i> buscamos un determinado efecto visual: que las letras se impriman en itálicas. Pero al usar la etiqueta <em> ... </em> queremos enfatizar algo, es decir, indicar una estructura semántica y no un simple estilo visual. Aunque ambas etiquetas producen un resultado igual en la mayoría de los navegadores la mayoría de las veces, pensemos por ejemplo en un navegador adaptado para personas ciegas, con una aplicación de texto-a-habla (sintetizador de voz). El usar la etiqueta <i> ... </i> en este caso no tendría sentido porque estaríamos indicando un estilo visual para una persona ciega. Pero al encontrarse con un texto dentro de la etiqueta <em> ... </em>, eso podría indicarle al sintetizador de voz que lea el texto dentro de la etiqueta en un volúmen más alto para darle un mayor énfasis.El contenido que nosotros colocamos "allí afuera" en la web no sólo es leído por personas, ciegas o no, sino también por máquinas con inteligencia artificial, como por ejemplo los motores de búsqueda. En HTML, nosotros podríamos darle a nuestro contenido puras indicaciones de estilo visual, cómo suele hacer la mayoría de las personas acostumbradas a usar procesadores de palabra. Por ejemplo, en vez de indicar un título como encabezado de una sección, simplemente lo resaltamos y lo colocamos en una letra de tamaño mayor y en negrillas - podríamos trabajar así en HTML también. Sin embargo, al colocar elementos que den pista sobre la estructura de nuestro contenido - jerarquía de secciones y subsecciones, conceptos importantes que queremos enfatizar, etc. - estaríamos ayudando a los motores de búsqueda a descifrar el sentido y la intención de lo que estamos escribiendo. Y eso sólo puede redundar en beneficio nuestro y de nuestra audiencia.
Sobre estas consideraciones volveremos luego. Por lo pronto, como ejercicio te sugiero que revises el archivo .html con el texto del poema de "Tres cosas" e incluyas las etiquetas para indicar el título "Poesía del Siglo de Oro" como un encabezado, encerrar las cuatro estrofas del poema en letras itálicas y subrayar la palabra "Nota" en la parte inferior. Al abrirlo en el navegador deberías de ver los cambios, pero todavía no está del todo bien porque falta saber
Cómo incluir los saltos de línea.
Cuando un navegador interpreta un documento en HTML, los saltos de línea que colocamos con la tecla ⏎ (la tecla de ENTER o salto de línea) así como los múltiples espacios en blanco, se asumen como un sólo espacio. Esto es debido a que los documentos HTML no sólo incluyen contenido, sino códigos o etiquetas de directrices, es decir, el HTML es una especie de lenguaje de programación y el archivo HTML se puede considerar como un archivo de código fuente. Entonces, los espacios en blanco (múltiples o no, saltos de línea, etc.) son para hacer más inteligible nuestro código fuente, no para que se visualice tal cual en el navegador. Por ejemplo, habrás observado las etiquetas
<head> y <body> que iban anidadas dentro de las etiquetas <html>... </html> en el esqueleto de la estructura básica indicado anteriormente van indentadas con dos espacios para indicar el anidamiento. Sin embargo, estos espacios adicionales no se visualizan en el navegador. Son para que el desarrollador pueda leer más fácil el código fuente en HTML.Si queremos indicar un salto de línea, debemos colocar una etiqueta
<br /> al final de lá línea que queremos terminar. La etiqueta <br /> es una de esas etiquetas que no vienen en pareja de apertura y cierre. Por sí sola, indica un salto de línea.Como ejercicio, te sugiero que revises el documento HTML del poema "Tres Cosas" e incluyas los saltos de línea con
<br /> al final de cada verso, además de los <br /> adicionales entre las estrofas y los párrafos. Por cierto, un párrafo es una sola linea finalizada con dos saltos de línea (<br />): uno para terminar l />a línea del párrafo y otro para colocar un espacio vertical entre ese párrafo y el siguiente.Al hacer las modificaciones pertinentes sobre el documento HTML y visualizarlo en el navegador, vemos que su apariencia empieza a mejorar significativamente.
Cómo incluir los hipervínculos (enlaces)
Los enlaces son elementos importantísimos para la web. ¿Cómo podríamos navegar de una página a otra sin algún tipo de enlaces o hipervínculos? Un enlace tiene dos componentes básicos: el texto del enlace, que es el contenido que comúnmente aparece subrayado en azul cuando lo vemos en el navegador, y una dirección o URL, que es la dirección de la página web hacia la cual apunta el enlace. Veamos un ejemplo. El código HTML a continuación:
Aqui está el enlace a <a href="https://laurentidas.blogspot.com" target="_blank">mi nuevo blog</a>.
Produce lo siguiente:
Aqui esta el enlace a mi nuevo blog.
Podemos destacar que:
- La etiquetas
<a ... >y</a>señalan al texto contenido entre la etiqueta de apertura y cierre como un hipervínculo. - La etiqueta de apertura
<a ... >contiene unos parámetros adicionales, que son elhrefy eltarget. Esto es característico de cási todas las etiquetas en HTML. Podemos modificar o controlar ciertos aspectos de la etiqueta modificando algunos parámetros en la etiqueta de apertura. - La dirección del enlace se incluye entre comillas luego de
href=, que es el parámetro del URL del hipervínculo. - El parámetro que sigue al
target=le indicará al navegador si quiere que el enlace abra en esa misma ventana o en una ventana o pestaña aparte. Al escribirtarget="_blank"estaríamos indicándole al navegador que queremos que el enlace abra en una pestaña diferente.
Directrices para listas y enumeración de elementos
Una estructura de contenido bastante utilizada en los textos son las listas, enumeradas o no. El HTML provee de etiquetas para estos casos. Si uno quiere incluir una lista enumerada, utiliza las etiquetas
<ol>...</ol>. La "ol" representa una ordered list, o lista ordenada (enumerada. Dentro de una lista, cada item se especifica dentro de las etiquetas <li> ... </li>. Así por ejemplo, tenemos lo siguiente:<ol> <li>Primer punto</li> <li>Segundo punto</li> <li>Tercer punto</li> <li>Cuarto punto</li> <li>Y así sucesivamente ...</li> </ol>
Que produce el siguiente resultado:
- Primer punto
- Segundo punto
- Tercer punto
- Cuarto punto
- Y así sucesivamente ...
Dentro de cada par de etiquetas
<li> ... </li> puedes incluir párrafos enteros o varias lineas separadas por saltos del línea, imágenes, enlaces y contenidos: básicamente, culaquier cosa.Otro tipo de lista frecuentemente utilizada es aquella en la que los items individuales no se enumeran, sino que se distinguen por puntos (bullets). Estas listas se construyen con
<ul>...</ul> en vez de <ol>...</ol> (la "ul" significa unordered list), como en el siguiente ejemplo:<ul> <li>Primer punto</li> <li>Segundo punto</li> <li>Tercer punto</li> <li>Cuarto punto</li> <li>Y así sucesivamente ...</li> </ul>
- Primer punto
- Segundo punto
- Tercer punto
- Cuarto punto
- Y así sucesivamente ...
Ahora bien, utilizando las listas ordenadas, ¿cómo revisarías el ejemplo de las "Tres cosas" para enumerar cada estrofa?
La codificación de caracteres
Como última tarea, nos falta resolver el problema de los caracteres extraños que se ven en lugar de las vocales con acentos en nuestro texto. ¿Porqué ocurre eso? La respuesta tiene que ver con el tipo de codificación de caracteres que usamos.
Verás, al principio de esta entrada, yo mencione que cada caractér se codifica como un byte, que representa un número del 0 al 255. Mientras nos mantengamos dentro de los caracteres convencionales del alfabeto en inglés, donde no hay ni eñes ni acentos, no nos dariamos cuenta de este problema, pues estaríamos usando los caracteres ASCII. El ASCII en efecto es una codificación de los caracteres básicos, que incluye las 26 letras del alfabeto anglosajón (en mayúsculas y minúsculas), los 10 dígitos, algunos caracteres de puntuación e inclusive el espacio (código 32 ASCII) y el salto de línea (código 13 ASCII). Pero cuando escribimos en castellano con acentos y eñes, ahí comienzan los problemas. Tenemos que usar una tabla de caracteres extendida.
Existen varias codificaciones de caracteres, pero la más utilizada por ser la más universal es la de Unicode, específicamente el estándar UTF-8, cuyos primeros 128 caracteres coinciden con el código ASCII. Para utilizar la codificación UTF-8 en nuestra página, debemos colocar la siguiente meta-etiqueta dentro de la sección de encabezado de nuestra página (dentro de las etiquetas
<head> ... </head>):<meta charset="utf-8">
Por último, terminemos de revisar el documento de "Tres Cosas" colocando la meta etiqueta de arriba dentro de la sección del encabezado (puede ser debajo de la etiqueta de
<title> ... </title>, dentro de la cual por cierto deberías de colocar "Poesía del Siglo de Oro" o el titulo que mejor te parezca). Como de costumbre salvamos el archivo y lo abrimos en el navegador. Si has hecho las modificaciones correctamente, deberías de tener un documento HTML bien presentado. Si no, compara tu documento HTML con el que te coloco a continuación:<!doctype html> <html> <head> <title>Poesía del Siglo de Oro</title> <meta charset="utf-8"> </head> <body> <h1>Poesía del Siglo de Oro</h1> <a href="http://users.ipfw.edu/jehle/poesia /trescosa.htm" target="_blank">Baltasar del Alcázar</a> no está entre los cinco poetas más famosos del siglo de oro. Pero sólo porque el nivel de competencia en aquellos siglos era altísimo. He aquí algunas de sus redondillas más graciosas. <h2>Tres cosas</h2> <ol> <li><i>Tres cosas me tienen preso<br /> de amores el corazón:<br /> la bella Inés, el jamón<br /> y berenjenas con queso.<br /><br /></i> </li> <li><i>Esta Inés, amantes, es<br /> quien tuvo en mí tal poder,<br /> que me hizo aborrecer<br /> todo lo que no era Inés.<br /><br /></i> </li> <li><i>Trájome un año sin seso,<br /> hasta que en una ocasión<br /> me dio a merendar jamón<br /> y berenjenas con queso.<br /><br /></i> </li> <li><i>En gusto, medida y peso<br /> no les hallo distinción:<br /> ya quiero Inés, ya jamón,<br /> ya berenjenas con queso.<br /></i> </li> </ol> <br /> <u>Nota:</u> Tomado de <a href="https://www.sigoaprendiendo.org/10-poemas-famosos-del-siglo-de-oro.html" target="_blank">https://www.sigoaprendiendo.org/10-poemas-famosos-del-siglo-de-oro.html</a> </body> </html>
Qué sigue después
Si lograste hacer el ejercicio de "Tres Cosas", ¡felicitaciones! Has desarrollado tu primera página web en HTML. Ya conoces la esencia y los fundamentos del HTML, sólo te falta ampliar más tus conocimientos de otras etiquetas para incuir imágenes, tablas, etc. Para complementar tus herramietas, deberías de aprender un poco de CSS también. El CSS es simplemente un lenguaje para especificar detalladamente los estilos de visualización y diagramación de los elementos HTML.
También querrás aprender Javascript, que es un lenguaje de programación soportado por todos los navegadores modernos. Con Javascript, puedes lograr que tu página web se vuelva "dinámica" y que pueda interactuar con el usuario. Con Javascript (y CSS más HTML) puedes inclusive desarrollar tus propios video juegos o actividades lúdico-didácticas. De hecho, en este blog seguramente haré entradas con video juegos y cosas de este tipo. Eso es posible gracias a que Javascript es un lenguaje de programación, que es aquello con lo cual podemos desarrollar programas y aplicaciones. Vale la pena aprender estas herramientas aún si eres un simple bloguero porque te abren un conjunto de posibilidades muy interesantes para hacer tu blog más interactivo, útil y entretenido. Y lo mejor de todo es que esta disponible en cualquier navegador de cualquier plataforma (Windows, Linux, Mac, Android, etc.)
Otra herramienta que quizás querrás aprender a usar es Google Script. Google Script es muy parecido al Javascript (de hecho, son prácticamente indistintos), pero Google Script es el lenguaje de script con el que podemos trabajar con todos los productos de Google: el correo electrónico (Gmail), Google Docs (las aplicaciones de ofimática de Google en la nube), Google Drive (hospedaje de archivos en la nube), etc. Esto es interesantísimo porque nosotros podemos tener un Google Sheet funcionando como una base de datos en la nube y cuando alguien desde tu blog quiere agregar una información a esa base de datos, lo haría a través de un Google Script. Lo contrario también es cierto: podríamos tener una base de datos actualizándose constantemente y siendo consultada desde tu blog. También podríamos automatizar el envío de correos electrónicos masivos, responder los correos de forma automatizada, etc. Las posibilidades son infinitas. Piensen en estas herramientas como algo para tener un servidor dedicado de forma gratuita y sin pagar hosting.
Para ampliar tus conocimientos, seguramente querrás descargar un buen manual sobre HTML, CSS y Javascript. Existen muchos en Internet que puedes googlear. Recientemente encontré uno en castellano que luce bastante interesante que puedes descargar aqui. Aún no lo he revisado a fondo, pero como dije, luce bastante bien. En el ámbito de los video juegos, seguramente te interesará el libro de "Foundation game design with HTML5 and Javascript", el cual puedes descargar por aquí.
Aunque con un editor de textos como Notepad puedes crear y editar documentos HTML (porque al fín del día son sólo archivos de texto), seguramente necesitaras un buen editor de textos más adecuado para editar documentos HTML. Estos editores suelen tener varias funcionalidades para editar documentos HTML, como por ejemplo resaltado con distintos colores de las etiquetas, un arbol jerárquico de elementos, etc. Yo particularmente uso Geany desde Linux. Es gratuito y sirve para varias plataformas. También está el Notepad ++, que también es gratuito pero sólo corre en Windows.
También querrás aprender Javascript, que es un lenguaje de programación soportado por todos los navegadores modernos. Con Javascript, puedes lograr que tu página web se vuelva "dinámica" y que pueda interactuar con el usuario. Con Javascript (y CSS más HTML) puedes inclusive desarrollar tus propios video juegos o actividades lúdico-didácticas. De hecho, en este blog seguramente haré entradas con video juegos y cosas de este tipo. Eso es posible gracias a que Javascript es un lenguaje de programación, que es aquello con lo cual podemos desarrollar programas y aplicaciones. Vale la pena aprender estas herramientas aún si eres un simple bloguero porque te abren un conjunto de posibilidades muy interesantes para hacer tu blog más interactivo, útil y entretenido. Y lo mejor de todo es que esta disponible en cualquier navegador de cualquier plataforma (Windows, Linux, Mac, Android, etc.)
Otra herramienta que quizás querrás aprender a usar es Google Script. Google Script es muy parecido al Javascript (de hecho, son prácticamente indistintos), pero Google Script es el lenguaje de script con el que podemos trabajar con todos los productos de Google: el correo electrónico (Gmail), Google Docs (las aplicaciones de ofimática de Google en la nube), Google Drive (hospedaje de archivos en la nube), etc. Esto es interesantísimo porque nosotros podemos tener un Google Sheet funcionando como una base de datos en la nube y cuando alguien desde tu blog quiere agregar una información a esa base de datos, lo haría a través de un Google Script. Lo contrario también es cierto: podríamos tener una base de datos actualizándose constantemente y siendo consultada desde tu blog. También podríamos automatizar el envío de correos electrónicos masivos, responder los correos de forma automatizada, etc. Las posibilidades son infinitas. Piensen en estas herramientas como algo para tener un servidor dedicado de forma gratuita y sin pagar hosting.
Para ampliar tus conocimientos, seguramente querrás descargar un buen manual sobre HTML, CSS y Javascript. Existen muchos en Internet que puedes googlear. Recientemente encontré uno en castellano que luce bastante interesante que puedes descargar aqui. Aún no lo he revisado a fondo, pero como dije, luce bastante bien. En el ámbito de los video juegos, seguramente te interesará el libro de "Foundation game design with HTML5 and Javascript", el cual puedes descargar por aquí.
Aunque con un editor de textos como Notepad puedes crear y editar documentos HTML (porque al fín del día son sólo archivos de texto), seguramente necesitaras un buen editor de textos más adecuado para editar documentos HTML. Estos editores suelen tener varias funcionalidades para editar documentos HTML, como por ejemplo resaltado con distintos colores de las etiquetas, un arbol jerárquico de elementos, etc. Yo particularmente uso Geany desde Linux. Es gratuito y sirve para varias plataformas. También está el Notepad ++, que también es gratuito pero sólo corre en Windows.
Una nota para los blogueros
Existen varios sitios desde donde puedes crear y desplegar un blog. Los más conocidos son Blogger y WordPress. De WordPress se dice que es el más profesional y que tiene montones de plantillas para crear páginas web espectaculares. Pero la mayoría de esas funcionalidades están disponibles y tienen sentido sólo si uno paga el hospedaje y el dominio (para obtener su propia dirección). Blogger es gratuito, aunque puedes también obtener tu propio dominio pagando y puedes comprarle el hosting a Google. De Blogger se dice que es una buena plataforma para comenzar a bloguear, pero mucha gente me ha comentado que sus plantillas no son tan espectaculares como las de WordPress. Sin embargo, a mi me gusta mucho Blogger por dos razones: 1) Puedo crear yo mismo mi propio HTML/CSS/Javascript y desplegarlo desde las entradas o páginas de mi blog. También me permite modificar el HTML de la plantilla principal. 2) Blogger, al ser subsidiaria de Google, dispone de los mejores y más rápidos servidores del planeta por lo cual, aún siendo gratuito el hospedaje, los tiempos de respuesta de tus páginas y la capacidad de tráfico simultáneo que soporta son realmente muy superiores a las de otras plataformas de blogueo.
¿Qué mi sitio no luce muy profesional porque la dirección es https://laurentidas.blogspot.com y no https://www.laurentidas.com? Eso para mi es un precio muy pequeño a pagar por la conveniencia, flexibilidad y versatilidad que tengo al poder crear y desplegar mi propio código HTML/Javascript en esta plataforma. Por ejemplo, en el editor de entradas, yo puedo optar entre editar en modo Redacción (Compose) o editar en modo HTML. Siempre opto por esto último.
¿Qué mi sitio no luce muy profesional porque la dirección es https://laurentidas.blogspot.com y no https://www.laurentidas.com? Eso para mi es un precio muy pequeño a pagar por la conveniencia, flexibilidad y versatilidad que tengo al poder crear y desplegar mi propio código HTML/Javascript en esta plataforma. Por ejemplo, en el editor de entradas, yo puedo optar entre editar en modo Redacción (Compose) o editar en modo HTML. Siempre opto por esto último.
No hay comentarios.:
Publicar un comentario