Curs de scriere HTML
LECTIA a 5-a - 15 mai 2000

Browsers, Servers, URLs & Links

Cui foloseste HTML ?

Scrierea documentelor în HTML (HyperText Markup Language) face posibila publicarea de informatii pe Web.

Documentele scrise în HTML pot fi vazute de aproape toate sistemele de operare, datorita unui mare numar de WWW browsere existente în acest moment pentru fiecare tip sau sistem de computer (platforma). Astfel, HTML este o alegere excelenta pentru publicarea on-line a documentelor personale sau distribuirea informatiilor pe o retea locala (intranet).

HTML este folosit la definirea structurii unui document. Cu toate acestea, cel care dicteaza cum trebuie redat fiecare element structural pe monitorul (ecranul) dumneavoastra este programul browser  folosit.

Desi în linii generale sunt anumite reguli de scriere în HTML , în practica exista o diversitate de redare a informatiei care difera de la browser la browser. De aceea este recomandabil ca, înainte de a publica un document de larga audienta pe Web, sa testati redarea lui in Netscape Navigator, Microsoft Internet Explorer si eventual Lynx. Pentru aceasta, deschideti comanda Open Local sau Open File care se afla de obicei în File Menu. Aceasta va permite sa vedeti documentul asa cum a fost conceput si eventual sa-l corectati. Corectarea o faceti bineinteles în programul editor (Notepad, Word, FrontPage Editor, etc.). Dupa corectare, folositi comanda Reload pentru a vedea pagina cu modificarile facute.

Pentru a instala browser-ul preferat, faceti click pe link-ul respectiv (unul din textele subliniate mai sus în culoare albastra) care vă va conduce la o pagina Web unde veti gasi instructiunile necesare pentru download.

O lista cu diferite programe browser pentru o serie de platforme (sisteme) puteti gasi în Yahoo's Browser list.
BrowserWatch ofera de asemenea o multime de informatii utile despre browsers in use pe Internet.

Inainte de a trece mai departe, sa ne oprim putin asupra notiunii folosite mai sus: BROWSER.

Browsers sunt aplicatii folosite pentru a reda documente scrise în HTML. Aceste programe browsers înteleg comenzile HTML si interpreteaza (traduc) aceste comenzi. Aceasta este situatia cea mai simpla, când browser-ul este folosit doar pentru o vizionare preliminara a unui document scris în HTML, înainte ca acest document sa fie publicat pe Web. In acest caz browser-ul foloseste ca sursa, informatia directa de pe hard disk-ul (local) computerului respectiv unde a  fost conceput si înregistrat documentul ca document.html file.

În cazul unui document publicat pe Web, acesta se afla în pastrare pe un web server.
Browsers sunt aplicatii denumite pe scurt clients care preiau informatiile respective de cele mai multe ori de pe servers , exceptând situatia de mai sus cand documentul se afla pe hard disk-ul local. Servers sunt aplicatii care permit ca HTML files sa fie legate (linked) între ele pe întreaga retea Internet. Un Web server este un program care este mereu în asteptarea unei cereri (request) pentru a elibera o informatie, un document. Când server-ul primeste o astfel de cerere, el elibereaza documentul cerut si-l trimite browser-ului care a facut cererea respectiva. Cererea poate veni de la un computer care este în legatura directa cu serverul, sau de la computere situate de cealalta parte a lumii conectate prin intermediul altui server la internet.

Web servers comunica cu clientii browsers folosind protocolul de retea denumit HTTP (HyperText Transport Protocol). Protocols sunt seturi de reguli folosite de diferite aplicatii de retea, pentru a comunica între ele. Desi HTTP este principalul protocol folosit pe web, mai exista si alte tipuri de servere care folosesc alte protocoale cum ar fi: FTP, Mail sau Gopher. Astfel, se pot crea legaturi (links) într-un document care sa permita oricarui cititor de pe internet sa poata prelua (face download) un document sau o aplicatie, sau se pot face legaturi directe intre doua computere printr-o conectare de tip telnet. Despre cum se pot realiza asemenea link-uri , cititi in capitolul urmator: URLs & Links.

 

URLs & Links

 

În capitolul precedent ati remarcat desigur o serie de texte subliniate si redate în culoare albastra cat si folosirea deseori a notiunii de link.
Ce este acest link si cand se foloseste?

