Sunteți pe pagina 1din 43

UNIVERSITATEA TRANSILVANIA BRAOV FACULTATEA DE TIINE SPECIALIZAREA INFORMATIC

LUCRARE DE GRADUL I

TEHNOLOGII WEB MODERNE N PROGRAMA DE LICEU

2012

CUPRINSUL LUCRRII

Introducere Capitolul I : Elemente de baz ale unui document HTML Crearea legturilor - Adugarea de imagini grafice pentru cosmetizareapaginilor Tabele i cadre Capitolul II: Elemente multimedia Java Script Capitolul III: Reguli CSS ( foi de stil n cascad) Capitolul IV: Aspecte urmrite n procesul de predare nvare evaluare a TIC Concluzii Bibliografie Anexe

INTRODUCERE Una din cele mai mari realizri n direcia adaptrii la mentalitile umane a fost programul WWW sau WEB (de la WORLD WIDE WEB-o pnza de pianjen ct lumea de larg ), un program care realizeaz legturi, prin Internet, ntre informaii de tipuri diferite, rspndite n lumea ntreag. Programul WEB se bazeaz pe tehnologia hipertext sau, mai precis, hipermedia, pentru c poate manipula i grafica i sunete, n afar de text. Ideea original de hipertext a fost folosit pentru prima dat de Bush n iulie 1945. El descrie un dispozitiv numit memex (memory extension), un instrument prin care s ajute mintea uman s organizeze informaiile printr-o metod care s profite de natura asociativ a gndirii umane. n 1965 Ted Nelson a inventat termenul hipertext, ca s descrie un text care corespundea modelului lui Bush, n sensul c nu trebuia s fie secvenial. n loc de a citi documentul n secven, de la nceput la sfrit, ntr-un sistem hipertext cititorul poate sri ctre subiectele care l intereseaz, selectnd un cuvnt sau o fraz numite ancore, marcate n cadrul textului prin subliniere, prin reprezentare cu intensitate sporit sau n video invers. Prin aceasta se activeaz o legtur ctre un alt loc din cadrul documentului sau ctre o alt locaie din Internet unde se afl documentul corespunztor. Multitudinea de legturi n interiorul i ntre documente formeaz un pienjeni numit n englez WEB. John December n [2] i imagineaz sistemul WEB ca o bibliotec n care au fost scoase cotoarele tuturor crilor i unde nu exist gravitaie, permind foilor s pluteasc liber. Dac paginile ar putea fi legate ntre ele prin fire subiri, s-ar putea obine ceva asemntor modului n care sunt aranjate paginile de hipertext. Paginile plutesc liber, aa c utilizatorii pot folosi o lucrare ncepnd cu orice pagin i pot ajunge la alte lucrri mergnd pe firele care le leag. Facilitatea principal a hipertextului este conceptul legturilor suportat de maina n interiorul documentelor i ntre documente. Ea reprezint aceast capacitate de legare care conduce ctre o organizare neliniar a documentelor. n afara lumii academice, datorit implementrii facilitilor de tip hipertext n produse MS, Windows, Help, profesionitii sistemelor informaionale sunt de prere c hipertextul este o alt cale pentru interfaa utilizator. Totui hipertextul este un hibrid care depete frontierele tradiionale. El este o metod de organizare de baz de date, permind o cale original de acces direct i de management a datelor. Spre deosebire de baza de date tradiional, o baz de date hipertext nu are o structur regular. Utilizatorul este liber s exploateze i s asimileze informaiile n diferite moduri. Hipertextul este de asemenea o schem de reprezentare, un

tip de reea semantic care amestec materialul textual cu noi procese formale i mecanizate. Pentru a crea o pagina WEB proprie e nevoie de un plan bine gndit, referitor la coninutul paginii, de fapt al tuturor paginilor, cu legturile dintre ele, cu fotografiile, textele i tabelele pe care le cuprinde fiecare. Pentru a realiza o pagin WEB se pot folosi instrumente software i hardware, un editor de text, de exemplu Notepad din Windows i Netscape Navigator Gold i Microsoft Front Page. Paginile WEB se scriu folosind un limbaj special, numit limbaj de marcare hipertext HTML Faciliti deosebite se pot aduce prin ncorporarea n textul HTML a unor secvene scrise n limbaje de programare speciale, precum JavaScript, Java sau Visual Basic. Limbajul de marcare hipertext -HTML (Hypertext Markup Language) este limbajul specific pentru reeaua WORLD WIDE WEB. Inventatorul acestui limbaj este Tim Bernes Lee. Cnd se deschide pagin Web, navigatorul cu care se lucreaz acceseaz, de fapt, un document scris n limbajul HTML. Un astfel de document conine diferite formatri de text sau imagini, precum i hiperlegturi ctre alte documente Web sau chiar n cadrul documentului respectiv.

CAPITOLUL I

ELEMENTE DE BAZ ALE UNI DOCUMENT HTML Crearea documentelor HTML Mecanismul folosit pentru crearea paginilor WEB de pe Internet este HTML, Hypertext Markup Language. HTML este un sublimbaj al limbajului SGML Standard Generalized Markup Language, un set de coduri folosite pentru formatarea documentelor, care n 1986 a devenit standard ISO. Limbajul HTML, pe care unii nici nu-l consider limbaj, este alctuit dintr-o serie de comenzi ce descriu modul n care este structurat de un document. Astfel utilizatorul poate s defineasc pari dintr-un document, fr formatarea lui, n aa fel nct browser sau navigatorul poate formata documentul pentru a se potrivi caracteristicilor de afiare ale monitorului folosit. Browserul (navigatorul) este un program de rsfoire a documentului care interpreteaz i afieaz documentele HTML. Printre cele mai cunoscute programe de navigare n Internet sunt: Mosaic, Netscape, HotJava, Internet Explorer. Cu ajutorul HTML se realizeaz: - documente independente de platform - legturi la alte documente de pe reea - inserii de grafic, sunet sau video - legturi la alte resurse adiionale de pe reea - rsfoirea documentelor ntr-o ordine i un ritm propriu fiecrui citit Un document HTML se creeaz n orice editor, cum ar fi Notepad i Write n Windows95 sau Emacs i Vi n Unix, i se salveaz cu extensia .htm sau .html. Elemente de baz ale unui document HTML

Un document HTML este format din textul propriu-zis i din etichetele care marcheaz structura documentului, numit tag-uri. Etichetele sunt delimitate de parantezele unghiulare <si>. O parte din aceste etichete apar ntotdeauna n pereche, cu o etichet de nceput i una de sfrit numele etichetei de sfrit fiind identic cu al celei de nceput cu excepia faptului c este precedat de simbolul /. De exemplu titlul unui document HTML se indic sub forma: < TITLE >
5

textul titlului </ TITLE> Numele titlului indicat prin caractere cursive drept textul titlului (el trebuie nlocuit de utilizator ) va apare pe linia de titlu a browserului. Exist i etichete care nu au nevoie de o etichet corespondent de sfrit, de exemplu paragrafele pot fi identificate cu eticheta <P>. Anumite etichete au atribute care se scriu n tag-ul de nceput, ntre parantezele unghiulare ale acestuia sub forma : <nume _tag atribut 1= valoare1,atribut2=valoare2,> Vom prezenta n continuare un exemplu de document HTML simplu: <HTML> <HEAD> <TITLE> Primul document HTML </TITLE> </HEAD> <BODY> Acesta este coninutul documentului </BODY> </HTML> Un browser va interpreta etichetele i textul, afind textul fr paranteze unghiulare n modul urmtor, unde nceputul i sfritul documentului le vom marca prin si pentru a deosebi documentul afiat de restul textului : Primul document HTML Acesta este coninutul documentului Orice document HTML ncepe cu tag-ul <HTML> a crui pereche </HTML> se afl la sfritul documentului i care informeaz browserul care are de a face cu un document HTML (un fiier cu extensia. HTML sau .HTM) Titlul unui document HTML se descrie ntre tag-urile pereche <TITLE> si </TITLE> i reprezint un identificator al documentului care apare tot timpul afiat pe ecran. Tag-urile pereche <HEAD>,</HEAD>si<BODY>,</BODY>separ documentele ntr-o parte informativ i textul propiu-zis, aceast separare neschimbnd forma documentelor, dar avnd o utilitate special. De exemplu n interiorul tag-ului <BODY> se poate preciza prin atributul BACKGROUND=imagine, un fundal grafic pentru text. Limbajul HTML permite sase niveluri de titluri care se indic prin tag-urile perechi<HI> si </HI> pentru i lund valorile de la 1 la 6.
6

