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: 65
Visitas el mes pasado: 369
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.
Para incluir una imágen en una página HTML debemos guardarla previamente en la carpeta raíz de nuestra Web (o en alguna de sus carpetas secundarias), o bien tener localizada la URL o dirección de la imagen en otra página Web.
Para incluir imágenes usaremos la etiqueta <img/>
que llevará obligatoriamente el atributo src="URL_de_la_imagen"
.
El atributo src
cumple la misma función que el
atributo href
de los enlaces, y su valor es la ruta o
URL en donde tenemos guardada la imagen. Al igual que en los enlaces
la ruta puede ser de un archivo externo (guardado en otro sitio Web) o interno
(del propio sitio). Esto último suele ser lo más habitual, y es conveniente
guardar en una subcarpeta todas las imágenes del sitio. Esta subcarpeta
se le suele llamar "imágenes" u "objetos", para recordarla mejor.
Otro atributo que, si no es obligatorio, es muy recomendable es
el atributo alt="texto"
. Como valor se suele escribir un texto
corto que es el que aparecerá en el caso de que el navegador no pueda cargar la
imagen. Este texto suelen mostrarlo algunos navegadores en un recuadro
al pasar el ratón por encima de la imagen.
La sintaxis de una etiqueta de imagen en su forma básica será la siguiente:
<img src="URL_de_la_imagen" alt="texto_explicativo"/>
Las etiquetas de imagen no tienen etiquetas de cierre, por lo que suelen escribirse con una barra inclinada al final. Esta barra inclinada no es obligatoria, sin embargo es recomendable ponerla, tal como indica en la versión XHTML.
La ruta o URL se escribirá de la misma forma que para los enlaces (ver tema 3.2 Enlaces locales). Al escribir el nombre del archivo de imagen, escribiremos también su extensión.
Los tipos de imágenes más usados son los de extensión .gif .jpg .png
.
Estos son los formatos más habituales; ocupan poco espacio y dan una buena
calidad de imagen. Los formatos .gif y .png son más usados para dibujos,
mientras que el formato .jpg se suele usar más para fotos.
Como no siempre nos coincide el tamaño real de la imagen con el tamaño que queremos que tenga en nuestra página, muchas veces tenemos que modificar el tamaño de las imágenes para adaptarlas.
Aunque también podemos modificar el tamaño de la imagen con CSS,
esto no suele ser lo más recomendable, ya que como cada imagen es distinta
tendríamos que poner una línea de código CSS para cada imagen, con lo que
alargaríamos innecesariamente el código. Lo más normal es usar los
atributos height=" "
(alto) y width=" "
(ancho) en la etiqueta HTML, para definir el alto y el ancho de la imagen.
Los valores de los atributos height=" "
y width=" "
pueden ser números, que el navegador interpreta como píxeles; o también porcentajes,
que indican el tanto por ciento de espacio que ocupa la imagen dentro
de su elemento contenedor, caso de que no tuviera elemento contenedor,
éste sería la página (elemento body
).
Hay que tener cuidado al reducir o ampliar las imágenes, de guardar las proporciones del original, en otro caso la imagen saldrá distorsionada, (estirada a lo ancho o a lo alto); sin embargo podemos poner sólo uno de estos atributos, con lo cual el navegador calcula el otro para que la imagen salga en la misma proporción que la original. Veamos un ejemplo de código de imagen
<img src="imagenes/dibujo.gif" alt="dibujo 1" width="140" height="100"/>
El siguiente ejemplo muestra la misma imagen en varios tamaños:
En La siguiente página veremos como poder integrar la imagen en la página mediante atributos HTML.
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