lunes, septiembre 09, 2013

Las etiquetas del HTML

Las etiquetas HTML

Las etiquetas de HTML-http://redondelasequeja.blogspot.com.es/ En este capítulo aprenderemos algunas de las etiquetas básicas de HTML que nos ayudarán a organizar el contenido de nuestra web.
Nos centraremos en darle un cierto formato y organizar el texto de modo que se vea claro y ordenado .


  • Los párrafos .

    La mayoría de las páginas web están formadas por texto combinado con otros elementos, como pueden ser las imágenes, los vídeos, los formularios, las tablas . . .etc.
    La forma más fácil de dar estructura a un texto consiste en separarlo en párrafos.
    Para delimitar el texto que irá incluido en un párrafo sólo debemos encerrarlo entre la etiqueta <p> .
    En el siguiente ejemplo veremos como se mostrará un texto sin el uso de la etiqueta <p> y el mismo texto incluyendo el uso de párrafos ( <p> ).
    Vereis la gran diferencia que se produce .

    ♞ Primer ejemplo: SIN usar etiqueta <p>

    <!DOCTYPE html>
    <html>
      <head>
        <title></title>
      </head>
      <body>
        Este es el primer párrafo de la página web, normalmente los párrafos ocupan más de una línea. Si no se indica lo contrario la longitud de los párrafos la marca el tamaño de la ventana del navegador. Este es el segundo párrafo, pero como no he usado la etiqueta p no me verás como un párrafo sinó como una línea más del conjunto de texto. En el segundo ejemplo si verás que soy el segundo párrafo. Por último este es un tercer párrafo.
      </body>
    </html>

    Este es el primer párrafo de la página web, normalmente los párrafos ocupan más de una línea. Si no se indica lo contrario la longitud de los párrafos la marca el tamaño de la ventana del navegador. Este es el segundo párrafo, pero como no he usado la etiqueta p no me verás como un párrafo sinó como una línea más del conjunto de texto. En el segundo ejemplo si verás que soy el segundo párrafo. Por último este es un tercer párrafo.

    ♞ Segundo ejemplo: CON etiqueta <p> :

    <!DOCTYPE html>
    <html>
      <head>
        <title></title>
      </head>
      <body>
        <p>Este es el primer párrafo de la página web, normalmente los párrafos ocupan más de una línea. Si no se indica lo contrario la longitud de los párrafos la marca el tamaño de la ventana del navegador.</p><p>Este es el segundo párrafo pero como no he usado la etiqueta p no me verás como un párrafo sinó como una línea más del conjunto de texto. En el segundo ejemplo si verás que soy el segundo párrafo.</p><p>Por último este es un tercer párrafo.</p>
      </body>
    </html>

    Este es el primer párrafo de la página web, normalmente los párrafos ocupan más de una línea. Si no se indica lo contrario la longitud de los párrafos la marca el tamaño de la ventana del navegador.

    Este es el segundo párrafo pero como no he usado la etiqueta p, no me verás como un párrafo sinó como una línea más del conjunto de texto. En el segundo ejemplo si verás que soy el segundo párrafo.

    Por último este es un tercer párrafo.



  • Los saltos de linea .

    En HTML para crear una nueva línea se usa la etiqueta <br /> . Esta etiqueta no es necesaria cerrarla, si la insertamos en una linea continua de texto provocará su ruptura con lo que obtendremos dos líneas. Su uso es muy simple, fijaros en el ejemplo.

    ♞ Primer ejemplo: SIN usar etiqueta <br />

    <!DOCTYPE html>
    <html>
      <head>
        <title></title>
      </head>
      <body>
        <p>Este es un párrafo que no contiene saltos de línea</p>
        <p>Este es un párrafo
           que contiene
           saltos de línea</p>
      </body>
    </html>

    El resultado quizás os cause sorpresa:

    Este es un párrafo que no contiene saltos de línea

    Este es un párrafo que contiene saltos de línea

    La explicación a este comportamiento es debido a que el HTML considera el caracter de nueva línea ( INTRO ) como un simple espacio en blanco.

    ♞ Segundo ejemplo: Usamos los saltos de línea <br /> :

    <!DOCTYPE html>
    <html>
      <head>
        <title></title>
      </head>
      <body>
        <p>Este es un párrafo que no contiene saltos de línea</p>
        <p>Este es un párrafo<br /> que contiene <br />saltos de línea</p>
      </body>
    </html>

    El resultado es el siguiente:

    Este es un párrafo que no contiene saltos de línea.

    Este es un párrafo
    que contiene
    saltos de línea.



  • Los títulos .

    Normalmente las páginas web están divididas en partes ( secciones ) y el comienzo de esas secciones o partes lo marcan los Titulos o encabezados ( HEADINGS ).
    En HTML existen 6 tipos de etiquetas para crear nuestros títulos. Estas son de mayor a menor importancia: <h1>, <h2>, <h3>, <h4>, <h5>, y <h6> . El tamaño de los encabezados está definido por los navegadores, en este ejemplo podeis observar su representación.

    <!DOCTYPE html>
    <html>
      <head>
        <title></title>
      </head>
      <body>
        <h1>Título h1</h1>
        <h2>Título h2</h2>
        <h3>Título h3</h3>
        <h4>Título h4</h4>
        <h5>Título h5</h5>
        <h6>Título h6</h6>
      </body>
    </html>

    El resultado se muestra de esta manera.

    Título h1

    Título h2

    Título h3

    Título h4

    Título h5
    Título h6

  • Los separadores .

    En HTML existe una etiqueta única ( no necesita etiqueta de cierre ) para crear líneas horizontales que actuan a modo de separadores, esta etiqueta es <hr />
    En el siguiente ejemplo podeis ver el aspecto con el que los navegadores muestran por defecto las líneas horizontales creadas con <hr />

    <!DOCTYPE html>
    <html>
      <head>
        <title></title>
      </head>
      <body>
        <h2>Ejemplo de etiqueta hr.</h2>
        <p>Este es un párrafo de texto.</p>
        <hr />
        <p>Este párrafo está separado por una línea.</p>
      </body>
    </html>

    Este es el resultado.

    Ejemplo de etiqueta hr.

    Este es un párrafo de texto.


    Este párrafo está separado por una línea.


  • Los comentarios .

    Son una especie de notas que ponemos en el código fuente, pero que no serán mostradas por el navegador. Se usan normalmente para indicar o señalar una parte del código de especial interes. Se escriben entre <!-- y -->

    <!DOCTYPE html>
    <html>
      <head>
        <title></title>
      </head>
      <body>
        <h2>Comentarios</h2>
        <p>Este es un párrafo con un comentario.</p><!-- Esto es un comentario. -->
        <p>Este párrafo no tiene ningún comentario.</p>
      </body>
    </html>

    Este es el resultado. Como podeis ver el comentario es "invisible" para el navegador .

    Comentarios

    Este es un párrafo con un comentario.

    Este párrafo no tiene ningún comentario.



En la próxima entrega del curso de HTML veremos uno de los pilares del HTML . Las Listas. Si habeis tenido algún problema o teneis alguna duda no dudeis en comentarlo .
Nos vemos .

Artículo creado por Miguel Angel.
Podeis seguime en:
   Google +

No hay comentarios:

Publicar un comentario