El proyecto Triple W lo desarrolló un físico. Era de uso libre y tenía el código abierto. La idea era crear protocolos de conexión. Protocolos para que diferentes máquinas pudieran conectarse y hablar entre sí.
En ese momento no existía wifi como ahora. Lo que había era red por cable, líneas telefónicas. Eso era lo que más se usaba. Así se empezó a poder conectar una máquina con otra, incluso si usaban sistemas operativos distintos.
HTTP significa Hyper Text Transport Protocol. Básicamente permite que una máquina se conecte con otra y le mande datos. Ese protocolo todavía se sigue usando.
Todos los sistemas operativos traen algún programa para escribir texto plano, como el bloc de notas. Eso permitió empezar a escribir código sin herramientas especiales.
Así nació HTML, que es un lenguaje de marcado de hipertexto. Es libre, se puede leer fácil, se puede escribir sin programas raros, y cualquiera que pueda leer puede entender más o menos lo que dice.
HTML se basa en etiquetas. Casi todas tienen una apertura y una de cierre (la de cierre lleva una barra). Estas etiquetas le dicen al navegador qué hacer con el contenido: si mostrarlo en negrita, si ponerle un enlace, si es una imagen, etc.
Al principio HTML no tenía más de 100 etiquetas. Estaba pensado para mostrar texto y algunas imágenes con un formato básico, que se pueda imprimir y recorrer.
Antes ya existía algo como RTF (Rich Text Format), que era texto plano pero con estilo: fuente, color, tamaño, negrita, subrayado, etc. HTML agregó etiquetas para eso mismo, pero con su propia forma.
Las etiquetas pueden tener atributos (por ejemplo, tamaño de fuente) y cada atributo tiene su valor (como el número 16 para tamaño 16).
El esquema es así: etiqueta de apertura, atributo, contenido, etiqueta de cierre.
Vamos a armar un archivo desde cero. Lo hacemos con un editor que tenga ayudas visuales, tipo Visual Studio Code. Ahí vamos escribiendo HTML y el programa ya nos ayuda con sugerencias.
Para la cursada, cada grupo tiene que tener su carpeta. Cada carpeta tiene un número (ese número es importante).
Dentro de cada carpeta hay subcarpetas: una llamada css, otra img, otra tp, y puede haber archivos como avatar.jpg.
La estructura se repite igual en todos los equipos. Hay una raíz del equipo, y de ahí cuelga cada carpeta de integrante con su número.
Vamos a enfocarnos en el archivo index.html.
Ese nombre es importante porque los navegadores lo buscan como el punto de entrada del sitio.
Lo creamos desde el explorador de archivos, parado en la carpeta correcta. Le ponemos index.html y ya se activa el modo HTML en el editor.
Dentro del archivo ponemos la etiqueta <head>, donde va el <title> (el título del sitio) y las meta.
Una meta importante es UTF-8, que sirve para que los acentos y ñ se vean bien.
También va la viewport para que se vea bien en celulares.
Todo lo que esté entre <body> y </body> es lo que aparece en la web.
Ahí vamos poniendo los contenidos: textos, títulos, imágenes, enlaces, etc.
Los títulos van con h1, h2, h3… el h1 es el más grande.
Vamos a usar FileZilla para subir los archivos. Es un cliente FTP. Lo que hace es conectar nuestra compu con el servidor de la cátedra.
Para conectarnos necesitamos tres cosas: servidor, usuario y clave. También está la opción de guardar estos datos en el Gestor de Sitios para no ponerlos cada vez.
En el Gestor también podemos decir qué carpeta usar en nuestra máquina y en el servidor para que todo esté sincronizado. Entonces subir un archivo es tan simple como clic derecho y “subir”.
Para ver si algo se subió, usamos la URL del archivo.
Si no tenemos permisos puede tirar error 403.
Pero si escribimos el nombre exacto del archivo (como avatar.jpg), se puede ver igual aunque la carpeta esté oculta.
Para cada clase vamos a hacer una nueva página. Por ejemplo: clase2.html.
Se recomienda poner lang="es" para que reconozca que está en español.
En esa página usamos h1 para el título y texto debajo.
Si escribimos muchos espacios, el navegador lo muestra como uno solo, salvo que indiquemos otra cosa.
Para pasar de una página a otra usamos la etiqueta <a> (anchor).
Esa etiqueta tiene que tener un href con el nombre del archivo al que queremos ir.
Se puede usar texto o un botón. Incluso meter el <a> dentro de un <h2> o agregar <br> para salto de línea.
Ejemplo: desde index.html poner un link a clase2.html y viceversa.
También podemos poner enlaces a otras páginas como los videos de la cátedra en YouTube. Si el archivo está en nuestro dominio, es un vínculo relativo. Si está afuera (tipo un video en otro sitio), es un vínculo absoluto.
Se puede asociar a un texto o dejarlo indexado tipo lista.