Otras Páginas

Atributos HTML

Objetivos

  • Escribir algunos archivos comunes de HTML
  • Usar clases y atributos id como gancho para estilos CSS

Panorama

¿Por qué necesitamos atributos?

Primeramente las etiquetas HTML le dan información al navegador acerca del contenido que tienen. También se puede ampliar para incluir otra información de contenido, como qué tipo de input es la etiqueta, o como el atributo media, que vimos en la página anterior, el cuál se puede utilizar para indicar si el contenido será mostrado en pantalla o impreso.

Al crear un formulario, vas a usar atributos que le digan al navegador qué tipo de input es, y los resultados serán fáciles de distinguir. Este input:

<input type='radio' name='rando-radio'>

Se ve como un radio button: , pero

<input type='password' name='fake-password' value='ick'>

Se ve como una contraseña de texto input: aunque use la misma etiqueta.

¿Cómo se conectan CSS y HTML?

¡Etiquetas y atributos, principalmente!

Hasta ahora sólo hemos agregado estilo a etiquetas HTML como <p> and <h1>. ¿Qué pasa si sólo quisieramos agregar estilo a algunas instancias de etiquetas determinadas? No queremos que todos los párrafos se vean diferentes, así que podemos agregar nuestro estilo directamente a la etiqueta <p>.

Es aquí donde los atributos class= e id= van. Agregando una clase o un ID al atributo HTML te permite añadir estilos CSS únicamente a ese atributo.

Pasos

Paso 1

Agreguemos algunas clases e ids a nuestro HTML. Comienza añadiendo uno o dos párrafos de texto en la parte inferior de tu documento HTML. Las últimas líneas deben verse de esta forma:

<h1>¡Hola <em>Mundo</em>!</h1>
<p>Mi nombre es Rachel.</p>
<p>Me gusta:</p>
<ul>
  <li>Lunares</li>
  <li>Soccer</li>
  <li>Programación</li>
</ul>
<p>Escuché que RailsBridge necesita voluntarios, ¡¿¡puedo ser voluntario!?!</p>

Paso 2 

<h1>¡Hola <em>Mundo</em>!</h1>
<p class="special">Mi nombre es Rachel.</p>
<p>Me gusta:</p>
<ul>
  <li>Lunares</li>
  <li>Soccer</li>
  <li>Programación</li>
</ul>
<p>Escuché que RailsBridge necesita voluntarios, ¡¿¡puedo ser voluntario!?!</p>

Actualiza la página en el navegador. Deberás ver los nuevos párrafos que agregaste, pero ningún cambio de estilo

Muchos atributos HTML, como las clases y los ids, no trasmiten información visual directamente. Tu sitio tendrá el mismo aspecto hasta que se utilice la clase para agregar estilo CSS.

Paso 3

Para agregar una regla de estilo que se aplicará a alguna clase, usa la sintaxis .class-name para tu selector. Será casi el mismo estilo que agregaste a <h1> y <p>, pero con un punto al principio del nombre de tu clase.

Intenta agregar un borde verde a la clase 'special'. Agrega esta regla dentro de tu etiqueta style:

.special {
  border: 1px solid green;
}

Actualiza tu página en el navegador. Verás algo como esto:

Paso 4

Vamos a poner tu nombre en una etiqueta span y darle un ID de 'user-name'. Deberá verse algo así:

<h1>¡Hola <em>Mundo</em>!</h1>
<p class="special">Mi nombre es
  <span id="user-name">Rachel</span>
</p>
<p>Me gusta:</p>
<ul>
  <li>Lunares</li>
  <li>Soccer</li>
  <li>Programación</li>
</ul>
<p>Escuché que RailsBridge necesita voluntarios, ¡¿¡puedo ser voluntario!?!</p>

Guarda y actualiza la página en tu navegador. De nuevo, no deberás ver ninguna diferencia.

Paso 5

Ahora, agrega la regla de estilo correspondiente para tu ID, usando la sintaxis #id-name para tu selector. Trata de hacer que el id de 'user-name' se vea en negritas. Agrega esta regla dentro de tu etiqueta style:

#user-name {
  font-weight: bold;
}

(Nota: El span es sólo un elemento que te deja aplicar una clase, un id, o algún otro atributo a un string de texto sin añadir saltos de línea. Los navegadores no le darán ningún estilo por defecto.)

Después de agregar la regla de estilo y actualizar la página en el navegador, verás algo bastante feo como esto:

Explicación

¿Cuándo debemos usar una clase, y cuando usar un ID?

Clases

Un atributo clase debe utilizarse para agrupar elementos que pueden existir más de una vez en una determinada página. Por ejemplo, puedes dar a algunos párrafos la clase "special" y usarla para resaltarlos. Inclusive si solo tienes un párrafo se verá diferente, tal vez quieras agregarlo después.

Un atributo de clase debe verse así en el HTML class="special" y .special en el CSS. ¡No confundas en dónde va el punto!

IDs

Un id es una etiqueta única. Se usa para identificar algo que es único. Por ejemplo, si ejecutas un sitio web de noticias, sólo tendrás un elemento en la página que servirá como cabecera, y podrás asignarle un id como id="handsome-header"

Un atributo id debe verse en el HTML así id="handsome-header", y así #handsome-header en el CSS.

Dentro de estos parámetros, cuando uses clases e IDs es cuestión de estilo / gusto.

Siguiente Paso:

Ir a Herramientas De Desarrollo