Listas
Transcript of Listas
![Page 1: Listas](https://reader031.fdocuments.net/reader031/viewer/2022020218/55b75767bb61eb090e8b4818/html5/thumbnails/1.jpg)
<listas>
![Page 2: Listas](https://reader031.fdocuments.net/reader031/viewer/2022020218/55b75767bb61eb090e8b4818/html5/thumbnails/2.jpg)
Elemento de lista <li>
![Page 3: Listas](https://reader031.fdocuments.net/reader031/viewer/2022020218/55b75767bb61eb090e8b4818/html5/thumbnails/3.jpg)
En la mayoría de los documentos HTML se usan listas para organizar el texto. El lenguaje HTML incorpora distintas formas de mostrar listas, por ejemplo con viñetas sencillas o también con letras o números. Además, para que las páginas tengan más vistosidad, se pueden colocar imágenes delante de cada párrafo.
![Page 4: Listas](https://reader031.fdocuments.net/reader031/viewer/2022020218/55b75767bb61eb090e8b4818/html5/thumbnails/4.jpg)
Cada uno de los elementos de una lista ha de insertarse entre
las etiquetas <li> y </li>
![Page 5: Listas](https://reader031.fdocuments.net/reader031/viewer/2022020218/55b75767bb61eb090e8b4818/html5/thumbnails/5.jpg)
Por ejemplo, para insertar en una lista los siguientes elementos:
•!item3! !•!item2! !•!item3
Habría que escribir: !
<li>item1</li> <li>item2</li> <li>item3</li>
![Page 6: Listas](https://reader031.fdocuments.net/reader031/viewer/2022020218/55b75767bb61eb090e8b4818/html5/thumbnails/6.jpg)
LISTAS NO ORDENADAS
![Page 7: Listas](https://reader031.fdocuments.net/reader031/viewer/2022020218/55b75767bb61eb090e8b4818/html5/thumbnails/7.jpg)
Las listas no ordenadas son aquellas que se encuentran entre las etiquetas <ul> y </ul> (ul indica unordered list), etiqueta de apertura y cierre respectivamente. Si queremos añadir un nuevo punto, lo tendremos que hacer dentro de las etiquetas <li> y </li>.
![Page 8: Listas](https://reader031.fdocuments.net/reader031/viewer/2022020218/55b75767bb61eb090e8b4818/html5/thumbnails/8.jpg)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">!<html>! <head> ! <meta charset="utf-8"> ! <title>Ejemplo del uso de listas</title>! </head>! <body>!<ul>!<li >item1</li>!<li >item2</li>!<li >item3</li>!</ul>!</body>!</html>!
![Page 9: Listas](https://reader031.fdocuments.net/reader031/viewer/2022020218/55b75767bb61eb090e8b4818/html5/thumbnails/9.jpg)
LISTAS ORDENADAS
![Page 10: Listas](https://reader031.fdocuments.net/reader031/viewer/2022020218/55b75767bb61eb090e8b4818/html5/thumbnails/10.jpg)
Si lo que pretendemos es definir una lista ordenada, lo tendremos que hacer entre las etiquetas <ol> </ol> (ol indica ordered list). Además, cada elemento de la lista se escribirá con la misma et iqueta que para las l is tas no ordenadas: <li>. Pero al ser listas ordenadas los símbolos por defecto serán números y és tos se i rán generando automáticamente por orden, conforme escribamos nuevos elementos de la lista.
![Page 11: Listas](https://reader031.fdocuments.net/reader031/viewer/2022020218/55b75767bb61eb090e8b4818/html5/thumbnails/11.jpg)
En las listas ordenadas podemos hacer que el primer punto comience con el número que nosotros queramos. Lo conseguiremos gracias al atributo “value”. Los siguientes puntos que escribamos se generarán automáticamente por orden, partiendo de ese número.
![Page 12: Listas](https://reader031.fdocuments.net/reader031/viewer/2022020218/55b75767bb61eb090e8b4818/html5/thumbnails/12.jpg)
Por ejemplo, si queremos que nuestra lista empiece por el número 20, podemos indicarlo en el código. Escribe este código en tu editor de texto y comprueba el resultado.
![Page 13: Listas](https://reader031.fdocuments.net/reader031/viewer/2022020218/55b75767bb61eb090e8b4818/html5/thumbnails/13.jpg)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">!<html>! <head> ! <meta charset="utf-8"> ! <title>Ejemplo del uso de listas</title>! </head>! <body>!<ul>!<li> value="20">Este será el número 20.</li>!<li>Este será el 21.</li>!<li>Este será el 22. Y así sucesivamente.</li>!</ul>!</body>!</html>!
![Page 14: Listas](https://reader031.fdocuments.net/reader031/viewer/2022020218/55b75767bb61eb090e8b4818/html5/thumbnails/14.jpg)
ANIDAMIENTO O USO SIMULTÁNEO (COMBINACIÓN) DE VARIOS TIPOS DE LISTAS
![Page 15: Listas](https://reader031.fdocuments.net/reader031/viewer/2022020218/55b75767bb61eb090e8b4818/html5/thumbnails/15.jpg)
Si lo deseamos, podemos combinar unos tipos de listas con otros. Por ejemplo, tener listas ordenadas dentro de cada elemento de una lista desordenada.
![Page 16: Listas](https://reader031.fdocuments.net/reader031/viewer/2022020218/55b75767bb61eb090e8b4818/html5/thumbnails/16.jpg)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">!<html> <head> <meta charset="utf-8"> <title>Ejemplo del uso de listas</title> </head>! <body>!<ul>!<li>Lenguajes de programación estructurada </li>!<ol>!<li> Lenguaje C </li>!<li> Lenguaje Pascal </li>!<li> Lenguaje Fortran </li>!</ol>!!<hr style="height:8px; color: black; background-color: black;" />!!<li>Lenguajes de programación orientada a objetos </li>!<ol>!<li>Lenguaje Java </li>
<li>Lenguaje PHP </li>!</ol>!</ul>!</body>!</html>!
![Page 17: Listas](https://reader031.fdocuments.net/reader031/viewer/2022020218/55b75767bb61eb090e8b4818/html5/thumbnails/17.jpg)
Formularios
![Page 18: Listas](https://reader031.fdocuments.net/reader031/viewer/2022020218/55b75767bb61eb090e8b4818/html5/thumbnails/18.jpg)
Los formularios son usados para que el usuario ingrese datos. !
Esos datos son enviados a un documento, que se encuentra en un servidor, para que los procese (por ej., a un servidor web, a un servidor de email, etc.).
![Page 19: Listas](https://reader031.fdocuments.net/reader031/viewer/2022020218/55b75767bb61eb090e8b4818/html5/thumbnails/19.jpg)
La etiqueta <form>
![Page 20: Listas](https://reader031.fdocuments.net/reader031/viewer/2022020218/55b75767bb61eb090e8b4818/html5/thumbnails/20.jpg)
La etiqueta <form> se utiliza para definir un formulario. El atributo action es obligatorio y nos indica el documento que procesará los datos del formulario enviado.
![Page 21: Listas](https://reader031.fdocuments.net/reader031/viewer/2022020218/55b75767bb61eb090e8b4818/html5/thumbnails/21.jpg)
También contamos con el atributo method que nos define
el método por el cual se enviarán los datos del usuario al servidor.
![Page 22: Listas](https://reader031.fdocuments.net/reader031/viewer/2022020218/55b75767bb61eb090e8b4818/html5/thumbnails/22.jpg)
Sintaxis<form action="URL" method="valor">!...!</form>
![Page 23: Listas](https://reader031.fdocuments.net/reader031/viewer/2022020218/55b75767bb61eb090e8b4818/html5/thumbnails/23.jpg)
La etiqueta <input>
![Page 24: Listas](https://reader031.fdocuments.net/reader031/viewer/2022020218/55b75767bb61eb090e8b4818/html5/thumbnails/24.jpg)
Nos define el registro donde el usuario puede ingresar los datos. Los usuarios interaccionan con los formularios a través de las llamados controles.
![Page 25: Listas](https://reader031.fdocuments.net/reader031/viewer/2022020218/55b75767bb61eb090e8b4818/html5/thumbnails/25.jpg)
Tipos de controles:! Botones (buttons) Casillas de verificación (checkboxes) Radiobotones (radio buttons)! Menúes (menus) Entrada de texto (text input)! Selección de ficheros (file select) Controles ocultos (hidden controls) Controles tipo objeto (object controls)
![Page 26: Listas](https://reader031.fdocuments.net/reader031/viewer/2022020218/55b75767bb61eb090e8b4818/html5/thumbnails/26.jpg)
El atributo type especifica el tipo de control a crear.
![Page 27: Listas](https://reader031.fdocuments.net/reader031/viewer/2022020218/55b75767bb61eb090e8b4818/html5/thumbnails/27.jpg)
Sintaxis</form>!<input type="control" atributo="valor">!</form>
![Page 28: Listas](https://reader031.fdocuments.net/reader031/viewer/2022020218/55b75767bb61eb090e8b4818/html5/thumbnails/28.jpg)
El control "text"
![Page 29: Listas](https://reader031.fdocuments.net/reader031/viewer/2022020218/55b75767bb61eb090e8b4818/html5/thumbnails/29.jpg)
Crea un control que nos permite ingresar un texto en una línea. <form action="datos.php"
method="get">!Nombre: <input type="text" name="nombre">!Apellido: <input type="text" name="apellido">!</form>!
![Page 30: Listas](https://reader031.fdocuments.net/reader031/viewer/2022020218/55b75767bb61eb090e8b4818/html5/thumbnails/30.jpg)
El control "radio"
![Page 31: Listas](https://reader031.fdocuments.net/reader031/viewer/2022020218/55b75767bb61eb090e8b4818/html5/thumbnails/31.jpg)
Se usa cuando queremos que el usuario elija una sola opción de entre una serie de posibilidades.
![Page 32: Listas](https://reader031.fdocuments.net/reader031/viewer/2022020218/55b75767bb61eb090e8b4818/html5/thumbnails/32.jpg)
<form action="edades.asp" method="post">!¿Edad? <input type="radio" name="edad" value="menor">menor de 17 <input type="radio" name="edad" value="adulto">entre 18 y 60 <input type="radio" name="edad" value="mayor">mayor de 61 </form>!
![Page 33: Listas](https://reader031.fdocuments.net/reader031/viewer/2022020218/55b75767bb61eb090e8b4818/html5/thumbnails/33.jpg)
El control "checkbox"
![Page 34: Listas](https://reader031.fdocuments.net/reader031/viewer/2022020218/55b75767bb61eb090e8b4818/html5/thumbnails/34.jpg)
Permite al usuario elegir varias opciones entre todas las posibilidades
![Page 35: Listas](https://reader031.fdocuments.net/reader031/viewer/2022020218/55b75767bb61eb090e8b4818/html5/thumbnails/35.jpg)
<form action="hobbie.php" method="get">!¿Pasatiempos?!<input type="checkbox" name="pasa" value="tv">TV!<input type="checkbox" name="pasa" value="libros">Libros!<input type="checkbox" name="pasa" value="musica">Música!<input type="checkbox" name="pasa" value="otros">Otros!</form>!
![Page 36: Listas](https://reader031.fdocuments.net/reader031/viewer/2022020218/55b75767bb61eb090e8b4818/html5/thumbnails/36.jpg)
El control "password"
![Page 37: Listas](https://reader031.fdocuments.net/reader031/viewer/2022020218/55b75767bb61eb090e8b4818/html5/thumbnails/37.jpg)
Funciona igual que text, pero el texto introducido se presenta mediante una serie de puntitos. Es utilizado generalmente para ingresar contraseñas.
![Page 38: Listas](https://reader031.fdocuments.net/reader031/viewer/2022020218/55b75767bb61eb090e8b4818/html5/thumbnails/38.jpg)
<form action="verificacion.php" method="post"> Nombre: <input type="text" name="nombre"> Password: <input type="password" name="pass"> </form>
![Page 39: Listas](https://reader031.fdocuments.net/reader031/viewer/2022020218/55b75767bb61eb090e8b4818/html5/thumbnails/39.jpg)
El control "submit" y el control "reset"
![Page 40: Listas](https://reader031.fdocuments.net/reader031/viewer/2022020218/55b75767bb61eb090e8b4818/html5/thumbnails/40.jpg)
El control submit es el botón de envío de datos del formulario y el control reset es el botón de reinicialización. Al ser pulsado reinicializa todos los controles a sus valores iniciales.
![Page 41: Listas](https://reader031.fdocuments.net/reader031/viewer/2022020218/55b75767bb61eb090e8b4818/html5/thumbnails/41.jpg)
<form action="datos_personales.php" method="post">!Nombre: <input type="text" name="nombre">!Contraseña: <input type="password" name="secreto">!<input type="submit" value="Enviar">!<input type="reset" value="Borrar">!</form>!
![Page 42: Listas](https://reader031.fdocuments.net/reader031/viewer/2022020218/55b75767bb61eb090e8b4818/html5/thumbnails/42.jpg)
el valor de la propiedad value define el texto dentro del botón. !
nota
![Page 43: Listas](https://reader031.fdocuments.net/reader031/viewer/2022020218/55b75767bb61eb090e8b4818/html5/thumbnails/43.jpg)
El control "file"
![Page 44: Listas](https://reader031.fdocuments.net/reader031/viewer/2022020218/55b75767bb61eb090e8b4818/html5/thumbnails/44.jpg)
<form action="archivo.php" method="post"> Ingrese la foto: <input type="file" name="foto"> </form>
![Page 45: Listas](https://reader031.fdocuments.net/reader031/viewer/2022020218/55b75767bb61eb090e8b4818/html5/thumbnails/45.jpg)
El control "hidden"
![Page 46: Listas](https://reader031.fdocuments.net/reader031/viewer/2022020218/55b75767bb61eb090e8b4818/html5/thumbnails/46.jpg)
<form action="oculto.php" method="post"> Nombre: <input type="text" name="nombre"> Contraseña: <input type="password" name="contra">!<input type="hidden" value="cookie">!</form>!
![Page 47: Listas](https://reader031.fdocuments.net/reader031/viewer/2022020218/55b75767bb61eb090e8b4818/html5/thumbnails/47.jpg)
El control "image"
![Page 48: Listas](https://reader031.fdocuments.net/reader031/viewer/2022020218/55b75767bb61eb090e8b4818/html5/thumbnails/48.jpg)
El control image nos permite utilizar una imagen personalizada como botón de un formulario.
![Page 49: Listas](https://reader031.fdocuments.net/reader031/viewer/2022020218/55b75767bb61eb090e8b4818/html5/thumbnails/49.jpg)
<form action="archivo.php" method="post">!Nombre: <input type="text" name="nombre">!Contraseña: <input type="password" name="contra">!<input type="image" src="/enviar.jpg">!</form>!
![Page 50: Listas](https://reader031.fdocuments.net/reader031/viewer/2022020218/55b75767bb61eb090e8b4818/html5/thumbnails/50.jpg)
Las etiquetas <select> y <option>
![Page 51: Listas](https://reader031.fdocuments.net/reader031/viewer/2022020218/55b75767bb61eb090e8b4818/html5/thumbnails/51.jpg)
<form action="continentes.php" method="get">!<select name="continente">!<option value="america">América</option>!<option value="asia">Asia</option>!<option value="europa">Europa</option>!<option value="oceania">Oceanía</option>!<option value="africa">Africa</option>!</select>!</form>!
![Page 52: Listas](https://reader031.fdocuments.net/reader031/viewer/2022020218/55b75767bb61eb090e8b4818/html5/thumbnails/52.jpg)
La etiqueta <select> es usada para crear un menú desplegable. Cada opción ofrecida por el menú se representa con la etiqueta <option>
![Page 53: Listas](https://reader031.fdocuments.net/reader031/viewer/2022020218/55b75767bb61eb090e8b4818/html5/thumbnails/53.jpg)
La etiqueta <textarea>
![Page 54: Listas](https://reader031.fdocuments.net/reader031/viewer/2022020218/55b75767bb61eb090e8b4818/html5/thumbnails/54.jpg)
Se usa para crear un control de entrada de texto multilínea. Los atributo rows y cols nos indican la cantidad de filas y columnas que tendrá el recuadro del área de texto.
![Page 55: Listas](https://reader031.fdocuments.net/reader031/viewer/2022020218/55b75767bb61eb090e8b4818/html5/thumbnails/55.jpg)
<form action="texto.php" method="post"> <textarea name="eltexto" rows="5" cols="30"> Aquí podemos ingresar un texto introductorio si lo deseamos. </textarea> </form>