Miniguia de HTML para Steemit
Cuando comencé a publicar en Steemit recuerdo que se me hacÃa complicado utilizar el Editor Markdown, debido que nunca antes lo habÃa utilizado, y casi toda la información que conseguà estaba en inglés. Aunque es una manera muy sencilla de estilizar tus textos también utilizo RAW HTML para tener un mayor control de cómo quiero que se vean mis post ya publicados.
Asà que este post es para todos esos usuarios hispanohablantes que quisieran aprender a mejorar el formato y estilo de sus publicaciones.😊
HTML
HTML es un lenguaje de marcado básico cuya siglas significan "Lenguaje de Marcas de Hipertexto" (HyperText Markup Language), y es uno de los más usados para la elaboración páginas web junto con "Hojas de Estilo Cascada" (CSS) y JavaScript.
Lo más sencillo e importante que hay que saber de HTML es cómo usar los "tags" o "etiquetas", y para ello se utilizan los signos "<" Menor que y ">" Mayor que, de la siguiente manera:
<****> texto </****> donde se reemplazan los asteriscos por el código que quieras, y siempre tiene que haber una etiqueta abierta y una cerrada con el slash. Y con esa información seguimos. 😎
Y ahora si podemos seguir a la parte más esperada, cómo estilizar tus textos:
Énfasiss
Si hay alguna parte de tu texto que debas resaltar por ser importante o para llamar la atención puedes utilizar lo siguiente:
| Estilo | HTML | Ejemplo | Resultado |
|---|---|---|---|
| Negrita | <strong> </strong> o <b> </b> | <b>Este texto está en negrita</b> | Este texto está en negrita |
| Itálica | <em> </em> | <em> Este texto está en itálica </em> | Este texto está en itálica |
| Tachada | <strike> </strike> | <strike>Este texto está tachado </strike> |
Citas o Quotes
Cuando quieras citar algún texto de un articulo que leÃste – quizás alguna frase que lleva especial significancia a tu post, o las letras de esa canción que te lleva inspirando desde hace tiempo, entre otros – puedes utilizar estas estiquetas
"<blockquote> </blockquote>" para darles un formato especial que las destaca del texto.
<blockquote> Por mucho que hablemos, no cambiaremos las cosas. Si queremos cambiarlas, tenemos que actuar. <br>-Luces del Norte de Phillip Pullman</blockquote>
Por mucho que hablemos, no cambiaremos las cosas. Si queremos cambiarlas, tenemos que actuar.
-Luces del Norte de Phillip Pullman
Noten que también utilice la etiqueta <br> para crear una nueva lÃnea donde colocar el autor y el libro citado. Es super útil para crear puntos y aparte en un mismo párrafo.
TÃtulos y SubtÃtulos
Los tÃtulos y subtÃtulos son de gran ayuda a la hora de organizar las ideas y desarrollar el contenido. Además de que visualmente ayudan a no condensar toda la información en horribles bloques gigantescos de textos uno detrás del otro.
| Tamaño | Ejemplo | Resultado |
|---|---|---|
| 1 | <h1> header 1 </h1> | Header 1 |
| 2 | <h2> header 2 </h2> | Header 2 |
| 3 | <h3> header 3 </h3> | Header 3 |
| 4 | <h4> header 4 </h4> | Header 4 |
| 5 | <h5> header 5 </h5> | Header 5 |
Justificado de Textos
Personalmente encuentro que un texto justificado llama más mi atencion al momento de leer algun articulo o post, y creo que es debido a que le da un look más pulcro y ordenado a la información.
| Estilo | Ejemplo |
|---|---|
| Justificado | <div class=text-justify>Texto Justificado </div> |
| Alineado a la Derecha | <div class=text-right> Texto alineado a la Derecha </div> |
| Centrado | <center> Texto Centralizado </center> |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam varius leo sit amet vehicula gravida. Maecenas vel condimentum diam. Phasellus non nulla non elit bibendum posuere vitae nec elit. In vitae elit mi. Mauris semper pretium vulputate. Fusce feugiat rhoncus metus, ut consequat nulla commodo sed. Sed rhoncus metus ex, eget vehicula augue hendrerit sed. Aliquam auctor vestibulum lacus, vel eleifend magna bibendum nec.
Doble Columna
Este tipo de formato te permite tener dos columnas de párrafos diferentes, dando un look de revista o periódico. A mi me gusta utilizarlo para publicar en dos idiomas de forma que la información queda paralela y asà se puede organizar bloques de texto seguido de imágenes sin que se pierda el hilo del post.
| Estilo | HTML | Ejemplo |
|---|---|---|
| Columna Izquierda | <div class="pull-left"> </div> | <div class="pull-left">Tu párrafo va aquÃ</div> |
| Columna Derecha | <div class="pull-right"> </div> | <div class="pull-right">Tu párrafo va aquà </div> |
Insertar Imagenes
<img src="aqui el link de tu imagen" alt="titulo de la imagen"> Ejemplo:
<img src="https://cdn.shopify.com/s/files/1/0185/5092/products/nature-0069.png?v=1369543988" alt="sunflower">
Combinar Etiquetas
Y ya con todo lo básico cubierto puedes mezclar las etiquetas y colocar una dentro de otras para crear muy buenas combinaciones. En general no hay un orden especÃfico al mezclarlas, pero es una buena idea empezar por las más grandes o que afectan todo el párrafo en lugar de unas dos o tres palabras. Y por supuesto, que todas tengan su etiqueta de abierta y cerrada.
Un Ejemplo podria ser este:
El gato o gato doméstico (Felis silvestris catus) y coloquialmente llamado minino, michino​, micho, mizo, miz, morrongo o morroño;​ es una subespecie de mamÃfero carnÃvoro de la familia Felidae. El gato está en convivencia cercana al ser humano desde hace unos 9500 años,​ periodo superior al estimado anteriormente, que oscilaba entre 3500 y 8000 años. Source
El perro (Canis lupus familiaris) también llamado perro doméstico o can,​ y coloquialmente llamado chucho o tuso; es un mamÃfero omnÃvoro de la familia de los cánidos, que constituye una subespecie del lobo (Canis lupus).
En 2001, se estimaba que habÃa 400 millones de perros en el mundo. Su tamaño o talla, su forma y pelaje es muy diverso según la raza. Source
Lo dificil
¿Bonito no? Ahhh pero aqui es cuando las etiquetas pueden ser muy fastidiosas de colocar. Todo el texto anterior incluyendo las imágenes se ve asi en html:
<div class="pull-left"><center><b>All About Cats</b></center><br>El gato o gato doméstico <em>(Felis silvestris catus)</em> y coloquialmente llamado minino, michino​, micho, mizo, miz, morrongo o morroño;​ es una subespecie de mamÃfero carnÃvoro de la familia Felidae. <br><br><b>El gato está en convivencia cercana al ser humano desde hace unos 9500 años</b>,​ periodo superior al estimado anteriormente, que oscilaba entre 3500 y 8000 años. <hr><img src="https: //cdn.shopify.com/s/files/1/0185/5092/products/nature-0003.png" alt="cat"> <hr></div>
<div class="pull-right"><center><b>All about Dogs</center></b><center><br>El perro <em>(Canis lupus familiaris)</em> también llamado perro doméstico o can,​ y coloquialmente llamado chucho o tuso; es un mamÃfero omnÃvoro de la familia de los cánidos, que constituye una subespecie del lobo <em>(Canis lupus)</em>. <br><br><b>En 2001, se estimaba que habÃa 400 millones de perros en el mundo.</b> Su tamaño o talla, su forma y pelaje es muy diverso según la raza.</center><hr><img src="https: //cdn.shopify.com/s/files/1/0185/5092/products/nature-2.png" alt="Dogs"><hr></div>
Como ven hay muchÃsimas etiquetas y es muy común equivocarse y que te falte alguna etiqueta de abierto o cerrado, lo cual se complica a la hora de buscar qué está mal en el código y podrÃa llevarte mucho tiempo averiguarlo.
Y para eso Markdown es de gran utilidad, puesto que permite ahorrarse varias etiquetas en favor de otros caracteres, simplificando muchÃsimo la edición de textos y el tiempo que te tardarÃas editando un mismo post completamente en html.
Conclusiones
En general lo más importante para recordar es utilizar las etiquetas de abierto <> y las de cerrado </> para que tu código pueda leerse, y que siempre van en pares, asà que si te falta aunque sea una etiqueta tu codigo no podrá leerse correctamente.
Y eso es todo por la Parte 1.
La Parte 2 la centraré en cómo utilizar Markdown para que tu vida al escribir sea más fácil y en cómo mezclar tanto Markdown como HTML.
Links consultados:
🌹How To Stylize Your Steemit Posts - What They Haven't Told You!
🌹Markdown & HTML Code Guide for Beginners that includes 5 Useful Tips to edit Posts & Comments using Steemit's Raw Editor; Edit & Align Text, Columns, Table and Smiley's
🌹How to Wordwrap Your Images Like a Boss
