El manejo de Atributos en HTML

Un atributo se utiliza para definir las características de un elemento HTML y se coloca dentro de la etiqueta de apertura del elemento. Todos los atributos se componen de dos partes: un nombre y un valor.


  • Todos los elementos HTML pueden tener atributos. Los atributos proporcionan información adicional sobre un elemento.
  • Toma dos parámetros: el primero es el nombre seguido de su valor. Estos definen las propiedades del elemento y se colocan dentro de la etiqueta de apertura del elemento. El parámetro nombre toma el nombre de la propiedad que nos gustaría asignar al elemento y el valor toma el valor de las propiedades o la extensión de los nombres de propiedades que se pueden alinear sobre el elemento.
  • Cada nombre tiene un valor que debe escribirse entre comillas.

A continuación, se muestran algunos de los atributos más utilizados en HTML:

2. Atributo src: si queremos insertar una imagen en una página web, entonces necesitamos usar la etiqueta <img> y el atributo src. Necesitaremos especificar la dirección de la imagen como el valor del atributo dentro de la comilla doble.

<html>
<head>
    <title>src Attribute</title>
</head>
<body>
    <img src="http://www.estradawebgroup.com//Content/images/logo@2x.png">
</body>
</html>

Ver Demo

2. Atributo alt: como su nombre indica, esta es una etiqueta alternativa que se usa para mostrar algo si el atributo principal, es decir, la etiqueta <img>, no muestra el valor asignado. Esto también se puede usar para describir la imagen que estamos poniendo en HTML.

<html>
<head>
    <title>alt Attribute</title>
</head>
<body>
    <img src="http://www.estradawebgroup.com//Content/images/logo@2x.png " alt="Logo de Estrada Web Group"/><br/>
    <img src="" alt="Dado que el valor src está en blanco, se muestra el valor alt"/>
</body>

</html>

Ver Demo

3. El atributo de ancho y alto: este atributo se utiliza para ajustar el ancho y el alto de una imagen.

<html>
<head>
    <title>Width and Height</title>
</head>
<body>
    <img src=" http://www.estradawebgroup.com//Content/images/logo@2x.png " alt="Logo de Estrada Web Group" width="300px" height="100px" />
</body>

</html>

Ver Demo

4. El Atributo Id: este atributo se utiliza para proporcionar una identificación única a un elemento. Pueden surgir situaciones en las que tendremos que acceder a un elemento en particular que puede tener un nombre similar al de otros. En ese caso, proporcionamos diferentes identificaciones a varios elementos para que se pueda acceder de forma única. Las propiedades que extienden el uso de id se usan generalmente en CSS, que aprenderemos más adelante.

<html>
<head>
     <title> ID Attribute </title>
</head>
<body>
     <p id = "Estrada"> Hola Desarrolladores </p>
     <p id = "idParrafo"> Esto es exclusivo de este párrafo </p>    
     <p id = "head"> Esto también es exclusivo de este párrafo</p>
</body>
</html>

Ver Demo

5. El atributo del título: se usa para explicar un elemento al pasar el mouse sobre él. El comportamiento difiere con varios elementos, pero generalmente el valor se muestra mientras se carga o se desplaza el puntero del mouse sobre él.

<html>
<head>
     <title> Atributo Título </title>
</head>
<body>
     <h3 title = "Hola Desarrolladores"> Desplazate para ver el efecto </h3>
</body>
</html>

Ver Demo

6. El atributo href: este atributo se utiliza para especificar un enlace a cualquier dirección. Este atributo se utiliza junto con la etiqueta <a>. El enlace colocado dentro del atributo href se vincula al texto que se muestra dentro de la etiqueta <a>.

Al hacer clic en el texto seremos redirigidos al enlace. De forma predeterminada, el enlace se abre en la misma etiqueta, pero al usar el atributo de destino y establecer su valor en "_blank", se nos redireccionará a otra pestaña u otra ventana basada en la configuración de los navegadores.

<html>
<head>
     <title> Atributo href de un Enlace </title>
</head>
<body>
     <a href="http://estradawebgroup.com">
         Haga clic para abrir en la misma pestaña
     </a> <br>
     <a href="http://estradawebgroup.com" target="_blank">
         Haga clic para abrir en una pestaña diferente
     </a>
</body>

</html>

Ver Demo

7. El atributo de estilo “style”: este atributo se usa para proporcionar varios efectos de CSS (hojas de estilo en cascada) a los elementos HTML, como aumentar el tamaño de la fuente, cambiar la familia de la fuente, colorear, etc. El siguiente programa muestra algunos nombres y valores que van a lo largo del atributo de estilo

<html>
<head>
    <title>style Attribute</title>
</head>
<body>
    <h2 style="font-family:Chaparral Pro Light;">Hola programadores bienvenidos al curso gratuito de HTML5 en EstradaWebGroup.</h2>
    <h3 style="font-size:20px;"> Hola programadores bienvenidos al curso gratuito de HTML5 en EstradaWebGroup.</h3>
    <h2 style="color:#8CCEF9;"> Hola programadores bienvenidos al curso gratuito de HTML5 en EstradaWebGroup.</h2>
    <h2 style="text-align:center;"> Hola programadores bienvenidos al curso gratuito de HTML5 en EstradaWebGroup.</h2>

</body>

</html>

Ver Demo

8. El atributo lang: el idioma se declara con el atributo lang. Declarar un idioma es importante para las aplicaciones de accesibilidad y los motores de búsqueda.


<!DOCTYPE html>
<html lang="es-MX">
<body>   
...   
</body>
</html>
Artículos relacionados
0 Comentarios
Enviame un comentario