The first commented line is your dabblet’s title

dabblet.css

/**
 * The first commented line is your dabblet’s title
 */

background: #f06;
background: linear-gradient(45deg, #f06, yellow);
min-height: 100%;

dabblet.html

<!--
A continuación les comparto ejemplos de cómo usar 
el redimensionador de imágenes SLIR, motor que tenemos
instalado en ARTCOM.

	Para mayores informes consulten:
	https://github.com/lencioni/SLIR#using

-->

<!-- 
El siguiente código es para que esta página haga de cuenta 
que está en el servidor de artcom 
-->
<base href="http://artcom.um.edu.mx/">

<!-- Las siguientes imágenes hacen uso del elemento anterior: -->
<img src="i/w320-h106-c320x106/expo-artcom/p13/upload/b7a492c42030c22b733f69bf28bfefff.JPG">
<img src="i/w100-h100-c1x1/expo-artcom/p13/upload/b7a492c42030c22b733f69bf28bfefff.JPG">
<img src="i/w320-h320-c1x1/expo-artcom/p13/upload/b7a492c42030c22b733f69bf28bfefff.JPG">
<img src="i/w100-h320-c10x32/expo-artcom/p13/upload/b7a492c42030c22b733f69bf28bfefff.JPG">

<hr>

<!-- Las siguientes imágenes hacen uso del elemento anterior: -->
<img src="http://artcom.um.edu.mx/i/w320-h106-c320x106/expo-artcom/p13/upload/b7a492c42030c22b733f69bf28bfefff.JPG">
<img src="http://artcom.um.edu.mx/i/w100-h100-c1x1/expo-artcom/p13/upload/b7a492c42030c22b733f69bf28bfefff.JPG">
<img src="http://artcom.um.edu.mx/i/w320-h320-c1x1/expo-artcom/p13/upload/b7a492c42030c22b733f69bf28bfefff.JPG">
<img src="http://artcom.um.edu.mx/i/w100-h320-c10x32/expo-artcom/p13/upload/b7a492c42030c22b733f69bf28bfefff.JPG">

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split-vertical","fontsize":"90","seethrough":"","prefixfree":"1","page":"html"}