Original Guide (In English)
Guia de Markdown y HTML
Introducción
Tamaño de texto
Decoración del texto y cólores
Alinear el contenido
Subir imagenes por link
Parrafos, separadores, citas y spoilers.
Crear lista de items y números.
Creación de tablas
Redireccionar a un link y crear un índice
Introducción
¡Muy buenas a todos! Hoy les traigo una guía sobre Markdown y HTML. Anteriormente publiqué este contenido en inglés, pero ahora lo he reescrito completamente en español. Esta versión no es solo una traducción literal, sino una reestructuración detallada del contenido y del código, adaptándolo para que sea claro y preciso en este idioma. Sé que, en algunas comunidades, esto podría considerarse un post duplicado, aunque no sea el caso. Por ello, para evitar cualquier malentendido y en consideración a las reglas, he decidido renunciar a las recompensas relacionadas con esta publicación.
Antes de entrar en detalle sobre las posibilidades que ambos ofrecen para crear publicaciones, quiero aclarar un punto importante: no es recomendable mezclar HTML y Markdown excesivamente en una misma sección del texto. Esto puede provocar problemas, como desalineaciones o un formato inesperado que podría afectar la presentación del contenido.
Markdown es un lenguaje de marcado sencillo diseñado para crear documentos fácilmente legibles y convertibles a HTML, sin necesidad de escribir código complejo.
HTML es el estándar utilizado para estructurar páginas web, permitiendo definir la organización y formato con etiquetas y atributos.
Tamaño del texto
Tanto en HTML como en Markdown, tenemos una opción para poder darle tamaño al texto de hasta seis niveles. En el caso de Markdown, situamos un # (hashtag) al principio de la linea seguido de un espacio y en HTML tenemos que usar la etiqueta < h(size)> < /h(size)> que cierre al texto.
|
|---|
|
|
|---|
|
|
|---|
|
|
|---|
|
|
|---|
|
|
|---|
|
Decoración del texto y cólores
También tenemos varias opciones para decorar nuestro texto y solo una opción para pintar de rojo, ya que Markdown no soporta colores y en HTML tampoco se pueden aplicar estilos a la etiqueta.
Negrita |
|---|
|
Subrayado |
|---|
|
Tachar |
|---|
|
Italic |
|---|
|
|
|---|
|
Alinear el contenido
La plataforma nos ofrece una única opción para alinear el contenido de nuestro post: a la izquierda, al centro o a la derecha, utilizando las siguientes etiquetas:
| Code | Example |
|---|---|
| <div class="pull-left"> Align to Left </div> |
Align to Left
|
| <pre<center> Align to Center </center> |
|
| <div class="pull-right"> Align to Right </div> |
Align to Right
|
Quizá en la tabla no se aprecia tan bien, asi que acá va un ejemplo mas práctico:
Center
Right
También podemos usar solo Left y Right, que es un formato bastante utilizado para hacer post en dos idiomas:
Imagen
| Usar una imagen por link con Markdown | Usar una imagen por link con HTML |
|---|---|
|
Para subir una imagen en Markdown, puedes usar el siguiente formato:
|
Para subir una imagen en HTML, puedes usar el siguiente formato:
|
|
|
Parrafos, Separadores, Citas y Spoiler
|
|---|
|
|
|---|
|
Los separadores son bastante útiles para los post. Sin embargo, es más recomendable utilizar separadores personales como los que utilizó yo. El más utilizado es esta imagen:
|
|---|
|
|
|---|
|
Listas
Las listas con items se pueden hacer tanto con Markdown como con HTML, en HTML basta con dos etiquetas y en Markdown es mucho más facil pudiendo hacerlo con un guion(-) y espacio.
Lista con items |
|---|
|
Para hacer una lista con números, en HTML hay que usar dos etiquetas y en Markdown tan solo el número con un .
Lista con números |
|---|
|
Tablas
Llegamos quizá a la parte más complicada de entender y de explicar. En caso de no tener experiencia manipulando código HTML, recomiendo encarecidamente que utilizen Markdown para crear sus tablas porque es bastante sencillo:
Glosario
|: Se usa para separar las columnas.---: Se utiliza como separador entre los encabezados y los datos.
Código:
| Columna 1 | Columna 2 | Columna 3 |
|-----------|------------|------------|
| Dato 1 | Dato 2 | Dato 3 |
| Dato 4 | Dato 5 | Dato 6 |
Resultado:
Columna 1 Columna 2 Columna 3 Dato 1 Dato 2 Dato 3 Dato 4 Dato 5 Dato 6
| Columna 1 | Columna 2 | Columna 3 |
|---|---|---|
| Dato 1 | Dato 2 | Dato 3 |
| Dato 4 | Dato 5 | Dato 6 |
Al que le gusta complicarse la vida, acá esta el tutorial de como hacer una tabla con HTML:
Glosario
<table>: Define la tabla completa.<thead>: Define el encabezado de la tabla, donde van los títulos de las columnas.<tr>: Define una fila de la tabla.<th>: Define encabezados de columna.<tbody>: Define el cuerpo de la tabla, donde se encuentran los datos.<td>: Define celdas dentro de la tabla.
Código:
<table>
<thead>
<tr>
<th>Titulo 1</th>
<th>Titulo 2</th>
<th>Titulo 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Dato 1</td>
<td>Dato 2</td>
<td>Dato 3</td>
</tr>
<tr>
<td>Dato 4</td>
<td>Dato 5</td>
<td>Dato 6</td>
</tr>
</tbody>
</table>
Resultado:
| Titulo 1 | Titulo 2 | Titulo 3 |
|---|---|---|
| Dato 1 | Dato 2 | Dato 3 |
| Dato 4 | Dato 5 | Dato 6 |
Estas tablas son completamente personalizables, teniendo la oportunidad de agregar filas y columnas tanto como desees. Las tablas es una función que uso muy seguida para plasmar estadisticas que recopilo.
Links and Index
Redireccionar a un link |
|---|
|
Crear un indice para redireccionar a una sección del post |
|---|
Es necesario colocar el `#` antes del `id`, para que el enlace se quede en la página y no redirija fuera de ella.
|
Estos son algunos trucos que he aprendido mientras he estado publicando en este y otros foros. Lamentablemente, el HTML de este foro tiene limitaciones, ya que no permite agregar estilos CSS, lo que dificulta personalizar aspectos como los colores del texto, el tamaño de las tablas y otros detalles visuales. A pesar de ello, con las técnicas adecuadas se pueden lograr presentaciones claras y funcionales.
Llegamos al final de la guia detallada de Markdown y HTML. Si en el futuro me olvido de alguna funcionalidad o tengo algo más que agregar, no dudaré en editar el post y añadirla. He intentado crear un formato lo más claro y atractivo posible para que la información sea fácil de leer y entender.
