Atributos HTMLEl atributo href
El atributo src
Ejemplo
1. URL absoluta: enlaces a una imagen externa que está alojada en otro sitio web. Ejemplo: src="https://todoinfoinfo.blogspot.com/images/img.jpg"..
Los atributos de ancho y altoLa etiqueta también debe contener los atributos y, que especifican el ancho y el alto de la imagen (en píxeles):
Ejemplo
- 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>
<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
<img src="img.jpg">
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 altoLa 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">
<img src="img.jpg" width="500" height="600">
El atributo altEl 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
alt
<img>
src
Ejemplo
<img src="img.jpg" alt="atributo">
<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">
<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.
<p style="color:red;">This is a red paragraph.</p>
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>
<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>
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>
<!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>
<p title="I'm">This is a paragraph.</p>
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 href=https://todoinfoinfo.blogspot.com>Visit our HTML tutorial</a>
<a href=https://todoinfoinfo.blogspot.com>Visit our HTML tutorial</a>
Ejemplo
<p title=About TodoInformación>En TodoInformación siempre usamos comillas alrededor de los valores de atributo.
¿Cotizaciones simples o dobles?<p title=About TodoInformación>
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">
<p title='John "ShotGun" Nelson'>
<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ínculo
href
<a>
- El atributo de especifica la ruta de acceso a la imagen que se va a mostrar
src
<img>
- Los atributos y atributos de proporcionar información de tamaño para las imágenes
width
height
<img>
- El atributo of proporciona un texto alternativo para una imagen
alt
<img>
- El atributo se usa para agregar estilos a un elemento, como color, fuente, tamaño y más
style
- El atributo de la etiqueta declara el idioma de la página Web
lang
<html>
- El atributo define información adicional sobre un elemento
title
href
<a>
src
<img>
width
height
<img>
alt
<img>
style
lang
<html>
title
No hay comentarios:
Publicar un comentario