Introducere în HTML

Deși prezentarea limbajului HTML nu constituie un obiectiv al acestui manual, vom da aici unele noțiuni introductive asupra acestui limbaj, fiind utile pentru o mai bună înțelegere a utilizării appleturilor.
 

Ce este un hipertext

Hipertextul (engleză: hypertext) este o colecție de documente, numite și noduri sau pagini, unite între ele prin legăturica în Figura 1.

- Figura 1 -

Este necesar, desigur, să se adopte o convenție privind modul în care se însereaza în pagina de hipertext legăturile către alte pagini. Pentru utilizatorul care vede pe ecran pagina respectivă, această legătură apare, de regulă, sub forma unui cuvânt sau unui grup de cuvinte puse în evidență prin subliniere, colorare sau prin ambele procedee. Dacă se face click cu mouse-ul pe o astfel de "legătura", pagina curentă se schimbă cu pagina către care indică legătura respectivă. Citirea unui asemenea hipertext nu se face cu un editor de texte obișnuit, ci cu un program special numit navigator sau browser.

Paginile (nodurile) hipertextului sunt stocate sub forma de fișiere, situate pe un singur calculator, sau pe mai multe calculatoare legate în rețea.

Ce este WWW

World-Wide Web (WWW) este un sistem de regăsire a informației distribuite pe Internet. În limba engleză, web înseamnă  "plasa", "rețea", "pânză de păianjen", ceeace sugerează legaturile existente între noduri într-un hipertext. Asadar, WWW este o astfel de "pânză de păianjen" care acopera întreaga lume și ale cărei noduri sunt documente.

Documentele sunt stocate sub formă de fișiere pe diferite calculatoare, care acționeaza ca servere de web. Utilizatorul poate naviga pe această rețea, folosind un program numit browser de web (navigator). Cele mai răspândite browsere de web sunt, în prezent, Netscape Navigator și Internet Explorer. Putem deci considera că WWW este perceput de utilizator ca un hipertext, ale cărui noduri sunt raspândite în întreaga lume. Transmiterea prin Internet a paginilor WWW se face folosind un protocol special, numit HTTP (Hypertext Transfer Protocol), iar pentru marcarea paginilor de WWW, cu scopul de a însera în ele legăturile necesare, se folosește un limbaj numit HTML.

Ce este HTML

HyperText Markup Language (HTML) este un limbaj de marcare a hipertextelor. În estență, o pagină HTML este un fișier de text ASCII, care conține niște simboluri speciale, numite marcaje sau taguri. Prin aceste marcaje se indică legăturile către alte documente și către appleturi, imagini sau secvențe audio incluse în document, dându-se, de asemenea, informații privind formatarea documentului și altele.

Fiecare marcaj (tag) este de forma <tag> ... </tag>, deci începe printr-un nume de marcaj (tag) cuprins între paranteze unghiulare și se termină prin același marcaj, având în fața numelui simbolul / (slash). Astfel, fiecare document HTML începe cu marcajul <html> și se termină cu </html>. În limbajul HTML nu se face distincție în marcaje între literele mari și cele mici, deci tagul <HTML> ... </HTML> este echivalent cu tagul <html> ... </html>. Aceste marcaje pot fi cuprinse unul în altul, ca în Figura 2.a, dar nu este permis ca domeniile lor să se intersecteze, ca în Figura 2.b.

- Figura 2 -

Pentru crearea de documente HTML se poate folosi un editor de text simplu, în mod ASCII, dar - în acest caz - cel care creează documentul trebuie să cunoască bine sintaxa HTML și toate tagurile acestuia. Mult mai comoda este folosirea unor editoare speciale de pagini Web, cum sunt Netscape Composer sau Front Page, care prezintă interfață utilizator grafică, iar pe ecran se vede documentul sub forma în care acesta apare și in browser.

Structura documentului HTML

Un document HTML are urmatoarea structură:

<HTML>
    <HEAD>
           Antetul documentului
    </HEAD>
    <BODY>
        Corpul documentului
    </BODY>
