Home UC3M
Home IT
Home / Docencia / Introducción a HTML

Intro a HTML

Fases de Diseño de un sitio Web: III. Fase Producción

Índice


  1. Imágenes

En este ejercicio se agregarán imágenes a los documentos. Para hacerlo, se utilizará la etiqueta <img> con uno o más atributos. La forma básica de emplear esta etiqueta es: <img src="url">. Donde el atributo src (del inglés Source que significa fuente) contiene como valor un url . Este url indica la dirección y el nombre de la imagen que se desea insertar.Esta dirección puede ser absoluta o relativa. La imagen puede estar en cualquiera de los formatos que reconocen los navegadores (jpg, gif, png, etc.).

Existen otros atributos que no son obligatorios pero es recomendable usarlos dentro de las etiquetas <IMG>. Estos atributos son:

  • El atributo alt (del ingles alternate que significa alternativo) indica el texto que se observa cuando el navegador no puede mostrar la imagen
  • Los atributos width y height (que significan ancho y alto en inglés respectivamente) sirven para especificar o modificar el tamaño de la imagen,. El siguiente es un ejemplo completo:
    <img src="http://www.it.uc3m.es/pics/gif/c3mlogop.gif" alt="Logotipo de la Universidad Carlos III de Madrid" height="60" width="60"> Logotipo de la Universidad Carlos III de Madrid

Hay otros muchos atributos que se pueden aplicar a la etiqueta <img> y que no son tan frecuentes:

  • El atributo align (que singnifica alinear en inglés) permite especificar con detalle la forma de alinear las imágenes con respecto al texto. Las imágenes por defecto están alineadas de tal forma que la parte inferior de cada imagen coincide con la base de la línea de texto (la línea sobre la que se situan los caracteres, sin considerar los caracteres con trazos hacia abajo, como en el caso de p, q, j, g, y), pero esto se puede modificar dando distintos valores al atributo align.
  • El atributo border (que significa borde o margen en inglés) sirve para cambiar el espacio que rodea a una imagen. Para hacerlo se utiliza el atributo border=número, el número indica el espacio de separación medido en pixels. En particular, cuando la imagen es parte de un hiperenlace el borde que se define con este atributo tendrá el mismo color que los hiperenlaces. Este borde de color se puede eliminar danto al atributo BORDER el valor cero.

A continuación mostramos una tabla resumen de los valores que pueden tomar estos atributos y de su efecto sobre las imágenes. Hemos rodeado la imagen de la carpeta de texto para que compruebes la alineación relativa.

Atributo Valor del atributo Estilo Ejemplo
ALIGN <img ALIGN="texttop"> La parte superior de la imagen se alinea con la parte superior del texto
pppp dddd
<img ALIGN="absmiddle"> El centro (en altura) de la imagen se alinea con el centro (también en altura) del texto.
pppp dddd
<img ALIGN="center"> La línea base del texto se alinea con el centro (en altura) de la imagen
pppp dddd
<img ALIGN="absbottom"> La parte inferior de la imagen se alinea con la parte inferior del texto (incluyendo los trazos inferiores de letras como la y o la p)
pppp dddd
<img ALIGN="left"> La imagen aparece a la izquierda de la página, el texto aparece a su derecha. pppp dddd
<img ALIGN="right"> La imagen aparece a la derecha de la página, el texto aparece a su izquierda. pppp dddd
BORDER <img BORDER="0"> Anchura del marco exterior. Valor="0" indica que no hay marco (coincide con el valor por defecto cuando no aparece el atributo BORDER)
pppp dddd
<img BORDER="3"> Anchura del marco exterior = 3 pixel . Puede tomar cualquier valor numérico
pppp dddd



Ejercicio

Tarea

Practica la etiqueta <img> y sus atributos alt, width y height con el editor interactivo.

