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>
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>
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>
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>
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>
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>
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>
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:
Cargando...
Artículos recientes
-
-
¿Cuál es la estructura Básica de un documento html5?
06 febrero 2015 -
El elemento DOCTYPE de html5
26 enero 2015 -
.jpg)
Cómo dar formato a texto en HTML
12 abril 2019 -
Aprende HTML5 en 16 lecciones (Introducción)
11 marzo 2020
