Atributos HTML Flashcards
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 normalmente vienen en pares nombre/valor como: nombre=”valor”
El atributo href
La <a>etiqueta define un hipervínculo. El hrefatributo especifica la URL de la página a la que va el enlace:</a>
Ejemplo
<a>Visit W3Schools</a>
El atributo src
La <img></img>etiqueta se utiliza para incrustar una imagen en una página HTML. El srcatributo especifica la ruta a la imagen que se mostrará:
Ejemplo
<img></img>
Hay dos formas de especificar la URL en el src atributo:
- URL absoluta : enlaces a una imagen externa alojada en otro sitio web. Ejemplo: src=”https://www.w3schools.com/images/img_girl.jpg” .
Notas: Las imágenes externas pueden tener derechos de autor. Si no obtiene permiso para usarlo, es posible que esté infringiendo las leyes de derechos de autor. Además, no puedes controlar las imágenes externas; se puede eliminar o cambiar repentinamente.
- 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 barra, será relativa a la página actual. Ejemplo: src=”img_girl.jpg”. Si la URL comienza con una barra diagonal, será relativa al dominio. Ejemplo: src=”/images/img_girl.jpg”.
Consejo: casi siempre es mejor utilizar URL relativas. No se romperán si cambias de dominio.
Los atributos de ancho y alto.
La <img></img>etiqueta también debe contener los atributos widthy height, que especifican el ancho y el alto de la imagen (en píxeles):
Ejemplo
<img></img>
El atributo alt
El altatributo requerido para la <img></img> etiqueta especifica un texto alternativo para una imagen, si por algún motivo la imagen no se puede mostrar. Esto puede deberse a una conexión lenta, a un error en el srcatributo o si el usuario utiliza un lector de pantalla.
Ejemplo
<img></img>
Ejemplo
Vea lo que sucede si intentamos mostrar una imagen que no existe:
<img></img>
El atributo de idioma
Siempre debes incluir el langatributo dentro de la <html>etiqueta, para declarar el idioma de la página Web. Esto está destinado a ayudar a los motores de búsqueda y navegadores.
El siguiente ejemplo especifica el inglés como idioma:
<!DOCTYPE html>
<html>
<body>
...
</body>
</html>
Los códigos de país también se pueden agregar al código de idioma en el lang atributo. Entonces, los dos primeros caracteres definen el idioma de la página HTML y los dos últimos definen el país.
El siguiente ejemplo especifica el inglés como idioma y Estados Unidos como país:
<!DOCTYPE html>
<html>
<body>
...
</body>
</html>
El atributo del título
El titleatributo define información adicional sobre un elemento.
El valor del atributo de título se mostrará como información sobre herramientas cuando pase el mouse sobre el elemento:
Ejemplo
<p>This is a paragraph.</p>
Sugerimos: utilice siempre atributos en minúsculas
El estándar HTML no requiere nombres de atributos en minúsculas.
El atributo de título (y todos los demás atributos) se puede escribir en mayúsculas o minúsculas como título o TÍTULO .
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: citar siempre los valores de los atributos
El estándar HTML no requiere comillas alrededor de los valores de los atributos.
Sin embargo, el W3C recomienda comillas en HTML y exige comillas para tipos de documentos más estrictos como XHTML.
Bien:
<a>Visit our HTML tutorial</a>
Malo:
<a href=https://www.w3schools.com/html/>Visit our HTML tutorial</a>
A veces hay que utilizar comillas. Este ejemplo no mostrará el atributo de título correctamente porque contiene un espacio:
Ejemplo
<p>
</p>
¿Comillas simples o dobles?
Las comillas dobles alrededor de los valores de los atributos son las más comunes en HTML, pero también se pueden utilizar comillas simples.
En algunas situaciones, cuando el valor del atributo contiene comillas dobles, es necesario utilizar comillas simples:
<p>
O viceversa:
<p>
</p></p>
Resumen
Resumen del capítulo
Todos los elementos HTML pueden tener atributos.
El hrefatributo de <a>especifica la URL de la página a la que va el enlace.
El srcatributo de <img></img>especifica la ruta a la imagen que se mostrará.
Los atributos widthy de proporcionan información sobre el tamaño de las imágenes.height<img></img>
El altatributo de <img></img>proporciona un texto alternativo para una imagen.
El styleatributo se utiliza para agregar estilos a un elemento, como color, fuente, tamaño y más.
El langatributo de la <html>etiqueta declara el idioma de la página web.
El titleatributo define información adicional sobre un elemento.</a>