</HTML>

Modul de punere în pagină nu are importanță, deoarece întreaga informație despre structură și formatare este conținuta în marcaje (taguri). Același document poate fi pus în pagina, de exemplu, astfel:

<HTML><HEAD>Antetul documentului </HEAD><BODY>Corpul documentului </BODY></HTML>

Antetul documentului conține, opțional, titlul acestuia și informații despre autor, tipul de document etc. O componentă importantă a antetului este titlul documentului, care are forma:
    <TITLE>Titlul documentului</TITLE>
Titlul este un text, care apare în bara de titlu a browserului care vizualizează documentul respectiv.

Corpul documentului este documentul propriu-zis, care se afișează pe ecran, inclusiv legăturile conținute în documentul respectiv.
 

Marcaje de formatare a textului folosite frecvent

Marcarea paragrafelor

Fiecare paragraf este cuprins între marcajele <P> .. </P>. Totusi, folosirea marcajului de sfârșit de paragraf </P> nu este obligatorie. Atunci când documentul este vizualizat în browser, fiecare paragraf începe de la capăt de linie. În interiorul paragrafului, trecerea la linie nouă se face automat, când se ajunge la marginea din dreapta a paginii. Se poate, totuși, forța trecerea la linie nouă prin marcajul <br> (prescurtare de la break).

În marcajul <P> se pot introduce și indicații privind culoarea de fond,  culoarea caracterelor și forma caracterelor din paragraful respectiv. Aceste indicații se dau prin parametri de forma nume=valoare.

Culoarea caracterelor se indică prin parametrul color=culoare, unde culoare poate fi: black (negru), gray (gri), silver (argintiu), white (alb), red (rosu), green (verde), blue (albastru), yellow (galben), lime (verde deschis), aqua (albastru deschis), fuchsia (roz), purple (purpuriu), maroon (maron), olive (oliv), navy (bleu marin), teal (verde inchis). Remarcăm că sunt alte nume de culori decât cele din clasa java.awt.Color.

Culoarea fondului se indică prin parametrul bgcolor=culoare, unde numele culorilor sunt aceleași ca pentru caractere.

Forma caracterelor cu care este scris paragraful este indicată prin parametrul face=forma. În funcție de platformă, se pot folosi diferite forme de caractere. Există, totuși, trei forme care sunt disponibile pe orice platformă: Serif, sansSerif si Monospace. Primele două au caractere de lățime variabilă (de exemplu, m este mai lat decat i), iar ultimul are toate caracterele de aceeasi lățime (exemplu: în cuvantul lățime, scris cu astfel de caractere,  m și i au aceeași lățime). Deosebirea între Serif și SansSerif este prezentă, respectiv absența serifurilor. Acestea sunt liniuțele mici care delimitează unele linii ale literelor, cum se poate observa comparând caracterele din cuvintele de mai jos:
        Serif SansSerif

Indicarea fontului

Se numește font tipul de literă folosit într-un text. Termenul este preluat din tipografie și se referă la reprezentarea formei și mărimii unui caracter. S-a menționat mai sus cum pot fi indicate forma și culoarea caracterelor dintr-un paragraf ca parametri în marcajul <P>. Exista însă și situații în care un anumit font se folosește numai într-o porțiune de paragraf, sau se extinde pe mai multe paragrafe. În acest scop, se folosește marcajul <font parametri> text</font>.
Parametrii din marcajul <font > sunt face=formă, color=culoare și size=mărime. Forma și culoarea se indică în același mod ca în marcajul <P>. Mărimea este un număr întreg cu sau fără semn. Dacă se folosește un număr întreg fără semn, acesta indică mărimea absolută a fontului. Mărimea indicată ca numar intreg cu semn în intervalul [-3, +3] arată mărimea relativă, față de cea pentru care este setat browserul utilizat. Așa dar, de exemplu, parametrii size=3 si size=+3 indică fonturi de mărimi diferite.
 
Exemplu
Textul HTML următor:
<font face=serif color=purple size=+1> proba de text </font>
va apare scris pe ecran sub forma
proba de text

