(Formatos Para Textos Parte II)

Presentacion Steemit.png

Hola Steemits.

Continuando con el propósito de aprender las técnicas de configuración de nuestros textos, y de mejorar la visualización de nuestras publicaciones mediante la maquetización, complementaremos nuestros conocimientos con una serie de etiquetas y comandos que describiremos seguidamente.

markdown & HTML 2.png

Quorum4

La combinación de MARKDOWN y HTML para hacer una publicación resulta ser la mejor fórmula para moldear y desarrollar la forma en que presentamos nuestras publicaciones, por eso recomiendo que aprendamos y usemos estas dos modalidades para nuestro propio beneficio.

Separador 3.jpg

Centrado de texto

En una presentación podemos emplear la alineación de textos, esto significa que podemos colocar a la derecha, a la izquierda o centrar el texto de un párrafo completo o una de sus líneas, por defecto el editor de contenido alinea lo que escribimos a la izquierda, pero si es necesario podemos mover el texto a nuestra conveniencia.

El centrado del texto es una de las formas más sencillas de mover el texto, esto se hace con la etiqueta <center> y su cierre </center>, por supuesto el texto en medio de las dos.

Ejemplo:

Si colocamos:

<center>Texto Centrado</center>

Obtendremos:

Texto Centrado

Estas etiquetas <center> y </center> las podemos utilizar para centrar nuestras imágenes.

Separador 3.jpg

Las Viñetas o Listas

Las viñetas o listas originalmente se usan para citar, numerar y definir cosas a través de un símbolo. Sin embargo, las listas finalmente se utilizan para mucho más que enumerar una serie de puntos, en realidad es un recurso para poder esquematizar elementos diversos de una publicación.

Con MARKDOWN, solo basta con teclear +, -, * o 1., seguido de un espacio y luego el texto.

Ejemplo:

Viñeta	Resultado
`* Viñeta`	• Viñeta
`1. Numero`	1. Numero

Las posibilidades de manejar viñetas en HTML para tratar formatos de texto son realmente formidables, un ejemplo de ello son las listas, que sirven para enumerar y definir elementos, los textos preformateados y las cabeceras o títulos.

Las listas son utilizadas para citar, numerar y definir objetos. También son utilizadas corrientemente para desplazar el comienzo de línea hacia la derecha.

Para estructurar los niveles de las viñetas debemos colocar tres espacios en blanco al inicio de la línea siguiente a una viñeta y así para los demás niveles siguientes.

Venezuela

Ejemplo:

País Venezuela
- Estados del Oriente:
  - Anzoategui
    - Barcelona
  - Bolivar
    - Ciudad Bolivar
  - Sucre
    - Cumaná
  - Nueva Esparta
    - La Asunción

Recuerda que en algunos navegadores no les funciona la opción de cambiar el tipo de viñeta a mostrar, Steemit solo permite un solo tipo de viñeta.

Separador 3.jpg

Resaltar el Texto

Cuando trabajaremos con textos simples la mejor herramienta para hacer notar una palabra significativa en un párrafo es resaltarla, es hacer realmente atractivo un párrafo y su contenido.

Tenemos varias formas de resaltar un texto y las describiremos de esta forma:

Usando apostrofes `` estas las colocamos presionando la tecla Alt +96 y lo colocaremos en el editor de contenido.

Ejemplo:

<b>`Resaltar Texto`</b>

El resultado será:

Resaltar Texto

Si colocamos doble apostrofe causará que las etiquetas o símbolos no tengan efectos sobre el texto y quedan resaltados.

Ejemplo:

Cuando queremos<b>`Resaltar el Texto`</b>y las etiquetas se hace así.

El resultado será:

Cuando queremos Resaltar el Texto y las etiquetas se hace así.

Colocando triple apostrofe al principio y al final de un párrafo causará que se resalte todo el texto.

