jueves, 28 de abril de 2022

Atributos HTML

Los atributos HTML proporcionan información adicional sobre los elementos HTML.

Atributos HTML
  • Todos los elementos HTML pueden tener atributos
  • Los atributos proporcionan información adicional sobre los elementos
  • Los atributos siempre se especifican en la etiqueta de inicio
  • Los atributos generalmente vienen en pares de nombre/valor como: name="value"

El atributo href

La etiqueta define un hipervínculo. El atributo especifica la dirección URL de la página a la que va el vínculo:
<a>href

Ejemplo

<a href="https://todoinfoinfo.blogspot.com">Visi TodoInformación</a>

Aprenderá más sobre los enlaces en nuestro capítulo Enlaces HTML.


El atributo src

La etiqueta se utiliza para incrustar una imagen en una página HTML. El atributo especifica la ruta de acceso a la imagen que se va a mostrar:
<img>src

Ejemplo

<img src="img.jpg">
Hay dos formas de especificar la dirección URL en el atributo: src

1. URL absoluta: enlaces a una imagen externa que está alojada en otro sitio web. Ejemplo: src="https://todoinfoinfo.blogspot.com/images/img.jpg"..

Notas:
Las imágenes externas pueden estar bajo derechos de autor. Si no obtiene permiso para usarlo, puede estar violando las leyes de derechos de autor. Además, no puede controlar imágenes externas; se puede quitar o cambiar repentinamente.

2
. URL relativa: enlaces a una imagen alojada en el sitio web. Aquí, la URL no incluye el nombre de dominio. Si la URL comienza sin una barra diagonal, será relativa a la página actual. 

Ejemplo: src="img.jpg". Si la URL comienza con una barra diagonal, será relativa al dominio. Ejemplo: src="/images/img.jpg".


Propina: Casi siempre es mejor usar URL relativas. No se romperán si cambias de dominio.

Los atributos de ancho y alto

La etiqueta también debe contener los atributos y, que especifican el ancho y el alto de la imagen (en píxeles):<img>width height

Ejemplo

<img src="img.jpg" width="500" height="600">

El atributo alt
El atributo requerido para la etiqueta especifica un texto alternativo para una imagen, si la imagen por alguna razón no se puede mostrar. Esto puede deberse a una conexión lenta, o a un error en el atributo, o si el usuario utiliza un lector de pantalla.alt<img>src

Ejemplo

<img src="img.jpg" alt="atributo">

Ejemplo

Vea lo que sucede si intentamos mostrar una imagen que no existe:

<img src="img_.jpg" alt="atributo">

Aprenderá más sobre las imágenes en nuestro capítulo Imágenes HTML.


El atributo de estilo

El atributo se usa para agregar estilos a un elemento, como color, fuente, tamaño y más. 
style

Ejemplo

<p style="color:red;">This is a red paragraph.</p>
Aprenderá más sobre los estilos en nuestro capítulo Estilos HTML.

El atributo lang

Siempre debe incluir el atributo dentro de la etiqueta, para declarar el idioma de la página Web. Esto está destinado a ayudar a los motores de búsqueda y navegadores.

lang<html>

En el ejemplo siguiente se especifica el inglés como idioma:
<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>
Los códigos de país también se pueden agregar al código de idioma en el atributo. Por lo tanto, los dos primeros caracteres definen el idioma de la página HTML, y los dos últimos caracteres definen el país. lang

En el ejemplo siguiente se especifica el inglés como idioma y los Estados Unidos como país:
<!DOCTYPE html>
<html lang="en-US">
<body>
...
</body>
</html>

El título Atributo

El atributo define cierta información adicional sobre un elemento. 
title

El valor del atributo title se mostrará como información sobre herramientas cuando pase el ratón por encima del elemento:


Ejemplo

<p title="I'm">This is a paragraph.</p>

Sugerimos: Use siempre atributos en minúsculas

El estándar HTML no requiere nombres de atributos en minúsculas.

El atributo title (y todos los demás atributos) se pueden escribir en mayúsculas o minúsculas como title o TITLE.

Sin embargo, el W3C recomienda atributos en minúsculas en HTML y exige atributos en minúsculas para tipos de documentos más estrictos como XHTML.


Sugerimos: Siempre cite los valores de atributo


El estándar HTML no requiere comillas alrededor de los valores de atributo.

Sin embargo, el W3C recomienda citas en HTML y exige citas para tipos de documentos más estrictos como XHTML.

Bien:

<a href="https://todoinfoinfo.blogspot.com">Visit our HTML tutorial</a>

Malo:

<a href=https://todoinfoinfo.blogspot.com>Visit our HTML tutorial</a>

A veces hay que usar comillas. En este ejemplo no se mostrará correctamente el atributo title, ya que contiene un espacio:

Ejemplo

<p title=About TodoInformación>
En TodoInformación siempre usamos comillas alrededor de los valores de atributo.

¿Cotizaciones simples o dobles?

Las comillas dobles alrededor de los valores de atributo son las más comunes en HTML, pero también se pueden usar comillas simples.

En algunas situaciones, cuando el valor del atributo en sí contiene comillas dobles, es necesario usar comillas simples:

<p title='John "ShotGun" Nelson'>
O viceversa:
<p title="John 'ShotGun' Nelson">

    Todos los elementos HTML pueden tener atributos


    Resumen del capítulo

    • El atributo de especifica la dirección URL de la página a la que va el vínculohref <a>
    • El atributo de especifica la ruta de acceso a la imagen que se va a mostrarsrc <img>
    • Los atributos y atributos de proporcionar información de tamaño para las imágeneswidthheight<img>
    • El atributo of proporciona un texto alternativo para una imagenalt <img>
    • El atributo se usa para agregar estilos a un elemento, como color, fuente, tamaño y másstyle
    • El atributo de la etiqueta declara el idioma de la página Weblang<html>
    • El atributo define información adicional sobre un elementotitle

    No hay comentarios:

    Publicar un comentario

    Imágenes HTML

    Las imágenes pueden mejorar el diseño y la apariencia de una página web. Ejemplo < img  src ="pic_trulli.jpg"  alt ="Itali...

    Política de Privacidad
    Este sitio utiliza cookies de Google para analizar el tráfico a este sitio. La información sobre su uso de nuestro sitio se comparte con Google para ese propósito. Acepto Más información