martes, 7 de julio de 2015

Saltos de linea y párrafos en HTML

Hoy les traigo un pequeño tutorial de saltos de linea y párrafos en HTML.

En el tutorial anterior les explicaba un poco acerca de la sintaxis básica de HTML, si no haz visto el tutorial anterior selecciona aquí

Un programa que yo recomiendo para programación web es Brackets, si te interesa instalarlo en Windows, un tutorial acerca de eso esta aquí.

Y ya conociendo la sintaxis básica, comencemos.

Para realizar un salto de linea dentro de HTML se utiliza la etiqueta <br/>, cada vez que se utilice esta etiqueta, sera equivalente a un "Enter" dentro del contenido de la pagina web. Es necesario aclarar que esta etiqueta no cuenta con una etiqueta de cierre.
<html>
    
    <head>
        <title>
            Saltos de linea y parrafós
        </title>
    </head>
    
    <body>
        Texto normal
        <br/><br/>Texto<br/>con<br/>saltos<br/>de<br/>linea<br/><br/>
    </body>
    
</html>
Existe la etiqueta <p> para agrupar texto por párrafos, y estos pueden alinear a la izquierda, al centro o a la derecha, esta etiqueta si necesita una etiqueta de cierre.
<html>
    
    <head>
        <title>
            Saltos de linea y parrafós
        </title>
    </head>
    
    <body>
        Texto normal
        <br/><br/>Texto<br/>con<br/>saltos<br/>de<br/>linea<br/><br/>

        <p align="left">Texto a la izquierda</p>
        <p align="center">Texto al centro</p>
        <p align="right">Texto a la derecha</p>
    </body>
    
</html>
Y por ultimo, existe la etiqueta <pre>, que el contenido dentro de ella, se muestre con ese mismo formato dentro de el navegador, esta etiqueta si necesita una etiqueta de cierre.
<html>
    
    <head>
        <title>
            Saltos de linea y parrafós
        </title>
    </head>
    
    <body>
        Texto normal
        <br/><br/>Texto<br/>con<br/>saltos<br/>de<br/>linea<br/><br/>

        <p align="left">Texto a la izquierda</p>
        <p align="center">Texto al centro</p>
        <p align="right">Texto a la derecha</p>

        <pre>
        este texto
                tiene la etiqueta

p
    r
        e
        </pre>
    </body>
    
</html>
Este código se vería así: 




Espero y este tutorial les sea de utilidad, cualquier duda no duden en comentarla por favor. Muchas gracias por visitar este tutorial.

Fuente:
http://html.hazunaweb.com/105.php consultada el 07 de Julio del 2015.

No hay comentarios:

Publicar un comentario