2. Párrafos y saltos de línea - Diferencias y usos
¡Buenas!
No hace mucho que vimos el primer capítulo de la "mini guía" de HTML que estoy haciendo, donde aprendimos lo que era un documento HTML y cómo se estructuraba el mismo. Vimos lo sencillo que era crear una página con texto, y creamos nuestro primer "Hola mundo". Pero... si alguien tuvo la curiosidad de intentar cosas un tanto más complicadas llegaría a darse cuenta que no se puede cambiar de línea. ¿por qué? Porque trabajábamos con un texto plano, sin ningun formato.
Hoy vamos a aprender a darle el formato más básico a los textos: Los saltos de línea y los párrafos.
Saltos de línea:
Un salto de línea es, simplemente, cambiar de línea. Para ello se utiliza la etiqueta <br />
Cómo ves, no tiene el formato típico de las etiquetas HTML. Esta etiqueta es una etiqueta (no la única) un tanto especial, ya que se abre y se cierra de una sóla vez. Me explico:
<tbody> <tr> </tr> </tbody>
|
<br - Indica que se abre una etiqueta br. |
Ahora vamos a ver cómo funciona:
<tbody> <tr> </tr> </tbody>
|
Hola <br /> Mundo |
El resultado sería simplemente este
<tbody> <tr> </tr> </tbody>
| Hola Mundo |
Párrafos:
Los saltos de linea van muy bien, pero... no dejan mucho espacio entre una línea y otra, y para dividir en párrafos habría que poner varios y... Ah, no, que HTML ya lo ha pensado, y ha creado una etiqueta específica para los párrafos, la etiqueta <p> .
El funcionamiento de esta etiqueta es tan sencillo como todo lo que hemos visto hasta ahora:
<tbody> <tr> </tr> </tbody>
<tbody> <tr> </tr> </tbody>
<tbody> <tr> </tr> </tbody>
<tbody> <tr> </tr> </tbody>
|
<p>HOLA</p> |
Y tendríamos por resultado algo tipo:
<tbody> <tr> </tr> </tbody>
<tbody> <tr> </tr> </tbody>
<tbody> <tr> </tr> </tbody>
<tbody> <tr> </tr> </tbody>
|
HOLA MUNDO |
Saltos de línea en un párrafo :
Si, podemos colocar un salto de línea en un párrafo si queremos que el texto cambie de línea pero sin cerrar el párrafo. Tan sencillo como:
<tbody> <tr> </tr> </tbody>
<tbody> <tr> </tr> </tbody>
<tbody> <tr> </tr> </tbody>
<tbody> <tr> </tr> </tbody>
|
<p> Hola <br /> mundo </p> |
Y con el resultado de:
<tbody> <tr> </tr> </tbody>
<tbody> <tr> </tr> </tbody>
<tbody> <tr> </tr> </tbody>
<tbody> <tr> </tr> </tbody>
|
Hola Otro párrafo... |
Conclusión:
Podemos colocar tanto párrafos como saltos de línea en los documentos que aprendimos en la entrada anterior, dándole así un primer formato al texto que allí coloquemos, quedando algo como:
<tbody> <tr> </tr> </tbody>
<tbody> <tr> </tr> </tbody>
<tbody> <tr> </tr> </tbody>
<tbody> <tr> </tr> </tbody>
|
<html> |
Quedaría algo así:
<tbody> <tr> </tr> </tbody>
|
CURRICULUM VITAE Nombre completo: Estudios: Inglés: Otros conocimientos: Email de contacto: |
Pues bien, ya veis lo sencillo que es esto. En unos días publicaré la siguiente etapa del manual, también muy sencilla, donde dejaremos el texto precioso, con sus negritas, cursivas...
Como siempre, cualquier duda, pregunta, idea, ruego sugerencia o lo que sea, los comentarios abiertos.
<tbody> <tr> </tr> </tbody>
| «Capitulo anterior | Capítulo siguiente » |
Comentarios
partyflipa - hace más de 14 años
¡Qué currao! Además de ameno creo que es genial que lo hagas en pequeñas dosis. Tengo una duda sobre una etiqueta. La uso para dar también saltos de línea, pero, si lo sabes, me gustaría saber qué diferencia hay con las anteriores que has mencionado. No sé si el código se verá bien en el comentario... la pongo de dos maneras
partyflipa - hace más de 14 años
P.D.: ¡Gracias! :)
un tal carlos - hace más de 14 años
Muchas gracias por leer y comentar :) Te explico: es una etiqueta de "caracteres especiales". Aquí tenemos las letras tildadas, las comillas, las interrogaciones... Esa en concreto se llama así por "non breaking space". Su función es, básicamente la del espacio, peeeero... Este espacio "no se puede partir", como su nombre indica. Si tu ponesHola mundo
y el contenedor (tabla, div o la misma pantalla) es demasiado pequeña, te lo va a poner en dos líneas. si pones en vez de esoHola mundo
, por muy pequeño que sea el contenedor estarán en la misma línea. Lo que a ti te sucede es que a lo mejor dejas una etiqueta vacía para darle un espacio, o salto o... y HTML detecta que está vacía, y dice "si no hay nada es que aún no está hecho, y para mostrarlo a medias no lo muestro" (más o menos xD) Entocnes, tu le pones el y html dice "Ah, ya ha metido algo, pues ale, lo muestro" y ¡voilá! funciona. ¿Lo he explicado bien? ¡Gracias por tu interés!manu - hace más de 14 años
Te felicito por tu manual, cosa que no hice en el anterior post... :S Y gracias por hacerlo, porque a pesar de que llevo poco más que 4 años estudiando informática, el html es algo que se me está olvidando y gracias a esto voy recordándolo poco a poco, jejeje..
jose luis - hace más de 14 años
Un tal Carlos, en mi navegador, no se si ocurre en todos se ve un poco raro, cada vez que pones una tabla o parte de código me aparece un código encima.
un tal carlos - hace más de 14 años
Muchas gracias a ambos por leer y comentar. En cuanto al código raro sale a todos. No es por el navegador, sino por el editor wysiwyg que hay para las entradas. Es muy potene pero tiene pequeños errores como ese. lo he intentado quitar, pero... aunque ponga el editor de HTML y lo haga yo a mano (lo hago a mano) detecta una tabla y en vez de darle los atributos con HTMl lo hace con CSS, y junto con eso me añade esas dos etiquetas, pero me las añade en formato texto: "<tbody> <tr> </tr> </tbody>" En cuanto al WP cuando quieras, me lo dices y aparezco, ya lo sabes ;)
partyflipa - hace más de 14 años
¡Jum! ¡Muchas gracias por tu respuesta! Ya me siento un poco menos cutre de usar muchas cositas de HTML sin saber exactamente qué significa... jajaja
macrosoft - hace más de 14 años
Busco tipos de fuente y etc. Se como ponerlas, pero no se extraer algunas que molan de otras páginas web
un tal carlos - hace más de 14 años
pues depende de como lo hayan hecho. Si lo hacen por CSS (código de maquetación), tendrías que ver en qué propiedad lo definen. Pongamos por caso que el código fuese este:Texto con fuente personalizada
Texto con otra fuente
Bien, los párrafos llevan dos identificadores, uno de clase y otro de identidad. Tendrías que buscar en la hoja de estilos (entrando en el código fuente, en el head, entre etiquetas o en el un archivo .css que se añade en el head también de forma ). Una vez tengas la hoja de estilos visualizada, busca el identificador o la clase del elemento que quieres obtener. #identificador { font-family: "Fuente En Concreto"; font-size: 12pt; } .clase { font-family: "Fuente En Concreto"; font-color: #CCC; padding: 5px; } El atributo que te dice que fuente es, es el "font-family". Puede tener más cosas, pero el nombre de la fuente está siempre entre comillas. Una vez tienes el nombre, la puedes buscar en google ;) Hay una forma de bajarlas desde la página, pero ya nos meteríamos en javascript más complejo... y eso creo que no se puede explicar de forma "fácil y rápida" (en una sóla lección, como esto... creo.) ¡Un saludo!No se pueden incorporar más comentarios a este blog.