Usuario:Migue1 ange1/ejemplos

Archivos de ejemplo

El siguiente es el código en html de la plantilla, debe copiarse el texto entre HTML y CSS y guardarse con extención .html, despues el texto entre CSS y FIN CSS y guardarlo con el nombre 1.css

para ver el cambio solo es necesario que se cambie el 0 en la línea que dice @import url("0.css") por un 1 quedando así: @import url("1.css")

El CSS es del sitio de wikipedia con cambios en los H (encabezados)

(el navegador debe sopotar CSS)

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head>

 <meta http-equiv="content-type"
content="text/html; charset=ISO-8859-1">
 <title>plantilla</title>
 <style type="text/css">
 <!--@import url("0.css");
   /*/*/
   a.new, #quickbar a.new { color: #CC2200; }
   #quickbar { position: absolute; top: 4px; left: 4px; border-right: 1px solid gray; }
   #article { margin-left: 152px; margin-right: 4px; }
   /* */
 //-->
 </style>

</head> <body> <table border="0" id="toc">

 <tbody>
   <tr>
     <td align="center"><b>Tabla de contenidos</b>
     <script type="text/javascript">showTocToggle("mostrar","esconder")</script></td>
   </tr>
   <tr id="tocinside">
     <td>
     <div style="margin-bottom: 0px;"><a class="internal"
href="#Idioma_1">1 Idioma 1</a><br>
     </div>
     <div style="margin-left: 2em;"> <a class="internal"
href="#Etimolog%EDa">1.1 Etimología</a><br>
     <a class="internal" href="#Definiciones">1.2 Definiciones</a><br>
     <div style="margin-left: 2em;"> <a class="internal"
href="#1._Adjetivo">1.2.1 1. Adjetivo</a><br>
     <div style="margin-left: 2em;"> <a class="internal"
href="#Sin%F3nimos">1.2.1.1 Sinónimos</a><br>
     <a class="internal" href="#Ant%F3nimos">1.2.1.2 Antónimos</a><br>
     </div>
     <a class="internal" href="#2._Gram%E1tica">1.2.2 2.

Gramática</a><br>

     </div>
     <a class="internal" href="#Compuestos">1.3 Compuestos</a><br>
     <div style="margin-left: 2em;"> <a class="internal"
href="#3._%7E_compuesto_1">1.3.1 3. ~

compuesto 1</a><br>

     <a class="internal" href="#4._%7E_compuesto_2">1.3.2 4. ~

compuesto 2</a><br>

     </div>
     <a class="internal" href="#Ver_tambi%E9n">1.4 Ver también</a><br>
     <div style="margin-left: 2em;"> <a class="internal"
href="#Enlaces_externos">1.4.1 Enlaces

externos</a><br>

     </div>
     </div>
     <div style="margin-bottom: 0px;"> <a class="internal"
href="#Idioma_2">2 Idioma 2</a><br>
     </div>
     <div style="margin-left: 2em;"> <a class="internal"
href="#Etimolog%EDa_2">2.1 Etimología</a><br>
     <a class="internal" href="#Definiciones_2">2.2 Definiciones</a><br>
     <div style="margin-left: 2em;"> <a class="internal"
href="#5._Definici%F3n_1">2.2.1 5.

Definición 1</a><br>

     <a class="internal" href="#6._Definici%F3n_2">2.2.2 6.

Definición 2</a><br>

     </div>
     </div>
     <div style="margin-bottom: 0px;"> <a class="internal"
href="#Traducciones">3 Traducciones</a><br>
     </div>
     <div style="margin-left: 2em;"> <a class="internal"
href="#Idioma_1_-_Definici%F3n_1_%28trad.%29">3.1

Idioma 1 - Definición 1 (trad.)</a><br>

     <a class="internal" href="#Idioma_1_-_%7E_compuesto_2_%28trad.%29">3.2

Idioma 1 - ~ compuesto 2 (trad.)</a><br>

     <a class="internal" href="#Idioma_2_-_Definici%F3n_1_%28trad.%29">3.3

Idioma 2 - Definición 1 (trad.)</a><br>

     </div>
     </td>
   </tr>
 </tbody>

</table> <h2><a name="Idioma_1">Idioma 1</a></h2> <p> </p> <h3><a name="Etimología">Etimología</a></h3> Texto de la etimología <h3><a name="Definiciones">Definiciones</a></h3> <p> </p> <h4><a name="1._Adjetivo">1. Adjetivo</a></h4> <dl>

 <dd><i><a href="/w/wiki.phtml?title=Adjetivo&action=edit" class="new"
title="Adjetivo">Adj.</a></i> Texto de la definición 1 <i><a
href="#Idioma_1_-_Definici%F3n_1_%28trad.%29" class="internal" title="">trad.</a></i>
 </dd>

</dl> <h5><a name="Sinónimos">Sinónimos</a></h5> <h5><a name="Antónimos">Antónimos</a></h5> <h4><a name="2._Gramática">2. Gramática</a></h4> <dl>

 <dd><i><a href="/w/wiki.phtml?title=Gram%E1tica&action=edit"
class="new" title="Gramática">Gram.</a></i> Texto de la

definición 2 </dd> </dl> <p> </p> <h3><a name="Compuestos">Compuestos</a></h3> <p> </p> <h4><a name="3._~_compuesto_1">3. ~ compuesto 1</a></h4> <dl>

 <dd><i><a href="/w/wiki.phtml?title=Adjetivo&action=edit" class="new"
