UNIVERSITATEA “TRANSILVANIA” BRAŞOVFACULTATEA DE ŞTIINŢE

SPECIALIZAREA INFORMATICĂ

LUCRARE DE GRADUL I

TEHNOLOGII WEB MODERNE ÎN PROGRAMA DE LICEU

2012

CUPRINSUL LUCRĂRII

Introducere

Capitolul I : Elemente de bază ale unui document HTML– Crearea legăturilor- Adăugarea de imagini grafice pentru “cosmetizarea”paginilor– Tabele şi cadre

Capitolul II: Elemente multimedia – Java Script

Capitolul III: Reguli CSS ( foi de stil în cascadă)

Capitolul IV: Aspecte urmărite în procesul de predare – învăţare – evaluare a

TIC

Concluzii

Bibliografie

Anexe

2

INTRODUCERE

Una din cele mai mari realizări în direcţia adaptării la mentalităţile umane a fost programul WWW sau WEB (de la WORLD WIDE WEB-“o pânza de păianjen cât lumea de largă ), un program care realizează legături, prin Internet, între informaţii de tipuri diferite, răspândite î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 informaţiile printr-o metodă care să profite de natura asociativă a gândirii 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 secvenţial. În loc de a citi documentul în secvenţă, de la început la sfârşit, într-un sistem hipertext cititorul poate sări către subiectele care îl interesează, selectând un cuvânt 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 legătură către un alt loc din cadrul documentului sau către o altă locaţie din Internet unde se află documentul corespunzător. Multitudinea de legături în interiorul şi între documente formează un păienjeniş numit în engleză WEB.

John December în [2] îşi imaginează sistemul WEB ca “o bibliotecă în care au fost scoase cotoarele tuturor cărţilor şi unde nu există gravitaţie, permiţând foilor să plutească liber. Dacă paginile ar putea fi legate între ele prin fire subţiri, s-ar putea obţine ceva asemănător modului în care sunt aranjate paginile de hipertext. Paginile plutesc liber, aşa că utilizatorii pot folosi o lucrare începând cu orice pagină şi pot ajunge la alte lucrări mergând pe firele care le leagă.”

Facilitatea principală a hipertextului este conceptul legăturilor suportat de maşina în interiorul documentelor şi între documente. Ea reprezintă această capacitate de legare care conduce către o organizare neliniară a documentelor.

În afara lumii academice, datorită implementării facilităţilor de tip hipertext în produse MS, Windows, Help, profesioniştii sistemelor informaţionale sunt de părere că hipertextul este o altă cale pentru interfaţa utilizator. Totuşi hipertextul este un hibrid care depăşeşte frontierele tradiţionale. El este o metodă de organizare de bază de date, permiţând o cale originală de acces direct şi de management a datelor. Spre deosebire de baza de date tradiţională, o bază de date hipertext nu are o structură regulară.

Utilizatorul este liber să exploateze şi să asimileze informaţiile în diferite moduri. Hipertextul este de asemenea o schemă de reprezentare, un

3

tip de reţea semantică care amestecă materialul textual cu noi procese formale şi mecanizate.

Pentru a crea o pagina WEB proprie e nevoie de un plan bine gândit, referitor la conţinutul paginii, de fapt al tuturor paginilor, cu legăturile 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 Facilităţi deosebite se pot aduce prin încorporarea în textul HTML a unor secvenţe scrise în limbaje de programare speciale, precum JavaScript, Java sau Visual Basic.

Limbajul de marcare hipertext -HTML (Hypertext Markup Language) este limbajul specific pentru reţeaua WORLD WIDE WEB. Inventatorul acestui limbaj este Tim Bernes Lee.

Când se deschide pagină Web, navigatorul cu care se lucrează accesează, de fapt, un document scris în limbajul HTML. Un astfel de document conţine diferite formatări de text sau imagini, precum şi hiperlegături către alte documente Web sau chiar în cadrul documentului respectiv.

4

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 alcătuit dintr-o serie de comenzi ce descriu modul în care este structurat de un document. Astfel utilizatorul poate să definească parţi dintr-un document, fără formatarea lui, în aşa fel încât browser sau navigatorul poate formata documentul pentru a se potrivi caracteristicilor de afişare ale monitorului folosit.

Browserul (navigatorul) este un program de răsfoire a documentului care interpretează şi afişează 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ă- legături la alte documente de pe reţea- inserţii de grafică, sunet sau video- legături la alte resurse adiţionale de pe reţea- răsfoirea documentelor într-o ordine şi un ritm propriu fiecărui citit

Un document HTML se creează în orice editor, cum ar fi Notepad şi Write în Windows’95 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 sfârşit numele etichetei de sfârşit fiind identic cu al celei de început cu excepţia 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 sfârşit, 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 conţinutul documentului</BODY></HTML>Un browser va interpreta etichetele şi textul, afişând textul fără

paranteze unghiulare în modul următor, unde începutul şi sfârşitul documentului le vom marca prin si pentru a deosebi documentul afişat de restul textului:

Primul document HTML

Acesta este conţinutul documentului

