{"id":68,"date":"2009-07-21T02:48:55","date_gmt":"2009-07-21T06:48:55","guid":{"rendered":"http:\/\/blog.espol.edu.ec\/cari22\/?p=68"},"modified":"2009-07-21T02:48:55","modified_gmt":"2009-07-21T06:48:55","slug":"tutorial-html-11-imagenes","status":"publish","type":"post","link":"https:\/\/blog.espol.edu.ec\/cari22\/2009\/07\/21\/tutorial-html-11-imagenes\/","title":{"rendered":"TUTORIAL HTML: 11. IM\u00c1GENES"},"content":{"rendered":"<p align=\"justify\">Para insertar im\u00e1genes, el c\u00f3digo HTML utiliza la etiqueta <strong>&lt;img&gt; <\/strong>con sus correspondientes par\u00e1metros que son los que se enumeran a continuaci\u00f3n:<\/p>\n<ul>\n<li> <strong>src = <\/strong>\"nombre de la imagen\" (p. ej.: &lt;img scr=\"mifoto.jpg\"&gt;<\/li>\n<li> <strong>alt = <\/strong>\"Texto\" Este par\u00e1metro muestra un texto alternativo cuando pasamos el rat\u00f3n por encima de la imagen.<\/li>\n<li> <strong>align = <\/strong>Indica como se alinear\u00e1 el   texto con respecto a la imagen. Se puede alinear el texto con la parte superior de la   imagen <strong>(top)<\/strong>, con la parte central <strong>(middle)<\/strong>, o con la inferior<strong> (bottom)<\/strong>. Tambi\u00e9n puede quedar la imagen a la derecha <strong>(right)<\/strong> del texto, rode\u00e1ndolo, o a la izquierda <strong>(left)<\/strong>.<\/li>\n<li> <strong>border = <\/strong> Indica si lleva borde y su anchura.<\/li>\n<li> <strong>height = <\/strong> Indica el alto de la imagen. Admite valores en puntos o en porcentaje.<\/li>\n<li> <strong>width = <\/strong> Indica el ancho de la imagen. Admite valores en puntos o en porcentaje.<\/li>\n<li> <strong>hspace = <\/strong> Indica el margen horizontal de la imagen con respecto al texto que le sigue o precede.<\/li>\n<li> <strong>vspace = <\/strong>Indica el margen vertical de la imagen con respecto al texto que le sigue o precede.<\/li>\n<li> <strong>lowsrc = <\/strong>\"nombre de la imagen\" Este atributo permite especificar una imagen auxiliar, que se abre en primer lugar, mientras carga la imagen definitiva. Se suelen usan im\u00e1genes de menor resoluci\u00f3n, para que el usuario disponga de ellas cuanto antes. Tambi\u00e9n se puede usar para logar ciertos efectos (muy simples) de animaci\u00f3n. Este parametro no es reconocido por la totalidad de los navegadores.<\/li>\n<\/ul>\n<table border=\"0\" cellspacing=\"1\" cellpadding=\"10\" width=\"87%\" align=\"center\" bgcolor=\"#ffcc66\">\n<tbody>\n<tr>\n<td bgcolor=\"#fef8e8\"><span class=\"ejemplo_tit\">Ejercicio 7: <\/span><\/p>\n<p>Guarda una imagen cualquiera en la misma carpeta en la que guardar\u00e1s tu archivo HTML. (Puedes guardar la imagen en cualquier carpeta, pero entonces deber\u00e1s tener mucho cuidado a la hora de indicar la ruta).<\/p>\n<p>Inserta el siguiente c\u00f3digo dentro de la etiqueta <strong>&lt;body&gt;&lt;\/body&gt;<\/strong>. En los dos primeros ejemplos vemos las diferencias de tama\u00f1o de la imagen especificadas por los atributos width (anchura) y height (altura)<\/p>\n<table border=\"0\" cellspacing=\"0\" cellpadding=\"5\" width=\"100%\">\n<tbody>\n<tr>\n<td class=\"ejercicio_tit\" width=\"55%\" align=\"center\">C\u00f3digo en el editor de textos<\/td>\n<td class=\"ejercicio_tit\" width=\"45%\" align=\"center\">En el navegador<\/td>\n<\/tr>\n<tr>\n<td>\n<strong>&lt;img src=\"<\/strong>surf.jpg\" width=\"139\" height=\"89\"<strong>\/&gt;<\/strong><\/td>\n<td align=\"center\" valign=\"top\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.distritoweb.net\/imagenes\/surf.jpg\" alt=\"Ejemplo de imagen peque\u00f1a\" width=\"139\" height=\"89\" align=\"top\" \/><\/td>\n<\/tr>\n<tr>\n<td><strong>&lt;img src=\"<\/strong>surf.jpg\" width=\"196\" height=\"125\"<strong>\/&gt;<\/strong><\/td>\n<td align=\"center\" valign=\"top\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.distritoweb.net\/imagenes\/surf.jpg\" alt=\"Ejemplo de imagen grande\" width=\"196\" height=\"125\" align=\"top\" \/><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p align=\"justify\">\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p align=\"justify\">En los siguientes ejemplos se aprecia la diferencia de alineaci\u00f3n del texto con respecto a la imagen. Observa el uso del atributo <strong>align<\/strong>, con sus correspondientes valores top, middle y bottom.<\/p>\n<p align=\"justify\"><img decoding=\"async\" src=\"http:\/\/img269.imageshack.us\/img269\/8481\/dibujovcx.png\" alt=\"http:\/\/img269.imageshack.us\/img269\/8481\/dibujovcx.png\" \/><\/p>\n<p align=\"justify\">Como sin duda habr\u00e1s apreciado, la imagen y el texto est\u00e1n excesivamente juntos. Esto se puede mejorar usando los par\u00e1metros <strong>vspace y hspace.<\/strong><\/p>\n<p align=\"justify\"><img decoding=\"async\" src=\"http:\/\/img216.imageshack.us\/img216\/752\/dibujorthlzs.png\" alt=\"http:\/\/img216.imageshack.us\/img216\/752\/dibujorthlzs.png\" \/><\/p>\n<p align=\"justify\">\n<p align=\"justify\">El siguiente ejemplo muestra la imagen con borde de 4 puntos.<\/p>\n<p align=\"justify\"><img decoding=\"async\" src=\"http:\/\/img145.imageshack.us\/img145\/1112\/dibujofgj.png\" alt=\"http:\/\/img145.imageshack.us\/img145\/1112\/dibujofgj.png\" \/><\/p>\n<p align=\"justify\">Haz todos los cambios que creas necesarios hasta que consigas pr\u00e1ctica. Prueba con textos m\u00e1s largos para ver las alineaciones de texto envolvente con los par\u00e1metros <strong>align=right y align=left<\/strong>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Para insertar im\u00e1genes, el c\u00f3digo HTML utiliza la etiqueta &lt;img&gt; con sus correspondientes par\u00e1metros que son los que se enumeran a continuaci\u00f3n: src = \"nombre de la imagen\" (p. ej.: &lt;img scr=\"mifoto.jpg\"&gt; alt = \"Texto\" Este par\u00e1metro muestra un texto alternativo cuando pasamos el rat\u00f3n por encima de la imagen. align = Indica como se [&hellip;]<\/p>\n","protected":false},"author":1937,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[2205,594,1503],"class_list":["post-68","post","type-post","status-publish","format-standard","hentry","category-uncategorized","tag-html","tag-imagenes","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/blog.espol.edu.ec\/cari22\/wp-json\/wp\/v2\/posts\/68","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.espol.edu.ec\/cari22\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.espol.edu.ec\/cari22\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.espol.edu.ec\/cari22\/wp-json\/wp\/v2\/users\/1937"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.espol.edu.ec\/cari22\/wp-json\/wp\/v2\/comments?post=68"}],"version-history":[{"count":2,"href":"https:\/\/blog.espol.edu.ec\/cari22\/wp-json\/wp\/v2\/posts\/68\/revisions"}],"predecessor-version":[{"id":70,"href":"https:\/\/blog.espol.edu.ec\/cari22\/wp-json\/wp\/v2\/posts\/68\/revisions\/70"}],"wp:attachment":[{"href":"https:\/\/blog.espol.edu.ec\/cari22\/wp-json\/wp\/v2\/media?parent=68"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.espol.edu.ec\/cari22\/wp-json\/wp\/v2\/categories?post=68"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.espol.edu.ec\/cari22\/wp-json\/wp\/v2\/tags?post=68"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}