Código básico de una página escrita con el lenguaje HTML.
Antes de comenzar a escribir el código para realizar nuestra primer página web, vamos a explicar cómo utilizar el ya nombrado Block de Notas (Notepad). Dijimos que éste es un programa que viene instalado con Windows y para iniciarlo debemos hacer lo siguiente:
Inicio --> Programas --> Accesorios --> Block de notas
Si no lo encontramos podemos ejecutarlo desde la ubicación original que se encuentra en
c:\windows\notepad.exe
para esto hacemos lo siguiente:
Inicio --> Ejecutar --> y escribimos: c:\windows\notepad.exe
Una vez iniciado el Block de notas, daremos comienzo a la escritura del código necesario para realizar nuestra primer página web.
|| Ejemplo de código básico HTML para crear una página web.
En el código vemos varias etiquetas nuevas:
| La etiqueta <TITLE> y </TITLE>
Con esta etiqueta damos un título a la página (no hay que confundir con el nombre del archivo que es otra cosa).
Este título se verá en la zona superior de nuestro navegador (en la barra de título) y nos dará la información sobre el tema que trata nuestra página.
En la sección JavaScript puedes encontrar una categoría con varios ejemplos para editar la Barra de Estado y Título del navegador. Los mismos te permitirán aplicar efectos al texto mostrado en ambas barras.
También es el nombre que almacenarán los motores de búsqueda para mostrar nuestra página en sus resultados.
Es preferible un título del tipo «Bienvenido a mi sitio sobre diseño web» a «bienvenido a mi sitio» que no contiene ninguna indicación específica sobre el real contenido de la página. También es un punto muy importante para lograr un buen posicionamiento web.
| La etiqueta <BR>
Esta etiqueta provoca en nuestro documento un salto de línea. Cuando un navegador ejecuta (lee el código HTML) trata el texto de diferente manera a como lo escribimos. Cada vez que queramos insertar un salto de línea en nuestro documento lo debemos hacer con esta etiqueta, de otra manera todos nuestros párrafos serán seguidos sin saltos de línea o de párrafos como suele decirse. Esta etiqueta NO tiene su correspondiente de cierre, es decir no es necesario colocarla.
| La etiqueta <P>
La etiqueta <P> provoca el salto de párrafo siguiente; al igual que <BR>, esta etiqueta no tiene su correspondiente de cierre, aunque es válido también terminar el párrafo con </P>, pero no es obligatorio. Esta provoca un salto de línea siguiente con un espacio más o menos de una línea, dicho de otra manera provoca un salto de dos líneas.
Podemos verlo en el ejemplo gráfico:
Ahora que ya sabemos para qué sirven estas nuevas etiquetas, vamos a crear el archivo HTML con el código que escribimos anteriormente.
Para esto abrimos el Block de notas y escribimos todo el código del ejemplo.
Para ahorrar tiempo podemos copiar y pegar el código, pero te aconsejo que lo escribas "a mano" así te vas acostumbrando a las etiquetas y a la estructura del lenguaje HTML.
Una vez copiado todo el código vamos a guardarlo en la computadora en la ubicación que más nos guste. Al guardarlo debemos tener en cuenta que el Block de notas nos pedirá que asignemos un nombre al archivo que queremos guardar. El nombre puede ser cualquiera, el que más nos guste, pero por una cuestión de Posicionamiento Web se recomienda que el nombre del archivo se refiera al contenido del archivo mismo, o sea el contenido de nuestra página web. Por ejemplo si nuestra página trata sobre Posicionamiento en buscadores el nombre del archivo podría ser posicionamiento-buscadores.html
Habrás notado que el nombre del archivo contiene una extensión .html, esta es la extensión que deben llevar los archivos HTML para que puedan leerlos correctamente los navegadores. Es válido asignar la extensión .htm pero te aconsejo que utilices la .html y es muy importante que siempre utilices la misma en todas las páginas del sitio.
El hecho de usar la extensión .html no es por capricho mío sino que hay muchos servidores web (las computadoras que almacenan las páginas disponibles en la red Internet) que NO ACEPTAN archivos bajo la extensión .htm, es mejor utilizar la otra y no tener problemas nunca.
También habrás notado que el nombre del archivo HTML está en minúsculas y que no contiene espacios, pero que contiene el símbolo - (guión medio) lo cual es válido para separar palabras en los archivos HTML.
También es bueno que te acostumbres a organizar la información de tu sitio web. Piensa que más adelante, cuando tu proyecto esté avanzado todo tu sitio puede tener cientos y hasta miles de archivos, no solo .html sino también archivos de imágenes, sonido, video y otros que ya veremos más adelante. Al guardar nuestro archivo .html es bueno hacerlo en una carpeta con el nombre de nuestro sitio y dentro de esta carpeta crear otra que "albergue" (guarde) solo los archivos .html, cuando tengamos archivos de imágenes (jpg, gif, png, etc.) crearemos otra carpeta llamada imagenes donde guardaremos todos nuestros archivos gráficos.
Otra regla a tener en cuenta sobre el nombre de archivos y carpetas de nuestro sitio es que NO deben
contener acentos ni ñ.Vamos a abrir el archivo HTML creado anteriormente. Para esto abrimos el explorador que utilizamos frecuentemente y seleccionamos Archivo --> Abrir..., buscamos el archivo en nuestra PC y damos en Aceptar. O simplemente haz doble click sobre el archivo y se abrirá con el navegador predeterminado.
Vemos el ejemplo pulsando en miprimerapagina.html
Información relativa al artículo.
