Writing HTML | Acerca de | FAQ | Alumnos | Tags | Lecciones | anterior | siguiente |

22. M·s acerca de Im·genes y Listas

Elimine esas odiosas cajitas que rodean los gr·ficos y:

Objetivos

• Crear gr·ficos hiperlink sin borde alrededor.
• Escribir el HTML para una lista sin ordenar que uses diferentes estilos de marcadores.
• Escribir una lista ordenada cuyos marcadores sean letras capitales, versales o grandes o pequeÒos numerales romanos.
• Modificar una lista ordenada para comenzar a contar desde cualquier valor positivo.

LecciÛn

Sin Bordes Hipertexto o Imagenes Hiperlinkadas

funciona exactamente igual que cualqueir link hipertexto.

No obstante, la cajita esa a veces distrae, especialmente si tenemos una imagen sin bordes rectangulares. El usuario puede ver con facilidad si una imagen hace de link o no simplemente colocando el ratÛn encima de ella (usualmente el cursor cambia a una "mano" cuando est· sobre un link activo).

Se puede "quitar" la cajita aÒadiendo un atributo a la etiqueta <img...>:

  <a href="bigpict.gif"><img src="lilpict.gif" border=0>

Tenemos dos sitios en nuestra Web de Volcanes donde tenemos im·genes hiperlinkadas. øRecuerda dÛnde?

El primero es en el archivo usa.htm, donde una pequeÒa imagen de un sismÛmetro enlazaba con una imagen mayor del mismo. El segundo es un botÛn con una flecha en la p·gina msh.htm que nos llevaba de vuelta a la lecciÛn.

1. Abra ambos dos archivos, usa.htm y msh.htm, en su editor de textos.
2. Localice dÛnde tenemos las im·genes que enlazan a otros sitios.
3. Modifique cada etiqueta <img src=....> que sea hiperlink con el atributo border=0. Por ejemplo, el archivo msh.htm se deberÌa quedar como:

     <a href="usa.htm"> 
     <img src="../pictures/left.gif" alt="** " border=0> 
     Volver a la <i>Web de Volcanes</i></a>

4. Salve y Cargue los archivos usa.htm y msh.htm en su web Browser.
5. Si las im·genes oequeÒas han perdido sus bordes y a™n conectan con los sitios primarios entonces ha hecho bien el trabajo.

Marcadores para Listas Sin Ordenar

 <ul type=xxxx>

• type=circle
• type=square
• type=disc [valor por defecto para la lista m·s primaria]

<ul type=square>
<li>este es el elemento 1
<li>este es el elemento 2
<li>este es el elemento 3
<li type=circle>
     °Eh! øQuÈ me dice de Èstos?
<li>este es otro elemento
<li>y otro m·s
<li type=disc>
     °Eh! øY quÈ me dice de este otro?
</ul>

Note que el tipo especificado en la etiqueta <li type=xxxx> se usa por todas las siguientes etiquetas <li> hasta que se elige otro tipo de marcador.

Ahora cambiaremos el estilo de los marcadores de la lista que us·bamos en nuestra p·gina de We will now change the bullet list style used in our Proyectos de InvestigaciÛn (archivo proj.htm).

1. Abra su archivo proj.htm en el editor de textos.
2. La primera lÌnea del archivo es una Lista Ordenada <ol>...</ol> pero queremos cambiarla a una lista sin ordenar con marcadores de tipo circle. Edite el HTML de esta primera lista de modo que quede:

   
     <ul type=circle>
     <li>Tipo de volc·n
     <li>LocalizaciÛn Geogr·fica
     <li>Nombre, distancia y poblaciÛn de la ciudad m·s prÛxima
     <li>Datos de las m·s recientes y destructivas erupciones
     <li>Otros eventos asociados con las erupciones recientes
       (terremotos, inundaciones, corrimientos de tierras, etc)
     </ul>

3. Salve y Cargue el archivo en el web Browser. Compare su p·gina con este ejemplo de cÛmo deberÌa verse en este momento.

Estilos y Valores para Listas Ordenadas

