HTML: lenguaje básico para crear páginas web
Y ahora tambien aprende a programar en C++ con Aprende Web C++
y entérate de las novedades o deja un comentario.
última modificación: 13-07-2018.
Visitas este mes: 119
Visitas el mes pasado: 131
Mi agradecimiento a los siguientes sitios en los que me he basado para la elaboración de este manual.:
Si este sitio te parece interesante puedes contribuir con una pequeña aportación.
Las imágenes son elementos en linea, por lo que una imagen insertada dentro de un texto se comportará como un elemento más del texto. Esto puede quedar bien con imágenes muy pequeñas, que no superen la altura de una línea de texto, pues alrededor de la imagen se mostrará una sola línea de texto que se colocará en la parte inferior de la imagen. Veamos algunos ejemplos:
Ejemplo 1: Codigo HTML
<p>Esta imagen <img src="objetos/internet2.jpg" alt="mundo"> está integrada en el texto pero como es muy pequeña no distorsiona la página.</p>
Vista en el navegador:
Esta imagen está integrada en
el texto pero como es muy pequeña no distorsiona la página.
Ejemplo 2: Codigo HTML
<p>Esta imagen <img src="objetos/internet.jpg" alt="Internet"> está integrada en el texto y como es muy grande deja espacio en blanco alrededor suyo.</p>
Vista en el navegador:
Esta imagen está integrada en
el texto y como es muy grande deja espacio en blanco alrededor suyo.
Podemos insertar la imagen entre dos elementos, por ejemplo entre dos párrafos, en ese
caso la imagen Tendrá la misma alineación que esté definida para su elemento contenedor, pero
todo el resto de la altura que ocupe la imagen se quedará en blanco. Una posible solución para
imágenes muy grandes que ocupen casi todo el ancho del contenedor, es encerrarlas dentro
de una etiqueta de párrafo con el atributo align
para centrarla:
<p align="center"><img src="..." alt="..."></p>
Aunque lo más normal para colocar la imagen en la página es usar el código CSS, usando sólo HTML podemos también conseguir colocar la imagen en la página de una forma estéticamente normal.
Lo habitual es integrar la imagen en el texto de forma que la imagen
quede a un lado de la página y el texto cubriendo todo el otro lado. Esto lo
conseguimos con el atributo align="left"
(imagen a la izquierda), o
align="right"
(imagen a la derecha). Este atributo debemos insertarlo
dentro de la etiqueta de imagen:
La imagen de la izquierda tiene el siguiente código:
<img src="objetos/internet.jpg" alt="internet" align="left"/>
De manera análoga, la imagen de la derecha tiene este código:
<img src="objetos/internet.jpg" alt="internet" align="right"/>
La opción de colocar la imagen centrada con el texto a ambos lados no se obtiene
con el atributo align="center"
, ya que éste muestra la imagen a la izquierda
y a su derecha una sóla línea de texto centrada en vertical respecto de la imagen.
para esta opción debemos utilizar un método más complejo mediante código
CSS.
Aunque lo normal es que los bordes y los márgenes se apliquen mediante el código CSS, también se pueden incluir en el código HTML para las imágenes.
El atributo border="..."
define un borde del tamaño indicado
alrededor de la imagen. Su valor es un número que expresa los píxeles de grosor
que tendrá el borde.
Los atributos vspace="..."
y hspace="..."
indican el espacio
libre, en pixeles, que tiene que colocarse entre la imagen y los otros
elementos que la rodean. vspace
indica los margenes laterales,
mientras que hspace
indica el margen superior e inferior.
La imagen de la izquierda tiene el siguiente código:
<img src="objetos/internet.jpg" alt="internet" width="200 "align="left" border="10" vspace="20" hspace="10"/>
La mayoría de los navegadores modernos ignoran los atributos vspace="..."
y hspace="..."
por lo que para definir los márgenes debemos
emplear código CSS. Veremos esto en el manual de CSS. Respecto al atributo border="..." enservamos que la
mayoría de los navegadores incorporan un borde de color negro alrededor de la imagen, o cual no siempre suele quedar
muy estético. Es por eso que se recomienda usar código CSS para este tipo de elemento.
Este atributo sirve para indicar un archivo con una imagen de baja resolución. Cuando el navegador detecta que la imagen tiene este atributo primero descarga y muestra la imagen de baja resolución (que ocupa muy poco y que se transfiere muy rápido). Posteriormente descarga y muestra la imagen señalada con el atributo src, (que se supone que ocupará más y será más lenta de transferir).El valor de este atributo es la URL de la imagen de baja resolución.
Nota: Aunque aquí hemos visto cómo posicionar la imagen y darle un cierto estilo mediante el lenguaje HTML, lo normal es hacerlo mediante el lenguaje CSS. En el manual de CSS hay un tema dedicado a las imágenes donde se trata más ampliamene este asunto.
En La siguiente página veremos otras aplicaciones de las imágenes. Como integrar enlaces en imágenes y los mapas de imágen.
Sugerencias:
aprendeweb@aprende-web.net. Envia un
Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog
Más sobre anyelguti en http://anyelguti.16mb.com