Codificación aprenderaprogramar.com: CU00714B
ETIQUETAS HTML BÁSICAS: IMÁGENES
Continuamos viendo etiquetas y atributos básicos para la creación de páginas webs. No entramos a describir una a una todas las etiquetas y atributos de que HTML dispone. Simplemente explicamos las que han venido siendo más utilizadas. Tener en cuenta que algunas etiquetas o atributos están obsoletas (deprecated), aunque conviene conocerlas por la difusión que tuvieron.
Incluir imágenes en una página web es muy sencillo, simplemente debemos tener en cuenta que las imágenes tienen que tener los formatos GIF, JPG o PNG. Las imágenes dentro de una página web se incluyen utilizando la etiqueta <img>, que no tiene una etiqueta correspondiente de cierre. Ejemplo:
<img src="http://www.aprenderaprogramar.com/images/logo.png" alt="Logotipo APR2">
La etiqueta img dispone de estos atributos, algunos obligatorios, otros opcionales y algunos que ya no se recomienda usar (deprecated):
|
ATRIBUTO |
USO |
OBSERVACIONES |
|
src |
Este atributo es obligatorio e indica el nombre del archivo de imagen (entre comillas) o la URL desde la que se va a obtener la imagen. |
Obligatorio. Si no se incluye no se mostrará imagen alguna. |
|
align |
Permite controlar la alineación de una imagen con respecto a una línea de texto adyacente o a otras imágenes en esa línea. Los valores posibles son los ya conocidos left, right, middle, top, bottom. |
Atributo obsoleto (deprecated). Sustituir por CSS. |
|
alt |
Entre comillas podremos escribir un texto que se mostrará si la imagen no llega a cargar, mientras se carga o, cuando visualizando ya la imagen, pasamos el ratón por encima. |
Atributo requerido, se recomienda incluirlo aunque si no se hace la imagen se mostrará. |
|
width |
Este atributo es opcional pero podemos ponerlo para especificar al navegador que muestre la imagen con un tamaño específico. Significa “ancho de la imagen” que vamos a representar. Si no se escribe, se carga la imagen con el tamaño original. |
Opcional. Indicar valor en pixeles. También se puede indicar con CSS. |
|
height |
Al igual que el atributo width, es opcional. Este atributo indica el alto de la imagen. |
Opcional. Indicar valor en pixeles. También se puede indicar con CSS. |
|
border |
Con border especificamos el ancho del borde que rodea la imagen. Si se indica 0 equivale a “sin borde”. |
Atributo obsoleto (deprecated). Sustituir por CSS. |
EJEMPLO
Escribe este código en un editor de texto como bloc de notas ó Notepad++ y guarda el archivo con extensión html. A continuación visualízalo en tu navegador. Si no consigues ver las imágenes, es porque la ruta no está disponible. En ese caso introduce una ruta o el nombre de un archivo de imagen que tengas en el mismo directorio que el archivo html.
|
<!DOCTYPE html> <html> <head> <title>Ejemplo del uso de imágenes - aprenderaprogramar.com</title> </head> <body> <img src="http://www.aprenderaprogramar.com/templates/apr02062010/images/logo.png" alt="Logotipo APR2"> <img src="http://www.aprenderaprogramar.com/templates/apr02062010/images/logo.png" alt="Logotipo APR2" width="50%"> <img src="http://www.aprenderaprogramar.com/templates/apr02062010/images/logo.png" alt="Logotipo APR2" width="200px"> <img src="http://www.aprenderaprogramar.com/templates/apr02062010/images/logo.png" alt="Logotipo APR2" width="200px" border="5"> </body> </html> |
Como podemos observar (ver imagen anterior), el atributo width se ha definido tanto en pixeles como en porcentaje (al igual pasa con el atributo height), aunque las últimas versiones de HTML no admiten el uso de porcentajes. Por ello recomendamos indicarlo en píxeles.
Ten en cuenta que al especificar la dirección de la imagen, si esta imagen está en tu propio servidor puedes utilizar una dirección relativa, es decir, estas dos expresiones son válidas:
<img src="http://www.aprenderaprogramar.com/templates/apr02062010/images/logo.png" alt="Logotipo APR2">
<img src="templates/apr02062010/images/logo.png" alt="Logotipo APR2">
También podrás usar como origen de la imagen otro servidor, lo que significa que el navegador irá a buscar la imagen en la ruta que le indiques. Pero en este caso, deberás especificar la ruta completa, no será válido una ruta relativa. Ejemplo:
<img src="http://images4.hiboox.com/images/4711/9ed218f1fd2a5131ace4ee5a70e6198e.jpg" alt="Queso de almendras palmero">
Recuerda que los atributos que hemos indicado como obsoletos (deprecated) son etiquetas cuyo uso ya no se recomienda. El hecho de incluirlos en este curso obedece a que nos parece conveniente que se conozca su significado, ya que se pueden encontrar en muchas páginas web. Incluso hay desarrolladores web que siguen usando estas etiquetas. Más adelante veremos cómo conseguir los efectos deseados de la forma recomendada hoy día: mediante el uso de estilos (hojas de estilo CSS).
La etiqueta img cuenta con otros atributos menos usados que no vamos a citar aquí.
EJERCICIO
Abre cuatro páginas web distintas y captura la ruta de 4 imágenes que puedas encontrar en ellas (las imágenes que prefieras). A continuación crea un documento html donde incorpores un texto que indique el contenido de la imagen y a continuación se vea la imagen. Guarda el documento con un nombre como ejemploCU00714B.html y comprueba que se visualiza correctamente. Ejemplo:
Imagen que refleja una boda:
(… aquí la imagen)
Imagen que muestra un mercado:
(… aquí la imagen)
Imagen que muestra un atleta:
(… aquí la imagen)
Imagen que refleja un atardecer:
(… aquí la imagen)
Nota: la ruta de una imagen de una página web se puede capturar normalmente haciendo click con el botón derecho del mouse sobre la imagen y eligiendo la opción “Copiar la ruta de la imagen” ó “Ver información de la imagen” ó “Propiedades” ó “Copiar URL de la imagen” ó “Inspeccionar elemento”, dependiendo del navegador que estemos utilizando.
Para comprobar si tus respuestas son correctas puedes consultar en los foros aprenderaprogramar.com.
Para acceder a la información general sobre este curso y al listado completo de entregas pulsa en este link: Ver curso completo.
Para hacer un comentario o consulta utiliza los foros aprenderaprogramar.com, abiertos a cualquier persona independientemente de su nivel de conocimiento.
