El manejo de Atributos en HTML

Estrada Web Group
Administrador

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>
Compartir artículo:

Más artículos geniales

Manténgase actualizado

Obtenga excelente contenido en su bandeja de entrada todas las semanas.
Solo contenido excelente, no compartimos su correo electrónico con terceros.
Subir al inicio de la pantalla ;