You are on page 1of 4

Etiquetas HTML bsicas: imgenes, alt, border, img, align, width, height.

.23)45)3.23603.#.3.C6#

)T789)T.S "T#$ :;S7C.S: 7#;0)4)S, .$T, :635)3, 7#0, .$704, <75T", ")70"T. =C900>1+:?

Seccin: Cursos Categora: Tutorial b sico del programador !eb: "T#$ desde cero %ec&a 'ltima actuali(acin: 2012 Resumen: )ntrega n*1+ del Tutorial b sico ,"T#$ desde cero-.

aprenderaprogramar.com, 2006-2012

.utor: )nri/ue 0on( le( 0uti1rre(

Etiquetas HTML bsicas: imgenes, alt, border, img, align, width, height.

ETIQ ET!" HTML #$"I%!": IM$&E'E", !LT, #(R)ER, IM&, !LI&', *I)TH, HEI&HT. Continuamos @iendo eti/uetas A atributos b sicos para la creacin de p ginas !ebs. 4o entramos a describir una a una todas las eti/uetas A atributos de /ue "T#$ dispone. Simplemente eBplicamos las m s utili(adas A las /ue nosotros creemos indispensables.

7ncluir im genes en una p gina !eb es muA sencillo, simplemente debemos tener en cuenta /ue las im genes tienen /ue tener los Cormatos 07%, D20 o 240. $as im genes dentro de una p gina !eb se especiCican a partir de la eti/ueta EimgF, /ue no tiene una eti/ueta correspondiente de cierre. )Gemplo: Eimg srcHI&ttp:JJ!!!.aprenderaprogramar.comJimagesJlogo.pngI altHI$ogotipo .232IF $a eti/ueta img dispone de estos atributos, algunos obligatorios, otros opcionales A algunos /ue Aa no se recomienda usar =deprecated?:

!TRI# T( src

"( )ste atributo es obligatorio e indica el nombre del arc&i@o de imagen =entre comillas? o la 93$ desde la /ue se @a a obtener la imagen. 2ermite controlar la alineacin de una imagen con respecto a una lnea de teBto adAacente o a otras im genes en esa lnea. $os @alores posibles son los Aa conocidos leCt, rig&t, middle, top, bottom. )ntre comillas podremos escribir un teBto /ue suplantar a esta imagen si no se carga, mientras se carga o, cuando @isuali(ando Aa la imagen, pasamos el ratn por encima. )ste atributo es opcional pero podemos ponerlo para especiCicar al na@egador /ue muestre la imagen con un tamaKo especCico. SigniCica ,anc&o de la imagen/ue @amos a representar. Si no se escribe, se carga la imagen con el tamaKo original. .l igual /ue el atributo !idt&, es opcional. )ste atributo signiCica el alto de la imagen. %on border es-eci2icamos el ancho del borde que rodea la imagen. "i se indica 3 equi4ale a 5sin borde6.

(#"ER+!%I('E" (bligatorio.

align

!tributo obsoleto ,de-recated.. "ustituir -or ho/as de estilo.

alt

(bligatorio.

width

(-cional. "e -uede indicar como -i0els 1 como -orcenta/es. (-cional. "e -uede indicar como -i0els 1 como -orcenta/es. !tributo obsoleto ,de-recated.. "ustituir -or ho/as de estilo.

height

border

aprenderaprogramar.com, 2006-2012

Etiquetas HTML bsicas: imgenes, alt, border, img, align, width, height.

E7EM8L(
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Ejemplo del uso de imgenes - aprenderaprogramar.com</title> </head> <body> <img src="http://www.aprenderaprogramar.com/templates/apr02062010/images/logo.png" alt="Logotipo APR2"> <img src="http://www.aprenderaprogramar.com/templates/apr02062010/images/logo.png" alt="Logotipo APR2" width="50%"> <img src="http://www.aprenderaprogramar.com/templates/apr02062010/images/logo.png" alt="Logotipo APR2" width="200px"> <img src="http://www.aprenderaprogramar.com/templates/apr02062010/images/logo.png" alt="Logotipo APR2" width="200px" border="5"> </body> </html>

Como podemos obser@ar, en la imagen anterior, el atributo !idt& se puede indicar tanto en piBeles como en porcentaGes =al igual pasa con el atributo &eig&t?. Ten en cuenta /ue al especiCicar la direccin de la imagen, si esta imagen est en tu propio ser@idor puedes utili(ar una direccin relati@a, es decir, estas dos eBpresiones son @ lidas:
<img src="http://www.aprenderaprogramar.com/templates/apr02062010/images/logo.png" alt="Logotipo APR2"> <img src="templates/apr02062010/images/logo.png" alt="Logotipo APR2">

Tambi1n podr s usar como origen de la imagen otro ser@idor, lo /ue signiCica /ue el na@egador ir a buscar la imagen en la ruta /ue le indi/ues. 2ero en este caso, deber s especiCicar la ruta completa, no ser @ lido una ruta relati@a. )Gemplo:
<img src="http://images4.hiboox.com/images/4711/9ed218f1fd2a5131ace4ee5a70e6198e.jpg alt=Queso de almendras palmero>

aprenderaprogramar.com, 2006-2012

Etiquetas HTML bsicas: imgenes, alt, border, img, align, width, height.

3ecuerda /ue los atributos /ue &emos indicado como obsoletos =deprecated? son eti/uetas cuAo uso Aa no se recomienda. )l &ec&o de incluirlos en este curso obedece a /ue nos parece con@eniente /ue se cono(ca su signiCicado, Aa /ue se pueden encontrar en muc&as p ginas !eb.. 7ncluso &aA desarrolladores !eb /ue siguen usando estas eti/uetas. # s adelante @eremos cmo conseguir los eCectos deseados de la Corma recomendada &oA da: mediante el uso de estilos =&oGa de estilo?.

IM$&E'E" %(M( E'L!%E" 2ara poner una imagen como enlace basta con crear un enlace A aKadir en su interior en luagr de teBto, una imagen: E7EM8L( Ea &reCHI!!!.aprenderaprogramar.comIF Eimg srcHI&ttp:JJimages+.&ibooB.comJimagesJ+>11JLed21MC1Cd2aN1O1ace+eeNa>0e61LMe.GpgI altHI8ueso de almendras palmeroIF EJaF

8r90ima entrega: C900>1N: !cceso al curso com-leto en aprenderaprogramar.com -- F Cursos, o en la direccin siguiente:
&ttp:JJ!!!.aprenderaprogramar.comJindeB.p&pPoptionHcomQcontentR@ie!HcategorARidH>0R7temidH1LO

aprenderaprogramar.com, 2006-2012