Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Logo

Aprende Web

Crea y diseña tus sitios en la Web.

Manual de HTML

HTML: lenguaje básico para crear páginas web


Y ahora tambien aprende a programar en C++ con Aprende Web C++

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net





Sobre ésta página

Ültima modificación: 22-08-2017.

Visitas este mes: 271

Visitas el mes pasado: 358

logo
WEB-GRAFÍA

Mi agradecimiento a los siguientes sitios en los que me he basado para la elaboración de este manual.:

Desarrollo Web: manual de HTML
Desarrollo Web, por Rubén Álvarez
Cómo crear tu Web: curso de HTML
ComoCrearTuWeb, Por Georgens
Libros Web: introducción a XHTML
Libros web, por Javier Eguíluz Pérez
Curso de HTML: AulaFácil
www.aulafacil.com
Curso de html: Programación Web
www.programacionweb.net
WebEstilo: manual de html
www.webestilo.com
W3 schools; HTML Tutorial
www.w3schools.com
Tutorial html
Juan José López García
Universidad de Murcia
Introducción al lenguaje html
wikilearning

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




5. Imágenes (I)

5.1 Insertar imágenes

html

Cómo insertar una imágen

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.


Tamaño de la imagen

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:

imagenes de ejemplo





En La siguiente página veremos como poder integrar la imagen en la página mediante atributos HTML.

Estilo con HTML.







manual de HTML

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un manda un correo

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com