En este tutorial veremos que son los atributos, que función tienen dentro del documento HTML, en que lugar deben de ser posicionados y la sintaxis de su escritura.
Los Atributos
En primer lugar deben saber que todos los elementos HTML pueden tener atributos, los atributos proporcionan información adicional a los elementos y su posición siempre debe de ser dentro de la etiqueta de inicio de los elementos HTML.
La sintaxis de la escritura de todos los atributos consta de dos partes y es la siguiente, nombre="Valor" primero se pone el nombre del atributo, un signo de igual que, y el valor del atributo dentro de comillas.
A continuación les muestro unos ejemplos de los atributos mas utilizados.
El Atributo href
El atributo href hace referencia a la dirección de un link o vinculó, y los links son implementados con el elemento <a> esta es la sintaxis para posicionar el atributo href dentro del elemento <a>.
<a href="https://tutorialeshtml5ycss3.blogspot.com"></a>
El Atributo lang
Como ya vimos anteriormente el atributo lang especifica el lenguaje de la página y es posicionado en el elemento <html> de la siguiente forma.
<!DOCTYPE HTML>
<html lang="es-MX">
<head>
</head>
<body>
</body>
</html>
<html lang="es-MX">
<head>
</head>
<body>
</body>
</html>
El Atributo Title
El atributo title se utiliza para mostrar un tip un mensaje o información adicional de un elemento HTML al posicionar el cursor del mouse o ratón sobre el elemento.
En todos los elementos HTML se puede utilizar este atributo, el siguiente es un elemento <p> con un atributo title dentro de el, pasa el ratón sobre el elemento y veras el resultado.
<p title="Y Tengo un Atributo title">Yo soy un párrafo</p>
El Atributo src
El atributo src especifica la ubicación de una URL o Carpeta externa de imágenes, audio, video, escripts, etc, para utilizarlos en el documento HTML.
En el caso de una imagen la dirección puede ser un link o la ruta a una carpeta en donde se encuentra alojada la imagen, en el siguiente ejemplo vemos el Atributo src en un elemento <img> que se utiliza para mostrar imágenes, con el valor de la dirección de la imagen con un link.
<img src="http://i.imgur.com/bHHS336.jpg">
Los Atributos de Tamaño width y height
Los atributos width (Ancho) y height (Alto) son utilizados para darles tamaño a los elementos HTML, el tamaño se puede especificar con porcentajes (100%) o pixeles (100px) el siguiente es un elemento <img> con los Atributos width, y height.
<img src="http://i.imgur.com/bHHS336.jpg width="400px" height="500px">
El Atributo alt
El atributo alt especifica un texto alterno cuando una imagen no puede ser cargada o mostrada por los navegadores, este texto sirve para las personas con capacidades diferentes como las personas que no pueden ver y usan lectores de pantalla.
Este atributo ayuda muncho en el SEO de las páginas para que los buscadores web indexen correctamente las páginas y se puede decir que es obligatorio utilizar el atributo alt.
En el texto a utilizar debe de ser una descripción lo más completa que se pueda de la imagen a mostrar, y se aconseja no poner la palabra imagen, ejemplos, (Esta es una imagen de), (La imagen de), (Mi imagen de), etc.
Aquí vemos un elemento <img> con el atributo alt.
<img src="http://i.imgur.com/bHHS336.jpg alt="Este es un Tigre de Bengala en su Hábitat Natural">
El texto no es visible cuando la imagen es mostrada solo cuando no se puede mostrar como se muestra abajo.
Las reglas a seguir y mas recomendadas es es la de siempre escribir el nombre de los atributos con letras minúsculas y poner los valores de los atributos dentro de comillas, pueden ser comillas dobles (" ") o comillas simples (' '), solo deben ser consistentes en su estilo de escritura siempre.
Si desean poner alguna palabra dentro de los valores con comillas dobles o simples, lo pueden hacer siguiendo la siguiente regla, si quieren poner una palabra con comillas dobles deben escribir el valor del atributo con comillas simples como se ve abajo.
alt='El "Tigre" de Bengala'
Si quieren poner la palabra con comillas simples háganlo al revés como se ve abajo.
alt="El 'Tigre' de Bengala"
Resumen
- Todos los elementos HTML pueden tener Atributos.
- Los atributos proporcionan información adicional a los elementos HTML.
- Los Atributos son posicionados en la etiqueta de inicio de los elementos HTML.
- La sintaxis de escritura de los Atributos consta de dos partes el nombre del atributo y el nombre del valor.
- El el nombre del valor del Atributo siempre debe de ir dentro de comillas dobles (" ") o simples (' ').
- El Atributo href hace referencia a un Link o Vinculó.
- El Atributo lang hace referencia al lenguaje de la pagina web.
- El Atributo title se utiliza para mostrar tips, mensajes o información adicional de los elementos HTML al pasar el cursor del ratón sobre ellos.
- El Atributo crs especifica la dirección de una URL o Carpeta externa de imágenes, audio, vídeo scripts, etc.
- Los atributos width (Ancho) height (Alto) especifican el tamaño de un elemento HTML.
- El atributo alt especifica un texto alterno cuando una imagen no puede ser mostrada por los navegadores.
En el siguiente tutorial veremos el elemento <h> que definen el título de la página, los articulos y todas las secciones de la pagina dentro del documento HTML.
Saludos y que estén bien, nos leemos en el siguiente tutorial, hasta la proxima Amigos.
No hay comentarios.:
Publicar un comentario