HTML (I)

Lo primero que debemos de saber a la hora de hacer HMTL, es que es Texto Plano, esto es, no es necesario ningún tipo de programa para poder escribirlo, si bien, hay diferentes programas que nos facilitan esta labor.

Por tanto os aconsejo que utilicéis el “Bloc de notas” o en su defecto el WordPad, para hacer HTML. Hay también programas que os ayudan en la creación de HTML, ya que colorean las diferentes etiquetas y códigos del HTML, como es el Gedit.

El HTML es un lenguaje que basa su sintaxis en un elemento de base al que llamamos etiqueta. La etiqueta presenta frecuentemente dos partes:

  • Una apertura de forma general <etiqueta>
  • Un cierre de tipo </etiqueta>

  • Todo lo incluido en el interior de esa etiqueta sufrirá las modificaciones que caracterizan a esta etiqueta. Así por ejemplo:

    Las etiquetas <b> y </b> definen un texto en negrita. Si en nuestro documento HTML escribimos una frase con el siguiente código:

    <b>Esto esta en negrita</b>

    El resultado Sera:

    Esto está en negrita

    Partes de un Documento HTML

    Además de todo esto, un documento HTML ha de estar delimitado por la etiqueta <html> y
    </html>. Dentro de este documento, podemos distinguir dos partes esenciales:

  • El encabezado, delimitado por <head> y </head> donde colocaremos etiquetas
    Informativas como por ejemplo, el titulo de nuestra página.
  • El cuerpo, agrupado por las etiquetas <body> y </body>, que será donde colocaremos
    Nuestro texto e imágenes delimitados a su vez por otras etiquetas como las que hemos visto.
  • El resultado es un documento con esta estructura

    <html>

    <head>

    </head>

    <body>

    <b>Este texto está en negrita</b>
    </body>

    </html>

    En los documentos HTML, las minúsculas y mayúsculas son indiferentes, esto es, da lo mismo escribir <html>, <HTML> o <HtMl>, pero algunas tecnologías (EJ; XML) no son compatibles con este tipo de caligrafía y exigen las minúsculas, por tanto os recomiendo que utilicéis las minúsculas, ya que además de acostúmbranos bien por si nos da por aprender otras cosas, es mucho más bonito a la vista.

    Con estos mínimos conocimientos podemos ya crear nuestra primera pagina, si copias y pegas esto en un documentos de “Blog de notas” o “Gedit”:

    <html>

    <head>

    <title>El rincon de Sakrow (titulo de la pagina)</title>
    </head>

    <body>

    <p><b>Lugar de conversación sobre, informática, libros…</b></p>
    <p>Ahora estamos aprendiendo lo que es la negrita y el párrafo, esta línea es otro párrafo…</p>
    </body>

    </html>

    Ahora podemos guardar el documento con extensión “.html” o “.htm” de manera que podemos luego abrirlo con el navegador. Mejor que utilicéis nombres para las paginas sin espacios, tildes ni mayúsculas, ya que dan fallos y muchas veces es mas lioso. No es que tengas que hacer nombres cortos para las paginas, puedes hacerlas tan descriptivas como quieras. Puedes ayudarte de símbolos como “-” o “_”, para hacer separaciones, por ejemplo: el-rincon-de-sakrow.html

    Una vez creado y guardado el documento podemos abrirlo con el navegador que tengamos, hacemos click derecho encima del documento, le damos a “Abrir con…” y elegimos el navegador que queramos.

    Posible problema: Al utilizar el Block de Notas en Windows en ocasiones, aunque pongamos extensión .html, el documento se guarda como si fuera un texto(.txt)y no una página web(.html). Lo que está pasando es
    que el Block de Notas tiene predeterminado guardar sus archivos con extensión .txt y en realidad lo que
    está guardando en el disco duro es el-rincon-de-sakrow.html.txt
    Para conseguir tener el control de las extensiones en el block de notas y en Windows en general podemos
    acceder a MI-PC y en el menú de Ver seleccionáis “Opciones de carpeta”. En la ventana que sale pulsamos
    en la solapa “Ver” y nos permite deseleccionar una caja de selección que pone “Ocultar
    extensiones para los tipos de archivos conocidos”.
    De esta manera conseguiremos que se vea siempre la extensión del archivo con el que estamos trabajando y que el
    Block de Notas nos haga caso cuando le indicamos que grabe el archivo con otra extensión que no sea .txt

    Con el programa Gedit, este problema no ocurre, ya que por predeterminado no escribe ninguna extensión, por tanto si no le ponemos ahora extensión(al guardar) nos la pedirá al intentar abrirlo y lo hará de manera automática. Ej; si abrimos el documento con Firefox u otro navegador, pondrá la extensión “.html” al documento.

    Si habéis puesto la el código en el Block o en el Gedit y habéis guardado bien, al abrir el archivo, os tiene que salir esto:
    web.png

    So os fijáis en la parte izquierda arriba, podéis observar que el texto introducido entre y , se encuentra hay, ya más abajo en lo que se supone que es la web, se encuentra todo lo que está metido dentro de .

    Si ahora hacéis click con el botón derecho sobre la página le dais a “Ver código fuente” veréis como en una nueva ventana aparece el código de nuestra página. Este recurso es
    de extremada importancia ya que nos permite ver el tipo de técnicas empleadas por otros para la
    crear sus páginas.
    Con todo esto asimilado ya estamos en condiciones poder empezar a investigas otras etiquetas de HTML.

    2 comentarios

    1. Respuesta a tu comentario en mi blog.

      Estoy bastante deacuerdo contigo, yo pienso que el decorado del SO es lo último, y si desde luego desde Windows Xp a Vista la única diferencia es el entorno gráfico, por mi que ahí se lo queden.

      PD: Gracias por comentar y muy bueno el artículo 😉 ayudas así de vez en cuando hacen falta.

      Un Saludo.

      • ElfaOscura en 17/05/2009 a las 4:31 AM

      Te estoy siguiendo el tuto, 😀
      Salu2 lokillo

    Deja un comentario

    Tu email nunca se publicará.

    Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

    Uso de cookies

    Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.plugin cookies

    ACEPTAR
    Aviso de cookies