Párrafos y Encabezados [Jan. 6, 2012, 2:22 p.m.]

En la tarea anterior vimos los elementos que le dan la estructura básica a un archivo HTML. En esta tarea vamos a conocer algunos de los elementos más importantes para añadir contenido.

Convertir a HTML - Prueba 1

Digamos que queremos convertir este documento a un archivo html. Lo primero que vamos a hacer es agarrar todo el texto y copiarlo dentro del elemento <body>. Debemos quedar con un archivo como este:

<html>
<head>
<title>El Comercio electrónico está lleno de Animales</title>
<meta charset="utf-8" />
</head>
<body>

El Comercio electrónico está lleno de Animales

ALEJANDRO FERNÁNDEZ

No hay forma de evitarlo. Dondequiera que uno mire en internet se encontrará con monos, perros, ratones, caracoles y grandes cantidades de fauna. Todo por culpa de un símbolo que nació en el siglo VI: la arroba.

La arroba, pareciera haber nacido al combinarse las letras “a” y “d” para formar la palabra latina “ad” que quiere decir hacia.

El idioma inglés cambia este significado original por un desde (“at”). Así, cuando Ray Tomlinson escribió el primer correo electrónico de la historia, usó el símbolo @ para indicar el lugar desde donde lo estaba mandando.

¿Sabías que?

- A @ los alemanes decidieron llamarle “affenschwanz”, o cola de mono.
- Sus grandes amigos en la Unión Europea, los griegos, le dicen “papaki” o patito.
- Los franceses y los italianos, siempre pensando en comida, lo bautizaron caracol.
- Los noruegos y los polacos ven en la arroba cualidades porcinas: los primeros le dicen cola de puerco, los segundos oreja de cerdo.
- Los siempre delicados rusos le dicen “sobachka” o perrito
- Los suecos y daneses la denominan trompa de elefante.
- En Taiwan le dicen ratoncito, en Finlandia cola de gato y en Hungría su nombre es “kubak” o gusano.

Es interesante que un símbolo que internet hizo pasar del anonimato a la fama haya traído consigo ese gran número de connotaciones animalescas, pues otros íconos con orígenes similarmente humildes, y que ahora tienen las luminarias encima, no han atraído tanta fauna.

Ver Documento Original
</body>
</html>

Si ahora abrimos ese documento con nuestro browser, veremos algo como esto.

¿Qué Sucedió?

Este es el ejemplo que estaré utilizando:

Como ven identifiqué todos los componentes, parrafos, link, encabezados, viñetas.

Identifiquen ahora ustedes sus parrafos, link, encabezados y viñetas.

A continuación explicaremos las etiquetas y los guiaremos a través de la traducción de su documento a html.

<h1>...<h6> Headings

A estas etiquetas se les conoce como Headings y su función se explica en su traducción, crear encabezados.

El número que está a lado de la h indica el tamaño de la letra, el <h1> vendría siendo el tamaño de letra mas grande y el <h6> el mas pequeño.

Debemos recordar que ellos le darán formato al texto que este escrito entre el tag de abertura <h1> y el de cierre </h1>, que esta es la regla básica del html.

<html>

  <head>

    <title>HTMLejemplo</title>

    <meta charset="utf-8"/>

  </head>

  <body>

    <h1>El Comercio Electrónico esta Lleno de Animales</h1>

    <h4>¿Sabías que?</h4>

  </body>

</html>

Por ahora nuestro html nos estaría quedando como el código que acabamos de enseñar. Ahora les toca a ustedes traducir sus titulos a html:

Abrimos el documento creado en el tarea anterior.
Borramos toda la información que no necesitamos, dejándole solo la estructura básica de un documento html.
Identificamos en nuestro documento todo lo que podrían ser encabezados, tomando en cuenta el encabezado principal y los demás encabezados a lo largo del documento
Agregamos en la sección del <body> todos nuestros encabezados especificando el tamaño que deben tener.
Lo abrimos en el navegador.

CheckPoint: A esta altura debemos visualizar algo como esto

<p>Paragraph

Este tag es utilizado para la creación de párrafos.

Casi nunca se es cribe directamente en el <body> texto, sin el uso de un tag como <p>, ya que fuera de un tag, sería mas difícil de manipular el texto para darle formato, color, fondo etc. por medio de css.

El tag <p> es uno de los mas usados, porque básicamente va a contener todo lo que sea información de una página.

Basándome en mi documento, me toca ahora definir los parrafos y agregárselos al html, mi codigo quedaría asi:

<html>

  <head>

    <title>HTMLejemplo</title>

    <meta charset="utf-8"/>

  </head>

  <body>

    <h1>El Comercio Electrónico esta Lleno de Animales</h1>

    <p>No hay forma de evitarlo. Dondequiera que uno mire en internet se encontrará con monos, perros, ratones, caracoles y grandes cantidades de fauna. Todo por culpa de un símbolo que nació en el siglo VI: la arroba.

La arroba, pareciera haber nacido al combinarse las letras “a” y “d” para formar la palabra latina “ad” que quiere decir hacia.

El idioma inglés cambia este significado original por un desde (“at”). Así, cuando Ray Tomlinson escribió el primer correo electrónico de la historia, usó  el símbolo @ para indicar el  lugar desde donde lo estaba mandando. 

</p>

    <h4>¿Sabías que?</h4>
Es interesante que un símbolo que internet hizo pasar del anonimato
 a la fama haya traído consigo ese gran número de connotaciones 
animalescas, pues otros íconos con orígenes similarmente humildes, 
y que ahora tienen las luminarias encima, no han atraído  tanta fauna. 

</body>>

</html>

El orden en que coloques los elementos dentro del body, es sumamente importante, debe aparecer en el mismo orden que tu deseas que aparezca.