HTML: un ensayo temático sobre el transcendental lenguaje de la WWW (parte 4)
HTML: un ensayo temático
Por Enio...
Saludos, estimados lectores. Esta es la cuarta entrega de la serie HTML, el cual es un ensayo sobre HTML en aras de conceptualizarlo y, en el proceso, dar a conocer su importancia para la WWW y para nuestra actividad en tanto bloggers de Steemit. Recordemos que la metodología utilizada desde el comienzo y que sintetiza las ideas y organiza el discurso ha sido la cartografía conceptual, la cual nuevamente recapitulo tal como sigue.
Hemos cubierto ya todos los ejes de la cartografía y sólo nos resta completar el último de ellos, el de ejemplificación. Al igual que en la anterior parte, el norte de esta es profundizar en el conocimiento de las etiquetas HTML, en especial aquellas que sean muy importantes en general o sean de interés para nosotros en Steemit, lo cual se logrará a través del análisis de la sintaxis y la ejemplificación de uso de cada una, al tiempo que se señalarán buenas y malas prácticas con HTML para naturalmente promover las primeras.
En ese sentido, en nuestro pasado artículo hemos presentado y ejemplificado varias etiquetas HTML siguiendo la clasificación por tipos de elementos HTML, lo cual recordaremos resumidamente:
- La etiqueta raíz es
<html>, con la cual debemos abrir y cerrar todo el documento de la página web. No es usable para bloguear en Steemit. - Las etiquetas de metadata se usan en el desarrollo web para proporcionar información adicional al navegador web. De ellas vimos que está
<title>, que sirve para colocarle un título a la página en la barra de ventana, y<meta>que es para propósitos más técnicos. No son usables para bloguear en Steemit. - Entre las etiquetas de sección están
<body>,<header>,<section>,<article>,<footer>, etc., las cuales sirven para delimitar regiones en página web, aunque no son usables por los bloggers de Steemit, puesto que las aplica el sistema. También vimos que los títulos se definen con la etiqueta<hx>, donde la "x" debe ser reemplazada por un número del 1 al 6, siendo el título más grande el<h1>y el más pequeño, el<h6>. Esto sí es usable en Steemit. - Entre las etiquetas de agrupación está
<p>, que debe usarse para denotar párrafos. Ella hará que los párrafos se separen automáticamente los unos de los otros. También está la etiqueta<hr>que sirve para insertar un separador de secciones y consiste en una línea horizontal. Asimismo, vimos que con<blockquote>se crean citas en forma de bloque, siendo equivalentes al operador>de markdown. Estas etiquetas son usables en Steemit. - Otras etiquetas de agrupación estudiadas son
<ol>, que es para listas ordenadas, y<ul>, que es para listas desordenadas, ambas requiriendo que los elementos que conformen la lista se denoten con la etiqueta<li>. Es válida en Steemit. - Finalmente, la última etiqueta de agrupación abordada es
<div>que sirve para insertar divisiones en el documento en función de la necesidades del usuario. En Steemit se usan para aplicar formato al texto y otros objetos, tal como justificado, alineación a la derecha, a la izquierda o centrado; flotado a la derecha o izquierda, etc.
Nos concentraremos ahora en el otro grupo de etiquetas HTML: 1) de programas, 2) de semántica de texto, 3) de contenido incrustado y 4) de tabulación. Nuevamente, usaremos un ejemplo en código fuente completo para ilustrar el uso de todas estas etiquetas.
<html>
<head>
<script>
//Aquí podemos insertar o enlazar código Javascript (sólo para programadores).
</script>
</head>
<body>
<div>
Aquí comienza una división
<p>
Esto es un párrafo en el cual hay palabras en <b>negritas</b> y <i>cursivas</i> cuyo significado NO es especial, aunque sí hay palabras en negritas que son <strong>importantes</strong> o están en cursiva para darles <em> énfasis</em>.
</p>
<p>
En este otro párrafo solo inserto un <sup>superíndice</sup> y un <sub>subíndice</sub>.
También inserto un <a href="URL-del-hipervinculo">hipervínculo</a> de demostración.
</p>
<br> Con esto hago saltos de línea.
<pre><code>
Y esto es un bloque donde pegamos código de programación.
</code></pre>
Aquí cierra una división
</div>
<br> Insertando otro salto de línea y, a continuación, una imagen:
<img src="link-de-la-imagen" alt="un texto alternativo">
Maquetando una tabla:
<table>
<thead>
<th> Encabezado de la columna 1 </th>
<th> Encabezado de la columna 2 </th>
</thead>
<tr>
<td> Celda: fila 1, columna 1 </td>
<td> Celda: Fila 1, columna 2 </td>
</tr>
<tr>
<td> Celda: Fila 2, columna 1 </td>
<td> Celda: Fila 2, columna 2 </td>
</tr>
</table>
Aquí cierra el cuerpo de la página y el código HTML
</body>
</html>
Al igual que el del pasado artículo, este también es un código básico para los desarrolladores web, pero no todas sus etiquetas deberían preocuparnos como blogger de Steemit, aunque la gran mayoría de las mostradas sí nos servirán a la hora de hacer posts o comentarios en esa y otras plataformas. Revisaremos ahora las nuevas etiquetas allí incluidas en función de la clasificación de elementos HTML.
Etiquetas de programas:
Se trata de unas cuantas etiquetas cuyo propósito es facilitar la aplicación de programación sobre la página web. Entre ellas están <script> que sirve para enlazar o insertar código del lenguaje de programación Javascript, el complemento de HTML que le aporta la programación propiamente. En nuestro código fuente 1 se aprecia en las líneas 6-8 la ubicación de esta etiqueta dentro de la estructura de la página.
También existe la etiqueta <template> que sirve para denotar fragmentos de contenido aislado del contenido principal y que puede ser mostrado en función de la programación de la página; y existe <canvas>, la cual inserta un 'lienzo' o sección donde se crearán gráficos a base de programación, entre otras. Ninguna de estas etiquetas son soportadas por Steemit para uso de los bloggers y son altamente técnicas, pero son importantes en el mundo del desarrollo web y por ello las incluí en esta reseña.
Etiquetas de semántica de texto:
Sirven para aplicar propiedades o efectos particulares a porciones de texto que generalmente consistirán en oraciones o palabras. Entre ellas se encuentran:
1. <a> (línea 15): el diminuto nombre de esta etiqueta viene de anchor ('ancla' en inglés) y está ideada para insertar hipervínculos dentro del documento. Puede usarse sobre texto generalmente, aunque también puede aplicarse a elementos diferentes, tales como imágenes. Para insertar un hipervínculo con <a> hay que usar el atributo href. Su sintaxis de uso sería así:
<a href="una-URL-o-link"> texto en hipervínculo </a>Y un ejemplo real sería:
<a href="https://es.wikipedia.org/wiki/HTML"> HTML según la Wikipedia </a>Lo cual se vería en el navegador web así:
Ahora bien, es común que los usuarios en Steemit no acostumbren a usar la etiqueta <a> correctamente, sino que simplemente ‘pegan’ el link, puesto que "Steemit automáticamente lo reconoce". Esto es parcialmente cierto, aunque es una mala práctica y también trae problemas a la hora de trabajar con otros editores e incluso otros clientes de Steemit, bien sea para leer o subir el post. Lo correcto es utilizar la etiqueta <a> para denotar los hipervínculos que deseemos incluir.
2. <b>, <i>, <strong>, <em> (líneas 11, 14): estas cuatro etiquetas sirven para formatear texto con negritas y cursivas. Las etiquetas de negritas son <b> y <strong>. La diferencia entre ambas es que la primera debería usarse para aquellas palabras en negrita que no tengan mucha importancia, mientras que <strong> (fuerte) es para palabras con mucho significado dentro del contenido. En la práctica, ambas etiquetas producen el mismo efecto (negritas), pero su diferencia es a nivel semántico, esto es, para que los programas que interpretan el código sepan que hay algo muy importante o relativamente importante allí.
Lo mismo ocurre con <i> y <em> que son para hacer cursivas. La primera genera ese efecto por sí solo, pero la segunda significa 'énfasis' (emphasis), y por defecto los navegadores aplican el énfasis colocando el texto en cursiva. Nuevamente, es una cuestión semántica la diferencia entre ambas, y en la práctica de blogging su uso podría ser indistinto, aunque conceptualmente tienen diferencias.
Ejemplos:
<b>Imagen 1</b>: representación gráfica de la solución.
El software libre tiene que ver con la idea de <strong>libertad</strong>, no de precio.
El nombre científico del hongo era <i>Omphalotus nidiformis</i>.
Una característica fundamental de la blockchain es la <em>descentralización</em>
Que puede renderizarse así:
Por último, es importante aclarar que estas etiquetas generalmente deben ser reservadas para porciones de texto cortas, principalmente palabras u oraciones clave, pues para eso es que son las negritas y cursivas. Es una mala práctica usarlas en porciones extensas de texto. Está claro que son etiquetas que podemos usar en Steemit.
3. <sup> y <sub>: este par de etiquetas sirve para insertar superíndices y subíndices respectivamente, por lo cual modifican el tamaño de la fuente del texto que ellas contienen y lo alinean verticalmente en relación al resto del texto, a fin denotar un índice (arriba o abajo, según sea el caso). Ejemplo de sintaxis y uso:
Fue descrito como "sumamente eficiente" <sup>[2]</sup> por los autores de la época.
...
Las variables X<sub>1</sub> y X<sub>2</sub> sí tenían solución.Previsualizando:
⬆️ Imagen 5: Ejemplo de uso de etiquetas para superíndices y subíndices Autor: @Eniolw Licencia: CC BY 2.0
Debe notarse que esta etiqueta no está semánticamente pensada para transmitir otra idea que no sea denotar índices, aunque con frecuencia los usuarios de Steemit la suelen utilizar para hacer notas aclaratorias en letras pequeñas, quizá como descripción de alguna imagen, pero hacer eso no es una práctica técnicamente recomendada siguiendo la semántica del lenguaje.
4. <br>: esta etiqueta es muy sencilla de usar, ya que no es envolvente, pues requiere una sola marca. Sirve para insertar saltos de línea y puede usarse dentro o fuera de párrafos siempre que se necesite dejar una línea. Por supuesto, podemos repetir tantos saltos de líneas como veces repitamos la etiqueta. Ejemplo:
Me gustas cuando callas porque estás como ausente,<br>y me oyes desde lejos, y mi voz no te toca.<br>Parece que los ojos se te hubieran volado<br>y parece que un beso te cerrara la boca.<br><br>Fragmento de un poema de Neruda.Previsualizando:
5. <code>: sirve para insertar porciones de código de programación. Tanto las reglas de estilo incorporadas en las páginas como los navegadores web hacen que el texto formateado con esta etiqueta se vea diferente, algunas veces con color de fondo y fuentes modificados. Ejemplo:
<code> Se supone que esta oración es código de programación </code>También se le puede combinar con la etiqueta mencionada en el pasado artículo <pre> para crear un bloque de código fuente. Ejemplo:
<pre><code>
Se supone que estas oraciones
son códigos informáticos o de programación.
Son sólo un ejemplo.
</code></pre>Naturalmente, es una etiqueta válida para Steemit, donde suele generar el efecto fondo gris y fuentes uniformes que vemos en todos los códigos mostrados en este artículo.
Contenido incrustado:
Estas etiquetas sirven para insertar contenido paratextual en el documento, es decir, contenido más allá de lo textual. También pueden servir para insertar contenido que forma parte de una fuente externa. Examinaremos dos etiquetas de esta categoría que pueden interesarnos:
1. <img>: con esta etiqueta se insertan imágenes dentro del documento HTML. Para ello debemos usar el atributo obligatorio src que significa 'source' (fuente) y en él se coloca la URL de la imagen (link). Ejemplos:
Sintaxis:
<img src="URL-de-la-imagen" alt="texto alternativo para la imagen">
...
Ejemplo real:
<img src="https://i.postimg.cc/NjKSD529/html-banner.jpg" alt="Banner del post">
Como vemos, es una etiqueta no evolvente, es decir, que no envuelve algo como sí lo hace la etiqueta a, por ejemplo. También vemos que en ella se ha usado src para referirse a la URL de la imagen.
Sin embargo, también vemos que hay otro atributo que se puede usar, esto es, alt que significa alternative ('alternativa' en inglés) y sirve para permitirle al usuario colocar un texto que se visualizará en caso de que la imagen no pueda ser cargada por el navegador (de allí lo de 'alternativa'). En el ejemplo dado, si la imagen no carga (o mientras está cargando) se mostrará el texto "Banner del post" en lugar de la imagen. Aunque no es obligatorio especificar ese atributo, sí se considera una buena práctica hacerlo. La información a colocar allí lógicamente será algo que describa la imagen. La previsualización de ese código se muestra a continuación.
Precisamente, vemos que en el primer caso ('sintaxis') no se muestra una imagen puesto que el link suministrado no es válido, por lo que muestra en su lugar el texto alternativo, mientras que en el segundo caso ('ejemplo real') sí se muestra la imagen enlazada.
Ahora bien, es conveniente comentar que si bien algunos usuarios 'copian y pegan' el link de la imagen directamente en el editor de Steemit porque "éste lo reconoce y muestra la imagen automáticamente", ello no es una práctica recomendada desde un punto de vista técnico. Nuevamente, ello puede traer problemas con otras plataformas y programas. Lo correcto es enlazar las imágenes con la etiqueta <img> que es la destinada para tal fin.
2. <iframe>: sirve para insertar un contexto de navegación anidado, es decir, para insertar contenido de una página externa dentro de la propia. Esta etiqueta, sin embargo, se presta para algunos problemas de seguridad, razón por la cual en Steemit está restringida a funcionar solamente con unos pocos sitios web externos. Tales sitios permitidos son: Youtube, Vimeo y Soundcloud.
De tal manera que para insertar vídeos o audios de estos sitios, lo indicado es usar esta etiqueta. La manera correcta de hacerlo es copiando el código HTML que estos sitios generan para compartir el vídeo como contenido incrustado. Por ejemplo, para insertar un vídeo de Youtube correctamente, hay que copiar y pegar el código que genera la opcíón de esa plataforma para ese vídeo en particular (compartir -> insertar). Ejemplo:
<iframe width="560" height="315" src="https://www.youtube.com/embed/UQBAqFKqTVs" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>...</iframe>Previsualizando:
⬆️ Imagen 8: Ejemplo de uso correcto de etiqueta <iframe> para insertar vídeos de Youtube Autor: @Eniolw Licencia: CC BY 2.0 Nota: El vídeo que se representa en la imagen es de Nasa ScienceCasts en Youtube y es de licencia CC BY.
Es así como se hace una inserción correcta del vídeo. Ahora bien, aunque la webapp de Steemit reconoce automáticamente un enlace a un vídeo de Youtube pegado directamente en su editor sin haber usado este etiqueta, y visualiza el video correctamente, hacer eso así se considera una mala práctica que, como las anteriores, trae problemas al trabajar con otros editores y clientes de la blockchain. Lo correcto es insertar los vídeos usando la etiqueta <iframe>, para lo cual podemos valernos de la pequeña porción de código proporcionada para tales fines por las páginas soportadas.
Etiquetas de tabulación:
Comprenden todas aquellas que sirven para maquetar una tabla de datos. Entre ellas:
1. <table>: que es la etiqueta raíz de la tabla. Esta deberá comenzar y cerrar con esta etiqueta y todo lo demás debe ir dentro de ella.
2. <thead>: sirve para delimitar la fila de encabezamiento de la tabla y se inserta una sola vez. Dado que el encabezado de la tabla no es obligatorio, esta etiqueta es opcional.
3. <th>: tras haber insertado una <thead>, dentro de ella se coloca esta etiqueta, a fin de marcar el encabezado de cada columna, es decir, hay que usar <th> para las columnas se vayan a tener.
4. <tbody>: sirve para delimitar la zona donde comienza el contenido de la tabla. Debe ir colocada después de <thead>, lógicamente, aunque su uso también es opcional. Las filas y celdas de la tabla deberían ir contenidas en esta etiqueta.
5. <tr>: viene de table row (fila de tabla). Como indica su nombre, con esta etiqueta se marcan las filas de la tabla. Dentro de ellas van las celdas.
6. <td>: esta etiqueta debe colocarse dentro de las <tr> pues es para insertar celdas. A medida que vamos insertando celdas se van creando columnas, por lo que debemos tener el mismo número de celdas (<td>) dentro de cada fila (<tr>).
Un ejemplo de maquetación de tabla con todas estas etiquetas es el siguiente:
<table>
<thead>
<th> Encabezado de la columna 1 </th>
<th> Encabezado de la columna 2 </th>
</thead>
</body>
<tr>
<td> Celda: fila 1, columna 1 </td>
<td> Celda: Fila 1, columna 2 </td>
</tr>
<tr>
<td> Celda: Fila 2, columna 1 </td>
<td> Celda: Fila 2, columna 2 </td>
</tr>
</body>
</table>Previsualizando:
Es de hacer notar que, semánticamente hablando, las tablas son para representar datos, por lo que deberían contener texto (datos alfanuméricos, signos, etc.), y no imágenes u otra cosa.
Alcanzado este punto, hemos ya abordado todas las etiquetas HTML que nos hemos propuesto: las de elemento raíz, de metadata, de secciones, de agrupación, de programas, de semántica de texto, de contenido incrustado y de tabulación, la mayoría de las cuales sí podemos utilizar en Steemit para efecto de maquetar y formatear nuestros posts y comentarios como usuarios bloggers, aunque algunas otras son para uso más refinado por parte de los desarrolladores web.
Hemos visto la sintaxis de cada una con sus respectivos ejemplos en código y en previsualización. También hemos señalado a lo largo del ensayo una serie de buenas y malas prácticas con HTML que los usuarios debemos conocer, a fin de mejorar nuestra técnica a la hora de estructurar contenido con este lenguaje.
Es posible, sin embargo, que continuemos este ensayo conforme se detecten "puntos ciegos" en el feedback y nuevos motivos para ampliar nuestros conocimientos del tema, en especial cuando tienen relación con algunas aplicaciones que usamos, tales como steemstem.io.
De momento, si tienes alguna duda aporte o sugerencia, no dudes en hacerlo saber.
ALGUNAS FUENTES DE CONSULTA
- @Eniolw (2019). HTML: un ensayo temático sobre el transcendental lenguaje de la WWW (parte 1). Disponible en mi blog
- @Eniolw (2019). HTML: un ensayo temático sobre el transcendental lenguaje de la WWW (parte 2). Disponible en mi blog
- @Eniolw (2019). HTML: un ensayo temático sobre el transcendental lenguaje de la WWW (parte 3). Disponible en mi blog
- Página oficial del W3C
- MDN web docs: HTML
- Elementos de HTML disponible en : http://www.htmlquick.com
- Etiquetas soportadas por la webapp Steemit según su Repositorio en GitHub
Si estás interesado en más temas sobre Ciencia, Tecnología, Ingeniería y Matemáticas (STEM, siglas en inglés), consulta las etiquetas #STEM-Espanol y #SteemSTEM, donde puedes encontrar más contenido de calidad y también hacer tus aportes. Puedes unirte al servidor de Discord de STEM-Espanol para participar aún más en nuestra comunidad y consultar los reportes semanales publicados por @STEM-Espanol.
NOTAS ACLARATORIAS
- La imagen de pie es de @CarlosERP-2000 y @IAmPhysical y es de dominio público.
- A menos que haya sido indicado lo contrario, las imágenes de esta publicación han sido elaboradas por el autor, lo que incluye la imagen de banner, creada con base en imágenes de dominio público.
This post has been voted on by the SteemSTEM curation team and voting trail in collaboration with @utopian-io and @curie.
If you appreciate the work we are doing then consider voting all three projects for witness by selecting stem.witness, utopian-io and curie!
For additional information please join us on the SteemSTEM discord and to get to know the rest of the community!
Thanks!
Excelente post @eniolw, muy útil el uso de las etiquetas a la hora de publicar un post y es pertinente que hayas mencionado las buenas y malas prácticas al usar HTML, sería interesante también realizar una comparación con el lenguaje Markdown utilizado en Steemit.
Excelente sugerencia, @ydavgonzalez. Lo tomaré en cuenta. Gracias por la visita, saludos!
Esta serie de post realmente tiene muy buena estructura sobre el HTML, me ha gustado como tu gráfica ha servido de base para llevar una idea continua de estudio como una estructura de contenido en partes, es el índice de todos pero en forma de esquema
Posted using Partiko Android
Gracias @ubaldonet. Esa es la idea, tener algo que organice el discurso. Saludos!
Hi @eniolw!
Your post was upvoted by Utopian.io in cooperation with @steemstem - supporting knowledge, innovation and technological advancement on the Steem Blockchain.
Contribute to Open Source with utopian.io
Learn how to contribute on our website and join the new open source economy.
Want to chat? Join the Utopian Community on Discord https://discord.gg/h52nFrV
Great!
Excelente amigo @eniolw, cada una de las partes que conforman esta publicación es maravillosa ya que nos va ayudar a públicar con mejor formato nuestros post, esperemos el conversatorio sobre este tema para poder aclarar dudas.
Gracias @Felix!
Excelente post @eniolw, de la serie es el que más me ha gustado, quizás porque nos has presentado la sintaxis de cada etiqueta con ejemplos y su visualización, realmente he captado los malos hábitos al escribir en HTML; sobre ello tengo esta duda, hiciste referencia a que la etiqueta para superindices solo se utiliza para denotar índices, yo la utilizo para hacer indicar la referencia de una cita, ¿esto también podría considerarse una mala práctica?
Hola, Emilio. Sí, es una mala práctica desde un punto de vista técnico de uso del lenguaje y su semántica. Es como que en Química uses la letra theta (Θ) para simbolizar oxígeno, en vez de usar la O mayúscula latina. La diferencia es que el efecto aquí es lo que se desea y casi nadie lo notará.
La etiqueta correcta para denotar letras pequeñas en comentarios adicionales es
<small>, pero esa etiqueta no está soportada en Steemit. De allí que recurrir a<sup>o<sub>para denotar eso sea más bien un "artificio". Fíjate que yo mismo lo utilicé.Gracias por tu comentario! Saludos.
Ok. Vale Eniolw, gracias a por explicar en mi idioma jaja, y por instruirnos con el uso de las etiquetas. Saludos!
:D
Mi apreciado @eniolw, gracias por una nueva entrega. Entiendo ahora lo que me explicabas ayer de los pasos para la inserción de videos de YouTube. Estos artículos hay que releerlos para hacer, como tú dices, una buena práctica al usar HTML.
Así es Doctora @elvigia. Poco a poco vamos aprendiendo y consolidando. Saludos!
oye muy interesante tu post estimado amigo!! ahora comprendo muchas cosas especialmente el markdown que se usa en steemit.... claro siempre respeto al que sabe de esto y como dice el dicho "Zapatero a su Zapato" jajajajajaja me quedo con mis musculos hehehe un abrazo
Jaja, te entiendo Erick. El post estará aquí por si necesitas recordar algo sobre HTML que necesites usar. También puedes usar alternativamente markdown, que es mucho más sencillo aunque menos expresivo. En steemstem.io ya podemos usar HTML o markdown, el que querramos. Incluso, escribir en el propio editor WYSIWYG (el que tiene los botones) puede ser suficiente y sólo ir al código cuando necesitemos precisar algo.
Saludos.
Saludos estimado amigo @eniolw, excelente complemento el que nos compartes en esta nueva entrega sobre HTML, secundo al amigo @ydavgonzalez en cuanto a que nos socialices una serie temáticas sobre Markdown, y en mi caso particular aúpo esta propuesta pues tengo nulos conocimientos en Markdown, y observé que ya steemstem-io en su app lo incorporó.
Saludos cordiales.
Seguro! Profesor @lupafilotaxia, aunque un usuario en la etiqueta hace poco habló precisamente sobre el lenguaje markdown. Podríamos echarle un vistazo al post a ver qué tal. Igualmente puedo hablar sobre ello también. Gracias por la visita. Saludos!
Congratulations @eniolw! You have completed the following achievement on the Steem blockchain and have been rewarded with new badge(s) :
Click here to view your Board
If you no longer want to receive notifications, reply to this comment with the word
STOPDo not miss the last post from @steemitboard:
Vote for @Steemitboard as a witness and get one more award and increased upvotes!