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

oscarloltm (48)in Venezolanos Steem • 4 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

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

Resultado	HTML
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

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

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

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}	`<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. @lg-sus, @crisletting, @marisandi y @alvaro, acá tienen mi plantilla.

#spanish #newsletter #trending #venezuela #steemexclusive #tutorial #html