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

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 ...
ComodinSignificado
$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 FormatearSintaxis
Negrilla*Negrilla*
Cursiva_Cursiva_
Cursiva y Negrilla_*Cursiva y Negrilla*_
Tachado~~Tachado~~


Método HTML

Texto a FormatearSintaxis
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.

TituloSintaxis HtmlSintaxis 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 ImagenSintaxis
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 ImagenSintaxis
Texto Cualquiera![Texto Cualquiera!](####)
Imagen CualquieraSolo Coloca el Enlace de la imagen

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



Especiales

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

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:  

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

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

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 😆

👏 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

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.

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

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

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!

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

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

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!

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

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

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

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

       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.

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

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

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

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! 😇

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

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

Loading...

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

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.

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