HTML: un ensayo temático sobre el transcendental lenguaje de la WWW (parte 3)
HTML: un ensayo temático
Por Enio...
Saludos, queridos lectores. Esta es la tercera entrega de la serie HTML, el cual es un ensayo creado en aras de conceptualizar HTML y, en el proceso, dar a conocer su importancia para la WWW y para nuestra actividad como bloggers de Steemit. Recordemos que la metodología empleada desde el comienzo, que sintetiza las ideas y organiza el discurso, ha sido la cartografía conceptual, la cual nuevamente recapitulo tal como se muestra a continuación.
Hasta ahora hemos cubierto casi todos los ejes de la cartografía, como recordaremos en breve. Nos concentraremos ahora en el último de los ejes, el de ejemplificación, sobre lo que haremos un largo detenimiento en esta entrega. El propósito de este artículo es profundizar en el conocimiento de las etiquetas HTML, especialmente aquellas que sean muy importantes en general o que sean de interés para nosotros en Steemit, lográndolo mediante el análisis de la sintaxis y la ejemplificación de uso de cada una, a la vez que se señalarán buenas y malas prácticas con HTML para lógicamente promover las primeras.
Comencemos.
HTML: un ensayo temático
Hemos dicho que HTML es una tecnología informática de la WWW, cuyas siglas significan HyperText Markup Language (nociones), siendo clasificada como un lenguaje informático de tipo 'lenguaje de marcado' (categoría), y utilizada para estructurar documentos informáticos como las páginas web, a través de descriptores llamados etiquetas, siendo también fácil de entender por seres humanos y programas de computadora y constituyendo un estándar internacional (características).
También vimos que HTML tiende a ser utilizado por muchos sitios de blogging, aunque su aplicación principal está en el desarrollo web, específicamente en el desarrollo de front-end; contexto en el cual se combina con otros lenguajes como CSS y JS (vinculación). HTML no debe ser confundido con lenguajes cuya sintaxis o propósito sea similar, tales como markdown y XML (diferenciación). También comentamos que posee varias versiones, de las cuales HTML 5 es la vigente, y finalmente clasificamos buena parte de sus etiquetas (subdivisiones).
No obstante, al hacer esto último puede que haya quedado muchas dudas o preguntas sin contestar, puesto que realmente son aspectos teóricos los abordados, y aún falta apreciar la aplicación de HTML e ilustrar sus etiquetas propiamente. Pues de eso se trata la ejemplificación. Para empezar, el código que se muestra a continuación será de gran ayuda.
<html>
<head>
ENCABEZADO LÓGICO DE LA PÁGINA
<title>
TÍTULO DE LA PÁGINA
</title>
</head>
<body>
CONTENIDO DE LA PÁGINA
</body>
</html>
Lo que vemos es la estructura básica de toda página web escrita en HTML. Recordemos que HTML sirve para describir este tipo de archivos, por lo que el código mostrado es una descripción elemental de un documento HTML. Cualquier página web que visite poseerá un código HTML siguiendo esta estructura, aunque con muchísimas más etiquetas y segmentos de código incorporados.
Hemos dicho que es "básica" porque esa estructura contiene las etiquetas mínimas (<html>, <head>, <body>) que deben usarse y en el orden correcto para que el documento sea estandarizadamente válido para cualquier programa intérprete, tratándose principalmente de los navegadores web.
De hecho, a modo de experimento usted podría intentar copiar y pegar ese código en un archivo de texto plano (en Microsoft Windows sirve usar un programa llamado 'bloc de notas'). Luego, debe guardar ese archivo con la extensión .html y abrirlo con su navegador web. Este último debe reconocerlo y la señal de eso es que muestra en la barra de ventana la oración "título de la página" y muestra en pantalla una página vacía que solamente posee la oración “contenido de la página”.
Volviendo al código, vemos que este posee unas pocas etiquetas. Una de ellas es <html>, que resulta ser la que define el elemento raíz, por lo que es la más básica etiqueta y todos los demás elementos deben ser colocados en su interior. Dentro de ella están dos principales etiquetas <head> y <body>, que son también obligatorias y deben ir en ese orden, puesto que la primera es el encabezado de la página y la segunda, el cuerpo. Todas las demás etiquetas deben ir contenida dentro de esas dos.
Precisamente, ¿qué hay de las demás etiquetas? Porque la verdad es que son muchas... Para conocerlas mejor, recurramos a la misma técnica. A continuación, mostraré una nueva y más extensa porción de código HTML que incluye todas las etiquetas que abordaremos en este artículo.
<html>
<head>
<meta charset="utf8">
<title>TITULO DE LA PÁGINA</title>
</head>
<body>
Aquí inicia el cuerpo de la página.
<header> Encabezado del sitio (varias cosas…) </header>
<section>
Aquí comienza una sección principal de la página.
<h1> Este el título principal de la página </h1>
<article>
Aquí comienza un contenido similar a un artículo.
<div>
Aquí comienza una división.
<h2> Esto es un subtítulo </h2>
<p>
Esto es un párrafo del artículo aunque sea muy breve. Su propósito es ilustrar un párrafo dentro de la maquetación con HTML.
</p>
<p>
Este es otro párrafo. En el próximo artículo veremos que hay muchas cosas más que podemos agregar aquí adentro.
</p>
<blockquote>
Esto es una cita en bloque equivalente al operador > de markdown.
</blockquote>
<pre><code>
Y esto es un bloque donde pegamos código de programación.
</code></pre>
Aquí cierra una división
</div>
Insertando un separador (línea clara horizontal):
<hr>
<h3>Otro pequeño subtítulo y hay otros más (h4, h5 y h6)</h3>
Aquí cierra una sección.
</section>
<footer> Esto es el pie de página de la página (varias cosas…) </footer>
Aquí cierra el cuerpo de la página y el código HTML
</body>
</html>
El código fuente 2 ha sido incluido como bloque de texto y como imagen. La idea de hacer lo primero es permitirle el copiarlo y pegarlo, y la de lo segundo, mejorar la visualización del código para propósitos didácticos.
Ahora bien, si copia y pega este código, lo guarda como archivo de texto plano de extensión .html y lo abre con su navegador web, entonces en él se verá más o menos como se muestra en la imagen siguiente.
⬆️ Imagen 3: renderización por parte del navegador del código fuente 2. Autor: @Eniolw Licencia: CC BY 2.0
Como se nota, la página visualizada muestra todos los mensajes codificados en el código fuente 2. La vista no tiene 'mucha forma', en realidad, puesto que el código no tiene estilos aplicados (CSS). En todo caso, el propósito de esta imagen es ilustrar que nuestro código HTML puede 'cobrar vida' muy fácilmente si hacemos estos pasos con nuestros navegadores. Lo importante, sin embargo, es centrarnos en las etiquetas propiamente, y es lo que haremos a continuación.
En ese sentido, si ya estamos familiarizados con HTML, seguramente será más fácil de entenderlo todo. El código de ejemplo es muy básico para los desarrolladores web, pero si eres un blogger, no te preocupes, ya que NO todas esas etiquetas que se ven allí son necesarias a la hora de hacer posts o comentarios en Steemit o en muchas otras plataformas. A continuación, revisaremos las etiquetas allí incluidas tomando como referencia la clasificación de etiquetas en función de los elementos HTML que representan, al tiempo que haré explícito cuáles etiquetas SÍ pueden ser utilizadas en Steemit. Veamos...
Etiquetas de metadata
Se refiere a todas aquellas etiquetas que aportan información 'adicional' sobre la página al programa intérprete. Entre ellas encontramos a <title> (línea 4), que es con la cual definimos el título de la página; ese que se lee en la barra de ventana y en la pestaña de navegación. También está la etiqueta <meta> (línea 3), la cual nos permite detallar información de carácter más técnico. Ambas etiquetas se colocan dentro de <head> (líneas 2-5) que es una etiqueta fundamental en la estructura.
Etiquetas de sección
Aquí encontramos varias. Como su nombre lo sugiere, estas etiquetas sirven para delimitar 'secciones' claramente reconocibles y de contenido significativo dentro del documento. Entre ellas está <body> (líneas 8-39) que, como mencionamos, también es una etiqueta fundamental, pues dentro de ella se coloca todo el cuerpo de la página. Otras etiquetas de esta categoría son:
1. <section> (líneas 9-36), <article> (líneas 12-31), <header> (línea 8) y <footer> (línea 37): estas significan 'sección', 'artículo', 'encabezado' y 'pie de página', respectivamente. Son etiquetas propias de HTML 5 y es claro que sirven para diversificar más la estructura existente al maquetar una página web, aportando más detalles sobre qué tipos de sección se pueden insertar.
Por ejemplo, arriba en esta misma página de Steemit que está leyendo (asumiendo que está en steemit.com) apreciará una zona claramente distinguible de las demás, la cual es el encabezado (header) del contenido. En él normalmente se colocan menús, botones de navegación, títulos, logos, banners, formularios de inicio de sesión, etc. En el diseño web han se ha adoptado eso como convención.
En cuanto a pie de página (footer), sin embargo, esta página que usted lee (si se trata de steemit.com) no posee uno, tal como sí lo tienen otras. En el pie de página los sitios web suelen agregar una franja con información como copyright, términos de servicios, políticas de privacidad, teléfonos y correos de contacto, etc.
¿Ya vamos entendiendo la idea tras las etiquetas que denotan secciones de contenido? Son útiles en el desarrollo web, aunque ellas no se pueden usar en Steemit por parte de los usuarios, puesto que no son necesarias; vienen incorporadas automáticamente.
2. <h1>, <h2>, <h3>, <h4>, <h5>, <h6>: esta serie de haches (h) sirve para insertar títulos y subtítulos. La 'h' viene de header que también significa 'título' (no confundir con la etiqueta ya vista <header>, la cual define toda una sección de la página, más no un título).
Por tanto, disponemos de 6 niveles de títulos y subtítulos en HTML (del 1 al 6), cada uno con un tamaño mayor al otro en función de su numeración. El título de mayor nivel es <h1>, y lo correcto es utilizar esa etiqueta una sola vez en todo el documento. Por tanto, es incorrecto usar <h1> más de una vez; de resto deberían usarse las otras (desde <h2> hasta <h6>), dependiendo de la importancia o jerarquía del título.
Otro aspecto a señalar de esta etiqueta, según se deduce de lo comentado, es que ella realmente no sirve para "cambiar el tamaño de la fuente”, como a veces se puede pensar, sino para denotar títulos. Por ejemplo:
<h1> Esto es un título H1 </h1>
<h2> Esto es un subtítulo H2 </h2>
<h3> Esto es un subtítulo H3 </h3>
<h4> Esto es un subtítulo H4 </h4>
<h5> Esto es un subtítulo H5 </h5>
<h6> Esto es un subtítulo H6 </h6>
Y así es como se vería en un navegador:
Por supuesto, es una etiqueta válida para Steemit.
Etiquetas de agrupación:
Sirven para envolver contenido textual cuyo significado es diverso. Entre ellas:
1. <p>: que viene de paragraph, es decir, 'párrafo'. Sirve para definir párrafos en el documento, los cuales generalmente constituirán gran parte del contenido, en especial cuando se trata de sitios web de posts. En el código fuente 2 está ilustrado su uso al menos un par de veces (17-19, 20-22).
Ahora bien, lo correcto desde un punto de vista de diseño es siempre usar esta etiqueta cada vez que requiera denotar párrafos. Es común, sin embargo, que los bloggers de Steemit no maqueten su contenido usando esta etiqueta, puesto que la regla de markdown equivalente no exige un operador de párrafo. Sin embargo, al usar HTML, lo correcto es usar <p>, y su ausencia genera a veces dolores de cabeza a los escritores de posts. Ejemplos de uso:
<p> Un párrafo generalmente se distingue por poseer varias oraciones que desarrollan un tema o idea. Aunque a veces no es fácil reconocerlo. En todo caso, esto que estás leyendo sí era un párrafo. </p>Nuestros posts de Steemit a menudo contienen muchos párrafos. Siempre que se trate de porciones de texto largas y en función del contexto, podemos identificar qué partes son párrafos <p>. Los párrafos no se pueden anidar unos dentro de otros, es decir, no se puede hacer algo así:
<p> Hola, soy un párrafo <p> (y yo soy otro párrafo dentro de otro. No hagas esto) </p> </p>2. <hr>: sirve para insertar separadores de contenido, es decir, marcan una división entre dos fragmentos de un artículo o un conjunto de párrafos, etc. Los navegadores renderizan esta etiqueta como una línea horizonal, y seguramente es una etiqueta popular al hacer blogging. Es válida de usar en Steemit. Ejemplo:
<p> Párrafo de una sección </p>
<hr>
<p> Párrafo de otra sección </p>3. <blockquote>: sirve para insertar citas en forma de bloque, y generalmente es renderizado de una manera distintiva por el navegador web. Siempre que tengamos que citar párrafos o porciones grandes de texto, debemos hacerlo con esta etiqueta, puesto que ese es su propósito desde un punto de vista semántico. Es equivalente al operador > de markdown. Ejemplo de uso:
<blockquote> "Esto es una cita en bloque" </blockquote>
<blockquote> "Beethoven era un buen compositor porque utilizaba ideas nuevas en combinación con ideas antiguas. Nadie, ni siquiera Beethoven podría inventar la música desde cero. Es igual con la informática" (Richard Stallman, fundador del software libre). </blockquote>En el navegador web, esta porción de código puede visualizarse así:
4. <ol>, <ul>, <li>: estas etiquetas sirven para construir listas. En el caso de <ol>, las listas son ordenadas (ordered list), por lo que se muestran enumeradas; mientras que en el caso de <ul>, las listas son no-ordenadas (unordererd list), por lo que se muestran con viñetas. Para hacer una lista hay que optar por una de estas dos etiquetas y dentro de ella colocar 'elementos de lista' a través de la etiqueta <li> (list item). Ejemplo:
<h5>Esto es una lista ordenada:</h5>
<ol>
<li> Elemento 1: ... </li>
<li> Elemento 2: ... </li>
<li> Elemento 3: ... </li>
<li> Elemento n: ... </li>
</ol>
<h5>Y esto, una lista no-ordenada:</h5>
<ul>
<li> Un elemento: ... </li>
<li> Otro elemento: ... </li>
<li> Otro elemento: ... </li>
<li> Otro elemento: ... </li>
</ul>
Si previsualizamos este código en Steemit de la siguiente manera:
<pre>: esta etiqueta sirve para insertar bloques de texto preformateados (preformatted). Particularmente, se puede utilizar en Steemit en combinación con la etiqueta <code>, la cual será abordada en un próximo artículo.
5. <div>: esta etiqueta es importante que la conozcamos, pues nos permite hacer cosas útiles. Su nombre viene de division en inglés, lo que significa 'división' en español. Nos permite insertar divisiones o capas que no tienen un significado establecido por la notación del lenguaje, sino por las necesidades del desarrollador web. Estas divisiones pueden tener un rol puramente lógico (que ayudan a contener más elementos) o tener una manifestación visible (poseen formato y son reconocibles en la pantalla).
Desde un punto de vista práctico, sin embargo, la etiqueta <div> en Steemit nos permite agrupar un contenido al que queremos darle un cierto formato. En particular, si queremos que un elemento esté justificado, alineado a la izquierda, alineado a la derecha, centrado; o quizá flotando a la derecha, flotando a la izquierda, etc. Esto se logra usando un atributo llamado class que sirve para aplicarle una regla de estilo a la capa, lo cual es posible gracias al CSS que viene incluido con la maquetación de la webapp de Steemit (cosas de fábrica de Steemit de las que nos podemos beneficiar). A continuación, veremos algunos ejemplos:
<div class="text-justify">
<p>Este párrafo estará justificado cuando sea renderizado por el navegador, así como todos los demás elementos dentro de esta división con el atributo class="text-justify"</p>
</div>
...
<div class="text-left">
<p>Este párrafo estará alineado a la izquierda cuando sea renderizado por el navegador, así como todos los demás elementos dentro de esta división con el atributo class="text-left"</p>
</div>
...
<div class="text-right">
<p>Este párrafo estará alineado a la derecha cuando sea renderizado por el navegador, así como todos los demás elementos dentro de esta división con el atributo class="text-right"</p>
</div>
...
<div class="pull-left">
<p>Este párrafo estará flotando a la derecha cuando sea renderizado por el navegador, así como todos los demás elementos dentro de esta división con atributo class="pull-left"</p>
</div>
...
<div class="pull-right">
<p>Este párrafo estará flotando a la derecha cuando sea renderizado por el navegador, así como todos los demás elementos dentro de esta división con atributo class="pull-right"</p>
</div>
Si previsualizamos este código en Steemit, se verá así:
Muy bien, de momento hemos conocido más a fondo y ejemplificado la mitad de nuestra clasificación de etiquetas, esto es, de metadatos, de secciones y de agrupación. También hemos señalado algunos errores comunes y dado recomendaciones sobre cómo y cuándo usar adecuadamente las etiquetas. Sin embargo, esto no acaba aquí. En nuestro próximo artículo cubriremos la otra mitad de nuestra clasificación, aspirando que con ello tengamos buenas posibilidades de aprendizaje y contribuir a aclarar dudas.
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
- 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!
Saludos estimado amigo @ eniolw, de utilidad absoluta tu nueva entrega sobre HTML, para quienes no somos expertos en el área, las ejemplificaciones socializadas evidentemente amplían las nociones que se tienen en HTML, desconocía la funcionalidad de las etiquetas (< head > y < body >) en la estructura del documento, por otro lado, es un nuevo insumo lo de guardar el archivo Word con la extensión html y luego poder abrirlo en el navegador. Felicitaciones, excelente contribución.
Saludos cordiales, sigamos creciendo.
Me alegra haya aprendido algo nuevo!
En caso de que quiera guardar códigos HTML en archivos locales, recuerde que deben tener la estructura mínima, y dentro del
<head>se debería incorporar la etiqueta<meta charset="utf8">para indicarle al navegador que visualice bien los caracteres especiales, tales como las letras acentuadas y otras.Seguiremos haciendo entregas de HTML. Espero esto sea útil para la comunidad de #STEM-Espanol y todas las demás, ya que a veces surgen dudas sobre ello.
Saludos!
Saludos @eniolw
Todos los que vivimos en Venezuela sabemos la situación que atraviesa nuestro pueblo, varios amigos hemos desplegado esfuerzos organizando entregas de alimentos y apoyando a los usuarios Venezolanos que están en steemit.
Tengo el gusto de dirigirme a ti en nombre de @STEEMCHURCH. ¿Las conoces?
Actualmente @STEEMCHURCH esta optando por una delegación de 20k SP patrocinada por @theycallmedan. Esta delegación permitiría ayudar a más personas sobre todo nuestro maravilloso pueblo Bendecido con grandes seres humanos.
Quizá puedas participar y VOTAR por @STEEMCHURCH. Acá te dejo el enlace:
https://dpoll.xyz/detail/@theycallmedan/which-steem-project-should-i-delegate-20k-steempower-to-for-1-year/
Que tengas un bendecido día.
Tu Amigo José Lanz
Saludos @eniolw, interesante nueva entrega y como te había comentado antes hay varios códigos que no utilizo, pero poco a poco los incorporaré. Por otro lado, las que uso tales como "class" no tenía idea del por qué de las mismas. Jajaja, mucho que aprender todavía. Felicitaciones!
Gracias estimada. Poco a poco vamos aprendiendo! Lo bueno es que esto estará aquí permanentemente de modo que podemos consultarlo cada vez que necesitemos recordar algo útil. Saludos y gracias por su visita!
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
Oh, thank you for the support @utopian-io!
¿Para separar un párrafo o contenido en este caso solo se puede usar
para steemstem.io? o puedo usar
o
que por cierto estas dos últimas las uso para separar un párrafo de otro, pero esta última me hace un espacio mayor que la primera
¿Para separar un párrafo o contenido en este caso solo se puede usar hr para steemstem.io? o puedo usar br o /br que por cierto estas dos últimas las uso para separar un párrafo de otro, pero esta última /br me hace un espacio mayor que la primera.
Tuve que quitarle < ,> estos símbolos porque en el texto no se veía.
¿Para separar un párrafo o contenido en este caso solo se puede usar hr para steemstem.io? o puedo usar br o /br que por cierto estas dos últimas las uso para separar un párrafo de otro, pero esta última /br me hace un espacio mayor que la primera.
Tuve que quitarle < ,> estos símbolos porque en el texto no se veía.
Tengo otra duda ¿puedo colocarle otro tipo de fuente a las letras?
Los párrafos se separan solos ti estás usando la etiqueta
<p>para ellos. Ejemplo:Sin embargo, si quieres hacer que se separen más, debes usar
<br>, que sirve para insertar salto de línea. De tal modo que puedes usar esta etiqueta cada vez que requieras forzar un salto de línea:<hr>sirve para insertar una línea visible que hace de separador de secciones. Ejemplo:¿Para separar un párrafo o contenido en este caso solo se puede usar (
) para steemstem.io? o puedo usar (
) o (
) que por cierto estas dos últimas las uso para separar un párrafo de otro, pero esta última () me hace un espacio mayor que la primera
Hola, @xeliram.
Cuando guardas con bloc de notas deberías ser capaz de colocar la extensión en el mismo campo de texto donde escribes el nombre del archivo. Sino, guárdalo ".txt" y luego ubica el archivo y cámbiale el nombre, específicamente la extensión. Pero puede que Windows no te la ponga fácil, dependiendo de la configuración. En todo caso, no te preocupes por querer hacer eso para poder maquetar un post para Steem, ya que no es necesario. Muchas etiquetas no son necesarias.
En su lugar, te recomiendo esta herramienta para crear archivos HTML en línea y de allí puedes hacer un respaldo local o pasarlo directamente a Steemit o la appSteemSTEM. Estaré trabajando en más posts explicativos sobre esto. Cualquier duda puedes contactarme por Discord y te ayudo. No te recomiendo me dejes o edites muchos mensajes por aquí porque puedes gastar tus créditos de recursos.
Saludos!
Excelente amigo@eniolw, cuanto he venido aprendiendo de tus publicaciones para así darle un mejor formato a las mías, éxitos... y gracias y por compartir tus conocimientos.
Gracias, estimado @felizrodriguez. Cualquier asesoría me puede contactar por Discord. Saludos!