Diseño de páginas web - Saltos de renglón y Párrafos
-
Upload
sebastian-de-los-angeles -
Category
Documents
-
view
232 -
download
0
Transcript of Diseño de páginas web - Saltos de renglón y Párrafos
![Page 1: Diseño de páginas web - Saltos de renglón y Párrafos](https://reader036.fdocuments.ec/reader036/viewer/2022082811/558fe3b71a28ab701a8b45e1/html5/thumbnails/1.jpg)
Diseño de Páginas Webcon HTML
Formato Básico del TextoSaltos de renglón y Definición de Párrafos
![Page 2: Diseño de páginas web - Saltos de renglón y Párrafos](https://reader036.fdocuments.ec/reader036/viewer/2022082811/558fe3b71a28ab701a8b45e1/html5/thumbnails/2.jpg)
El flujo del texto en HTML
En el procesador de textos es normal usar la tecla “enter” para trabajar en el siguiente renglón.
![Page 3: Diseño de páginas web - Saltos de renglón y Párrafos](https://reader036.fdocuments.ec/reader036/viewer/2022082811/558fe3b71a28ab701a8b45e1/html5/thumbnails/3.jpg)
Pero en HTML esto no funciona igual.Si, por ejemplo, nuestro texto es así en el
editor de texto plano:
Hoy es 9 de agosto del 2012Es un día muy agradable
![Page 4: Diseño de páginas web - Saltos de renglón y Párrafos](https://reader036.fdocuments.ec/reader036/viewer/2022082811/558fe3b71a28ab701a8b45e1/html5/thumbnails/4.jpg)
El navegador lo va a mostrar asi:
![Page 5: Diseño de páginas web - Saltos de renglón y Párrafos](https://reader036.fdocuments.ec/reader036/viewer/2022082811/558fe3b71a28ab701a8b45e1/html5/thumbnails/5.jpg)
El navegador lo va a mostrar asi:
Como puedes ver, el navegador no tuvo en cuenta el “enter” o salto de
renglón que pusimos entre las oraciones.
![Page 6: Diseño de páginas web - Saltos de renglón y Párrafos](https://reader036.fdocuments.ec/reader036/viewer/2022082811/558fe3b71a28ab701a8b45e1/html5/thumbnails/6.jpg)
Para que el navegador sepa que queremos hacer un salto de renglón usaremos la etiqueta <br />
Hoy es 9 de agosto del 2012 <br />Es un día muy agradable
![Page 7: Diseño de páginas web - Saltos de renglón y Párrafos](https://reader036.fdocuments.ec/reader036/viewer/2022082811/558fe3b71a28ab701a8b45e1/html5/thumbnails/7.jpg)
Para que el navegador sepa que queremos hacer un salto de renglón usaremos la etiqueta <br />
Hoy es 9 de agosto del 2012 <br />Es un día muy agradable
No es necesario cerrar esta etiqueta, ya que se
cierra en si misma
![Page 8: Diseño de páginas web - Saltos de renglón y Párrafos](https://reader036.fdocuments.ec/reader036/viewer/2022082811/558fe3b71a28ab701a8b45e1/html5/thumbnails/8.jpg)
Para que el navegador sepa que queremos hacer un salto de renglón usaremos la etiqueta <br />
Hoy es 9 de agosto del 2012 <br />Es un día muy agradable
“br” viene de “break” que en inglés significa
“romper”
![Page 9: Diseño de páginas web - Saltos de renglón y Párrafos](https://reader036.fdocuments.ec/reader036/viewer/2022082811/558fe3b71a28ab701a8b45e1/html5/thumbnails/9.jpg)
Ahora sí el navegador reconoce que hay un salto de renglón en esa parte del texto.
![Page 10: Diseño de páginas web - Saltos de renglón y Párrafos](https://reader036.fdocuments.ec/reader036/viewer/2022082811/558fe3b71a28ab701a8b45e1/html5/thumbnails/10.jpg)
Otra forma de separar partes del texto es mediante la etiqueta <p>
La usaremos para definir los párrafos en textos más largos.
Por Ejemplo:
<p>El paracaidista austríaco Felix Baumgartner logró romper la barrera del sonido en caída libre.</p><p>Saltó desde 39.000 metros de altura sobre el suelo de Nuevo México Estados Unidos).</p>
![Page 11: Diseño de páginas web - Saltos de renglón y Párrafos](https://reader036.fdocuments.ec/reader036/viewer/2022082811/558fe3b71a28ab701a8b45e1/html5/thumbnails/11.jpg)
Otra forma de separar partes del texto es mediante la etiqueta <p>
La usaremos para definir los párrafos en textos más largos.
Por Ejemplo:
<p>El paracaidista austríaco Felix Baumgartner logró romper la barrera del sonido en caída libre.</p><p>Saltó desde 39.000 metros de altura sobre el suelo de Nuevo México Estados Unidos).</p>“p” viene de “paragraph”
que en inglés significa “párrafo”
![Page 12: Diseño de páginas web - Saltos de renglón y Párrafos](https://reader036.fdocuments.ec/reader036/viewer/2022082811/558fe3b71a28ab701a8b45e1/html5/thumbnails/12.jpg)
Se muestra de esta manera en el navegador:
![Page 13: Diseño de páginas web - Saltos de renglón y Párrafos](https://reader036.fdocuments.ec/reader036/viewer/2022082811/558fe3b71a28ab701a8b45e1/html5/thumbnails/13.jpg)
Se muestra de esta manera en el navegador:
Además de un salto de renglón, la etiqueta <p> añade un espacio
entre los párrafos que forma.
![Page 14: Diseño de páginas web - Saltos de renglón y Párrafos](https://reader036.fdocuments.ec/reader036/viewer/2022082811/558fe3b71a28ab701a8b45e1/html5/thumbnails/14.jpg)
Otra forma de organizar este texto podría ser usando una etiqueta <br /> en uno de los párrafos de esta forma:
<p>El paracaidista austríaco Felix Baumgartner logró romper la barrera del sonido en caída libre.</p><p>Saltó desde 39.000 metros de altura.<br />Fue sobre el suelo de Nuevo México Estados Unidos).</p>
![Page 15: Diseño de páginas web - Saltos de renglón y Párrafos](https://reader036.fdocuments.ec/reader036/viewer/2022082811/558fe3b71a28ab701a8b45e1/html5/thumbnails/15.jpg)
Y de esta forma obtenemos esta página:
![Page 16: Diseño de páginas web - Saltos de renglón y Párrafos](https://reader036.fdocuments.ec/reader036/viewer/2022082811/558fe3b71a28ab701a8b45e1/html5/thumbnails/16.jpg)
Y de esta forma obtenemos:
La etiqueta <br /> genera un salto de renglón dentro de un mismo
párrafo
![Page 17: Diseño de páginas web - Saltos de renglón y Párrafos](https://reader036.fdocuments.ec/reader036/viewer/2022082811/558fe3b71a28ab701a8b45e1/html5/thumbnails/17.jpg)
Podemos Concluir Que:
•<br /> nos permite generar saltos de renglón en cualquier parte del texto, incluso dentro de párrafos.
•<p> nos permite generar párrafos o secciones de texto separadas por un espacio
![Page 18: Diseño de páginas web - Saltos de renglón y Párrafos](https://reader036.fdocuments.ec/reader036/viewer/2022082811/558fe3b71a28ab701a8b45e1/html5/thumbnails/18.jpg)
Taller de Informática – 2º año 2012
Liceo Nº4 Melo
Docente: Luis Sebastián de los Angeles