Orice document HTML începe cu tag-ul <HTML> a cărui pereche </HTML> se află la sfârşitul documentului şi care informează browserul care are de a face cu un document HTML (un fişier 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 afişat pe ecran.

Tag-urile pereche <HEAD>,</HEAD>si<BODY>,</BODY>separă documentele într-o parte informativă şi textul propiu-zis, această separare neschimbând forma documentelor, dar având 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” luând valorile de la 1 la 6.

6

HTML nu ţine cont de sfârşitul de linie (CRLF) de spaţii 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 foloseşte tag-ul <BR>. Atunci când se inserează o linie orizontală se poate indica şi dimensiunea liniei folosind atributul SIZE. Începutul unui paragraf se indica prin tag-ul <P>, sfârşitul paragrafului </P> fiind opţional. Tag-ul P admite şi opţiunea ALING=left sau center sau right. Fără folosirea tagului <P> întregul text este considerat un singur paragraf.Oriunde într-un document HTML se pot introduce comentarii pe care browserul nu le afişează sub forma: <!--comentariu>.

Informaţii uzuale care se plasează la sfârşit

De regulă anumite informaţii, cum ar fi titlul, în antetul fiecărui document WEB, anumite informaţii sunt plasate de obicei la sfârşitul documentului. În WEB găsim, la sfârşitul documentului, informaţii de copyright şi datele de contact ale autorului paginii.

Marcajul utilizat pentru asemenea informaţii de contact este de obicei <ADDRESS>.

Următorul exemplu ilustrează acest control adăugat fişierului scrisoare.html:

<HTML><HEAD><TITLE>prima scrisoare</TITLE></HEAD><BODY>Mihai Pătru<BR>Inginer electronist<P>Domnule Director,<P>În urma anunţului Dumneavoastră apărut în ziarul Curierul naţional din

11 apr.1994, vă trimit alături un curriculum vitae.<P> Cu respect,<P>

Mihai Pătru<ADDRESS>Str.Izvor nr.12,sect 5, cod 75114 BucureştiMihaiPatru@yahoo.com

7

Materialul de tip adresă este afişat cu caractere italice,ceea ce poate fi destul de atractiv în anumite pagini Web. Exemplul arată astfel:

Mihai PătruInginer electronist

Domnule Director,

În urma anunţului Dumneavoastră apărut în ziarul Curierul naţional din 11 apr.1994, vă trimit alături un curriculum vitae.

Cu respect,Mihai Pătru

Str.Izvor nr.12,sect 5, cod 75114 BucureştiMihaiPatru@yahoo.com

Definirea antetelor de secţiune

Dacă pagina trebuie organizată în secţiuni sau chiar în subsecţiuni, atunci diversele niveluri de marcaje de formatare a subtitlurilor rezolvă această situaţie.

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 Luceafărul de Eminescu.<H1>A fost o dată ca-n poveşti, </H1><H2>A fost ca niciodată, </H2><H2>Din rude mari împărăteşti, </H2><H3>O prea frumoasă fată. </H3><H1>Şi era una la părinţi </H1><H2>Şi mândră-n toate cele, </H2><H2>Cum e Fecioara între sfinţi </H2><H3>Şi luna între stele. </H3>

8

<ADDRESS>Această poezie o găsiţi în Mihai Eminescu LUCEAFĂRUL<ADDRESS><BODY><HTML>

Exemplul arată astfel:

Iată două strofe din Luceafărul de Eminescu.

A fost o dată ca-n poveşti, A fost ca niciodată, Din rude mari împărăteşti, O prea frumoasă fată.

Şi era una la părinţi Şi mândră-n toate cele, Cum e Fecioara între sfinţi Şi luna între stele.

Această poezie o găsiţi în Mihai Eminescu LUCEAFĂRUL

Atunci când exemplul de mai sus este vizualizat într-un program de explorare, diversele subtitluri apar afişate cu diverse dimensiuni, iar informaţia care nu face parte din subtitluri apare afişată cu un font de tip roman, fără caractere îngroşate.

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 preferinţelor pe care aceştia 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 subţire orizontală afişată pe întreaga lăţime a paginii. O astfel de linie e necesară pentru a separa diferite secţiuni din document. De exemplu, mulţi adaugă o astfel de linie la sfârşitul textului lor şi înainte de informaţiile <ADDRESS> .

Poţi stabili grosimea liniei, precum şi lungimea ei ( procentul din lăţimea ferestrei programului de navigare). Exemplul următor:

9

<HR SIZE 2 WIDTH=” 50%”>

Va afişa linia:

Exemplul următor ilustrează pagina cu diferite informaţii, în care s-au adăugat controale <HR>.

<HTML><HEAD><TITLE>scrisoare</TITLE></HEAD><BODY>Dortung5 mai 1995<HR><H1>Dragii mei,</H1><H2>Am ajuns în D.,un orăşel din Nord,frumos,vechi,dar…. camploios. Drept urmare mi-am cumpărat în sfârşit o umbrelă în felii

colorate.</H2><HR>Acum suntem într-o cafenea. În jurul nostru sunt numai doamne în

vârstă care îşi beau liniştite ceaiul de la ora 5……<H2>Cu drag,Elena</H2>

În acest exemplu se poate vedea linia orizontală de mai multe ori:

Dortung5 mai 1995

Dragii mei,

Am ajuns în D.,un orăşel din Nord,frumos,vechi,dar…. camploios. Drept urmare mi-am cumpărat în sfârşit o umbrelă în felii colorate.

10

Acum suntem într-o cafenea. În jurul nostru sunt numai doamne în vârstă care îşi beau liniştite ceaiul de la ora 5……

Cu drag,Elena

Formatarea textului Am spus înainte că limbajul HTML nu ţine cont de spaţii, taburi sau sfârşituri de linie. Există însă situaţii când poate ţine cont de acestea şi anume folosind tag-ul<PRE> prin care se indică preformatarea textului. Pentru introducerea citatelor se foloseşte tag-ul pereche <BLOCKQUOTE> şi </BLOCKQUOTE> între care se introduce citatul.Caracterele, cuvintele sau frazele pot fi afişate în stiluri diferite folosind formatarea caracterelor. Formatarea poate fi fizică sau logică. Stilurile logice marchează textul în concordanţă cu semnificaţiile lor, pe când stilurile fizice indică înfăţişarea specifică unei secţiuni.

De exemplu, dacă vrem să scriem un cuvânt aplecat (italic), putem fie să marcăm respectivul cuvânt ca o definiţie, fie să folosim o etichetă care să specifice exact acest lucru.

Stilurile logice

<DFN>Se foloseşte pentru un cuvânt ce urmează a fi definit. De obicei se

afişează cu caractere italice. (Exemplu: Internet Explorer este un program de explorare WEB).

<EM>Se foloseşte pentru accentuări. De obicei se afişează cu caractere

italice. (Exemplu: Accesul copiilor în această pagină WEB este interzis!)<CITE>Indicat a fi folosit pentru nume de cărţi, filme etc. De obicei se afişează

cu caractere italice. (Exemplu: Crearea paginilor WEB)<CODE>Această etichetă este destinată textelor de programe pentru calculator.

Se afişează într-un font cu grosime fixă (fişierul (stdio.h))<KBD>

11

Această etichetă este utilizată pentru intrările de la tastatură şi, de obicei se afişează cu font de grosime fixă. (Daţi comanda password pentru a schimba parola)

<SAMP>Se foloseşte pentru o secvenţă de caractere. Se afişează sub forma unui

font de grosime fixă.<STRONG>Marchează citate importante. De obicei cuvintele se afişează îngroşat

(bold). (NOTA: verificaţi-vă cutia poştală)<VAR>Atunci când se foloseşte o variabilă (un nume generic), ce ulterior

trebuie înlocuită cu o informaţie concretă. (md nume director creează un subdirector.

Stiluri fizice

Formatarea fizică este determinată de utilizator şi browserul va afişa ceea ce utilizatorul i-a indicat.Pentru italic se poate folosi următoarea variantă: <I>text</I>- afişează textul în italic (cursiv) adică cu litere înclinate.Pentru alte formatări se pot folosi următoarele variante: <B>text</B> afişează textul îngroşat (bold)<U>text </U> afişează textul subliniat<SUB>text</SUB>mută textul mai jos decât linia de bază a documentului şi trece la un font mai mic (aplicarea stilului de indice inferior)<SUP>text</SUP>mută textul mai sus decât linia de bază a documentului şitrece la un font mai mic(aplică stilul de indice superior)<SMALL>text</SMALL>afişează textul cu litere mai mici decât ale documentului înconjurător.

Dimensiunea fontului se poate stabili prin:<FONT SIZE=n>text</FONT SIZE>unde “n” va indica ce dimensiune se va folosi pentru afişarea textului (n=1,2,3,4,5,6,7cu semn sau fără)

Stilurile logice ale caracterului sunt configurate de browser. Acestea se pot defini prin:<EM>text</EM>- afişează textul accentuat<STRONG>text</STRONG>afişează textul puternic accentuat<CITE>text</CITE>- afişează nume de cărţi, autori<VAR>text</VAR>- indică o variabilă<DFN>text</DFN>- afişează o definiţie

Secvenţe escape

12

Aceste secvenţe 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 afişa caracterele ASCII extinse(cu diacritice). De aceea, acestea nu vor apărea în text aşa cum sunt. Apostroful poate fi scris prin dublarea sau prin folosirea secvenţei escape &quot.

Din setul de caractere ASCII există trei caractere speciale, care nu pot fi folosite ca atare în documentele HTML: <(paranteza ascuţită stânga), >(paranteza ascuţită dreapta) şi &(ampersand). Parantezele ascuţite sunt folosite pentru indicarea tag-urilor, iar ampersandul este folosit pentru transformarea caracterelor speciale în caractere afişabile.

De exemplu: &lt=< &gt=> &amp=&

Există şi secvenţe 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, secvenţele escape fac diferenţă între caractere minuscule şi cele majuscule. De exemplu, nu poţi folosi &LT;în loc de &lt.

Să considerăm următorul document HTML:

<HEAD><TITLE>Exemplul 2</TITLE></HEAD><PRE><B><FONT SIZE=5>Acesta este al doilea exemplu de documentHTML</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>îngroşate 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>Luceafărul</CITE>al lui <CITE>Eminescu</CITE>:</P>

13

<BLOCKQUOTE>A fost o dată ca-n poveşti,</BLOCKQUOTE><BLOCKQUOTE>A fost ca niciodată,</BLOCKQUOTE><BLOCKQUOTE>Din rude mari împărăteşti,</BLOCKQUOTE><BLOCKQUOTE>O prea frumoasa fată.</BLOCKQUOTE><BLOCKQUOTE><HR ALIGN=”LEFT”WIDTH=”87%”SIZE=1></BLOCKQUOTE></FONT></BODY></HTML>

Acesta va fi afişat de browser sub forma:

Acesta este al doilea exemplu de document HTML …………………………………………………………………………………. În acest exemplu se vor folosi cuvinte îngroşate sau Cuvintele scrise cu caractere cursive.………………………………………………………………………………….Variabilele folosite sunt a si b iar citatul este din Luceafărul al lui Eminescu : A fost o dată ca-n poveşti,

A fost ca nici o dată,

Din rude mari împărăteşti,

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 CON TRO L

15

CREAREA LEGĂTURILOR

Una dintre realizările HTML este şi abilitatea de a lega părţi dintr-un text sau imagini cu alte documente sau imagini aflate pe calculatorul local sau pe alt calculator din reţeaua Internet. Aceste legături sunt prezentate de browser subliniate sau supraluminate sau în video invers pentru ca utilizatorul să le poată identifica cu uşurinţă. Tag-ul folosit pentru legătură este <A> şi se numeşte şi ancora. Pentru a include o ancora, se procedează astfel: - se începe ancora cu <A(se pune un spaţiu după A) - se specifică documentul către care se face legătura, introducând parametrul HREF=”nume-fişier”, urmat de o paranteză unghiulară închisă(>); - se va introduce textul care va servi drept legătură hipertext în documentul curent; - se introduce eticheta de sfârşit de ancora:</A> Iată un exemplu de referinţă hipertext într-un fişier numit România.html: <A HREF=”Moldova.html”>Moldova</A>

Această intrare din document va face să fie afişat textul “Moldova”,executând clic pe el vei fi trimis la fişierul HTML cu numele Moldova.html, din acelaşi director ca şi fişierul curent (România.html) Legătura 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ă considerăm, de exemplu, textul din exemplul 2 si să adăugăm strofa a doua din Luceafărul 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>îngroşate 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>Luceafărul</CITE> al lui <CITE>Eminescu </CITE> (puteţi vedea strofa><A HREF=”#a_doua_legătură>întâi </A>sau pe cea de a </Adoua</A>!):</P></FONT><P><HR></P><FONT SIZE=4> <A NAME= prima_legătură > I </A><BLOCKQUOTE>A fost o dată ca-n poveşti, </BLOCKQUOTE><BLOCKQUOTE>A fost ca niciodată, </BLOCKQUOTE><BLOCKQUOTE>Din rude mari împărăteşti, </BLOCKQUOTE><BLOCKQUOTE>O prea frumoasă fată. </BLOCKQUOTE><P> <A NAME=a_doua_legătură> II </A><BLOCKQUOTE>Şi era una la părinţi </BLOCKQUOTE><BLOCKQUOTE>Şi mândră-n toate cele, </BLOCKQUOTE><BLOCKQUOTE>Cum e Fecioara între sfinţi </BLOCKQUOTE><BLOCKQUOTE>Şi luna între stele. </BLOCKQUOTE></FONT></BODY></HTML>

Browserul va afişa documentul sub forma:

Acesta este al treilea exemplu de document:HTMLÎn acest exemplu se vor folosi cuvinte îngroşate sau cuvinte scrise cu caractere cursive.Variabilele folosite sunt a şi b iar citatul este din Luceafărul al lui Eminescu(puteţi vedea strofa I sau pe cea de-a II !):………………………………………………………………………………….I A fost odată ca-n poveşti

A fost ca nici o dată,

Din rude mari împărăteşti

O prea frumoasă fată

17

II

Şi era una la părinţi

Şi mândră-n toate cele,

Cum e Fecioara între sfinţi

Şi luna între stele.

Dacă legătura este cu un document exem.html aflat în directorul /doc/exem.html atunci atributul va apărea în HREF sub forma<A HREF=/doc/exem.html>text</A>Text apare pe ecranul celui care face legătura ca o ancoră spre documentulexem.html. Există şi posibilitatea realizării unor legături absolute specificând URL-ul(Uniform Resource Locator este adresa unui document pe World Wide Web)documentului cu care se efectuează legătura:<A HREF=”http:/www.info.unitbv.ro/catedra.html>text</A>

Căile relative în comparaţie cu căile absolute

Se poate face legături către documente din alt director, prin specificarea unei căi relative.De exemplu, dacă vrem o legătura către fişierul Bacău.html, aflat în subdirectorul Moldova, va trebui să scriem: <A HREF=”Moldova/Bacău.html”>judeţul Bacău</A>Am avut de-a face cu o legătura relativă, deoarece sa specificat calea către fişierul referit, relativ la locaţia fişierului curent.

De asemenea, se poate folosi numele căii complete (URL-ul complet) a fişierului referit, dar legăturile relative sunt mult mai eficiente în accesarea unui server.

În general, e bine să utilizăm legăturile relative, deoarece:- e mai uşor să muţi un grup de documente într-o altă locaţie(căile

relative se vor păstra).- conexiunea la server e mai eficientă.- ai mai puţin de scris…Uneori, însa, legăturile absolute trebuie neapărat utilizate - de exemplu,

atunci când nu ai o referinţă directă către 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 căutare Yahoo, va trebui ca în documentul tău să ai o legătură 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 definiţie), adică liste ale cărei elemente nu necesită separarea prin paragrafe. În funcţie de tipul de listă se folosesc următoarele tag-uri:

Liste nenumerotate

<UL> - realizează deschiderea listei nenumerotate <LI> - defineşte fiecare element al listei </UL> - închide listaIată 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> - defineşte fiecare element al listei </OL> - închide lista

Următorul cod HTML:<OL><LI> mere<LI> pere<LI>portocale</OL> produce următorul rezultat formatat:1. mere

19

2. pere3. portocale

Liste descriptive Prin listele descriptive(de definiţie) se descriu termeni scurţi dar cu definiţii lungi.Structura unei liste descriptive este următoarea: <DL> - realizează deschiderea listei descriptive <DT>- defineşte numele termenilor listei <DD>- realizează descrierea termenilor listei </DL>- închide lista

În general, programele de navigare formatează definiţiile pe un rând nou.

Iată un exemplu:<DL>< DT>HTML<DD>HTML ,Limbajul de marcare hipertext,este folosit pentru descrierea documentelordin Word Wide Web.<DT>WEB<DD>WEB vine de la Word Wide Web,pânza de păianjen mondială</DL>Rezultatul va fi:HTMLHTML ,Limbajul de marcare hipertext, este folosit pentru descrierea documentelor din Word Wide Web.WEBWEB vine de la Word Wide Web, pânza de păianjen mondială

Intrările DT si DD pot conţine mai multe paragrafe, alte liste sau alte informaţii de descriere.

Liste imbricate Dacă o listă conţine la rândul ei alte liste rezultatul se numeşte listă

imbricată. Un exemplu simplu de liste care sunt cuprinse una într-alta:

<UL>

20

<LI> Fructe de vară <UL>

<LI> căpşuni<LI> vișine<LI> cireșe</UL>

<OL> Fructe de toamnă <UL>

<LI> mere<LI>struguri</UL>

</UL>Codul de mai sus va avea rezultatul:

Fructe de vară Căpşuni Vișine Cireșe

Fructe de toamnă1. Mere2. Struguri

În exemplul 4 vom folosi toate cele trei tipuri de liste printre careva 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

21

<OL> <LI>Logică si programare

<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>Inteligenţa artificială<LI>Cercetări operaţionale</OL>

</OL> <P>

Aceasta este o listă <B>descriptivă </B> a noţiunilor iniţiale î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ă atât structura şi prezentarea

documentului <DD>MOSAIC

<DT> Browser pentru WEB<DD> Hyperlink<DT>Legătura într-un document hipermedia</DL></BODY></HTML>

Documentul afişat 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 programare2. Algoritmică3. Bazele informaticii

2. Anul II

1. Limbaje formale2. Bazele informaticii3. Teoria grafurilor

3.Anul III

1. Structuri de date2. Limbaje de asamblare3. Tehnici de asamblare

4.Anul IV

1. Tehnici de compilare2. Inteligenţa artificială 3. Cercetări operaţionale

Aceasta este o listă descriptivă a noţiunilor întâlnite în limbajul HTML URL-ul . Uniform Resource Locator este adresa unui document pe WORLD WIDE WEB tageticheta HTML care reprezintă coduri ce determină atât structura şi prezentarea documentului.

MOSAIC

Browser pentru WEB HyperlinkLegătura î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 dependenţa 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 numerotări şi anume:

1-numere arabe (implicit 1)a-litere miciA-litere marii-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 - pătrat plin circle - cerc gol

Text preformatat

Se poate folosi eticheta <PRE> pentru a genera text afişat într-unfont de grosime fixă. Această etichetă va marca şi spaţiile, trecerile la rând nou, taburile semnificative. Textele preformatate pot fi folosite în listinguri de programe, dar şi pentru alte locuri.

De exemplu, următoarele linii:<PRE>md spitalcd spitalmd adulţimd copiicd..</PRE>vor fi afișate astfel:

md spitalcd spitalmd adulţimd copiicd..

Marcajul <PRE> poate fi folosit cu un atribut opţional (WIDTH), prin care se precizează numărul maxim de caractere de pe o linie. WIDTH indică programului de navigare să aleagă un font şi mod de aliniere a textului adecvate.

24

În secţiunile <PRE> pot fi folosite hiperlegături.Deoarece simbolurile <,> şi & au semnificaţii speciale în HTML, va

trebui să folosim secvenţele escape corespunzătoare( &lt; &gt; &amp)pentru a introduce aceste caractere.

Pentru a include citate interminabile - într-un bloc separat de pe ecran seFoloseşte eticheta <BLOCKQUOTE>. Multe navigatoare schimbă marginea unui bloc de citat pentru a-l separa de textul înconjurător.

Adăugarea de imagini grafice pentru “cosmetizarea“ paginilor

Mai multe programe de exploatare Web pot afişa imagini lângă 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 afișată pe ecran, fapt ce încetineşte mult procesul de afişare a documentului. Pentru o imagine “inline”, se introduce: <IMG SRC=nume_imagine>unde nume_imagine este URL-ul fişierului imagine. Sintaxa pentru astfel de adrese URL este identică cu cea utilizată pentru alte ancore HREF. Dacă imaginea este un fişier GIF, atunci nume_imagine trebuie să aibă extensia .gif, iar dacă este un fişier JPEG, va avea una din extensiile .jpg sau .jpeg. Atributele de mărime a imaginii

Va trebui să se includă două atribute în etichetele <IMG> pentru a indica programului navigator care este mărimea imaginii ce va fi preluată alături de text. Aceste atribute se numesc HEIGHT şi WIDTH şi permit programului de navigare să stabilească spaţiul adecvat (in pixeli) pentru imagini. (Mărimea î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 opţiuni pentru afişarea imaginilor. Ele pot fi aranjate separat de text, la stânga 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 fără text

Pentru a afişa o imagine fără un text asociat se plasează într-un paragraf separat şi se foloseşte atributul ALIGN, pentru a centra imaginea sau a o aşeza în partea din dreapta a ferestrei, ca în exemplul următor:

<p ALIGN=CENTER><IMG SRC = “Imagine.gif”></P>

Culoare de fundal

În mod prestabilit, programele de navigare afişează textul în negru pe un fundal gri – elemente care pot fi schimbate. Se poate schimba culoarea textului, a legăturilor (care în mod prestabilit este albastru), a legăturilor vizitate (violet) şi a legăturilor active, folosind atribute ale etichetei <BODY>. De exemplu, introducând:

<BODY BGCOLOR= “#000000” TEXT=”#FFFFFF” LINK=”#9690CC”> se va crea o fereastră cu fundalul negru (BGCOLOR), textul alb si hiperlegăturile argintii (LINK).

Imagini, sunete şi animaţii externe

O imagine care se deschide într-un document separat, când un utilizator activează o legătură formată dintr-un cuvânt sau o variantă “inline” în miniatură a imaginii respective, se numeşte imagine externă şi mecanismul poate fi folosit pentru a nu încetini procesul de încărcare a paginii WEB prin inserarea unor imagini prea mari lângă text (“inline”).

Pentru a include o referinţă la o imagine externă, se introduce:<A HREF=”ImagineMare.gif”>ancora de legătură</A>

sau se poate folosi o imagine mai mică pentru legătura către copia sa mai mare:

<A HREF=”ImagineMare.gif”><IMG SRC=”ImagineMica.gif”></A>

26

Cititorul paginii WEB va vedea imaginea mică şi executând clic pe ea, va deschide copia mare.

Tabele şi cadre

Tabelele reprezintă o extensie importantă a limbajului HTML, avându- şi originea în laboratoarele de dezvoltare ale corporației Netscape Comunications. Deși tabelele oferă o mulţime de posibilităţi interesante,au si un dezavantaj:sunt destul de greu de construit. Trebuie să specificaţi parametrii tabelului, apoi parametrii fiecărei 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>Marţi</TD><TD>Miercuri</TD><TD>Joi</TD><TD>Vineri</TD></TR></TABLE></BODY>

Acest cod plasează toate datele pe aceeaşi linie, tabelul arată astfel:

Orarul clasei

Luni Marţi Miercuri Joi Vineri

Dacă dorim ca aceeaşi informaţie să fie organizată sub forma unui element pe fiecare rând(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>Marţi</TD></TR><TR><TD>Miercuri</TD></TR><TR><TD>Joi</TD></TR><TR><TD>Vineri/TD></TR></TABLE></BODY>tabelul arată astfel:

Orarul clasei

LuniMarţiMiercuriJoiVineri

Există mai multe opţiuni suplimentare de formatare care ne ajută să învăţăm cum să exploatăm eficient acest set de proprietăţi 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ă definiţie va genera o celulă cu fond galben şi textul scris, în

mod predefinit, cu negru. Urmăriţi cum adăugarea 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>Coşbuc</TD></TR></TABLE></CENTER></CENTER></BODY>

Rezultatul acestei formatări este destul de atractiv, aşa cum ilustrează tabelul:

Literatură Proză Poezie Preda Eminescu Slavici Coşbuc

Exemplul următor 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><IMGSRC=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:

CA

NA

LE

DE

PR

OG

RA

ME

MTV

MCM

PROTVANTENA1

EUROSPORT

Atributul WIDTH ne permite să specificăm lăţimea exactă a tabelului de pe ecran, indiferent de conţinut. O putem specifica fie sub forma unui număr de pixeli, fie ca procent din lăţimea 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>

Adăugarea lăţimii imbunătăţeste formatul tabelului:

Canale de program

MTVMCMEUROSPORTPROTV

30

Cealaltă modalitate de a lăţi tabelul este specificarea unui factor CELLPADDING. Există doua atribute, CELLPADDING-indică spaţiul în pixeli dintre marginea interioară a chenarului unei celule şi materialul conţinut în celula, pe când CELLSPACING se referă la lăţimea liniilor de caroiaj dintre celulele de date.

Iată un exemplu de două tabele, în care sunt specificaţi câte unul din aceşti doi parametri:

<TITLE>Tabele si Cadrane</TITLE><BODY BGCOLOR=white><B>Canale de tv străine şi româneşti</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 străine şi româneşti

MTVMCMEUROSPORT

…………………………………………………………………………PROTV

ANTENA1TVR1

Unii autori de cod HTML utilizează tabelele şi pentru informaţii netabelare. De exemplu, pentru că se pot include imagini în cadrul celulelor unui tabel, unii folosesc un tabel fără margini pentru a crea o imagine alcătuită din mai multe părţi. Folosind tabele cu margini, în celulele cărora se află imagini, se pot crea, de asemenea, afişe interesante.

31

Capitolul II: Elemente multimedia – Java Script

În interiorul documentului majoritatea browselor pot afişa şi imagini XBM(X Bitmap) sau GIF ( navigatorul Netscape cunoaşte şi JPEG). Pentru a face legătura cu o imagine externă se foloseste tag-ul : <A HREF =”imagine.gif”>imagine</A>,iar pentru a include o imagine internă se foloseşte tag-ul: <IMG SRC=”imagine.gif”> Fiecare imagine are însă un timp de încărcare foarte mare, fapt care încetineşte considerabil viteza de afişare a documentului. În documentele HTML se pot introduce şi alte elemente multimedia cum ar fi sunete sau animaţie, dar vizualizarea lor este dependentă de posibilităţile browserelor folosite. Tag-urile folosite pentru aceste scopuri sunt: AU, AIFF (pentru sunete), MPEG, MOV (pentru animaţie).

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 opţiuni acceptă valori, iar a treia comută însăşi stilul de afişare al riglei. Atributul SIZE ne permite să specificăm înălţimea liniei orizontale în pixeli;exemplu:<HR SIZE=1> Atributul WIDTH poate fi specificat fie în pixeli absoluţi, fie în procente din lăţimea ecranului; exemplu:<HR WIDTH=75%>.Dacă dorim locul unde să fie plasată linia, folosim opţiunea ALIGN ale marcajului <P> , puteţi specifica alinierea riglei orizontală prin LEFT(la stânga), CENTER (centrală) si RIGHT (la dreapta). Dacă dorim o linie care ocupă jumatate din fereastra programului de navigare şi este plasată în marginea din stânga, ar trebui să utilizăm: <HR WIDTH=50% ALIGN=LEFT>. Pentru o bară solidă, se utilizează opţiunea NOSHADE (fără umbră) care elimină aspectul 3D.

Am utilizat aceste opţiuni în moduri distractive, ca în exemplul următor:

<HR WITH=50% NOSHADE ALIGN=left> <CENTER>

<FONT SIZE=+2><B> Vizitaţi această piramidă!</B></FONT> <HR WITH=50% NOSHADE ALIGN=right><HR SIZE=3 WIDTH=5%>

32

<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 următorul:

Vizitaţi această piramidă!

Derularea textului în controale Marquee specifice Internet Explorer

Controlul <MARQUEE> defineşte 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). Opţiunea scroll face ca textul să apară literă cu literă, să deruleze pe ecran, să dispară şi apoi să reapară. Opţiunea slide face ca textul să alunece pe ecran şi să se oprească în momentul când atinge marginea opusă. Opţiunea alternate are ca efect balansarea textului înainte şi înapoi în cadrul zonei animate. Se poate specifica direcţia din care va fi derulat textul prin DIRECTION şi o valoare care poate fi left (stânga) sau right(dreapta).

Un exemplu relativ simplu:

<MARQUEE WIDTH=75%> Bine aţi venit la Săcele </MARQUEE>, acest text se derulează din dreapta spre stânga, dispărând şi apărând iarăşi din dreapta ecranului.

33

<MARQUEE WIDTH=75% BGCOLOR=blue> Bine aţi venit la Săcele </MARQUEE>, BGCOLOR ne permite să specificăm culoarea spaţiului marquee.

Un alt exemplu care combină câteva posibilităţi 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 aţi venit la Săcele………………………………………………………………………… Un exemplu de derulare…

…………………………………………………………………………. Încă două atribute utile pentru rafinarea rezultatelor sunt:

SCROLLAMOUNT care permite să specificăm numărul exact de pixeli dintre fiecare afişare succesivă a textului animat(este important în cazul în care avem o casetă mică de text şi un text foarte lung ), SCROLLDELAY specifică numărul de milisecunde ,miimi de secundă,dintre fiecare reafişare a textului animat.Următorul exemplu are două tipuri de mişcări: un text se derulează din dreapta spre stânga, dispărând şi apărând iarăşi din dreapta ecranului(ELENA LĂZĂRESCU...),iar altul face ca textul să alunece pe ecran şi să se oprească în momentul când atinge marginea opusă ( O SCURTĂ POVESTE DESPRE SĂCELE...),avem şi o legătură prin cuvântul (INTRODUCERE) .

<HTML><TITLE> Exemplu în mişcare...</TITLE><BODY BGCOLOR=white><CENTER><MARQUEE WIDTH=40% BGCOLOR=red BEHAVIOR=slide SCROLLDELAY=350> ELENA LĂZĂRESCU... </MARQUEE> <HR><MARQUEE BGCOLOR=#DDDDFF BEHAVIOR=alternateHEIGHT=10%> O SCURTĂ POVESTE DESPRE SĂCELE... < /MARQUEE><HR><a href=buton.html>INTRODUCERE</a></CENTER></BODY>

34

ELENA LĂZĂRESCU….

O SCURTĂ POVESTE DESPRE SĂCELE...

INTRODUCERE

Un alt exemplu în care avem o poză centrată,şi sub această poză avem un marcaj care se mişcă de la stânga 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. Următoarea secvenţă HTML exemplifică aceste trei opţiuni de aliniere:

<BODY BGCOLOR=white><h1>DIFERITE OPTIUNI DE ALINIERE</h1><h2>Aliniere în partea de sus</h2>Continuaţi? <a href="pagina.html">

35

<img src="Graphics/poza.gif" Align=top BORDER=0></a>Curaj!(ALIGN=top)<h2>Aliniere pe mijloc</h2>Continuaţi?<a href="pagina.html"><img src="Graphics/poza.gif" ALIGN=middle BORDER=0></a>Curaj! (ALIGN=middle)<h2>Aliniere în partea de jos</h2>Continuaţi?

<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 OPŢIUNI DE ALINIERE

Aliniere în partea de sus

Continuaţi? Curaj!

Aliniere pe mijloc

Continuaţi? Curaj!

Aliniere în partea de jos

Continuaţi ? Curaj!

Exemplul precedent ilustrează opţiunile 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 următorul exemplu care ne arată o modalitate simplă de realizare a acestui obiectiv.

<HTML><BODY BGCOLOR=white>dăcă v-a placut

36

apăsaţi "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 apăsaţi "no" </BODY></HTML>

dacă v-a plăcut apăsaţi “yes” dacă nu apăsaţi “no”

YES NO

Centrarea textului în raport cu imagini aliniate la bază depăşeşte posibilităţile acestei abordări HTML. Se poate face ca toate butoanele să aparţină unei singure imagini şi să utilizăm o hartă de imagini – un marcaj (ISMAP) – pentru a comunica serverului ce zonă corespunde fiecărei opţiuni. Atunci când poziţionăm imaginile, trebuie să ne amintim ca diversele programe de navigare au diferite lăţimi 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 sfârşitul secvenţei HTML care specifică acel grafic. Cele trei opţiuni principale de aliniere a imaginilor se referă la informaţia care apare după imaginea în sine. Există un set suplimentar de opţiuni de aliniere, care a apărut mai recent în viaţa 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 împărţi pagina Web. În plus faţă de opţiunea ROWS care permite împărţirea în panouri orizontale, se poate folosi COLS pentru a specifica panouri verticale.

Există câteva atribute pe care le putem specifica la definirea cadranelor, cel mai important fiind atributul NAME . Fiecărui 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 acţiuni. Există un atribut HREF care apare în marcajul ancoră al referinţelor hipertext ,care fac legătura cu alte pagini html; unele au incluse atributul TARGET=main, altele care nu au acest atribut când dăm clic pe (HOME) ne întoarce în pagina principală, ca în exemplul următor:

<HTML><BODY BGCOLOR=yellow><CENTER>

37

<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 legătură spre altă pagină

Exemplul următor este foarte complex,cuprinde evenimente de tip JavaScript, este un limbaj uşor de utilizat, dar totuşi durează ceva timp până se stăpâneşte.Există câteva manuale de instruire on-line: Ghidul JavaScript la Netscape:

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

Iată un exemplu, în care dorim să modificăm o imagine grafică atunci când cursorul este poziţionat pe acesta. Elementul cheie este acela că există două versiuni ale fiecărei imagini: imaginea “on”( corespunzătoare cursorului poziţionat deasupra imaginii) şi o imagine “off “ ( corespunzătoare cursorului poziţionat în exteriorul imaginii). Pentru următorul exemplu am considerat două poze , care se animează atunci când 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.logo_on = new Image(); // alocă spaţiu pentru imaginea “on”

38

logo_off = new Image(); // şi, de asemenea, pentru imaginea “off”logo_on.src = 'sapinta.jpg'; //defineşte imaginile respectivelogo_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><UL>

39

<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 Matematica-FIZICA (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><body bgcolor=grey>

40

<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 size=7 color=green>Introduction</FONT></a><br><br><a href=elevi.html><font size=7 color=cian> PREZENTATION</FONT></a></body></html>

41

Concluzii

În limbajul HTML se mai pot realiza şi tabelări de date şi alte elemente de grafică şi alte elemente multimedia dar nu ne-am propus aici să realizăm un manual HTML ci numai să ilustrăm tehnologia hipertext într-un mod cât mai simplu.

Există şi alte căi de a construi documente HTML. Una dintre ele foloseşte editorul de texte WORD 7.0 care are posibilitatea să convertească un text în format HTML (poate de asemenea să convertească un fişier HTML într-un fişier 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 găseşte pe Internet la adresa : http://www.haicyon.com/artamedia/webwizard/.

Programul Web Wizard interoghează utilizatorul despre datelelui personale, despre locaţiile oricăror fişiere pe care doreşte 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 locaţia :

http://gnn.com/netizens/construction.html Un pas important pentru instruirea programată şi pentru realizarea

învăţământului la distanţă îl constituie manualele electronice, care, datorită facilităţilor oferite de Internet, pot fi utilizate de un număr nelimitat de elevi, într-un ritm propriu fiecăruia 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 perfecţionare atât a profesorilor de informatica cât şi a profesorilor de alte specialităţi din învăţământul gimnazial şi liceal.

42

Bibliografie

[1 ]Crumlish C.”The ABC’s 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.,Răceanu M., Stanciu C. “World Wide Web, Mosaic şi Nescape” Teora,1996.[7]Taylor D., “Crearea paginilor WEB cu HTML4”,Teora 1998[8]Pătruţ B., “Internet pentru începători ”,Teora 1999

43