Ar·bigos	May™sculas	Min™sculas	Romanos Grandes	Romanos PequeÒos
<ol type=1>	<ol type=A>	<ol type=a>	<ol type=I>	<ol type=i>
°Soy el primero! °Soy el segundo! °Soy el tercero! °Soy el cuarto! °Soy el quinto!	°Soy el primero! °Soy el segundo! °Soy el tercero! °Soy el cuarto! °Soy el quinto!	°Soy el primero! °Soy el segundo! °Soy el tercero! °Soy el cuarto! °Soy el quinto!	°Soy el primero! °Soy el segundo! °Soy el tercero! °Soy el cuarto! °Soy el quinto!	°Soy el primero! °Soy el segundo! °Soy el tercero! °Soy el cuarto! °Soy el quinto!

TambiÈn tenemos un ejemplo del uso de listas ordenadas dentro de listas ordenadas para crear esquemas; con el atributo type podemos hacer p·ginas con formato est·ndar:

1. El Queso en la prehistoria
   1. ¡frica
      1. El Tri·ngulo Afar
      2. Costa Este
   2. Asia
   3. Europa
      1. Francia
         1. Pinturas rupestres mostraban la elaboraciÛn del queso
         2. Rituales f™nebres inferidos de remanentes de quesos
      2. Islas Brit·nicas
   4. NorteamÈrica
2. El Queso en la Edad Media
   1. El Longhorn del Rey Arturo
   2. Queso amargo de las Cruzadas
3. El Queso en la Era Espacial

Y finalmente podemos cambiar la secuencia de numeraciÛn dentro de una lista aÒadiendo un atributo value=z a la etiqueta <li>. Mire este ejemplo:

HTML	CÛmo Resulta
<ol type=A start=5><i> Leyes Importantes del Queso</i> <li>Acta de CuraciÛn del Queso de 1905 <li>Reglamento de Contenido de Leche de 1923 <p> <li value=12>Tarifas del Queso de ImportaciÛn de 1942 <li>CÛdigo de Frecura del Queso de 1942 <p> <li value=1>Acta de ValidaciÛn de Quesos de 1789	Leyes Importantes del Queso Acta de CuraciÛn del Queso de 1905 Reglamento de Contenido de Leche de 1923 Tarifas del Queso de ImportaciÛn de 1942 CÛdigo de Frecura del Queso de 1942 Acta de ValidaciÛn de Quesos de 1789

Puede que no le resulta muy claro (°especialmente en este ejemplo tan tonto!) cuando deba usar estas etiquetas. Simplemente tenga en mente estas reglas como herramientas potenciales cuando diseÒe p·ginas web. Se lo demostraremos otra vez en nuestra p·gina de Proyectos de InvestigaciÛn (archivo proj.htm). Si recuerda, en nuestras lecciones sobre tablas dividÌamos una lista de referencias sin ordenar en una lista a doble columna. Cambiemos esto a una lista ordenada y usemos el atributo type para listarlas usando letras min™sculas. Ya que tenemos realmente dos listas individuales veamos si sabe porquÈ hay que usar el atributo start.

1. Abra su archivo proj.htm en su editor de textos.
2. Mire la tabla que habÌamos creado en la secciÛn Referencias. Cambie tanto la etiqueta <ul> como la </ul> a <ol type=a> y </ol>.
3. Ahora tenemos 5 elementos en la primera lista asÌ que la segunda debe comenzar con el n™mero 6. Modifique la etiqueta <ol> para que quede como:

     <ol type=a start=6>

4. Salve y Actualice el archivo en su web Browser. Compare su p·gina con este ejemplo de cÛmo deberÌa verse en este momento. La primera columna debe listar los elementos de la "a" a la "e", y la segunda dela "f" a la "k".

Compruebe Su Trabajo

RevisiÛn

1. øCÛmo evita la cajita que rodea un gr·fico que enlaza con otro elemento del Web?
2. øCÛmo cambiarÌa los marcadores de una lista sin ordenar?
3. øTiene que usar los mismos marcadores para toda la lista? Si no es asÌ, øcÛmo se cambi·n a la mitad de la lista?
4. øCÛmo se crea una lista cuyos marcadores sean numerales romanos?

Pr·ctica Independiente

<ol>...</ol>

A ContinuaciÛn....

IR A.... | Õndice de Lecciones | anterior: "Usando Tablas" | siguiente: "Im·genes Clickeables" |

URL: