Loading [MathJax]/jax/output/HTML-CSS/fonts/TeX/fontdata.js
IMÁGENES EN HTML...

INSERTAR UNA IMAGEN

Para insertar una imagen en HTML se hará mediante la etiqueta <img /> (image). Esta etiqueta no posee su cierre correspondiente. Obligatoriamente deberemos especificar el atributo src (source), cuyo valor será la ubicación del archivo de imagen:

<img src="ruta-de-la-imagen" />

La imagen podrá estar ubicada en nuestro servidor o alojada en uno externo. Para indicar la ruta lo haremos de la misma forma que se definió en los enlaces.

TAMAÑO:

HTML insertará por defecto la imagen en su tamaño original. Sin embargo, podrá especificarse mediante los atributos width y height una anchura y una altura.

Podremos cambiar el tamaño de la imagen sin distorsionarla especificando únicamente un atributo (width o height).

En caso que quiera distorsionarse deberá definirse una altura o una anchura.

Los valores para estos atributos pueden especificarse en pixeles o en porcentaje. Cuando el tamaño se expresa en porcentaje, el resultado variará dependiendo del navegador:

Ejemplo 1: <img src="ruta-de-la-imagen" width="200px" />

Ejemplo 2: <img src="ruta-de-la-imagen" width="50%" />

Ejemplo 3: <img src="ruta-de-la-imagen" width="200px" height="50px" />


BORDES Y ALINEACIÓN:

BORDES

A las imágenes también se les puede agregar un borde mediante el atributo "BORDER" y especificando el grosor en píxeles.

Por defecto el valor para este atributo es 0, por lo que si no se dice lo contrario no se mostrará ningún tipo de borde.

Ejemplo 1: <img src="ruta-de-la-imagen" border="3px" />

ALINEACIÓN DE IMÁGENES

Para alinear las imágenes se empleará el atributo ALIGN (como en el caso de los párrafos).

<img src="ruta-de-la-imagen" align="center" />

FORMULARIOS EN HTML...

El objetivo de HTML consiste en estructurar los contenidos de una página web. Sin embargo, también pone a disposición una serie de elementos para crear aplicaciones que interactúen con aplicaciones más potentes.

Los formularios se definen con la etiquetas <form> y </form>. Dentro de estos tags incluiremos todos los elementos necesarios (botones, cuadros de texto, listas desplegables).

http://www.tutorialhtml.net/manualHTML/formulario1.gif

El tag <FORM>: Atributos

Los atributos asociados a esta etiqueta son los que se definen a continuación:

action = "url": indica la URL de la aplicación del servidor que se encarga de procesar los datos introducidos por los usuarios. Esta aplicación también se encarga de generar la respuesta que muestra el navegador. Ej: <form action="procesa-datos.php">. Este atributo será obligatorio.

method = "POST o GET" - Método HTTP empleado al enviar el formulario. En caso de utilizar el método GET los valores del formulario se agregarán a la URL definida en el atributo action. Ej.: procesa-datos.php?nombre=cecot.

enctype = "application/x-www-form-urlencoded o multipart/form-data" - Tipo de codificación empleada al enviar el formulario al servidor (sólo se indica de forma explícita en los formularios que permiten adjuntar archivos). Por defecto el valor es application/x-www-form-urlencoded. En caso de querer enviar archivos adjuntos utilizaríamos <form enctype="multipart/form-data">.

accept = "tipo_de_contenido" - Define una lista separada por comas de tipos de contenido que el script manejará correctamente. Se utiliza para filtrar archivos a enviar en el lado cliente (por ejemplo, solo permitir la subida de archivos de imagen comprimidos, como JPG y GIF). Ej: <form accept="image/gif, image/jpg">.

METHOD="POST" O METHOD="GET". ¿CUÁL ES MEJOR?

Al margen de otras diferencias técnicas, el método POST permite el envío de mucha más información que el método GET. En general, el método GET admite como máximo el envío de unos 500 bytes de información. La otra gran limitación del método GET es que no permite el envío de archivos adjuntos con el formulario. Además, los datos enviados mediante GET se ven en la barra de direcciones del navegador (se añaden al final de la URL de la página), mientras que los datos enviados mediante POST no se pueden ver tan fácilmente.

http://www.tutorialhtml.net/manualHTML/formularios/formulario-curriculum.gif