Cierto día paso un publicista frente a él, se detuvo leyó el cartelito que este pobre ciego tenia a sus pies y observo que solo contaba con unas pocas monedas recolectadas en el viejo sombrero...

Dando cuatro espacios en blanco al principio del párrafo

Cierto día paso un publicista frente a él, se detuvo leyó el cartelito que este pobre ciego tenia a sus pies y observo que solo contaba con unas pocas monedas recolectadas en el viejo sombrero...

Separador 3.jpg

Las Tablas

Una tabla en un conjunto de celdas organizadas dentro de las cuales podemos alojar distintos contenidos, muchos basan su maquetización en este tipo de efecto, es una de las mejores maneras de organizar y distribuir los espacios de una publicación.

Entendamos un poco, si has trabajado con tablas alguna vez, sabes que estas se representan en filas y columnas, en este caso se traducen a líneas y celdas.

Ahora les presento una etiqueta de HTML que nos permitirá realizar cuadros en nuestras publicaciones, aquí las tablas se definen con las etiquetas <table> y su cierre </table>, dentro de estas dos etiquetas colocaremos las otras etiquetas para hacer las líneas y las celdas que darán forma y contenido a la tabla.

Las líneas cruzan la tabla de izquierda a derecha, cada una de estas líneas están definidas por otra etiqueta y su cierre, <tr> y </tr> y dentro de cada línea, habrá diferentes celdas.

Cada una de estas celdas será definida por otro par de etiquetas, <td> y </td>, una que abre y otra que cierra, dentro de estas etiquetas será donde coloquemos nuestro contenido.

<table>
<tr> <td> <center><b>Esta es la Fila de Titulo</b></center> </td> </tr>
<tr> <td> <center>Escriba aquí el contenido de la Tabla</center></td> </tr>
 </table>

Y el resultado que se obtiene es:

Esta es la Fila de Titulo

Escriba aquí el contenido de la Tabla

pero las cosas no siempre serán tan sencillas así que e aquí un ejemplo de una tabla mas compleja:

Quorum4

<table >
<tr>
<td> <center><b>Titulo 1</b></center></td>
<td> <center><b>Titulo 2</b></center></td>
<td> <center><b>Titulo 3</b></center></td>
</tr>
<tr>
<td> <center><b>Dato 1.1</b></center></td>
<td> <center><b>Dato 2.1</b></center></td>
<td> <center><b>Dato 3.1</b></center></td>
</tr>
<tr>
<td> <center><b>Dato 1.2</b></center></td>
<td> <center><b>Dato 2.2</b></center></td>
<td> <center><b>Dato 3.2</b></center></td>
</tr>
</table>

a nuestros ojos el resultado sera el siguiente:

Titulo 1	Titulo 2	Titulo 3
Dato 1.1	Dato 2.1	Dato 3.1
Dato 1.2	Dato 2.2	Dato 3.2

MARKDOWN, presenta otra nomenclatura y para sus efectos el resultado es el mismo, veamos su estructura, su resultado y entendamos:

|<center>Titulo 1</center> |<center>Titulo 2</center>|
|-|- 
|Linea 1 - Celda 1|Linea 1 - Celda 2
|Linea 2 - Celda 1|Linea 2 - Celda 2
|Linea 3 - Celda 1|Linea 3 - Celda 2

Titulo 1	Titulo 2
Linea 1 - Celda 1	Linea 1 - Celda 2
Linea 2 - Celda 1	Linea 2 - Celda 2
Linea 3 - Celda 1	Linea 3 - Celda 2

Cuesta un poco acostumbrarte a trabajar con estas estructuras pero, si deseamos crear una publicación de calidad, tendremos que dominarlas y sacarle el mayor provecho posible a las ventajas que nos ofrecen las tablas.

Separador 3.jpg

Las Imagenes

Colocar imágenes en tus publicaciones es una forma muy acertada de darle vida, llamar la atención del lector, utilizando imágenes en tus diseños agregas profesionalismo y personalizas su contenido. Nuestro propósito es conocer algunas instrucciones MARKDOWN y HTML, que nos permitan combinar y organizar imágenes y textos.

