etiquetas_HTML.step

goals do
  goal "Agregar algunas etiquetas a tu archivo HTML"
  goal "Aprender más sobre etiquetas disponibles"
end

overview do

  message <<-MARKDOWN

## Utiliza las etiquetas para separar bloques de contenido


Las etiquetas trasmiten un significado. Y con el fin de mostrar su contenido, todo debería estar dentro de una etiqueta, no sólo palabras que desees enfatizar. Así que vamos a utilizar la etiqueta paragraph `<p>` y la etiqueta header 1 `<h1>`.

Te darás cuenta que si incluso pones líneas y espacios extra, HTML tratará a cualquier número o línea nueva o espacio de caracteres como otro espacio más. Cuando vayas a empezar con HTML, esto puede resultar trabajoso, por que tienes que escribir
  MARKDOWN

  source_code :html, <<HTML
<p>primer sentencia</p>
<p>segunda sentencia</p>
HTML
  message <<-MARKDOWN

Cuando sólo quieras una línea en blanco entre de dos sentencias. Pero a medida que vas avanzando, este aspecto de HTML será más útil, porque significa que puedes dar formato a tu código siempre y cuando sea legible para **ti**, sin preocuparte por lo que el navegador piense de tus líneas y espacios en blanco.

## Etiquetas Anidadas

Es común para una etiqueta HTML estar anidada dentro de otra. En el ejemplo anterior, viste:
  MARKDOWN

  source_code :html, "<h1><em></em></h1>"

  important do
    message "Sólo asegúrate de que las etiquetas están correctamente _anidadas_. Por ejemplo, no debes hacer:"

    source_code :html, "<h1><em>¡Hola Mundo!</h1> ¡Me agradas!</em>"

    message "La etiqueta interior, `em`, debe cerrarse antes de la etiqueta exterior"
  end
end

steps do

  step do
    message "Agrega más líneas de contenido a tu archivo HTML. Preséntate"

    source_code :html, <<-HTML
¡Hola <em>Mundo</em>!

Mi nombre es Rachel.
    HTML

    message "Ahora guarda el archivo y actualiza tu navegador"
    img src: 'img/hello_world_2line.png'
  end

  step do
    message "A pesar de que ponemos líneas en blanco, el navegador las ignora. Así que vamos a utilizar etiquetas para romper nuestro contenido"
    message "Actualiza tu HTML con la etiqueta `h1` y `p`:"

      source_code :html, <<-HTML
<h1>¡Hola <em>Mundo</em>!</h1>
<p>Mi nombre es Rachel.</p>
    HTML

    message "Ahora guarda el archivo y actualiza el navegador."
    img src: 'img/hello_world_2line2.png'
  end

  step do
    message "Ahora agreguemos una lista de cosas que nos gusten."

    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>
    HTML

    message "Ahora guarda el archivo y actualiza tu navegador."
    img src: 'img/html_tags_list.png'
  end

end
explanation do

  message <<-MARKDOWN

## Etiquetas para cada ocasión

El meteórico ascenso de popularidad de la web y la reciente proliferación de aplicaciones web han hecho a HTML muy popular. Aunque originalmente era utilizado sólo para documentos simples, ahora HTML tiene etiquetas para integrar vídeo y reproducir música, incrustación de imágenes, rellenado de formularios web, y todo tipo de etiquetas útiles.

Acabas de utilizar dos etiquetas conocidas, `h1` para títulos y `p` para párrafos. Pero existen más etiquetas que puedes utilizar:

## Más Etiquetas

  MARKDOWN

   table border: "1", cellspacing: "0", cellpadding: "3", align: "center" do
    tr {
      th "Etiqueta"
      th "Propósito"
    }
    tr {
      td "a"
      td "Un link (la 'a' significa anchor)"
    }
    tr {
      td "h1-h6"
      td "Varios títulos, h1 es la más importante, h6 es la última."
    }
    tr {
      td "ul"
      td "Empezar una lista con viñetas (una 'lista desordenada')"
    }
    tr {
      td "ol"
      td "Empezar una lista numerada (una 'lista ordenada')"
    }
    tr {
      td "li"
      td "Cosas dentro de una lista (una 'lista de artículos')"
    }
    tr {
      td "table, tr, td"
      td "Puedes hacer tablas (como ésta) con filas y celdas de datos"
    }
    tr {
      td "form"
      td " Un formulario que pueda recoger datos del usuario"
    }
    tr {
      td "input"
      td "un text input, un botón, o un checkbox en un formulario"
    }
    tr {
      td "div"
      td "Un marcador de sección que no hace nada específico al contenido propio, pero después crea una nueva línea. (Más de esto verémos adelante.)"
    }
    tr {
      td "span"
      td "Otra sección de marcado que no hace nada en el contenido, pero está en línea - no crea una línea después."
    }
  end

  message <<-MARKDOWN

  HTML5 introdujo varias etiquetas nuevas para hacer HTML más *semántico*, es decir que las etiquetas deben describir el contenido. Algunos de los nuevos elementos introducidos por HTML5 incluyen:

  MARKDOWN

  table border: "1", cellspacing: "0", cellpadding: "3", align: "center" do
    tr {
      th "Etiqueta"
      th "Propósito"
    }
    tr {
      td "section"
      td "Una sección del documento"
    }
    tr {
      td "nav"
      td "Una sección de navegación"
    }
    tr {
      td "header"
      td "El encabezado para una página. (Éste es diferente del elemento head, ¡que contiene metadatos acerca de la página!)"
    }
    tr {
      td "footer"
      td "El pie de página"
    }
    tr {
      td "main"
      td "El contenido importante de la página"
    }
    tr {
      td "aside"
      td "Contenido no esencial"
    }
  end

  message <<-MARKDOWN

¡No trates de memorizar todas las etiquetas! Siempre puedes consultar sitios como:

* [Mozilla Developer Network](https://developer.mozilla.org/en/HTML/Element)
* [DocHub](http://dochub.io/#html/)



## Intenta esto:
¿Qué sucede si cambias `<ul>` a `<ol>`? (No olvides cambiar la etiqueta de cierre también.)

¿Puedes enlazar tus cosas favoritas a sus respectivas páginas en Wikipedia? Aquí hay un ejemplo: `<a href="http://en.wikipedia.org/wiki/Ruby_(programming_language)">Ruby</a>`

DISCUSIÓN EN CLASE: ¿Cuáles son las partes individuales del código para agregar un enlace?

  MARKDOWN

end

next_step "estructura_HTML"
Otras Páginas

etiquetas_HTML.step
