mirror of
https://github.com/SrIzan10/edicion-en-html.git
synced 2026-06-26 18:32:20 +00:00
379 lines
16 KiB
HTML
379 lines
16 KiB
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
|
|
<html lang="es-es">
|
|
<head>
|
|
<title>Incluyendo imágenes en las páginas</title>
|
|
|
|
|
|
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
|
|
|
|
<!-- compliance patch for microsoft browsers --><!--[if lt IE 7]>
|
|
<script src="../ie7/ie7-standard-p.js" type="text/javascript"></script>
|
|
<![endif]-->
|
|
<link type="text/css" href="../nvu2005.css" rel="stylesheet">
|
|
|
|
<link rel="stylesheet" href="../multi2.css" type="text/css">
|
|
|
|
<link href="../body.css" rel="stylesheet" type="text/css">
|
|
</head>
|
|
|
|
|
|
<body>
|
|
<div id="localizador">
|
|
<p>Multimedia>>Imagen</p>
|
|
|
|
</div>
|
|
<div id="flechadcha">
|
|
<a href="multi1f.htm" title="avanzar"><img src="../Images/flechadcha.gif" border="0"></a>
|
|
</div>
|
|
<div id="flechaizq">
|
|
<a href="multi1d.htm" title="retroceder"><img src="../Images/flechaizq.gif" border="0"></a>
|
|
</div>
|
|
|
|
|
|
<div class="solapas">
|
|
<ul>
|
|
|
|
<li><a href="multi1.htm">Conceptos
|
|
generales</a></li>
|
|
|
|
<li><a href="multi1b.htm">Formatos
|
|
gráficos</a></li>
|
|
|
|
<li><a href="multi1c.htm">Escalar
|
|
imágenes</a></li>
|
|
|
|
<li><a href="multi1d.htm">Recortar y rotar</a></li>
|
|
|
|
<li class="activo"><a href="multi1e.htm">Insertar
|
|
imágenes</a></li>
|
|
|
|
<li><a href="multi1f.htm">Líneas e
|
|
imagen fantasma</a></li>
|
|
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
<div class="principal">
|
|
<h2>Incluyendo imágenes en las
|
|
páginas </h2>
|
|
|
|
<p>Cuando pulsamos el icono <img style="width: 47px; height: 40px;" alt="Insertar imagen" title="Insertar imagen" src="imagenes/icoinsertaimagen.png">
|
|
para insertar
|
|
imágenes se despliega una ventana de opciones muy completa.</p>
|
|
|
|
<p>La primera pestaña se utilizará para
|
|
seleccionar el archivo de imagen que pretendemos incluir en la
|
|
página. Al pulsar el botón correspondiente
|
|
iniciaremos una navegación por el disco para buscar el
|
|
archivo de imagen que queremos incluir en la página.</p>
|
|
|
|
<p>La configuración por defecto tiene activada la
|
|
opción <img style="width: 110px; height: 24px;" alt="Texto alternativo" title="Texto alternativo" src="imagenes/textoalternativo.png">
|
|
por lo
|
|
que si pulsamos <img style="width: 65px; height: 22px;" alt="Botón "Aceptar"" title="Botón "Aceptar"" src="imagenes/botonaceptar.png"> sin
|
|
haber tecleado un texto nos encontraremos con un aviso que nos recuerda
|
|
la función del mismo.</p>
|
|
|
|
<p class="centrado"><img style="height: 125px; width: 547px;" alt="Aviso de que falta texto alternativo" title="Aviso de que falta texto alternativo" src="imagenes/avisotextoalt.png"> </p>
|
|
|
|
<p>Cuando iniciemos la exploración de las carpetas se
|
|
mostrarán las imágenes almacenadas en alguno de
|
|
los tres formatos con los que hemos trabajado hasta ahora: <acronym title="Graphics Interchange Format">gif</acronym>, <acronym title="Portable Network Graphics">png</acronym> y
|
|
<acronym title="Joint Photographic Experts Group">jpg</acronym>.
|
|
De todas maneras podemos utilizar la vista <strong><img style="width: 99px; height: 21px;" alt="Código fuente" title="Código fuente" src="../imagenes/pestanacodigofuente.png"></strong>
|
|
para
|
|
introducir directamente en el código la referencia a una
|
|
imagen guardada en formato <acronym title="de BitMaP">bmp</acronym>
|
|
que también se
|
|
mostrará correctamente, pero no es recomendable hacerlo, ya
|
|
que el tamaño de las imágenes bmp es muy grande
|
|
al tratarse de un archivo sin pérdida y
|
|
no son adecuadas para su transmisión
|
|
por Internet.</p>
|
|
|
|
<p><img class="flotder" style="width: 324px; height: 231px;" alt="Redimensionar arrastrando" title="Redimensionar arrastrando" src="imagenes/redimension.jpg">La
|
|
segunda pestaña permitirá mantener el
|
|
tamaño original o modificarlo introduciendo las nuevas
|
|
dimensiones si seleccionamos <img style="width: 134px; height: 21px;" alt="Tamaño personalizado" title="Tamaño personalizado" src="imagenes/tamaniopersonalizado.png">
|
|
e introducimos los valores
|
|
numéricos que queremos adjudicarle. También
|
|
puedo, cuando he seleccionado una imagen y la tengo ya en la pantalla,
|
|
modificar su tamaño si pincho y arrastro alguno de sus
|
|
vértices. (Si lo hiciera sobre uno de los lados la
|
|
modificación no respetaría las proporciones).
|
|
Este procedimiento sería el equivalente gráfico
|
|
de la modificación numérica de las dimensiones en
|
|
la pantalla general de la imagen.</p>
|
|
|
|
<p>Si nos planteamos nuestra comodidad a la hora de
|
|
diseñar la página está claro que es un
|
|
método muy rápido, pero... ya hemos visto como
|
|
existe un procedimiento bastante rápido para <a href="multi1c.htm">escalar las imágenes</a>
|
|
y hacer que el "peso" de las mismas se redujera considerablemente,
|
|
así que ... si tenemos en cuenta a los posibles visitantes
|
|
de nuestra página la única conclusión
|
|
razonable es: <br clear="all">
|
|
|
|
</p>
|
|
|
|
<div class="avisos">
|
|
<p><img class="flotizq" src="../imagenes/atencion.gif" align="left" height="25" width="28">¡No
|
|
lo hagas nunca!
|
|
¿Por qué tienes que obligar a quien visita la
|
|
página a que descargue toda la información de la
|
|
imagen original para que luego su navegador ajuste el tamaño
|
|
y le muestre una miniatura?</p>
|
|
|
|
</div>
|
|
|
|
<p><img class="flotizq" style="width: 417px; height: 334px;" alt="Pestaña de propiedades de imagen" title="Pestaña de propiedades de imagen" src="imagenes/propiedadesdeimagenes.png">
|
|
La pestaña <img style="width: 66px; height: 22px;" alt="Apariencia" title="Apariencia" src="imagenes/pestaniaapariencia.png">
|
|
presenta una
|
|
pantalla en la que se pueden indicar el espaciado alrededor de la
|
|
imagen, el grosor de los bordes y la alineación entre el
|
|
texto y la imagen. </p>
|
|
|
|
<p>Los iconos que representan la alineación del texto
|
|
respecto a la imagen son suficientemente
|
|
explicativos: la imagen que introducimos, independientemente de su
|
|
tamaño, tiene la misma consideración que una
|
|
letra, por lo que habrá que
|
|
tener en cuenta que las alineaciones superior, central e inferior
|
|
sólo se aplicarán al texto que quepa hasta el
|
|
siguiente salto de línea, ya que al producirse el salto de
|
|
línea el siguiente renglón se colocará
|
|
debajo del que se acaba de completar. Aunque esto se verá
|
|
con detenimiento cuando se estudien los estilos podemos adelantar que
|
|
es porque las imágenes, al igual que las letras formar lo
|
|
que se denomina un elemento <em>"en línea"</em>
|
|
a la hora de construir una página.</p>
|
|
|
|
<p>Como lo que se pretende habitualmente cuando utilizamos la
|
|
alineación entre texto e imágenes es que el texto
|
|
fluya alrededor de la imagen lo más común
|
|
será utilizar una de las dos últimas opciones que
|
|
permiten que la imagen se alinee a la derecha o la izquierda,
|
|
respectivamente mientras el texto fluye por el costado libre. </p>
|
|
|
|
<p>En cuanto al espacio alrededor de la imagen es de cero
|
|
píxeles, tanto en horizontal como en vertical, al igual que
|
|
el borde sólido. Si queremos que la imagen mantenga una
|
|
distancia respecto al texto que la rodea será
|
|
aquí donde lo especifiquemos.<br clear="all">
|
|
|
|
</p>
|
|
|
|
<div class="practicas"> <img class="numact" style="width: 29px; height: 29px; float: left;" alt="Actividad 33" title="Actividad 33" src="../imagenes/numeracion/treintaytres.gif">
|
|
<ul>
|
|
|
|
<li> Salva en tu disco las tres imágenes siguientes
|
|
con el procedimiento que ya conoces.<img style="border: 0px solid ; width: 22px; height: 23px;" alt="Miniatura de un archivo gif animado" title="Miniatura de un archivo gif animado" src="../imagenes/tele.gif"><img style="border: 0px solid ; width: 25px; height: 23px;" alt="Miniatura de un archivo gif estático" title="Miniatura de un archivo gif estático" src="../imagenes/clara1.gif"><img style="border: 0px solid ; width: 24px; height: 21px;" alt="Miniatura de un archivo jpg" title="Miniatura de un archivo jpg" src="../imagenes/clara1.jpg"></li>
|
|
|
|
</ul>
|
|
|
|
<ul>
|
|
|
|
<li> Crea un documento nuevo y construye una tabla de una fila
|
|
y tres columnas. </li>
|
|
|
|
<li> Incluye en cada celda una de las imágenes
|
|
fijándote en cual pones las imágenes gif y en
|
|
cual está la jpg. Pasa al navegador guardando el trabajo
|
|
como <strong>actividad33.html</strong> (hemos
|
|
ajustado la numeración saltando saltado las actividades 27 a
|
|
32
|
|
en las que no habíamos creado ninguna
|
|
página y mantenemos la numeración de los archivos
|
|
en correspondencia con el número de práctica).</li>
|
|
|
|
<li> Comprueba la diferencia en la calidad de las dos fotos
|
|
según el formato. </li>
|
|
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
<div class="avisos">
|
|
<p><img class="flotizq" src="../imagenes/atencion.gif" align="left" height="25" width="28">Una vez
|
|
que hemos incluido una imagen en nuestra página podremos
|
|
volver en cualquier momento a la pantalla de propiedades para modificar
|
|
alguna de las características. Para ello podemos hacer doble
|
|
clic sobre la imagen, pulsar con el botón secundario del
|
|
ratón sobre la imagen y elegir <span class="refmenu">propiedades
|
|
de la
|
|
imagen</span>, o bien utilizar la
|
|
opción de
|
|
menú <span class="refmenu">formato <img src="../imagenes/flechamenu.png" height="13" width="14">
|
|
propiedades de imagen</span>.</p>
|
|
|
|
</div>
|
|
|
|
<div class="practicas"> <img class="numact" style="width: 29px; height: 29px; float: left;" alt="Actividad 34" title="Actividad 34" src="../imagenes/numeracion/treintaycuatro.gif">
|
|
<ul>
|
|
|
|
<li> Vuelve al editor y abre la práctica anterior si
|
|
la habías cerrado.</li>
|
|
|
|
<li>Activa las propiedades de la imagen y modifica el <b>tamaño</b>
|
|
de las fotos reduciendo el ancho y el alto a la mitad en una de ellas y
|
|
pasando al doble en la otra. También puedes modificar en una
|
|
de ellas el <b>espacio a izquierda y derecha </b>poniendo,
|
|
por ejemplo 50 píxels. </li>
|
|
|
|
<li> Pasa a la vista preliminar o al navegador para ver el
|
|
efecto. </li>
|
|
|
|
<li> Vuelve a la vista normal y escribe un texto junto a una de
|
|
la imágenes. Experimenta con diferentes alineaciones del
|
|
texto con respecto a ella. </li>
|
|
|
|
<li> Salva el trabajo como <strong>actividad34.html</strong></li>
|
|
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
<div class="estilo">
|
|
<p>Aunque no se pueden dictar normas
|
|
generales, suele ser recomendable que dejemos un espaciado horizontal
|
|
alrededor de la imagen. Ten en cuenta que dicho espacio se
|
|
aplicará a ambos lados de la imagen. El espaciado vertical
|
|
no suele ser necesario, ya que el propio interlineado es suficiente en
|
|
la mayoría de los casos.</p>
|
|
|
|
<p>En cuanto al borde sólido no es más que
|
|
un marco
|
|
(de color negro) que se coloca alrededor de la imagen. No aporta mucho
|
|
estéticamente y puede acabar por dar un cierto tono
|
|
fúnebre, ya que si se pone un poco grueso recuerda
|
|
inevitablemente a una esquela mortuoria. Posiblemente sólo
|
|
esté justificado en determinadas imágenes en las
|
|
que, por sus especiales características, el marco pueda
|
|
suponer un realce estético.</p>
|
|
|
|
<p>Si la imagen soporta un enlace el cuadro se pone de color azul
|
|
o morado
|
|
según hayamos visitado o no el enlace. El lenguaje
|
|
gráfico de la WEB ha evolucionado lo suficiente como para
|
|
que no sea necesario indicar con un recuadro que esa imagen es un
|
|
enlace. </p>
|
|
|
|
<p>Si en algún momento
|
|
pretendes
|
|
localizar en el código las etiquetas que tienen que ver con
|
|
las imágenes verás que tienen la siguiente forma
|
|
según el modo de trabajo que estés utilizando</p>
|
|
|
|
<p>Si trabajas con los estilos CSS desactivados:
|
|
</p>
|
|
|
|
<p><code><img src="atencion.gif" width="28"
|
|
height="25" alt="marca de aviso"></code></p>
|
|
|
|
<p>Si trabajas con los estilos CSS activados:</p>
|
|
|
|
<p><code><img src="atencion.gif"
|
|
style="width:28px;
|
|
height:25px; float:right;" alt="marca de aviso"></code></p>
|
|
|
|
<p>Como ves, en el caso de trabajar con CSS los atributos de
|
|
ancho, alto y
|
|
alineación, se agrupan dentro del selector style.
|
|
Además hay una interpretación desde diferente
|
|
punto de vista de la alineación: mientras que en
|
|
el primer caso se considera el punto en el que se encuentra alineada la
|
|
imagen (align="left") en el segundo se utiliza la idea de
|
|
flotación, indicando el lugar en el que flotará
|
|
la imagen (float: left). El resto de elementos de la
|
|
etiqueta son la identificación de la
|
|
fuente de imagen, esto es, el nombre del archivo, y el
|
|
atributo alt que nos indica el texto
|
|
descriptivo que se mostrará durante el proceso de carga o
|
|
cuando esté desactivada la visualización de
|
|
imágenes.</p>
|
|
|
|
<p><img src="../imagenes/atencion.gif" height="25" width="28"> Es muy importante
|
|
que figuren los atributos de anchura y altura, porque eso permite al
|
|
navegador que reserve un espacio para la imagen y continúe
|
|
cargando el resto de la página aunque no haya recibido
|
|
completamente la imagen. N|VU calcula automáticamente estas
|
|
medidas a partir de las dimensiones de la imagen y las incluye en el
|
|
código.</p>
|
|
|
|
</div>
|
|
|
|
<br>
|
|
|
|
<div class="avisos">
|
|
<p> <img src="../imagenes/atencion.gif" height="25" width="28">El recordatorio que presenta
|
|
N|VU es muy claro en cuanto a la función que
|
|
desempeña el texto alternativo. Sin embargo, una mala
|
|
práctica tradicional, a la que ha colaborado la
|
|
interpretación que hace Internet Explorer del atributo <code>alt</code>,
|
|
ha confundido su función: Internet Explorer presenta el
|
|
texto alternativo como texto emergente que se muestra al colocarse
|
|
sobre una imagen, cuando si queremos conseguir ese efecto lo correcto
|
|
es utilizar el atributo <code>title</code>. Los
|
|
navegadores que se ajustan a las especificaciones
|
|
del <acronym title="World Wide Web Consortium">W3C</acronym> sólo
|
|
muestran texto emergente cuando se ha
|
|
utilizado el atributo <code>title</code>, reservando el
|
|
contenido <code>alt</code> para la
|
|
función que se ha creado. </p>
|
|
|
|
<p>Para especificar el texto podemos hacerlo de varias
|
|
formas: </p>
|
|
|
|
<ol>
|
|
|
|
<li>usando <img style="width: 370px; height: 23px;" alt="Caja de título emergente" title="Caja de título emergente" src="imagenes/tituloemergente.png"> en la
|
|
ventana de selección de imagen </li>
|
|
|
|
<li>haciendo clic con el botón derecho
|
|
sobre la etiqueta <code><img></code>
|
|
en la barra de estado y eligiendo <span class="refmenu">propiedades
|
|
avanzadas</span>. Una vez allí desplegamos los <span class="refmenu">atributos</span>, elegimos <code>title</code>
|
|
y escribimos el texto en la caja disponible para especificar el <span class="refmenu">valor</span></li>
|
|
|
|
<li>añadiendo dentro de la etiqueta de la imagen el
|
|
atributo <code>title="Texto
|
|
que aparecerá"</code> desde
|
|
la pestaña <strong><img style="width: 99px; height: 21px;" alt="Código fuente" title="Código fuente" src="../imagenes/pestanacodigofuente.png"></strong></li>
|
|
|
|
<li>esto último puede ser mucho más
|
|
efectivo si, una vez seleccionada la imagen, sea en la
|
|
etiqueta de la barra de estado o sobre la propia imagen, elegimos la
|
|
opción de menú <span class="refmenu">insertar
|
|
<img src="../imagenes/flechamenu.png" height="13" width="14"> html</span>, ya que se muestra
|
|
directamente la etiqueta que se verá afectada, sin necesidad
|
|
de buscarla entre todo el código. </li>
|
|
|
|
</ol>
|
|
|
|
</div>
|
|
|
|
<div class="practicas">
|
|
<img class="numact" style="width: 29px; height: 29px; float: left;" alt="Actividad 35" title="Actividad 35" src="../imagenes/numeracion/treintaycinco.gif">
|
|
<p>Abre la <strong>actividad34.html</strong>
|
|
y modifica las imágenes para
|
|
que incluyan los atributos <code>alt</code> y <code>title</code>.</p>
|
|
|
|
<p>Si trabajas en Windows es muy conveniente que
|
|
compruebes el comportamiento de otros navegadores cuando no
|
|
existe la etiqueta <code>title</code>. Para ello es muy recomendable que instales
|
|
Firefox y visualices con este navegadorl el resultado de las
|
|
páginas que estás creando.</p>
|
|
|
|
</div>
|
|
|
|
<div class="derecha flotder">
|
|
<p> </p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|