A continuación te mostraremos cómo agregar imágenes ya seas su autor o no, y alinearlas dentro de tu publicación para sacarles el mejor provecho.

En principio, para colocar imágenes nos ubicaremos debajo del editor de contenido, allí se presentan las opciones para agregar las imágenes a nuestras publicaciones, solo debes escoger uno de estos métodos y hacerlo.

Quorum4

Otra manera de agregar imágenes a tus publicaciones es usando![Titulo de la Imagen](Link de la Imagen) de MARKDOWN, se coloca en el editor de contenidos, y para trabajar con este comando solo debes conocer el link de la imagen que quieres colocar en la publicación.

Ejemplo:

![steemit 3+.png]
(https://steemitimages.com/DQmeGBBDp6dFLcBkv3v5YBiUei7JEgK1vnGhUEkACCdbVFw/steemit%203%2B.png)

Obtendrás este resultado:

Steemit

No coloques espacios entre los símbolos; El signo de exclamación y los corchetes, y no hay espacios entre los corchetes y la letra más cercana a él.

Si deseas que tu imagen se sitúe en el centro de la sección, utiliza las etiquetas <center> y </center> el cual se aplica de la siguiente manera: <center>![Titulo de la Imagen](Link de la Imagen)</center>

Playa

Si deseas que tu imagen se sitúe a la izquierda de la sección, utiliza la etiqueta <div> de la siguiente manera:<div class="pull-left"> ![Titulo de la Imagen](Link de la Imagen)</div>.

Separador 3.jpg

Ciudad

Los atributos de esta etiqueta permiten colocar texto del lado derecho de la imagen.

También podemos insertar el link de la autoría de la imagen con: <a href="http://www.steemit.com">Ciudad</a> cosa que es es muy apreciada y valorada en Steemit.

Si deseas que tu imagen se sitúe a la derecha de la sección, utiliza la etiqueta <div> de la siguiente manera:<div class="pull-right"> ![Titulo de la Imagen](Link de la Imagen)</div>.

images (77).jpg

Frutas

Los atributos siguen siendo los mismos y puedes colocarle texto al lado izquierdo de la imagen.

De la misma manera, insertar el link de la autoría de la imagen.

Recapitulando, las etiquetas deberían estar escritas de esta manera:

<div class="pull-left">
![images (77).jpg]
(https://steemitimages.com/DQmdZ5qL5pWLHMJDwLJCGVE6fYV65sPJKMSR5zQwRBGYDM1/images%20(77).jpg) <center><a href="http://www.steemit.com">Ciudad</a></center>
</div>

La primera imagen que incluyas en tus publicaciones será la que aparecerá en la página de inicio de las promociones junto a tu titulo, así que diseña una portada atractiva para atraer al lector que este haga clic en su articulo.

Para obtener LINK de la imagen, basta con hacer clic derecho con ratón en la imagen que vas a utilizar desde la Web y luego hacer clic en "Copiar dirección de imagen".

La imagen se ajusta automáticamente a la izquierda.

Separador 3.jpg

Bueno amigos, esto es todo por ahora espero que la información aquí plasmada sea de utilidad para esos nuevos usuarios de esta red social, y recuerden, no nos limitemos a lo que hayamos visto hasta ahora, sino que vallamos más lejos todavía.

Si te es útil o te gusto la publicación no olvides apoyarnos con tu voto.

Hasta la próxima publicación...!

DISEÑA TUS PUBLICACIONES Y HAZ QUE RESALTEN MUCHO MÁS: (Formatos Para Textos Parte II)

(Formatos Para Textos Parte II)

Hola Steemits.

Centrado de texto

Las Viñetas o Listas

Viñeta

Resultado

Resaltar el Texto

Las Tablas

Las Imagenes