LINK este parte "hyper" a sistemului HTML. Cu ajutorul elementului link, HTML permite stabilirea unei legaturi (link) între portiuni ale unui document si alte localizari din  acelasi document sau legaturi între documente diferite. Legaturile (links) pot fi facute catre un text, catre o imagine sau o reprezentare grafica (reclame, banners, etc.) sau chiar catre un fisier. Ele pot face trimiteri la o anumita informatie specificata in cadrul altui document sau chiar într-o alta sectiune din documentul curent.

Când un web browser întâlneste un link, acesta semnaleaza prezenta legaturii prin sublinierea si/sau colorarea (de regula in albastru) a textului respectiv.
Destinatia link-ului (trimiterii respective) este comunicata catre browser via URL (Uniform Resource Locator).

Ce este URL ? URL este, simplu spus: adresa la care se gaseste un document pe Internet.

Pentru a face trimiteri (links) la un document este necesar sa întelegem componenta unei adrese URL.

Aceste trei parti scrise împreuna formeaza o adresa URL, astfel:

protocol://hostname/filename

Un exemplu de adresa URL este:

http://www.eed.usv.ro/~mahalu/Curs/lectia05.html

În acest exemplu http indica numele protocolului care este folosit pentru transferul informatiei in Web, www.eed.usv.ro este numele host-ului (site-ul care gazduieste documentul respectiv) si ~mahalu/Curs/lectia05.html este calea catre documentul (respectiv lectia05.html) aflat in structura de directoare /~mahalu/Curs/.

 

Folosirea tag-ului Link: <A>    </A>

Tag-ul folosit pentru a marca un link este <A> (de la cuvântul "anchor" ).
Acesta este urmat de adresa de referinta (HREF) URL a documentului de destinatie.
Apoi, se scrie textul sau numele trimiterii (hypertext link) respective.
Tag-ul se închide cu perechea </A>

De exemplu: în documentul dumneavoastra vreti sa faceti trimitere la lectia prezenta, Lectia 5-a din cadrul Cursului HTML. Aceasta lectie se afla înregistrata (depozitata) pe serverul www.eed.usv.ro sub numele: /~mahalu/Curs/lectia05.html (unde: /~mahalu/Curs este calea de directoare, iar lectia05.html este denumirea fisierului). In acest caz link-ul se scrie astfel:

<A HREF="http://www.eed.usv.ro/~mahalu/Curs/lectia05.html">Lectia a 5-a din cadrul Cursului de HTML</A>

Rezultatul afisat de catre browser, Netscape de exemplu, este:

Lectia a 5-a din cadrul Cursului de HTML

Dupa cum vedeti, textul de trimitere la lectia a 5-a apare subliniat si scris cu culoare albastra. Aceasta este culoare frecvent folosita pe web pentru a scoate în evidenta faptul ca este vorba de un link, adica de o trimitere la un alt document care contine informatii în detaliu despre acel subiect (în cazul nostru, continutul lectiei a 5-a).
Încercati cu un singur click pe textul subliniat si colorat în albastru si veti vedea rezultatul.
Browser-ul dumneavoastra cere acest document (lectia 5-a) catre web server-ul eed.usv.ro; acest server elibereaza documentul cerut (/~mahalu/Curs/lectia05.html) si-l va trimite catre browser-ul dvs. care va afisa pe ecranul computerului continutul lectiei a 5-a, asa cum a fost el conceput.

FOARTE IMPORTANT de retinut este faptul ca unele sisteme, (cum ar fi sistemul UNIX de exemplu) sunt case sensitive, adica fac deosebirea între MAJUSCULE si minuscule. Astfel, daca veti scrie adresa URL de mai sus folosind majuscula L la scrierea numelui de fisier, respectiv Lectia05.html, serverul va va raspunde: File not found. Asta înseamna ca el nu recunoaste Lectia05.html ci lectia05.html care este denumirea corecta data de autorul acestui document.
Încercati si scrieti link-ul la Lectia 5-a astfel:

<A HREF="http://www.eed.usv.ro/~mahalu/Curs/Lectia05.html">Lectia05.html</A>

Rezultatul afisat de catre browser, Netscape de exemplu, este:

