Redireccionar a un link y crear un índice

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

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.

HTML: <h1> Titulo gigante </h1>

Markdown: # Titulo gigante

HTML: <h2>Titulo muy grande</h2>

Markdown: ## Titulo muy grande

HTML: <h3>Titulo grande</h3>

Markdown: ### Titulo grande

HTML: <h4> Titulo mediano </h4> 

Markdown: #### Titulo mediano 

HTML: <h5> Titulo pequeño </h5>

Markdown: ##### Titulo pequeño

HTML: Titulo más pequeño

Markdown: ###### Titulo más pequeño

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.

HTML:  <strong>Negrita</strong>

Markdown:  **Negrita**

HTML:  <u>Subrayado</u>

Markdown: No soporta

HTML: <s>Tachar</s>

Markdown: ~~Tachar~~

HTML: <em>Italic</em>

Markdown: *Italic*

HTML: <div class="phishy">Rojo</div>

Markdown: No soporta

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:

Quizá en la tabla no se aprecia tan bien, asi que acá va un ejemplo mas práctico:

También podemos usar solo Left y Right, que es un formato bastante utilizado para hacer post en dos idiomas:

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:  Texto descriptivo: Texto que describe la imagen. Aparecerá si la imagen no se carga correctamente o si alguien decide escuchar el post con audio. link: Es la URL o la dirección de la imagen que deseas insertar.	Para subir una imagen en HTML, puedes usar el siguiente formato: <img src="link" alt="Texto descriptivo"> src="link": La ruta o URL de la imagen que deseas insertar. alt="Texto descriptivo": Texto que describe la imagen. Aparecerá si la imagen no se carga correctamente o si alguien decide escuchar el post con audio.

HTML: <p>Este es un párrafo en HTML.</p> Esto es lo que sigue 

Resultado: 
 Este es un párrafo en HTML 
 Esto es lo que sigue  

HTML: <hr></hr>  

Markdown: ---  

Resultado: 
  

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:

HTML: <quote>Esto es una cita</blockquote>  

Markdown: > Esto es una cita  

Resultado: 
Esto es una cita 

HTML: 
<details>
  <summary>Titulo de la alerta de Spoiler</summary>
  <p>This is the spoiler content</p>
</details>

Markdown:
 >! [Titulo de la alerta de Spoiler] El contenido del spoiler
  

Resultado: Titulo de la alerta de Spoiler
El contenido del spoiler 

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.

HTML: 
<ul>
    <li> Primer item </li>
    <li> Segundo item </li>
    <li> Tercer item </li>
</ul>

Markdown: 
- Primer item  
- Segundo item  
- Tercer item
 

Resultado: 

Primer item
Segundo item
Tercer item

Para hacer una lista con números, en HTML hay que usar dos etiquetas y en Markdown tan solo el número con un .

HTML: 
<ol>
    <li> Primer item </li>
    <li> Segundo item </li>
    <li> Tercer item </li>
</ol>

Markdown: 
1. Primer item  
2. Segundo item  
3. Tercer item

Resultado: 

Primer item
    
Segundo item
    
Tercer item

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

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:

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.

HTML: <a href="https://risingstarutils.vexy.host/">Texto del linklt;/a> Esto es lo que sigue

Markdown: [Texto del link](https://risingstarutils.vexy.host/) Esto es lo que sigue

Resultado: Texto del link 

Crear objetivo: <div id="introduction"> Texto </div> 

HTML: <a href="#introduction">Ir a introducción</a>

Markdown: [Ir a introducción](#introduction)

Resultado: Ir a introducción 

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.