XHTML y CSS #3 ~ Texto y Headers

*En un rato centraré el post, ahora tengo que irme*


El contenido de cada tutorial será poco extenso y se centrará en lo importante. Así, ni te cansas de leer, ni me canso de escribir. Soy persona y me equivoco, así que no dudes en corregirme o ampliar información si ves que se me pira algo muy importante.
Yo trabajaré con el browser de Google (Chrome) por temas de compatibilidad.

Tema: Texto y Headers
Profesora: Tsuka/MoonTIK23
Agradecimientos: Bucky y easydisplayname
Fecha: 23/11/2011

En el anterior tutorial, vimos cómo crear la estructura básica de nuestra página y le dimos un título. Podrías probar a publicarla tal cuál, pero no creo que recibiera mucha atención puesto que está vacía de contenido.

Hoy, vamos a darle un poco, sólo un poco, de vidilla a la página.

Lo primero que te recomiendo hacer, hoy y siempre por el momento, es cargar index.html en Notepad++ por un lado, y abrir la alucinante página que creaste por otro. Así, podrás apreciar los cambios que vayas haciendo sin apenas demora. Obviamente, aumenta un poco el tamaño de las ventanas, las pongo así de enanas para que se vea todo bien.


Vamos a meterle caña. Todo el texto que quieres que se lea, has de escribirlo entre nuestras amigas <body> y </body>. Por ejemplo, "¡Peras, palomitas, manzanas y mandarinas!".

<!doctype html>

<html>
    <head>
   <title>Tutorial #03</title>
    </head>
   
    <body>
¡Peras, palomitas, manzanas, mandarinas!
    </body>
</html>

Refrescas tu página... ¡Magia!

...
Ok, no.

Como podrás ver, insertar texto en tu web es lo más sencillo del mundo (después de abrir un documento). Ya sabes cómo empezar a camuflar ese horrible espacio en blanco, pero, aún así, está bastante sosilla.

Lo que te voy a enseñar a hacer ahora, son headers (encabezados) cómo los que salen, por ejemplo, en el periódico. Eso que te resume en una frase, normalmente, el contenido de todo el artículo y que, en muchas ocasiones, es de un tamaño desmesurado.

Vamos, ésto:


Muy periodístico no es, pero creo que así se entiende mejor. Las causantes de este cambio de tamaño y demás, son las tags <hX></hx> dónde x es un número entre uno y seis, ambos inclusive. Seis sería el tamaño mínimo de header y, uno, el máximo.

Si te fijas, en la imagen hay siete líneas, cuándo debería haber seis. Lo único que he hecho ha sido añadir una séptima línea (Venga, ya paro) para que puedas comparar los headers con el texto normal.

Y hasta aquí este tercer tutorial. Aquí te dejo el código por si tienes alguna duda:

<!doctype html>

<html>
    <head>
   <title>Tutorial #03</title>
    </head>
   
    <body>
<h1>¡ECOOOOOO!</h1>
<h2>¡ECOOOOOO!</h2>
<h3>¡ECOOOOOO!</h3>
<h4>¡ECOOOOOO!</h4>
<h5>¡ECOOOOOO!</h5>
<h6>¡ECOOOOOO!</h6>
Venga, ya paro.
    </body>
</html>

Sé que todo ésto es muy simple, pero se necesitan buenos cimientos para construir una buena casa; no lo olvides.
XHTML y CSS #3 ~ Texto y Headers
10 Puntos Score: 5/10
Visitas: 964 Favoritos: 5
Ver los usuarios que votaron...
3 Comentarios XHTML y CSS #3 ~ Texto y Headers
grax por estos tutoriales si pudiera darte puntos lo hiciera igual te voy a seguir por q me parecen muy buenos estos tutoriales  
Mis primeros +5  
Para dejar un comentario Registrate! o.. eres ya usuario? Accede!