Introducción a la edición de texto en Google Colab - css-umar/Programacion GitHub Wiki

Introducción a la edición de texto en Google Colab

El texto en Google Colab se maneja en código Markdown, Latex y html.

Edicción de texto

Para escribir texto en negritas, se encierra el texto entre dobles asteriscos **texto**.

El siguiente código Markdown

**Este es un texto en negritas**

arroja:

Este es un texto en negritas

Para escribir texto en cursivas, se encierra el texto entre asteriscos *texto* o entre guiones bajos _texto_.

El siguiente código Markdown

*Este un texto en cursiva*
_Este un texto en cursiva_

arroja:

Este un texto en cursiva

Este en un texto en cursiva

Para crear un texto que combine fuentes cursivas y negritas, el texto se encierra en entre dobles asteriscos y entre guiones bajos (**_texto_**).

El siguiente código Markdown

**_Este un texto en negrita y cursiva_**

arroja:

Este un texto en negrita y cursiva

Superíndice y subíndice

Para escribir texto en superíndice y subíndice se usa código html.

  • Para superíndice, se usa el siguiente código <sup>texto<\sup>
  • Para subíndice, se usa el siguiente código <sub>texto<\sub>

Ejemplo

La fórmula del agua se escribe con el siguiente código

H<sub>2</sub>O

el cual arroja el siguiente resultado: H2O

Otro ejemplo

La fórmula del peróxido de hidrógeno se obtiene con el siguiente código html

H<sub>2</sub>O<sub>2</sub>

el resultado es H2O2.

Uno ejemplo más

Para escribir X elevado a potencia 2, se usa el siguiente código html

X<sup>2</sup>

el resultado es X2.

Listas

Listas numeradas

Para crear listas númeradas se usan simplemente números.

El siguiente código Markdown

1. Elemento 1
2. Elemento 2
3. Elemento 3

arroja la lista numerada:

  1. Elemento 1
  2. Elemento 2
  3. Elemento 3

Listas con viñetas

Para crear listas con viñetas se usa el símbolo de suma (+)

El siguiente código Markdown

+. Elemento 1
+. Elemento 2
+. Elemento 3

arroja la siguiente lista con viñetas:

  • Elemento 1
  • Elemento 2
  • Elemento 3

Listas anidadas

Para crear listas anidadas se usa el símbolo de mayor que (>).

El siguiente código Markdown

+ Elemento 1
> + Elemento 1.1
>> + Elemento 1.1.1
>> + Elemento 1.1.2
>> + Elemento 1.1.3
> + Elemento 1.2
> + Elemento 1.3
+ Elemento 2
> + Elemento 2.1
> + Elemento 2.2
> + Elemento 2.3
+ Elemento 3

arroja la siguiente lista anidada:

  • Elemento 1
  • Elemento 1.1
  • Elemento 1.1.1
  • Elemento 1.1.2
  • Elemento 1.1.3
  • Elemento 1.2
  • Elemento 1.3
  • Elemento 2
  • Elemento 2.1
  • Elemento 2.2
  • Elemento 2.3
  • Elemento 3

Creación de listas usando código html

Listas ordenadas personalizadas

Se usa el siguiente código hmtl

<ol type="Opcion">
  <li>Elemento 1</li>
  <li>Elemento 2</li>
  <li>Elemento 3</li>
  <li>Elemento 4</li>
  <li>Elemento 5</li>
</ol>

Donde type = opción puede ser:

  • type = "1", para listas decimales
  • type = "a", para listas alfabéticas en minúsculas
  • type = "A", para listas alfabéticas en mayúsculas
  • type = "i", para listas en romanos minúsculas
  • type = "I", para listas en romanos mayúsculas.

Ejemplo

El siguiente código muestra una lista con números.

<ol type="1">
  <li>Julio</li>
  <li>Carmen</li>
  <li>Ignacio</li>
  <li>Elena</li>
  <li>America</li>
</ol>
  1. Julio
  2. Carmen
  3. Ignacio
  4. Elena
  5. America

El siguiente código muestra una lista con letras mayúsculas.

<ol type="A">
  <li>Julio</li>
  <li>Carmen</li>
  <li>Ignacio</li>
  <li>Elena</li>
</ol>
  1. Julio
  2. Carmen
  3. Ignacio
  4. Elena

Lista de definiciones

Se usa el siguiente código hmtl:

<dl>
  <dt>Palabra 1</dt>
  <dd>Definición de Palabra 1</dd>
  <dt>Palabra 2</dt>
  <dd>Definición de Palabra 2</dd>
  <dt>Palabra 3</dt>
  <dd>Definición de Palabra 3</dd>
  <dt>Palabra 4</dt>
  <dd>Definición de Palabra 4</dd>
</dl>

Ejemplo

El siguiente código muestra una lista de definiciónes

<dl>
  <dt>Pizpireta</dt>
  <dd>Dicho de una mujer: Viva, pronta y aguda.</dd>
  <dt>Polular</dt>
  <dd>Dicho de las personas, animales o cosas: Abundar y bullir en un lugar.</dd>
  <dt>Concupiscencia</dt>
  <dd>En la moral católica, deseo de bienes terrenos y, en especial, apetito desordenado de placeres deshonestos.</dd>
</dl>

El resultado es

Pizpireta
Dicho de una mujer: Viva, pronta y aguda.
Polular
Dicho de las personas, animales o cosas: Abundar y bullir en un lugar.
Concupiscencia
En la moral católica, deseo de bienes terrenos y, en especial, apetito desordenado de placeres deshonestos.

Edición de ecuaciones

Para editar ecuaciones se usa código Latex. Existen dos formas en las cuales se pueden presentar las ecuaciones en Google colab, a saber:

  • Modo linea:

Para usar modo linea, el código Latex se encierra entre signos de pesos $fórmula$.

  • Modo presentación:

Para usar modo presentación, el código Latex se encierra entre dos signos de pesos $$fórmula $$.

Ejemplo:

La ecuación más famosa de Albert Einstein es $E = mc^2$ , la ecuación de la relatividad.

La fórmula general para resolver ecuaciones del tipo $aX^2+bX + c$ es:

$$x = \dfrac{-b\pm\sqrt{b^2-4ac}}{2a}$$

Consulte Overleaf para mayores detalles de cómo editar expresiones matemáticas.

Edición de ecuaciones químicas

Para escribir ecuaciones químicas se usa estilo de fuente mathrm dentro código Latex.

Ejemplo

El siguiente código Latex

$$\mathrm{H_2O\rightleftarrows H_2 + \frac{1}{2}O_2}$$
$$\mathrm{CH_4 + 2\,O_2\rightarrow CO_2 + 2\,H_2O}$$

muestra las reacciones químicas

También funciona en modo linea, por ejemplo, la fórmula del agua es $\mathrm{H_2O}$.

Edición de tablas

Para crear tablas, los campos (celdas) y cabeceras se separan con una barra vertical |.

El siguiente código Markdown

Cabecera 1 | Cabecera 2
---        | ---
Celda 1,1  | Celda 1,2
Celda 2,1  | Celda 2,2

muestra la siguiente tabla:

Cabecera 1 Cabecera 2
Celda 1,1 Celda 1,2
Celda 2,1 Celda 2,2

Alineación de texto en tablas

La alineación de texto en cada columna se hace mediante la adición de dos puntos a las líneas de separación.

  • Dos puntos a la izquierda de la línea punteada (:---) hará que la columna esté alineada a la izquierda.
  • Dos puntos a la derecha de la línea punteada (---:) hará que la columna esté alineada a la derecha.
  • Dos puntos en ambos lados de la línea punteada (:---:) significa que la columna se alinea al centro.

El siguiente código Markdown

Cabecera 1                     | Cabecera 2      | Cabecera 3
:---                           | :---:           | ---:
Texto alineado a la izquierda  | Texto centrado  | Texto alinaeado a la derecha
Celda 2,1                      | Celda 2,2       | Celda 2,3
Celda 3,1                      | Celda 3,2       | Celda 3,3

muestra la siguiente tabla:

Cabecera 1 Cabecera 2 Cabecera 3
Texto alineado a la izquierda Texto centrado Texto alinaeado a la derecha
Celda 2,1 Celda 2,2 Celda 2,3
Celda 3,1 Celda 3,2 Celda 3,3

Fórmulas matemáticas y químicas en tablas

Para escribir fórmulas matemáticas y químicas dentro de tablas, se usa el modo en linea para representar ecuaciones en Latex.

El siguiente código Markdown

Fórmula química | Fórmula matemática
---             | ---
$\mathrm{H_2O}$   |$E = mc^2$

muestra la siguiente tabla con fórmulas químicas y matemáticas:

Fórmula química Fórmula matemática
$\mathrm{H_2O}$ $E = mc^2$

Tablas usando código html

Tablas por filas

Se usa el siguiente código html

