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: 29-01-2016.

Visitas este mes: 91

Visitas el mes pasado: 99

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 (IV)

5.4 Más sobre imágenes.

html

Imágenes de fondo

Podemos insertar una imagen de fondo en la página. La forma más habitual es hacerlo mediante CSS, tal como veremos en el siguiente tema. Sin embargo aquí veremos cómo puede insertarse también mediante HTML. Para ello en la etiqueta <body> incluiremos el atributo background="URL_de_la_imagen" . el código será así:

<body background="imagenes/fondo.gif">

La imagen se repite en forma de mosaico hacia la izquierda y hacia abajo hasta completar toda la página. La siguiente página de ejemplo tiene esta imagen de fondo:

imagen: Mosaico de fondo

Página de ejemplo


Este método de incluir fondos no suele ser el más utilizado, ya que las imágenes de fondo suelen incluirse mediante código CSS. El código CSS tiene más opciones para las imágenes de fondo.

Con HTML sólo podemos incluir fondo en el elemento body y en celdas de tablas (veremos las tablas más adelante), mientras que con CSS podemos incluir fondo a casi todos los elementos de la página, (párrafos, elementos div, etc.), y además se puede controlar si la imagen de fondo se va a repetir o no.

Conviene tambien poner un color de fondo parecido al de la imagen, mediante el atributo bgcolor="color", ya que caso de que no se cargara la imagen, se vería el color de fondo.


Otros valores del atributo align

Aunque son muy poco empleadas por su escasa utilidad, el atributo align en las imágenes puede tomar otros valores:

  • align="top" : Ajusta la imagen a la parte más alta de la línea. Esto quiere decir que, si hay una imagen más alta, ambas imágenes presentaran el borde superior a la misma altura.
  • align="bottom" : Ajusta el bajo de la imagen al texto.
  • align="middle" : Hace coincidir la base de la línea de texto con el medio vertical de la imagen.

La siguiente página muestra algunos ejemplos de la utilización del atributo align en imágenes.

Página de ejemplo


Favicon

El favicon es la pequeña imagen que se ve en la pestaña del navegador a la izquierda del título de la página. Algunos navegadores también la muestran en la barra de navegación, es decir en la ventana superior, donde se muestra el nombre o URL de la página.

Estas imágenes para que se vean bien tienen que tener la extensión .ico aunque algunos navegadores más modernos admiten formato .gif y .png. Este tipo de imágenes se llaman iconos y deben tener un tamaño de entre 16 x 16 píxeles y 48 x 48 píxeles.

Siempre que podamos debemos usar los archivos con extensión .ico ya que son los únicos que se verán en todos los navegadores.

para incluir el favicon en una página debemos primero guardar el archivo de imagen (.ico) en la carpeta de nuestra Web, y después insertar en la cabecera de la página (entre <head> ... </head>) la siguiente línea:

<link rel="shortcut icon" href="direccion_archivo.ico"/>

Lo único que debemos cambiar de esta línea es la dirección o URL de donde hemos guardado el archivo (valor del atributo href).

Una forma muy sencilla de insertar el favicon en todas las páginas de nuestro sitio es guardar el archivo en la carpeta de nivel superior de nuestro sitio, donde está el archivo "index.html", y cambiar el nombre del archivo de imagen para llamarlo "favicon" (favicon.ico). Con este único cambio todas las páginas de nuestro sitio tomarán por defecto este archivo como favicon. Este cambio no se puede ver en el sitio local de tu ordenador, pero al subir la Web al servidor se puede comprobar que se ha producido.


Tratamiento de imágenes.

Aunque no forma parte del aprendizaje del diseño de páginas Web, unas mínimas nociones sobre tratamiento de imágenes resultan básicas para manejarlas y poder incluirlas satisfactoriamente en las páginas.

También hay muchos sitios Web en los que te puedes bajar cientos de imágenes, tanto normales, transparentes, animadas, o iconos para el favicon.

En la sección de complementos incluimos in mini-manual sobre Imágenes en la web. Explicamos varios aspectos sobre el tratamiento que debemos dar a las imágenes que queremos subir a la web. No está de más que le eches un vistazo si te interesa el tema.




Si seguimos sólo el curso de HTML continuaremos en el siguiente tema:

Tablas


Si seguimos el curso de HTML y CSS al mismo tiempo continuaremos en:

Estilo de imágenes







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