{"id":60,"date":"2024-05-20T21:40:03","date_gmt":"2024-05-20T19:40:03","guid":{"rendered":"https:\/\/blog.sutilweb.eu\/?page_id=60"},"modified":"2024-05-20T22:00:04","modified_gmt":"2024-05-20T20:00:04","slug":"05-atributos","status":"publish","type":"page","link":"https:\/\/sutilweb.eu\/index.php\/lenguajes\/html5\/html5-manual\/05-atributos\/","title":{"rendered":"05. Atributos"},"content":{"rendered":"\n

En HTML<\/strong>, los atributos<\/strong> proveen informaci\u00f3n adicional acerca de los elementos HTML<\/strong>.<\/p>\n\n\n\n

Atributos HTML<\/h2>\n\n\n\n
    \n
  • Todos los elementos HTML<\/strong> pueden poseer atributos<\/strong>.<\/li>\n\n\n\n
  • Dichos atributos<\/strong> proveen informaci\u00f3n adicional acerca de los elementos<\/strong>.<\/li>\n\n\n\n
  • Los atributos<\/strong> siempre son incluidos en las etiquetas de apertura<\/strong> de los elementos.<\/li>\n\n\n\n
  • \u00c9stos son nombrados mediante un c\u00f3digo par=valor, por ejm, nombre=\u00bbFrancisco\u00bb.<\/li>\n<\/ul>\n\n\n\n

    El atributo href<\/h2>\n\n\n\n

    La etiqueta <a><\/em><\/strong> define un hiperv\u00ednculo<\/strong>. El atributo href<\/em> <\/strong>especifica la URL<\/strong> de la p\u00e1gina a la que va el enlace.<\/p>\n\n\n\n

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

    <a\u00a0href=\"https:\/\/sutilweb.eu\">Visita Sutil Web<\/a><\/pre>\n\n\n\n
    El atributo src<\/h2>\n\n\n\n
    La etiqueta <img><\/em><\/strong> se usa para incrustar una imagen en una p\u00e1gina HTML<\/strong>. El atributo src<\/em><\/strong> especifica la ruta a la imagen que se mostrar\u00e1.<\/p>\n\n\n\n
    Ejm<\/strong><\/p>\n\n\n\n
    <img src=\"img_girl.jpg\"><\/pre>\n\n\n\n
    Hay dos formas de especificar la URL<\/strong> en el atributo src<\/em><\/strong>:<\/p>\n\n\n\n
      \n
    • URL absoluta<\/strong>: enlaces a una imagen externa alojada en otro sitio web. Ejemplo: src = \u00abhttps:\/\/sutilweb.com\/images\/img_girl.jpg\u00bb.<\/li>\n<\/ul>\n\n\n\n
      \n
      Nota<\/strong>: Las im\u00e1genes externas pueden estar protegidas por derechos de autor. Si no obtienes permiso para usarlo, puedes estar violando las leyes de derechos de autor. Adem\u00e1s, no puedes controlar las im\u00e1genes externas, se pueden quitar o cambiar de repente.<\/p>\n<\/blockquote>\n\n\n\n
        \n
      • URL relativa<\/strong>: enlaces a una imagen alojada en el sitio web. Aqu\u00ed, la URL<\/strong> no incluye el nombre de dominio. Si la URL<\/strong> comienza sin una barra, ser\u00e1 relativa a la p\u00e1gina actual. Ejemplo: src = \u00abimg_girl.jpg\u00bb. Si la URL comienza con una barra, ser\u00e1 relativa al dominio. Ejemplo: src = \u00ab\/ images \/ img_girl.jpg\u00bb.<\/li>\n<\/ul>\n\n\n\n
        \n
        Nota<\/strong>: casi siempre es mejor usar URL relativas<\/strong>. No se romper\u00e1n si cambia de dominio.<\/p>\n<\/blockquote>\n\n\n\n
        Los atributos width y height<\/h2>\n\n\n\n
        La etiqueta <img><\/em><\/strong> tambi\u00e9n debe contener los atributos width<\/em> <\/strong>y height<\/em><\/strong>, que especifican el ancho y alto de la imagen (en p\u00edxeles).<\/p>\n\n\n\n
        Ejm<\/strong><\/p>\n\n\n\n
        <img src=\"img_girl.jpg\" width=\"500\" height=\"600\"><\/pre>\n\n\n\n
        El atributo alt<\/h2>\n\n\n\n
        El atributo alt<\/em> <\/strong>para la etiqueta <img><\/em><\/strong> especifica un texto alternativo para una imagen, si la imagen por alguna raz\u00f3n no puede ser mostrada. Esto puede ser debido a una conexi\u00f3n lenta, o a un error en el atributo src<\/em><\/strong>, o si el usuario usa un lector de pantalla.<\/p>\n\n\n\n
        Ejm<\/strong><\/p>\n\n\n\n
        <img src=\"img_girl.jpg\" alt=\"Girl with a jacket\"><\/pre>\n\n\n\n
        El atributo style<\/h2>\n\n\n\n
        El atributo style<\/em> <\/strong>es usado para a\u00f1adir estilos a un elemento, como el color, fuente, tama\u00f1o…<\/p>\n\n\n\n
        Ejm<\/strong><\/p>\n\n\n\n
        <p style=\"color:red;\">Esto es un p\u00e1rrafo en color rojo<\/p><\/pre>\n\n\n\n
        El atributo lang<\/h2>\n\n\n\n
        Siempre se debe incluir el atributo lang<\/em> <\/strong>dentro de la etiqueta <html><\/em><\/strong> para declarar el idioma de la p\u00e1gina web. Esto est\u00e1 destinado a ayudar a los motores de b\u00fasqueda<\/strong> y navegadores<\/strong>.<\/p>\n\n\n\n
        Ejm<\/strong><\/p>\n\n\n\n
        <!DOCTYPE html>\n<html lang=\"es\">\n<body>\n...\n<\/body>\n<\/html><\/pre>\n\n\n\n
        Los c\u00f3digos de pa\u00eds tambi\u00e9n se pueden agregar al c\u00f3digo de idioma en el atributo lang<\/em><\/strong>. De manera que los dos primeros caracteres definen el idioma de la p\u00e1gina HTML<\/strong> y los dos \u00faltimos caracteres definen el pa\u00eds.<\/p>\n\n\n\n
        El siguiente ejemplo especifica ingl\u00e9s como idioma y Estados Unidos como pa\u00eds.<\/p>\n\n\n\n
        Ejm<\/strong><\/p>\n\n\n\n
        <!DOCTYPE html>\n<html lang=\"en-US\">\n<body>\n...\n<\/body>\n<\/html><\/pre>\n\n\n\n
        El atributo title<\/h2>\n\n\n\n
        El atributo title<\/em> <\/strong>define informaci\u00f3n extra acerca del elemento. El valor del atributo title<\/em><\/strong> se mostrar\u00e1 como informaci\u00f3n sobre herramientas cuando pase el mouse sobre el elemento.<\/p>\n\n\n\n
        Ejm<\/strong><\/p>\n\n\n\n
        <p title=\"Soy un t\u00edtulo\">Esto es un p\u00e1rrafo.<\/p><\/pre>\n\n\n\n
        Atributos en min\u00fasculas y entre comillas<\/h2>\n\n\n\n
        Sugerimos siempre usar atributos<\/strong> en min\u00fascula y entre comillas para un mejor entendimiento del c\u00f3digo y para que supere otros est\u00e1ndares mas extrictos como son XHTML<\/strong>. Se pueden utilizar comillas simples<\/strong> o dobles.<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"
        En HTML, los atributos proveen informaci\u00f3n adicional acerca de los elementos HTML. Atributos HTML El atributo href La etiqueta <a> define un…<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":41,"menu_order":4,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","footnotes":""},"class_list":["post-60","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":"En HTML, los atributos proveen informaci\u00f3n adicional acerca de los elementos HTML. Atributos HTML El atributo href La etiqueta <a> define un...","_links":{"self":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/60","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=60"}],"version-history":[{"count":3,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/60\/revisions"}],"predecessor-version":[{"id":73,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/60\/revisions\/73"}],"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=60"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}