Para incluir imágenes en un documento HTML empleamos el elemento img.
Se trata de
un
elemento vacío, es decir, no tiene contenido, pero sí atributos.
Las imágenes se especifican mediante el atributo src, en el cual se indica la URI
(relativa
o absoluta) de la imagen.
Además podemos utilizar estos atributos:
alt Indica un texto alternativo. Ese texto aparece cuando la imagen no se ha podido
cargar
(o durante la carga).
Es un texto también tenido en cuenta por los buscadores para
clasificar lo que muestra la imagen.
Si queremos que aparezca un texto descriptivo cuando pasemos el ratón por encima de
la imagen, debemos usar el atributo común title.
width Anchura de la imagen.
No es aconsejable usarlo para cambiar el tamaño de la imagen,
ya que si la ampliamos no se verá con buena calidad y si la reducimos estaremos
cargando una imagen grande para luego mostrarla en pequeño; sería más inteligente
reducirla primero con un editor de imágenes.
En cualquier caso es importante utilizar
este atributo para que el navegador sepa de antemano el tamaño de la imagen y así
se maquete la página correctamente.
height Altura de la imagen. Tiene las mismas características que el atributo
anterior. Si no
indicamos los dos atributos, anchura y altura, la imagen se redimensiona
proporcionalmente a su tamaño original.
Existen otros atributos obsoletos o desaprobados, que pueden emplearse con
versiones anteriores, por ejemplo:
hspace Espacio en píxeles que se deja a la derecha e izquierda de la imagen
vspace Espacio en píxeles que se deja por encima y por debajo de la imagen
align Puede tomar los valores left, right, middle, top y bottom. Especifica cómo se
alinea la imagen con respecto a los elementos que la rodean.
Podemos "desactivar" la
alineación del texto, empleando el elemento br:
<br clear="left|right|all"/>
border Grosor del borde alrededor de la imagen
Mapas de imagen
Se trata de una técnica que permite seleccionar partes de una imagen a fin de que
esas partes sean enlaces a otras páginas.
Se utiliza por ejemplo en mapas propiamente dichos, en los que el usuario
selecciona partes de la imagen y en imágenes donde hay elementos claramente
destacados.
Los mapas se basan en una imagen previamente colocada en la página web mediante la
etiqueta img. La etiqueta que indica que la imagen es un mapa es la etiqueta map.
En dicha etiqueta se debe utilizar el atributo name para poner nombre al mapa de
imágenes.
El contenido de name es un identificador (por lo que no puede tener espacios en
blanco ni nada que no sean letras del alfabeto inglés, números o guión bajo) que
pondrá un nombre único al mapa.
Para que el mapa se asocie a la imagen correspondiente, la etiqueta img de la
imagen debe utilizar el atributo usemap. En dicho atributo se hace referencia al
nombre usando el carácter # seguido del nombre del mapa.
La etiqueta map debe contener dentro tantos elementos area como secciones en el
mapa
queramos crear.
En cada elemento area rellenaremos dos atributos: shape (forma del área)
y coords (coordenadas del área). Las posibilidades de este elemento son:
area="rect". Permite seleccionar un rectángulo en la imagen. En este caso el
atributo
coords indicará cuatro coordenadas. Las dos primeras marcan la coordenada X y la
coordenada Y de la esquina superior izquierda de la imagen. Las dos últimas las
coordenadas X e Y de la esquina inferior derecha. Las coordenadas cuentan desde la
esquina superior izquierda (que serían las coordenadas 0,0).
area="circle". Selecciona una región circular en la imagen. El atributo coords
tendría tres coordenadas: las dos primeras son la coordenada X e Y del centro del
círculo y la tercera el radio del mismo.
area="poly". Permite indicar una región poligonal. El atributo coords permite
indicar las
coordenadas X e Y de cada punto del polígono. Al final se cerrará el polígono.
area="default". Hace lo mismo que la opción rect.
Además de estos atributos, en la etiqueta área deben rellenarse los atributos:
alt. Texto alternativo en el área de la imagen, al igual que en la etiqueta img.
href. Funciona como el atributo del mismo nombre en la etiqueta a: indica una URL
a la que se dirigirá el navegador cuando el usuario haga clic sobre la imagen.
La definición de una tabla comienza con la etiqueta table. Para cada fila se usa tr
y para cada columna se emplea td. En HTML 5 y XHTML a la etiqueta table sólo se le
permite el atributo border para indicar la anchura del borde de la tabla (además
de, por supuesto, los
atributos comunes a todos los elementos de HTML como id, lang, etc.)
Veamos un ejemplo:
<table border="1">
<tr>
<td></td>
<td>Lunes</td>
<td>Martes</td>
<td>Miércoles</td>
<td>Jueves</td>
<td>Viernes</td>
</tr>
<tr>
<td>10:30</td>
<td>Matemáticas</td>
<td>Geografía</td>
<td>Física</td>
<td>Dibujo</td>
<td>Matemáticas</td>
</tr>
<tr>
<td>11:30</td>
<td>Inglés</td>
<td>Lenguaje</td>
<td>Geografía</td>
<td>Química</td>
<td>Física</td>
</tr>
</table>
Atributos de la etiqueta table
Los atributos son:
border Indica la anchura en píxeles del borde de la tabla
cellpadding Especifica el espacio en píxeles entre el borde de la celda y el
contenido de la misma. En definitiva es el espacio interior de la celda.
cellspacing Espacio en píxeles existente entre celda y celda
width Anchura de la tabla. Puede ser en píxeles o en porcentaje sobre la anchura de
la página (usando el signo %)
bgcolor Para indicar el color de fondo de la tabla, fila o celda.
Celdas de cabecera
Es muy habitual que las tablas muestren datos y que estos posean celdas que sirvan
para
describirlos. Esas celdas se consideran de cabecera y se marcan con th.
<table border="1">
<tr>
<th> </th>
<th>Lunes</th>
<th>Martes</th>
<th>Miércoles</th>
<th>Jueves</th>
<th>Viernes</th>
</tr>
<tr>
<th>10:30</th>
<td>Matemáticas</td>
<td>Geografía</td>
<td>Física</td>
<td>Dibujo</td>
<td>Matemáticas</td>
</tr>
<tr>
<th>11:30</th>
<td>Inglés</td>
<td>Lenguaje</td>
<td>Geografía</td>
<td>Química</td>
<td>Física</td>
</tr>
</table>
Títulos de las tablas
A las tablas se les puede poner un título con ayuda de la etiqueta caption.
Veamos un ejemplo:
<table border="1">
<caption>Ventas</caption>
<tr>
<th>Hardware</th>
<td>12.190 €</td>
</tr>
<tr>
<th>Software</th>
<td>9.870 €</td>
</tr>
</table>
<hr/>
<table border="1">
<caption align="bottom">Ventas</caption>
<tr>
<th>Hardware</th>
<td>12.190 €</td>
</tr>
<tr>
<th>Software</th>
<td>9.870 €</td>
</tr>
</table>
Agrupamiento de elementos de una tabla:
Hay tres elementos HTML que sirven para diferenciar las tres partes principales de
una tabla:
thead. Sirve para indicar las filas que forman la cabecera de la tabla
tfoot. Indica el pie de la tabla
tbody. Indica el cuerpo de la tabla
Independientemente del orden en el que aparezcan en el documento, las filas de
thead se mostrarán en primer lugar, después las filas de tbody, y por último, las
filas de tfoot.
De esa forma se podrá más adelante dar formato diferente a cada parte.
Por ejemplo
<table border="1" rules="groups">
<caption>Ventas por secciones</caption>
<thead>
<tr>
<td> </td>
<td>Hardware</td>
<td>Software</td>
</tr>
</thead>
<tfoot>
<tr>
<th>Total</th>
<th>25000</th>
<th>22000</th>
</tr>
</tfoot>
<tbody>
<tr>
<th>Enero</th>
<td>12000</td>
<td>15000</td>
</tr>
<tr>
<th>Febrero</th>
<td>13000</td>
<td>9000</td>
</tr>
</tbody>
</table>
Combinar celdas:
Es posible unir celdas y de esta forma conseguir tablas de formas caprichosas que
permiten una maquetación más poderosa.
Las etiquetas de columna (td y th) son las que poseen los
atributos que permiten esta operación.
En concreto son los atributos:
colspan Combina la celda actual con el número de celdas a la derecha que se
indique. Por ejemplo colspan="3" une esta celda con las dos que tiene a su derecha,
formando una
combinación de tres celdas en horizontal.
rowspan Combina la celda actual con el número de celdas hacia abajo que se indique.
Por ejemplo rowspan="3" une esta celda con las dos que tiene hacia abajo, formando
una combinación de tres celdas en vertical.
Por ejemplo
<table border="1" width="100%">
<tr>
<td> </td>
<td> </td>
<td colspan="2"> </td>
</tr>
<tr>
<td> </td>
<td colspan="2"> </td>
<td rowspan="2"> </td>
</tr>
<tr>
<td rowspan="3"> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
</table>
Tablas dentro de tablas
Para generar tablas aún más complejas, se pueden meter elementos table dentro de
otras
tablas.
Lo que se hace es meter una etiqueta table (con todos sus elementos de fila y
columna) en un td o th.
Esta combinación permite generar tablas con cualquier distribución.
Elementos span y div
Elementos en línea y de bloque:
[Link]
Elemento div
Se trata de un elemento clásico (presente en las primeras versiones de HTML), que
permite agrupar el contenido.
Inicialmente se usaba para usar su atributo align y que todo un
bloque de párrafos tuviera la misma alineación.
Posteriormente se ha utilizado con CSS a
fin de definir secciones y así dar un formato concreto a toda la sección.
En especial se ha
utilizado para definir capas en las páginas web y ese sigue siendo su principal
uso.
Dentro de div se pueden colocar todo tipo de etiquetas (tablas, párrafos, imágenes,
…), ya que se trata de un elemento de bloque.
width:300px;left:100px;top:100px;position:absolute
Elemento span
Se trata de un elemento de línea que se usa para marcar contenido dentro de un
párrafo,
a fin de que a ese contenido se le pueda dar un formato especial mediante CSS.
Por ejemplo:
Dentro de este texto <span style="color:blue"> esta frase sale de color azul</span>
Esto vuelve a salir normal
En este trozo de código, color:blue es una regla CSS que permite colorear de color
azul
(como se verá en la siguiente unidad).
Formularios
Los formularios permiten obtener información para enviarla a un servidor de
aplicaciones y
que éste la procese.
Por ejemplo, podemos colocar cuadros de texto en los que el usuario
pone sus datos y estos pasan a una página PHP que tendrá la capacidad de recoger
dichos
datos y actuar en consecuencia.
Por ejemplo, podría ser algo así:
Ejemplo: [Link]
[Link]
[Link]
Elemento form
Todo formulario HTML debe emplear un elemento form, dentro del cual se colocan
todos los controles del formulario.
Los atributos más importantes de form son:
action. Es el atributo que contiene la URI de la página web o servicios que
procesará los datos del formulario.
method. Permite indicar qué instrucción http utilizaremos para pasar la
información al destino de nuestro formulario. Las opciones habituales son GET y
POST. No se distingue entre mayúsculas y minúsculas.
La diferencia es que GET genera una cadena de búsqueda en la URI que contiene los
datos del formulario; POST, por su parte, pasa
los datos pero de forma más oculta.
enctype. Sólo se emplea si utilizamos el método POST. Los valores válidos son:
o application/x-www-form-urlencoded
o multipart/form-data
El primero es el valor por defecto, y el segundo es el que debemos utilizar si
queremos
subir ficheros en el formulario.
Por ejemplo:
<form action="[Link]" method="GET">
…
</form>
O también:
<form action = "[Link] method="post" enctype="multipart/form-
data"
>
...
</form>
Cuadros de texto: input type=”text”
Los cuadros de texto permiten recoger texto que escriba el usuario.
Su sintaxis es:
<input type="text" name="nombre" />
Este código provoca que se muestre en la página un cuadro en el que el usuario
puede introducir texto.
Además, podemos utilizar estos atributos:
value. Da un valor inicial al cuadro.
name. El atributo name se puede utilizar en cualquier campo de un formulario y se
emplea para referenciar los datos una vez que el formulario ha sido enviado.
id. Identificador del cuadro. La W3C (organismo que estandariza XML y HTML)
recomienda usar id en lugar de name, pero lo cierto es que PHP recoge los valores
gracias a name, no funciona con id.
Por lo que para más seguridad los diseñadores
suelen utilizar ambos atributos.
Ejemplo:
<form action="[Link]" method="get">
Escriba su nombre y apellidos<input type="text" name="nombre" />
</form>
Veamos que atributos podemos emplear con los controles de los formularios:
maxlength Indica el máximo número de caracteres que se le permitirá escribir al
usuario.
size Anchura, en caracteres, del cuadro de texto. No tiene sentido que sea mayor
que el
anterior (sí que sea menor).
value Permite rellenar el cuadro con un texto inicial.
accesskey Podemos usar Alt + accessKey (o Shift + Alt + accessKey, depende del
navegador) para acceder a un determinado elemento directamente según el atributo
accesskey
que se le ha asignado.
tabindex Especifica el orden de tabulación de un elemento. Se puede incluir en
cualquier control de un formulario, no sólo en los de tipo texto.
El valor asignado debe ser un número
entero positivo, siendo el primer valor el 1.
readonly El elemento puede mostrar un valor inicial, pero éste no puede ser
modificado
<input type="text" name="descuento" value="15" readonly="readonly">
disabled El elemento se visualiza, pero aparece desactivado
<input type="text" name="descuento" value="15" disabled="disabled">
Cuadro de contraseñas: input type=”password”
Funcionan como los cuadros de texto, sólo que el texto que se introduce se oculta,
mostrando sólo puntos o asteriscos.
La sintaxis es:
<input type="password" name="nombre" />
Usa los mismos atributos que los cuadros de texto. Si usamos el método GET, la
contraseña es visible en la parte de las direcciones del navegador.
Con POST esto no ocurre, pero aún así podríamos averiguarla. Por ello lo ideal es
pasar cifrada la contraseña.
Campo de texto oculto: input type=”hidden”
Es un campo de texto oculto. Es decir, se le puede asignar un valor por defecto,
pero no se muestra, y por tanto, no se puede editar.
La sintaxis es:
<input type="hidden" name="comunidad" value="Murcia" />
Normalmente se utiliza para almacenar un valor que se desea enviar junto con el
resto del formulario, o que debe ser manipulado empleando JavaScript.
Botones
Los botones son controles del formulario en los que no se puede escribir.
Botón de envío: input type="submit"
Sirve para llevar a cabo la comunicación entre el formulario y la página que recoge
sus datos. Al pulsarlo es cuando se envía el formulario. La sintaxis es:
<input type="submit" value="texto del botón" />
En cuanto se pulsa este botón, los datos del resto de controles se envían a la
página receptora del formulario (que se corresponde a la URI indicada en el
apartado action de la etiqueta form).
Botón de restablecer o resetear: input type="reset"
La sintaxis de este botón es:
<input type="reset" value="texto del botón" />
Este tipo de botones lo que hacen es reiniciar el formulario, anulando los datos
que se han introducidos en los controles del formulario.
Deja todos los controles en su estado inicial
Botón genérico: input type="button"
Un botón genérico se marca indicando type="button" en la etiqueta type. En los
formularios no se usa para enviar o configurar la información, sino que se utiliza
normalmente para capturar su pulsación (mediante JavaScript es lo más habitual) y
responder en consecuencia.
También existe la posibilidad de utilizar el elemento button, que incluye un
atributo type que puede ser submit o reset.
Mostrar una imagen en un botón
Podemos incluir la imagen dentro del elemento button.
Por ejemplo:
<button type="submit">
<img src="imagenes/[Link]"/>
</button>
Botones de tipo radio
Se trata de un control que permite elegir una de entre varias opciones, pero sólo
una de ellas.
Todas las opciones deben de tener el mismo nombre (atributo name) y sólo cambia
el valor de las mismas (value).
Por ejemplo:
<form action="[Link]" method="get">
<p>Sexo:</p>
<input type="radio" name="sexo" value="hombre"/>Hombre<br/>
<input type="radio" name="sexo" value="mujer" checked="checked"/>Mujer<br/>
</form>
El atributo checked (que sólo admite el valor checked) hace que el botón en el que
se usa,
aparezca chequeado por defecto.
Casillas de verificación
Se usan igual que los botones de radio, pero se pueden marcar varias a la vez.
La diferencia es que el tipo (type) es checkbox en lugar de radio. También posee el
atributo
checked para que inicialmente la casilla aparezca pulsada. Por ejemplo:
<form action="[Link]" method="get">
<p>Marca los tipos de Centros Educativos en los que has estudiado:</p>
<input type="checkbox" name="ce" value="pub" checked="checked"/>Público<br />
<input type="checkbox" name="ce" value="pri"/>Privado<br />
<input type="checkbox" name="ce" value="con"/>Concertado<br /><br/>
¿Eres becario?<input type="checkbox" name="becario" value="si" checked="checked"/>
<br /><br/>
<input type="submit" value="Enviar" />
</form>
Podemos ver un ejemplo de los diferentes elementos que hemos visto en el documento
Ejercicio 9.1
Lista de selección o cuadro combinado
Un cuadro combinado permite el uso de una lista de opciones en la que se puede
elegir la
deseada. Todo cuadro comienza con una etiqueta select que es la encargada de dar
nombre (name) al control. Dentro cada opción del cuadro se indica con una etiqueta
option
a la que se da valor mediante el atributo value. Dentro de la etiqueta option se
coloca el
texto que verá el usuario.
Veamos un ejemplo:
<form action="[Link]" method="get">
<select name="provincia">
<option value="av">Ávila</option>
<option value="bu">Burgos</option>
<option value="l">León</option>
<option value="p">Palencia</option>
<option value="sg">Segovia</option>
<option value="so">Soria</option>
<option value="sa">Salamanza</option>
<option value="va">Valladolid</option>
<option value="za">Zamora</option>
</select>
<input type="submit" value="enviar"/>
</form>
Podemos utilizar otros atributos a la hora de diseñar nuestras listas de selección:
selected: Indica que la opción está preseleccionada
size: especifica el número de filas del menú que se ven al mismo tiempo
multiple: al utilizarlo, se permite seleccionar más de una opción
Un ejemplo del uso de estos atributos lo tienes en el documento
Además, se pueden agrupar opciones dentro del cuadro usando el elemento optgroup.
<form action="[Link]" method="get">
<select name="provincia">
<optgroup label="Cantabria">
<option value="s">Santander</option>
</optgroup>
<optgroup label="Castilla y León">
<option value="av">Ávila</option>
<option value="bu">Burgos</option>
<option value="l">León</option>
<option value="p">Palencia</option>
<option value="sg">Segovia</option>
<option value="so">Soria</option>
<option value="sa">Salamanza</option>
<option value="va">Valladolid</option>
<option value="za">Zamora</option>
</optgroup>
</select>
<input type="submit" value="enviar"/>
</form>
Un ejemplo del uso de optgroup lo tienes en el documento
Cuadro de selección de archivo:
Cuando se usa type="file" en una etiqueta input, aparece un botón que al pulsarlo
muestra
un cuadro de selección de archivos mediante el cual podremos elegir un archivo.
La ruta local a dicho archivo es lo que se guarda para ser enviado al sitio o
página que recibe los
valores del formulario.
Por ejemplo:
<form action="[Link]" method="get">
Elija el archivo
<input type="file" name="archivo" />
<input type="submit" value="enviar"/><br />
</form>
Para seleccionar más de un fichero empleamos el atributo "multiple":
<input type="file" name="ficheros[]" multiple="multiple"/>
Cuadro de texto multilínea:
El elemento textarea permite definir un cuadro de texto de varias líneas para que
el usuario
pueda introducir un texto largo. El atributo rows permite indicar la altura en
líneas de texto
del cuadro y el atributo cols, la anchura en caracteres (los demás atributos son
como los
de la etiqueta input type="text"). Por ejemplo:
<form action="[Link]" method="get">
Escribe un texto descriptivo: <br />
<textarea rows="10" cols="40" name="texto"></textarea><br />
<input type="submit" value="enviar"/><br />
</form>
El contenido del elemento textarea aparecerá inicialmente dentro del cuadro. En
HTML5
aparece el atributo maxlength, que permite limitar la cantidad de caracteres
introducidos
por el usuario.
