Mejora la Presentación de tus posts con HTML
Para comenzar primero veremos como ponerle tamaño a un titulo o texto.
Tamaño de texto
| 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
| Resultado | HTML |
|---|---|
| NEGRITA | <b>Negrita</b> |
| CURSIVA | <i>CURSIVA</i> |
| NEGRITA Y CURSIVA | <i><b>NEGRITA Y CURSIVA</b></i> |
| <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
| Resultado | HTML |
|---|---|
| <center>Centrar Párrafo</center> | |
Esto ajustara el párrafo. | <div class="text-justify">Esto ajustara el párrafo</div> |
| Alinear a Izquierda | <div class="pull-left">Alinear a Izquierda</div> |
| Alinear a Derecha | <div class="pull-right">Alinear a Derecha</div> |
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
| 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
Emojis
| 😉 | 😉 |
| 😊 | 😊 |
| 😠 | 😠 |
| 😜 | 😜 |
| 😧 | 😧 |
| 😱 | 😱 |
| 😆 | 😆 |
| 😎 | 😎 |
| 😍 | 😍 |
| 😭 | 😭 |
| 😞 | 😞 |
| 😶 | 😶 |
| 😇 | 😇 |
| 😈 | 😈 |
| 😵 | 😵 |
Tablas
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
| Texto | Sintaxis |
|---|---|
| Reducir texto Arriba | |
| Reducir texto Abajo | |
| Linea entre 2 textos | <br> |
| Linea Horizontal | <hr> |
<li> hola </li> | |
| Sangría | |
You have been selected for 500SP Minnow Support Program and will be supported by Booming Curation Support. For more details about this program please check this post 500SP Minnow Support Program for Newcomers(Revised Edition) updated on 24/5/2021
Don't forget to attach your Achievement 1 post link to every of your post published in this Steemit Nursery community.
You have been selected for 500SP Minnow Support Program and will be supported by Booming Curation Support. For more details about this program please check this post 500SP Minnow Support Program for Newcomers(Revised Edition) updated on 24/5/2021
Don't forget to attach your Achievement 1 post link to every of your post published in this Steemit Nursery community.
Hi @oscarloltm please always have an active post(less than 6 days of age) at Steemit Nursery for receiving the 500 SP support. See you around soon!