Debe introducir al menos 3 caracteres en el buscador.
Inicio / Wikis / Cursos gratis / Curso completo de HTML - Imagenes en las paginas Web (I)

Curso completo de HTML - Imagenes en las paginas Web (I)

 ***** (127 opiniones)
GNU Free Documentation License Curso gratis de Jorge Ferrer, Víctor García y Rodrigo García - 23 de Febrero de 2006
Temas Relacionados: HTML
19. Imagenes en las paginas Web (I)

En el segundo capítulo: 'Nuestra primera página Web', aprendimos a insertar imágenes en una Web. Ahora empezaremos recordando brevemente aquel capítulo, para continuar con las distintas técnicas que nos ofrece el lenguaje HTML no sólo para incluir imágenes, sino para manejarlas, cambiar su apariencia o controlar su disposición respecto a los demás elementos de la página.

Insertando Imágenes

Recordemos que para insertar una imagen en una página Web era imprescindible guardarla en un archivo independiente del documento HTML. Dicho archivo podía contener la imagen en varios formatos, siendo los de mayor uso GIF y JPEG que pueden ser vistos con la práctica totalidad de navegadores. Cuando tenemos una imagen con estos formatos suelen tener la extensión .gif en el caso del formato GIF y .jpg o .jpeg en el caso de imágenes JPEG.

Algunas aplicaciones de retoque de imágenes guardan las imágenes GIF y JPEG con la extensión en mayúsculas (.GIF, .JPEG). Esta terminación es válida, pero los nombres de los archivos que contienen imágenes, igual que los de los documentos HTML, son sensibles a mayúsculas/minúsculas y por tanto .gif no es lo mismo que .GIF con lo que al referirnos al archivo debemos escribir su nombre y terminación respetando las mayúsculas y minúsculas. Si las hemos confundido cuando probemos las páginas en el ordenador local probablemente funcionen, pero dejarán de hacerlo cuando las publiquemos, es decir, cuando las pongamos en el servidor Web.

El formato de una imagen es el código usado para almacenarla en un archivo. Los formatos simples simplemente guardan una tabla con el color de cada punto de pantalla (pixel) de la imagen. Sin embargo si guardamos una imagen grande con este formato ocupará demasiado. Por esta razón se crearon formatos más complicados basados en complejas fórmulas matemáticas, que consiguen reducir el tamaño de la imagen. GIF y JPEG son ejemplos de estos formatos. Los navegadores usan la extensión (los tres/cuatro últimos caracteres tras un punto) de los archivos para averiguar el formato en que están codificadas, si cambiamos manualmente esa extensión no tendrán esa información y la imagen no podrá ser visualizada.

Es importante resaltar cambiando la extensión de una imagen no cambiamos el formato de dicha imagen, pero podemos dejarla inútil.

Más adelante trataremos a fondo estos dos formatos y comentaremos cuando es conveniente usar uno u otro.

Una vez tenemos la imagen en un archivo aparte (por ejemplo img.gif) con el formato adecuado insertamos la imagen usando la etiqueta IMG de la siguiente manera:

 <img src="img.gif">
       

Como ya comentamos, esta etiqueta consta de una única instrucción. Pero aunque sólo vimos uno de sus atributos, SRC, contiene muchos más que iremos estudiando a lo largo del capítulo.

Pero antes de comenzar a ver nuevos conceptos...

Imágenes y texto

Cuando insertamos una imagen ésta se sitúa justo en el lugar donde está la etiqueta IMG independientemente de si hay texto alrededor o no, por esta razón este tipo de imágenes reciben el nombre de imágenes en línea o imágenes inline. Usando esta característica podíamos insertar imágenes pequeñas como si fuesen parte de un párrafo.

Si queremos insertar una imagen en el interior de un elemento de nivel de bloque, pongamos por ejemplo un encabezado, no tendremos más que poner la etiqueta en el interior de ese elemento (entre las instrucciones de inicio y fin). Si no lo hiciéramos así, después de la imagen se produciría un salto de línea antes del encabezado. Para entender esto mejor podemos fijarnos en la figura 5.8 y comparar entre los siguientes códigos:

Figura 5.8. Podemos apreciar la diferencia entre insertar una imagen dentro del encabezado o insertarla fuera, en cuyo caso queda en la línea superior.

 <img src="imagenes/chistera.gif">
  <h2>LA CHISTERA-Humor y magia</h2>
  <h2>
  <img src="imagenes/chistera.gif">LA CHISTERA-Humor y magia</h2>
       

