{"id":135,"date":"2024-05-21T08:52:54","date_gmt":"2024-05-21T06:52:54","guid":{"rendered":"https:\/\/blog.sutilweb.eu\/?page_id=135"},"modified":"2024-05-21T08:52:54","modified_gmt":"2024-05-21T06:52:54","slug":"18-imagenes-html","status":"publish","type":"page","link":"https:\/\/sutilweb.eu\/index.php\/lenguajes\/html5\/html5-manual\/18-imagenes-html\/","title":{"rendered":"18. Im\u00e1genes HTML"},"content":{"rendered":"\n

Las im\u00e1genes<\/strong> pueden mejorar el dise\u00f1o y la apariencia de una p\u00e1gina web.<\/p>\n\n\n\n\n\n\n\n

Ejm<\/strong><\/p>\n\n\n\n

<img src=\"pic_trulli.jpg\" alt=\"Italian Trulli\"><\/pre>\n\n\n\n
Sintaxis<\/h2>\n\n\n\n
La etiqueta HTML <img><\/em><\/strong> se utiliza para incrustar una imagen<\/strong> en una p\u00e1gina web. T\u00e9cnicamente, las im\u00e1genes<\/strong> no se insertan en una p\u00e1gina web, las im\u00e1genes<\/strong> est\u00e1n vinculadas a p\u00e1ginas web. La etiqueta <img><\/em><\/strong> crea un espacio de espera para la imagen<\/strong> a la que se hace referencia.<\/p>\n\n\n\n
La etiqueta <img><\/em><\/strong> est\u00e1 vac\u00eda, solo contiene atributos y no tiene una etiqueta de cierre.<\/p>\n\n\n\n
La etiqueta <img><\/em><\/strong> tiene dos atributos obligatorios:<\/p>\n\n\n\n
    \n
  • src<\/em><\/strong>: especifica la ruta a la imagen<\/li>\n\n\n\n
  • alt<\/em><\/strong>: especifica un texto alternativo para la imagen<\/li>\n<\/ul>\n\n\n\n
    Ejm<\/strong><\/p>\n\n\n\n
    <img src=\"url<\/em>\" alt=\"alternatetext<\/em>\"><\/pre>\n\n\n\n
    El atributo src<\/h2>\n\n\n\n
    El atributo src<\/em> <\/strong>especifica la ruta (URL) a la imagen.<\/p>\n\n\n\n
    \n
    Nota<\/strong>: Cuando se carga una p\u00e1gina web, es el navegador, en ese momento, el que obtiene la imagen de un servidor web y la inserta en la p\u00e1gina. Por lo tanto, aseg\u00farate de que la imagen realmente permanezca en el mismo lugar en relaci\u00f3n con la p\u00e1gina web, de lo contrario, tus visitantes obtendr\u00e1n un \u00edcono de enlace roto. El icono de enlace roto y el texto alternativo se muestran si el navegador no puede encontrar la imagen.<\/p>\n<\/blockquote>\n\n\n\n
    Ejm<\/strong><\/p>\n\n\n\n
    <img src=\"img_chania.jpg\" alt=\"Flowers in Chania\"><\/pre>\n\n\n\n
    El atributo alt<\/h2>\n\n\n\n
    El atributo alt<\/em><\/strong> proporciona un texto alternativo para una imagen, si el usuario por alg\u00fan motivo no puede verla (debido a una conexi\u00f3n lenta, un error en el atributo src<\/em> <\/strong>o si el usuario usa un lector de pantalla).<\/p>\n\n\n\n
    El valor del atributo alt<\/em> <\/strong>debe describir la imagen.<\/p>\n\n\n\n
    Ejm<\/strong><\/p>\n\n\n\n
    <img src=\"img_chania.jpg\" alt=\"Flowers in Chania\"><\/pre>\n\n\n\n
    Si un navegador no puede encontrar una imagen, mostrar\u00e1 el valor del atributo alt<\/em><\/strong>.<\/p>\n\n\n\n
    Tama\u00f1o de imagen, width y height<\/h2>\n\n\n\n
    Puedes usar el atributo style<\/em><\/strong> para especificar el ancho y el largo de una imagen.<\/p>\n\n\n\n
    Ejm<\/strong><\/p>\n\n\n\n
    <img src=\"img_girl.jpg\" alt=\"Girl in a jacket\" style=\"width:500px;height:600px;\"><\/pre>\n\n\n\n
    Alternativamente puedes usar los atributos width <\/em><\/strong>y height<\/em><\/strong>.<\/p>\n\n\n\n
    Ejm<\/strong><\/p>\n\n\n\n
    <img src=\"img_girl.jpg\" alt=\"Girl in a jacket\" width=\"500\" height=\"600\"><\/pre>\n\n\n\n
    Los atributos width<\/em><\/strong> y height<\/em><\/strong> siempre definen el ancho y el alto de la imagen en p\u00edxeles.<\/p>\n\n\n\n
    Width y height o style?<\/h2>\n\n\n\n
    Los atributos width<\/em><\/strong>, height<\/em><\/strong> y style<\/em><\/strong> son todos v\u00e1lidos en HTML.<\/p>\n\n\n\n
    Sin embargo, sugerimos usar el atributo style<\/em><\/strong>. Evita que las hojas de estilo cambien el tama\u00f1o de las im\u00e1genes.<\/p>\n\n\n\n
    Im\u00e1genes en otra carpeta<\/h2>\n\n\n\n
    Si tienes tus im\u00e1genes en una subcarpeta, debes incluir el nombre de la carpeta en el atributo src.<\/em><\/strong><\/p>\n\n\n\n
    Ejm<\/strong><\/p>\n\n\n\n
    <img src=\"\/images\/html5.gif\" alt=\"HTML5 Icon\" style=\"width:128px;height:128px;\"><\/pre>\n\n\n\n
    Im\u00e1genes en otro servidor web<\/h2>\n\n\n\n
    Algunos sitios web apuntan a una imagen en otro servidor. Para apuntar a una imagen en otro servidor, debes especificar una URL absoluta (completa) en el atributo src<\/em><\/strong>.<\/p>\n\n\n\n
    Ejm<\/strong><\/p>\n\n\n\n
    <img src=\"https:\/\/www.sutilweb.eu\/images\/green.jpg\" alt=\"Sutil Web.com\"><\/pre>\n\n\n\n
    \n
    Notas sobre im\u00e1genes externas<\/strong>: las im\u00e1genes externas<\/strong> pueden estar protegidas por derechos de autor. Si no obtienes permiso para usarlo, es posible que est\u00e9s violando las leyes de derechos de autor. Adem\u00e1s, no puedes controlar im\u00e1genes externas.<\/p>\n<\/blockquote>\n\n\n\n
    Imagen como enlace<\/h2>\n\n\n\n
    Para usar una imagen como enlace, coloca la etiqueta <img><\/em><\/strong> dentro de la etiqueta <a><\/em><\/strong>.<\/p>\n\n\n\n
    Ejm<\/strong><\/p>\n\n\n\n
    <a href=\"default.asp\">\n  <img src=\"smiley.gif\" alt=\"Curso HTML\" style=\"width:42px;height:42px;\">\n<\/a><\/pre>\n\n\n\n
    Imagen flotante<\/h2>\n\n\n\n
    Usa la propiedad float<\/em><\/strong> de CSS<\/strong> para dejar que la imagen flote a la derecha o a la izquierda de un texto.<\/p>\n\n\n\n
    Ejm<\/strong><\/p>\n\n\n\n
    <p><img src=\"smiley.gif\" alt=\"Smiley face\" style=\"float:right; width:42px; height:42px;\">\nLa imagen flotar\u00e1 a la derecha del texto.<\/p>\n\n<p><img src=\"smiley.gif\" alt=\"Smiley face\" style=\"float:left;width:42px;height:42px;\">\nLa imagen flotar\u00e1 a la izquierda del texto.<\/p><\/pre>\n\n\n\n
    Formatos comunes de imagen<\/h2>\n\n\n\n
    Estos son los tipos de archivos de imagen m\u00e1s comunes, compatibles con todos los navegadores (Chrome<\/strong>, Edge<\/strong>, Firefox<\/strong>, Safari<\/strong>, Opera<\/strong>).<\/p>\n\n\n\n
    Abreviatura<\/th>Formato de archivo<\/th>Extensi\u00f3n de archivo<\/th><\/tr>
    APNG<\/td>Animated Portable Network Graphics<\/td>.apng<\/td><\/tr>
    GIF<\/td>Graphics Interchange Format<\/td>.gif<\/td><\/tr>
    ICO<\/td>Microsoft Icon<\/td>.ico, .cur<\/td><\/tr>
    JPEG<\/td>Joint Photographic Expert Group image<\/td>.jpg, .jpeg, .jfif, .pjpeg, .pjp<\/td><\/tr>
    PNG<\/td>Portable Network Graphics<\/td>.png<\/td><\/tr>
    SVG<\/td>Scalable Vector Graphics<\/td>.svg<\/td><\/tr><\/tbody><\/table><\/figure>\n","protected":false},"excerpt":{"rendered":"
    Las im\u00e1genes pueden mejorar el dise\u00f1o y la apariencia de una p\u00e1gina web.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":41,"menu_order":17,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","footnotes":""},"class_list":["post-135","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"Sutil Web","author_link":"https:\/\/sutilweb.eu\/index.php\/author\/sutilweb\/"},"uagb_comment_info":0,"uagb_excerpt":"Las im\u00e1genes pueden mejorar el dise\u00f1o y la apariencia de una p\u00e1gina web.","_links":{"self":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/135","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/comments?post=135"}],"version-history":[{"count":1,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/135\/revisions"}],"predecessor-version":[{"id":136,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/135\/revisions\/136"}],"up":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/41"}],"wp:attachment":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/media?parent=135"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}