Hola mis queridos stemians, el dia de hoy les quise traer, digamos, un tutorial de como mejorar el diseño de sus post con un poco de html.

![Mejorar post con html.png](https://cdn.steemitimages.com/DQmVEFVYxU6HoANiCEqTiysS9Js6aDtZJAickjdt8ZPu5XU/Mejorar%20post%20con%20html.png) Diseñada en canva

Para comenzar primero veremos como ponerle tamaño a un titulo o texto.

Tamaño de texto

![image.png](https://cdn.steemitimages.com/DQmRW9cdgzur8Yhix6gJfXNY8FNF1qyWcS7yujJ4die9QNk/image.png) |Resultado|HTML| |---|---| |

Titulo

|<h1>Titulo</h1>| |

Titulo

|<h2>Titulo</h2>| |

Titulo

|<h3>Titulo</h3>| |

Titulo

|<h4>Titulo</h4>| |

Titulo

|<h5>Titulo</h5>| |

Titulo

|<h6>Titulo</h6>|

Ahora que ya sabemos como cambiar el tamaño del texto les daré varas opciones de estilo para texto.

Estilos para texto

![separadorrojo.png](https://cdn.steemitimages.com/DQmRqpfrYm6nEcsgPQJbdx7jWeLwqy1z8xrzLbNk5xSgUpo/separadorrojo.png) |Resultado|HTML| |---|---| |NEGRITA|<b>Negrita</b>| |CURSIVA|<i>CURSIVA</i>| |NEGRITA Y CURSIVA|<i><b>NEGRITA Y CURSIVA</b></i>| |~~TACHADO~~|<del>TACHADO</del>| |

Texto Rojo

|<div class="phishy">Texto Rojo</div>|

Postdata: deben borrar el nombre del estilo del código y poner el texto que ustedes deseen. Ejemplo, si quieren poner en cursiva "Hola amigos como están" hacen asi: <i>Hola amigos como están</i>

Ahora les mostrare a como posicionar sus párrafos en el post.

Posicionamiento de párrafos

![separadorrojo.png](https://cdn.steemitimages.com/DQmRqpfrYm6nEcsgPQJbdx7jWeLwqy1z8xrzLbNk5xSgUpo/separadorrojo.png) |Resultado|HTML| |---|---| |Centrar Párrafo|<center>Centrar Párrafo</center> | |

Esto ajustara el párrafo.

Postdata: Para alinear imágenes, ejemplo con alinear a derecha, cambian en "<div class="pull-right">Alinear a Derecha</div>" el "Alinear a Derecha por el link de la imagen *ojo link de la imagen no de la pagina web*

Les enseñare a como poner un link o hipervínculo en una palabra o imagen, esto es necesario para poner la fuente de las imágenes

Links o Hipervínculos en textos e imágenes

![separadorrojo.png](https://cdn.steemitimages.com/DQmRqpfrYm6nEcsgPQJbdx7jWeLwqy1z8xrzLbNk5xSgUpo/separadorrojo.png) |Resultado|HTML| |---|---| |Enlace en texto|<a href="####">Enlace en texto</a>| |Enlaces en imágenes|<a href="###"><img. src="####"></a>|

Postdata: Los "####" de "href" son para la pagina web, y, los de "img.crc" son para el link de la imagen *vuelvo y repito el link de la imagen, no de la pagina web *

Y también les mostrare 3 cosas extras: poner tablas de manera fácil, códigos especiales, y una lista de emojis.

EXTRAS

![separadorrojo.png](https://cdn.steemitimages.com/DQmRqpfrYm6nEcsgPQJbdx7jWeLwqy1z8xrzLbNk5xSgUpo/separadorrojo.png)

Emojis

Emoji	Código
😉	`😉`
😊	`😊`
😠	`😠`
😜	`😜`
😧	`😧`
😱	`😱`
😆	`😆`
😎	`😎`
😍	`😍`
😭	`😭`
😞	`😞`
😶	`😶`
😇	`😇`
😈	`😈`
😵	`😵`

Tablas

![separadorrojo.png](https://cdn.steemitimages.com/DQmRqpfrYm6nEcsgPQJbdx7jWeLwqy1z8xrzLbNk5xSgUpo/separadorrojo.png)

Método Fácil (Markdwons)

|Nombre|Apellido|Localidad|
|---|---|---|
|perensejo|sutanejo|imaginolandia|

Método Complicado (HTML)

<table>
<thead>
<tr>
<th><center>El texto</center></th>
<th><center>que ustedes</center></th>
<th><center>deseen</center></th>
</tr>
</thead>
</table>

Códigos Especiales

![separadorrojo.png](https://cdn.steemitimages.com/DQmRqpfrYm6nEcsgPQJbdx7jWeLwqy1z8xrzLbNk5xSgUpo/separadorrojo.png)

Texto	Sintaxis
^{Reducir texto Arriba}	`<sup>Reducir texto Arriba</sup>`
_{Reducir texto Abajo}	`<sub>Reducir texto Abajo</sub>`
Linea entre 2 textos	`<br>`
Linea Horizontal	`<hr>`
Viñetas	`<li> hola </li>`
Sangría	` `

Bueno amigos espero les haya gustado y servido un montón, si tienen alguna duda, no duden en ponerla en los comentarios.