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

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

<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