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:
  • escoja
  • los
  • marcadores
  1. y
  2. cambie el
  3. estilo de
  4. numeración
  5. y valor
  6. de los elementos de una lista

Objetivos

Después de esta lección será capaz de:

Lección

NOTA: Si no tiene el documento de trabajo de la lección anterior, bájese una copia ahora. También puede echar un vistazo a la página de prueba para ver si su Browser soporta las etiquetas de esta lección.

Sin Bordes Hipertexto o Imagenes Hiperlinkadas

En la lección 8e aprendimos cómo hacer que una pequeña imagen actuase como un link a otra página web o a una copia mayor de la imagen. Vimos entonces que el Broser colocaba un borde alrededor del gráfico para identificarlo como link como el texto hiperlink normal:

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>
En este ejemplo la imagen lilpict.gif actúa como hiperlink a una imagen mayor bigpict.gif. El atributo border=0 carece de significación si la etiqueta <img..> no está dentro de una <a href=...</a>.

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

En la lección 6 creamos una lista ordenada con <ul>...</ul>. El web Browser automaticamente coloca un marcador en frente de cada elemento; y los marcadores (o topos) cambian si colocamos una lista dentro de otra lista. con algunos Browsers es posible elegir entre los marcadores añadiendo el atributo oportuno a la etiqueta <ul>:
 <ul type=xxxx>
donde xxxx puede ser: ¡E incluso más! Puede cambiar el tipo dentro de una lista colocando el tipo como atributo en la etiqueta <li>:
HTML Cómo Resulta
<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>
  • este es el elemento 1
  • este es el elemento 2
  • este es el elemento 3
  • ¡Eh! ¿Qué me dice de éstos?
  • este es otro elemento
  • y otro más
  • ¡Eh! ¿Y qué me dice de este otro?

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

Cuando creamos una lista ordenada <ol>...</ol> en la lección 6 vimos cómo el Browser automáticamente enumeraba los elementos, uno para cada etiqueta <li>. ¿Y que ocurre si alguna vez no queremos usar los numerales arábigos (1, 2, 3...)? Bueno, aquí tiene la respuesta; un atributo type=x dentro de las etiquetas <ol> y <li>:

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>
  1. ¡Soy el primero!
  2. ¡Soy el segundo!
  3. ¡Soy el tercero!
  4. ¡Soy el cuarto!
  5. ¡Soy el quinto!
  1. ¡Soy el primero!
  2. ¡Soy el segundo!
  3. ¡Soy el tercero!
  4. ¡Soy el cuarto!
  5. ¡Soy el quinto!
  1. ¡Soy el primero!
  2. ¡Soy el segundo!
  3. ¡Soy el tercero!
  4. ¡Soy el cuarto!
  5. ¡Soy el quinto!
  1. ¡Soy el primero!
  2. ¡Soy el segundo!
  3. ¡Soy el tercero!
  4. ¡Soy el cuarto!
  5. ¡Soy el quinto!
  1. ¡Soy el primero!
  2. ¡Soy el segundo!
  3. ¡Soy el tercero!
  4. ¡Soy el cuarto!
  5. ¡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
Otra cosa que podemos hacer con las listas ordenadas es que empiezen a contar desde un valor distinto de 1. Para ello añadiremos el atributo start=y a la etiqueta <ol>. Note que incluso si tenemos otros atributos type=x aún podemos especificar el valor inicial de "y" como "2,3,10,100" etc. Mire algunos ejemplos:
Arábigos Mayúsculas Minúsculas Romanos Grandes Romanos Pequeños
<ol type=1
start=11>
<ol type=A
start=11>
<ol type=a
start=11>
<ol type=I
start=11>
<ol type=i
start=11>
  1. ¡Soy el undécimo!
  2. ¡Soy el duodécimo!
  3. ¡Soy el decimotercero!
  4. ¡Soy el decimocuarto!!
  5. ¡Soy el decimoquinto!
  1. ¡Soy el undécimo!
  2. ¡Soy el duodécimo!
  3. ¡Soy el decimotercero!
  4. ¡Soy el decimocuarto!!
  5. ¡Soy el decimoquinto!
  1. ¡Soy el undécimo!
  2. ¡Soy el duodécimo!
  3. ¡Soy el decimotercero!
  4. ¡Soy el decimocuarto!!
  5. ¡Soy el decimoquinto!
  1. ¡Soy el undécimo!
  2. ¡Soy el duodécimo!
  3. ¡Soy el decimotercero!
  4. ¡Soy el decimocuarto!!
  5. ¡Soy el decimoquinto!
  1. ¡Soy el undécimo!
  2. ¡Soy el duodécimo!
  3. ¡Soy el decimotercero!
  4. ¡Soy el decimocuarto!!
  5. ¡Soy el decimoquinto!

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
  1. Acta de Curación del Queso de 1905
  2. Reglamento de Contenido de Leche de 1923

  3. Tarifas del Queso de Importación de 1942
  4. Código de Frecura del Queso de 1942

  5. 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

Compare su trabajo con este ejemplo de cómo debería aparecer el documento. Si el suyo resulta ser diferente del del ejemplo o los links no funcionan correctamente, revise cómo introdujo el texto en el editor de textos.

Revisión

Tópicos a recordar de esta lecció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

Experimente con diferentes marcas de lista y estilos de numeración en las listas de sus propias páginas. ¿Puede pensar en usar estos nuevos elementos de otras maneras? ¿Puede realizar un esquema complejo con el formato "estándar"? ¡Todas esas bonitas etiquetas
<ol>...</ol>
se complican tanto...!

A Continuación....

Click n' go! secciones hiperlinkadas dentro de un único gráfico...
IR A.... | Índice de Lecciones | anterior: "Usando Tablas" | siguiente: "Imágenes Clickeables" |


Writing HTML Lección 22: Más acerca de Imágenes y Listas
©1995, 1996 Maricopa Center for Learning and Instruction (MCLI)
Maricopa County Community College District, Arizona

El enlace con el MCLI es Alan Levine --}
Comentarios a levine@maricopa.edu
Traducido al español por agma@usa.net

URL: