Crea tu Web: Indice de diseño

Ahora también
> HTML versión 5 <
  • Introducción al curso
    • Introducción
    • Requisitos
    • Agradecimiento
  • El HTML
    • Versiones de HTML
    • HTML 2.0
    • HTML 3.0 y 3.2
    • HTML 4.0
    • Estándares en este curso
  • Mi primera página
    • La primera página
    • El código
    • La explicación
    • El cuerpo del documento
  • El documento HTML
    • La página
    • La cabecera
    • El cuerpo
  • Formato del texto
    • Formato básico
    • Formato del párrafo
    • Las 6 cabeceras
    • Cambiando el tipo de letra
    • Formato de frase
    • Otros elemento
  • Tipos de letras
    • Formateo de texto
    • Cambio de color
    • Tamaños del texto
    • Tipo de letra
  • Caracteres especiales
    • Caracteres especiales
    • Caracteres extendidos
    • Caracteres de control
  • Enlaces web
    • Los enlaces
    • La etiqueta <A>
    • Las URLs
    • Anclas
  • Listas
    • Listas
    • Listas desordenadas
    • Listas ordenadas
    • Listas de definiciones
  • Imágenes
    • Imágenes
    • Imágenes y enlaces
    • Alineación respecto al texto
  • Formularios
    • Formularios
    • Cajas de texto
    • Opciones
    • Botones del formulario
    • Otros elemento
  • Formularios avanzados
    • Controles avanzados
    • Etiquetas
    • Agrupación de elementos
    • Desactivación de elementos
  • Mapas
    • Mapas
    • Mapas lado cliente
    • Cómo usar un mapa
  • Tablas
    • Tablas
    • Definir las filas
    • Definir las celdas
    • Título de la tabla
  • Marcos
    • Marcos
    • Etiqueta <FRAMESET>
    • Etiqueta <FRAME>
    • Acceso a otros marcos
  • Hojas de estilo (1)
    • Estilos CSS
    • Clases
    • Etiquetas <SPAN> y <DIV>
  • Hojas de estilo (2)
    • Referencia CSS
    • Propiedades de bloque
    • Propiedades de tipo de letra
    • Propiedades de formato del texto
    • Propiedades de color y fondo
    • Propiedades de clasificación
  • Los scripts
    • Los Scripts
    • Javascript
  • Capas
    • Las capas
    • Definición
    • Propiedades
  • Sonido
    • Sonido en la página
    • Sonido manual
    • Sonido de fondo
  • Trucos
    • Guía de estilo
      • Guía de estilo
      • Contenido
      • Navegación
      • Estructura de las páginas
      • Accesibilidad
      • Diseño
      • Mantenimiento y prueba
    • Enlaces de interés
      • Más HTML
      • Más JavaScript
      • HTML dinámico
      • Otras tecnologías
      Imágenes
      Insertar imágenes

      Una página web sin alguna imagen es como el mar sin sal. Para incluir gráficos e imágenes en nuestras páginas utilizaremos la etiqueta

      <IMG SRC="fichero_grafico" ALT="descripcion" WIDTH=88 HEIGHT=31 BORDER=0>

      El parámetro SRC especifica la URL del fichero que contiene el gráfico. Los formatos estándar en la red son el GIF, PNG y JPG. Si quieres saber más sobre imágenes e internet debes dirigirte a esta sección dedicada al tema en la guía de diseño.

      El parámetro ALT especifica el texto que se mostrará en lugar del gráfico en aquellos navegadores que no sean capaces de mostrarlos (como el Lynx) y en el supuesto de que el usuario los haya desactivado. Algunos navegadores lo muestran cuando pasamos el ratón por encima de la imagen. Es por eso que, aunque algunos usuarios no lo lleguen a ver nunca, conviene ponerlo siempre. De hecho, el estádar HTML 4.0 obliga a hacerlo. Su uso es además muy interesante cara a los robots buscadores que de este atributo pueden sacar información del tema tratado en la página.

      Los atributos WIDTH y HEIGHT indican el ancho y alto del gráfico en pixels. Su uso no es obligatorio pero si muy aconsejable para mejorar el tiempo de carga de la iamgen: el navegador sabe el espacio que ocupará la imagen y puede seguir colocando los otros elementos de la página mientras se termina de descargar la imagen.

      Por último vemos el atributo BORDER que como podrás adivinar tan solo coloca el ancho del borde que rodea la imagen. Por defecto su valor es cero, salvo el caso que vemops en el siguiente apartado.

      Por ejemplo

      <img src="/imgs/im_crear/pubcorreo.gif" width="30" height="32" alt="correo">

      Correo

      arriba


       Imágenes y enlaces

      Recordarás que al hablar de los enalces decíamos que en el contenido de la etiqueta <A> podía ir texto o una imagen. En este caso el navegador destaca la imagen colocandole un borde del color que use para señalar los enlaces de texto. Algo bastante lógico pero que en la mayoría de los casos queda poco estético, afortunadamente podemos eliminar ese borde poniendo a 0 el atributo BORDER.

      <a href="tema1.htm">
      <img src="/imgs/im_crear/indice2.png"
      alt="Tema 1" width="45" height="30">
      </a>

      Se ve así:

      Tema 1

      Sin embargo,

      <a href="tema1.htm">
      <img src="/imgs/im_crear/indice2.png" 
      alt="Tema 1" width="45" height="30" BORDER="0"> </a>

      Se ve así:

      Tema 1
      arriba


      Alineación respecto al texto

      HTML nos permite controlar la disposición de las imágenes en la página con relación al texto, para ello usamos el parámetro ALIGN :

      ALIGN= Significado Muestra
      TOP Coloca el punto más alto de la imagen coincidiendo con más alto de la línea de texto actual. Netscape 4.0Este es el texto
      MIDDLE Alinea el punto medio (en altura) de la imagen con la base del texto. Netscape 4.0Este es el texto
      BOTTOM Alinea el punto más bajo de la imagen con la base del texto. Netscape 4.0Este es el texto
      LEFTHTML 3.2 Coloca la imagen a la izquierda del texto. Netscape 4.0Este es el texto y esta es otra línea
      RIGHTHTML 3.2 Coloca la imagen a la derecha del texto. Netscape 4.0Este es el texto y esta es otra línea

      Hay que aclarar que la base del texto es la línea donde descansan casi todas las letras del alfabeto excepto algunas como la p, la g o la j.

      arriba


      Comunidad Virtual. Alojamiento gratis