Aprendiendo HTML parte 3: Creando nuestra primera página web (Configuración).

Lejos de lo que se pueda creer, es muy sencillo crear un página web utilizando solo HTML, al fin y al cabo, es el lenguaje del que se compone toda la World Wide Web. Ciertamente, existen muchos lenguajes orientados a la programación web, tales como PHP, javascript y .NET, por mencionar algunos. Sin embargo, estos lenguajes, al momento de presentarse al usuario, son convertidos a HTML.

En este post veremos la configuración básica de una página web, todavía sin meternos en el contenido como tal. Así que no te desesperes si no ves grandes cosas; créeme esto te evitará muchos dolores de cabeza en el futuro.

Configurando nuestra página web.

Estructura de los directorios (carpetas).

Antes de iniciar con la escritura del código, es importante conocer cómo se estructuran los directorios o carpetas de un sitio web.

Nombres de archivos y carpetas.

Es muy recomendable que los nombres de archivos y carpetas estén escritos enteramente en minúsculas, sin espacios en blanco ni acentuación, esto para evitar cualquier falla en el funcionamiento de nuestra página web.

Una de las muchas formas incorrectas de nombrar un archivo o una carpeta web es la siguiente:

Página web en español.html

Los errores son los siguientes:

  1. El nombre contiene letras mayúsculas.
  2. Hay letras con acento.
  3. Hay espacios en blanco.
  4. Hay caracteres especiales (ñ).
  5. El nombre es demasiado largo.

Te preguntarás ¿qué tiene de malo? Aquí la respuesta: La inmensa mayoría de servidores en el mundo no reconocerán los espacios, los acentos ni los caracteres especiales, por lo que nuestra página web no se desplegará (será ignorada); las letras en mayúscula, aunque en teoría no darían problemas, hay casos en los que sí es posible que afecten a la navegación.

Una forma recomendable, a la vez que la más común para nombrar un archivo o carpeta web es la siguiente:

pagina.html

En la cual podemos ver que:

  1. Ya no contiene letras mayúsculas.
  2. No hay letras con acento.
  3. No hay espacios en blanco.
  4. No hay caracteres especiales.
  5. El nombre es corto.

Jerarquía de directorios (carpetas).

Toda página web debe estar dentro de un directorio raíz, desde el cual, se organizarán el resto de archivos HTML y directorios. Veamos un ejemplo:

Jerarquía web.
Jerarquía de directorios y archivos web.

Ahora bien, dicho directorio raíz, dentro de un servidor se puede llamar de diversas maneras dependiendo del gestor que se esté utilzando, por ejemplo, en algunos puede ser el directorio htdocs, en otros el directorio www, en otros public_html o bien, httpdocs; hay muchas implementaciones de este directorio según el criterio usado por los administradores del servidores donde hayamos alojado nuestra web.

Jerarquía de archivos.

Siempre que creemos una página web, es muy recomendable disponer de una página principal desde la cual es posible navegar hacia las demás. Generalmente, este archivo es nombrado index.html, sin embargo, también es común nombrarlo home.html, eso depende del servidor en el que hayamos alojado nuestra web.

La función de index.html es la de página de inicio, por lo que todo servidor de internet lo buscará por defecto, y en caso de encontrarlo lo desplegará.

Y es justamente con este archivo (index.html) con el cual comenzaremos a trabajar.

Así que, manos a la obra.

Definir la estructura general de la página.

Como ya se mencionó en el post anterior, la sintaxis de HTML consiste en etiquetas, dichas etiquetas se componen de dos partes, una de apertura <etiqueta> y otra de cierre </etiqueta>. Pues bien, para definir la estructura general de nuestra primera página comenzaremos agregando el doctype al archivo HTML, para eso, abrimos cualquier programa que admita edición de texto plano (ya mencioné algunos en el primer post de esta serie de tutoriales).

En la primera línea de nuestro documento escribimos lo siguiente:

<!DOCTYPE HTML>

El Doctype o “Declaración del tipo de documento” es una instrucción especial que va al inicio de nuestro documento HTML y que permite al navegador entender qué versión de HTML estamos utilizando. Esta información determinará la manera en la que el navegador procesará el documento, un DOCTYPE distinto podría implicar hasta una visualización diferente del sitio web dentro del mismo navegador.

Extraído de: DevCode

El siguiente paso es agregar las etiquetas correspondientes a la estructura general del archivo HTML, por lo tanto, a partir de la segunda línea de nuestro archivo escribimos:

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

Lo siguiente que se debe hacer al momento de crear cualquier sitio web, es agregar los metadatos del archivo HTML, los cuales van dentro de la etiqueta <head></head>, que es la cabecera del archivo HTML.

Pero… ¿qué es la cabecera?

La cabecera es la sección en la cual se encuentran todos los metadatos del archivo HTML (codificación de caracteres, estilos, título de la página, etc) con el cual se está trabajando. Puede tener más o menos características, eso queda a consideración del autor o bien, de las necesidades de la página.

Es importante que la cabecera siempre esté presente en todos los archivos HTML, o se corre el riesgo de que el contenido que se mostrará en pantalla no se despliegue correctamente.

Por lo regular, lo más común en una cabecera HTML es lo siguiente:

<head>
    <title>Nombre de la página</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link type="image/x-png" rel="shortcut icon" href="icon.png" />
    <link href="style.css" rel="stylesheet" type="text/css">
</head>

Ahora paso a explicar cada línea:

<head></head>: Es la etiqueta donde van contenido lo metadatos del archivo HTML.

<title></title>: Es el texto que aparecerá en la barra de título y las pestañas en el navegador web. O sea, es el título de la página.

<meta http-equiv="content-type" content="text/html; charset=UTF-8">: Esta línea es sumamente importante, ya que define el tipo de contenido de la página web (http-equiv=”content-type”), el tipo de archivo de texto que es (content=”text/html”) y la codificación de caracteres que se desea utilizar para que el texto se muestre correctamente (charset=UTF-8).

<link type="image/x-png" rel="shortcut icon" href="icon.png" />: Esta línea define el pequeño icono que se muestra en la pestaña del navegador, que puede ser de tipo jpg, png, gif, ico.

<link href="style.css" rel="stylesheet" type="text/css">: Enlaza con una hoja de estilos CSS que será la encargada de darle una mejor apariencia a la página.

Una vez completado lo anterior, el código debe mostrarse como sigue:

<!DOCTYPE HTML>
<html>
    <head>
        <title>Nombre de la página</title>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <link type="image/x-png" rel="shortcut icon" href="icon.png" />
        <link href="style.css" rel="stylesheet" type="text/css">
    </head>
    <body>
    </body>
</html>

Un punto muy importante, y que los novatos casi siempre omiten, es la indentación del código. La indentación, o sea, el darle espacios vacíos o tabulaciones al principio de cada línea para acomodar el texto es muy útil, pues ayuda a separar las diferentes partes del código, especialmente el código que va dentro de otro código, como el que se encuentra dentro de <html> </html> y <head> </head>, y de lo cual, te habrás podido dar cuenta al ver los ejemplos.

Por hoy nos detendremos hasta aquí, en el próximo post abordaremos el contenido de la página dentro de la etiqueta <body> </body>.

Hasta la próxima.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s