encabezamientos Listas de de materia y listas de autoridades
Listas
59
<listas>
Transcript of Listas
<listas>
Elemento de lista <li>
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.
Cada uno de los elementos de una lista ha de insertarse entre
las etiquetas <li> y </li>
Por ejemplo, para insertar en una lista los siguientes elementos:
•!item1! !•!item2! !•!item3
Habría que escribir: !
<li>item1</li> <li>item2</li> <li>item3</li>
LISTAS NO ORDENADAS
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>.
<!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>!
LISTAS ORDENADAS
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.
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.
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.
<!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>!<ol>!<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>!</ol>!</body>!</html>!
ANIDAMIENTO O USO SIMULTÁNEO (COMBINACIÓN) DE VARIOS TIPOS DE LISTAS
Si lo deseamos, podemos combinar unos tipos de listas con otros. Por ejemplo, tener listas ordenadas dentro de cada elemento de una lista desordenada.
<!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>!
Etiqueta <hr>
Para separar un texto de otro o un párrafo de otro podemos utilizar una línea horizontal de un tamaño o un grosor determinado por nosotros. Este separador lo escribimos con la etiqueta <hr>. Al contrario que muchas etiquetas HTML, ésta no necesita ser cerrada como veremos a continuación.
<html>!<head>!<title>Ejemplo del uso de separadores </
title> </head>!<body>!<p>A continuación insertamos un
separador.</p>!<hr size="8px" color="black" />!<p>A continuación seguimos escribiendo
debajo del separador.</p>!<hr size="2px" color="black" />!</body>!</html>!
CREACIÓN DE COMENTARIOS EN HTML!
!Para crear un comentario no se usa una etiqueta, aunque es una estructura parecida. En primer lugar ponemos una cadena que indica el comienzo del comentario: <!--, esto es, el símbolo menor que, seguido del símbolo fin de exclamación y de dos guiones, todo ello sin espacios entre ellos. Todo el texto que le siga será considerado como comentario. El comentario se considerará finalizado cuando insertemos la cadena de finalización: --> , formada por dos guiones y el símbolo mayor que. La estructura de un comentario es por tanto: !
<!-- Esto es un comentario -->
Formularios
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.).
La etiqueta <form>
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.
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.
Sintaxis<form action="URL" method="valor">!...!</form>
La etiqueta <input>
Nos define el registro donde el usuario puede ingresar los datos. Los usuarios interaccionan con los formularios a través de las llamados controles.
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)
El atributo type especifica el tipo de control a crear.
Sintaxis<form>!<input type="control" atributo="valor">!</form>
El control "text"
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>!
El control "radio"
Se usa cuando queremos que el usuario elija una sola opción de entre una serie de posibilidades.
<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>!
El control "checkbox"
Permite al usuario elegir varias opciones entre todas las posibilidades
<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>!
El control "password"
Funciona igual que text, pero el texto introducido se presenta mediante una serie de puntitos. Es utilizado generalmente para ingresar contraseñas.
<form action="verificacion.php" method="post"> Nombre: <input type="text" name="nombre"> Password: <input type="password" name="pass"> </form>
El control "submit" y el control "reset"
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.
<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>!
el valor de la propiedad value define el texto dentro del botón. !
nota
El control "file"
<form action="archivo.php" method="post"> Ingrese la foto: <input type="file" name="foto"> </form>
El control "hidden"
<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>!
El control "image"
El control image nos permite utilizar una imagen personalizada como botón de un formulario.
<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>!
Las etiquetas <select> y <option>
<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>!
La etiqueta <select> es usada para crear un menú desplegable. Cada opción ofrecida por el menú se representa con la etiqueta <option>
La etiqueta <textarea>
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.
<form action="texto.php" method="post"> <textarea name="eltexto" rows="5" cols="30"> Aquí podemos ingresar un texto introductorio si lo deseamos. </textarea> </form>