Lectia05.html

Acum apasati cu un click pe acest link. Raspunsul primit de la server va fi fara îndoiala:
File not found.

Iata de ce este important sa scrieti întotdeauna adresa URL exact asa cum a fost ea scrisa de autorul documentului respectiv.

Local Links - Relative URL

Asa cum am mai spus, se pot face trimiteri (links) la documente care sunt localizate pe acelasi server, în acelasi directory sau subdirectory cu documentul orginal de referinta (adica prezentul document lectia05.html). În aceasta situatie puteti folosi o adresa URL relativa. Exemplu în urmatorul text:

Amanunte despre folosirea tag-ului paragraf, puteti gasi la
<A HREF="lectia03.html">lectia a 3-a </A>din cadrul cursului HTML.

Rezultatul afisat de browser va fi:

Amanunte despre folosirea tag-ului paragraf, puteti gasi la lectia a 3-a din cadrul cursului HTML.

Faceti click pe textul subliniat în albastru si continutul lectiei a 3-a va fi afisat pe ecranul dumneavoastra. Scrierea acestui relative link a fost posibila numai pentru ca lectia03.html este situata în acelasi directory, /~mahalu/Curs/ , cu lectia05.html
Observati ca în acest caz, nu mai este nevoie de mentionat protocolul http în scrierea tag-ului <A>, acest protocol fiind folosit automat, ca la documentul original de referinta (lectia05.html).

FOARTE IMPORTANT: Folositi cu mare atentie path-ul care localizeaza documentul de publicat pe internet si testati întotdeauna link-ul on-line. Desi link-ul poate functiona corect pe hard disk-ul local, el poate fi eronat atunci cand testati functionarea pe server. Iata un exemplu:

<A HREF="/HardDisk1/Curs/lectia05.html>Lectia 5-a</A>

Acest link functioneaza pe hard disk-ul meu nr. 1 dar nu functioneaza pe server-ul eed.usv.ro unde nu exista directorul /HardDisk1.

Un alt exemplu de relative link care trebuie întotdeauna testat pe server:

<A HREF="../Curs/lectia05.html>Lectia a 5-a</A>

Acest link foloseste in URL un path care face trimitere la upward directory (  ../ ) si functioneaza atât pe hard disk-ul meu cât si pe server-ul eed.usv.ro deoarece în ambele situatii documentul lectia05.html se regaseste urmarind acest path. Acelasi link scris astfel nu va functiona, daca va fi scris într-un document situat în alt subdirectory (de exemplu în /Lectii/index.html) pentru ca server-ul ar cauta documentul /Curs/lectia05.html într-un director imediat superior documentului index.html, respectiv în /Lectii si nu în eed.usv.ro/~mahalu/Curs/lectia05.html unde se afla acum.

Se recomanda EVITAREA folosirii de adresa relativa URL cand documentele nu sunt situate in acelasi subdirector.
Pentru siguranta, folositi scrierea completa a adresei URL în tag-ul link, asa cum s-a descris la începutul capitolului URLs & Links . Un link scris astfel:

<A HREF="http://www.eed.usv.ro/~mahalu/Curs/lectia05.html">Lectia a 5-a din cadrul Cursului HTML</A>

va da întotdeauna rezultatul scontat :

Lectia a 5-a din cadrul Cursului HTML

 

Specific Links: Tag-ul <A NAME> </A>

Exista situatii cand, în cadrul unui document cu un continut mai bogat si divers, se pot face trimiteri (links) la anumite parti specifice ale acelui document (cuprins, început, anumite capitole, etc.) pentru a usura gasirea informatiei respective în document, fara sa fie nevoie de parcurgerea întregului text.

Sa luam un exemplu din cadrul acestei pagini si sa presupunem ca vrem sa revenim printr-un singur click la începutul lectiei a 5-a. Pentru acest lucru vom folosi tag-ul <A NAME> în felul urmator:

<A NAME="top">LECTIA a 5-a</A>

<A HREF="#top">Apasând aici puteti reveni la începutul lectiei a 5-a</A>

Rezultatul afisat de browser este:

Apasând aici puteti reveni la începutul lectiei a 5-a

Încercati, va rog, si veti ajunge sigur în top-ul paginii !

SUCCES !

back.gif (2700 bytes)