Școala Web

Web development în 1991: Începuturile HTML

Web development în 1991: Începuturile HTML

Ne imaginăm ce ar fi trebuit să facă și să știe un web-developer imediat după lansarea Web-ului.

Mulți dintre noi asociază site-urile web cu „Internetul”. E greu să ne imaginăm ce alte lucruri care fac parte din El, în afară de site-urile precum Google, Facebook, și multe altele.

Aceste site-uri, pe care le accesăm din Chrome, Firefox, Safari, sau alt browser, formează de fapt o parte din Internet numită Pânza Globală (World Wide Web în Engleză).

Ceea ce vezi la un moment dat în browser se numește pagină sau document și conceptual seamănă cu un document din Microsoft Word. Și chiar aceasta a fost ideea unui nene pe nume Tim Berners-Lee, care a conceput un sistem de documente care sunt legate între ele.

Legătura dintre documente se făcea printr-o porțiune de text ce putea fi apăsată. Apeși pe text și ești „teleportat” la documentul următor. Textul pe care apeși se numește ancoră, iar textul care conține ancore se numește hiper-text și stă la baza tuturor site-urilor pe care le accesăm din browser. Chiar și jocurile sau aplicații precum YouTube au undeva Hipertext.

Notă: În limbaj colocvial, o ancoră se mai numește și link.

Tim Berners-Lee a conceput un limbaj de codare care marchează diferitele tipuri de elemente ce se găsesc într-un document: antete (Engleză: Heading), paragrafe, liste, și ancore. Acest limbaj poate fi scris într-un fișier cu extensia .html, folosind un editor rudimentar, iar un browser va ști să îl interpreteze afișând corect fiecare element. Numele acestui limbaj este „Hyper-Text-Markup-Language” (Limbaj de Marcare pentru Hiper-Text), sau HTML


Elementele de bază ale HTML

Pentru a delimita elementele HTML, au fost concepute câteva etichete de cod. O etichetă începe cu semnul <, urmată de numele etichetei și semnul >. De exemplu <p> este eticheta pentru paragraf.

Ancore/Link-uri

Un caz aparte îl reprezintă ancorele, reprezentate de eticheta <a>.
Avem nevoie ca ancora să apară în mijlocul textului și să ducă spre un document fără a include adresa în interiorul textului.

Pentru a defini documentul care va fi deschis de ancoră, se adaugă înainte de > cuvântul cheie href, urmat de =. Acest concept se numește atribut. În specificația inițială a HTML, ancorele aveau două proprietăți posibile. Pe lângă href, mai există și name, care permite unei ancore să devină destinația unui link. Adică apăsând pe o ancoră, poți fi dus în mijlocul unui alt document.
Wikipedia folosește din plin acest concept: Aproape fiecare pagină are un cuprins compus din ancore care te duc undeva în altă zonă a paginii. Modul în care se realizează asta acum e puțin diferit, însă, dar asta e o discuție pentru altă dată.

Partea din dreapta semnului = se numește valoare.

Pentru a arăta unde se termină textul ancorei, se folosește eticheta </a>. Aproape toate elementele HTML au o etichetă de final care are același nume, precedat de slash, și nu are atribute.

În general, browserele pot să interpreteze corect elementele dintr-un document HTML, chiar și fără etichetă de final, dar totuși este recomandat să se pună mereu.

Așadar, o ancoră arată așa:

Text normal 
<a href=destinație>Text în ancoră</a> 
Afară

Alte elemente din HTML 1.0

În continuare, am să încerc să spun câteva cuvinte despre elementele HTML din specificația inițială. Am să mă limitez la cele care încă mai sunt utilizate și nu au fost declarate „învechite”.

Titlu (<title>)

Încă de la început, documentele HTML au fost concepute pentru a fi vizualizate într-o interfață grafică, adică într-o fereastră.
Cu ajutorul <title>, se poate defini un titlu pentru acea fereastră.

Titlul mai poate fi folosit și în alte contexte. De exemplu, Google de obicei arată titlul în rezultatele căutării.

Paragrafe (<p>)

Cel mai simplu element HTML reprezintă un paragraf de text. Browserele de obicei separă vizual paragrafele de alte elemente, inclusiv alte paragrafe.

Titluri de Capitole (Engleză: headings)

HTML a fost gândit inițial ca un limbaj pentru a formata documente. Aproape ca o versiune mai simplă a documentelor Word. Aceste documente de multe ori au capitole și sub-capitole.

În versiunea inițială a HTML, asemenea capitole pot fi precedate de un titlu definit cu tag-ul <h1>, iar sub-capitolele cu <h2>, sub-sub-capitolele cu <h3> și tot așă până la <h6>.

<h1>Acesta e cel mai mare text</h1>
<h2>Acesta e destul de mare</h2>

Liste neordonate (<ul>)

