HTML para notebooks

60 min | Última modificación: Junio 22, 2019.

Introducción

El formato de un libro de Jupyter se realiza usando Markdown.
La sintaxis explicada en este documento se aplica a los documentos creados en RStudio usando RMarkdown.
Haga click aquí para acceder a una guía de markdown y aquí a la documentación oficial sobre markdown en Jupyter.
IPython tiene opciones para visualizar salidas en latex y html (entre otros). Haga click aquí para acceder a un tutorial.
Los libros de Jupyter pueden visualizarse de forma estática en la web usando nbviewer
Un tutorial completo sobre HTML se encuentra en w3Schools

Parágrafos, encabezados y citas

[1]:

%%html

<h1>Encabezado de primer nivel</h1>

<h1 style="font-size:15px;">Encabezado de primer nivel</h1>

<h2>Encabezado de segundo nivel</h2>

<h3>Encabezado de tercer nivel</h3>

Encabezado de primer nivel

Encabezado de segundo nivel

Encabezado de tercer nivel

[2]:

%%html
<p>Markdown es un lenguaje de marcado ligero creado por John Gruber que
trata de conseguir la máxima legibilidad y facilidad de publicación
tanto en sus forma de entrada como de salida, inspirándose en
muchas convenciones existentes para marcar mensajes de correo
electrónico usando texto plano. </p>

<q>Markdown es un lenguaje de marcado ligero creado por John Gruber que
trata de conseguir la máxima legibilidad y facilidad de publicación
tanto en sus forma de entrada como de salida, inspirándose en
muchas convenciones existentes para marcar mensajes de correo
electrónico usando texto plano. </q>

<blockquote>Markdown es un lenguaje de marcado ligero creado por John Gruber que
trata de conseguir la máxima legibilidad y facilidad de publicación
tanto en sus forma de entrada como de salida, inspirándose en
muchas convenciones existentes para marcar mensajes de correo
electrónico usando texto plano.
</blockquote>

<blockquote><div style="background-color:#DCDCDC; color:#000000; font-style: normal; font-family: Georgia;">
Markdown es un lenguaje de marcado ligero creado por John Gruber que
trata de conseguir la máxima legibilidad y facilidad de publicación
tanto en sus forma de entrada como de salida, inspirándose en
muchas convenciones existentes para marcar mensajes de correo
electrónico usando texto plano.
</div></blockquote>

Markdown es un lenguaje de marcado ligero creado por John Gruber que trata de conseguir la máxima legibilidad y facilidad de publicación tanto en sus forma de entrada como de salida, inspirándose en muchas convenciones existentes para marcar mensajes de correo electrónico usando texto plano.

Markdown es un lenguaje de marcado ligero creado por John Gruber que trata de conseguir la máxima legibilidad y facilidad de publicación tanto en sus forma de entrada como de salida, inspirándose en muchas convenciones existentes para marcar mensajes de correo electrónico usando texto plano.

[3]:

%%html
<p style="color:red">Texto en rojo</p>

Texto en rojo

[4]:

%%html
<p title="--> tooltip <--">
Parrafo con tooltip.
</p>

Parrafo con tooltip.

[5]:

%%html
<pre>
texto de ancho fijo
texto de ancho fijo
texto de ancho fijo
</pre>

texto de ancho fijo
texto de ancho fijo
texto de ancho fijo

[6]:

%%html
<p style="background-color:powderblue;">
Markdown es un lenguaje de marcado ligero creado por John Gruber que
trata de conseguir la máxima legibilidad y facilidad de publicación
tanto en sus forma de entrada como de salida, inspirándose en
muchas convenciones existentes para marcar mensajes de correo
electrónico usando texto plano.
</p>

Markdown es un lenguaje de marcado ligero creado por John Gruber que trata de conseguir la máxima legibilidad y facilidad de publicación tanto en sus forma de entrada como de salida, inspirándose en muchas convenciones existentes para marcar mensajes de correo electrónico usando texto plano.

[7]:

%%html
<p style="font-family:verdana;>
Markdown es un lenguaje de marcado ligero creado por John Gruber que
trata de conseguir la máxima legibilidad y facilidad de publicación
tanto en sus forma de entrada como de salida, inspirándose en
muchas convenciones existentes para marcar mensajes de correo
electrónico usando texto plano.
</p>

