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: