HTML Goodies

Handsome guy, huh?

Goodies Tutorials

Cursos, Tips, ...

tabs

HTML Básico: Primario #5
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

[Colocando Una Imagen En Tu Página][Aquí Está Lo Que Está Pasando][Formatos de Imagen]
[Dónde Obtengo Mis Imágenes][Activando Una Imagen]

Por ahora sabes bastante para escribir una muy buena, texto-basada, página hogar, pero es la habilidad de la Telaraña de Área Mundial proveer pinturas, o ÍCONOS, como son llamados, eso la hizo tan popular. En este Primero aprenderás cómo colocar una pintura en tu página y también cómo volver una pintura en un enlace a otra página.

Colocando Una Imagen En Tu Página

Lo mismo que el enlace anterior, la orden para colocar una imagen es constante. Usarás el mismo formato cada vez. No es requisito, pero es una buena idea para ti colocar imagenes cualesquiera que vas a usar en el mismo lugar como tus pinturas. Hay más de eso apareciendo en Primero #7. Aquí está el formato:

<IMG SRC="image.gif">

Reemplazando "image.gif" con "homepage.gif" (uno de mis propios gráficos), obtienes esto...

Aquí Está Lo Que Está Pasando

Formatos de Imagen

Hay tres formatos básicos que hallarás en la Telaraña de Área Mundial. Se denota cada al hojeador por un sufijo diferente:
    • .gif (pronunciado "jif"). Esto es una sigla para Gráficos Intercambio Formato. El formato fue inventado por Compuserve y es el por lejos la estructura para imagen más popular en la Telaraña de Área Mundial. La razón es que es ese un formato simple. Es una serie de coloreados elementos de pintura (pixels) que trazan para hacer una pintura. Hojeadores pueden manejar este formato realmente fácil.
    • .jpeg o .jpg (pronunciado "j-peg") Hay dos nombres para denotar este formato a causa de las estructuras IBM y MAC que permiten 3 y 4 letras después del punto. JPEG es una sigla para Joint Photographic Equipment Group [Coyuntura Grupo del Equipo Fotográfico], la organización que inventó el formato. El formato es único en que es un formato comprimido. Eso es parloteo elegante de computadora que significa que cuando la computadora no está usando una imagen jpeg la pliega y la pone lejos. Por ejemplo si la pintura es 10K bytes al desplegarse, quizá sólo sea 4K bytes cuando se guardó. ¿Buen truco, Eeh? Preserva espacio en la unidad de disco duro, pero también vigila requerir mucha memoria de tu parte para desplegar la imagen.
    • .bmp (pronunciado "bmp") Este es un "bitmapa". Probablemente nunca coloques un bitmapa. Un bitmapa es una imagen que una computadora produce y coloca por ti. Un contador es un ejemplo.

¿Dónde Obtengo Mis Íconos (imágenes)?

Están literalmente por todas partes. La Página Hogar Bienes HTML permite que accedas a encima de 300 gratis, y hay otro sitios fuera de allí que ofrecen tanto. Además, desde que has estado navegando, has visto cientos de imagenes ya. Si ves algo en la página de alguien que te guste mucho, pide usarlo. (No sólo lo tomes--eso no es correcto) Probablemente obtendrás la imagen. En poco tiempo tendrás un hilado de imagenes para usar.

Activando Una Imagen

Muy bien, esto se vuelve un poco caprichoso. El Primero pasado, te mostré cómo crear un enlace de hipertexto. Lo qué hacía era crear palabras azules en tu página que alguien podría pulsar en ellas y entonces saltar a otro sitio. Pues, aquí vamos a establecerlo para que una imagen llegue a ser oprimible (o "activa"). El espectador pulsaría en la imagen para hacer el salto en lugar de en palabras azules. Haré un enlace a mi pagina hogar usando la imagen de arriba. Aquí está el formato:

<A HREF="http://www.htmlgoodies.com"><IMG SRC="homepage.gif"></A>

Miralo de nuevo. ¿Ves qué pasó? Simplemente puse una orden de imagen básica donde había puesto palabras. Aquí está lo qué haces con esa orden. Pon tu indicador en él--pero no pulses en él--y verás que la imagen entera es activa:

¿Hábil, Eeh? ¿Pero qué es esa línea azul alrededor de la imagen? Eso es lo qué pasa cuando activas una imagen. Intenta volver azul como las palabras que reemplaza, así que situa lo qué es conocido como una frontera alrededor de la imagen. Algunas personas les gusta. A mí no, y sé deshacerme de él.

Esta es una buena manera de acabar este Primero porque te da una sugerencia de lo que está por venir mañana. Para hacer desaparecer la frontera, debes agregar una segunda orden para la orden de imagen anterior. Esta no es realmente una orden dentro de una orden, pero está cerca. De hecho, pienso que esta es más fácil hacer.

Para librarte de la frontera azul, haz esto a la orden de imagen en el formato anterior:

<IMG BORDER="0" SRC="homepage.gif">

¿Ves lo qué hice? Agregué una orden que denotó que la frontera debe ser cero. Puedes ir demasiado en el otro sentido si gustas. Haz que BORDER="55" si quieres. Sólo hace una frontera colosal. Nota que el número cero está en comillas.

Aquí está lo que obtienes usando BORDER="0":

De nuevo, pon tu indicador en la imagen sin pulsar en él. Verás que eso está activo pero no lleva esa molesta frontera azul. Y eso nos lleva al fin. Mañana tratarás casi exclusivamente con ordenes dentro de ordenes para manipular tus imagenes. Impresionarás en verdad a tus amigos con este.

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

Ir a Primario #6

Regresar a Página Hogar Bienes HTML

[Colocando Una Imagen En Tu Página][Aquí Está Lo Que Está Pasando][Formatos de Imagen]
[Dónde Obtengo Mis Imágenes][Activando Una Imagen]