cssAudio - ActiveCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <ul>
  <li>Presentación del curso
    <ul>
      <li>Temario</li>
      <li>Objetivos</li>
      <li>Requisitos</li>
      <li>Material</li>
    </ul>
  </li>
  <li>Introducción a HTML + CSS
    <ul>
      <li>Historia
        <ul>
          <li>Tim Berners Lee: Creador del HTML</li>
          <li>Html desde 1970</li>
          <li>Fundado el W3C</li>
        </ul>
      </li>
      <li>Orígenes</li>
      <li>Usos</li>
      <li>Ejemplos BOOTSTRAP</li>
      <li>Alcances</li>
    </ul>
  </li>
  <li>Dreamweaver CS5
    <ul>
      <li>Uso de Dreamweaver
        <ul>
          <li>Interfase</li>
          <li>Menus</li>
          <li>Distribucion recomendada</li>
        </ul>
      </li>
      <li>Herramientas
        <ul>
          <li>Herramientas de uso frecuente</li>
          <li>Escritura de codigo asistida</li>
          <li>Formato de codigo e indentado</li>
          <li>Paneles de lectura y herramientas de revisión </li>
        </ul>
      </li>
      <li>Ventanas y sub herramientas
        <ul>
          <li>Herramientas de Insertar (Explicar más comunes)</li>
          <li>CSS y definicion de styles</li>
          <li>Estilos CSS (Shift F11)</li>
          <li>Panel de archivos</li>
          <li>Definicion de sitio para conexion con servidor</li>
          <li>Estructura de directorios</li>
        </ul>
      </li>
      <li>Desarrollo de velocidad de lectura de codigo. Metodo probado por varias generaciones que garantiza mejora de lectura de código.</li>
    </ul>
  </li>
  <li>Etiquetas HTML
    <ul>
      <li>Introduccion a formato de etiquetas HTML
        <ul>
          <li>Apertura &ldquo;&lt; &gt;&rdquo; Cierre &ldquo;&lt;/ &gt;&rdquo;</li>
          <li>Análisis de Etiquetas – Tags</li>
        </ul>
      </li>
      <li>Formato: &lt;nombre atributo1=&rdquo;etc&rdquo; atributo2=&rdquo;etc&rdquo;&gt;contenido&lt;/nombre&gt;</li>
      <li>&lt;html&gt;
        <ul>
          <li>Versión y estandares online</li>
          <li>style=&rdquo;&quot;</li>
        </ul>
      </li>
      <li>&lt;head&gt;
        <ul>
          <li>&lt;meta /&gt;
            <ul>
              <li>http-equiv=&rdquo;&quot;
                <ul>
                  <li>content-type=
                    <ul>
                      <li>text/html;</li>
                      <li>charset=utf-8;</li>
                      <li>charset=iso-8859-1;</li>
                    </ul>
                  </li>
                  <li>expires</li>
                  <li>refresh</li>
                </ul>
              </li>
              <li>name=&rdquo;&quot;
                <ul>
                  <li>keywords</li>
                </ul>
              </li>
              <li>content=&rdquo;&quot;</li>
              <li>description</li>
            </ul>
          </li>
          <li>&lt;link /&gt;
            <ul>
              <li>href=&rdquo;&quot;</li>
              <li>rel=&rdquo;&quot;
                <ul>
                  <li>stylesheet</li>
                  <li>icon</li>
                </ul>
              </li>
              <li>type=&rdquo;&quot;
                <ul>
                  <li>text/css</li>
                  <li>x-icon</li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </li>
      <li>&lt;body&gt;
        <ul>
          <li>&lt;p&gt; </li>
          <li>&lt;strong&gt; &amp; &lt;B&gt;</li>
          <li>&lt;em&gt; &amp; &lt;I&gt;</li>
          <li>&lt;a&gt;
            <ul>
              <li>href=&rdquo;&quot;</li>
              <li>target=&rdquo;&quot;</li>
              <li>title=&rdquo;&quot;</li>
              <li>rel=&rdquo;&quot;</li>
              <li>Anclas</li>
            </ul>
          </li>
          <li>&lt;img&gt;
            <ul>
              <li>src=&rdquo;&quot;</li>
              <li>width=&rdquo;∞&rdquo;</li>
              <li>height=&rdquo;∞&rdquo;</li>
              <li>alt=&rdquo;&quot;</li>
            </ul>
          </li>
          <li>&lt;table&gt;
            <ul>
              <li>cellpadding=&rdquo;∞&rdquo;</li>
              <li>cellspacing=&rdquo;∞&rdquo;</li>
              <li>border=&rdquo;∞&rdquo;</li>
              <li>width=&rdquo;∞&rdquo;</li>
              <li>height=&rdquo;∞&rdquo;</li>
              <li>&lt;td&gt;</li>
              <li>&lt;tr&gt;</li>
              <li>&lt;th&gt;</li>
            </ul>
          </li>
          <li>&lt;div&gt;</li>
          <li>&lt;span&gt;</li>
          <li>&lt;ul&gt;
            <ul>
              <li>li</li>
            </ul>
          </li>
          <li>&lt;ol&gt;
            <ul>
              <li>style=&rdquo;list-style-type:___;&rdquo;</li>
            </ul>
          </li>
          <li>&lt;HTML5&gt;
            <ul>
              <li>Novedades del nuevo estandar</li>
              <li>Audio</li>
              <li>Video</li>
              <li>Canvas</li>
              <li>Form validation</li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
  <li>Otras variaciones de HTML
    <ul>
      <li>XHTML</li>
      <li>XML</li>
    </ul>
  </li>
