MEJORANDO LA ESTÉTICA Y EL MAQUETADO DE TUS CREACIONES POR @VILLARREALJJ

in RECREATIVE STEEM2 months ago (edited)

PORTADA RECREATIVE STEEM (5).jpg

diseño por @yanelpuerta

IMG-20210717-WA0017.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.

IMG-20210717-WA0017.jpg

  • ETIQUETAS PARA LA CREACIÓN DE TÍTULOS

Html
Markown
Ejemplo
<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

Nota: Entre mayor sea el valor numérico que acompaña la etiqueta, menor será el tamaño de los caracteres, lo mismo también se aprecia con la cantidad de #.
|

IMG-20210717-WA0017.jpg

  • ETIQUETAS PARA EL MANEJO DE LA TIPOGRAFÍA

Mark Down
HTML
Ejemplo
**Negrillas**
<b>negrita</b>
Negrillas
__Negrillas__
<strong>negrita</strong>
Negrillas
*Cursiva*
<i>cursiva</i>
Cursiva
_Cursiva_
<em>cursiva</em>
Cursiva
***Cursiva Negrita***
<b><i>negrita + cursiva</i></b>
Cursiva Negrita
___Cursiva Negrita___
Cursiva Negrita
~~Tachado~~
<del>tachado</del>
Tachado
~~*tachado cursiva*~~
<del><i>tachado cursiva</i></del>
tachado cursiva
~~**tachado negrita**~~
<del><b>tachado negrita</b></del>
tachado negrita
~~***tachado negrita cursiva***~~
<del><b><i>tachado negrita cursiva</i></b></del>
tachado negrita cursiva


IMG-20210717-WA0017.jpg

  • ETIQUETAS PARA COLOCAR EL TEXTO COMO SUBÍNDICE O SUPERÍNDICE.

Html
Ejemplo
<SUB>Recreative</SUB>
Recreative
<SUP>Recreative</SUP>
Recreative

IMG-20210717-WA0017.jpg

  • ETIQUETAS PARA JUSTIFICADO DE TEXTO O IMÁGENES

Etiqueta
Html
Ejemplo
CENTRADO
<center>Recreative</center>
Recreative Recreative Recreative Recreative
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

1621261131_429724_1621261300_miniatura_normal.jpg


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

1621261131_429724_1621261300_miniatura_normal.jpg
FUENTE


  • EJEMPLOS DEL TEXTO A LA DERECHA O IZQUIERDA 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.
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.

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.


IMG-20210717-WA0017.jpg

  • 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.

1621261131_429724_1621261300_miniatura_normal.jpg
FUENTE


IMG-20210717-WA0017.jpg

  • ETIQUETA PARA COLOCAR EL TEXTO O IMÁGENES EN BLOQUES


EJEMPLO CON IMÁGENES