HTML nu ine cont de sfritul de linie (CRLF) de spaii multiple sau de taburi. Dac n text dorim s introducem o linie orizontal se poate folosi tag-ul <HR> iar dac dorim s trecem la o linie nou se folosete tag-ul <BR>. Atunci cnd se insereaz o linie orizontal se poate indica i dimensiunea liniei folosind atributul SIZE. nceputul unui paragraf se indica prin tag-ul <P>, sfritul paragrafului </P> fiind opional. Tag-ul P admite i opiunea ALING=left sau center sau right. Fr folosirea tagului <P> ntregul text este considerat un singur paragraf. Oriunde ntr-un document HTML se pot introduce comentarii pe care browserul nu le afieaz sub forma: <!--comentariu>. Informaii uzuale care se plaseaz la sfrit De regul anumite informaii, cum ar fi titlul, n antetul fiecrui document WEB, anumite informaii sunt plasate de obicei la sfritul documentului. n WEB gsim, la sfritul documentului, informaii de copyright i datele de contact ale autorului paginii. Marcajul utilizat pentru asemenea informaii de contact este de obicei <ADDRESS>. Urmtorul exemplu ilustreaz acest control adugat fiierului scrisoare.html: <HTML> <HEAD> <TITLE>prima scrisoare</TITLE> </HEAD> <BODY> Mihai Ptru<BR> Inginer electronist <P> Domnule Director, <P> n urma anunului Dumneavoastr aprut n ziarul Curierul naional din 11 apr.1994, v trimit alturi un curriculum vitae. <P> Cu respect, <P> Mihai Ptru <ADDRESS> Str.Izvor nr.12,sect 5, cod 75114 Bucureti MihaiPatru@yahoo.com

Materialul de tip adres este afiat cu caractere italice,ceea ce poate fi destul de atractiv n anumite pagini Web. Exemplul arat astfel: Mihai Ptru Inginer electronist Domnule Director, n urma anunului Dumneavoastr aprut n ziarul Curierul naional din 11 apr.1994, v trimit alturi un curriculum vitae. Cu respect, Mihai Ptru Str.Izvor nr.12,sect 5, cod 75114 Bucureti MihaiPatru@yahoo.com

Definirea antetelor de seciune Dac pagina trebuie organizat n seciuni sau chiar n subseciuni, atunci diversele niveluri de marcaje de formatare a subtitlurilor rezolv aceast situaie. Fiecare nivel de subtitlu are un control de deschidere i unul de nchidere. Marcajul pentru nivelul cel mai de sus este <H1>; cel mai de jos este <H6>. <HTML> <HEAD> <TITLE>poezie</TITLE> </HEAD> <BODY> Iat dou strofe din Luceafrul de Eminescu. <H1>A fost o dat ca-n poveti, </H1> <H2>A fost ca niciodat, </H2> <H2>Din rude mari mprteti, </H2> <H3>O prea frumoas fat. </H3> <H1>i era una la prini </H1> <H2>i mndr-n toate cele, </H2> <H2>Cum e Fecioara ntre sfini </H2> <H3>i luna ntre stele. </H3>
8

<ADDRESS> Aceast poezie o gsii n Mihai Eminescu LUCEAFRUL <ADDRESS> <BODY> <HTML> Exemplul arat astfel:
Iat dou strofe din Luceafrul de Eminescu.

A fost o dat ca-n poveti,


A fost ca niciodat, Din rude mari mprteti,
O prea frumoas fat.

i era una la prini


i mndr-n toate cele, Cum e Fecioara ntre sfini
i luna ntre stele. Aceast poezie o gsii n Mihai Eminescu LUCEAFRUL Atunci cnd exemplul de mai sus este vizualizat ntr-un program de explorare, diversele subtitluri apar afiate cu diverse dimensiuni, iar informaia care nu face parte din subtitluri apare afiat cu un font de tip roman, fr caractere ngroate. Unul din lucrurile care trebuie inute minte despre HTML este c fonturile, dimensiunile i efectele propriu-zise din prezentarea final pot fi modificate de utilizatori pe baza preferinelor pe care acetia le definesc n programele lor de explorare. Rigla orizontal Un control HTML foarte util pentru organizarea vizual a documentului este marcajul de rigl orizontal: <HR>. Plasat oriunde ntr-un document WEB, acest marcaj produce o linie subire orizontal afiat pe ntreaga lime a paginii. O astfel de linie e necesar pentru a separa diferite seciuni din document. De exemplu, muli adaug o astfel de linie la sfritul textului lor i nainte de informaiile <ADDRESS> . Poi stabili grosimea liniei, precum i lungimea ei ( procentul din limea ferestrei programului de navigare). Exemplul urmtor:
9

<HR SIZE 2 WIDTH= 50%> Va afia linia: Exemplul urmtor ilustreaz pagina cu diferite informaii, n care s-au adugat controale <HR>. <HTML> <HEAD> <TITLE>scrisoare</TITLE> </HEAD> <BODY> Dortung 5 mai 1995 <HR> <H1>Dragii mei,</H1> <H2>Am ajuns n D.,un orel din Nord,frumos,vechi,dar. cam ploios. Drept urmare mi-am cumprat n sfrit o umbrel n felii colorate.</H2> <HR> Acum suntem ntr-o cafenea. n jurul nostru sunt numai doamne n vrst care i beau linitite ceaiul de la ora 5 <H2> Cu drag, Elena</H2> n acest exemplu se poate vedea linia orizontal de mai multe ori: Dortung 5 mai 1995

Dragii mei,
Am ajuns n D.,un orel din Nord,frumos,vechi,dar. cam ploios. Drept urmare mi-am cumprat n sfrit o umbrel n felii colorate.

10

Acum suntem ntr-o cafenea. n jurul nostru sunt numai doamne n vrst care i beau linitite ceaiul de la ora 5

Cu drag, Elena
Formatarea textului Am spus nainte c limbajul HTML nu ine cont de spaii, taburi sau sfrituri de linie. Exist ns situaii cnd poate ine cont de acestea i anume folosind tag-ul<PRE> prin care se indic preformatarea textului. Pentru introducerea citatelor se folosete tag-ul pereche <BLOCKQUOTE> i </BLOCKQUOTE> ntre care se introduce citatul. Caracterele, cuvintele sau frazele pot fi afiate n stiluri diferite folosind formatarea caracterelor. Formatarea poate fi fizic sau logic. Stilurile logice marcheaz textul n concordan cu semnificaiile lor, pe cnd stilurile fizice indic nfiarea specific unei seciuni. De exemplu, dac vrem s scriem un cuvnt aplecat (italic), putem fie s marcm respectivul cuvnt ca o definiie, fie s folosim o etichet care s specifice exact acest lucru. Stilurile logice <DFN> Se folosete pentru un cuvnt ce urmeaz a fi definit. De obicei se afieaz cu caractere italice. (Exemplu: Internet Explorer este un program de explorare WEB). <EM> Se folosete pentru accenturi. De obicei se afieaz cu caractere italice. (Exemplu: Accesul copiilor n aceast pagin WEB este interzis!) <CITE> Indicat a fi folosit pentru nume de cri, filme etc. De obicei se afieaz cu caractere italice. (Exemplu: Crearea paginilor WEB) <CODE> Aceast etichet este destinat textelor de programe pentru calculator. Se afieaz ntr-un font cu grosime fix (fiierul (stdio.h)) <KBD> Aceast etichet este utilizat pentru intrrile de la tastatur i, de obicei se afieaz cu font de grosime fix. (Dai comanda password pentru a schimba parola)
11