</ul>
<ul>
  <li>CSS3
    <ul>
      <li>Introduccion al formato CSS
        <ul>
          <li>Formato de escritura de css: usos de simbolos &ldquo;.&rdquo;, &ldquo;#&rdquo;y llaves &ldquo;{ }&rdquo;.</li>
          <li>CLASES</li>
          <li>SELECTORS</li>
          <li>TAG DEFINITIONS</li>
        </ul>
      </li>
      <li>Aplicacion de CSS a HTML
        <ul>
          <li>CSS RESET</li>
          <li>Style Sheet externa</li>
          <li>Herencia
            <ul>
              <li>Listados CSS &lt;ul&gt;, &lt;ol&gt;</li>
              <li>Tablas CSS &lt;table&gt;&lt;td&gt;&lt;tr</li>
              <li>a:hover, a:link, a:active, a:visited</li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>
<ul>
  <li>Diseño Web
    <ul>
      <li>Software para imagenes y diseño: Fireworks + Photoshop (como apoyo)
        <ul>
          <li>Fireworks CS5 – Herramienta Principal
            <ul>
              <li>Herramientas básicas Fireworks</li>
              <li>Uso de estilos</li>
              <li>Capas y multi diseño por documento</li>
              <li>Formatos de compresion y tipos de archivos</li>
              <li>Resoluciónes: 300 VS. 72dpi</li>
              <li>Importacion desde .PSD, .AI, .EPS</li>
              <li>Uso de vectores</li>
              <li>Administracion de archivos originales</li>
              <li>Transparencia flat PNG</li>
              <li>Animaciones Gif</li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
  <li>Formatos y Layouts
    <ul>
      <li>Columnas</li>
      <li>Fluido [Responsive]</li>
      <li>Fijo</li>
      <li>980 Grid system y personalización</li>
    </ul>
  </li>
  <li>Imágenes para web
    <ul>
      <li>Medidas pixelares</li>
      <li>Resoucion y color RGB</li>
      <li>Formatos de imagen y compresión</li>
      <li>Exclusividad de formatos .jpg, gif, png</li>
    </ul>
  </li>
  <li>CSS para diseño – Manejo avanzado de Fondos
    <ul>
      <li>Control de fondos</li>
      <li>Menus de múltiple estado
        <ul>
          <li>Drop down menus</li>
          <li>CSS tooltips</li>
        </ul>
      </li>
      <li>Imágen maestra
        <ul>
          <li>Diseño web ULTRA optimizado</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>
</li>
<li>
  Introducción a Programación Web
  <ul>
    <li>Javascript Basicos
      <ul>
        <li>Introducción a Javascript</li>
        <li>Formato y uso</li>
      </ul>
    </li>
</li>
<li>
  JQuery
  <ul>
    <li>Uso de libreria JQuery
      <ul>
        <li>Introduccion y usos recomendados</li>
        <li>Soporte y requerimientos</li>
        <li>Formato y Parametros</li>
        <li>Ejemplos de Jquery Basico</li>
      </ul>
    </li>
</li>
<li>JQuery para todo
  <ul>
    <li>Efectos y transciciones (fade, resize, slide)</li>
    <li>Galeria jQuery Nivo Slider</li>
    <li>Galería jQuery Colorbox [Modals]</li>
  </ul>
</li>
<li>Dando vida a tu sito
  <ul>
    <li>Fusión de plataformas: HTML +CSS3 + JQUERY</li>
    <li>Presentación de otras tecnologías para extender PHP, AJAX, JSON, CMS&rsquo;s.</li>
    <li>Alcances y proyectos experimentales</li>
  </ul>
</li>
</ul>
</ul>
            
          
!
            
              body {
  background-color: #CCC;
}
li {
  font-family: Arial, Helvetica, sans-serif;
}


            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console