Nu este obligatoriu să se indice toți cei trei parametri. Se folosesc numai cei prin care noul font diferă de cel anterior.

Indicarea stilului

În afară de forma, marimea și culoarea fontului, textul se caracterizează și prin stil: păstrând forma fontului, textul poate să apară îngroșat, cursiv, subliniat etc. În HTML, stilul textului se indică prin marcaje speciale:
  <B> ... </B> pentru text aldin, îngrosat (engleză: bold);
  <I> ... </I>  pentru text cursiv (engleză: italic);
  <U> ... </U> pentru text subliniat (engleză: underline);
  <strike> ... </strike> pentru text tăiat cu o linie (engleză: strikethrough);
  <sub> ... </sub> text scris mai mic și mai jos decât textul de bază (engleză: subscript);
  <sup> ... </sup> text scris mai mic și mai sus decât cel de bază (engleză: superscript).
Aceste stiluri pot fi și combinate. De exemplu, textul HTML
   <B><I><U>text aldin, cursiv și subliniat</U></I></B>
apare pe ecran sub forma:
   text aldin, cursiv și subliniat

Marcarea titlurilor și subtitlurilor

Titlurile diferitelor secțiuni ale textului (capitole, subcapitole etc) se pun în evidență prin faptul că apar scrise cu caractere diferite de restul textului (de regulă mai mari) și sunt distanțate prin câte o linie atât de textul de deasupra, cât și prin cel de dedesubt. Pentru marcarea titlurilor se folosește marcajul <Hn>titlu</Hn> în care n este un număr întreg cuprins în intervalul [1, 6]. Cu cât cifra n este mai mare, titlul respectiv se afișează scris cu caractere mai mici. De exemplu, textul HTML
<H1>Primul titlu></H1><H2>Al doilea titlu</H2><H3>Al treilea titlu</H3>
apare pe ecran sub forma
 

Primul titlu

Al doilea titlu

Al treilea titlu

Se poate astfel continua până la marcajul <H6>.
 

Text preformatat

S-a arătat mai sus că așezarea textului în pagină se face de către browser, respectând marcajele de formatare din textul HTML. În consecință, dacă se modifică dimensiunile ferestrei, se modifica și așezarea în pagină a textului. Spațiile și caracterele speciale din textul HTML, cum sunt caracterul de trecere la linie nouă sau de întoarcere a carului sunt ignorate de browser și nu au efect la afișarea pe ecran. Există, totuși un marcaj care impune ca textul sa fie așezat pe ecran așa cum este el în pagina HTML. Acest marcaj este <PRE> text preformatat </PRE>. De exemplu, textul
  <PRE>
     un exemplu de text 
            preformatat
  scris pe trei linii 
  </PRE>
va apare pe ecran sub forma
     un exemplu de text
            preformatat
  scris pe trei linii

Legături către alte pagini

Legăturile cu alte documente sunt marcate prin ancore, care sunt taguri de forma:
    <A HREF="referință la document">text de legătură</A>
Parametrul HREF (Hypertext Reference) reprezintă indicarea locului în care poate fi găsit documentul către care se face trimiterea (referința la document). Această referință nu este vizibilă în fereastra de browser în care este afișat documentul. În schimb, este vizibil textul de legătură, sub forma unui text subliniat și având o culoare diferită de a restului documentului.
 
Referința la document depinde de locul în care acesta se găsește.
    a/ Documentul țintă se găsește pe acelasi calculator. În acest caz, referința poate fi:
        a1/ Referința absolută, de forma:
            cale/document
           unde cale (engleza: path) este succesiunea de directoare parcurse de la rădăcina arborelui de directoare, până la directorul în care se găsește fișierul care conține documentul; pentru separarea directoarelor se folosește bara (slash, /), conform convenției din sistemul de operare Unix. De exemplu:
        "C:/d1/d2/d3/docum.html"
