3. 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.
4. Cada uno de los
elementos de una lista
ha de insertarse entre
las etiquetas <li> y </li>
5. 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>
7. 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>.
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>!
10. 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
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 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.
12. 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.
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>!
<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>!
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>!
18. 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.).
20. 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.
21. 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.
24. Nos define el registro donde el
usuario puede ingresar los datos.
Los usuarios interaccionan con
los formularios a través de las
llamados controles.
25. 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)
29. 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>!
37. Funciona igual que text, pero
el texto introducido se
presenta mediante una serie
de puntitos. Es utilizado
generalmente para ingresar
contraseñas.
40. 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.
54. 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.