Tutorial Mi primer página Web
A través del presente tutorial te iré explicando paso a paso como crear una página Web usando el ya famoso pseudolenguaje "HTML", por desgracia el programa de estudios actual nos exige seguir con esta versión, es decir la versión 4, la cual ya tiene 19 años que fue publicada u originada, es mayor de edad que ustedes mis queridos pupilos y por lo tanto nos exige respeto.
Como dato, la versión actual de HTML es la versión 5, la cual ya es todo un monstruo comparado al pequeño bicho que vamos a tratar. Ni hablar tenemos que apechugar e iniciamos sin más preámbulo.
Uso del sitio "https://neocities.org/".
Vamos a emplear un sitio Web gratuito donde almacenar nuestras páginas web, este sitio Web que se llama "neocities.org" permite sin cobro alguno, crear páginas con ciertas limitantes, es decir sólo imágenes podemos subir al servidor de neocities.org, pero no importa, lo importante es que van a aprender a manejar un servidor Web extranjero para publicar páginas Web y nuestros ciber-amigos extranjeros podrán observarlas cómodamente desde sus hogares.
Paso 1. Registro en el sitio Web: https://neocities.org. Para tener acceso a este sitio Web debemos de registrarnos, entonces en la barra de direcciones de tu navegador favorito teclea la dirección del sitio Web de noecities.org, tal como se muestra enseguida:
Debiendo de aparecer la página principal de noecities.org, la cual contiene el formulario para registrarse, tal como se aprecia enseguida:
Los campos a rellenar son: User Name (nombre de usuario), Tags (objetivo del sitio Web a crear), Password (contraseña), Email (correo electrónico) y el pequeño cuadro de "No soy robot".
Antes de empezar a teclear la información que nos solicitan, por favor acércate un cuaderno y lápiz en mano, para que vayas anotando todo lo que vas a teclear y no haya falla de que ya se les olvido lo que teclearon, ¿ok?.
La siguiente imagen nos muestra un ejemplo de como rellenar el formulario de registro:
En el campo "User Name", se tecleo "elbragaov6", en el campo "Tags", se tecleo "educational" (recuerda, se trata de un sitio Web gabacho y por lo tanto lo tecleamos en inglés), en el campo "Password", teclea como contraseña una palabra de cuando menos de 5 caracteres, que contenga mayúsculas, minúsculas y números, en el campo "Email" teclea un correo electrónico válido (de tu propiedad) y finalmente haz clic sobre el pequeño cuadro blanco que esta a un lado del mensaje "No soy robot", y te hará alguna pregunta para asegurar que eres un humano y no una máquina (me resulta un poco extraño, pero en fin es un requisito), cuando hayas contestado correctamente deberá de aparecer encima de este pequeño cuadro una "paloma verde" de aceptación, y finalmente oprime el botón "Create My Site" (crear mi sitio), y listo, termino el registro.
Después del registro deberá de aparecer el sitio Web que se te ha asignado, deberás de observar algo muy parecido a lo siguiente:
La pantalla nos muestra el sitio Web donde diseñarás y publicarás tus páginas Web, el encabezado de ésta, nos muestra a la izquierda la página Web actual y a la derecha el dueño de tal sitio Web (elbragaov6.neocities.org).
Abajo, nos muestra el área "Home" y sus archivos que contiene (index.html, neocities.png, not_found.html y style.css), así como tres botones: "New File" (nuevo archivo), "New Folder" (nueva carpeta) y "Upload" (subir archivos al servidor).
El archivo "index.html" es el archivo principal, ya que éste es el que se ejecuta en automático cuando se teclea la url del sitio Web, por ejemplo en este caso si tecleamos elbragao69.neocities.org en la caja de direcciones de cualquier navegador, se obtendrá la siguiente página Web:
Paso 2. Crear la primera página Web. Para ello debemos de editar el archivo "index.html", y borramos todo su contenido debiendo quedar así:
Como estarás observando, en el tema (Theme) se eligió "Dawn", y se tienen 3 botones: "Save" para salvar o guardar la página Web que se esta diseñando, "View" para echarle un vistazo a la página que estamos diseñando, es decir poder observar como el navegador la interpreta y "Share" que significa compartir la página Web recién diseñada con la comunidad de "neocities.org".
Teclea el siguiente código:
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>Mi primera página</title></head>
<body>
<center>
<font face="Century Gothic" color=#660000>
<h1>Bienvenidos</h1>
<p align=justify>Te agradezco que hayas accedido a mi página Web, te prometo que seguramente encontrarás todo lo necesario para tu desarrollo académico, en caso de que la información sea breve, no hay problema te proveeré de ligas que te permitirán visitar otros sitios Web que te proporcionarán mayor información.</p></center>
<h2>Formato de texto</h2>
<p align=justify>Cuando hablamos del formato de un texto nos estamos refiriendo a las cuestiones que tienen que ver con el aspecto del texto, su presentación. Por ejemplo: Poner una palabra en cursiva, alinear un párrafo a la izquierda o colocar un borde sombreado a una tabla son operaciones típicas de formato que solo afectan a cómo vemos el texto, pero no al propio contenido del texto. Aunque lo fundamental cuando escribimos un texto es lo que se dice en él la forma en la que lo vemos tiene mucha importancia. Por ello HTML nos ofrece un conjunto de etiquetas que le piden al navegador que interprete correctamente lo que deseamos con respecto a la presentación del texto.<p><br>Enseguida te mostraré algunas de estas etiquetas para el formateo de texto:</p>
</body>
</html>
Ya que lo hayas capturado, haz clic al botón "Save" y enseguida oprime el botón "View", y deberás de obtener lo siguiente:
Esta página Web que estas observando, es la página Web que estamos diseñando pero ya interpretada por el navegador. Todas las páginas Web poseen ciertas etiquetas comunes, siendo: <html>...</html> que indican el inicio y fin de una página Web, <head>...</head> corresponde al encabezado de la página Web, <meta ...> etiqueta que nos permite identificar caracteres latinos, con la finalidad de manipular vocales acentuadas, <title>...</title> lugar donde especificamos el título o nombre de la página Web que se esta diseñando, <body>...</body> delimita todas las etiquetas que permitirán darle cierta presentación u organización a los contenidos de la página Web (texto, imágenes, vídeo, música, animaciones flash, etc.).
Este par de etiquetas <center>...</center> permite centrar el texto u objetos definidos dentro de este par.
Este par de etiquetas <font face="estilo de letra" color="valor hexadecimal">...</font> nos permiten definir el tipo y color de texto. En nuestro caso, el tipo de texto es "Century Gothic" y el color #660000 corresponde al guinda, en la siguiente dirección podrás consultar los diferentes colores existentes:
Este par de etiquetas <h1>...</h1> definen el texto más grande y <h2>...</h2> menos grande, y así sucesivamente. Para nuestro caso emplee h1 para el título principal y h2 para subtítulos subsecuentes.
Este par de etiquetas <p align="tipo de alineación">...</p> nos permite definir párrafos, en nuestro caso el tipo de alineación es "justify" que justifica tanto a la izquierda como a la derecha del párrafo.
y finalmente, el par de etiquetas: <p><br> inserta un renglón en blanco.
Ahora, agregaremos una tabla que contendrá algunas etiquetas para el formateo de texto, así que añadimos el siguiente código (antes del etiqueta </body>):
