Aprendamos qué son, para qué sirven y cómo se ponen los atributos HTML, dentro de las etiquetas para controlar mejor las características de nuestros elementos HTML; los atributos nos dan mayor poder al momento de personalizar y agregar ciertos aspecto en nuestras páginas web.

Qué son los atributos en HTML

Los atributos en HTML se pueden considerar como información adicional que se coloca siempre en la etiqueta de apertura, esto para añadir, complementar información o significado al elemento HTML al que estamos colocando.

¡Venga ya! agreguemos un poco información y estilo a nuestro contenido. Todas las etiquetas de HTML y sus atributos.

¡Antes! Debo mencionar que para poner estilo a una página web, definitivamente es mucho mejor utilizar el lenguaje de estilos CSS, pero no está de más aprender a utilizar algunos estilos en HTML, podemos necesitar en algún momento.

Veamos algunos atributos y cuál es su función.

Lista de los atributos más usados en HTML

• Id =” ”: Para identificar un elemento único.
• class =” ”: Identificador múltiple.
• align =” ”: Alineación de contenido.
• border =” ”: Para darle borde al contenido.
• style =” ”: Para darle un estilo al contenido.
• background-color =” ”: Para color de fondo.
• href =” ”: Para enlaces html.
• height =” ”: Para determinar altura.
• width =” ”: Para determinar ancho.
• src=“ ”: Para imágenes.

Cómo colocar atributos en HTML

Un atributo se escribe de la siguiente manera: Atributo=«valor»  en esa forma, el nombre del atributo, seguido del signo igual (=) y entre comillas el valor, todo esto siempre dentro de la etiqueta de apertura.

Por lo tanto el atributo escrito en una etiqueta (por ejemplo párrafo) se ve así: <p atributo="valor">Este es un párrafo</p>

<p width="400px" height ="200px" >Este es un párrafo</p>

Valor de un atributo

Cuando se hace uso de un atributo HTML se debe especificar su valor, este puede representar una cantidad exacta, característica especifica o simplemente en que medida se ejecutará dicho atributo.

El valor se expresa entre comillas después del signo de (=), de acuerdo al atributo, pueden haber una variedad de valores disponibles. Por ejemplo, en caso dealign puede tomar el valor de center (centro), right (derecha), left (izquierda), justify (justificado).

Atributos HTML y sus valores

A continuación veamos algunos atributos y los valores que puede tomar:

Atributo: valores

• Id.- su valor puede ser cualquier palabra que sirve para identificar un elemento.
• align.- alineación, sus valores pueden ser: center, right, left, justify.
• border-style.- estilo de borde, los valores disponibles son: solid, dotted, dashed, double, etc.
• bgcolor.- Para color de fondo para ciertos elementos como body, el valor puede ser cualquier color en formato palabra, hexadecimal, RGB, etc. ejemplo: red, green, #ff0000, etc.
• href .- para enlaces su valor puede ser la dirección de un carpeta o URL.
• height .- para definir altura, su valor puede ser una medida con su unidad de medida, por ejemplo: 10px, 12em, 100%.
• width.- define el ancho y su valor puede ser cualquier medida con su respectiva unidad de medida.

Y así, existen muchísimos atributos que podemos aplicar a cualquier etiqueta HTML.

Ejemplos

Por ejemplo el atributo align con su valor en center aplicado a un párrafo hará que el texto este alineado al centro. Además probemos los otros valores como el de derecha e izquierda.

<p align="center">Este es un párrafo alineado al centro</p> 
<p align="right">Este es un párrafo alineado a la derecha</p> 
<p align="left">Este es un párrafo alineado a la izquierda</p>

Resultados:

Por ahora solo conocimos las etiquetas de texto, pero en las siguientes lecciones conoceremos otros elementos y los atributos que les corresponde.

El atributo style

El atributo style sirve para agregar estilo a los elementos HTML, la apariencia de los elementos que conocimos hasta ahora y los que aprenderemos en lecciones posteriores pueden ser controlados mediante una enorme variedad propiedades y valores.

Conocer y aplicar todas la propiedades y valores disponibles, ya corresponde al curso de CSS, sin embargo debemos conocer como se puede emplear dentro de una etiqueta HTML.

Desarrolladoresweb.org

Aplicando style:

El atributo style se declara como cualquier otro atributo HTML, su valor puede contener varias declaraciones de estilo separadas por espacio y eso lo hace diferente a otros atributos.

A grandes rasgos, una declaración consiste en una propiedad y su respectivo valor, una declaración siempre tiene la siguiente forma: propiedad: valor; primero se escribe la propiedad seguido de dos puntos para definir su valor y finamente se cierra con un punto y coma (;)

Ejemplo:

<p style="font-size: 14px; font-family: Lato; color: #1d1778; background-color: yellow; padding: 12px; margin: 10px; width: 100px; border-style: dotted; border-color: #000000; border-width: 5px;"> Este es un párrafor con estilo, gracias al atributo style...</p>

Con un poco de intuición puedes entender lo que acabamos de escribir, simplemente estamos expresando instrucciones mediante propiedades y valores, fíjate: font-size: tamaño de letra; font-family: tipo de letra; color: color de letra; backgroun-color:color de fondo; padding: relleno; margin: margen; width: ancho; border-style: estilo de borde; border-color: color de borde; border-width: ancho de borde;

Resultado:

Un momento ¿Que acaba de suceder? te preguntarás, pues simplemente hemos aplicado el atributo style con una variedad de propiedades y valores; por ahora no deberías preocuparte por entender, y conocer todas las propiedades disponibles, simplemente ten en cuenta que style sirve para poner estilo, además no es la mejor forma de realizar esto, pues existe CSS un lenguaje pensado para estilo.

Al culminar el curso de HTML estarás listo para CSS, por ahora continua con lo que sigue:).

Resumen

• Los atributos en HTML se caracterizan por estar dentro de la etiqueta de apertura
• Los atributos HTML tienen un valor
• El valor de los atributos va entre comillas (» »)
• El valor de un atributo HTML se especifica antecediendolo con un signo de igual (=)
• Los atributos determinan estilos, identificadores, etc.

En las próximas lecciones conoceremos más etiquetas HTML y a la vez los atributos que se suelen ser aplicados a las mismas. ¡Sigamos!