Tutorial para mejorar la presentación de tus posts con html

in Venezolanos Steem4 years ago (edited)


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

<a href0"canva.com">Diseñada en canva

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

Tamaño de texto

image.png

ResultadoHTML

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

ResultadoHTML
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

ResultadoHTML
Centrar Párrafo
<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

separadorrojo.png

ResultadoHTML
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

Emojis

Emoji
Código
😉&#128521;
😊&#128522;
😠&#128544;
😜&#128540;
😧&#128551;
😱&#128561;
😆&#128518;
😎&#128526;
😍&#128525;
😭&#128557;
😞&#128542;
😶&#128566;
😇&#128519;
😈&#128520;
😵&#128565;

Tablas

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

TextoSintaxis
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&nbsp;

    Bueno amigos espero les haya gustado y servido un montón, si tienen alguna duda, no duden en ponerla en los comentarios. @lg-sus, @crisletting, @marisandi y @alvaro, acá tienen mi plantilla.

    Sort:  

    Super bueno, como quería encontrar un tutorial así MUCHAS GRACIAS❤️

    De nada, para eso lo hice para ayudar a las personas a mejorar en steemit.