Párrafos y Encabezados [Jan. 6, 2012, 1:11 p.m.]
Vamos a conocer mas tags que son sumamente útiles a la hora de estructurar nuestra página.
A partir de este taller, yo(el taller), estaré trabajando con mi propio ejemplo y ustedes trabajarán con su información para ir creando su propia página.
Este es el ejemplo que estaré utilizando:
Como ven identifiqué todos los componentes, parrafos, link, encabezados, viñetas.
<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 títulos, tomando en cuenta el título principal y los demás títulos a lo largo del documento
- Agregamos en la sección del <body> todos nuestros títulos 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 escribe 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>
</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.
- Abrimos el documento creado en el task anterior
- Identificamos los párrafos que contendrá nuestra página
- los agregamos por medio de html a nuestro documento
- lo abrimos en el navegador
CheckPoint: A esta altura debemos visualizar algo como esto
Que es anidar
Este concepto lo debemos tener claros a la hora de escribir html, porque es parte básica de la estructura de un documento.
- El tag <html> anida todo los demas tags, porque antes de él, no se puede colocar ningun tag, ni tampoco despues de haberlo cerrado <html>
- El <head> anida solo a los tags que explicamos en el taller anterior, mas no al body.
- El <body> a todos los tags excepto al <head> y <html>
Esto se podría entender como una jerarquía.