este o referință la documentul docum.html, care se găsește pe discul C, urmând calea d1/d2/d3/ unde d1, d2 si d3 sunt directoare. Dacă documentul țintă se găsește pe același disc cu documentul în care apare această referință, discul poate fi omis, punând referința sub forma
        "/d1/d2/d3/docum.html"
dar având grijă să înceapă cu "/", ceeace înseamnă că se pornește de la rădăcină, deci este o referință absolută.
            a2/ Referința relativă, în care calea se trasează pornind de la directorul în care se găsește documentul sursă.La indicarea căii, simbolul .. (doua puncte succesive) înseamnă deplasare cu un director înapoi, iar / înseamna deplasare cu un director înainte. De exemplu, referința:
        "../../d2/d3/docum.html"
are semnificația următoare: pornind de la directorul în care se găsește documentul sursă, ne deplasăm două directoare "înapoi" către rădacină, după care parcurgem "înainte" calea d2/d3 și ajungem la documentul docum.html.
    b/ Documentul țintă se găsește pe un alt calculator. În acest caz, referința la document este un URL (engleză: Uniform Resource Locator), care este modul de adresare caracteristic pentru WWW. Iată exemple de URL-uri:
    "http://www.w3.org/default.html"
    "http://java.sun.com/docs/books/jls/html/index.html"