<SAMP> Se folosete pentru o secven de caractere. Se afieaz sub forma unui font de grosime fix. <STRONG> Marcheaz citate importante. De obicei cuvintele se afieaz ngroat (bold). (NOTA: verificai-v cutia potal) <VAR> Atunci cnd se folosete o variabil (un nume generic), ce ulterior trebuie nlocuit cu o informaie concret. (md nume director creeaz un subdirector. Stiluri fizice Formatarea fizic este determinat de utilizator i browserul va afia ceea ce utilizatorul i-a indicat. Pentru italic se poate folosi urmtoarea variant: <I>text</I>- afieaz textul n italic (cursiv) adic cu litere nclinate. Pentru alte formatri se pot folosi urmtoarele variante: <B>text</B> afieaz textul ngroat (bold) <U>text </U> afieaz textul subliniat <SUB>text</SUB>mut textul mai jos dect linia de baz a documentului i trece la un font mai mic (aplicarea stilului de indice inferior) <SUP>text</SUP>mut textul mai sus dect linia de baz a documentului i trece la un font mai mic(aplic stilul de indice superior) <SMALL>text</SMALL>afieaz textul cu litere mai mici dect ale documentului nconjurtor. Dimensiunea fontului se poate stabili prin: <FONT SIZE=n>text</FONT SIZE>unde n va indica ce dimensiune se va folosi pentru afiarea textului (n=1,2,3,4,5,6,7cu semn sau fr) Stilurile logice ale caracterului sunt configurate de browser. Acestea se pot defini prin: <EM>text</EM>- afieaz textul accentuat <STRONG>text</STRONG>afieaz textul puternic accentuat <CITE>text</CITE>- afieaz nume de cri, autori <VAR>text</VAR>- indic o variabil <DFN>text</DFN>- afieaz o definiie Secvene escape Aceste secvene au un rol dublu. Pe de o parte de a permite utilizarea caracterelor speciale, cum ar fi parantezele unghiulare,iar pe de alt parte pentru a afia caracterele ASCII extinse(cu diacritice). De aceea, acestea nu

12

vor aprea n text aa cum sunt. Apostroful poate fi scris prin dublarea sau prin folosirea secvenei escape &quot. Din setul de caractere ASCII exist trei caractere speciale, care nu pot fi folosite ca atare n documentele HTML: <(paranteza ascuit stnga), >(paranteza ascuit dreapta) i &(ampersand). Parantezele ascuite sunt folosite pentru indicarea tag-urilor, iar ampersandul este folosit pentru transformarea caracterelor speciale n caractere afiabile. De exemplu: &lt=< &gt=> &amp=& Exist i secvene escape pentru unele caractere cu accente(semne diacritice), cum ar fi: &ouml:pentru un o mic umlaut:o &ntilde:pentru un n mic cu tilda: &Egrave:pentru un E mare cu accent grav:E Spre deosebire de restul limbajului HTML, secvenele escape fac diferen ntre caractere minuscule i cele majuscule. De exemplu, nu poi folosi &LT;n loc de &lt. S considerm urmtorul document HTML: <HEAD> <TITLE>Exemplul 2</TITLE> </HEAD> <PRE> <B><FONT SIZE=5> Acesta este al doilea exemplu de document HTML </PRE> </B></FONT><P><HR ALIGN=LEFT WIDTH=87% SIZE=1<>/P> <B><FONT SIZE=5><PRE></PRE> </B></FONT> <FONT SIZE=4> <P> n acest exemplu se vor folosi<B>cuvinte</B>ngroate sau<I>cuvinte</I>scrise cu caracter cursiv. </P> </FONT><P><HR ALIGN=LEFT WIDTH=87% SIZE=1></P> <FONT SIZE=4> <P>variabile folosite sunt <VAR> a</VAR> i<VAR> b </VAR> iar citatul este din <CITE>Luceafrul</CITE>al lui <CITE>Eminescu</CITE>:</P> <BLOCKQUOTE>A fost o dat ca-n poveti,</BLOCKQUOTE> <BLOCKQUOTE>A fost ca niciodat,</BLOCKQUOTE> <BLOCKQUOTE>Din rude mari mprteti,</BLOCKQUOTE>
13

<BLOCKQUOTE>O prea frumoasa fat.</BLOCKQUOTE> <BLOCKQUOTE><HR ALIGN=LEFTWIDTH=87%SIZE=1></BLOCKQUOTE> </FONT></BODY></HTML>

Acesta va fi afiat de browser sub forma: Acesta este al doilea exemplu de document HTML . n acest exemplu se vor folosi cuvinte ngroate sau Cuvintele scrise cu caractere cursive. . Variabilele folosite sunt a si b iar citatul este din Luceafrul al lui Eminescu : A fost o dat ca-n poveti, A fost ca nici o dat, Din rude mari mprteti, O prea frumoas fat. . Un mic exemplu cu alte stiluri de scris: <HTML> <BODY BGCOLOR=white> <font size=6>font</font><font size=7>MANIA!</font> <HR> Cu ajutorul programului <font size=+1> Netscape <B>Navigator </B> </font> putem scrie cum dorim<p> <font size=6>F</font><font size=5>ormal</font> <font size=6>H</font><font size=5>eaders</font> <p>UN NOU STIL DE SCRIS <font size=4>C</font><font size=5>O</font><font size=6>N</font> <font size=7>T</font><font size=6>R</font><font size=5>O</font> <font size=4>L</font> </BODY> </HTML>

14

fontMANIA!
Cu ajutorul programului

Netscape Navigator putem scrie cum dorim:

Formal Headers
UN NOU STIL DE SCRIS

CO

N TRO L

15

CREAREA LEGTURILOR Una dintre realizrile HTML este i abilitatea de a lega pri dintr-un text sau imagini cu alte documente sau imagini aflate pe calculatorul local sau pe alt calculator din reeaua Internet. Aceste legturi sunt prezentate de browser subliniate sau supraluminate sau n video invers pentru ca utilizatorul s le poat identifica cu uurin. Tag-ul folosit pentru legtur este <A> i se numete i ancora. Pentru a include o ancora, se procedeaz astfel: - se ncepe ancora cu <A(se pune un spaiu dup A) - se specific documentul ctre care se face legtura, introducnd parametrul HREF=nume-fiier, urmat de o parantez unghiular nchis(>); - se va introduce textul care va servi drept legtur hipertext n documentul curent; - se introduce eticheta de sfrit de ancora:</A> Iat un exemplu de referin hipertext ntr-un fiier numit Romnia.html: <A HREF=Moldova.html>Moldova</A> Aceast intrare din document va face s fie afiat textul Moldova,executnd clic pe el vei fi trimis la fiierul HTML cu numele Moldova.html, din acelai director ca i fiierul curent (Romnia.html) Legtura poate fi de dou feluri: - de numire a unui punct din document, care va putea fi apoi referit; el se specific prin atributul NAME - de referin la un alt document folosind atributul HREF S considerm, de exemplu, textul din exemplul 2 si s adugm strofa a doua din Luceafrul cu posibilitatea de a trece direct la strofa a doua. Documentul HTML va fi atunci: <HTML> <HEAD> <TITLE>exemplul 3</TITLE> </HEAD> <BODY> <PRE> <B><FONT SIZE=5>

16

Acesta este al treilea exemplu de document HTML </PRE> </B><FONT><FONT SIZE=4><P>n acest exemplu se vor folosi <B>cuvinte</B> ngroate sau <I> cuvinte</I> scrise cu caractere cursive. </P> <P>Variabilele folosite sunt <VAR>a </VAR>i <VAR>b </VAR>iar citatul este din <<CITE>Luceafrul</CITE> al lui <CITE>Eminescu </CITE> (putei vedea strofa ><A HREF=#a_doua_legtur>nti </A>sau pe cea de a </A doua</A>!):</P> </FONT><P><HR></P> <FONT SIZE=4> <A NAME= prima_legtur > I </A> <BLOCKQUOTE>A fost o dat ca-n poveti, </BLOCKQUOTE> <BLOCKQUOTE>A fost ca niciodat, </BLOCKQUOTE> <BLOCKQUOTE>Din rude mari mprteti, </BLOCKQUOTE> <BLOCKQUOTE>O prea frumoas fat. </BLOCKQUOTE> <P> <A NAME=a_doua_legtur> II </A> <BLOCKQUOTE>i era una la prini </BLOCKQUOTE> <BLOCKQUOTE>i mndr-n toate cele, </BLOCKQUOTE> <BLOCKQUOTE>Cum e Fecioara ntre sfini </BLOCKQUOTE> <BLOCKQUOTE>i luna ntre stele. </BLOCKQUOTE> </FONT></BODY> </HTML> Browserul va afia documentul sub forma: Acesta este al treilea exemplu de document: HTML n acest exemplu se vor folosi cuvinte ngroate sau cuvinte scrise cu caractere cursive. Variabilele folosite sunt a i b iar citatul este din Luceafrul al lui Eminescu (putei vedea strofa I sau pe cea de-a II !): . I A fost odat ca-n poveti A fost ca nici o dat, Din rude mari mprteti O prea frumoas fat II

17

i era una la prini i mndr-n toate cele, Cum e Fecioara ntre sfini i luna ntre stele. Dac legtura este cu un document exem.html aflat n directorul /doc/exem.html atunci atributul va aprea n HREF sub forma <A HREF=/doc/exem.html>text</A> Text apare pe ecranul celui care face legtura ca o ancor spre documentul exem.html. Exist i posibilitatea realizrii unor legturi absolute specificnd URL-ul (Uniform Resource Locator este adresa unui document pe World Wide Web) documentului cu care se efectueaz legtura: <A HREF=http:/www.info.unitbv.ro/catedra.html>text</A> Cile relative n comparaie cu cile absolute Se poate face legturi ctre documente din alt director, prin specificarea unei ci relative. De exemplu, dac vrem o legtura ctre fiierul Bacu.html, aflat n subdirectorul Moldova, va trebui s scriem: <A HREF=Moldova/Bacu.html>judeul Bacu</A> Am avut de-a face cu o legtura relativ, deoarece sa specificat calea ctre fiierul referit, relativ la locaia fiierului curent. De asemenea, se poate folosi numele cii complete (URL-ul complet) a fiierului referit, dar legturile relative sunt mult mai eficiente n accesarea unui server. n general, e bine s utilizm legturile relative, deoarece: - e mai uor s mui un grup de documente ntr-o alt locaie(cile relative se vor pstra). - conexiunea la server e mai eficient. - ai mai puin de scris Uneori, nsa, legturile absolute trebuie neaprat utilizate - de exemplu, atunci cnd nu ai o referin direct ctre un anumit document, cum ar fi o adres oarecare de pe alt server din Internet (un URL). Astfel, de exemplu, pentru a face o referire la serverul de cutare Yahoo, va trebui ca n documentul tu s ai o legtur de gen <A HREF=http://www.yahoo.com>Serverul Yahoo</A>

18

Crearea listelor
n documentele HTML se pot descrie liste nenumerotate, numerotate sau descriptive(de definiie), adic liste ale crei elemente nu necesit separarea prin paragrafe. n funcie de tipul de list se folosesc urmtoarele tag-uri: Liste nenumerotate <UL> - realizeaz deschiderea listei nenumerotate <LI> - definete fiecare element al listei </UL> - nchide lista Iat un exemplu simplu cu trei elemente n list: <UL> <LI> mere <LI> pere <LI>portocale </UL> rezultatul este: mere pere portocale Liste numerotate <OL> - realizeaz deschiderea listei numerotate <LI> - definete fiecare element al listei </OL> - nchide lista Urmtorul cod HTML: <OL> <LI> mere <LI> pere <LI>portocale </OL> produce urmtorul rezultat formatat: 1. mere 2. pere 3. portocale

19

Liste descriptive Prin listele descriptive(de definiie) se descriu termeni scuri dar cu definiii lungi. Structura unei liste descriptive este urmtoarea: <DL> - realizeaz deschiderea listei descriptive <DT>- definete numele termenilor listei <DD>- realizeaz descrierea termenilor listei </DL>- nchide lista n general, programele de navigare formateaz definiiile pe un rnd nou. Iat un exemplu: <DL> < DT>HTML <DD>HTML ,Limbajul de marcare hipertext, este folosit pentru descrierea documentelor din Word Wide Web. <DT>WEB <DD>WEB vine de la Word Wide Web, pnza de pianjen mondial </DL> Rezultatul va fi: HTML HTML ,Limbajul de marcare hipertext, este folosit pentru descrierea documentelor din Word Wide Web. WEB WEB vine de la Word Wide Web, pnza de pianjen mondial Intrrile DT si DD pot conine mai multe paragrafe, alte liste sau alte informaii de descriere. Liste imbricate Dac o list conine la rndul ei alte liste rezultatul se numete list imbricat. Un exemplu simplu de liste care sunt cuprinse una ntr-alta: <UL> <LI> Fructe de var <UL>
20

<LI> cpuni <LI> viine <LI> ciree </UL> <OL> Fructe de toamn <UL> <LI> mere <LI>struguri </UL> </UL> Codul de mai sus va avea rezultatul: Fructe de var Cpuni Viine Ciree Fructe de toamn 1. Mere 2. Struguri n exemplul 4 vom folosi toate cele trei tipuri de liste printre care va fi i o list numerotat imbricat. Documentul HTML este de forma : <HTML> <HEAD> <TLITLE> Exemplul 4 </TITLE> </HEAD> <BODY> <P> Aceasta este o lista <B> nenumerotat </B> a disciplinelor din anul I <UL> <LI>analiz <LI>geometrie <LI>algebr </UL> <P> Aceasta este o lista <B> nenumerotat </B> a disciplinelor pe ani de studii <OL> <LI>Anul I <OL> <LI>Logic si programare
21

<LI>Algoritmic <LI>Bazele informaticii </OL> <LI>Anul II <OL> <LI>Limbaje formale <LI>Bazele informaticii <LI>Teoria grafurilor </OL> <LI>Anul III <OL> <LI>Structuri de date <LI>Tehnici de programare </OL> <LI>Anul IV <OL> <LI>Tehnici de compilare <LI>Inteligena artificial <LI>Cercetri operaionale </OL> </OL> <P> Aceasta este o list <B>descriptiv </B> a noiunilor iniiale n limbajul HTML <DL>URL-ul <DT>Uniform Resource Locator este adresa unui document pe World Wide Web <DD>tag <DT>eticheta HTML ce determin att structura i prezentarea documentului <DD>MOSAIC <DT> Browser pentru WEB <DD> Hyperlink <DT>Legtura ntr-un document hipermedia </DL> </BODY> </HTML> Documentul afiat de browser va fi de forma:

22

Aceasta este o list nenumerotat a disciplinelor din anul I Analiz Geometrie Algebr Aceasta este o list numerotat a disciplinelor pe anii de studiu 1. Anul I 1. Logic si programare 2. Algoritmic 3. Bazele informaticii 2. Anul II 1. Limbaje formale 2. Bazele informaticii 3. Teoria grafurilor 3.Anul III 1. Structuri de date 2. Limbaje de asamblare 3. Tehnici de asamblare 4.Anul IV 1. Tehnici de compilare 2. Inteligena artificial 3. Cercetri operaionale Aceasta este o list descriptiv a noiunilor ntlnite n limbajul HTML URLul . Uniform Resource Locator este adresa unui document pe WORLD WIDE WEB tag eticheta HTML care reprezint coduri ce determin att structura i prezentarea documentului. MOSAIC Browser pentru WEB Hyperlink Legtura ntr-un document hipermedia

23

Se observ c n cazul listelor imbricate browserul decaleaz linia de nceput a elementelor listei interioare spre dreapta pentru a sugera dependena de elementul listei exterioare. Tag-ul LI are dou tipuri de atribute, pe care ns nu toate browserele l au implementate: VALUE=nr, care se folosesc la listele ordonate i indic prin nr valoarea numeric de nceput a primului element din list ( implicit este 1), TYPE=s,unde s poate fi unul din elementele: 1,a,A,i,I, disk, square, circle; TYPE permite fixarea stilului pentru buline sau numerotri i anume: 1-numere arabe (implicit 1) a-litere mici A-litere mari i-numere romane mici (i,ii,iii,iv,etc) I-numere romane mari ( I,II,III,IV,etc) disk- cerc plin (implicit pentru liste neordonate) square - ptrat plin circle - cerc gol Text preformatat Se poate folosi eticheta <PRE> pentru a genera text afiat ntr-un font de grosime fix. Aceast etichet va marca i spaiile, trecerile la rnd nou, taburile semnificative. Textele preformatate pot fi folosite n listinguri de programe, dar i pentru alte locuri. De exemplu, urmtoarele linii: <PRE> md spital cd spital md aduli md copii cd..</PRE> vor fi afiate astfel: md spital cd spital md aduli md copii cd.. Marcajul <PRE> poate fi folosit cu un atribut opional (WIDTH), prin care se precizeaz numrul maxim de caractere de pe o linie. WIDTH indic programului de navigare s aleag un font i mod de aliniere a textului adecvate. n seciunile <PRE> pot fi folosite hiperlegturi.
24

Deoarece simbolurile <,> i & au semnificaii speciale n HTML, va trebui s folosim secvenele escape corespunztoare( &lt; &gt; &amp)pentru a introduce aceste caractere. Pentru a include citate interminabile - ntr-un bloc separat de pe ecran se Folosete eticheta <BLOCKQUOTE>. Multe navigatoare schimb marginea unui bloc de citat pentru a-l separa de textul nconjurtor.

Adugarea de imagini grafice pentru cosmetizarea paginilor Mai multe programe de exploatare Web pot afia imagini lng text (inline), care sunt n format JPEG, GIF, sau Xbitmap (XBM), Portable Network Graphic (PNG). Fiecare imagine consum timp pentru a putea fi decodificat i afiat pe ecran, fapt ce ncetinete mult procesul de afiare a documentului. Pentru o imagine inline, se introduce: <IMG SRC=nume_imagine> unde nume_imagine este URL-ul fiierului imagine. Sintaxa pentru astfel de adrese URL este identic cu cea utilizat pentru alte ancore HREF. Dac imaginea este un fiier GIF, atunci nume_imagine trebuie s aib extensia .gif, iar dac este un fiier JPEG, va avea una din extensiile .jpg sau .jpeg. Atributele de mrime a imaginii Va trebui s se includ dou atribute n etichetele <IMG> pentru a indica programului navigator care este mrimea imaginii ce va fi preluat alturi de text. Aceste atribute se numesc HEIGHT i WIDTH i permit programului de navigare s stabileasc spaiul adecvat (in pixeli) pentru imagini. (Mrimea n pixeli poate fi aflat din programul de procesare a imaginii, de exemplu Paint Shop Pro sau Adobe Photoshop). Iat un exemplu de utilizare a acestor atribute: <IMG SRC=Eu.gif HEIGHT=100 WIDTH=65> Alinierea imaginilor Exist diferite opiuni pentru afiarea imaginilor. Ele pot fi aranjate separat de text, la stnga sau la dreapta textului, sau chiar pe centru.

25

n mod prestabilit, partea de jos a unei imagini este aliniat cu textul care urmeaz. Se pot alinia imaginile cu partea superioar, sau cu centrul paragrafului, folosind atributele de aliniere: ALIGN=TOP sau ALIGN=CENTER. De exemplu: <IMG SRC = Imagine.gif ALIGN=CENTER> Imagini fr text Pentru a afia o imagine fr un text asociat se plaseaz ntr-un paragraf separat i se folosete atributul ALIGN, pentru a centra imaginea sau a o aeza n partea din dreapta a ferestrei, ca n exemplul urmtor: <p ALIGN=CENTER> <IMG SRC = Imagine.gif> </P> Culoare de fundal n mod prestabilit, programele de navigare afieaz textul n negru pe un fundal gri elemente care pot fi schimbate. Se poate schimba culoarea textului, a legturilor (care n mod prestabilit este albastru), a legturilor vizitate (violet) i a legturilor active, folosind atribute ale etichetei <BODY>. De exemplu, introducnd: <BODY BGCOLOR= #000000 TEXT=#FFFFFF LINK=#9690CC> se va crea o fereastr cu fundalul negru (BGCOLOR), textul alb si hiperlegturile argintii (LINK). Imagini, sunete i animaii externe O imagine care se deschide ntr-un document separat, cnd un utilizator activeaz o legtur format dintr-un cuvnt sau o variant inline n miniatur a imaginii respective, se numete imagine extern i mecanismul poate fi folosit pentru a nu ncetini procesul de ncrcare a paginii WEB prin inserarea unor imagini prea mari lng text (inline). Pentru a include o referin la o imagine extern, se introduce: <A HREF=ImagineMare.gif>ancora de legtur</A> sau se poate folosi o imagine mai mic pentru legtura ctre copia sa mai mare: <A HREF=ImagineMare.gif> <IMG SRC=ImagineMica.gif></A>
26

Cititorul paginii WEB va vedea imaginea mic i executnd clic pe ea, va deschide copia mare.

Tabele i cadre
Tabelele reprezint o extensie important a limbajului HTML, avndui originea n laboratoarele de dezvoltare ale corporaiei Netscape Comunications. Dei tabelele ofer o mulime de posibiliti interesante,au si un dezavantaj:sunt destul de greu de construit. Trebuie s specificai parametrii tabelului, apoi parametrii fiecrei linii iar, n final, fiecare celul trebuie nconjurat de marcajele <TD></TD>date de tabel. Iat un exemplu simplu de tabel: <TITLE>Primul tabel</TITLE> <BODY BGCOLOR=white> <B>Orarul clasei</B> <TABLE BORDER=1> <TR> <TD>Luni</TD> <TD>Mari</TD> <TD>Miercuri</TD> <TD>Joi</TD> <TD>Vineri</TD> </TR> </TABLE> </BODY> Acest cod plaseaz toate datele pe aceeai linie, tabelul arat astfel:

Orarul clasei

Luni

Mari

Miercuri

Joi

Vineri

Dac dorim ca aceeai informaie s fie organizat sub forma unui element pe fiecare rnd(adic linie), codul devine mai complex, datorit delimitatorilor:

27

<TITLE>Tabelul doi</TITLE> <BODY BGCOLOR=white> <B> Orarul clasei </B> <BR> <TABLE BORDER> <TR> <TD>Luni</TD> </TR><TR> <TD>Mari</TD> </TR><TR> <TD>Miercuri</TD> </TR><TR> <TD>Joi</TD> </TR><TR> <TD>Vineri/TD> </TR> </TABLE> </BODY> tabelul arat astfel:

Orarul clasei
Luni Mari Miercuri Joi Vineri Exist mai multe opiuni suplimentare de formatare care ne ajut s nvm cum s exploatm eficient acest set de proprieti ale grupului de marcaje specifice tabelelor. Una din cele mai importante o reprezint controlul culorilor n tabele-mai precis, culoarea de fond a celulelor. Culorile dintr-o anumit celula de date apar n marcajul <TD>ntr-un mod care nu ne surprinde: <TD BGCOLOR=yellow>text pe fond galben</TD> Aceast definiie va genera o celul cu fond galben i textul scris, n mod predefinit, cu negru. Urmrii cum adugarea de culori nvioreaz tabelul precedent: <HTML> <TITLE>Tabelul trei</TITLE>
28

<BODY BGCOLOR=white> <CENTER> <TABLE BORDER=5 WIDTH=50%> <TR> <TD COLSPAN=2 ALIGN=center BGCOLOR=yellow> <FONT SIZE=5>Literatur</FONT></TD> </TR> <TH BGCOLOR=red> Proz </TH><TH BGCOLOR=red> Poezie </TH> </TR> <TR ALIGN=CENTER> <TD>Preda </TD><TD>Eminescu</TD> </TR><TR ALIGN=CENTER> <TD>Slavici</TD><TD>Cobuc</TD> </TR> </TABLE> </CENTER> </CENTER> </BODY> Rezultatul acestei formatri este destul de atractiv, aa cum ilustreaz tabelul: Literatur Proz Preda Slavici Poezie Eminescu Cobuc

Exemplul urmtor ilustreaz atributul ROWSPAN; n acest caz, n celula multi-linie se include o imagine grafic. Graficul, numit POZA.gif, reprezint un text rotit cu 90 n sens trigonometric.Iat sursa: <BODY BGCOLOR=white> <CENTER> <TABLE BORDER=1 CELLPADDING=5> <TR><TD BGCOLOR=blue ROWSPAN=5><IMG SRC=Graphics/POZA.gif></TD> <TD>MTV</TD></TR> <TR><TD>MCM</TD></TR> <TR><TD>PROTV</TD></TR> <TR><TD>ANTENA1</TD></TR> <TR><TD>EUROSPORT</TD></TR>
29

</TABLE> </BODY> Rezultatul, un tabel foarte sofisticat, este ilustrat astfel: PROGRAME DECANALE MTV MCM PROTV ANTENA1 EUROSPORT

Atributul WIDTH ne permite s specificm limea exact a tabelului de pe ecran, indiferent de coninut. O putem specifica fie sub forma unui numr de pixeli, fie ca procent din limea total a ferestrei curente de vizualizare. <TITLE>Tabelul patru</TITLE> <BODY BGCOLOR=white> <B>Canale de programe</B> <TABLE BORDER=1 WIDTH=75%> <TR><TD>MTV</TD></TR> <TR><TD>MCM</TD></TR> <TR><TD>EUROSPORT</TD></TR> <TR><TD>PROTV</TD></TR> </TABLE> Adugarea limii imbunteste formatul tabelului: Canale de program MTV MCM EUROSPORT PROTV

30

Cealalt modalitate de a li tabelul este specificarea unui factor CELLPADDING. Exist doua atribute, CELLPADDING-indic spaiul n pixeli dintre marginea interioar a chenarului unei celule i materialul coninut n celula, pe cnd CELLSPACING se refer la limea liniilor de caroiaj dintre celulele de date. Iat un exemplu de dou tabele, n care sunt specificai cte unul din aceti doi parametri: <TITLE>Tabele si Cadrane</TITLE> <BODY BGCOLOR=white> <B>Canale de tv strine i romneti</B> <TABLE BORDER=1 CELLPADDING=10> <TR><TD>MTV</TD></TR> <TR><TD>MCM</TD></TR> <TR><TD>EUROSPORT</TD></TR> </TABLE> <HR> <TABLE BORDER=1 CELLSPACING=10> <TR><TD>PROTV</TD></TR> <TR><TD>ANTENA1</TD></TR> <TR><TD>TVR1</TD></TR> </TABLE> Canale de tv strine i romneti MTV MCM EUROSPORT PROTV ANTENA1 TVR1 Unii autori de cod HTML utilizeaz tabelele i pentru informaii netabelare. De exemplu, pentru c se pot include imagini n cadrul celulelor unui tabel, unii folosesc un tabel fr margini pentru a crea o imagine alctuit din mai multe pri. Folosind tabele cu margini, n celulele crora se afl imagini, se pot crea, de asemenea, afie interesante.

31

Capitolul II: Elemente multimedia Java Script n interiorul documentului majoritatea browselor pot afia i imagini XBM(X Bitmap) sau GIF ( navigatorul Netscape cunoate i JPEG). Pentru a face legtura cu o imagine extern se foloseste tag-ul : <A HREF =imagine.gif>imagine</A>, iar pentru a include o imagine intern se folosete tag-ul: <IMG SRC=imagine.gif> Fiecare imagine are ns un timp de ncrcare foarte mare, fapt care ncetinete considerabil viteza de afiare a documentului. n documentele HTML se pot introduce i alte elemente multimedia cum ar fi sunete sau animaie, dar vizualizarea lor este dependent de posibilitile browserelor folosite. Tag-urile folosite pentru aceste scopuri sunt: AU, AIFF (pentru sunete), MPEG, MOV (pentru animaie). Umbre i culori pentru rigle Riglele orizontale-produse de marcajul<HR>-sunt utile, folosindu-se atribute suplimentare:SIZE, WIDTH, ALIGN si NONSHADE. Primele trei din aceste opiuni accept valori, iar a treia comut nsi stilul de afiare al riglei. Atributul SIZE ne permite s specificm nlimea liniei orizontale n pixeli;exemplu:<HR SIZE=1> Atributul WIDTH poate fi specificat fie n pixeli absolui, fie n procente din limea ecranului; exemplu:<HR WIDTH=75%>.Dac dorim locul unde s fie plasat linia, folosim opiunea ALIGN ale marcajului <P> , putei specifica alinierea riglei orizontal prin LEFT(la stnga), CENTER (central) si RIGHT (la dreapta). Dac dorim o linie care ocup jumatate din fereastra programului de navigare i este plasat n marginea din stnga, ar trebui s utilizm: <HR WIDTH=50% ALIGN=LEFT>. Pentru o bar solid, se utilizeaz opiunea NOSHADE (fr umbr) care elimin aspectul 3D. Am utilizat aceste opiuni n moduri distractive, ca n exemplul urmtor: <HR WITH=50% NOSHADE ALIGN=left> <CENTER> <FONT SIZE=+2><B> Vizitai aceast piramid!</B></FONT> <HR WITH=50% NOSHADE ALIGN=right>

32

<HR SIZE=3 WIDTH=5%> <HR SIZE=3 WIDTH=10%> <HR SIZE=3 WIDTH=20%> <HR SIZE=3 WIDTH=30%> <HR SIZE=3 WIDTH=40%> <HR SIZE=3 WIDTH=50%> <HR SIZE=3 WIDTH=60%> <HR SIZE=3 WIDTH=100% NOSHADE> Rezultatul este urmtorul:

Vizitai aceast piramid!

Derularea textului n controale Marquee specifice Internet Explorer Controlul <MARQUEE> definete un text care este ntr-o regiune animat a paginii Web .Utilizarea cea mai simpl a controlului <MARQUEE> este: <MARQUEE>text care trebuie animat </MARQUEE> Controlul <MARQUEE> are multe atribute posibile, cel mai important fiind BEHAVIOR(comportare), care poate fi specificat cu valorile scroll(derulare), slide(alunecare) si alternate(alternat). Opiunea scroll face ca textul s apar liter cu liter, s deruleze pe ecran, s dispar i apoi s reapar. Opiunea slide face ca textul s alunece pe ecran i s se opreasc n momentul cnd atinge marginea opus. Opiunea alternate are ca efect balansarea textului nainte i napoi n cadrul zonei animate. Se poate specifica direcia din care va fi derulat textul prin DIRECTION i o valoare care poate fi left (stnga) sau right(dreapta). Un exemplu relativ simplu:

33

<MARQUEE WIDTH=75%> Bine ai venit la Scele </MARQUEE>, acest text se deruleaz din dreapta spre stnga, disprnd i aprnd iari din dreapta ecranului. <MARQUEE WIDTH=75% BGCOLOR=blue> Bine ai venit la Scele </MARQUEE>, BGCOLOR ne permite s specificm culoarea spaiului marquee. Un alt exemplu care combin cteva posibiliti diferite: <MARQUEE WIDTH=40% BGCOLOR=red BEHAVIOR=slide SCROLLDELAY=350> Un exemplu de derulare</MARQUEE><HR> </MARQUEE BGCOLOR=#DDDDFF BEHAVIOR=alternate HEIGHT=10%>Este foarte amuzant</MARQUEE><HR> Exemplul arat astfel: Bine ai venit la Scele Un exemplu de derulare . nc dou atribute utile pentru rafinarea rezultatelor sunt: SCROLLAMOUNT care permite s specificm numrul exact de pixeli dintre fiecare afiare succesiv a textului animat(este important n cazul n care avem o caset mic de text i un text foarte lung ), SCROLLDELAY specific numrul de milisecunde ,miimi de secund,dintre fiecare reafiare a textului animat. Urmtorul exemplu are dou tipuri de micri: un text se deruleaz din dreapta spre stnga, disprnd i aprnd iari din dreapta ecranului(ELENA LZRESCU...),iar altul face ca textul s alunece pe ecran i s se opreasc n momentul cnd atinge marginea opus ( O SCURT POVESTE DESPRE SCELE...),avem i o legtur prin cuvntul (INTRODUCERE) . <HTML> <TITLE> Exemplu n micare...</TITLE> <BODY BGCOLOR=white> <CENTER> <MARQUEE WIDTH=40% BGCOLOR=red BEHAVIOR=slide SCROLLDELAY=350> ELENA LZRESCU... </MARQUEE> <HR> <MARQUEE BGCOLOR=#DDDDFF BEHAVIOR=alternate HEIGHT=10%> O SCURT POVESTE DESPRE SCELE... < /MARQUEE> <HR> <a href=buton.html>INTRODUCERE</a>
34

</CENTER> </BODY>

ELENA LZRESCU. O SCURT POVESTE DESPRE SCELE... INTRODUCERE Un alt exemplu n care avem o poz centrat,i sub aceast poz avem un marcaj care se mic de la stnga spre dreapta,iar altul n sens invers . <HTML> <BODY BGCOLOR=white> <BGSOUND SRC="storm.aiff" Loop=5> <center> <IMG SRC=get22.jpg><br> <marquee direction=left behavior=alternate> <h8><font color=blue>LITORALUL,SI</font></h8></marquee> <marquee direction=right behavior=alternate> <h8><font color=blue>MUNTELE </font></h8></marquee> <h15><font color=red> <a HREF=sacele1.jpg> SUNT PREFERATELE MELE !!!</a> </FONT></h15> </center> </BODY> Aliniere standard Cele trei alinieri standard sunt ALIGN=top, ALIGN=middle i ALIGN=bottom. n mod implicit, imaginile i materialele adiacente sunt aliniate la baza imaginii. Urmtoarea secven HTML exemplific aceste trei opiuni de aliniere: <BODY BGCOLOR=white> <h1>DIFERITE OPTIUNI DE ALINIERE</h1>
35

<h2>Aliniere n partea de sus</h2> Continuai? <a href="pagina.html"> <img src="Graphics/poza.gif" Align=top BORDER=0></a> Curaj!(ALIGN=top) <h2>Aliniere pe mijloc</h2> Continuai? <a href="pagina.html"> <img src="Graphics/poza.gif" ALIGN=middle BORDER=0></a> Curaj! (ALIGN=middle) <h2>Aliniere n partea de jos</h2> Continuai? <a href="pagina.html"> <img src="Graphics/poza.gif" ALIGN=bottom BORDER=0></a> Curaj! (ALIGN=bottom) </BODY> Figura de mai jos ilustreaz acest exemplu ntr-un program de navigare WEB: DIFERITE OPIUNI DE ALINIERE Aliniere n partea de sus Continuai? Aliniere pe mijloc Continuai? Curaj! Curaj!

Aliniere n partea de jos Continuai ? Curaj!

Exemplul precedent ilustreaz opiunile pentru un grafic nconjurat de text. Dac dorim s aliniem butoanele YES i NO de la baz i s aliniem textul precedent cu centrul celor dou pictograme, vom folosi urmtorul exemplu care ne arat o modalitate simpl de realizare a acestui obiectiv. <HTML> <BODY BGCOLOR=white>

36

dc v-a placut apsai "yes" <a href="syes.html"> <img src="yes.gif" Align=middle BORDER=0></a> <A HREF="animale.html"> <img src="no.gif" Align=bottom BORDER=0></A> dac nu apsai "no" </BODY> </HTML> dac v-a plcut apsai yes YES NO dac nu apsai no

Centrarea textului n raport cu imagini aliniate la baz depete posibilitile acestei abordri HTML. Se poate face ca toate butoanele s aparin unei singure imagini i s utilizm o hart de imagini un marcaj (ISMAP) pentru a comunica serverului ce zon corespunde fiecrei opiuni. Atunci cnd poziionm imaginile, trebuie s ne amintim ca diversele programe de navigare au diferite limi de ecran i c aceste programe sunt libere s deplaseze elementele pentru ca s ncap pe ecran. Iat o regul empiric simpl pentru imagini: Dac dorim ca n dreapta unei imagini s nu apar nimic, se adaug un marcaj (BR) la sfritul secvenei HTML care specific acel grafic. Cele trei opiuni principale de aliniere a imaginilor se refer la informaia care apare dup imaginea n sine. Exist un set suplimentar de opiuni de aliniere, care a aprut mai recent n viaa limbajului HTML si care se refer la alinierea imaginii n cadrul ferestrei i nu la cea a materialului adiacent, n raport cu imaginea grafic. Panouri de navigare cu bar de derulare,dimensiuni de cadrane Cel mai important marcaj este FRAMESET ,care creeaz un set de cadrane: un grup de cadrane n care se va mpri pagina Web. n plus fa de opiunea ROWS care permite mprirea n panouri orizontale, se poate folosi COLS pentru a specifica panouri verticale. Exist cteva atribute pe care le putem specifica la definirea cadranelor, cel mai important fiind atributul NAME . Fiecrui cadru i se poate da un nume unic care poate fi folosit ca mijloc de a controla care din ferestre s fie afectat de anumite aciuni. Exist un atribut HREF care apare n marcajul ancor al referinelor hipertext ,care fac legtura cu alte pagini html; unele au incluse atributul TARGET=main, altele care nu au acest atribut cnd dm clic pe (HOME) ne ntoarce n pagina principal, ca n exemplul urmtor: <HTML> <BODY BGCOLOR=yellow>
37

<CENTER> <FONT SIZE=6 COLOR=blue> <B>Animale</B> </FONT> <p> <FONT SIZE=5> <a href=dog.html target=main>DOG</A> <P> <a href=cat.html target=main>CAT</A> <P> <a href=bird.html target=main>BIRD</A> <p> <a href=default.html target=main>(HOME)</a> </FONT> </CENTER> </BODY> </HTML> Dou poze suprapuse cu legtur spre alt pagin Exemplul urmtor este foarte complex,cuprinde evenimente de tip JavaScript, este un limbaj uor de utilizat, dar totui dureaz ceva timp pn se stpnete.Exist cteva manuale de instruire on-line: Ghidul JavaScript la Netscape:

http://developer.netscape.com/library/documentation/comm unicator /jsguide4/index.html.


Iat un exemplu, n care dorim s modificm o imagine grafic atunci cnd cursorul este poziionat pe acesta. Elementul cheie este acela c exist dou versiuni ale fiecrei imagini: imaginea on( corespunztoare cursorului poziionat deasupra imaginii) i o imagine off ( corespunztoare cursorului poziionat n exteriorul imaginii). Pentru urmtorul exemplu am considerat dou poze , care se animeaz atunci cnd cursorul este amplasat deasupra sa i revine la o imagine static, n caz contrar. Iat listingul programului: <HTML> <TITLE>Animated Logo</TITLE> <BODY BGCOLOR=white> <SCRIPT LANGUAGE="JavaScript"> <!-// We want to have the logo animated when the cursor is over it.
38

logo_on = new Image(); // aloc spaiu pentru imaginea on logo_off = new Image(); // i, de asemenea, pentru imaginea off logo_on.src = 'sapinta.jpg'; //definete imaginile respective logo_off.src = 'moldovita.jpg'; function activate(image) { //comut imaginea din off n on imagesrc = eval(image + '_on.src') document[image].src = imagesrc; } function deactivate(image) {//comut imaginea din on n off imagesrc = eval(image + "_off.src") document[image].src = imagesrc; } // end of script --> </SCRIPT> <CENTER> <a href=proba.html OnMouseOver="activate('logo');return true;" OnMouseOut="deactivate('logo');return true;"> <img src=moldovita.gif alt="[company logo]" border=0 name='logo'></a> </CENTER> </BODY> </HTML> intoarcere la pagina principala si margine colorata <HTML> <HEAD> <TITLE>ELENA LAZARESCU SITE</TITLE> <META NAME="Template" CONTENT="C:\PROGRAM FILES\MICROSOFT OFFICE\OFFICE\html.dot"> </HEAD> <BODY BACKGROUND="cajbkgrn.gif" LEFTMARGIN=90> &nbsp;<BR> &nbsp;<BR> <FONT SIZE=6><P><CENTER>EU !<BR><B>ELENA LAZARESCU </B></CENTER></P></FONT></BODY> <CENTER><IMG SRC="line7.gif" WIDTH=600 HEIGHT=15></CENTER> &nbsp;<BR>&nbsp;<BR>&nbsp;<BR> <FONT SIZE=4><B>Date personale :</FONT>

39

<UL> <LI>data nasterii : 27.03.1974 <LI>locul nasterii : Brasov <LI>adresa : Brasov, SACELE,PARCULUI ,BL6, sc.A, ap.4. <LI>e-mail : E-LAZARESCU@YAHOO.COM </UL> <P><FONT SIZE=4>Studii :</FONT> <UL> <LI>Universitatea Transilvania, Facultatea de Stiinte, curs postuniversitar: Informatica Didactica (1998 - 2000). <LI>Universitatea Transilvania, Facultatea de Stiinte, sectia MatematicaFIZICA (1992 - 1997). </UL> <P><FONT SIZE=4>Hobby :</FONT> <UL> <LI>computerele si Internetul <LI>filmele <LI>muzica buna </UL></B> <FONT SIZE=3 COLOR="339966"><B><CENTER>PENTRU INTOARCERE IN PAGINA PRINCIPALA, APASATI BURTICA LUI JOE: </CENTER></B></FONT> &nbsp;<BR> &nbsp;<BR> <CENTER><A HREF="elevi.html"><IMG SRC="littlejoe.gif" WIDTH=82 HEIGHT=68></A></CENTER> &nbsp;<BR> &nbsp;<BR> <FONT SIZE=3 COLOR="339966"><B><CENTER> SAU </CENTER></B></FONT> &nbsp;<BR> &nbsp;<BR> <CENTER><A HREF="PROBA.html"><IMG SRC="back.gif" WIDTH=80 HEIGHT=50></A></CENTER> &nbsp;<BR>&nbsp;<BR> <CENTER><IMG SRC=leaves on the side.gif" WIDTH=600 HEIGHT=15></CENTER></HTML> doua cadrane pe aceeasi pagina <html> <head> <title>introducere</title> </head>
40

<body bgcolor=grey> <hr color=brown> <center> <font size=5 color=blue> My personal WEB page </font> <hr color=red> By <TT> LAZARESCU ELENA</TT> <hr color=green> </center> </body> </html> .. <html> <head> <title>cuprins</title> </head> <body bgcolor=magenta ><center> <a href=prof.html><font color=green>Introduction</FONT></a><br><br> <a href=elevi.html><font size=7 PREZENTATION</FONT></a> </body> </html>

size=7 color=cian>

41

Concluzii
n limbajul HTML se mai pot realiza i tabelri de date i alte elemente de grafic i alte elemente multimedia dar nu ne-am propus aici s realizm un manual HTML ci numai s ilustrm tehnologia hipertext ntr-un mod ct mai simplu. Exist i alte ci de a construi documente HTML. Una dintre ele folosete editorul de texte WORD 7.0 care are posibilitatea s converteasc un text n format HTML (poate de asemenea s converteasc un fiier HTML ntr-un fiier WORD ). O alt modalitate, pentru un utilizator Windows, de a realiza un document simplu HTML pentru un homepage propiu (o pagina WEB personala pe Internet ) este de a folosi programul Web Wizard care se gsete pe Internet la adresa : http://www.haicyon.com/artamedia/webwizard/. Programul Web Wizard interogheaz utilizatorul despre datele lui personale, despre locaiile oricror fiiere pe care dorete s le includ n pagina WEB i apoi asambleaz el singur un homepage . Pe Internet exist i alte proceduri directe care au ca scop asamblarea unei pagini WEB. Astfel ar fi un kit de construire al unui homepage de la locaia : http://gnn.com/netizens/construction.html Un pas important pentru instruirea programat i pentru realizarea nvmntului la distan l constituie manualele electronice, care, datorit facilitilor oferite de Internet, pot fi utilizate de un numr nelimitat de elevi, ntr-un ritm propriu fiecruia dintre ei. Un astfel de manual, ca i orice pagin WEB de pe Internet, se bazeaz pe tehnologia hipertext, motiv pentru care am considerat c o succint prezentare a acestei tehnologii ar trebui s fac parte din tematica cursurilor de perfecionare att a profesorilor de informatica ct i a profesorilor de alte specialiti din nvmntul gimnazial i liceal.

42

Bibliografie [1 ]Crumlish C.The ABCs of Internet Sybes,1996. [2] December J.Prezentarea limbajului Java,Editura Teora 1996. [3] Hahn W. Using hypertext languages at scool to introduce object oriented programming in Restructuring of the (re)training of scool teachers in Computer Science pp189-199,Computer Libris Agora, Cluj-1997. [4]HTML-Reference Guide. [5]Levine J.R.,Baroudi C. The Inernet for Dummies,IDG Books Worldwide,1994. [6]Pilat F.,Rceanu M., Stanciu C. World Wide Web, Mosaic i Nescape Teora,1996. [7]Taylor D., Crearea paginilor WEB cu HTML4,Teora 1998 [8]Ptru B., Internet pentru nceptori ,Teora 1999

43