Procedimiento

  1. Abre el editor interactivo pulsando aquí.
  2. Escribe en el lado izquierdo el siguiente código HTML:
    <html>
      <body>
        <h3>Imágenes y sus atributos</h3>
        <p>
          Es posible insertar imágenes en los documentos HTML, para ello se utiliza
          la etiqueta IMG:
        <IMG SRC="http://www.it.uc3m.es/pics/cartoons/bear1.gif" 
          alt="Un ejemplo de icono">.
        </p>
        <p>
          Se puede modificar el tamaño de la imagen, para ello se emplean los
          atributos <TT>HEIGHT</TT> y <TT>WIDTH</TT>:
          <ul>
            <li>
              Esta imagen está en su tamaño real:
              <IMG SRC="http://www.it.uc3m.es/pics/cartoons/bear1.gif" 
                height="33" width="32" 
                alt="Un ejemplo de imagen">
            </li>
            <li>
    	  Esta imagen está al doble de su tamaño:
    	  <IMG SRC="http://www.it.uc3m.es/pics/cartoons/bear1.gif" 
    	    height="66" width="64" 
    	    alt="Un ejemplo de imagen">
    	</li>
    	<li>
    	  El tamaño de esta imagen no es proporcional a su tamaño real:
    	  <IMG SRC="http://www.it.uc3m.es/pics/cartoons/bear1.gif" 
    	    height="33" width="70" 
    	  alt="Un ejemplo de imagen">
            </li>
          </ul>
        </p>
    
        <p>
          Las imágenes se pueden alinear de distintas formas con el texto
          utilizando el atributo <tt>ALIGN</tt>. Esta imagen está
          alineada a la derecha<br>
    
          <IMG ALIGN="right" 
            SRC="http://www.it.uc3m.es/pics/cartoons/bear1.gif" 
            height="33" width="32" alt="Un ejemplo de imagen">
        </p>
    
        <p>
          Las imágenes pueden estar enmarcadas por un borde de distintos tamaños
          utilizando el atributo <tt>BORDER</tt>.
          Esta imagen tiene un borde de tamaño uno.
          <IMG BORDER="1" 
            SRC="http://www.it.uc3m.es/pics/cartoons/bear1.gif" 
            height="33" width="32" alt="Un ejemplo de imagen">
        </p>
      </body>
    </html>
    
  3. Guarda los cambios y vuelve a cargar la página en el navegador.
Go Up

Solución:

Debería verse:

Imágenes y sus atributos

Es posible insertar imágenes en los documentos HTML, para ello se utiliza la etiqueta IMG: Un        ejemplo de icono.

Se puede modificar el tamaño de la imagen, para ello se emplean los atributos HEIGHT y WIDTH:

  • Esta imagen está en su tamaño real: Un ejemplo de imagen
  • Esta imagen está al doble de su tamaño: Un ejemplo de imagen
  • El tamaño de esta imagen no es proporcional a su tamaño real: Un ejemplo de imagen

Las imágenes se pueden alinear de distintas formas con el texto utilizando el atributo ALIGN. Esta imagen está alineada a la derecha
Un ejemplo de imagen

Las imágenes pueden estar enmarcadas por un borde de distintos tamaños utilizando el atributo BORDER. Esta imagen tiene un borde de tamaño uno. Un ejemplo de imagen


Observaciones:

  • La etiqueta <img> al igual que ocurría con las etiquetas <hr> y <br> no necesita etiqueta de cierre </img>
  • La descripción de las etiquetas que se utiliza en el atributo alt puede abarcar más de una línea, como se muestra en el código del ejercicio.
  • El icono que se usa en el ejemplo aparece como parte del texto. Si se quisiera que apareciera en una línea aparte, habría que crear un salto de línea mediante una de las etiquetas de separación: <br> <hr> o <p>.
  • Es conveniente indicar explícitamente el tamaño de la imagen, de esta forma el navegador puede mostrar el resto de la página, dejando en blanco la zona que ocupará la imagen; si no se especifica el tamaño, el navegador tiene que esperar a tener la imagen completa antes de mostrar la página. Para saber el tamaño de la imagen puedes utilizar cualquier programa para el tratamiento de gráficos como LView: .
  • Observa como cambia el tamaño de las imágenes cambiando el valor de los atributos height y width . Elimina el atributo width y especifica únicamente el atributo height. Observa que cuando sólo se especifica uno de los dos atributos el otro se ajusta automáticamente, mientras que si se especifican los dos aparece un mensaje de error o sale la imagen deformada si las dimensiones especificadas no son proporcionales a las que originalmente tenía el fichero.
  • Observa como cambia la alineación de las imágenes y el borde que las rodea modificando el valor de los atributos align y border.
  • Puedes descargar de Internet cualquier imagen que te resulte de interés para ello simplemente tienes que tener abierta en el navegador la página que contiene las imágenes que te interesan. Pulsa sobre la imagen con el botón derecho del ratón y selecciona la opción "Guardar Imagen como"A continuación te proporcionamos un par de páginas web desde donde puedes descargar las imágenes que quieras para tus páginas:
  • Para tener en tus páginas imágenes presentes en otros sitios web no es necesario que las descarges en tu propio ordenador, puedes simplemente referenciarlas mediante el URL en el que se encuentran.
  • Si vas a utilizar una imagen que no has creado tú o que no se dice explícitamente que sea de libre distribución conviene que te pongas en contacto con el autor de la imagen o del sitio web en el que se encuentra ubicada para pedir permiso para su utilización.

  2. Proyecto: Imágenes