que nos resultarán familiares de la primera práctica.

Como vemos, en el primer caso la instrucción de inicio del encabezado, <h2>, provocará una salto de línea y el efecto no será el deseado. En el siguiente caso hemos incluido la etiqueta IMG dentro del encabezado, es decir, estamos diciendo al navegador algo así: 'el encabezado consta de esta imagen y este texto'. En este caso, como resulta totalmente lógico, el resultado es el deseado.

Aún así el ejemplo anterior no resuelve todos los problemas que podrían plantearse al insertar imágenes. Como ya vimos en un ejemplo del capítulo 2 (fig. 2.9), que ahora reproducimos en la figura 5.9 cuando las imágenes son pequeñas pueden incluirse junto con el texto sin problemas, pero ¿qué ocurre si queremos insertar una imagen de dimensiones mayores? Podemos usar el método anterior, pero entonces obtendríamos resultados como el de la figura 5.10, que sin duda no es el deseado y provoca que el texto sea difícilmente legible.

Figura 5.9. Como veíamos en el fascículo 2 (fig. 2.9) cuando la imagen es pequeña puede entremezclarse con el texto sin problema.

Figura 5.10. Cuando la imagen es grande, al insertarla en una línea de texto ésta queda muy separada de la línea anterior en lugar de envolver la imagen.

Una opción para solucionar este problema es provocar un salto de línea antes y después de la imagen, tal y como hacíamos en la práctica 2 para las imágenes de la página de presentación. Podemos usar diversas etiquetas para conseguir los saltos de línea: P, CENTER, BLOCKQUOTE, BR, etc. por ejemplo:

 <p>
  <img src="montanas.html">
  </p>
  <center>
  <img src="montanas.html">
  </center>
       

Sin embargo no siempre nos conformamos con esto. Habitualmente lo que queremos es que la imagen se inserte junto con el texto y que este se sitúe alrededor suyo, tal y como vemos en periódicos u otras publicaciones. De esta forma podríamos conseguir el efecto de la figura 5.11. Afortunadamente es posible conseguir ese efecto usando las capacidades de alineamiento de imágenes del HTML.

Figura 5.11. Con las técnicas de alineamiento del lenguaje HTML que estudiamos en este capítulo podemos crear interesantes efectos como texto envolviendo a una imagen.

