Descargar para leer sin conexión
Subido porGeorge Guerrero Garzon
Imagenes
Este documento presenta información sobre cómo insertar y modificar imágenes en documentos HTML. Explica los atributos src, alt, border, width y height que permiten referenciar la ubicación de una imagen, añadir texto alternativo, establecer bordes y cambiar el tamaño de una imagen respectivamente. También recomienda organizar los archivos en carpetas y mantener la coherencia de las rutas de las imágenes.
Más contenido relacionado
Más de George Guerrero Garzon
Imagenes
- 1. Colegio Nacional NicolásEsguerra Edificamos futuro George AndréGuerrero Garzón Juan Sebastián Gómez Osorio Unidad 5. Imágenes Imagen <img> Teniendoencuentraque laimagense llamalogo_animales.gifyque estádentrode lacarpeta imagenes,que se encuentraenel mismodirectorioque el documentoactual (referenciarelativaal documento). Para trabajar de una formamás sencillayordenada,esrecomendable que todoslosdocumentos html se encuentrenenunmismodirectorio,yque dentrode este directorioexistandiferentes carpetaspara agruparotros objetos,comopuede serunacarpetadestinadaaalmacenar imagenes,ounacarpetadestinadaa almacenararchivosde audio,etc. <img src="imagenes/logo_animales.gif"> Texto alternativo uandouna imagennopuede servisualizadaenel navegador,cosaque puede ocurriral especificar mal el valor del atributo src,aparece un recuadroblancocon una X roja ensu lugar,juntocon el nombre de la imagen. Podemoshacerque enlugarde mostrarse el nombre de laimagenaparezcael textoque nosotros deseemos,graciasal atributo alt. Por ejemplo,imaginaque deseamosmostrarunaimagenllamada gatito.gif,conel texto alternativo Imagengato,paraelloinsertamosel siguientecódigo: <img src="gatito.gif" alt="Imagen gato" > Perohemoscometidounerror,ya que dichaimagennose encuentraenel mismodirectorioque el documentoactual,sinoque se encuentradentrode lacarpeta imagenes.Enlugarde la imagen se mostrará lo siguiente: El textoalternativose muestratambiénal situarel punterosobre laimagen.Si situasel puntero sobre la imagendurante unossegundos,veráscomoaparece el texto Imagengato.
- 2. El textoalternativoesmuyútil alahorade diseñarpáginasmásasequibles alosinvidentesyaque losprogramas lectoressoncapacesde leerel textoalternativo. Borde de una imagen En general,al visualizarunapáginaenunnavegadorlasimágenesaparecensinningúnborde alrededor,peroesposibleestablecerunoatravésdel atributoborder. El atributoborderpuede tomarvaloresnuméricos,que indicanel grosorenpíxelesdel borde. Por ejemplo,parainsertarlasiguiente imagenconborde: <img src="imagenes/logo_animales.gif" border="4" > Hay que tenerencuentaque el borde de laimagensiempre seráde colornegro,a noser que la imagencontengaunenlace,encuyocaso el colordel borde seráel color establecidoparalos vínculos. Por ejemplo,parainsertarlasiguiente imagenconborde ycon unenlace: <a href="http://www.aulaclic.com" target ="_blank" ><imgsrc="imagenes/logo_animales.gif" border="4" ></a> Tamaño de una imagen Cuandoinsertamosunaimagen,estase muestraenlosnavegadoresconsutamañooriginal,pero por diversosmotivospuede interesarnos modificardichotamaño. A travésde losatributos width (anchura) y height(altura) puede modificarse el tamañode la imagen.Dichocambiode tamañono se aplicadirectamente sobre el archivode imagen,sinoque loque varía esla visualizaciónde laimagenenel navegador. El valorque puedentomarlosatributos widthy heightha de serun número,acompañadode % cuandose desee que seaenporcentaje conrespectoalapágina. Por ejemplo,parainsertarlasiguiente imagen(cuyotamañooriginalerade 122 píxelesde anchura y 71 píxelesde altura) con200 píxelesde anchuray 80 píxelesde altura: <img src="imagenes/logo_animales.gif" width="200" height="80">
- 3. <html>08:28 a.m. 14/10/2015 <head> <title>indusanmotorssa905</title> </head> <!--paginaelaboradapor George Guerrero905 //-->. <bodybgcolor="silver"> <hr> <marquee bgcolor="black"behavior="alternate"direction="right"> <b><fontcolor="0033ff" size="7">bienvenidosalawebbugatti</font></b> </marquee> <hr> <b><font color="white"size="7">bugatti</font></b> <hr> bienvenidosanuestrawebcorporativa<br> <hr> <img src="imagenes/foto.png"width="450"height="250"><imgsrc="bugatti frontal"alt=""> <img src="imagenes/logo.png"width="450"height="250"><imgsrc="logo bugatti"alt=""> <img src="imagenes/cola.png"width="450"height="250"><imgsrc="cola bugatti"alt="">
- 4. <hr> Bugatti ha presentadoenprimiciamundialenelSalónde Frankfurtel show carde suproyecto desarrollado especialmenteparael videojuegoGranTurismo.Este Bugatti VisiónGranTurismose apoyaenla tecnologíamás reciente enmateriade deportesmecánicosyprefiguratambiénlosfuturosmodelosde lamarcaa nivel del diseño. nuestraempresalleva7añosbrindandoserviciosde altacalidad <hr align="center"width="50%"size="5"color="blue"noshade> <pre> copyrigth2015 colegionacional nicolasesguerra crr52b #40a 06 sur- bogota- colombia </pre> </body> </html>