Tutorial uso Simplificado del Markdown y html con plantilla Incluida By @Aularluis

aularluis (61) in hive-108800 • 4 years ago (edited)

Bienvenidos

Bueno empecemos con esta explicación sencilla sin ampliar mucho los conceptos, ya que creo que las explicaciones cortas son lo mejor. Trabajaremos tanto con Markdown como con HTML

Qué es Markdown

En palabras Sencillas es un lenguaje de marcado y es el lenguaje que usamos a la hora de hacer una publicación (¡Sencillo corto y concreto!), con este lenguaje tenemos la ventaja de usar ciertas etiquetas o marcas para dar el formato a nuestro texto...... (Listo!) ^_^

Qué es Html

Al igual que el anterior es un lenguaje de marcado que se utiliza para el desarrollo de páginas de Internet. es mucho más completo que el previo pero un poquito más complicado de entender sin embargo igual de fácil.

Sintaxis Markdonws & Html

Okas! antes de empezar tomen en consideración lo siguiente para entender las sintaxis los siguientes comodines!

Mini Leyenda ...

Comodin	Significado
$	Borralo del codigo para que funcione.
href="###"	Reemplaza los ### por la ruta de una web
img src="####"	Reemplaza los ### por la ruta de una Imagen

Aplicando Formato a Nuestro Texto

Una de las grandes utilidades que tiene el uso de las sintaxis en Markdwons o html es que nos permite formatear nuestros textos o párrafos logrando así darles un toque más personal y más organizados.

Método Markdwons

Texto a Formatear	Sintaxis
Negrilla	`Negrilla`
Cursiva	`_Cursiva_`
Cursiva y Negrilla	`_Cursiva y Negrilla_`
~~Tachado~~	`~~Tachado~~`

Método HTML

Texto a Formatear	Sintaxis
Negrilla	`<strong>Negrilla</strong>`
Cursiva	`<em>Cursiva</em>`
Cursiva y Negrilla	`<em><strong>Cursiva y Negrilla</strong></em>`
~~Tachado~~	`<del>Tachado</del>`

Trabajando con Titulos

Es muy sencillo trabajar con los títulos y fácil aprender su sintaxis. Ve la leyenda para que puedas trabajar con el código.

Titulo	Sintaxis Html	Sintaxis Markdwons
Titulo	`<h1>Titulo</h1>`	`# Titulo`
Titulo	`<h2>Titulo</h2>`	`## Titulo`
Titulo	`<h3>Titulo</h3>`	`### Titulo`
Titulo	`<h4>Titulo</h4>`	`#### Titulo`
Titulo	`<h5>Titulo</h5>`	`##### Titulo`
Titulo	`<h6>Titulo</h6>`	`###### Titulo`

Trabajando con Párrafos

Solo usaremos código html, ya que Markdwons no tiene esta característica sin embargo podemos usar html sin problema.

A. Justificar texto

<div class='text-justify'> Copia y pega el texto aquí </div>

B. Centrar texto

<center> Copia y pega el texto aquí </center>

C. Alinear Texto a la Derecha

<div class='pull-right'> Copia y pega el texto aquí </div>

D. Alinear Texto a la Izquierda

<div class='pull-left'> Copia y pega el texto aquí </div>

Si lo que queremos es alinear es una imagen!

1. Alinear a la Derecha

<div class='pull-right'>Link de la imagen</div>

2. Alinear a la Izquierda

<div class='pull-left'>Link de la imagen</div>

Trabajando con hipervínculos & Mas..

Si lo que necesitamos es colocar una imagen con un hipervinculo o un texto te dejo acá el código que necesitas solo cambia los comodines por los enlaces respectivos ve la leyenda que deje mas arriba.

Método HTML

Texto o Imagen	Sintaxis
Texto Cualquiera!	`<a href="###">Texto Cualquiera!</a>`
Imagen Cualquiera	`<a href="###"><img. src="####"></a>`

^{Postdata: Recuerda ver la pequeña leyenda al principio de la publicación. borra el punto luego de la palabra img. este lo coloque por que de no hacer lo me daba error steemit al publicar}

Método Markdwons

Texto o Imagen	Sintaxis
Texto Cualquiera!	`[Texto Cualquiera!](####)`
Imagen Cualquiera	`Solo Coloca el Enlace de la imagen`