"http://lib.cs.ugal.ro/~sbumbaru/CursJava/Sapt01/poo.html"
Prima parte a URL-ului (în cazul de față http:) reprezintă protocolul de transmisie folosit. Cele două bare (//) indică modul de acces (în cazul de față - adresa pe Internet a unui calculator, de exemplu java.sun.com). Urmeaza calea absolută parcursă pe calculatorul respectiv (de exemplu /docs/books/jls/html/) și numele documentului (index.html).

 
Modul de adresare pe Internet este, în principiu, următorul: Internetul este împărțit în domenii, care pot fi domenii naționale (de exemplu: ro - Romania, fr - Franta, uk - Marea Britanie, de - Germania etc) sau domenii profesionale (com - comercial, edu - educațional, org - organizații, net - retele). Fiecare domeniu este imparțit în subdomenii (de ex.: în domeniul ro există subdomeniul ugal - Universitatea din Galati, iar în domeniul com există subdomeniul sun - firma Sun Microsystems). Subdomeniile pot fi împărțite în sub-subdomenii s.a.m.d până se ajunge la calculatoare individuale. De exemplu, locația atlas.stud.ugal.ro înseamnă calculatorul atlas din subrețeaua stud, din subdomeniul ugal al domeniului ro.

Marcajul APPLET

Pentru a introduce într-un document HTML o referință la un applet, se folosește marcajul (tagul) APPLET, care are forma următoare:

    <APPLET CODE=fișier_class [CODEBASE=localizare] WIDTH=lățime HIGHT=înălțime[ALIGN=aliniere]>
        [<PARAM   NAME=nume VALUE=valoare>]*   [text_de_înlocuire] </APPLET>

în care:
    fișier_class - fișierul cu extensia .class, în care se află bytecode-ul appletului (indicarea extensiei nu este obligatorie), de exemplu:
        CODE=TestFlowAp.class sau CODE=TestFlowAp
    localizare - referința la directorul în care se găsește bytecode-ul appletului; această referință poate fi absolută, relativă sau sub forma de URL, la fel ca în cazul legăturilor către alte documente, cu observația că nu se mai termină prin numele documentului țintă, acesta fiind cel din parametrul CODE; dacă fișierul bytecode al appletului se găsește în același director cu fișierul HTML în care acesta este invocat, parametrul CODEBASE lipsește;
    lățime si înălțime - numere întregi, reprezentând lățimea și înălțimea appletului;
    aliniere - alinierea appletului în pagina de browser, poate fi una din următoarele:
        left | right | top | texttop | middle | absmiddle | baseline | bottom | absbottom
        unde left și right indică aliniere la stânga sau la dreapta, top - aliniere cu elementul cel mai înalt din linie (fie el text, imagine sau alt applet), texttop - aliniere cu cel mai înalt element de text din linia respectivă, middle - mijlocul appletului se aliniază cu mijlocul liniei de bază a textului, absmiddle - mijlocul appletului se aliniază cu mijlocul elementului cel mai mare din linie, baseline sau bottom - baza appletului se aliniază cu linia de bază a textului, absbottom - baza appletului va fi elementul cel mai de jos din linie.
    text_de_înlocuire- un text care va apare în locul appletului, dacă browserul folosit pentru vizualizarea documentului HTML nu este capabil sa utilizeze appleturi.
    Dacă este necesar, marcajul APPLET poate să conțină unul sau mai mulți parametri, care se vor transmite appletului la lansarea acestuia. Acești parametri apar în subtagul PARAM, pentru fiecare din ei indicându-se un nume și o valoare.
 
Exemplul 1: marcajul
    <APPLET CODE="CBGroupAp" WIDTH=180 HEIGHT=80> Testarea clasei CheckboxGroup </APPLET>
se folosește pentru a include în documentul HTML a unui applet, al cărui fișier de bytecode este CBGroupAp.class și se găsește în acelasi director cu documentul HTML în care există acest tag. Appletul va avea lățimea 180 și înălțimea 80. Dacă browserul folosit nu suportă appleturi java, în locul rezervat appletului va apare textul de înlocuire "Testarea clasei CheckboxGroup".

Exemplul 2: marcajul
    <APPLET CODE=PrimApplet CODEBASE=../Sapt01/surse WIDTH=200 HEIGHT=100>Primul applet</APPLET>
se folosește pentru a include în documentul HTML appletul al cărui fișier bytecode este PrimApplet.class și care se găsește în alt director decât fișierul HTML, dar pe același disc. În CODEBASE s-a folosit forma relativa a căii.

Exemplul 3: marcajul
    <APPLET CODE=PrimApplet CODEBASE=/CursJava/Sapt11/surse WIDTH=200 HEIGHT=100> Primul applet </APPLET>
are aceeași semnificație ca cel din exemplul anterior, dar în CODEBASE s-a folosit forma absolută a căii.

Exemplul 4: marcajul
    <APPLET CODE=PrimApplet CODEBASE=http://lib.cs.ugal.ro/~sbumbaru/CursJava/Sapt11/surse WIDTH=200 HEIGHT=100> Primul applet </APPLET>
are aceeași semnificație ca cel din exemplul anterior, dar în CODEBASE se folosește un URL la care poate fi găsit appletul respectiv.


 

Folosirea de parametri în appleturi

În marcajul APPLET pot fi introduși și unul sau mai mulți parametri, folosind în acest scop sub-marcajul
           [<PARAM   NAME=nume VALUE=valoare>]*
Atât numele, cât și valoarea sunt șiruri. Preluarea în applet a fiecăruia din acești parametri se face invocând metoda
    public String getParameter(String name)
care primește ca argument numele parametrului și întoarce valoarea acestuia sub forma de șir.

Avantajul este că valorile parametrilor pot fi modificate direct în fișierul HTML, fără să mai fie necesar să se modifice și să se recompileze programul appletului.

Exemplu:

În fișierul DouaTexte.java este dat un exemplu de applet în care sunt preluați doi parametri, cu numele textul1 si textul2. Acești parametri sunt șiruri de caractere, care se afișează alternativ într-o etichetă. Schimbarea textului se face la apăsarea pe buton. Acest applet este inclus în pagina HTML din fișierul DouaTexte.html prin următorul marcaj:

    <APPLET   CODE=DouaTexte WIDTH=250 HEIGHT=100 ALIGN=middle>
       <PARAM   NAME=textul1 VALUE="Acesta este primul text">
       <PARAM   NAME=textul2 VALUE="Acesta este al doilea text">
    </APPLET>

Pentru a se afișa alte texte, este suficient să se modifice în mod corespunzător valorile parametrilor din acest marcaj, fără a se face modificări în programul appletului.



© Copyright 2000 - Severin BUMBARU, Universitatea "Dunărea de Jos" din Galați