Liceul Tehnologic Dimitrie Filisanu

FILIASI
Atestat la Informatica
Chimie Organica-
Hidrocarburi
Indrumator
!rofesor "adulescu "odica

#le$ Ilie Florin Iulian
%&'(-%&')
C*!"I+S
Intodrucere,,,,,,,,--,(
Structura a.licatiei,,,,,-----)
"eali/area a.licatiei,,,,,----0
Limba1ul HT2L,,,,,,,--0
Softul utili/at,,,,,,-,,-'3
2
Introducere
Hidrocarburi este un produs soft care poate fi utilizat
pentru a clasifica tipurile de hidrocarburi. Motivul pentru care
am ales aceast tem a fost pentru a fi folosita
n coli ca material didactic. Elevii vor putea afla in cate clase se
impart hidrocarburile, prin ce se deosebesc unele de altele,
proprietati fizice si reactiile la care sunt supuse.
In acelasi timp, continutul poate folosi oricui vrea sa
acumuleze cunostinte despre aceasta parte a chimiei organice.
3
Structura aplicatiei
Aplicatia este realizata intr-un mod cat mai simplu pentru
a fi accesibila tuturor categoriilor de public.
Pe pagina MENI, in partea de sus se observa clasificarea
hidrocarburilor dupa cum urmeaza !
-alcani"
-alchene"
-alchine"
-arene.
In partea stanga se afla date de contact pentru cei ce vor sa
dispuna de un set de informatii mai amanuntit decat continutul
aplicatiei. Astfel am afisat o adresa Email si un numar de
telefon.
4
Realizarea aplicatiei
Aplicatia a fost realizata cu a#utorul limba#ului $%M&, dar
si '((. )intre cele doua, limba#ul $%M& este cel care contituie
mare parte din aplicatie.
Limbajul HTML
$%M& este o form de marcare orientat ctre
prezentarea documentelor te*t pe o singura pagin, utiliz+nd un
soft,are de redare specializat, numit agent utilizator $%M&, cel
mai bun e*emplu de astfel de soft,are fiind bro,serul ,eb.
$%M& furnizeaz mi#loacele prin care continutul unui
document poate fi adnotat cu diverse tipuri de metadate si
indicatii de redare. Indicatiile de redare pot varia de la
decoratiuni minore ale te*tului, cum ar fi specificarea faptului
c un anumit cuv+nt trebuie subliniat sau c o imagine trebuie
introdus, p+n la scripturi sofisticate, hrti de imagini si
formulare. Metadatele pot include informatii despre titlul si
autorul documentului, informatii structurale despre cum este
mprtit documentul n diferite segmente, paragrafe, liste, titluri
etc. si informatii cruciale care permit ca documentul s poat fi
legat de alte documente pentru a forma astfel hiperlin--uri
.sau ,eb-ul/.
$%M& este un format te*t proiectat pentru a putea fi citit
si editat de oameni utiliz+nd un editor de te*t simplu. %otusi
scrierea si modificarea paginilor n acest fel solicit cunostinte
solide de $%M& si este consumatoare de timp. Editoarele
grafice .de tip 01(I012/ cum ar fi Macromedia
)ream,eaver, Adobe 2o&ive sau Microsoft 3rontPage permit
5
ca paginile ,eb sa fie tratate asemntor cu documetele 0ord,
dar cu observatia c aceste programe genereaz un cod $%M&
care este de multe ori de proast calitate.
$%M& se poate genera direct utiliz+nd tehnologii de
codare din partea serverului cum ar fi P$P, 4(P sau A(P. Multe
aplicatii ca sistemele de gestionare a continutului, ,i-i-
uri si forumuri ,eb genereaz pagini $%M&.
$%M& este de asemenea utilizat n e-mail. Ma#oritatea
aplicatiilor de e-mail folosesc un editor $%M& ncorporat pentru
compunerea e-mail-urilor si un motor de prezentare a e-mail-
urilor de acest tip. 3olosirea e-mail-urilor $%M& este un subiect
controversat si multe liste de mail le blocheaz intentionat.
Editarea i vizualizarea documentelor HTML
Pentru editarea documentelor $%M& se poate utiliza
orice editor de te*te obi nuit .de e*emplu n
&inu* joe, pico, sau Notepad n 0indo,s/. E*ist
o serie de editoare specializate dintre care
recomandm HTML Kit i Ultra Edit. tilizarea
altor editoare fr acceptul cadrului didactic care ine
laboratorele este interzis.
Pentru sistemul &inu*, documentele vor fi stocate n
directorul html aflat n directorul de home al unui
utilizator. Accesarea paginii se va realiza prin
intermediul
adresei http://student.infoiasi.ro/~cont,
unde cont este numele de cont al utilizatorului care
dorete s-i publice pagina pe 0eb.
6
Pagina de start al unui site depinde de serverul pe care
se afl, de regul fiind inde*.html.
Pentru a vedea o pagin 0eb de pe calculatorul local,
din meniul File al navigatorului se va selecta
opiunea pen.n cazul n care utilizm navigatorul
Internet E*plorer, vom apsa pe
butonul !ro"se pentru a vizualiza sistemul de fi iere
i pentru a selecta pagina 0eb dorit /.
Structura general a unui document HTML
5html6
5head6
5title6. . . 57title6
. . .
57head6
5bod86
. . .
57bod86
57html6
Elementele limbajului HTML
%oate obiectele $%M& sunt introduse ntre marca#e care le
definesc" ma#oritatea acestora sunt de forma 5tip9obiect6 .la
nceput/ si 57tip9obiect6 .la sf+rsit/. %ipul standard al obiectului
poate fi specificat cu ma#uscule sau minuscule" totusi, se
recomand: utilizarea ma#usculelor fiindc: astfel marca#ele ies n
evident:.
Ma#oritatea navigatoarelor permit vizualizarea paginii
curente n formatul surs: $%M& .forma pe care o interpreteaz:
7
pentru afisarea paginii/. &a interpretare, programele de navigare
ignor: spatiile si 5Enter6-urile, aplic+nd formatarea specificat:.
E*ist: ns: si marca#e cu parametri" acestea au forma
5tip9obiect param;<valoare; param=<valoare= >6. )e
e*emplu, obiectele de tip imagine sunt introduse cu
delimitatorul 5IM26, care are diversi parametri. Pentru
definirea hiperleg:turilor se foloseste marca#ul 5A6, care are de
asemenea parametri proprii.
'odurile de marcare $%M& pot fi clasificate n urm:toarele
categorii!
;. marca#e de baz: - cele care delimiteaz: pagina 7
documentul $%M&, titlul acesteia si corpul paginii"
=. marca#e pentru structurarea documentului - care permit
introducerea de subtitluri, paragrafe, linii de delimitare"
?. marca#e pentru formatarea te*tului si crearea listelor"
@. marca#e pentru crearea hiperleg:turilor .h8perlin-s/"
A. marca#e pentru introducerea de obiecte - tabele, formule,
imagini sau obiecte multimedia preluate din fisiere,
formulare.
Bom descrie n paragrafele urm:toare, elementele
caracteristice fiec:reia din aceste categorii.
Pentru structurarea si organizarea informatiilor din paginile
,eb se pot utiliza frame-uri .marca#ul 53CAME6/, prin care la
un moment dat se afiseaz: mai multe ferestre contin+nd fiecare
c+te o pagin:. Introducerea si gestiunea frame-urilor se
realizeaz: foarte convenabil folosind editoarele $%M&.
Mai mention:m faptul c: n ultimele versiuni ale limba#ului
$%M& si ale bro,ser-elor s-a introdus posibilitatea integr:rii,
respectiv lans:rii n e*ecutie prin navigator, a unor aplicatii.
Acestea sunt scrise n limba#ul 4ava, un limba# cu caracteristici
distribuite si obiectuale, adaptat program:rii n 0eb" ele se
numesc DappletD-uri si se introduc n sursele $%M& cu marca#ul
5APP6 sau 5APP&E%6 . ltimele versiuni de editoare $%M&
permit introducerea interactiv: a applet-urilor 4ava.
8
Marcaje de baz
E pagin: 0eb este delimitat: de marca#ele 5$%M&6 si
57$%M&6 care indic: nceputul si finalul documentului si
contine!
zon: de antet cuprins: ntre marca#ele! 5$EA)6 >
57$EA)6 si
un corp delimitat de marca#ele! 5FE)16 >
57FE)16.
Gona de antet este utilizat: de c:tre programele de c:utare pe
site-urile ,eb si permite specificarea titlului paginii care va fi
afisat de navigator .nu apare propriu-zis n continutul paginii/.
titlul, introdus n antet, este cuprins ntre marca#ele 5%I%&E6 >
57%I%&E6.
Astfel, o form: e*trem de simpl: a unui document $%M&
ar putea fi cea din urm:torul e*emplu!
5$%M&6
5$EA)6 5%I%&E6%itlul documentului 57%I%&E6
57$EA)6
5FE)16)ocument $%M& foarte simplu57FE)16
57$%M&6
Marcaje pentru structurarea documentului
Programele de navigare asigur: afisarea diferentiat: a unot
titluri si subtitluri pentru sectiunile paginii, dup: criteriile
implementate n acest scop la conceperea sa .litere mai mari sau
mai mici, diverse culori, litere aldine sau simple, unul sau mai
multe r+nduri libere dup: titlu etc./.
%itlurile de capitole sau subtitlurile sunt definite de
marca#ele 5$n6, unde n este o cifr: ntre ; si H care specific:
nivelul titlului .; este titlul principal iar H corespunde celui mai
sc:zut nivel/. Astfel!
9
5$;6 > 57$;6 indic: un subtitlu de nivelul ;
>
5$H6 > 57$H6 indic: un subtitlu de nivelul H.
Pentru separarea zonelor paginii se pot folosi treceri la!
linie nou: - cu marca#ul 5FC6, eventual cu desenarea unei
linii orizontale - marca#ul 5$C6"
paragraf nou - cu marca#ul 5P6 .se insereaz: o linie nou:
si eventual se face o indentare/. Marca#ul 57P6
desemneaz: sf+rsitul de paragraf dar este mai rar folosit
.se poate omite/.
Marcaje pentru formatarea textului si crearea listelor
3ormat:rile uzuale de te*te permit scrierea cu caractere!
aldine - n acest scop pentru acel te*t se aplic: marca#ele
5F6> 57F6"
cursive .italice/ - pentru acel te*t se aplic: marca#ele 5I6
> 57I6"
subliniate - te*tul se introduce ntre marca#ele 56 >
576.
nele programe mai vechi de navigare nu permiteau
reprezentarea acestor formate" n acest caz, se aplicau alte
moduri de evidentiere a te*telor respective .culori, video
invers/.
Alte tipuri de format:ri de caractere care se pot defini se refer:
la!
dimensiunea fonturilor si culori - se va utiliza marca#ul cu
parametri!
53EN% (IGE<* 'E&EC<86 > 573EN%6 , care indic:
utilizarea unui font de dimensiune * si culoare 8.
10
* poate fi un num:r ntre ; si ;=, indic+nd m:rimea e*act:,
sau un num:r cu semn, indic+nd m:rimea relativ: la
dimensiunea curent:.
8 poate fi numele unei culori standard, specificat: n limba
englez: si ntre ghilimele, sau, eventual, descompunerea
unei culori n componentele C2F, sub form: he*azecimal:
.c+te dou: cifre he*a pentru fiecare component:/.
(uplimentar, se pot crea pagini de stiluri, n care s: se
defineasc: stiluri logice, modificabile ulterior" n acest scop, se
folosesc marca#ele 5)N6 - definitie, 5EM6 - punere n
evident:, 5(%CEN26 - accentuare puternic:.
Pentru tastaturile care suport: numai codurile A('II, caracterele
speciale se pot crea folosind formatul Inume9caracter - de
e*emplu, Iegrave" pentru e. Av+nd n vedere semnificatia
special: a caracterelor 5, 6 si I, aparitia lor n documente
trebuie specificat: sub forma caracterelor speciale! Ilt" , Igt" ,
respectiv Iamp" .
Prezent:m n continuare un e*emplu de document $%M&,
precum si modul n care acesta este afisat de Netscape
Navigator.
5J)E'%1PE $%M& PF&I' D-77IE%377)%) $%M&77END6
5html6
5head6
5title6Pagina simpla57title6
57head6
5bod86
5p6Acesta este un e*emplu simplu de o
pagina $%M&. Ea arata cum
pot aparea caractere 5strong6bold57strong6, 5em6italic57em6,
5font size<DAD6mai mari57font6,
5font size<D;D6mai mici57font6,
respectiv insera
11
o mica imagine
5img src<D$andsha-eK;;@.gifD
,idth<D=LD height<D;@D6.
57p6
57bod86
57html6
Mn figura, se observ: c: te*tul propriu-zis al documentului
poate fi delimitat fat: de codurile de marcare, iar formatarea
te*tului din documentul $%M& nu corespunde cu cea afisat: de
programul de vizualizare!
te*tul este e*tins pentru a ocupa ntregul ecran si este
afisat cu un corp de liter: diferit fat: de sursa $%M&"
terminatorii de linie nu sunt respectati"
spatiile albe suplimentare din documentul surs: sunt
ignorate.
Introducerea obiectelor de tip imagine marcajul
!IM"#$ este detaliat mai jos%
&imba#ul $%M& permite definirea mai multor tipuri de
liste si imbricarea lor .includerea unor liste n altele/, caz n care
trebuie verificat: cu atentie corespondenta dintre marca#ele de
nceput si sf+rsit pentru fiecare list:. 3ormatarea listelor la
afisarea paginii .introducerea bulinelor, numerot:rii etc./ se face
de c:tre programul de navigare.
Elementele listelor se introduc ntre marca#ele 5&I6 >
57&I6 .Dlist itemD/. Modul de aparitie al elementelor depinde de
12
tipul de list: n care sunt incluse .cu buline, numerotate etc./,
determinat de marca#ul specific.
Astfel, listele pot fi!
neordonate .cu buline/ - delimitate de marca#ele 5&6 >
57&6 .Dunordered listD/" elementele lor se afiseaz: cu
buline"
ordonate .numerotate/ - delimitate de marca#ele 5E&6 >
57E&6 .Dordered listD/" elementele lor se vor numerota"
de tip meniu - delimitate de marca#ele 5MEN6 >
57MEN6" elementele acestor liste apar ntr-o
reprezentare compact: pe ecran .multicoloan:/"
glosare .liste de definitii/ delimitate de marca#ele 5)&6 >
57)&6 .Ddefinition listD/" elementele acestora au c+te dou:
componente, introduse respectiv cu marca#ele 5)%6
.pentru nume/ si 5))6 .pentru semnificatia asociat:/"
tabele scurte - create cu marca#ul 5)IC6.
&istele utilizate cel mai frecvent sunt cele ordonate si
neordonate. Prezent:m n continuare un e*emplu simplu de
pagin: $%M& care contine aceste tipuri de liste.
5html6
5head6
5title6Pagina cu liste57title6
57head6
5bod86
5p6Aceasta pagina e*emplifica crearea listelor57p6
5p6'ele mai uzual folosite tipuri de liste sunt!
5ul6
5li6neordonate57li6
5li6ordonate57li6
13
57ul6
5p6E lista ordonata este o lista numerotata!
5ol6
5li6primul element"57li6
5li6al doilea element...57li6
57ol6
57bod86
57html6
Exemple de liste ntr-o pagin HTML
Marcaje pentru crearea &iperlegturilor
$iperleg:turile .Dh8perlin-sD/ se introduc cu marca#ele 5A6 >
57A6 .DanchorD/ aplicate asupra unui te*t sau a unei imagini. Ele
se pot crea c:tre!
adrese C& - astfel se asigur: accesul n cadrul procesului
de navigare .prin protocoale specifice/, nu numai la
paginile ,eb, ci si la diverse servicii Internet"
fisiere 7 resurse locale adic: aflate pe acelasi calculator cu
pagina creat: - lin--uri locale " acestea ar putea fi accesate
si printr-un C& cu protocolul DfileD dar pentru mai mult:
14
simplitate, este suficient: specificarea numelui si c:ii
fisierului local"
o zon: din documentul $%M& curent - lin--uri interne.
Mn fiecare din aceste cazuri, un clic- pe te*tul sau imaginea
respectiv: va determina activarea leg:turii si afisarea prin
intermediul navigatorului a resursei asociate lin--ului.
Cesursa asociat: unei leg:turi este descris: prin parametrii
marca#ului 5A6!
$CE3 - permite asocierea unei adresei C&, crearea unei
leg:turi locale prin specificarea numelui si c:ii fisierului
corespunz:tor sau a unei leg:turi interne documentului"
este cel mai important parametru pentru construirea de
hiperleg:turi"
NAME - numele hiperleg:turii sau al zonei dintr-o pagin:
c:tre care se face referirea, n cazul unui lin- intern"
ME%$E)( - metodele de acces .acest parametru se
utilizeaz: doar n prelucr:ri speciale/.
Astfel, un lin- local sau c:tre o adres: C& se poate defini
pe un te*t cu! 5A $CE3<DresursaD6 te*t 57A6.
E leg:tur: intern: c:tre o zon: a documentului curent se indic:
folosind marca#ul 5A NAME<Dnume-zonaD6.
Marcaje pentru introducerea de obiecte
Prima versiune de $%M& .;.L/ nu permitea descrierea
tabelelor sau a informatiilor formatate. Asemenea obiecte
trebuiau create formatat si introduse ca obiect de#a formatat, cu
marca#ele 5PCE6, 57PCE6. Aceste marca#e indicau
navigatorului c: te*tul inclus trebuia afisat caracter cu caracter,
f:r: vreo interventie de formatare. Mn versiunile ulterioare ale
limba#ului $%M&, s-au introdus ns: facilit:ti elegante de
formatare, de includere a tabelelor si a altor obiecte.
15
Mn $%M& ?.L s-au introdus obiectele de tip tabel, formate
din linii orizontale si coloane verticale la a c:ror intersectie se
formeaz: celulele. Acestea pot contine intr:ri diverse! te*te,
figuri sau chiar alte tabele. (e pot realiza reuniri de celule .de
e*emplu, pentru titluri mai lungi/. Atributele de formatare a
tabelului .aliniere, stilul chenarului si marginilor etc./ se
definesc n proiectarea paginii dar modul lor de afisare va
depinde si de programul de navigare.
%abelele se introduc ntre marca#ele 5%AF&E6 >
57%AF&E6, c:rora li se pot atasa .optional/ parametrii
FEC)EC si C&E(. n titlu pentru tabel se poate introduce cu
marca#ul 5'AP%IEN6. 3iecare coloan: se defineste cu marca#ul
5'E&6, av+nd ca parametru A&I2N - modul de aliniere a
informatiilor din acea coloan: .&E3%, 'EN%EC, CI2$%/.
Antetul tabelului se poate indica ntre marca#ele 5%$6>
57%$6 .D%able $eaderD/, pentru trecerea la o linie nou: se
utilizeaz: marca#ul 5%C6 .D%able Co,D/ iar celulele individuale
se marcheaz: cu 5%)6 .D%able )ataD/, eventual cu parametru
de aliniere. (e mai pot specifica alinieri orizontale sau verticale
ale celulelor, grup:ri de celule etc. Aceste marca#e permit
navigatorului s: afiseze diferentiat informatiile din tabel.
Prezent:m n continuare un e*emplu simplu de tabel.
5$%M&6
5$EA)6
5%I%&E6Pagina cu tabel57%I%&E6
57$EA)6
5FE)16
5$;6Aceasta pagina da un e*emplu de folosire a unui
tabel57$;6
5$?6Banzari anuale!57$?6
5%AF&E6
5%$6;NNH57%$65%$6;NNO57%$65%$6;NNK57%$65%C6
5%)6;=A milioane lei57%)65%)6;HL milioane
lei57%)65%)6=?; milioane lei57%)6
16
57%AF&E6
57FE)16
57$%M&6
Softul utilizat
Notepad este un editor de te*te simplu, folosit la scrierea
unor note scurte sau crearea si editarea fisierelor de comenzi. Mn
mod implicit fisierele scrise n Notepad au e*tensia .%P% si
contin strict succesiunile de caractere tastate, fara atribute de
formatare sau obiecte incluse.
Aplicatia Notepad nu permite modificarea fonturilor sau
formatarea te*tului, nsa pune la dispozitia utilizatorului o
functie de cautare a unui sir de caractere .meniul (earch,
optiunea 3ind/, selectarea unei portiuni de te*t prin glisarea
mouse-ului pe te*tul dorit, precum si schimbul de informatie cu
'lipboard-ul .optiunile 'ut, 'op8, Paste din meniul Edit/. )e
asemenea, trebuie retinut faptul ca fereastra de aplicatie Notepad
poate deschide si prelucra la un moment dat un singur fisier te*t.
17
3isierele te*t pot fi tiparite prin intermediul comenzii Print din
meniul 3ile. Mnainte de realizarea imprimarii, utilizatorul are
posibilitatea de a seta formatul paginii pe care se va realiza
tiparirea. Mn acest scop se va folosi optiunea Page (etup din
acelasi meniu 3ile, care afiseaza o fereastra de dialog specifica.
18
19