Programar una página de internet (sencilla, claro) sólo con código, es más fácil de lo que podría pensarse. Basta con el Bloc de Notas (o si quieres puedes usar el Edit de MS-DOS!), un poco de imaginación y muchas etiquetas.
Pero lo primero será recordar que lo más básico de la programación de páginas de Internet es HTML (sí, así como te lo dijeron muchas veces: HyperText Markup Language). En este lenguaje de programación se hace uso de Tags (etiquetas), que son instrucciones. A través de ellas defines contenido y aunque ya no es apropiado, también puedes darle formato (ya no es apropiado porque la Web 2.0 está en pro de separar contenido de presentación, para lo que hace uso de hojas de estilo, ya lo veremos más adelante).
Las tags afectan únicamente a lo que se encuentre entre la de apertura y la de cierre. Su estructura es así:
<tag> Texto texto texto texto </tag>
En el tag de cierre, la diagonal es la que indica que se trata de un cierre, un final, un término (de allí mi graciosísimo título para este post: “inicia curso, termina ignorancia!!!“)
Las tags soportan varios atributos. También pueden anidarse, es decir, usarse unas dentro de otras, conservando el órden lógico a la hora de cerrarlas.
Toda página se compone de 2 partes: el encabezado y el cuerpo. En el encabezado (head) se define el título del documento (entre muchas otras cosas); el cuerpo (body) contiene todo lo que será mostrado. So, aquí van las tags básicas:
- <html>…</html>: definen que estamos trabajando con un documento HTML.
- <head>…</head>: indican que estamos en el encabezado de la página.
- <title>…</title>: entre estas etiquetas se escribe el título del documento (lo que aparece en la barra de título del navegador).
- <body>…</body>: indican que estamos en el cuerpo de la página.
- <p>…</p>:definen un párrafo.
- <h1>…</h1>: señalan un título de primer nivel. Existen 6 niveles, por ello h1, h2, h3… h6.
- <br> (no hay cierre para este tag): Salto de línea. Es el equivalente a un ‘enter’. El tag existe porque si en el código hay 6 ‘enters’, los navegadores únicamente reconocerán 1, en el mejor de los casos.
Pero para dejar de lado la teoría y poner manos a la obra, hemos de hacer, por vez primera, una página (sencillísima a más no poder) sólo con código.
- Abrimos el Bloc de notas.
- Definimos que se trata de un documento HTML, para ello, abriremos el tag correspondiente: <html>. Por cuestiones de practicidad, es recomendable siempre escribir el cierre, en este caso: </html>, recordando que hemos de trabajar en el espacio que hay entre ambas etiquetas.
- Declarar que trabajaremos con el encabezado, abriendo el tag <head> y su correspondiente cierre </head>.
- En el encabezado se define el título del documento, es decir, lo que dirá el navegador en la barra de título. Recordemos que estamos trabajando en el head. Abrimos el tag para indicar el título <title> y acto seguido escribimos el título. Hagamos lo que todo el mundo: que el título sea Mi primera página. Ah, qué bonito. Bien, a cerrar el tag correspondiente: </title>. Hemos acabado con el encabezado.
- Todavía nos falta el cuerpo de la página. Si toda página se compone de encabezado y cuerpo, lo lógico es que el nivel de estas tags (head y body) sea el mismo. Por ello abriremos <body> inmediatamente después de </head> y el cierre estará antes de </html>.
- Estando en <body> ya estamos trabajando lo que se mostrará en el navegador. Lo lógico es empezar con un título. Escribamos entonces <h1>, el título que mejor nos parezaca e indiquemos que hemos terminado con el título: </h1>.
- Ya que tenemos un título, nos hace falta un texto. Declaremos que iniciamos un párrafo (<p>), escribamos algo y en seguida terminemos el párrafo (</p>).
- Debemos ir así:
El resultado final será el mismo, pero es mucho más fácil trabajar con niveles (como en la primera imagen) a hacerlo ‘de corrido’ (como en la segunda). - Ahora sí, a ‘crear’ el archivo. En el Bloc de notas: Archivo » Guardar como. Allí escribiremos el nombre del archivo que, para que sea una página HTML deberemos asignarle dicha extensión. E.g.: primera.htm y para que se guarde así, en la opción Tipo, seleccionaremos Todos los archivos.
- ¡Listo! Hemos creado una página HTML con puro código. La prueba de fuego es obvia: abrir el archivo desde la carpeta correspondiente.
So, yo os advertí que sería sencillísima. Poco a poco iremos trabajando hasta lograr cosas decentes, jaja.
Sin más por ahora, hasta la próxima!