title="Adjetivo">Adj.</a></i> Texto de la definición compuesta

1 Idioma 1 </dd> </dl> <h4><a name="4._~_compuesto_2">4. ~ compuesto 2</a></h4> <dl>

 <dd><i><a href="/w/wiki.phtml?title=Gram%E1tica&action=edit"
class="new" title="Gramática">Gram.</a></i> Texto de la

definición compuesta 2 (parece que en la nueva versión de la wikimedia ya se acepta la tilde ->) <i>[[#Idioma 1 - ~ compuesto 2 (trad.)|trad.]]</i> </dd> </dl> <p> </p> <h3><a name="Ver_también">Ver también</a></h3> <ul>

 <li><a href="/w/wiki.phtml?title=Enlace&action=edit" class="new"
title="Enlace">Enlace</a> interno 1 </li>
 <li>Enlace <a href="/w/wiki.phtml?title=Interno&action=edit"
class="new" title="Interno">interno</a> 2 </li>

</ul> <h4><a name="Enlaces_externos">Enlaces externos</a></h4> <ul>

 <li><a href="http://es.wikipedia.org" class="external"
title="http://es.wikipedia.org">Wikipedia español</a> </li>

</ul> <p> </p> <hr> <h2><a name="Idioma_2">Idioma 2</a></h2> <p> </p> <h3><a name="Etimología_2">Etimología</a></h3> Texto de la etimología <h3><a name="Definiciones_2">Definiciones</a></h3> <p> </p> <h4><a name="5._Definición_1">5. Definición 1</a></h4> <dl>

 <dd>Texto de la definición 1 <i><a
href="#Idioma_2_-_Definici%F3n_1_%28trad.%29" class="internal" title="">trad.</a></i>
 </dd>

</dl> <p> </p> <h4><a name="6._Definición_2">6. Definición 2</a></h4> <dl>

 <dd>Texto de la definición 2 </dd>

</dl> <hr> <h2><a name="Traducciones">Traducciones</a></h2> <h3><a name="Idioma_1_-_Definición_1_(trad.)">Idioma 1 - Definición 1 (trad.)</a></h3> <a href="/w/wiki.phtml?title=Idioma_n&action=edit" class="new"

title="Idioma n">idioma n</a><br>

.<br> .<br> .<br> <a href="/w/wiki.phtml?title=Idioma_m&action=edit" class="new"

title="Idioma m">idioma m</a>

<h3><a name="Idioma_1_-_~_compuesto_2_(trad.)">Idioma 1 - ~ compuesto 2 (trad.)</a></h3> <a href="/w/wiki.phtml?title=Idioma_n&action=edit" class="new"

title="Idioma n">idioma n</a><br>

.<br> .<br> .<br> <a href="/w/wiki.phtml?title=Idioma_m&action=edit" class="new"

title="Idioma m">idioma m</a><br>

<h3><a name="Idioma_2_-_Definición_1_(trad.)">Idioma 2 - Definición 1 (trad.)</a></h3> <a href="/w/wiki.phtml?title=Idioma_n&action=edit" class="new"

title="Idioma n">idioma n</a><br>

.<br> .<br> .<br> <a href="/w/wiki.phtml?title=Idioma_m&action=edit" class="new"

title="Idioma m">idioma m</a>

<p><br clear="all"> </p> </body> </html>

CSS

@import url("common.css");

  1. article { padding: 4px; }
  2. content { margin: 0; padding: 0; }
  3. footer { padding: 4px;font-size:95%;clear: both; }
  4. pagestats { font-size: 9pt; }
  5. powersearch {
 background: #DDEEFF; border-style: solid; border-width: 1px; padding: 2px;

}

  1. quickbar { width: 140px; padding: 4px; visibility: visible; z-index:99;font-size:95%;}
  2. topbar { padding: 4px;font-size:95%; }


/* Table of contents */ .tocindent { margin-left: 2em; } .tocline { margin-bottom: 0px; } .toctoggle, .editsection { font-size: smaller; }

/* ... */

  1. toolbar { padding:0px; }
  2. infobox { background:#eeeeff;color:black;;}
  3. editform { margin-top:1px; }

.bodytext { } a.interwiki, a.external { color: #3366BB; } a.printable { text-decoration: underline; } a.stub { color:#772233; text-decoration:none; } body { margin: 0px; padding: 4px; color: black; } form.inline { display: inline; } textarea { overflow: auto; }


h1.pagetitle { padding-top: 0; margin-top: 0; padding-bottom: 0; margin-bottom: 0; font-size:150%; } h2 { font-size:18; } h2, h3, h4, h5, h6 { margin-bottom: 0;} h3 { font-size:14; color:darkslateblue;text-decoration: underline; } h4 { margin-left: 40; } h5 { margin-left: 80; font-size:14; color:darkslateblue;text-decoration: underline; } h6 { font-size: 95%; } hr.sep { color:gray;height:1px;background-color:gray;} p.subpages { font-size:small;} p.subtitle { padding-top: 0; margin-top: 0;} p.catlinks { font-size:small; margin-top:0; text-align:right;} td { empty-cells:show; } td.bottom { border-top: 1px solid gray; } td.top { border-bottom: 1px solid gray; }


FIN CSS

Comentarios a partir de aqui por favor

editar