jueves, 12 de marzo de 2009

Cómo hacer una página web (3) - párrafos

Bien, pues seguimos con mi-pag-web.html. Ahora vas a poner algo de texto en tu página web. Para evitar distracciones, sobre todo por mi parte, voy a emplear el denominado Lorem ipsum, un texto de relleno muy usado tanto en el diseño gráfico como en el web.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

A pesar de no haber tenido más remedio que usarlo a menudo, quiero dejar claro que en el ámbito profesional lo ideal sería prescindir de texto de relleno para diseñar un sitio web. Los resultados pueden ser desastrosos. En diseño web una pequeña variación en la longitud de un texto puede implicar tener que rehacer muchas cosas, aparte de que si se conoce con anterioridad la cantidad de texto a poner en las páginas, te haces una idea del tipo de diseño que necesitas, los espacios en blanco, los colores.. mil detalles!

Pues manos a la obra. Copia la primera frase del Lorem ipsum y mira el código de mi-pag-web.html ¿Ves el elemento BODY (cuerpo)? Es aquel definido por la etiqueta de apertura <body> y la etiqueta de cierre </body>. Pues es entre medias de estas etiquetas donde vas a escribir tu primer párrafo; es decir, dentro del elemento BODY.

<body></body>

Los párrafos se crean con el elemento P (de paragraph), que está definido por la etiqueta de apertura <p> y la etiqueta de cierre </p>. Crear un párrafo es tan sencillo como escribir ambas etiquetas dentro de las del elemento BODY.

<body><p></p></body>

Ya está, has definido un párrafo. En esencia, le has indicado al navegador que lo que vas a escribir es un párrafo. Ahora sólo te falta pegar la primera frase del Lorem ipsum.

<body>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</body>

Crea ahora otro párrafo, con la segunda frase del Lorem ipsum.

<body>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</body>

¡Importante! el código puede escribirse seguido, no afecta al resultado. Si lo escribo en líneas diferentes es por claridad.

Salva el documento y visualízalo en el navegador.. por fin, contenido en tu pagina web! 8)

Y ahora, haz una prueba... quita las etiquetas de párrafo, de manera que el BODY quede así:

<body>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</body>

Vuelve a salvar y visualiza el resultado en el navegador. Como ves, el texto ya no está formateado como párrafos, con sus correspondientes márgenes, sino que se muestra seguido. Vuelve a definir los párrafos, y si quieres (yo sí!) seguimos mañana! ;)

No hay comentarios:

Publicar un comentario