Los párrafos de nuestro documento han de ir precedidos de la etiqueta <p>, del inglés paragraf y acaban con </p>. La separación entre párrafos distintos es mayor que la que hay entre dos líneas de un mismo párrafo.
Si lo que queremos es un salto de línea sin cambiar de párrafo utilizaremos la etiqueta <br>, del inglés break, que no necesita etiqueta de cierre.
La tercera forma de separar dos párrafos o dos partes de nuestro documento es con una línea, que conseguiremos con la etiqueta <hr>, del inglés horizontal rule, que tampoco necesita etiqueta de cierre.
Veamos un ejemplo de todo esto junto:
| Código | Resultado |
|---|---|
<p>Aquí empieza un párrafo, aquí hay un salto<br>de línea, aquí termina el </p>párrafo y aquí separamos con una<hr>línea. |
Aquí empieza un párrafo, aquí hay un salto línea. |
Si lo que queremos es todo lo contrario, es decir, que no se produzca un salto de linea entre dos palabras, escribiremos el código entre ellas en vez de un espacio. Por ejemplo para no separar una cantidad de sus unidades: 15.000 kilómetros da lugar a 15.000 kilómetros.
Nota: Si quieres ver como actua cambia el tamaño de esta ventana del navegador y observa como siempre permanecen juntos.
Las etiquetas <br> y <hr> no llevan etiqueta de cierre. La etiqueta <p> puede no llevarla, aunque en xhtml es obligado y por tanto recomiendo utilizarla.
Cuando escribimos con distintos formatos de párrafo, por ejemplo distintos encabezados, no importa poner etiquetas de salto. En un mismo párrafo no pueden haber dos formatos de encabezado o párrafo distintos por lo que se produce automáticamente un salto de párrafo.
inicio.htm.Los elementos de frase añaden información estructural a los fragmentos de texto, indicando por ejemplo una cita, una abreviatura o un texto que queremos resaltar.
Los más comunes son los siguientes:
| Etiqueta | Significado |
|---|---|
<em> </em> | Indica énfasis |
<strong> </strong> | Indica un énfasis más fuerte |
<cite> </cite> | Contiene una cita o una referencia a otras fuentes |
<dfn> </dfn> | Indica que aquí es donde se define este término |
<code> </code> | Designa un fragmento de código de computadora |
<samp> </samp> | Designa una muestra de la salida de un programa, script, etc. |
<kbd> </kbd> | Indica texto que debe ser introducido por el usuario |
<var> </var> | Indica que el texto es una variable o un argumento de un programa |
<abbr> </abbr> | Indica una forma abreviada (p.ej., Sr., Atte., Exmo., etc.) |
<acronym> </acronym> | Indica un acrónimo (p.ej., WWW, OTAN, EEUU, etc.) |
Como puedes observar el resultado es muy similar, incluso igual, en muchos de ellos, esto es porque lo único que hacen es indicar qué es un determinado texto. Esto es practico si en una página vamos a utilizar, por ejemplo, varias citas. Podemos definir un estilo propio para todas nuestras citas de manera que resaltaran del resto del documento. En estas páginas utilizo la etiqueta <code> cuando escribo el código Html. Veremos como se hace en el capítulo Hojas de estilo.
| Atributos opcionales | |
|---|---|
title | Este atributo podemos utilizarlo en todas las etiquetas de Html para dar información sobre ésta. En este caso podríamos usarla para indicar, por ejemplo, el significado del acrónimo WWW. <acronym title="World Wide Web">WWW</acronym>Si pasas el cursor por encima verás el significado. |
lang | Este atributo también es común a la mayoría de etiquetas de Html para dar información sobre el idioma. En el caso anterior indicaríamos que proviene del inglés mediante: <acronym lang="en" title="World Wide Web">WWW</acronym> |
inicio.htm.Las citas se utilizan para resaltar un texto del resto del documento, generalmente porque pertenece a otro autor. Las dos formas posibles de indicar una cita en HTML dependen de si la cita es un párrafo nuevo o una frase dentro de un párrafo.
Para distinguir una cita como un párrafo nuevo utilizaremos <blockquote>. Esta etiqueta crea una sangría a izquierda y derecha de la cita resaltándola, como en el ejemplo siguiente:
En un lugar de la Mancha, de cuyo nombre no quiero acordarme, no ha mucho tiempo que vivía un hidalgo de los de lanza en astillero, adarga antigua, rocín flaco y galgo corredor.
Para indicar una cita dentro de un párrafo utilizaremos <q>. Esta etiqueta no hace nada aparentemente, de manera que si queremos que resalte del resto del documento tendremos que recurrir de nuevo a las hojas de estilo. Así por ejemplo en este documento las citas dentro de un párrafo las hemos diseñado en nuestra hoja de estilo como enfatizadas y entrecomilladas (todavía no visibles en Internet Explorer) y el resultado es: Más vale pájaro en mano, que cientos volando
.
inicio.htm.A continuación tienes una tabla con otros posibles estilos de texto:
| Etiqueta | Estilo |
|---|---|
<b> </b> |
Negrita |
<i> </i> |
Cursiva |
<sub> </sub> |
Subíndice |
<sup> </sup> |
Superíndice |
<tt> </tt> |
Tipográfico |
<big> </big> |
Grande |
<small> </small> |
pequeño |
En las versiones anteriores de HTML existía una etiqueta para el subrallado, <u> y dos más para texto tachado <s> y <strike>, si bien en la versión 4 ya no se utilizan y hay que recurrir a las hojas de estilo.
agua.htm con el editor de textos según aprendiste en la actividad 2.1.
Aunque ya no se recomienda su uso la principal etiqueta hasta ahora para cambiar el aspecto de la fuente de texto y que todavía utilizan muchos diseñadores de páginas web es <font>. Esta etiqueta ha desaparecido en la versión 4 con la aparición de las hojas de estilo, mucho más potentes, aunque la mayoría de navegadores aún las interpretan.
En el tutorial de Html 32, que puede descargarse en la Presentación de este tutorial, se explica su uso.
Encabezados |
Hojas de estilo ![]() |