atributos_HTML.step

goals do
  goal "Escribir algunos archivos comunes de HTML"
  goal "Usar clases y atributos id como gancho para estilos CSS"
end

overview do

  message <<-MARKDOWN

## ¿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:
  
  MARKDOWN
  source_code :html, "<input type='radio' name='rando-radio'>"
  message <<-MARKDOWN

Se ve como un radio button: <input type='radio' name='rando-radio'>, pero
  
  MARKDOWN
  source_code :html, "<input type='password' name='fake-password' value='ick'>"
  message <<-MARKDOWN

Se ve como una contraseña de texto input: <input type='password' name='rando-radio' value='ick'> 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.


  MARKDOWN

end

steps do
  
  step do
  message "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:"
  source_code :html, <<HTML
<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>
HTML
  end

  step do "Agrega la clase 'special' a tu primer párrafo. Deberá verse como esto:"
  source_code :html, <<HTML
<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>
HTML
    message "Actualiza la página en el navegador. Deberás ver los nuevos párrafos que agregaste, pero ningún cambio de estilo"
    message "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."
  end

  step do
    message "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."
    message "Intenta agregar un borde verde a la clase 'special'. Agrega esta regla dentro de tu etiqueta `style`:"
    source_code :css, <<CSS
.special {
  border: 1px solid green;
}
CSS
    message "Actualiza tu página en el navegador. Verás algo como esto:"
    img src: 'img/css_class.png'
  end

  step do
    message "Vamos a poner tu nombre en una etiqueta `span` y darle un ID de 'user-name'. Deberá verse algo así:"
    source_code :html, <<HTML
<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>
HTML
    message "Guarda y actualiza la página en tu navegador. De nuevo, no deberás ver ninguna diferencia."
  end

  step do
    message "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`:" 
    source_code :css, <<CSS
#user-name {
  font-weight: bold;
}
CSS
    message <<-MARKDOWN
(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:
    MARKDOWN
    img src: 'img/css_id.png'
  end

end


explanation do
  message <<-MARKDOWN

## ¿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.
MARKDOWN

end

next_step "herramientas_de_desarrollo"
Otras Páginas

atributos_HTML.step