[8]:

%%html
<p style="font-size:80%;">
Markdown es un lenguaje de marcado ligero creado por John Gruber que
trata de conseguir la máxima legibilidad y facilidad de publicación
tanto en sus forma de entrada como de salida, inspirándose en
muchas convenciones existentes para marcar mensajes de correo
electrónico usando texto plano.
</p>

Markdown es un lenguaje de marcado ligero creado por John Gruber que trata de conseguir la máxima legibilidad y facilidad de publicación tanto en sus forma de entrada como de salida, inspirándose en muchas convenciones existentes para marcar mensajes de correo electrónico usando texto plano.

Enfasis

[9]:

%%html
<p>Algunas de estas palabras son <em>enfatizadas</em>.</p>

<p>Algunas de estas palabras son <i>enfatizadas</i>.</p>

<p>Algunas de estas palabras también son <em>enfatizadas</em>.</p>

<p>Use dos asteriscos para <strong>énfasis fuerte</strong>.</p>

<p>O si lo prefiere dos <strong>guiones bajos</strong>.</p>

Algunas de estas palabras son enfatizadas.

Algunas de estas palabras también son enfatizadas.

Use dos asteriscos para énfasis fuerte.

O si lo prefiere dos guiones bajos.

Listas sin numeración

[10]:

%%html
<ul>
  <li>Uno</li>
  <li>Dos</li>
  <li>Tres</li>
</ul>

Uno
Dos
Tres

Listas enumeradas

[11]:

%%html
<ol>
  <li>Uno</li>
  <li>Dos</li>
  <li>Tres</li>
 </ol>

Uno
Dos
Tres

[12]:

%%html
<ol>
<li> <p>Uno </p>  <p>texto texto texto</p>  </li>
<li> <p>Dos </p>  <p>texto texto texto</p>  </li>
<li> <p>Tres</p>  <p>texto texto texto</p>  </li>
</ol>

Uno

texto texto texto
Dos

texto texto texto
Tres

texto texto texto

[13]:

%%html
<ol start="50">
  <li>Uno</li>
  <li>Dos</li>
  <li>Tres</li>
 </ol>

Uno
Dos
Tres

Listas tipo diccionario

[14]:

%%html
<dl>
  <dt>Coffee</dt>
  <dd>Black hot drink</dd>
  <dt>Milk</dt>
  <dd>White cold drink</dd>
</dl>

Coffee: Black hot drink
Milk: White cold drink

Vínculos

[15]:

%%html
<p>Este es un vínculo a <a href="http://www.google.com">GOOGLE</a>.</p>

Este es un vínculo a GOOGLE.

[16]:

%%html
<footer>
  <p>Autor: Juan David Velasquez</p>
  <p>Correo: <a href="mailto:jdvelasq@unal.edu.co">
  jdvelasq@unal.edu.co</a>.</p>
</footer>

[17]:

%%html
<nav>
  <a href="/html/">HTML</a> |
  <a href="/css/">CSS</a> |
  <a href="/js/">JavaScript</a> |
  <a href="/jquery/">jQuery</a>
</nav>

[18]:

%%html
<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>

The WHO was founded in 1948.

Vínculos tipo referencia

[19]:

%%html
<p>Estos son vinculos referenciados a <a href="https://www.continuum.io" title="Anaconda">Continuum Analytics</a> y <a href="https://www.python.org " title="Python"> Python Software Fundation</a>. <p>

Estos son vinculos referenciados a Continuum Analytics y Python Software Fundation.

[20]:

%%html
Written by <a href="mailto:webmaster@example.com">Jon Doe</a>.

Written by Jon Doe.

Imágenes

[21]:

%%html
<img src="assets/img_avatar1.png" alt="assets/img_avatar1.png" title="Titulo" />

[22]:

%%html
<img src="assets//img_avatar1.png" alt="alt face" height="150" width="150">

Código fuente y salida de programas

[23]:

%%html
<p>Se pueden crear bloques de código:</p>

<code>
    # agregar cuatro espacios al principio de linea
    for (i = 1; i < 5; i++)
    {
        printf('%d', i)
    }
</code>

O se puede colocar código en linea <code>cat out.1 out.2</code>.

