2 marzo 2009 in XHTML/CSS by dacho

Antes de comenzar necesitaras básicamente 2 cosas, un editor de texto como puede ser el bloc de notas (Te recomiendo mejor el notepad++ que especial para programar) en Windows y un navegador de Internet. Te recomiendo Mozilla / Firefox.

Comenzamos Aquí el tutorial de HTML / CSS….

¿Que es una pagina web?¿Como esta hecha?

Una pagina web es una colección de texto y elementos multimedia (Como por ejemplo imágenes y flash) organizados por medio de un lenguaje de etiquetas. Este lenguaje de etiqueta tiene como nombre HTML.

Es hora de introducir un pequeño ejemplo de el código de una pagina Web. La metodología que utilizaremos es que copies el código que esta después de este párrafo en tu editor, lo guardes como practico0.html y lo ejecutes con el explorador de Internet. De esta forma vas viendo de que es lo que estamos hablando. Recomiendo que se tomen el trabajo a menos que estén seguros de que se lo saben.

<html>

 <head>
  <title> ¡Mi Primera Web! </title>
 </head>

 <body>
  <!-- Esto es un Comentario en HTML, el explorador cuando ve estas etiquetas
         especiales ignora el texto que esta aca adentro, de esta forma podemos
         hacer anotaciones para poder acordarnos de encontrar distintas cosas
         y la Pagina no cambia en nada -->
 </body>

</html>

Ahora simplemente haz doble clic sobre practico0.html y observa que ves.

 

Es simple no ves nada solo una pagina en blanco y en la barra de titulo del explorador de internet dice ¡Mi Primera Web!

Esto es lo que estaba buscando, ahora ¿que significan estas cosas que escribimos y que no se ven? Eso es la estructura básica de un documento HTML. Todos los elementos en HTML se escriben como etiquetas (o tags), se abre un tag aquí se coloca lo que corresponda y se cierra el elemento con el mismo tag precedido de una Barra invertida (‘ / ‘). De esta forma:

<html> indica a el navegador que comienza un documento HTML y </html>indica que finaliza este documento.

<head> indica a el navegador que comienza un encabezado de un documento HTML y </head>indica que finaliza este encabezado.

<body> indica a el navegador que comienza el cuerpo de un documento HTML y </body>indica que finaliza este cuerpo.

Ahora voy a explicar brevemente que es el encabezado y que es el cuerpo de un HTML.

Encabezado (<head>)

En el encabezado se definen todas las partes de la pagina que no son visibles por el usuario pero son útiles para otros propósitos, como por ejemplo indicarle a los robots de búsqueda (Google, Yahoo, etc) una descripción del sitio o decirle al navegador Web que idioma estamos hablando para que por ejemplo en el español agregue la “Ñ” que no esta en el alfabeto ingles.

Por el momento la única etiqueta que nos preocupará en el Encabezado es la etiqueta <title> </title> que es muy útil, es el texto que aparecerá en la barra de titulo del navegador web (Arriba de el menú Archivo, editar, ver, etc). Es muy importante porque es muy útil para posicionar tu web en los buscadores y además sirve para distinguir las ventanas si una persona tiene muchas paginas abiertas.

Cuerpo (en ingles <body>)

En esta parte del documento HTML se coloca lo mas importante de todo, de hecho se coloca todo lo que va a visualizar el usuario. Ya sea texto, imágenes, flash, y todo lo que se pueda poner a una Web.

Bueno creo que estamos en condiciones de hacer el clásico “hola mundo” que se acostumbra a hacer cuando se esta aprendiendo un lenguaje de programación en el primer ejemplo. Y luego pasaremos a la siguiente sección donde se pone todo muchísimo mas interesante! Aquí Va!

<html>

 <head>
  <title> Practico 1 </title>
 </head>

 <body>

  <h1>Hola Mundo!</h1>
   <p> Esta es mi primera Web: <strong>Que Grande Yo!</strong></p>

  <!-- No te preocupes si no entendes que es eso de h1, strong ni p
         Eso lo veremos en la proxima leccion, pero te invito a que los
         modifiques a gusto para que vayas viendo como cambia
         todo, asi es como realmente se aprende! -->

  <!--  Las etiquetas "H1" son las etiquetas que se utilizan para el
         encabezado mas importante de la web.
         Lo veremos bien bien mas adelante! -->

   <!-- Las etiquetas "P" son las que sirven para colocar párrafos de textos -->

   <!-- Las etiquetas "strong" se utilizan para resaltar el texto -->

 </body>

</html>

Bueno gente espero que hayan podido seguir la lección sin problemas, ante cualquier duda por favor posteen que contestare con todo gusto… En la siguiente lección Veremos como insertar texto, que es un CSS y como darle formato al texto por medio de un CSS.

Siguiente Lección >>

>> Indice de Contenido <<

Entradas Relacionadas: