Ejercicio 25:Modifica el archivo anterior de forma que aparezca una

Ejercicio 25:Modifica el archivo anterior de forma que aparezca
una marquesina que mueva la imagen caraf.jpg.
3.Listas
Las listas se utilizan para organizar una serie de elementos y
equivalen a las viñetas de los procesadores de texto. Hay tres tipos
principales:
a)Desordenadas:Son listas no numeradas, de forma que delante de cada
elemento aparece un punto:
<ul>
<li> elemento1</li>
<li>elemento2</li>
.
...
</ul>
a)Ordenadas:Son listas numeradas, de forma que delante de cada
elemento aparece un número:
<ol>
<li> elemento1</li>
<li>elemento2</li>
.
...
</ol>
a)De definiciones:Se utilizan para hacer glosarios, es decir una lista de
términos y sus definiciones:
<dl>
<dt>Elemento1</dt>
<dd> Definición1 </dd>
<dt> Elemento2 </dt>
<dd>Definición2</dd>
...
</dl>
Ejercicio 26:Utilizando listas de definiciones y el archivo anterior,
define los principales elementos del hardware.
Ejercicio 27:Modifica el archivo anterior para incluir dentro de las
memorias las definiciones de RAM y ROM.
Ejercicio 28:Utilizando el archivo anterior construye la siguiente
lista anidada:
1.ESO
• 1º ESO
• 2º ESO
• 3º ESO
• 4º ESO
2.Bachillerato
• 1º bachillerato
• 2º bachillerato
Ejercicio 29:Utilizando el archivo anterior construye la siguiente
lista anidada, en la que hay los tres tipos de listas:
• Hardware
1. CPU
Unidad Central de procesos
2. UII
Unidades de Intercambio de Información
3. Memorias
Chip que guardan información
• Software
1. Básico
2. Aplicaciones
Ejercicio 30:Utilizando el archivo anterior construye dos listas que
utilicen viñetas distintas de las vistas. Investiga con google para
averiguar su código. Las listas pueden referirse a las materias del
presente curso.
4.Formularios
Para aumentar la interacción entre el usuario y el autor de la
página se introducen formularios que permiten conocer por ejemplo
datos sobre el usuario. Los formularios trabajan de dos formas, bien
mandando los datos directamente a una dirección de correo
electrónico ó bien enviando los datos a un servidor en el que se
encuentra alojado un programa que trata la información .Nosotros
enviaremos los datos a una dirección de correo electrónico por ser la
más sencilla .La etiqueta que hay que escribir para enviar un
formulario es:
<form action=”mailto:dirección_de_correo_electrónico”
method=”post” enctype=”text/plain”>
Elementos del formulario....
</form>
Esta etiqueta indica a qué dirección se enviará la información
pero por sí sóla no muestra datos por pantalla. Lo que aparecerá por
pantalla serán los elementos del formulario, de los cuales destacamos
los más importantes a continuación:
a)Cajas de texto: Son espacios que me permiten escribir datos. Junto
a esta caja se suele indicar al usuario el dato que debe introducir. La
etiqueta que visualiza por pantalla la caja de texto es:
< input type=”text” name=”nombre_del_dato” value=”por
defecto”>
Atributo name:Es un parámetro interno ,que distingue una caja de
otra y sirve para guardar el dato de dicha caja. Cuando un usuario
escriba sus datos y los envíe por correo electrónico aparecerá,
name=Dato que haya introducido el usuario, en el correo indicado en
la etiqueta form. Es obligatorio.
Atributo value:Es un parámetro opcional. Se escribe para que no
aparezcan las cajas sin información al cargar la página.Su valor
aparece por tanto escrito dentro de la caja.
Atributo size=”número” :Indica el tamaño de la caja de texto.
Atributo maxlength=”número” :Indica el número máximo de
caracteres que se pueden escribir dentro de la caja.
Si se cambia el tipo de type=”text” a type=”password” los
caracteres escritos en la caja se escriben con asteriscos, como si se
escribiera una contraseña.
Ejercicio 31: Crea un archivo llamado form01.html que tenga un
formulario que envíe los datos al correo [email protected]
(contraseña i1ai1a) y que incluya dos cajas de texto una que pida
nombre , primer y segundo apellido,edad y DNI.
Ejercicio 32:Modifica el archivo anterior de forma que el tamaño de
la primera caja de texto sea 10 y la segunda y tercera 25, el de la
cuarta 4y el de la quinta 10.El número máximo de caracteres para
escribir sea de 8,20,20,3 y 9 respectivamente .Añade una caja que
pida una contraseña y escriba los caracteres con asteriscos.Guárdalo
como form02.html
b)Cajas de comentario:Son cajas similares a las anteriores , pero por
pantalla se visualizan un mayor número de caracteres .Se suelen
utilizar cuando queremos que el usuario se exprese de forma más
extensa .Su etiqueta es:
<textarea name=”nombre_del_dato” rows=”número filas”
cols=”número columnas”>
Texto que aparecerá escrito dentro de la caja
</textarea>
Atributo name: realiza la misma función que en las cajas de texto.
Rows: Filas visibles.
Cols: Columnas visibles.
Ejercicio 33: Modifica el archivo anterior y añade una caja de
comentario con 6 filas y 40 columnas ,que pida al usuario su opinión
sobre la misma .Guárdalo como form03.html
c)Listas desplegables :Se utilizan cuando queremos que el lector
escoja entre varias opciones que se le presenten. Su etiqueta es:
<select name=”nombre_del_dato”>
<option> opción1</option>
<option>opción 2</option>
<option>opción 3.... </option>
</select>
Ejercicio 34:Abre el archivo anterior y añade una lista desplegable
que pregunte sobre tu país de nacimiento y que dé a elegir entre 10
países europeos .Guardar como form04.html
d)Botón de confirmación:Si queremos que el usuario confirme una
opción se utiliza la siguiente etiqueta que introduce la caja indicada:
<input type=”checkbox” name=”nombre_del_dato”> texto
que se afirma ó se niega.
El mensaje que aparecerá en el correo se igualará con ON si se
ha hecho clic sobre el botón y se omitirá si no se ha marcado.
e)Botones de radio:Se utilizan cuando queremos que el usuario elija
una única opción entre varias, presentándolas todas a la vez .La
etiqueta será:
<input type=”radio” name=”Nombre_del_dato”
value=”Valor_del_dato”>
Tendremos que escribir para todos los botones de la misma
opción el mismo name y distinto value. Los atributos name y value
serán obligatorios en estos botones .El mensaje que llegará al correo
será name igual al value que se seleccione.
Si queremos que aparezca alguna de las opciones marcada
inicialmente, habrá que añadir dentro de la etiqueta Checked.
Ejercicio 20:Añade al archivo anterior la opción para que el usuario
elija un sistema operativo utilizando una serie de botones de radio,de
forma que se den a elegir tres sistemas operativos :MS-DOS,
WINDOWS y LINUX. Guárdalo como form05.html
Ejercicio 21:Añade al archivo anterior una serie de botones de
confirmación con los textos que se indican:
Estudiante de ESO
Residente en Madrid.
Guárdalo con el nombre form06.html
f)Botones de envío y de borrado de datos:
El botón de envío de datos es necesario en todo formulario para
que los datos lleguen al correo. Debemos escribirlo al finalizar el
mismo:
<Input type=”submit”
value=”Texto_que_aparece_en_el_botón”>
El botón de borrado de datos, elimina todos los datos
introducidos:
<Input type=”reset”
value=”Texto_que_aparece_en_el_botón”>
Ejercicio 22:Añade al ejercicio 21 los botones de envío y borrado de
datos. Guarda los cambios