Tabla de contenidos
  1. 1 - Introducción al lenguaje HTML
  2. 2 - Primeros pasos con HTML
  3. 3 - Parrafos en HTML
  4. 4 - Cómo insertar imagenes en una pagina
  5. 5 - Cómo crear enlaces hipertexto
  6. 6 - PRÁCTICA 1: La pagina web de "La chistera"
  7. 7 - Anclas (I)
  8. 8 - Anclas (II)
  9. 9 - Formato de texto
  10. 10 - La etiqueta FONT
  11. 11 - Texto preformateado
  12. 12 - Acentos y otros caracteres especiales
  13. 13 - Listas en HTML (I)
  14. 14 - Listas en HTML (II)
  15. 15 - Comentarios en HTML
  16. 16 - Practica 2: Un sitio web completo
  17. 17 - Usando color en el WWW
  18. 18 - Cómo cambiar la apariencia de una pagina
  19. 19 - Imagenes en las paginas Web (I)
  20. 20 - Imagenes en las paginas Web (II)
  21. 21 - Imagenes en las paginas Web (III)
  22. 22 - Cómo cambiar la apariencia de las imagenes
  23. 23 - Alternativas a las imagenes inline (I)
  24. 24 - Alternativas a las imagenes inline (II)
  25. 25 - Mejoras en las imagenes
  26. 26 - Cómo se crea una tabla HTML (I)
  27. 27 - Cómo se crea una tabla HTML (II)
  28. 28 - Alineamiento de tablas
  29. 29 - Alineamiento de celdas y filas
  30. 30 - Ancho de tablas y celdas
  31. 31 - Celdas que abarcan varias filas o columnas
  32. 32 - Margenes y separación de celdas
  33. 33 - Anidamiento
  34. 34 - Practica 3 - Tabla de Datos
  35. 35 - Practica 4 - Pagina Web con una estructura creada con tablas
  36. 36 - Practica 4 - Pagina Web con una estructura creada con tablas
  37. 37 - Practica 4 - Pagina Web con una estructura creada con tablas
  38. 38 - Estandares y extensiones del lenguaje HTML (I)
  1. 39 - Estandares y extensiones del lenguaje HTML (II)
  2. 40 - Extensiones a las listas (I)
  3. 41 - Extensiones a las listas (II)
  4. 42 - Alineamiento
  5. 43 - La etiqueta META
  6. 44 - Otras etiquetas del lenguaje HTML 3.2
  7. 45 - El atributo TARGET
  8. 46 - La etiqueta BASE
  9. 47 - Creación de paginas con frames
  10. 48 - Creación del documento de definición de frames (I)
  11. 49 - Creación del documento de definición de frames (II)
  12. 50 - Pagina completa con frames
  13. 51 - Atributos de la etiqueta FRAME
  14. 52 - Compatibilidad: NOFRAME
  15. 53 - Anidamiento de framesets
  16. 54 - Bordes de los frames
  17. 55 - Valores especiales del atributo TARGET
  18. 56 - Practica 5: Web de Los Alpes con frames
  19. 57 - Frames flotantes
  20. 58 - Sonido vídeo y otros ficheros externos
  21. 59 - Multimedia Inline (I)
  22. 60 - Multimedia Inline (I)
  23. 61 - Plug-ins y objetos incrustados
  24. 62 - Java en las Paginas Web
  25. 63 - Inserción de Applets Java (I)
  26. 64 - Inserción de Applets Java (II)
  27. 65 - Inserción de Applets Java (III)
  28. 66 - ActiveX, la tecnología del futuro
  29. 67 - Formularios en HTML
  30. 68 - Controles de Formularios (I)
  31. 69 - Controles de Formularios (II)
  32. 70 - Controles de Formularios (III)
  33. 71 - Controles de Formularios (IV)
  34. 72 - Otros controles
  35. 73 - Practica 6-Formulario para "Los Alpes"
  36. 74 - COMO USAR LOS DATOS DE UN FORMULARIO
  37. 75 - Envío De Ficheros Usando Formularios
Autor y licencia de 'Curso completo de HTML - Imagenes en las paginas Web (I)'
Jorge Ferrer, Víctor García y Rodrigo García Extraído de: http://es.tldp.org/Manuales-LuCAS/doc-curso-html/doc-curso-html/ GNU Free Documentation License
Licencia GNU Free Documentation License: http://www.gnu.org/copyleft/fdl.html
Este contenido ha sido recopilado por el equipo de Wikilearning. Todo el contenido recopilado se ha obtenido respetando y comunicando en nuestro site la licencia de cada fuente.
Wikilearning tiene permiso expreso por escrito de los autores para publicar los contenidos que ha extraído de otras webs, incluyendo su uso comercial.

Wikis relacionados con 'Curso completo de HTML - Imagenes en las paginas Web (I)'

Bienvenidos al manual de HTML de Indaya. A través de todos estos capítulos vamos a... Más »
Curso general para entender como programar con html, php, javascript, etc. y conseguir páginas web... Más »
Completo curso de Autocad con imágenes.
Revisamos varios lenguajes de programación que son usados en la actualidad para hacer páginas Web.... Más »
Revisamos varios lenguajes de programación que son usados en la actualidad para hacer páginas Web.... Más »
Gente Wiki
Jorge Orlando Guevara Balladares
Soy jorge orlando guevara balladares, mayor de edad, casado, economista y master en metodologia, soy docente e investigador universitario y...
Innovación, Análisis estadístico,...
Elizabeth Terán
Soy licenciada en comunicacion social. Como profesional, investigadora y reportera he tenido experiencia en abarcar temas culturales, politicos, sociales y...
Gabinetes de prensa, Gestión de medios de comunicación,...
Lino
Soy prof de matematicas y deso compartir datos de material didactico de matematicas y paginas web.
Isabel Amaris
Trabajo como coordinadora de logística para una compañía de sistemas de aire acondicionado. Actualmente estoy estudiando (online)administración con énfasis en...
Carolina Valenzuela
Soy egresada de la carrera de relaciones públicas, he trabajado en medios de comunicación interna y actualmente me encuentro...
Luis C
Docente universitario e instructor formador en varias entidades del estado y a nivel privado, especialista en docencia universitaria e investigacion.
Suscribirse
¿Estás seguro de que deseas eliminar este capítulo?