InicioCrear pagina web gratis y fácil › Estructura HTML básica de una pagina web

Estructura HTML básica de una pagina web

Todas las páginas web deben seguir una estructura de código HTML para funcionar, si leiste la lección anterior ya sabes como crear etiquetas HTML y también para que sirven.

Para comenzar una pagina web escribiremos las etiquetas:

<html> (siempre empezaremos con esta etiqueta)
</html> (siempre terminaremos con esta etiqueta)

La primera etiqueta <html> indica que comienza la pagina web, y la etiqueta </html> (tiene una barra /) indica que nuestra pagina web termina.

En toda pagina web existen partes que se ven (como por ejemplo texto, imagenes, etc... todo lo que ves ahora), pero también hay partes que no puedes ver como el titulo, la descripcion de la pagina, y muchas cosas que veremos mas adelante.

Para definir las características de la pagina web (las que no se ven) escribiremos todo dentro de la etiqueta <head> esta etiqueta debe ponerse inmediatamente después de la etiqueta <html> de esta forma:

<html>    
   <head>    
   </head>
</html>

Nota: head en ingles significa "cabeza", osea que esta parte de nuestra pagina se llamara "encabezado"

Ahora, para definir las partes que veran tus visitantes (el contenido de tu pagina, textos, imagenes, etc) escribiremos la etiqueta <body> inmediatamente debajo de </head> de esta forma:

<html>    
   <head>    
   </head>
   <body>
   </body>
</html>

Nota: body en ingles significa "cuerpo", osea que esta parte de nuestra pagina se llamara "cuerpo"

Bien, ya conocemos la estructura básica de una página HTML, ahora vamos a trabajar en nuestro archivo index.

 

Trabajando en el Index

Vamos a abrir con Geany (el programa para crear paginas web gratis) el archivo index.html que creamos en nuestra carpeta "Mi Pagina Web", para esto hacemos clic derecho en el archivo index.html y luego "abrir con..." en la lista seleccionar Geany.

Geany vacio

Tenemos un archivo vacio, pero ya sabemos como empezar, vamos a escribir lo que hemos aprendido hasta ahora, pero con un agregado, a ver si te das cuenta:

<html>    
   <head>
      <title>Mi primera pagina web</title>   
   </head>
   <body>
   </body>
</html>

Hemos agregado una etiqueta nueva en la parte que no ven los usuarios, esta etiqueta <title> (en inglés "Titulo") sirve para configurar el título de nuestra pagina web, el titulo se verá en la ventana del navegador, por ejemplo aquí si miras tu ventana en este momento deberías ver "Estructura HTML básica de una pagina web" ¿Cierto?

Pero vamos un poco mas allá:

<html>    
   <head>
      <title>Mi primera pagina web</title>   
   </head>
   <body>
      <p>Esta es mi pagina web</p>
   </body>
</html>

Index en Geany

Ahora agregamos otra etiqueta con un texto dentro de <body>, esto significa que los visitantes podrán ver lo que acabamos de escribir, la etiqueta <p> significa "Párrafo" o sea que hemos creado un parrafo con el texto "Esta es mi pagina web".

Ahora hacemos clic en Guardar y probamos el archivo en el Internet Explorer (doble clic en el archivo index.html o también Clic derecho -> Abrir con... -> Internet Explorer)

Internet Explorer 1

Fijate que el titulo es el que pusimos en la etiqueta <title> y el texto es el que pusimos dentro de <body>