Writing HTML | Acerca de | FAQ | Alumnos | Tags | Lecciones | anterior | siguiente |

4. Separando en P·rrafos

Bien... Ya ha creado y modificado documentos HTML, y debiera sentirse a gusto con el proceso de ediciÛn de texto y su revisualizaciÛn en el Web Browser. AsÌ que ahora, rel·jese para esta agotadora lecciÛn sobre la inserciÛn de marcas de p·rrafo.

Objetivos

DespuÈs de esta lecciÛn usted ser· capaz de:

LecciÛn

P·rrafos en HTML

Ya habÌamos visto anteriormente que el browser ignorar· todos los RETORNOS DE CARRO tal y como los introducimos en el texto. Pero, no obstante, allÌ donde el browser vea una etiqueta de p·rrafo insertar· una linea en blanco y comenzar· un nuevo p·rrafo.

El cÛdigo HTML para forzar una "ruptura" de p·rrafo es: 

     <p>

Note que lo especial de esta etiqueta es que no requiere otra etiqueta de "finalizaciÛn"; por ello no necesitar· usar: 

     </p>

En alguna lecciÛn posterior veremos una situaciÛn donde la etiqueta <p> si que requiere de una </p>, pero para la mayor parte de su trabajo con el HTML esto no ser· necesario.

Note tambiÈn que las etiquetas <hN> llevan incorporadas una ruptura de p·rrafo tambiÈn, con lo que se hace innecesario poner una etiqueta <p> antes de un cÛdigo de encabezado: 

     <p>
     <h2>Blah Blah Blah Blah</h2>

Insertando Rupturas de P·rrafo

Nota: Si no tiene el documento de trabajo de la lecciÛn anterior, b·jese una copia ahora.

Siga estas directivas para insertar y ver una ruptura de p·rrafo en su documento HTML.

  1. Abra su ·rea de trabajo (si no la tiene abierta).
  2. Vaya a la ventana del editor de textos.
  3. Abra su documento de trabajo, Volc.htm, en la ventana del editor de textos (si a™n no lo tiene abierto).
  4. En primer lugar, queremos "mover" las frases ("Un volc·n es.....") de modo que queden bajo el encabezado de IntroducciÛn. Use el ratÛn para cortar y pegar este texto en el lugar correcto.
  5. DespuÈs, aÒadiremos m·s texto. Pero, mejor que teclearlo, desde esta misma p·gina Web usaremos el ratÛn para seleccionar y copiar las frases: 
    
     Los volcanes han sido parte de la historia de la Tierra
     desde mucho antes de los hombres. Compare la historia
     de los seres humanos, unos pocos millones de aÒos, con
     la de la Tierra, m·s de cuatro billones de aÒos.
  6. Ahora vuelva a su documento HTML en la ventana del editor y pegue este texto despuÈs de las frases bajo la etiqueta de <h2>IntroducciÛn</h2>.
  7. Guarde los cambios de su editor.
  8. Vuelva al browser.
  9. Si su documento no es visible, use el comando Abrir Local... (Open Local...) del men™ Archivo (File) para abrirlo.
  10. Elija Actualizar (Reload) del men™ Archivo (File). Ahora deberÌa ver dos frases de introducciÛn. A continuaciÛn pondremos una ruptura de p·rrafo entre estas frases.
  11. Vuelva de nuevo a su documento HTML en el editor.
  12. DespuÈs de la segunda frase bajo la <h2>IntroducciÛn</h2> (la que acaba con "...como un flujo de lava lento y largo."), pulse ENTER (no es necesario pero hace m·s legible el HTML a la hora de trabajar con Èl), e introduzca la etiqueta de p·rrafo: 
         <p>
    Ahora, esta secciÛn deberÌa parecerse a esto: 

      <h2>IntroducciÛn</h2>
  Un volc·n es un lugar donde el magma,
  o roca caliente y derretida del interior del planeta,
  alcanza la superficie. Puede suceder violentamente,
  en una explosiÛn supersÛnica y masiva, o m·s
  tranquilamente, como un flujo de lava lento y largo.
  <p>
  Los volcanes han sido parte de la historia de la Tierra
  desde mucho antes de los hombres. Compare la historia
  de los seres humanos, unos pocos millones de aÒos, con
  la de la Tierra, m·s de cuatro billones de aÒos.
  13. Guarde los cambios del editor de textos.
  14. Vuelva al browser y Actualice (Reload) el documento. Las dos frases de la introducciÛn deberÌan ser ahora p·rrafos separados.

Otros tipos de rupturas

Para separar las grandes secciones de una p·gina utilice la lÌnea (hard rule) o etiqueta hr.
Con ella se inserta una lÌnea recta como puede ver justo encima de esta secciÛn.

El formato HTML para una lÌnea es: 

     <hr>
°IntÈntelo! Ponga una etiqueta hr justo antes del encabezado de IntroducciÛn. Esto le ayudar· a separar la apertura de la lecciÛn de otras secciones que sigan.

Finalmente, tenemos tambiÈn la etiqueta <br> que fuerza a que el texto a continuaciÛn pase a una nueva lÌnea, como la etiqueta <p>, pero sin insertar una lÌnea en blanco. Puede usar esta etiqueta cuando escriba las lÌneas de un poema, etc... Compare las diferencias entre usar <br> y <p> en estos dos ejemplos:

Etiquetas de P·rrafo <p> SÛlo
HTML Resultado 
Y finalmente, pudimos ver
el brillante propÛsito
de la etiqueta de p·rrafo.
<p>
M·s adelante...
<p>
Cuantas m·s etiquetas... ømejor se siente?
Y finalmente, pudimos ver el brillante propÛsito de la etiqueta de p·rrafo.

M·s adelante...

Cuantas m·s etiquetas... ømejor se siente?

Etiquetas de P·rrafo <p> y Ruptura de LÌneas <br>
HTML Resultado 
Y finalmente, pudimos ver<br> 
el brillante propÛsito<br>
de la etiqueta de p·rrafo.
<p>
M·s adelante...
<br>
Cuantas m·s etiquetas... <br> 
ømejor se siente?
 Y finalmente, pudimos ver
el brillante propÛsito
de la etiqueta de p·rrafo.

M·s adelante...
Cuantas m·s etiquetas...
ømejor se siente?

La etiqueta <br> puede ser utilizada para diferentes propÛsitos de estilo en diferentes encabezados. Si se da cuenta, las etiquetas de encabezado <h1>, <h2>, ... insertan autom·ticamente espacios en blanco antes y despuÈs del texto del encabezado. Algunos autores de p·ginas Web prefieren un estilo que controle estos espacios en blanco.

TÌtulos de SecciÛn con Etiquetas de Encabezado
HTML Resultado 
y al final se redujo a nada.

<h4>El Nuevo Edicto del Queso</h4>
M·s tarde, Sir Longhorn declarÛ 
que todos los queseros deberÌan estar
certificados antes de comenzar la producciÛn.
y al final se redujo a nada.

El Nuevo Edicto del Queso

M·s tarde, Sir Longhorn declarÛ que todos los queseros deberÌan estar certificados antes de comenzar la producciÛn.
TÌtulos de SecciÛn con etiquetas <b> y <br>
HTML Resultado 
y al final se redujo a nada.
<p>
<b>El Nuevo Edicto del Queso</b><br>
M·s tarde, Sir Longhorn declarÛ 
que todos los queseros deberÌan estar
certificados antes de comenzar la producciÛn.
y al final se redujo a nada.

El Nuevo Edicto del Queso
M·s tarde, Sir Longhorn declarÛ que todos los queseros deberÌan estar certificados antes de comenzar la producciÛn.

La diferencia puede aparentar ser trivial ahora, pero abre muchas posibilidades cuando despuÈs aprendamos a crear textos de diferente tamaÒo y color para nuestros encabezados. Por ejemplo, eche un vistazo a P·ginas Web Que No Parecen P·ginas Web.

Revise su trabajo

Si lo desea, compare su p·gina Web con este ejemplo. Si su documento es distinto del ejemplo, revise cÛmo introdujo las rupturas de p·rrafo, <p>, en el editor de textos. Aseg™rese de que lo tecleÛ como se comentÛ en la secciÛn Insertando Rupturas de P·rrafo de esta lecciÛn.

RevisiÛn

  1. øPara quÈ sirve la etiqueta de ruptura de p·rrafo?
  2. øQuÈ pasos se dan para insertar una etiqueta de ruptura de p·rrafo en un documento?
  3. øCÛmo mostrÛ y vio los cambios en su browser?
  4. Puntos Extra* - øQuÈ y para quÈ es la etiqueta de lÌnea, <hr> ? øY la etiqueta <br>?

Pr·ctica Independiente

Utilice el p·rrafo, la lÌnea, o el br para crear p·rrafos o secciones en su propio documento.

A continuaciÛn....

øRecuerda su primera fuente?
øQuÈ le parece si aÒadimos algo de Estilo... a su texto?
IR A.... | Õndice de lecciones | anterior: "Encabezados - Los Seis Niveles" | siguiente: "DiseÒando con Estilo" |

Writing HTML LecciÛn 4: Separando en P·rrafos
©1995, 1996 Maricopa Center for Learning and Instruction (MCLI)
Maricopa County Community College District, Arizona

El enlace con el MCLI es Alan Levine --}
Comentarios a levine@maricopa.edu
Traducido al espaÒol por agma@usa.net, y corregido por AndrÈs Valencia

URL: