Etiquetas

5.1.
Listas no ordenadas
Las listas no ordenadas son las ms sencillas y las que ms se
utilizan. Una lista no ordenada es un conjunto de elementos
relacionados entre s pero para los que no se indica un orden o
secuencia determinados. La etiqueta <ul>encierra todos los
elementos de la lista y la etiqueta <li> cada uno de sus elementos.
Etiqueta
<ul>
Atributos
comunes
bsicos, internacionalizacin y eventos
Atributos
propios
Tipo de
elemento
Bloque
Descripcin
Se emplea para definir listas no ordenadas
Etiqueta
<li>
Atributos
comunes
Etiqueta
<ul>
Atributos
comunes
Atributos
propios
Tipo de
elemento
Bloque
Descripcin
Se emplea para definir los elementos de las listas (ordenadas y no ordenadas)
El siguiente cdigo HTML muestra un ejemplo sencillo de lista no

ordenada:
<html>
<head><title>Ejemplo de etiqueta UL</title></head>
<body>
<h1>Men</h1>
<ul>
<li>Inicio</li>
<li>Noticias</li>
<li>Artculos</li>
<li>Contacto</li>
</ul>
</body>
</html>
Figura 5.1 Ejemplo de uso de la etiqueta ul

El navegador por defecto muestra los elementos de la lista
tabulados y con una pequea vieta formada por un crculo negro.
Como ya se sabe, el aspecto con el que se muestran los elementos
de las listas se puede modificar mediante las hojas de estilos CSS.
5.2. Listas ordenadas

Las listas ordenadas son casi idnticas a las listas no ordenadas,
salvo que en este caso los elementos relacionados se muestran
siguiendo un orden determinado. Cuando se crea por ejemplo una
lista con las instrucciones de un producto, es importante el orden en
el que se realiza cada paso. Cuando se muestra un ndice o tabla de
contenidos en un libro, es importante el orden de cada elemento del
ndice.
En todos estos casos, la lista ms adecuada es la lista ordenada,

que se define mediante la etiqueta <ol>. Los elementos de la lista
se definen mediante la etiqueta <li>, la misma que se utiliza en las
listas no ordenadas.
Etiqueta
<ol>
Atributos
comunes
Atributos
propios
Tipo de
elemento
Bloque
Descripcin
Se emplea para definir listas ordenadas
El siguiente cdigo HTML muestra un ejemplo sencillo de lista

ordenada:
<html>
<head><title>Ejemplo de etiqueta OL</title></head>
<body>
<h1>Instrucciones</h1>
<ol>
<li>Enchufar correctamente</li>
<li>Comprobar conexiones</li>
<li>Encender el aparato</li>
</ol>
</body>
</html>
Figura 5.2 Ejemplo de uso de la etiqueta ol

El navegador muestra la lista de forma muy parecida a las listas no
ordenadas, salvo que en este caso no se emplean vietas grficas
en los elementos, sino que se numeran de forma consecutiva. El
tipo de numeracin empleada tambin se puede modificar aplicando
hojas de estilos CSS a los elementos de la lis
IMGENES
Una de las primeras cosas que debemos aprender del
HTML es la etiqueta <img> que funciona para colocar
imgenes dentro de una pgina web.
Para poner una imgen utilizamos el siguiente cdigo:

<img src="imagenHTML.jpg">
Donde "imagenHTML.jpg" es la imagen que vamos a
colocar. Deber estar ubicada en el mismo directorio. Si
queremos colocar una imagen con HTML en una pgina
que no est colocada dentro del mismo directorio,
podemos usar una ruta absoluta:
<img src="folder/imagenHTML.jpg"
La etiqueta <img> tiene varias propiedas como son:
border, width, height, alt
Ejemplo con propiedades de imgen en HTML
<img src="imagenHTML.jpg" border="0" width="10"
height="10">
El ancho y alto (width, height) se coloca en pixeles y
deben corresponder al tamao original de la imagen
para que no se distorcione.
Los formatos soportados por el explorer son jpg, gif y
png.
Ya hemos visto que un enlace en el que no se indique la direccin

de la pgina o de la parte de la web a la que queremos enviar a las
visitas es como un pjaro sin plumas. Vamos a ver cmo se indica al
navegador a dnde queremos enviar a las visitas al pulsar sobre

cada enlace de la pgina.
La propiedad que se usa para indicar esto, es href y tras ella y
entre comillas dobles es donde colocamos la ruta y el nombre del
archivo de la pgina de destino, de este modo:
<a href="ruta-del-enlace/nombre-del-archivodestino.extension">Texto del enlace</a>
Las explicaciones acerca de las rutas que comentamos en la

seccin de las imgenes y que puedes encontrar en la definicin
de Rutas de Archivos de la Enciclopedia CCTW es igualmente vlida
en este caso.
Teniendo claro entonces el concepto de ruta, ya sabes que tienes
que poner tanto la ruta como el nombre del archivo relacionado
con ese documento enlazado dentro de las dobles comillas
del href. De nuevo y para evitar posibles problemas al memorizar y
escribir la ruta correcta, procura nombrar siempre a los archivos y
sus extensiones con letras minsculas. De ese modo no tendrs que
recordar si a aqul archivo le pusiste o no letras maysculas. En
caso de enlazar con archivos que estn fuera de tu web (otras
pginas que no son la tuya) tendrs que mirar su nombre excto,
no sea que en ese sitio s usen alguna letra mayscula, claro.

Etiquetas

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Etiquetas

Caricato da

Copyright:

Formati disponibili

5.1.

bsicos, internacionalizacin y eventos

Se emplea para definir listas no ordenadas

bsicos, internacionalizacin y eventos

bsicos, internacionalizacin y eventos

Se emplea para definir los elementos de las listas (ordenadas y no ordenadas)

El siguiente cdigo HTML muestra un ejemplo sencillo de lista no

Figura 5.1 Ejemplo de uso de la etiqueta ul

5.2. Listas ordenadas

En todos estos casos, la lista ms adecuada es la lista ordenada,

bsicos, internacionalizacin y eventos

Se emplea para definir listas ordenadas

El siguiente cdigo HTML muestra un ejemplo sencillo de lista

Figura 5.2 Ejemplo de uso de la etiqueta ol

Para poner una imgen utilizamos el siguiente cdigo:

Ya hemos visto que un enlace en el que no se indique la direccin

navegador a dnde queremos enviar a las visitas al pulsar sobre

Las explicaciones acerca de las rutas que comentamos en la

Potrebbero piacerti anche