Tutorial edición página

Organización de archivos

Dentro de cada carpeta existe un número de archivos y carpetas que se describen a continuación:

Títulos y textos

Para generar un título se utiliza el símbolo # seguido del título. El número de # indica el nivel de título. Por ejemplo, para generar un título de primer nivel se utiliza # Título de primer nivel. Para generar un título de segundo nivel se utiliza ## Título de segundo nivel. Y así sucesivamente.

El texto se puede resaltar utilizando el símbolo *. Por ejemplo, para generar un texto en negrita se utiliza **Texto en negrita**. Para generar un texto en cursiva se utiliza *Texto en cursiva*. Y así sucesivamente.

Listas

Para generar una lista se utiliza el símbolo - seguido del elemento de la lista. Por ejemplo, para generar una lista con los elementos elemento1, elemento2 y elemento3 se utiliza:

- elemento1
- elemento2
- elemento3

Si se quiere hacer una lista ordenada secuencialmente, se utiliza el símbolo 1. seguido del elemento de la lista. Por ejemplo, para generar una lista con los elementos elemento1, elemento2 y elemento3 se utiliza:

1. elemento1
2. elemento2
3. elemento3

Si se quiere hacer una lista anidada, se utiliza el símbolo - seguido del elemento de la lista. Por ejemplo, para generar una lista con los elementos elemento1, elemento2 y elemento3 se utiliza:

- elemento1
  - elemento2
    - elemento3

Imagenes

Para insertar una imagen se utiliza el siguiente código:

![Texto alternativo](/ruta/a/la/imagen)

por ejemplo, si queremos poner la imagen de este link https://source.unsplash.com/featured/800x600?landscape, se utiliza:

![Texto alternativo](https://source.unsplash.com/featured/800x600?landscape)

y el resultado será así

Videos

Para insertar un video se utiliza el siguiente código:

{{< youtube id_del_video >}}

por ejemplo, si queremos poner el video de este link https://www.youtube.com/watch?v=Da-2h2B4faU, se utiliza:

{{< youtube Da-2h2B4faU >}}

y el resultado será así

Bloques de código

Para insertar un bloque de código se utiliza la siguiente sintaxis usando backticks (`):

```el lenguaje en el que queremos poner el código
el código que queremos poner
```

por ejemplo, si queremos poner un bloque de código en Python, se utiliza:

```python
def say_hello():
    print("Hello!")
```

y el resultado será así

def say_hello():
    print("Hello!")

Bloques de código con números de linea

Para insertar un bloque de código con números de linea se utiliza linenos=table y opcionalmente se pone linenostart=(número de línea) para definir en qué número de línea empieza el código. Todo esto usando la siguiente sintaxis y usando backticks (`):

```el lenguaje que queremos poner{linenos=table, linenostart=(número de línea)}
el código que queremos poner
```

por ejemplo, si queremos poner un bloque de código en Python, se utiliza:

```python{linenos=table, linenostart=18}
def say_hello():
    print("Hello!")
```

y el resultado será así

18
19

def say_hello():
    print("Hello!")

Copiar código

El botón de copiado está activado por default para cada bloque de código.

Enlaces

Para insertar un enlace se utiliza la siguiente sintaxis:

[Texto del enlace](/ruta/al/enlace)

por ejemplo, si queremos poner un enlace a la página principal de la asignatura, se utiliza:

[Enlace a la página principal](https://arojaspe.github.io/Hugo-POO-UN/)

y el resultado será así

Enlace a la página principal

Tablas

Para insertar una tabla se utiliza la siguiente sintaxis:

| Columna 1 | Columna 2 | Columna 3 |
|-----------|-----------|-----------|
| Elemento 1 | Elemento 2 | Elemento 3 |
|------------|------------|------------|
| Elemento 4 | Elemento 5 | Elemento 6 |

y el resultado será así

Diagramas

Para insertar un diagrama se utiliza Mermaid. Mermaid es una herramienta basada en Javascript que permite generar diagramas y diagramas de flujo a partir de texto. Para más información sobre Mermaid, se puede consultar la documentación oficial. Se pueden generar todo tipo de diagramas, como diagramas de flujo, diagramas de secuencia, diagramas de clases, diagramas de Gantt, etc. Para insertar un diagrama se utiliza la siguiente sintaxis:

```mermaid
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
```

y el resultado será así

graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;

Se recomienda el uso de un editor de Mermaid para facilitar la construcción del diagrama como Mermaid.live

Elementos adicionales

Callouts

Un callout es un elemento que permite resaltar un texto. Para insertar un callout se utiliza la siguiente sintaxis:

Callout default

{{< callout >}}
  En esta página se encuentra el tutorial para construir el sitio web de la asignatura de POO.
{{< /callout >}}

y el resultado será así

Callout de información

{{< callout type="info" >}}
  En este callout se encuentra información importante.
{{< /callout >}}

y el resultado será así

Callout de advertencia

{{< callout type="warning" >}}
  Este callout está pensado para atraer la atención de quien lo lee.
{{< /callout >}}

y el resultado será así

Callout de error

{{< callout type="error" >}}
  Este callout está pensado para indicar que algo ha salido mal.
{{< /callout >}}

y el resultado será así

Botones (cards)

Un botón es un elemento que permite resaltar un enlace. Para insertar un botón se utiliza la siguiente sintaxis:

{{< cards >}}
  {{< card link="la ruta del archivo al que se quiere dirigir" title="Nombre botón" icon="ícono" >}}
  {{< card link="/ruta" title="Siguiente botón" >}}
{{< /cards >}}

Los nombres de los íconos pueden ser reemplazados por los disponibles en Heroicons

Tutoriales adicionales

• Markdown Guide
• Markdown Cheatsheet
• Markdown Tutorial
• Markdown Reference
• Hextra guide