quaderns

bitàcola de l'ies emili darder|web instituto | Contacto

Textos: sus códigos principales

webdarder | 16 Agost, 2004 10:25

Para escribir texto en esta bitácora se utilizan los códigos XHTML relacionados con el texto que son:

  • Códigos de párrafo: <p> ... </p>
  • Código de ruptura de línea: <br />
  • Códigos de títulos: <h1> ... </h1>, <h2> ... </h2>, etc.
  • Código para destacar texto: class="bold", class="italic", class="underline"

Este artículo se va a limitar a los códigos indicados y quedarán para un futuro artículo los códigos relacionados con listas, citas y divisores especiales.

Códigos de párrafo

Todo el texto de un artículo queda dividido en párrafos y se señala el inicio y el final de cada uno de ellos con los códigos <p> y </p>
Conviene observar el interlineado entre párrafos, diferente al interlineado entre líneas.

<p>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.<p>

<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>

Los códigos indicados quedan así:

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.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.


códigos para títulos

<h1>Titular con h1</h1>

<h2>Titular con h2</h2>

<h3>Titular con h3</h3>

<h4>Titular con h4</h4>

<h5>Titular con h5</h5>

<h6>Titular con h6</h6>

Ahora veamos cómo quedan los códigos indicados:

Titular con h1

Titular con h2

Titular con h3

Titular con h4

Titular con h5
Titular con h6

Las clases: bold (negrita), italic y underline (subrayado)

Las clases para destacar texto se pueden aplicar a cualquier elemento de texto: párrafo, titular o algunas palabras del interior de un párrafo.

Ahora pondré los códigos de clase aplicados:

<p class="bold">Este párrafo saldrá todo él con letra negrita ya que he aplicado la clase bold al código de párrafo</p>

<p>Ahora aplico la clase bold sólo a dos palabras utilizando el elemento span: <span class="bold">letra negrita</span>. El resto del párrafo saldrá con letra normal.</p>

Por lo general los titulares (h1, h2 ...) ya tienen letra negrita, por lo que voy a aplicarle otra clase de letra:

<h3 class="underline">Titular h3 en negrita y subrayado</h3>

Poner o alinear en el centro es también una clase:

<h4 class="center"><span class="underline">Titular h4 centrado y subrayado</span></h4>

Veamos cómo queda:

Este párrafo saldrá todo él con letra negrita ya que he aplicado la clase bold al código de párrafo

Ahora aplico la clase bold sólo a dos palabras utilizando el elemento span: letra negrita. El resto del párrafo saldrá con letra normal.

Titular h3 en negrita y subrayado

Titular h4 centrado y subrayado


El código br/ de ruptura de línea

Hasta ahora todos los códigos utilizados tenían dos etiquetas o tags: uno de apertura y otro de cierre.

Así he utilizado:

  • <p> ... </p> para el párrafo
  • <h3> ... </h3> para un título
  • <span> ... </span> para un fragmento de texto en el interior de un párrafo

Pero así como todas estas etiquetas indicaban un comienzo y un final, hay otras que no indican el comienzo ni el final sino sólo el lugar donde debe de situarse un objeto.

Esto ocurre con el código para imagen, que sólo indica el lugar donde debe estar una imagen; también ocurre con el código para poner una línea horizontal y con el código para hacer una ruptura de línea.

Veamos el código de ruptura de línea con un ejemplo:

<p>Frase una del párrafo 1.<br />Frase dos del párrafo 1.<br />Frase tres del párrafo uno.</p>

<p>Frase una del párrafo 2. Frase dos del párrafo 2. Frase tres del párrafo 2.</p>

En el párrafo 1 he separado las frases con un código de ruptura de línea (Atención a la barra de cierre del código).
Queda así:

Frase una del párrafo 1
Frase dos del párrafo 1.
Frase tres del párrafo 1.

Frase una del párrafo 2. Frase dos del párrafo 2. Frase tres del párrafo 2.

Comentaris

tutu

tutu | 08/11/2004, 23:32

tyutyu

Re: Textos: sus códigos principales

Felipe Sérvulo | 10/09/2006, 15:39

Hola: En general, me ha sido muy útil para mi bitácora, pero tengo un problema que no se como resolver: cuando escribo o "corto y pego" un poema siempre me sale a dos espacios el interlineado entre párrafos, aunque esté a sencillo el original. He intentado con distintos cógdigos y sigue igual. Gracias
 
Accessible and Valid XHTML 1.0 Strict and CSS
Powered by LifeType - Design by BalearWeb