<samp>Sample output from a computer program</samp>

Se pueden crear bloques de código:


    # agregar cuatro espacios al principio de linea
    for (i = 1; i < 5; i++)
    {
        printf('%d', i)
    }

O se puede colocar código en linea cat out.1 out.2. Sample output from a computer program

Tablas

[24]:

%%html
<table>
<tr>
  <th>January <dialog open>This is an open dialog window</dialog></th>
  <th>February</th>
  <th>March</th>
</tr>
<tr>
  <td>31</td>
  <td>28</td>
  <td>31</td>
</tr>
</table>

January This is an open dialog window	February	March
31	28	31

[25]:

%%html
<table>
  <colgroup>
    <col span="2" style="background-color:red">
    <col style="background-color:yellow">
  </colgroup>
  <tr>
    <th>ISBN</th>
    <th>Title</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>3476896</td>
    <td>My first HTML</td>
    <td>$53</td>
  </tr>
</table>

ISBN	Title	Price
3476896	My first HTML	$53

[26]:

%%html
<table>
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

Monthly savings
Month	Savings
January	$100

Lineas horizontales

[27]:

%%html
<hr style="height:1px">

<hr style="height:1px;background-color:red">

<hr style="height:3px;border:3px dotted;color:black;background-color:red;">

Alineación del Texto

[28]:

%%html
<center> Texto centrado </center>

Texto centrado

[29]:

%%html
<left>Texto a la izquierda</left>

Texto a la izquierda

[30]:

%%html
<div align="right">Texto alineado a la derecha.</div>

Texto alineado a la derecha.

Líneas en blanco

[31]:

%%html
<br>
<br>
texto
<br>
<br>

texto

Tamaño del texto

[32]:

%%html
<small><small><small> texto pequeño</small></small></small>

texto pequeño

[33]:

%%html
<big> BIG </big>

BIG

[34]:

%%html
<p> Texto<sub>Texto</sub>   Texto<sup>Texto</sup>  </p>

Texto_Texto Texto^Texto

Comentarios

[35]:

%%html
<!-- comentario -->

Efectos sobre el texto

[36]:

%%html
texto <del>XXX</del>

texto ~~XXX~~

[37]:

%%html
texto <ins>XXX</ins>
texto <u>XXX</u>

texto XXX texto XXX

[38]:

%%html
Texto <mark> resaltado </mark>

Texto resaltado

[39]:

%%html
<p>Texto de color <span style="color:blue">azul</span>.</p>

Texto de color azul.

[40]:

%%html
<p>Texto en <i>italica</i>.</p>

Texto en italica.

Cajas

[41]:

%%html
<div style="width:200px;height:100px;padding:10px;border:1px dotted black;">
Caja con borde punteado
</div>

Caja con borde punteado

[42]:

%%html
<div style="width:200px;height:100px;padding:10px;border:1px dashed yellowgreen;">
Caja con borde punteado verde
</div>

Caja con borde punteado verde

[43]:

%%html
<div style="width:200px;height:100px;padding:10px;border:10px double yellowgreen;">
Caja con borde doble
</div>

Caja con borde doble

[44]:

%%html
<h1 style="border:2px solid Tomato;">Hola mundo cruel</h1>
<h1 style="border:2px solid DodgerBlue;">Hola mundo cruel</h1>
<h1 style="border:2px solid Violet;">Hola mundo cruel</h1>

Hola mundo cruel

Teclado

[45]:

%%html
<kbd>Keyboard input</kbd>

Keyboard input

Controles

[46]:

%%html
<button>Click me</button>

[47]:

%%html
<select>
  <optgroup label="Swedish Cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </optgroup>
  <optgroup label="German Cars">
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </optgroup>
</select>

[48]:

%%html
<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

[49]:

%%html
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
  <input type="range" id="a" value="50">100
  +<input type="number" id="b" value="50">
  =<output name="x" for="a b"></output>
</form>

[50]:

%%html
<progress value="22" max="100"></progress>

[51]:

%%html
<details>
  <summary>Copyright 2016-2018.</summary>
  <p> - by Juan David Velásquez. All Rights Reserved.</p>
  <p>All content and graphics on this web site are the property of the author.</p>
</details>

All content and graphics on this web site are the property of the author.

Símbolos

Haga click Aquí.