Conform specificației HTML, o listă este o secvență de paragrafe precedate de un simbol sau număr. Aceste paragrafe sunt etichetate <li>.

Listele neordonate sunt precedate de obicei de un punct/disc și sunt definite cu eticheta <ul> (Unordered List).

Listele ordonate sunt precedate de un număr și sunt menționate în documentul inițial HTML, dar nu mi-e clar dacă au fost implementate de la început. În orice caz, listele ordonate folosesc eticheta <ol> (Ordered List).

<ul>
    <li> Prima linie </li>
    <li> A doua linie </li>
</ul>

Definiții (<dl>)

În mod oarecum surprinzător, acest element obscur din prima versiune de HTML a rezistat până azi, fără să fie declarat „învechit”.

O definiție are termen (<dt>) și descriere (<dd>) pentru acel termen.

Exemplu:

<dl>
    <dt>Giroscop</dt>
    <dd>
        Aparat care, antrenat de o mișcare de 
        rotație în jurul uneia dintre axe,  
        se poate astfel deplasa încât  
        să nu modifice direcția axei sale  
        de rotație
    </dd>
    <dd>
        Dispozitiv care asigură stabilitatea  
        și orientarea în spațiu a unui avion,  
        a unui submarin etc.
    </dd>

   <dt>Futurologie</dt>
   <dd>
        Disciplină care are drept obiect  
        studierea legilor și a metodelor noi  
        de previziune a viitorului societăților 
        umane, sub aspectul evoluției  
        sociale, economice, științifice și  
        tehnologice
   </dd>
</dl>

În 2021, listele de definiții sunt foarte rar folosite. Din punct de vedere vizual, pot fi înlocuite cu alte elemente.

Anumite aplicații de citit text pot interpreta în mod special acest element.

Adresă (<address>)

Alt exemplu de element care a rezistat deși nu are foarte mare utilitate, dar poate fi folosit de anumite aplicații.

În ciuda numelui, o adresă în HTML poate conține orice informații de contact, precum adresa de e-mail, sau un număr de telefon, sau orice e nevoie în context.

Vizual, browserele vor înclina textul unei adrese.


Cum funcționează WWW

Pânza Globală, sau WWW, sau „Webul” este o rețea de documente HTML, unele legate între ele de ancore/linkuri. Unele sunt generate dinamic, atunci când sunt accesate. Altele pot fi pregătite dinainte.

În momentul în care accesezi o pagină web, browser-ul se „uită” la adresa URL, care arată așa: protocol://domeniu/path.

Protocolul îi spune cum să comunice. Dacă este HTTP, se va accesa direct, iar cu HTTPS se va stabili mai întâi o conexiune securizată.
Alt protocol folosit de browserele web este „file”, care le permite le spune să acceseze fișierele locale.

Prescurtarea HTTP vine de la Hyper-Text-Transfer-Protocol (Română: Protocol pentru transferul de hipertext). HTTPS înseamnă doar HTTP-Securizat.

În cazul HTTP sau HTTPS, browserul se uită la domeniu, pentru a determina ce server trebuie accesat. Modul în care se face asta e mai complicat, dar de obicei se întreabă alte servere, care au memorate toate asocierile dintre domenii și adrese IP.

Odată ce a deteminat de la ce server să ceară documentul HTML, browser-ul contactează acel server și îi dă tot URL-ul, printre alte informații.

Serverul procesează aceste informații. Cea mai simplă formă de procesare este preluarea fișierului .html, dar de cele mai multe ori se întâmplă lucruri mai complexe.

La final, serverul îi răspunde browserului cu documentul HTML.

Browserul interpretează acel document și îl afișează.


Cum se făcea web development în 1991

Primul browser, numit WorldWideWeb, a fost publicat în 1991, dând naștere web-ului.

Primul server web era un simplu calculator NeXT (compania înființată de Steve Jobs după ce plecase de la Apple). Serverul era capabil doar să livreze fișiere HTML.

Treaba unui web-developer la începuturile www-ului era să scrie fișiere HTML și să le pună pe un server accesibil din Internet.

Pentru a crea fișiere, îți trebuia un editor. Însuși browserul WorldWideWeb putea să editeze fișiere HTML, dar îți trebuia un calculator NeXT.
Dacă nu aveai, puteai totuși să folosești orice editor primitiv de text, inclusiv Notepad-ul de la Windows.


În anii ce au urmat, HTML a devenit mai dinamic, inițial prin introducerea formularelor, apoi a JavaScript (ajuns la maturitate după experimente eșuate cu alte tehnologii precum Java Applet sau Flash).

Paginile web au devenit mai frumoase cu CSS și introducerea de elemente multi-media (imagini, video, audio).

Treaba unui web-developer s-a schimbat mult din 1991.
Eu cred că e util și interesant să știm cum s-a ajuns unde suntem azi.