 |
|
 |  |
|
|
| |
 | Biologie | Chimie | Didactica | Fizica | Geografie | Informatica |
| Istorie | Literatura | Matematica | Psihologie |
LIMBAJUL HTML
1. Prezentare generala
Publicarea informatiei pentru o distributie globala, necesita un limbaj care sa fie universal inteles. Limbajul utilizat prin World Wide Web este HTML (HyperText Markup Language).
HTML ofera urmatoarele posibilitati:
publicarea documentelor on-line care contin: titlu, texte, tabele, liste, imagini etc.;
regasirea on-line a informatiei prin legaturi hipertext;
proiectarea formularelor pentru a se realiza tranzactii prin servicii la distanta, pentru cautarea de informatie, rezervari, cereri de bunuri;
includerea de clipuri video, clipuri sonore si alte aplicatii direct in document.
HTML reprezinta o implementare simpla a limbajului SGML (Standard Generalized Markup Language) care permite crearea de documente hipertext pentru paginile Web.
SGML este un sistem pentru definirea limbajelor de marcare. HTML este un exemplu de limbaj de marcare. In continuare este prezentat un document HTML (ex1.htm):
<HTML>
<HEAD>
<TITLE>Document HTML</TITLE>
</HEAD>
<BODY>
<P>Salut!
</BODY>
</HTML>
Un document HTML este divizat intr-o sectiune antet (aici, intre <HEAD> si </HEAD>) si o sectiune corp (aici, intre < BODY> si </BODY>). Titlul documentului apare in antet, iar continutul in corp.
Orice limbaj de marcare definit prin SGML este denumit aplicatie SGML. O aplicatie SGML este in general caracterizata prin:
Declaratia SGML - prin care se specifica caracterele si delimitatorii ce pot apare in aplicatie.
Definirea a tipului de document (Document Type Definition - DTD) - defineste sintaxa de construire a marcajelor. DTD poate include definitii suplimentare, cum ar fi referente la entitatile caracter.
O specificatie ce descrie semantica asociata marcajelor. Aceasta specificatie impune anumite restrictii de sintaxa care nu pot fi definite prin DTD.
Instantele document contin date si marcatori. Fiecare instanta contine o referinta catre DTD-ul care poate fi utilizat pentru a fi interpretat.
Principalele caracteristici ale HTML sunt:
descrierea structurii documentului (fig. 1);
nu este descrisa aranjarea in pagina;
permite fiecarui navigator sa aiba propria prezentare;
un document HTML poate fi reutilizabil.
Titlu
Figura 1. Document HTML
Ciclul de viata al unui document Web include:
conceptia: cand se utilizeaza instrumente de editare;
gestiunea: stocarea in fisiere;
difuzarea: fiind permisa vizualizarea de catre utilizatori;
utilizarea: prin editare, copiere, imprimare.
Continutul unui document se caracterizeaza prin:
natura informatiei: texte, grafica, tabele, ecuatii;
structura: - numele: titluri capitole, paragrafe, legende;
- conceptia obiectelor imbricate;
prezentare: operatia de formatare.
HTML a parcurs in timp mai multe versiuni:
HTML nivel 1, versiunea standard de baza care este recunoscuta de toate navigatoarele;
HTML nivel 2, nivel 1 + formulare interactive;
HTML nivel 3, nivel 2 + tabele, ecuatii si alinierea textelor si imaginilor.
HTML nivel 4, nivel 3 + modele de prezentare a documentelor, ameliorarea tabelelor si formularelor.
Specificatia HTML 4.0 include declaratia SGML, definirea tipului de document si o lista a referintelor caracter.
Un document HTML se poate realiza printr-un:
editor de texte (in ASCII);
procesor de texte;
editor HTML;
convertor HTML.
O definire a tipului de document SGML declara tipurile de elemente ce reprezinta structurile sau comportamentul dorit.
HTML include elemente care se refera la paragrafe, legaturi hipertext, liste, tabele, imagini etc. Fiecare tip de element declarat, in general include trei parti: tag de inceput, continut si tag de sfarsit. Numele elementului apare in tag-ul de inceput si cel de sfarsit. Numele elementelor nu sunt case-sensitive.
Limbajul HTML include o mare diversitate de tag-uri (marcatori). Sintaxa generala a unui tag este sub forma:
<Nume_Tag> Text ----- ----- ---- [</Nume_Tag>
Tag-urile sunt:
singulare, cand se regaseste numai tag-ul de inceput (<P>
pereche, reprezentat prin tag de inceput (<HEAD>) si tag de sfarsit (< HEAD>
Unele tag-uri detin atribute (parametri) care pot lua anumite valori, in acest caz sintaxa este:
<Nume_tag atrib1='valoare1' atrib2='valoare2'>
Exemplu: <IMG src='URL_imagine' align='top'>
IMG reprezinta numele tag-ului ce are rolul de a include in document o imagine. Numele primului atribut este src avand ca valoare URL-ul fisierului imagine, iar numele celui de al doilea atribut este align si se refera la aranjarea imaginii in document avand valoarea top
2. Structura documentelor
Orice document HTML include un antet si un corp (fig. 2). Pentru structurarea documentului se utilizeaza, in general, tag-urile:
|
<HTML> </HTML> |
defineste inceputul si sfarsitul documentului; |
|
<HEAD> </HEAD> |
inceput/sfarsit antet document; |
|
<TITLE> </TITLE> |
inceput/sfarsit titlu document; |
|
<BODY> </BODY> |
inceput/sfarsit document propriu-zis; |
Figura 2. Structura minimala a unui document HTML
Un document scris in HTML 4.0 este compus din trei parti:
Elementul HTML delimiteaza un document, incluzand cele doua sectiuni - antet si corp.
In continuare este prezentat un document
HTML.
Un document HTML valid declara ce versiune a HTML este utilizata in document. Documentul declara numele DTD care se utilizeaza. HTML 4.0 specifica trei DTD-uri.
Daca elementele HTML si HEAD sunt optionale, orice document HTML trebuie sa includa un element TITLE in sectiunea de antet. Elementul TITLE se utilizeaza pentru a se identifica continutul documentului. Titlul poate include entitati caracter, dar nu poate contine alti marcatori.
3. Aranjarea in pagina si formatarea documentelor
<Hi> </Hi> indicele i=1, 2, 3, 4, 5, 6 stabileste dimensiunea caracterelor pentru textul din interiorul tag-ului. Dimensiunea cea mai mica se obtine pentru i=6 si cea mai mare pentru i=1.
<EM> </EM> text scos in evidenta (Emphasis).
<STRONG> </STRONG> text puternic scos in evidenta.
<ADDRESS> </ADDRESS> textul specifica o adresa postala, o adresa e-mail sau un numar de telefon.
<B> </B> <I> </I> text bolduit sau italic.
<TT> </TT> text monospatiat.
<BR> intrerupe linia curenta si trece pe urmatoarea, indiferent daca urmeaza text sau imagine.
<P> </P> trece la paragraful urmator, care incepe cu o noua linie, dar spre deosebire de BR lasa si o linie libera ca separator de paragrafe.
< Text --> comentariu, fiind ignorat de navigator.
<HR SIZE=n WIDTH=n
ALIGN=left|right|center NOSHADE > transeaza o linie orizontala de separare, care poate avea urmatoarele caracteristici: grosime (SIZE), lungime (WIDTH), aliniere (ALIGN) si fara umbra (NOSHADE
<DIV ALIGN='left|center|right'> </DIV> alinierea textului.
<PRE WIDTH=n > </PRE> permite conservarea formatarii textului din intervalul tag-ului. Atributul WIDTH fixeaza numarul de coloane in care se afla textul formatat, valoarea implicita fiind de 80 de coloane.
<FONT SIZE=n COLOR=x FACE=t1,t2,t3> </FONT>
Efectul atributelor acestui tag actioneaza asupra textului situat inaintea tag-ului </FONT>
Atributul SIZE=n stabileste dimensiunea caracterelor, n poate lua valori cuprinse intre 1 si 7. Daca valoarea atributului este precedata de semnul + atunci n reprezinta cresterea in raport cu dimensiunea curenta a caracterelor.
Atributul COLOR=x stabileste culoarea caracterelor dupa modelul RGB: rrggbb rr - rosu, gg - verde, bb - bleu). rr gg bb sunt valori hexazecimale. Valoarea da o intensitate minima, iar FF o intensitate maxima. Astfel, combinatia FF0000 corespunde pentru culoarea rosu intens, FFFFFF pentru alb, iar pentru negru.
Atributul FACE=t1,t2,t3 permite stabilirea tipului de font, care trebuie sa existe pe masina clientului.
Numele culorilor si valorile RGB:
Black = '#000000' 
Green = '#008000'
Silver = '#C0C0C0' 
Lime = '#00FF00'
Gray = '#808080' 
Olive = '#808000'
White = '#FFFFFF' 
Yellow = '#FFFF00'
Maroon = '#800000' 
Navy = '#000080'
Red = '#FF0000' 
Blue = '#0000FF'
Purple = '#800080' 
Teal = '#008080'
Fuchsia = '#FF00FF' 
Aqua = '#00FFFF
<MULTICOL COLS=n GUTTER=l WIDTH=d > </MULTICOL>
Permite scrierea textului pe mai multe coloane (gen ziar). Numarul de coloane, dimensiunea acestora si spatiul dintre ele se specifica prin atributele: COLS WIDTH si GUTTER
<CENTER> </CENTER> Centreaza pe orizontala textul sau imaginile.
<SPACER TYPE=tip SIZE=n>
<SPACER TYPE='BLOCK' WIDTH=n HEIGHT=j ALIGN=a>
Permite controlul vertical si orizontal al spatiului dintre elementele unei pagini HTML. Atributul TYPE poate lua valorile HORIZONTAL VERTICAL sau BLOCK. Daca atributul TYPE ia valoarea BLOCK, atunci se pot specifica si atributele: WIDTH (latimea), HEIGHT (inaltimea) si ALIGN cu valorile TOP BOTTOM CENTER sau MIDDLE
<BR CLEAR=c>
Permite pozitionarea unei imagini fata de textul documentului HTML. Atributul CLEAR poate lua valorile: LEFT RIGHT sau ALL LEFT lasa liber locul din stanga imaginii, RIGHT lasa liber locul din dreapta imaginii, iar ALL se foloseste cand avem doua imagini in pagina si vrem ca una sa fie aliniata la stanga, cealalta, la dreapta si spatiul dintre ele sa fie liber.
<BODY BGCOLOR=c text=t LINK=l VLINK=v ALINK=a>
Controleaza culorile pentru: fondul ecranului, text si legaturi. Toate valorile atributelor din tag-ul BODY c t l v si a) se specifica dupa modelul RGB sub forma rrggbb'. Atributul BGCOLOR da culoarea fondului de ecran, TEXT, culoarea textului (altul decat legaturile hipertext), LINK, culoarea legaturilor care nu au fost inca vizitate, VLINK, culoarea legaturilor care au fost vizitate si ALINK, culoarea temporara a legaturii din momentul activarii acesteia (culoarea implicita este rosu).
Exemplu1
Exista posibilitatea ca fondul ecranului sa contina o imagine care trebuie sa fie mai simpla si monocroma, pentru a permite o vizualizare usoara a paginii gazduite. Specificarea unei imagini ca fond de ecran se face prin:
<BODY BACKGROUND='fisier imagine.gif'>
Exemplu2
4. Liste
a) Liste ordonate
<OL TYPE=t START=s>
<LI> Text1
<LI> Text2
<LI> Text3
</OL>
Atributul TYPE defineste tipul numerotarii elementelor listei, care poate fi: t=1 pentru cifre, t=A pentru caractere majuscule, t=a pentru caractere minuscule, t=I pentru numerotarea romana cu litere mari si t=i pentru numerotarea romana cu litere mici, iar atributul START defineste valoarea de inceput.
Exemplul 3.
<OL>
<B>
<LI> Matematica
<LI> Fizica
<LI> Limba romana
</B>
</OL>
Ceea ce se va afisa este:
Exemplul 4.
<OL>
<B>
<LI><A href='URL_M'>Matematica
</A>
<LI><A href='URL_F'>Fizica
</A>
<LI><A href='URL_L'>Limba
romana </A>
</B>
</OL>
Se afiseaza:
b) Liste neordonate
<UL TYPE=t>
<LI> Text1
<LI> Text2
</UL>
Atributul TYPE defineste semnul care va precede elementele listei: t=SQUARE (patrat), t=CIRCLE (cerc vid) si t=DISC (cerc plin).
Exemplul 5.
<UL>
<B>
<LI><A href='URL_M'>Matematica </A>
<LI><A href='URL_F'>Fizica </A>
<LI><A href='URL_L'>Limba romana </A>
</B>
</UL>
c) Liste cu definitii
<DL>
<DT><B> Termen1 pentru definit </B>
<DD> Definirea termenului
<DT><B> Termen2 pentru definit </B>
<DD> Definirea termenului
</DL>
Exemplul 6.
<DL>
<DT><B>server</B>
<DD>un calculator care ofera servicii intr-o retea;
<DT><B>client</B>
<DD>calculatorul care solicita servicii intr-o retea.
</DL>
Rezultatul afisarii cu un browser:
5. Legaturi hipertext
Legaturile hipertext permit vizualizarea prin clic pe un cuvant, fraza sau imagine a altor fisiere decat cel curent. Pentru a realiza o legatura hipertext se utilizeaza tag-ul ancora: <A> </A> care include si atribute. Unul dintre aceste atribute este: HREF Hypertext REFerence), utilizat pentru a specifica URL-ul documentului tinta. Sintaxa este:
Legaturile se pot realiza:
intern, in acelasi document;
local, catre un document situat pe acelasi server;
extern, catre un document aflat pe alt server.
a) Legatura locala
<A HREF='fisier_local'> text de legatura </A>
Valoarea 'fisier_local' reprezinta adresa fisierului local catre care se face legatura, acesta va fi incarcat. Fisierul local se precizeaza folosind:
calea relativa, serverul va cauta documentul incepand din acelasi director ca si documentul de la care a fost apelata legatura;
calea absoluta cand documentul va fi identificat incepand cu directorul radacina.
b) Legatura interna se realizeaza intre elemente ale aceluiasi document sau catre un anumit punct tinta al altui document. Aceasta implica:
b1) crearea unei ancore in punctul tinta:
<A NAME='cuvant_cheie'>Paragraf tinta</A>
Ancorele din punctul tinta nu sunt afisate diferit fata de restul documentului.
b2) realizarea unei legaturi prin care se specifica numele fisierului (daca legatura se face intr-un punct al altui fisier) si paragraful:
<A HREF='[nume fisier] cuvant_cheie'>Paragraf tinta</A>
Se utilizeaza acest tip de legatura in cadrul unui document organizat pe sectiuni. La inceputul documentului poate fi prezentat continutul.
Exemplul 7.
<HTML>
<HEAD>
<TITLE>Pagina Web</TITLE>
</HEAD>
<BODY>
<H1 align=center> EXEMPLUL DE PAGINA WEB</H1>
<P>Prin continutul acestui document se exemplifica legatura catre un paragraf al documentului.
<P>
<P><A NAME='CCC'></A>
<OL>
<LI> <H1> <A HREF=' AAA'> Materiile anului I </A></H1>
<LI> <H1> <A HREF=' BBB'> Materiile anului II </A></H1>
<LI> <H1> <A HREF=' DDD'> Materiile anului III </A></H1>
</OL>
<HR><P>
<H2> <A name='AAA'> Materiile anului I </A></H2><BR>
<UL>
<LI>Economia politica
<LI>Algebra liniara
<LI>Analiza matematica
<LI>Bazele programarii
<LI>Sisteme de calcul si operare
<LI>Bazele statisticii
</UL>
<HR>
<A HREF=' CCC'> Revenire inceput </A>
<HR>
<P>
<H3> <A NAME='BBB'> Materiile anului II </A></H3><BR>
<UL>
<LI>Bazele contabilitatii
<LI>Drept civil
<LI>Programarea calculatoarelor
<LI>Management
<LI>Baze de date
<LI>Cercetari operationale
<LI>Finante-Moneda
<LI>Analiza sistemelor
</UL>
<HR>
<A HREF=' CCC'>Revenire inceput </A>
<HR><P>
<H4> <A NAME='DDD'> Materiile anului III </A></H4><BR>
<UL>
<LI>Sisteme de operare
<LI>Structuri de date
<LI>Limbaje evoluate de programare
<LI>Algoritmi si logica matematica
<LI>Contabilitatea intreprinderii
<LI>Dreptul afacerilor
</UL>
<HR>
<A HREF=' CCC'>Revenire inceput </A>
<HR>
<BODY>
</HTML>
b) Legatura externa
Tinta unei legaturi hipertext poate fi: un fisier HTML, o imagine externa (GIF JPEG sau PostScript), un film sau text (caruia i s-a marcat o ancora).
In cazul in care legatura hipertext puncteaza spre un fisier HTML, exista doua situatii posibile:
Documentul apelat apartine unui ansamblu de documente omogene care sunt dirijate dintr-un document principal. In aceasta situatie se poate prevedea in documentul apelat o ancora de retur spre documentul principal pentru a facilita navigarea in ansamblul respectiv. Acest lucru trebuie facut cu multa atentie, deoarece inr-un alt context s-ar putea sa deruteze utilizatorul. Fiecare document are o legatura de revenire spre documentul principal.
Documentul apelat se afla pe un server independent de documentul in curs de realizare; dupa consultare, utilizatorul va reveni in documentul de apel prin activarea butonului BACK din navigator.
Este posibila definirea unor legaturi catre celelalte servicii Internet: FTP TELNET NEWS MAILTO JavaScript. Spre exemplu, o legatura de forma: mailto:adresa e-mail va apela un program de scriere si expediere a scrisorilor, catre destinatarul a carui adresa a fost specificata.
6. Includerea imaginilor in document
Imaginile pot fi:
afisate direct in documentul Web, imagini on-line (in ideea ca exista un browser grafic). Pentru a putea fi afisate, imaginile trebuie sa fie salvate in format GIF sau JPEG
incarcate si afisate la cererea utilizatorului prin tag-ul <A>, imagini externe.
Imaginile incluse in paginile Web pot avea diverse surse: fotografii preluate printr-un scanner, fotografii preluate de pe un CD-Photo, prin captarea imaginilor de pe un video-disc sau imagini realizate printr-un soft specializat. In sistemele informatice, descrierea unei imagini se poate realiza in mod: bitmap sau vectorial
In modul bitmap imaginea este realizata punct cu punct. Dimensiunea si rezolutia sunt stabilite de la inceput. In acest caz este dificil sa se modifice marimea fara a se altera calitatea imagini. Preluarea unei imagini cu un scanner genereaza imagini bitmap. Photoshop, SuperPaint, XV reprezinta produse soft capabile sa creeze si sa returneze imagini bitmap. GIF este un format pentru reprezentarea imaginilor in modul bitmap.
In modul vectorial, fiecare forma, fiecare curba este definita printr-o formula matematica. O astfel de reprezentare are avantajul ca desenele pot fi usor redimensionate sau deformate. Fisierele in care sunt inregistrate imaginile vectoriale sunt de capacitate mai mica decat cele cu imagini bitmap. Cele mai cunoscute tipuri de imagini vectoriale sunt cele PostScript Illustrator fiind softul pentru desen). Daca se doreste utilizarea imaginilor PostScript in paginile Web, pentru afisarea lor este necesara conversia in modul bitmap.
Imaginile on-line sunt specificate prin tag-ul IMG
<IMG SRC='nume img.gif' ALIGN=a HSPACE=n1 VSPACE=n2 WIDTH=l HEIGHT=i BORDER=n3>
Atributul SRC indica URL-ul imaginii care se va insera in document. Imaginile se pot alinia cu ajutorul atributului ALIGN, care poate lua valorile: TOP MIDDLE BOTTOM LEFT RIGHT. Incadrarea si dimensionarea imaginilor se face prin atributele HSPACE (spatiu orizontal), VSPACE (spatiu vertical), BORDER (cadru), WIDTH (latimea) si HEIGHT (inaltimea).
O imagine poate fi un punct de legatura catre alte informatii. In acest caz se utilizeaza sintaxa:
In contextul JavaScript, imaginile sunt considerate ca obiecte si sunt inregistrate intr-un tabel, putand fi accesate sub forma: document.images i . Numarul de imagini memorate in acest tabel este dat de: document.images.length
Proprietatile obiectului imagine sunt: SRC HEIGHT WIDTH si COMPLETE, o valoare logica care exprima starea de afisare a imaginii: totala sau partiala.
Copyright © 2024 - Toate drepturile rezervate
