martes, septiembre 03, 2013

Las reglas del HTML

Las reglas del HTML

imagen de tags-http://redondelasequeja.blogspot.com.es/ Como ya os he dicho en capítulos anteriores el HTML es un lenguaje de marcas, su base son las etiquetas.
Como habeis visto en nuestro primer ejemplo de documento HTML , éste no es más que un conjunto de etiquetas y texto "plano".

  • Las etiquetas ( TAGS )

    Aunque existen algunas excepciones, en general las etiquetas se indican por pares y se forman de la siguiente manera:
    - etiqueta de apertura:   <etiqueta>
    - etiqueta de cierre:  </etiqueta>
    De esta manera, la estructura típica de las etiquetas HTML es ésta :
    <etiqueta_apertura> hola soy una etiqueta </etiqueta_cierre>
    Todo lo que está incluido entre la etiqueta de apertura y la de cierre se verá afectado por la función de la etiqueta. Lo que quiere decir esto es que un mismo texto se mostrará en el navegador de diferente manera dependiendo de la etiqueta que encierre el texto.
    Aquí teneis un ejemplo:

    <p>hola, yo soy un parrafo</p>
    <em>hola, yo soy un texto resaltado</em>

    hola, yo soy un parrafo


    hola, yo soy un texto resaltado


  • Anidar o enlazar etiquetas

    Hasta ahora hemos visto que las etiquetas HTML suelen ir por parejas, con algunas excepciones que ya veremos. El HTML también nos ofrece la posibilidad de incluir unas etiquetas dentro de otras. A esto se le llama anidar etiquetas.
    Aquí teneis un ejemplo:

    <p>Hola, yo soy un parrafo. <em>Hola, yo soy un texto resaltado dentro de un parrafo</em> que encierra una etiqueta em</p>

    Hola, yo soy un parrafo. Hola, yo soy un texto resaltado dentro de un parrafo que encierra una etiqueta em


    La forma correcta de anidación es la siguiente:
    <primera_etiqueta> . . .<segunda_etiqueta>  . . . </segunda_etiqueta> . . . </primera_etiqueta> 


  • Documento HTML explicado

    El documento que habíamos creado en la pasada clase era el siguiente.

    <!DOCTYPE html>
    <html>
    <head>
    </head>
    <body>
    <h1>Funciona!!</h1>
    </body>
    </html>

    Vamos a explicar paso a paso su contenido:
    ♞ <!DOCTYPE html>
       Siempre será nuestra primera linea de código, su significado es el de decirle al navegador el tipo de documento que va a abrir. En este caso un archivo HTML .
    ♞  <html>
        El resto de nuestro documento debe ir dentro de la etiqueta <html>. fijaros que la última linea del documento es </html>. Dentro del documento HTML hay que distinguir dos partes fundamentales, que son la cabecera ( <head> ) y el cuerpo ( <body> ) .
    ♞  <head>
        La cabecera ( HEAD ) de nuestra página incluye información que no forma parte del contenido en sí. La cabecera va encerrada entre <head> y </head> . Por ahora el único elemento que nos va a interesar es la etiqueta <title> . El título de nuestra web aparecerá en la barra de título de la ventana del navegador. Seria así:

    <head>
        <title>Título de nuestra web</title>
    </head>


    ♞  <body>
        Finalmente encontramos el cuerpo ( BODY ) encerrado entre <body> y </body> . Es la parte principal de nuestro documento y es la que el navegador mostrará.


Tras añadir la etiqueta del título nuestro documento quedará así:

<!DOCTYPE html>
<html>
  <head>
    <title>Título de nuestra web</title>
  </head>
  <body>
    <h1>Funciona!!</h1>
  </body>
</html>

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


Este artículo ha sido desarrollado por Miguel Angel.
Podeis seguime en:   Google +

6 comentarios:

  1. Respuestas
    1. Hola Marilis:
      Gracias por tu comentario.La siguiente entrega verá la luz a última hora de hoy.

      Eliminar
  2. Muy interesante el curso, te enlazo en mi blog de facebook si no tienes inconveniente, claro.

    ResponderEliminar
    Respuestas
    1. Hola Antonio:
      Muchas gracias por tu comentario.Por supuesto que no tengo inconveniente.

      Eliminar
  3. 01110100 01101111 01100100 01101111 01110011 00100000 01101101 01101111 01110010 01101001 01101101 01101111 01110011

    ResponderEliminar
  4. COMO VERGAS SE HACE ESTO

    ResponderEliminar