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

Aprende HTML5 en 16 lecciones (Introducción)

Aprende HTML5 en 16 lecciones (Introducción)

¿qué es HTML5? Este post está dedicado a todos aquellos que quieren aprender HTML5, hoy iniciare una serie de 16 post donde explicare ¿qué es HTML5?, explicare como usarlo, las etiquetas, propiedades y más.

Ver artículo completo
Cómo obtener la latitud y longitud de un pin que se puede arrastrar a través de Google Maps

Cómo obtener la latitud y longitud de un pin que se puede arrastrar a través de Google Maps

El API de Google Maps ofrece una amplia gama de funcionalidades para interactuar con mapas. Se puede establecer estáticamente los marcadores (pines) mediante programación, pero también se puede permitir a los usuarios interactuar con el mapa arrastrando los marcadores existentes alrededor del mapa.

Ver artículo completo
Cómo agregar, editar y eliminar campos html dinámicamente usando JQuery

Cómo agregar, editar y eliminar campos html dinámicamente usando JQuery

En este post veremos cómo agregar y eliminar campos dinámicamente jquery

Ver artículo completo

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 ;