jueves, 17 de marzo de 2011
miércoles, 9 de marzo de 2011
Como insertar Imagen en html
Internet, que sólo en los últimos 10 años se ha afirmado como medio de comunicación de masa, durante mucho tiempo fue un sistema de comunicación utilizado exclusivamente por el mundo militar, primero, y por el universitario, después. Es fácil imaginar la escasa inclinación hacia el diseño y la estética mostrada por estos primeros navegantes de la red. A finales de los años 80, Internet sufrió una transformación radical que condujo hasta las "autopistas telemáticas" a un público de masa, con exigencias diversas de las militares o académicas. Con la transformación de la red, se ha impuesto la necesidad de poner a disposición instrumentos de navegación más fáciles de usar ("user friendly") y no sólo para el estudio o la investigación. Así, en 1989 nace el WWW, que gracias al primer navegador de la historia, Mosaic, transforma el texto blanco sobre fondo negro en el actual web, hecho de color e interactividad.
La revolución de la imagen (criticada por algunos puristas académicos que vieron en el Internet de masa el fin del sistema de comunicación) fue también mérito de una marca hoy muy común <IMG>, esto es, el elemento necesario para invocar imágenes dentro de la página.
Antes de describir en detalle la marca principal de inserción de imágenes en los hipertextos, es conveniente precisar algunos conceptos de HTML. A diferencia de muchos procesadores de texto (Ms Word, por ejemplo), los hipertextos no se "funden" con las imágenes que les sirven de acompañamiento gráfico, sino que se limitan a invocarlas desde un recorrido específico in situ o en el web. Dicho de otro modo, existe una división muy clara entre archivo .htm e imágenes (y también sonidos, apliques, etc.). Los documentos HTML se limitan a prever dentro de ellos un espacio en el que se insertan las imágenes solicitadas.
La marca <IMG> no necesita cierre y su sintaxis correcta es:
<IMG SRC="immagine.gif">
donce SRC corresponde al inglés Search y es el recorrido del que el navegador saca la imagen (en este caso "immagine.gif"). Como hemos señalado, esta marca es única en el sentido de que NO lleva como cierre el correspondiente </IMG>.
Los navegadores (Netscape, MsIe, Opera etc.) reconocen numerosos formatos gráficos, aunque los más utilizados son dos: GIF (Graphics Interchange Format) y JPEG (Joint Photographics Experts Group). En los últimos meses, asistimos a la difusión a nivel internacional de otro formato: PNG (Portable Network Graphics).
El elemento <IMG> va acompañado de diversos atributos que facilitan su uso. Veamos ahora juntos cuáles son.
El uso de texto para comentar las imágenes es una regla fundamental que debemos observar en la creación de sitios web por varias razones:
algunos navegadores pordrían estar impostados para no invocar las imágenes;
los navegadores textuales para invidentes no conseguirían interpretar las imágenes si carecieran de comentario;
es posible evitar pies de imagen incluyendo comentarios dentro de la imagen misma.
En todos estos casos, el uso de comentarios resuelve el problema y permite optimizar la página web. La sintaxis correcta de los comentarios es la siguiente:
<IMG SRC="immagine.gif" ALT="Obra de K. Haring">
Para comprobar sus efectos, pasa el ratón por encima de la imagen del ejemplo.
En los ejemplos vistos hasta ahora, no hemos especificado las medidas de la imagen que el navegador se ha encargado de buscar automáticamente. Es posible definir la anchura y la altura de la imagen gracias a los atributos width y height, respectivamente:
<IMG SRC="immagine.gif" WIDTH=178 HEIGHT=180 ALT="Obra de K. Haring">
donde WIDTH=178 es la dimensión horizontal (ancho) de la imagen expresada en píxel, y HEIGHT=180 la dimensión vertical (alto).
Mediante estos atributos podemos definir dimensiones diferentes de las que realmente tiene la imagen. En cualquier caso, es aconsejable insertar imágenes con su tamaño efectivo sobre todo si están en formato GIF, dado que, cuando se cambian las medidas, este formato pierde mucha calidad.
Con el atributo BORDER podemos aplicar un borde a la imagen. Los valores son numéricos y van expresados en píxel. Si impostamos el valor BORDER en 0, la imagen no va recuadrada. Cuando omitimos este atributo, el navegador no aplica ningún borde, pero si la imagen es también un enlace automáticamente se le asignará un BORDER=1. La sintaxis correcta es:
<IMG SRC="immagine.gif" WIDTH=178 HEIGHT=180 BORDER=2 ALT="Obra de K. Haring">
Con estos dos atributos podemos establecer la distancia en píxel de la imagen a los objetos que se encuentran a los cuatro lados de la misma.
HSPACE define la distancia de los lados derecho e izquierdo de la imagen a los objetos más cercanos (texto, imágenes, apliques, etc.).
VSPACE define la distancia de los lados superior e inferior de la imagen a los objetos más cercanos (texto, imágenes, apliques, etc.). La sintaxis correcta es
<IMG SRC="immagine.gif" WIDTH=178 HEIGHT=180 BORDER=2 VSPACE=3 HSPACE=3 ALT="Obra de K. Haring">
Estos atributos resultan útiles cuando queremos distanciar la imagen de los objetos más cercanos.
El atributo ALIGN define la posición de la imagen respecto al texto colocado inmediatamente antes o después de la misma. Existen varias opciones para el atributo ALIGN:
ALIGN=top: alinea la primera línea de texto con la parte superior de la imagen.
Para un ejemplo práctico, haz clic aquí.
ALIGN=middle: alinea la primera línea del texto con el centro de la imagen.
Para un ejemplo práctico, haz clic aquí.
ALIGN=bottom: alinea la primera línea de texto con la parte inferior de la imagen.
Para un ejemplo práctico, haz clic aquí.
ALIGN=left: el texto se coloca a la derecha de la imagen empezando desde la parte superior de la misma.
Para un ejemplo práctico, haz clic aquí.
ALIGN=right: el texto se coloca a la izquierda de la imagen empezando desde la parte superior de la misma.
Para un ejemplo práctico, haz clic aquí.
La revolución de la imagen (criticada por algunos puristas académicos que vieron en el Internet de masa el fin del sistema de comunicación) fue también mérito de una marca hoy muy común <IMG>, esto es, el elemento necesario para invocar imágenes dentro de la página.
<IMG>
Antes de describir en detalle la marca principal de inserción de imágenes en los hipertextos, es conveniente precisar algunos conceptos de HTML. A diferencia de muchos procesadores de texto (Ms Word, por ejemplo), los hipertextos no se "funden" con las imágenes que les sirven de acompañamiento gráfico, sino que se limitan a invocarlas desde un recorrido específico in situ o en el web. Dicho de otro modo, existe una división muy clara entre archivo .htm e imágenes (y también sonidos, apliques, etc.). Los documentos HTML se limitan a prever dentro de ellos un espacio en el que se insertan las imágenes solicitadas.
La marca <IMG> no necesita cierre y su sintaxis correcta es:
<IMG SRC="immagine.gif">
donce SRC corresponde al inglés Search y es el recorrido del que el navegador saca la imagen (en este caso "immagine.gif"). Como hemos señalado, esta marca es única en el sentido de que NO lleva como cierre el correspondiente </IMG>.
Los navegadores (Netscape, MsIe, Opera etc.) reconocen numerosos formatos gráficos, aunque los más utilizados son dos: GIF (Graphics Interchange Format) y JPEG (Joint Photographics Experts Group). En los últimos meses, asistimos a la difusión a nivel internacional de otro formato: PNG (Portable Network Graphics).
El elemento <IMG> va acompañado de diversos atributos que facilitan su uso. Veamos ahora juntos cuáles son.
ALT
El uso de texto para comentar las imágenes es una regla fundamental que debemos observar en la creación de sitios web por varias razones:
En todos estos casos, el uso de comentarios resuelve el problema y permite optimizar la página web. La sintaxis correcta de los comentarios es la siguiente:
<IMG SRC="immagine.gif" ALT="Obra de K. Haring">
Para comprobar sus efectos, pasa el ratón por encima de la imagen del ejemplo.
WIDTH y HEIGHT
En los ejemplos vistos hasta ahora, no hemos especificado las medidas de la imagen que el navegador se ha encargado de buscar automáticamente. Es posible definir la anchura y la altura de la imagen gracias a los atributos width y height, respectivamente:
<IMG SRC="immagine.gif" WIDTH=178 HEIGHT=180 ALT="Obra de K. Haring">
donde WIDTH=178 es la dimensión horizontal (ancho) de la imagen expresada en píxel, y HEIGHT=180 la dimensión vertical (alto).
Mediante estos atributos podemos definir dimensiones diferentes de las que realmente tiene la imagen. En cualquier caso, es aconsejable insertar imágenes con su tamaño efectivo sobre todo si están en formato GIF, dado que, cuando se cambian las medidas, este formato pierde mucha calidad.
BORDER
Con el atributo BORDER podemos aplicar un borde a la imagen. Los valores son numéricos y van expresados en píxel. Si impostamos el valor BORDER en 0, la imagen no va recuadrada. Cuando omitimos este atributo, el navegador no aplica ningún borde, pero si la imagen es también un enlace automáticamente se le asignará un BORDER=1. La sintaxis correcta es:
<IMG SRC="immagine.gif" WIDTH=178 HEIGHT=180 BORDER=2 ALT="Obra de K. Haring">
HSPACE y VSPACE
Con estos dos atributos podemos establecer la distancia en píxel de la imagen a los objetos que se encuentran a los cuatro lados de la misma.
<IMG SRC="immagine.gif" WIDTH=178 HEIGHT=180 BORDER=2 VSPACE=3 HSPACE=3 ALT="Obra de K. Haring">
Estos atributos resultan útiles cuando queremos distanciar la imagen de los objetos más cercanos.
ALIGN
El atributo ALIGN define la posición de la imagen respecto al texto colocado inmediatamente antes o después de la misma. Existen varias opciones para el atributo ALIGN:
Para un ejemplo práctico, haz clic aquí.
Para un ejemplo práctico, haz clic aquí.
Para un ejemplo práctico, haz clic aquí.
Para un ejemplo práctico, haz clic aquí.
Para un ejemplo práctico, haz clic aquí.
Tablas en html
Estructura de una tabla
Las tablas estan formadas por filas, columnas y celdas. Cada espacio horizontal continuado es una fila y cada espacio vertical continuado es una columna, definiéndose una celda como el espacio formado por la intersección de una fila y una columna.
| columna 1 | columna 2 | columna 3 | ||||||||||
| fila 1 |
| |||||||||||
| fila 2 | ||||||||||||
| fila 3 | ||||||||||||
Lo primero que tenemos que hacer cuando queremos introducir una tabla es decirle al navegador dónde empieza y dónde acaba esta; esto se consigue mediante la etiqueta de inicio <TABLE> y su correspondiente de cierre </TABLE>.
Seguidamente debemos decirle cuantas filas vamos a tener en nuestra tabla, cosa que hacemos con las etiqueta de inicio de fila <TR>> y su correspondiente de cierre de fila</TR>, por lo que deberenos insertar una pareja de etiquetas por cada fila que queramos que tenga la tabla.
Por último, dentro de cada fila deberemos indicar cuantas celdas va a haber, que inicialmente deben corresponderse con el número de columnas que deseemos tenga la tabla. Esto se consigue mediante las parejas de etiquetas <TD> y </TD>.
De esta forma, y siguiendo con nuestra tabla inicial de Ejemplo, el esquema de etiquetas sería el siguiente:
| <TABLE> | |||||||||||||
| <TR> |
| </TR> | |||||||||||
| <TR> | </TR> | ||||||||||||
| <TR> | </TR> | ||||||||||||
| </TABLE> | |||||||||||||
Este es el esquema general de toda tabla simple, que traducido a código HTML quedaría de la forma:
<TABLE>
<TR>
<TD> celda(1,1) </TD>
<TD> celda(1,2) </TD>
<TD> celda(1,3) </TD>
</TR>
<TR>
<TD> celda(2,1) </TD>
<TD> celda(2,2) </TD>
<TD> celda(2,3) </TD>
</TR>
<TR>
<TD> celda(3,1) </TD>
<TD> celda(3,2) </TD>
<TD> celda(3,3) </TD>
</TR>
</TABLE>
La visualización de una tabla se genera automaticamente a partir de las filas y las columnas definidas. Sin embargo para un navegador no es facil interpretar a tiempo como debe aparecer la tabla. Primero tiene que leer la tabla completa antes de poder visualizar alguna cosa. En caso de tablas muy grandes eso puede conducir a que en la pantalla aparecen espacios vacios desagradables mientras que la pagina se carga. HTML 4.0 ofrece una nueva sintaxis para comunicarle al navegador al principio de la tabla cuantas columnas tiene. De esta manera el navegador puede cargar la tabla mucho mas rapido, o sea que una parte de la tabla es visualizada antes de que la totalidad de la tabla haya sido leída. Esto se debe implementar mediante las etiquetas <COLGROUP>...</COLGROUP> y sus hijas <COLS>. No obstante, estas etiquetas, que veremos mas adelante, sólo son compatibles con Internet Explorer, cosa que las hace desaconsejables para nuestras paginas, pués debemos siempre crear paginas compatibles con todos los navegadores de cuarta generación y todas las resoluciones habituales.
Ademas de estas etiquetas basicas existen otras varias que nos van a permitir adaptar la tabla a nuestras necesidades. Y cada etiqueta posee ademas varios atributos, que van a modificar la forma en que se comportan, que empezaremos a ver en el próximo capítulo.
jueves, 24 de febrero de 2011
HTML
HTML, siglas de HyperText Markup Language (Lenguaje de Marcado de Hipertexto), es el lenguaje de marcado predominante para la elaboración de páginas web. Es usado para describir la estructura y el contenido en forma de texto, así como para complementar el texto con objetos tales como imágenes. HTML se escribe en forma de "etiquetas", rodeadas por corchetes angulares (<,>). HTML también puede describir, hasta un cierto punto, la apariencia de un documento, y puede incluir un script (por ejemplo Javascript), el cual puede afectar el comportamiento de navegadores web y otros procesadores de HTML.
HTML también es usado para referirse al contenido del tipo de MIME text/html o todavía más ampliamente como un término genérico para el HTML, ya sea en forma descendida del XML (como XHTML 1.0 y posteriores) o en forma descendida directamente de SGML (como HTML 4.01 y anteriores).
HTML también es usado para referirse al contenido del tipo de MIME text/html o todavía más ampliamente como un término genérico para el HTML, ya sea en forma descendida del XML (como XHTML 1.0 y posteriores) o en forma descendida directamente de SGML (como HTML 4.01 y anteriores).
Suscribirse a:
Entradas (Atom)