Un toque profesional para tus Publicaciones en Steemit-Herramientas HTML
Bienvenidos a mi primer aporte Steemianos. Tengo apenas un par de días aquí, y luego de mi primera publicación, quedo poco satisfecho con las herramientas que presenta el editor de textos para realizar publicaciones de Steemit . Para nuestra suerte permite la edición en modo Html (HyperText Markup Language), el cual es el lenguaje estándar para la realización de paginas web, es un lenguaje de etiqueta muy poderoso.
No se si yo soy muy detallista, pero me incomoda mucho ver que algunas publicaciones no presentan un orden o una justificación adecuada, sin embargo se que muchos están aprendiendo al paso, por lo que la idea de esta publicación es ayudarlos a hacer que sus post tengan un aspecto mas profesional. No quiero que aprendan todo esto, no me centrare en explicarles el código, solo les diré lo que deben modificar, con que entiendan los parámetros que deben modificar basta, lo ideal es que copien y peguen estos código en sus post, modificando lo que necesiten para así lograr el objetivo general de esto, el cual es Mejores Post para Steemit.
A continuación lo que presentare son una serie de códigos con sus respectivos ejemplos, esto con el fin de que los post presenten una mejor justificación de los párrafos, imágenes centradas, tablas de texto y de imágenes, citas y otras cosas. Espero poder explicarme lo mejor posible
He tenido algunos comentarios informandome que las etiquetas no se visualizan, esto al parecer es un bug en Steemit, para los que presenten tal caso, les dejo en link para que visualicen desde la plataforma de busy
Ir a guía con interfáz de busy
.Formateo del texto
Encabezados, saltos de párrafo y de linea
Párrafos
Para definir un párrafo, html utiliza la etiqueta
<p>Aquí va el párrafo.</p>
Estas etiquetas sirven para definir el inicio y final de cada párrafo.
Saltos de Linea
Los saltos de linea están definidos a partir de la etiqueta
<br>
Se pueden poner tantos como se desee, haciendo con ello un salto de linea por cada una.
Justificar todo el texto de la publicación
Esto es relativamente fácil, y hace una gran diferencia visual en sus post, lo único que deben hacer es colocar la siguiente etiqueta, como se muestra en el siguiente ejemplo
<html>
<div class= "text-justify">
Aqui va todo el texto de la publicación. Todo lo que se coloque aquí estará perfectamente justificado.
</div>
</html>
Encabezados
Para colocar encabezados, html nos proveé las siguientes etiquetas, estas sirven para dividir el texto en secciones, definiendo cada numero el tamaño del texto de forma decreciente
Codigo HTML |
Resultado |
||||||||||||||||||||||||||||||||||||||||||||||
| <h1>Hola Mundo</h1> | Hola Mundo | ||||||||||||||||||||||||||||||||||||||||||||||
| <h2>Hola Mundo</h2> | Hola Mundo |
||||||||||||||||||||||||||||||||||||||||||||||
| <h3>Hola Mundo</h3> | Hola Mundo |
||||||||||||||||||||||||||||||||||||||||||||||
| <h4>Hola Mundo</h4> | Hola Mundo |
||||||||||||||||||||||||||||||||||||||||||||||
| <h5>Hola Mundo</h5> | Hola Mundo |
||||||||||||||||||||||||||||||||||||||||||||||
| <h6>Hola Mundo</h6> | Hola Mundo |
Centrar textos e imágenes
El centrar texto e imágenes es simple y se hace con las etiquetas
|
|
|
|
Si colocamos un url, obtenemos
Texto en negrita, cursiva y otros
Codigo HTML | Nombre de etiqueta |
Resultado |
| <b>Hola Mundo </b> | Negrita | Hola Mundo |
| <code>Hola Mundo </code> | Texto en codigo | Hola Mundo |
| <i>Hola Mundo </i> | Cursiva | Hola Mundo |
| X<sup>Hola Mundo </sup> | Superíndice | XHola Mundo |
| X<sub>Hola Mundo </sub> | Subíndice | XHola Mundo |
Todas las etiquetas que se presentaron anteriormente también se pueden combinar, si se respetan los ordenes se pueden lograr combinaciones de estas. Un ejemplo aquí
<center><i><b>X<sup>Hola Mundo </sup></b></i> </center>
Citas o quotes
Un elemento realmente importante para nuestros post y que aportan calidad de profesional a ellos es reconocer a los autores de los textos o imágenes que utilizamos, esto lo podemos hacer
<blockquote>Texto a citar</blockquote>
Texto a citar
También podemos hacer
<blockquote>No todo lo que cuenta puede ser cuantificado, y no todo lo que puede ser cuantificado cuenta<sup>A. Einstein</sup></blockquote>
No todo lo que cuenta puede ser cuantificado, y no todo lo que puede ser cuantificado cuentaA. Einstein
La etiqueta anterior se usa para bloques de textos. Pero si queremos citar solo una linea ó una parte de ella, utilizamos
<q>Texto que quieres citar</q>
Citas con url
Los ejemplos anteriores los podemos citar con url o direcciones web, esto se hace
<blockquote>No todo lo que cuenta puede ser cuantificado, y no todo lo que puede ser cuantificado cuenta<sup>
<a href="https://es.wikipedia.org/wiki/Albert_Einstein">A. Einstein</a></sup></blockquote>
No todo lo que cuenta puede ser cuantificado, y no todo lo que puede ser cuantificado cuenta A. Einstein
ó podríamos colocar un numero en vez de A. Einstein y en la bibliografía colocar los enlances, con sus respectivas especificaciones, en fin, esto es del gusto de cada quien, lo importante es referenciar o dar los créditos a quien lo merece.
Cuadros de textos con títulos e imágenes múltiples con sus respectivas descripción
Tabla simple
A continuación les presento un código que les permitirá realizar un cuadro simple en sus post, algo similar a lo que he presentado en esta publicación.
<table>
<tr>
<td>
<center><b>Aquí va el titulo que ustedes quieran colocar</b></center>
</td>
</tr>
<tr>
<td>
Aqui va el contenido del cuadro que ustedes quieran colocar
</td>
</tr>
</table>
Y el resultado que se obtiene es
| |
| Aqui va el contenido del cuadro que ustedes quieran colocar |
Tabla avanzada.
Para crear una tabla avanzada, tenemos el siguiente codigo
<table >
<tr>
<td> <center> <b>Titulo 1 </b> </center></td>
<td> <center> <b>Titulo 2 </b> </center></td>
<td> <center> <b>Titulo 3 </b></center></td>
</tr>
<tr>
<td> <center> <b>Dato 1.1 </b> </center></td>
<td> <center> <b>Dato 2.1 </b> </center></td>
<td> <center> <b>Dato 3.1 </b></center></td>
</tr>
<tr>
<td> <center> <b>Dato 1.2 </b> </center></td>
<td> <center> <b>Dato 2.2 </b> </center></td>
<td> <center> <b>Dato 3.2 </b></center></td>
</tr>
<tr>
<td> <center> <b>Dato 1.3 </b> </center></td>
<td> <center> <b>Dato 2.3 </b> </center></td>
<td> <center> <b>Dato 3.3 </b></center></td>
</tr>
</table>
Y el resultado que se obtiene es
| | | |
| | | |
| | | |
| | | |
Estos codigos pueden ser editados a su antojo dependiendo del numero de columnas y filas que ustedes necesiten. Las filas se definen a partir de <tr></tr> y para agregar una nueva columna solo debemos agregar un <td></td> en donde lo necesitemos.
Control sobre imágenes
Imagen dividida en trozo 1.
<table>
<tr>
<td><center> <b>Imágenes de Da Vinci</b> </center></td>
<td> <center> <b>Descripcion</b></center></td>
</tr>
<tr>
<td><img src="url de la imagen"></td>
<td> <center> <b>Aqui va la descripcion 1</b> </center></td>
</tr>
<tr>
<td><img src="url de la imagen">
<td> <center> <<b>Aqui va la descripcion 2 </b> </center></td>
</tr>
/table>
Y el resultado que se obtiene es
| | |||||||
|
<ce<> Aqui va la descripcion 1 | ||||||
|
| |
Imagen dividida en trozo 2
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td><b>Tipo de frutas 1</b></td>
<td><b>Tipo de frutas 2</b></td>
</tr>
<tr>
<td><img src="url de la imagen 1" WIDTH=128 HEIGHT=81 BORDER=0 ALT=""></td>
<td><img src="url de la imagen 2" WIDTH=128 HEIGHT=81 BORDER=0 ALT=""></td>
</tr>
<tr>
<td><img src="url de la imagen 1.1" WIDTH=128 HEIGHT=90 BORDER=0 ALT=""></td>
<td><img src="url de la imagen 2.1" WIDTH=128 HEIGHT=90 BORDER=0 ALT=""></td>
</tr>
</table>
colocando los respectivos url, se puede obtener
| Tipo de frutas 1 | Tipo de frutas 2 |
 |  |
 |  |
