Atributos HTML
Los atributos HTML proporcionan información adicional sobre los elementos 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: nombre="valor".
El atributo href
Para poner un ejemplo de un link que nos lleva a otro local, tenemos:
Ejemplo
<a href="http://" target="_blank" rel="noopener noreferrer"></a>
En el ejemplo anterior vemos una etiqueta "<a>" que define un hipervínculo.
Más adelante tenemos el atributo href que nos especifica el destino adonde nos lleva el link.
Código del ejemplo
<a href="http://" target="_blank" rel="noopener noreferrer"></a>
El atributo src
Como en el ejemplo anterior, tenemos una etiqueta img que nos va a servir para incrustar una imagen en nuestra página web.
Seguido de un atributo src que nos especifica la origen o ruta de dicha imagen.
Ejemplo
<img src="img_girl.jpg">
Código del ejemplo
<img src="img_girl.jpg">
Especificar una URL en el atributo src
Para especificar la URL src tenemos dos formas:
- URL absoluta: Enlace a una imagen externa alojada en otro sitio web. Ejemplo:
- URL relativa: Enlace a una imagen alojada dentro del sitio web.
Ejemplo
src="https://cdn.pixabay.com/photo/2016/07/11/15/43/woman-1509956__340.jpg"
Notas: Las imágenes externas pueden estar protegidas por derechos de autor. Si usas una imagen sin permiso, puedes estar violando las leyes de derechos de autor. Además, no puedes controlar imágenes externas; pueden ser eliminadas repentinamente o cambiadas.
Si la URL comienza sin una barra inclinada, será relativa a la página actual.
Ejemplo:
src="img_girl.jpg"
Si la URL comienza con una barra inclinada, será relativa al dominio.
Ejemplo:
src="/img_girl.jpg"
Sugerencia: Casi siempre es mejor usar URL relativas. No se romperán si cambias de dominio.
Los atributos de ancho y alto
La etiqueta <img> también tiene dos atributos, que definen la imagen en su altura y anchura.
- width: Define el ancho de la imagen.
- height: Define la altura de la imagen.
Pondré un ejemplo de una imagen que tendrá 300px de ancho y 400px de alto:
Ejemplo
<img src="img_girl.jpg" width="300" height="400">
Quedará así:
Código del ejemplo
<img src="img_girl.jpg" width="300" height="400">
El atributo alt
El atributo alt sirve para proporcionar una descripción alternativa de una imagen.
Ejemplo
<img src="img_girl.jpg" alt="chica" width="500" height="600">
Código del ejemplo
<img src="img_girl.jpg" alt="chica" width="500" height="600">
El atributo style
Este atributo se usa para agregar un estilo en línea diferente al que ya tenemos en el CSS.
El atributo lang
Este atributo se incluye dentro de la etiqueta html y se usa para indicar en qué idioma está escrita la página.
El siguiente ejemplo indica que la página está en español:
Ejemplo
<html lang="es">
<body>
...
</body>
</html>
Los códigos de país también se pueden agregar al código de idioma en el atributo lang. Así, los dos primeros caracteres definen el idioma de la página HTML, y los dos últimos caracteres definen el país.
<html lang="en-US">
<body>
...
</body>
</html>
Código del ejemplo
<!DOCTYPE html>
<html lang="es">
<body>
...
</body>
</html>
El atributo title
El atributo title define información adicional sobre el elemento.
Ejemplo: Si pasamos el mouse por encima del siguiente párrafo, nos indicará que es un párrafo.
Ejemplo
Pasa el mouse por encima de mí...
Código del ejemplo
<p title="Soy un párrafo">Pasa el mouse por encima de mí...</p>
0 Comentarios
Si desea contactar comigo, lo puede hacer atravez deste formulario gracias