^{Postdata: lo esta dentro () debe ser reemplazado por la ruta del enlace}

Especiales

Texto	Sintaxis
^{Reducir texto Arriba}	`<sup>Reducir texto Arriba</sup>`
_{Reducir texto Abajo}	`<sub>Reducir texto Abajo</sub>`
Salto de Línea	`<br>`
Linea Horizontal	`<hr>`
Viñetas	`* hola` `Tambien puede ser` `<li> hola </li>`
Sangría	` `
Texto de color rojo	`<div class="phishy">Texto de color rojo</div>`

Como Insertar una Tabla!

La ventaja de las tablas es que nos permiten organizar la información de manera que si lo que vamos a mostrar son imágenes podemos colocar las una al lado de otra como en las imágenes finales de esta publicación.

Método Markdwons

|Posteador|Colaborador|Imagen|
|---|---|---|
|@aularluis|@luiyi-22|Link Imagen|

^{Postdata: Te recomiendmo este Metodo si vas a trabajar solo tablas con texto o enlaces}

Método Html

<table>
<thead>
<tr>
<th><center><img. src="####"></a></center></th>
<th><center><img. src="####"></a></center></th>
<th><center><img. src="####"></a></center></th>
</tr>
</thead>
</table>

^{Postdata: Recuerda que los #### debes cambiar lo por los enlaces de las imagenes y este tipo de tablas es mas practico cuando trabajamos con imagenes. borra el punto luego de la palabra img. este lo coloque por que de no hacer lo me daba error steemit al publicar}

Resumen en Video - Repaso

Tabla de Contenidos

Leccion	Temas	Ubicación
1	A. Negrita, B. Cursiva, C. Tachado	00:10
2	D. Titulos, E. Citas, F. Sub o Sup	04:00
3	G. Centrar, H. Mover Parrafos, I. Justificar	08:15
4	J. Justificar Parrafos, K. Sangrias	13:10

Tabla de Contenidos

Leccion	Temas	Ubicación
5	L. Hipervinculos a un Texto, M. Hipervinculos a una Imagen	00:15
6	N. Tablas	04:20
7	Ñ. Salto de Linea y Saparadores, O. Codigo y Texto Rojo, P. Redimensionar Imagenes	08:50

Ayuda Extra.

Ahora que entendemos mejor un poco más el código les dejare lo que sería una pequeña plantilla que pueden usar las veces que sea necesario y les facilitara muchísimo a la hora de publicar. Copia y pega en el editor de publicaciones y modificalo a tu gusto. Si quieres evaluar el codigo de esta publicacion te recomiendo que entres aca Ejemplo

Plantilla

<center>https://i.imgur.com/V8aEX7k.jpg</center>
<br>
<h3>Bienvenidos</h3>
https://i.imgur.com/VEiwen7.png
<div class="text-justify">

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto.

</div>
<hr>
<br>
<div><center>Link de imagen</center><center><sup>Pie de Imagen N° 1</center></sup></div>
<br>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto.

</div>
<hr>
<br>
<div><center>link de imagen</center><center><sup>Pie de Imagen N° 2</center></sup></div>
<br>
<center><h2>(....Aqui despide tu Publicación....)</h2></center>

Gracias al equipo de Venezolanos steem que han apoyado esta publicación he decidido hacer una actualización y agregue dos videos para ayudar a todos aquellos nuevos steemians; y gracias a la cuenta de @venezolanos, @marcybetancourt y @solperez que siempre estan pendientes de ayudar a todos aquellos que lo necesiten. Estos dos videos lo realice no con la intensión de beneficio económico si no con la intención de ayudar a quien lo necesite! Gracias por su apoyo y estaré mejorando esta publicación cada vez que pueda.

Tambien Puedes Visitar

_{_{CC:
@luiyi-22,
@cachetes-27,
@mari30,
@leyxi209,
@mini80,
@torontoflia,
@sther}}

hive-108800 betterlife learnwithsteem steemexclusive steemoriginal venezuela spanish

4 years ago by aularluis (61)

$7.30

Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!

Sort Order:

Trending

[-]

roxandra (60) · 4 years ago

Gracias por compartir esta información tan necesaria para los que estamos comenzando.

$0.00

[-]

venezolanos (70) · 4 years ago

Excelente publicación. Gracias por compartirla en nuestra comunidad. Ha de ser muy útil para todos los usuarios. Gran saludo!

$0.00

[-]

aularluis (61) · 4 years ago

Saludos @venezolanos

`Me alegra muchísimo poder contar con su apoyo y mi intensión con esta publicación es ayudar a todos aquellos que aun tiene algunos problemas con la edición de sus publicaciones a la hora de realizar las por eso incluyo una pequeña plantilla para que sea mucho más fácil poder usar el código y editar lo a voluntad.`

😁 #Midatabase 😆

$0.00

[-]

luiyi-22 (67) · 4 years ago

👏 excelente trabajo. Toda esta muy bien explicado y das dos opciones para usar el código. Ya tengo una nueva guía para explicarle a los nuevos usuarios.

Gracias por el aporte!

#onepercent #venezuela #affable

$0.00

[-]

aularluis (61) · 4 years ago

`Gracias Gracias Gracias Gracias Me alegra mucho que puedas usar mi publicación para ayudar a los nuevos ya que realmente es mi objetivo con esta publicación.`

$0.00

[-]

sther (45) · 4 years ago

Muchísimas gracias amigo, mejor explicación que esa, no se puede! Genial!!!

$0.00

[-]

aularluis (61) · 4 years ago (edited)

`De nada señora me alegra mucho poder ayudar ahora no tienes escusas deberías saber hacer todo sin problemas`

$0.00

[-]

marcybetancourt (71) · 4 years ago (edited)

Hola @aularluis. Desde hace algún tiempo había querido hacer una publicación como esta para ayudar a los nuevos usuarios.... pero he tenido tanto trabajo en la Comunidad que no he montado la publicación.

Gracias por compartir tus conocimientos y tu tiempo para hacer esta publicación que es para el beneficio de todos.

Me gustaría saber si se puede poner esta información en el reporte de actividades que hace la comunidad en la sección "Publicaciones de interés".

¡Saludos!

$0.00

[-]

aularluis (61) · 4 years ago

Saludos @marcybetancourt

`Hola seria todo un honor ser parte del reporte! gracias por escribir me alegra muchísimo incluso estoy pensando en agregar un video hecho por mi explicativo en esta misma publicación de manera que iré actualizando la publicación y sea un poco mas interactiva y beneficiosa para quienes la vean.`

#Midatabase

$0.00

[-]

marcybetancourt (71) · 4 years ago

Sería muy interesante! De verdad, gracias por estas publicaciones.

$0.00

[-]

venezolanos (70) · 4 years ago

Gracias por ser parte de la Comunidad Venezolanos Steem, la Casa Grande para todos los Sueños. Tu publicación ha sido Seleccionada para el Programa de Soporte a las Comunidades de las cuentas @booming. ¡Felicitaciones!

$0.00

[-]

yuly.villa (52) · 4 years ago

Cuente con mi apoyo amigos, entre todos saldremos adelante y seremos cada dia mas fuertes. Saludos a todos los moderadores y administradores.

$0.00

[-]

yuly.villa (52) · 4 years ago

Buena publicación e iniciativa para todos que iniciamos en esta plataforma , felicitaciones por este breve e importante tutorial amig@ @aularluis.

$0.00

[-]

justjcampos (60) · 4 years ago

Excelente publicación! Muy util la verdad, gracias por compartir.

$0.00

[-]

mini80 (74) · 4 years ago

Hola y gracias por compartir. Esta bien explicado y entendible. Feliz día

$0.00

[-]

aularluis (61) · 4 years ago

`Hola @mini80 tiempo sin verte bueno me alegra mucho que visites esta publicación espero que te sirva muchísimo le hare actualizaciones a esta publicación para que sea cada vez más practica y más útil a los que desean aprender el código para formatear sus publicaciones.`

$0.00

[-]

dixij19 (52) · 4 years ago

COMO SIEMPRE LUIS DANDO LO MEJOR DE
SU CONOCIMIENTO , BENDICIONES AMIGO

$0.00

[-]

mariannejnp (56) · 4 years ago

feliz noche amigo,muy buena este post. Saludos,me ayudara mucho al momento de redactar!!

$0.00

[-]

nena10 (59) · 4 years ago

Buenos dias @aularluis. Excelente tu post. En el poco tiempo que tengo en Steemit ya se usar algunos. Bendiciones.

$0.00

[-]

aularluis (61) · 4 years ago

Gracias me alegra muchísimo que te sirva de ayuda mi publicación, pronto estaré realizando algunos tutoriales que te podrían ayudar mucho y gracias por tu comentario! 😇

$0.00

[-]

elizabeth031171 (64) · 4 years ago

Excelente, muy pedagógico y fácil de entender. Gracias por el tutorial.👍👍

$0.00

[-]

josertalaverag (67) · 4 years ago

Uno de los mejores tutoriales que he podido ver referente al los códigos Markdown amigo @aularluis.

Y en la misma temática, tengo una pregunta a ver si me puedes orientar.

Cuando desarrollo un texto para algún post requiero colocar en negritas algunas palabras o en cursivas y todo va bien hasta que aplico los comando de Markdown para justificar el texto, al hacerlo los formatos de negrita y cursiva dejan de funcionar o tener efecto y aparece en las palabras los * ó _

Estoy haciendo algo mal o que puede estar sucediendo..?

Agradecido estaré por tu ayuda..!!

Saludos y felicitaciones por tan buen tutorial..

$0.00

[-]

maritr24 (53) · 4 years ago

Excelente publicación, me servirá mucho. Muchas gracias por tu gran aporte. Bendiciones

$0.00

[-]

luislugo218 (56) · 3 years ago

Saludos amigo @aularluis soy TSU en ADS y me hiciste recordar a mis primeras clases de programación en HTML en mi opinión profesional quiero felicitarte porque de verdad este es un gran aporte, todos no entienden que significan esos códigos, pero en la forma práctica en que lo expusiste no requiere que el que lo esté usando sea un programador o un especialista en la materia, agradecido y a nivel personal espero que toda la comunidad valore este aporte ya que para poder ser programador debemos estudiar muchísimo y comprender bien el llamado lenguaje de programación. Saludos.

$0.00

[-]

rosmaidel (47) · 3 years ago

Muy instructiva tu publicación para que mejoremos la estética de nuestras aportaciones.

$0.00

Tutorial uso Simplificado del Markdown y html con plantilla Incluida By @Aularluis

Bienvenidos

Qué es Markdown

Qué es Html

Sintaxis Markdonws & Html

Aplicando Formato a Nuestro Texto

Método Markdwons

Método HTML

Trabajando con Titulos

Titulo

Titulo

Titulo

Titulo

Titulo

Titulo

Trabajando con Párrafos

A. Justificar texto

B. Centrar texto

C. Alinear Texto a la Derecha

D. Alinear Texto a la Izquierda

1. Alinear a la Derecha

2. Alinear a la Izquierda

Trabajando con hipervínculos & Mas..

Método HTML

Método Markdwons

Especiales

Como Insertar una Tabla!

Método Markdwons

Método Html

Resumen en Video - Repaso

Tabla de Contenidos

Tabla de Contenidos

Ayuda Extra.

Plantilla

Tambien Puedes Visitar

Gracias Gracias Gracias Gracias Me alegra mucho que puedas usar mi publicación para ayudar a los nuevos ya que realmente es mi objetivo con esta publicación.

De nada señora me alegra mucho poder ayudar ahora no tienes escusas deberías saber hacer todo sin problemas

Hola seria todo un honor ser parte del reporte! gracias por escribir me alegra muchísimo incluso estoy pensando en agregar un video hecho por mi explicativo en esta misma publicación de manera que iré actualizando la publicación y sea un poco mas interactiva y beneficiosa para quienes la vean.

Hola @mini80 tiempo sin verte bueno me alegra mucho que visites esta publicación espero que te sirva muchísimo le hare actualizaciones a esta publicación para que sea cada vez más practica y más útil a los que desean aprender el código para formatear sus publicaciones.

`Gracias Gracias Gracias Gracias Me alegra mucho que puedas usar mi publicación para ayudar a los nuevos ya que realmente es mi objetivo con esta publicación.`

`De nada señora me alegra mucho poder ayudar ahora no tienes escusas deberías saber hacer todo sin problemas`

`Hola @mini80 tiempo sin verte bueno me alegra mucho que visites esta publicación espero que te sirva muchísimo le hare actualizaciones a esta publicación para que sea cada vez más practica y más útil a los que desean aprender el código para formatear sus publicaciones.`