|Imagen|Imagen|Imagen|
|---|---|---|
|Imagen|Imagen|Imagen|`


PERFIL RECREATIVE STEEM (3).jpg
PERFIL RECREATIVE STEEM (3).jpg
PERFIL RECREATIVE STEEM (3).jpg
PERFIL RECREATIVE STEEM (3).jpg
PERFIL RECREATIVE STEEM (3).jpg
PERFIL RECREATIVE STEEM (3).jpg
PERFIL RECREATIVE STEEM (3).jpg
PERFIL RECREATIVE STEEM (3).jpg
PERFIL RECREATIVE STEEM (3).jpg

EJEMPLO CON TEXTO

|RECREATIVE STEEM|RECREATIVE STEEM|RECREATIVE STEEM|
|---|---|---|
|RECREATIVE STEEM|RECREATIVE STEEM|RECREATIVE STEEM|


RECREATIVE STEEMRECREATIVE STEEMRECREATIVE STEEM
RECREATIVE STEEMRECREATIVE STEEMRECREATIVE STEEM

IMG-20210717-WA0017.jpg

  • 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>



IMG-20210717-WA0017.jpg

  • 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



IMG-20210717-WA0017.jpg

  • ETIQUETA PARA CREAR LISTAS


MarkDown
HTML
Ejemplo
* Recreative 1
<li> Recreative 1 </li>
  • Recreative 1
  • * Recreative 2
    <li> Recreative 2 </li>
  • Recreative 2
  • * Recreative 3
    <li> Recreative 3 </li>
  • Recreative 3
  • Numérico

    MarkDown
    HTML
    Ejemplo
    1. Recreative 1
    2. Recreative 2
    3. Recreative 3
    <ol>
    <li> Recreative 1 </li>
    <li> Recreative 2 </li>
    <li> Recreative </li>
    </ol>
    1. Recreative 1
    2. Recreative 2
    3. Recreative 3


    IMG-20210717-WA0017.jpg

    • 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.

    ETIQUETA
    EJEMPLO
    RECREATIVE STEEM
    RECREATIVE STEEM
    #
    RECREATIVE STEEM
    RECREATIVE STEEM

    ETIQUETA
    EJEMPLO
    RECREATIVE STEEM
    RECREATIVE STEEM
    <br>
    RECREATIVE STEEM
    RECREATIVE STEEM

    ETIQUETA
    EJEMPLO
    RECREATIVE STEEM
    RECREATIVE STEEM
    <p> </p>
    RECREATIVE STEEM
    RECREATIVE STEEM

    IMG-20210717-WA0017.jpg

    • ETIQUETA PARA CREAR LÍNEAS DE SEPARACIÓN


    ETIQUETA
    EJEMPLO
    RECREATIVE STEEM
    RECREATIVE STEEM
    <hr>
    RECREATIVE STEEM
    RECREATIVE STEEM

    ETIQUETA
    EJEMPLO
    RECREATIVE STEEM
    RECREATIVE STEEM
    ---
    RECREATIVE STEEM
    RECREATIVE STEEM

    IMG-20210717-WA0017.jpg

    • -
      ETIQUETA PARA COLOCAR EL TEXTO EN ROJO

    ETIQUETA
    EJEMPLO
    <div class="phishy">Recreative</div>
    Recreative

    IMG-20210717-WA0017.jpg

    • ETIQUETA DE SANGRÍA


    ETIQUETA
    EJEMPLO
    &nbsp;Recreative
      Recreative
    &nbsp; &nbsp; Recreative
        Recreative
    &nbsp; &nbsp; &nbsp; Recreative
          Recreative

    IMG-20210717-WA0017.jpg

    • ETIQUETA PARA AJUSTAR EL TAMAÑO DE LA IMAGEN


    https://steemitimages.com/altoXancho/

    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:

    PERFIL RECREATIVE STEEM (3).jpg

    Link de la imagen:

    ![PERFIL RECREATIVE STEEM (3).jpg](https://cdn.steemitimages.com/DQmWnPo7ZZQwsDnsifaytMZJBThvbuNahopS1zqrxzbobvb/PERFIL%20RECREATIVE%20STEEM%20(3).jpg)

    SELECCIONAMOS EL TAMAÑO CON EL QUE DESEAMOS TRABAJAR

    https://steemitimages.com/300x300/https://Link de la imagen

    https://steemitimages.com/200x200/https://Link de la imagen

    https://steemitimages.com/50x50/https://Link de la imagen

    ESTOS 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>![PERFIL RECREATIVE STEEM (3).jpg](https://steemitimages.com/300x300/https://cdn.steemitimages.com/DQmWnPo7ZZQwsDnsifaytMZJBThvbuNahopS1zqrxzbobvb/PERFIL%20RECREATIVE%20STEEM%20(3).jpg)</center>

    PERFIL RECREATIVE STEEM (3).jpg

    https://steemitimages.com/200x200/https://Link de la imagen

    PERFIL RECREATIVE STEEM (3).jpg

    https://steemitimages.com/50x50/https://Link de la imagen


    IMG-20210717-WA0017.jpg

    • ETIQUETA PARA MARCAR CONTENIDO


    Esta es la etiqueta que se usa para seleccionar o marcar el contenido en especial los códigos HTML.

    ETIQUETA
    ETIQUETA
    (`)
    <CODE></CODE>


    IMG-20210717-WA0017.jpg

    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!!



    separador.jpg

    Sort:  
     2 months ago 

    Herramientas muy útiles para nuestros usuarios. Gracias @villarrealjj

    Que sea de utilidad!

     2 months ago 

    gracias por este tutorial para que mejoremos nuestros post, esta calidad

    gracias a ti.

    gracias a ti.

     2 months ago 

    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.

     2 months ago 

    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.

     2 months ago 

    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

     2 months ago 

    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!

     2 months ago 

    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!

    Loading...