HTML Goodies

Handsome guy, huh?

Goodies Tutorials

Cursos, Tips, ...

tabs

HTML Básico: Primario #6
Manipulando Imágenes

por Joe Burns, Dr. en Filosofía

traducción Lewis Skolnik,
MicroTac Spanish Assistant
for Windows 1.0b

...Usa estos para brincar alrededor o leerlo todo

[Colocación En La Página][Alineando Texto Con Imágenes][Cambiando Tamaño De Imagen]
[La Orden <HR>]
Lo mismo que pensé un primero (Primero #3) fue requirido explicando cómo manipular texto, también pienso que se requiere uno en cómo manipular imagenes. Creelo o no, manipular imagenes es más fácil que manipular texto. Así, aquí vamos.

Colocación En La Página

Primero preocupemosnos por colocar la imagen en alguna parte en la página. La presunción por omisión es la izquierda. Si simplemente pones una orden de imagen en una página, la imagen aparecerá firme en la izquierda. No hay nada para esto. Si quieres tener una imagen colocada en el centro de la página, usas las ordenes <CENTER> y </CENTER> vistas en Primero #3. Pero para hacer la imagen a la derecha de la página, necesitas agregar una orden ALIGN. Como esta:

<IMG ALIGN="right" SRC="image.gif">

Aquí está qué lo obtienes haces usando "sally.gif":

Alineando Texto Con Imágenes

Imagenes no están siempre solas. Querrás a menudo texto a lo largo de un lado de ellos. Aquí ALINEARAS texto a lo largo de la cima, el medio, o el fondo. De nuevo, simplemente insertas una orden ALIGN con uno de los tres...top, middle, ó bottom. Aquí están los ejemplos:

<IMG ALIGN="top" SRC="sally.gif"> texto texto texto

<IMG ALIGN="middle" SRC="sally.gif"> texto texto texto

<IMG ALIGN="bottom" SRC="sally.gif"> texto texto texto

Aquí está a lo que los ejemplos se parecen:

Este es texto ALIGN="top"

Este es texto ALIGN="middle"

Este es texto ALIGN="bottom"

Cambiando Tamaño De Imagen

Para empezar, recuerda, imagenes en una computadora no son como una fotografía. Imagenes de computadora están hechas de muchos puntos pequeños coloreados. Conocidos como pintura elementos [picture elements], o "pixeles" para abreviar. Así, sólo recuerda eso durante esta parte del Primero, los números refieren a pixeles en lugar de pulgadas, o centímetros, o cualquier otro.

Cada imagen está hecha de pixeles. Esto significa que puedes denotar también una imagen por número de pixeles. Por ejemplo la imagen "sally.gif" es 97 pixeles alto por 64 pixeles ancho. ¿Cómo sé eso? Tengo un costoso programa de gráficos que me lo dice. ¿Cómo sabrías tú? Sin un programa específico tendrás que jugar con los números en estas ordenes un poco pero esto es fácil de hacer. Puedes querer también abrir la imagen por si misma en tu ventana del hojeador. Haz eso escogiendo "ABRIR ARCHIVO" debajo del menú superior ARCHIVO. Cuando la imagen aparezca, mira la barra de título a lo largo de la parte superior. Algunos hojeadores despliegan los pixeles allí para ti.

Aquí está lo que haces. Denota en la orden de imagen cuántos pixeles alto por cuántos pixeles ancho quieres. La imagen "sally.gif" es 64X97 pixeles. Si quiero que la imagen aparezca más pequeña, pediré a los pixeles ser más pequeños, digamos 30X55. Si lo quieres más grande, pondrías los pixeles más grandes, digamos 100X250. Si quiero deformar totalmente la imagen, puedo.

Aquí está la fórmula:
<IMG HEIGHT="##" WIDTH="##" SRC="image.gif">

Date cuenta que las ordenes HEIGHT y WIDTH anidadas a la derecha donde la orden ALIGN estuvo antes. Reemplazarás el "##" con un número de pixeles para altura y anchura. Aquí están los tres ejemplos:

Este es tamaño normal:

Este es 30X55:

Este es 100X250:

Este es 100X23:

La Bandera <HR>

La orden WIDTH también trabaja en la orden <HR>, ¡Excepto! Que usarás porcentajes. Mira esto:

<HR WIDTH="40%"> te da esto:

<HR WIDTH="64%"> te da esto:

Y eso lo cubre. Prueba estos en la comodidad de tu propio hogar bajo la vigilancia de un adulto. Si eres un adulto, entonces halla un niño quien pueda programar la grabadora de videocinta para ayudarte a lo largo de.

Escríbeme si lo deseas. Te responderé si me es posible.

Ir a Primario #7

Regresar a Página Hogar Bienes HTML

[Colocación En La Página][Alineando Texto Con Imagenes][Cambiando Tamaño De Imagen]
[La Orden <HR>]