Agregar ecuaciones a nuestro post: Formato Latex
Para hacer esto en html existen múltiples formas, sin embargo aquí presento una sola, y es agregando ecuaciones en a través de imágenes, para nuestra suerte existe una pagina que hace muy bien este trabajo, esta es
Lo único que tienen que hacer en esa pagina es crear su ecuación y luego seleccionar la opción de HTML, copian el código que les genera y lo pegan aquí, como pueden ver las ecuaciones están en excelente calidad, de lujo diría yo.
Bueno steemianos esto es todo, creo que me extendí un poco, queria agregar unas cosas mas pero me parece que ya asi esta bien, lastimosamente el código html no se adapta perfectamente a este editor, como se puede ver los cuadros no presentan los bordes que uno quisiera, a los textos no le sirven las etiquetas para darle colores y los enlaces internos no funcionan o por lo menos de las dos formas en que se hacerlo no me funcionaron, si así lo fuera el post lo hubiera extendido mucho mas. Espero con esto poder ayudar a muchos a que sus publicaciones tengan un aspecto mas profesional. La idea no es que se vuelvan expertos en esto, si no que aprendan, entiendan el código para que así puedan reutilizarlo y con esto lograr sus objetivos. Para aquellos que no les guste html aun pueden hacer uso de un excelente programa que te permite escribir en Markdown, este programa lo pueden descargar desde su pagina oficial, el link es
Aquí en link para los que quieran ver mi introducción y así puedan saber mas o menos por donde van a venir mis aportes
Introducción de @sneikder
Tambien soy co-autor de una novela ligera titulada “La Danza de los Mundos:Epifanía” el prólogo ya esta publicado, para los que gusten leer sobre ciencia-ficción algo así como paradojas espacio-temporales, conflictos bélicos, filosofía y tramas psicológicos existencialistas, aquí les dejo el link para que me apoyen, se las recomiendo por mucho.
“La Danza de los Mundos: Epifanía”
Por
@smanuels
@sneikder
@mervin-gil
Finalmente, sin mas que decir y muy agradecidos con aquellos que visiten y colaboren en mis post ya sea con criticas constructivas, UpVotes ó Re-Post. Estoy a la orden por si tienen alguna duda.