22. Más acerca de Imágenes y Listas
Elimine esas odiosas cajitas
que rodean los gráficos y:
|
- y
- cambie el
- estilo de
- numeración
- y valor
- de los elementos de una lista
|
Objetivos
Después de esta lección será capaz de:
- 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
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.
- Abra ambos dos archivos, usa.htm y msh.htm, en su editor de textos.
- Localice dónde tenemos las imágenes que enlazan a otros sitios.
- 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>
- Salve y Cargue los archivos usa.htm y msh.htm en su web Browser.
- 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:
- type=circle
- type=square
- type=disc [valor por defecto para la lista más primaria]
¡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).
- Abra su archivo proj.htm en el editor de textos.
- 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>
- 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> |
- ¡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:
- El Queso en la prehistoria
- ¡frica
- El Triángulo Afar
- Costa Este
- Asia
- Europa
- Francia
- Pinturas rupestres mostraban la elaboración del queso
- Rituales fúnebres inferidos de remanentes de quesos
- Islas Británicas
- Norteamérica
- El Queso en la Edad Media
- El Longhorn del Rey Arturo
- Queso amargo de las Cruzadas
- 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> |
- ¡Soy el undécimo!
- ¡Soy el duodécimo!
- ¡Soy el decimotercero!
- ¡Soy el decimocuarto!!
- ¡Soy el decimoquinto!
|
- ¡Soy el undécimo!
- ¡Soy el duodécimo!
- ¡Soy el decimotercero!
- ¡Soy el decimocuarto!!
- ¡Soy el decimoquinto!
|
- ¡Soy el undécimo!
- ¡Soy el duodécimo!
- ¡Soy el decimotercero!
- ¡Soy el decimocuarto!!
- ¡Soy el decimoquinto!
|
- ¡Soy el undécimo!
- ¡Soy el duodécimo!
- ¡Soy el decimotercero!
- ¡Soy el decimocuarto!!
- ¡Soy el decimoquinto!
|
- ¡Soy el undécimo!
- ¡Soy el duodécimo!
- ¡Soy el decimotercero!
- ¡Soy el decimocuarto!!
- ¡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
- 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.
- Abra su archivo proj.htm en su editor de textos.
- 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>.
- 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>
- 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:
- ¿Cómo evita la cajita que rodea un gráfico que enlaza con otro elemento del Web?
- ¿Cómo cambiaría los marcadores de una lista sin ordenar?
- ¿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?
- ¿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...
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: