MEJORANDO LA ESTÉTICA Y EL MAQUETADO DE TUS CREACIONES POR @VILLARREALJJ
.jpg)
Saludos amigos, espero tengan un feliz inicio de semana. La siguiente publicación es un resumen básico de las etiquetas que pueden ayudarnos en el mejoramiento de la estética de nuestras publicaciones, por lo que podrían resultar apropiadas para todos aquellos stemians que van iniciando con sus publicaciones, como también para aquellos que quieren sumar o refrescar sus conocimientos en cuanto a etiquetas html respecta. La presentación de nuestras publicaciones es algo vital para captar la atención de nuestros lectores y en muchas ocasiones para el entendimiento del contenido, por lo que es algo que va más allá de la estética y afecta la comprensión de nuestro trabajo, es decir, deja de ser algo de forma para ser también algo de fondo. |
|---|
ETIQUETAS PARA LA CREACIÓN DE TÍTULOS
<H5>Recreative</H5> | ##### Recreative | Recreative |
<H4>Recreative</H4> | #### Recreative | Recreative |
<H3>Recreative</H3> | ### Recreative | Recreative |
<H2>Recreative</H2> | ## Recreative | Recreative |
<H1>Recreative</H1> | # Recreative | Recreative |
ETIQUETAS PARA EL MANEJO DE LA TIPOGRAFÍA
**Negrillas** | <b>negrita</b> | |
__Negrillas__ | <strong>negrita</strong> | |
*Cursiva* | <i>cursiva</i> | |
_Cursiva_ | <em>cursiva</em> | |
***Cursiva Negrita*** | <b><i>negrita + cursiva</i></b> | |
___Cursiva Negrita___ | ||
~~Tachado~~ | <del>tachado</del> | |
~~*tachado cursiva*~~ | <del><i>tachado cursiva</i></del> | |
~~**tachado negrita**~~ | <del><b>tachado negrita</b></del> | |
~~***tachado negrita cursiva***~~ | <del><b><i>tachado negrita cursiva</i></b></del> |
ETIQUETAS PARA COLOCAR EL TEXTO COMO SUBÍNDICE O SUPERÍNDICE.
<SUB>Recreative</SUB> | |
<SUP>Recreative</SUP> |
ETIQUETAS PARA JUSTIFICADO DE TEXTO O IMÁGENES
| CENTRADO | <center>Recreative</center> | |
| Contenido a la izquierda | <div class="pull-left">Recreative</div> | Recreative Recreative Recreative Recreative Recreative Recreative Recreative |
| Contenido a la derecha | <div class="pull-right">Recreative</div> | Recreative Recreative Recreative Recreative Recreative Recreative Recreative |
- EJEMPLOS DEL CENTRADO CON IMÁGENES
Blockchain.com es un servicio de exploración de bloques de Bitcoin, así como un monedero de criptodivisas y un intercambio de criptodivisas que soporta Bitcoin, Bitcoin Cash y Ethereum. También proporcionan gráficos de datos de Bitcoin, estadísticas e información de mercado FUENTE
FUENTE
- EJEMPLOS DEL TEXTO A LA DERECHA O IZQUIERDA CON IMÁGENES
NOTA: en cuanto al alineado a la izquierda o derecha, el único cambio es que en la parte de la etiqueta donde colocaríamos el texto, simplemente lo sustituimos por el enlace de la dirección de la imagen.
ETIQUETA DE JUSTIFICADO
<div class="text-justify"><p>recreatve recreative</div class="text-justify"></p>Blockchain.com es un servicio de exploración de bloques de Bitcoin, así como un monedero de criptodivisas y un intercambio de criptodivisas que soporta Bitcoin, Bitcoin Cash y Ethereum. También proporcionan gráficos de datos de Bitcoin, estadísticas e información de mercado.
FUENTE
ETIQUETA PARA COLOCAR EL TEXTO O IMÁGENES EN BLOQUES
EJEMPLO CON IMÁGENES
|Imagen|Imagen|Imagen||---|---|---||Imagen|Imagen|Imagen|`
.jpg) | .jpg) | | |
|---|---|---|---|
| | | |
| | |
EJEMPLO CON TEXTO
|RECREATIVE STEEM|RECREATIVE STEEM|RECREATIVE STEEM||---|---|---||RECREATIVE STEEM|RECREATIVE STEEM|RECREATIVE STEEM|| RECREATIVE STEEM | RECREATIVE STEEM | RECREATIVE STEEM |
|---|---|---|
| RECREATIVE STEEM | RECREATIVE STEEM | RECREATIVE STEEM |
ETIQUETA PARA HACER MENCIÓN DE CITAS.
En esta ocasión te presentaré tres maneras de llevar a cabo el citado.
RECREATIVE STEEM / RECREATIVE STEEM
RECREATIVE STEEM / RECREATIVE STEEM
>RECREATIVE STEEM / RECREATIVE STEEM
>>RECREATIVE STEEM / RECREATIVE STEEM
RECREATIVE STEEM / RECREATIVE STEEM
<q>RECREATIVE STEEM / RECREATIVE STEEM</q>
RECREATIVE STEEM / RECREATIVE STEEM
<blockquote> RECREATIVE STEEM / RECREATIVE STEEM </blockquote>
ETIQUETA QUE PERMITE COLOCAR UN LINK A OTRA PÁGINA
Te mostraré dos formas de hacerlo y así evitar el plagio, recuerda usarlo tanto como texto como imágenes.
<a href="Colocar url Destino">WWW.RECREATIVESTEEM.COM</a>
WWW.RECREATIVESTEEM.COM
[NOMBRE DEL LINK](LINK)
WWW.RECREATIVE.COM
ETIQUETA PARA CREAR LISTAS
* Recreative 1 | <li> Recreative 1 </li> | |
* Recreative 2 | <li> Recreative 2 </li> | |
* Recreative 3 | <li> Recreative 3 </li> |
Numérico |
|---|
1. Recreative 12. Recreative 23. Recreative 3 | <ol><li> Recreative 1 </li><li> Recreative 2 </li><li> Recreative </li></ol> |
|
ETIQUETAS PARA CREAR ESPACIOS ENTRE PÁRRAFOS
La primera forma que tenemos es la más sencilla, usando # entre las líneas del párrafo que deseamos separar.
<br> | |
<p> </p> | |
ETIQUETA PARA CREAR LÍNEAS DE SEPARACIÓN
<hr> | |
--- | |
- - ETIQUETA PARA COLOCAR EL TEXTO EN ROJO
<div class="phishy">Recreative</div> | Recreative |
ETIQUETA DE SANGRÍA
Recreative | |
Recreative | |
Recreative |
ETIQUETA PARA AJUSTAR EL TAMAÑO DE LA IMAGEN
Esta es la etiqueta, un poco confusa de usar al inicio, pero una vez que sabes el funcionamiento es de mucha ayuda con respecto al manejo del tamaño de las imágenes en tus publicaciones veamos cómo:
Image ejemplo:
.jpg)
Link de la imagen:
.jpg)
SELECCIONAMOS EL TAMAÑO CON EL QUE DESEAMOS TRABAJAR
https://steemitimages.com/300x300/https://Link de la imagenhttps://steemitimages.com/200x200/https://Link de la imagenhttps://steemitimages.com/50x50/https://Link de la imagenESTOS VALORES FUERON SELECCIONADOS DE FORMA ALEATORIA, EL TAMAÑO DEPENDERA DE TU GUSTO
Procedemos a sustituir el https:// de la imagen original por el de la etiqueta que hemos seleccionado. Recuerda solo es el https://
Así se ve la etiqueta al final:
<center>.jpg)</center>
.jpg)
https://steemitimages.com/200x200/https://Link de la imagen.jpg)
https://steemitimages.com/50x50/https://Link de la imagen
ETIQUETA PARA MARCAR CONTENIDO
Esta es la etiqueta que se usa para seleccionar o marcar el contenido en especial los códigos HTML.
<CODE></CODE> |
Esto es todo por ahora, espero que estas etiquetas te puedan ser de utilidad en la creación de tus contenidos, si te gusto el contenido no dudes en compartirlo!!
Muy instructiva publicación siempre necesitamos repasar y aprender más de los formatos, para embellecer nuestros post, gracias @villareealjj
gracias a ti, espera que te sea de utilidad.
Herramientas muy útiles para nuestros usuarios. Gracias @villarrealjj
Que sea de utilidad!
gracias por este tutorial para que mejoremos nuestros post, esta calidad
gracias a ti.
gracias a ti.
Uhh, bravo!!! Habia muchos que no conocía. Yo casi no conozco markdown, siempre me defiendo con html... Me es muy util tu post
son más rápidos y cumplen la misma función.
Eso me he fijado, porque igual la plataforma de steemit interpreta el html como markdown asi que resulta conveniente, se ven mucho más sencillos. Gracias
Hola muy buenas herramientas para mejorar nuestros post.
hola, si tal cual como dices!
Muy buena tu publicacion amigo @villarrealjj aun hay cosas que sigo aprendiendo y esto incorpora unas que desconocía. Muchas Gracias. Muy bien explicado.
Gracias que te sea de utilidad!
Material de suma utilidad, gracias por tomarte el tiempo de mostrarnos.
Excelente información de utilidad para todos, pondré en práctica unas más 😊
Gracias
#affable #venezuela
les felicito por esta publicación porque facilita las publicaciones
Gracias, esperamos que sea de tu ayuda!
Gracias, esperamos que sea de tu ayuda!