<table class="egt">
 <tr><td>Fila 1</td><td>Elemento 1 Fila 1</td><td>Elemento 2 Fila 1</td><td>Elemento 3 Fila 1</td></tr>
 <tr><td>Fila 2</td><td>Elemento 1 Fila 2</td><td>Elemento 2 Fila 2</td><td>Elemento 3 Fila 2</td></tr>
</table>

El resultado del código anterior es:

Fila 1 Elemento 1 Fila 1 Elemento 2 Fila 1 Elemento 3 Fila 1
Fila 2 Elemento 1 Fila 2 Elemento 2 Fila 2 Elemento 3 Fila 2

Ejemplo

<table class="egt">
  <tr><td>Tiempo $t(s)$</td> <td>$15$</td><td>20</td><td>22</td></tr>
  <tr><td>Velocidad $v(m/s)$</td><td>365</td><td>520</td><td>600</td></tr>
</table>
Tiempo $t(s)$ $15$ 20 22
Velocidad $v(m/s)$ 365 520 600

Tablas encabezado

Para generar tablas con encabezado, se usa el siguiente código:

<table>
  <tr>
    <th>Cabecera 1</th>
    <th>Cabecera 2</th>
    <th>Cabecera 3</th>
  </tr>
  <tr>
    <td>Fila 1 Columna 1</td>
    <td>Fila 1 Columna 2</td>
    <td>Fila 1 Columna 3</td>
  </tr>
</table>

el cual arrroja la tabla que se muestra a continuación

Cabecera 1 Cabecera 2 Cabecera 3
Fila 1 Columna 1 Fila 1 Columna 2 Fila 1 Columna 3

Tablas con título

Para generar tablas con título, se usa el siguiente código:

<table class="egt">
  <caption>Título de la tabla</caption>
  <tr><th scope="col">Cabecera 1</th><th>Cabecera 2</th><th>Cabecera 3</th><th>Cabecera 4</th></tr>
  <tr><th>Celda 1,1</th><td>Celda 1,2</td><td>Celda 1,3</td><td>Celda 1,4</td></tr>
  <tr><th>Celda 2,1</th><td>Celda 2,2</td><td>Celda 2,3</td><td>Celda 2,4</td></tr>
</table>

el cual arrroja la tabla que se muestra a continuación

Título de la tabla
Cabecera 1 Cabecera 2 Cabecera 3 Cabecera 4
Celda 1,1 Celda 1,2 Celda 1,3 Celda 1,4
Celda 2,1 Celda 2,2 Celda 2,3 Celda 2,4

Inserción de imágenes

Desde Google drive

Se usan los siguientes pasos:

Paso 1: Dirigirse a la carpeta en Google drive donde se desea subir la imágen.

Paso 2: Subir al Google drive la imágen que se desea insertar.

Paso 3: Seleccionar la imágen con el botón derecho del mouse. Se abrirá un menú.

Paso 4: Seleccionar la opción Obtener vínculo.

Paso 5: Cambiar la opción de Restringido a Cualquier personal que tenga el vínculo.

Paso 6: Dar clic a Copiar vínculo.

Paso 7: Pegar el vínculo en un editor de texto. El vículo tendrá una forma similar al siguiente ejemplo

https://drive.google.com/file/d/1YCaUgY5ziIR_P7DGoXwx-_Epqfdk--QY/view?usp=sharing

Paso 8: Del vínculo pegado, seleccionar y copiar el texto entre https://drive.google.com/file/d/ hasta /view?usp=sharing

Paso 9: Se obtendrá un código como el siguiente 1YCaUgY5ziIR_P7DGoXwx-_Epqfdk--QY

Paso 10: El código obtenido en el paso anterior se reemplaza por la palabra código en

<img src="https://drive.google.com/uc?id=código&export=download" width="70%">

Quedando de la forma siguiente

<img src="https://drive.google.com/uc?id=1YCaUgY5ziIR_P7DGoXwx-_Epqfdk--QY&export=download" width="40%">

El resultado obtenido es el siguiente:

Paso 11: Para cambiar el tamaño de la imagen, hay que modificar el valor de width = "valor" al que usted desee.

Desde la web

Se usan los siguientes pasos:

Paso 1: Buscar la imágen en la web.

Paso 2: Selecionar con el botón derecho del mouse la imagen deseada. se abrirá un menú.

Paso 3: Seleccionar Copiar dirección de imagen.

Paso 4: Reemplazar en el siguiete código html la palabra vínculo con dirección obtenida en el Paso 3. La dirección cotiene un código muy extenso. ¡No se preocupe!

![](vínculo)

Ejemplo

⚠️ **GitHub.com Fallback** ⚠️