Descargado 16 veces
Más contenido relacionado
Listas
- 1.
- 2.
- 3. En la mayoríade 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.
- 4. Cada uno delos elementos de una lista ha de insertarse entre las etiquetas <li> y </li>
- 5. Por ejemplo, parainsertar en una lista los siguientes elementos: •!item1! !•!item2! !•!item3 Habría que escribir: ! <li>item1</li> <li>item2</li> <li>item3</li>
- 6.
- 7. Las listas noordenadas 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>.
- 8. <!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>!
- 9.
- 10. Si lo quepretendemos 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 etiqueta que para las listas no ordenadas: <li>. Pero al ser listas ordenadas los símbolos por defecto serán números y éstos se irán generando automáticamente por orden, conforme escribamos nuevos elementos de la lista.
- 11. En las listasordenadas 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.
- 12. Por ejemplo, siqueremos 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.
- 13. <!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>!
- 14. ANIDAMIENTO O USO SIMULTÁNEO (COMBINACIÓN)DE VARIOS TIPOS DE LISTAS
- 15. Si lo deseamos,podemos combinar unos tipos de listas con otros. Por ejemplo, tener listas ordenadas dentro de cada elemento de una lista desordenada.
- 16. <!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>!
- 17.
- 18. Para separar untexto 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.
- 19. <html>! <head>! <title>Ejemplo del usode 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>!
- 20. CREACIÓN DE COMENTARIOSEN 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 -->
- 21.
- 22. Los formularios sonusados 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.).
- 23.
- 24. 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.
- 25. También contamos conel atributo method que nos define el método por el cual se enviarán los datos del usuario al servidor.
- 26.
- 27.
- 28. Nos define elregistro donde el usuario puede ingresar los datos. Los usuarios interaccionan con los formularios a través de las llamados controles.
- 29. 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)
- 30. El atributo typeespecifica el tipo de control a crear.
- 31.
- 32.
- 33. Crea un controlque 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>!
- 34.
- 35. Se usa cuandoqueremos que el usuario elija una sola opción de entre una serie de posibilidades.
- 36. <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>!
- 37.
- 38. Permite al usuarioelegir varias opciones entre todas las posibilidades
- 39. <form action="hobbie.php" method="get">! ¿Pasatiempos?! <inputtype="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>!
- 40.
- 41. Funciona igual quetext, pero el texto introducido se presenta mediante una serie de puntitos. Es utilizado generalmente para ingresar contraseñas.
- 42. <form action="verificacion.php" method="post"> Nombre: <input type="text" name="nombre"> Password:<input type="password" name="pass"> </form>
- 43. El control "submit" yel control "reset"
- 44. El control submites 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.
- 45. <form action="datos_personales.php" method="post">! Nombre: <inputtype="text" name="nombre">! Contraseña: <input type="password" name="secreto">! <input type="submit" value="Enviar">! <input type="reset" value="Borrar">! </form>!
- 46. el valor dela propiedad value define el texto dentro del botón. ! nota
- 47.
- 48. <form action="archivo.php" method="post"> Ingrese lafoto: <input type="file" name="foto"> </form>
- 49.
- 50. <form action="oculto.php" method="post"> Nombre: <inputtype="text" name="nombre"> Contraseña: <input type="password" name="contra">! <input type="hidden" value="cookie">! </form>!
- 51.
- 52. El control imagenos permite utilizar una imagen personalizada como botón de un formulario.
- 53. <form action="archivo.php" method="post">! Nombre: <inputtype="text" name="nombre">! Contraseña: <input type="password" name="contra">! <input type="image" src="/enviar.jpg">! </form>!
- 54.
- 55. <form action="continentes.php" method="get">! <selectname="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>!
- 56. La etiqueta <select>es usada para crear un menú desplegable. Cada opción ofrecida por el menú se representa con la etiqueta <option>
- 57.
- 58. Se usa paracrear 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.
- 59. <form action="texto.php" method="post"> <textarea name="eltexto" rows="5"cols="30"> Aquí podemos ingresar un texto introductorio si lo deseamos. </textarea> </form>