Párrafos

Con lo explicado antes seguimos teniendo una página vacia. Os explico ahora algunos elementos que podemos usar en nuestras páginas web, empezando por los párrafos.

Lo más básico que podemos insertar en nuestra nueva página aún en blanco, son palabras. Vamos a ver como se pone en código Html5 un párrafo.

En primer lugar deciros que todos los elementos (o casi todos los elementos) de una web, (me refiero a todo lo "visible", o casi) irá dentro del body que ya conocéis, es decir, entre <body> y </body>. Existen otras cosas que no son "visibles" y esas irán en el head principalmente. Las línea que vimos para especificar el tipo de codificación no es algo visible, mientras un párrafo que intenta transmitir algo a los visitantes, obviamente si que es visible.

Para escribir un párrafo, lo haremos dentro de la zona visible (el body) encerrando lo que queremos escribir entre los símbolos <p> y </p> que son las etiquetas para escribir párrafos.

Como véis, la primera etiqueta indica comienzo de párrafo (de ahí la "p" de párrafo) y la segunda situada al final indica el final del párrafo, y lleva por tanto la barrita "/".

Por ejemplo, si queremos que en nuestra web aparezca el siguiente párrafo:

Hola amigos, esta es mi nueva Web

tendremos que escribir, entre <body> y </body> la siguiente línea:

<p>Hola amigos, esta es mi nueva Web</p>

de forma que el ejemplo anterior quedaría así:

<!DOCTYPE html>
<html lang="es">
  <head>
      <meta charset="utf-8" />
      <title>Mi Nueva Web</title>
  </head>
  <body>
      <p>Hola amigos, esta es mi nueva Web</p>
  </body>
</html>

Como ves, en este ejemplo se ha puesto ya el título a la página. En concreto se le ha llamado "Mi Nueva Web".

Si ahora quieres añadir otro párrafo, simplemente coloca otra línea más antes o después de la escrita antes, según quieras que la nueva aparezca encima o debajo del párrafo antiguo.

Por ejemplo, si quiero que antes del párrafo "Hola amigos...." aparezca la palabra "BIENVENIDOS" el código HTML debería quedar como sigue:

<!DOCTYPE html>
<html lang="es">
  <head>
      <meta charset="utf-8" />
      <title>Mi Nueva Web</title>
  </head>
  <body>
      <p>BIENVENIDOS!</p>
      <p>Hola amigos, esta es mi nueva Web</p>
  </body>
</html>

Aunque a veces funcione sin etiqueta de cierre, no olvides nunca indicar el final del párrafo con </p>. Te evitará problemas más adelante.

Ver como queda el ejemplo hasta ahora.

Si una vez abierta la ventana pulsas en "Ver" y luego en "Código Fuente" verás el código HTML de esa página. Si no ves botones donde elegir "ver el código fuente" en la ventana que se abre, prueba a pulsar sobre el interior de la pantalla de ejemplo con el botón derecho del ratón y escoge ahí "ver el código fuente". Por supuesto, debería ser idéntico al escrito arriba.

Si os va gustando todo esto seguidme a la página siguiente.