En esta fase del proyecto trataremos de hacer nuestras páginas web algo más atractivas añadiendo algunas imágenes y pequeños iconos a las diferentes páginas. Para ello utilizaremos la etiqueta <img src="url" alt="texto alternativo"> donde url indica la dirección relativa donde hemos almacenado las imagenes dentro de nuestro web. En el caso de Telémaco tendremos urls de la forma "imagenes/fichero.gif", ya que como puedes ver en la figura todos los iconos y fotografías (en formato gif, jpeg, png, etc.) se encuentran almacenados en un directorio llamado imagenes

En esta fase añadiremos:

  • La foto de telémaco en la página principal index.html
  • Fotos de algunos paisajes en la página Fotos.html
  • Iconos representativos de cada sección en la página Aficiones.html tal y como puedes ver en la siguiente figura.


Aplicación práctica

Tarea

Añade imágenes a tus páginas web utilizando la etiqueta <img src="url" alt="texto alternativo">.

Procedimiento

  1. Observa la página web de telémaco representada en la figura anterior.
  2. Abre con el wordpad los ficheros.html de tu sitio web a los que quieras añadir una imagen.
  3. Utiliza la etiqueta <img src="url" alt="texto alternativo"> para indicar mediante el atributo src la dirección del fichero de imagen que quieres enlazar y mediante el atributo alt el texto alternativo que se debe mostrar en caso de que exista algún problema que no permita mostrar la imagen.
  4. Puedes utilizar los atributos width y height (que significan ancho y alto en inglés respectivamente) para especificar o modificar el tamaño de la imagen
  5. Puedes descargar de Internet cualquier imagen que te resulte de interés para ello simplemente tienes que tener abierta en el navegador la página que contiene las imágenes que te interesan. Pulsa sobre la imagen con el botón derecho del ratón y selecciona la opción "Guardar Imagen como". En esta página (http://www.it.uc3m.es/pics) puedes encontrar colecciones de imágenes que te pueden resultar de interés.
  6. Guarda cada uno de los ficheros.html y ábrelos con el navegador (Internet Explorer o Netscape Navigator) para comprobar el resultado.
  7. Comprueba que puedes visualizar las imagenes correctamente.
  8. Si el resultado no es como esperabas revisa de nuevo el contenido de tu página y comprueba si todas las etiquetas se abren y se cierran correctamente.
  9. Si tienes alguna duda coméntala con tus compañeros en el foro titulado "HTML"
Go Up

Solución:

Observaciones

  • Comprueba el aspecto de las páginas de Telémaco en el navegador pulsando sobre cada una de ellas (index.html, Fotos.html, Aficiones.html)
  • Puedes consultar el código HTML de esta página (o de cualquier página que consultes en Internet) desde tu navegador para hacerlo:
    • Si utilizas Internet Explorer: Selecciona la opción de menú (Ver|Código Fuente)
    • Si utilizas Netscape Navigator: Selecciona la opción de menú (Ver|Origen de la página)


Localización | Personal | Docencia | Investigación | Novedades | Intranet
inicio | mapa del web | contacta

Last Revision: