Documente Academic
Documente Profesional
Documente Cultură
2018-BRĂILA
1
ATES TAT INF OR MA TIC Ă
Cuprins
1.Motivarea alegerii temei...........................................................................................3
2.Structura şi descrierea lucrării................................................................................5
2.2.1 Despre Wix.....................................................................................................6
2.2.2. Prima pagină…………………………………………………………7-8
2.2.3. Meniurile……………………………………………………………9-10
2.3. Partea grafică.........................................................................................................11
2.3.1. Imaginile.........................................................................................................11
2.3.2. Video..............................................................................................................12
3. Prezentarea lucrării: 1923........................................................................................13
3.1Pagina de început.....................................................................................................13
3.2.Galeria....................................................................................................................13
3.2.1 Constantin Mincea-Liderul………………………………14
3.2.2 Sica Damaschin………………………………………….14
3.2.3 Marius Babei…………………………………………..15
3.2.4.Gigi Corsicanu ………………………………..15-16
3.2.5.Nea Bebita …………………………………16
3.3.Istorie Rapidului.....................................................................................................16
3.3.1 Titlu1967.......................................................................................................16
3.3.2 Povestea Noastra 2006..................................................................................18
3.3.3. Greva Foamei……………………………………………………………...19
3.3.4.Al doilea titlu 1999…………………………………………………….21
3.3.5.O ultima promovare…………………………………………...……….23
3.4.Clasament...............................................................................................................24
3.4.1.Etapa a 8-a ……………………………………………………….…………26
3.4.2.Etapa a 14-a……………………………………………………………………28
3.4.3.Etapa a 12-a…………………………………………………………………….30
3.5. Jucatori de legenda................................................................................................31
3.5.1Daniel Pancu……………………………………………………….31
3.5.2.Daniel Niculae………………………………………………33
3.5.3 Dani Coman……………………………………………..35
2
ATES TAT INF OR MA TIC Ă
3.5.4.Cristi Sapunaru…………………………………………..38
3.5.5.Marius Sumudica……………………………………..40
3.5.6.Viorel Moldovan…………………………………….42
3.6. Imagini..................................................................................................................45
3.7.Blog……………………………………………………………………………....47
3.8.Interviuri………………………………………………………………………….47
4. Detalii tehnice de implementare...............................................................................48
5. Limbaje de programare utilizate..............................................................................50
5.1. Limbajul HTML.............................................................................................50
5.2. Elementele limbajului HTML........................................................................51
6. Resurse hard şi soft necesare.................................................................................60
7. Modalităţi de utilizare..............................................................................................61
8. Bibliografie..............................................................................................................62
3
ATES TAT INF OR MA TIC Ă
2.1.Structura aplicaţiei
Site-ul “1923” contine 68 pagini dintre care:
- Categoria Home conţine o scurta prezentare a ceea ce va cuprinde acest site. Pagina
debuteaza cu Imnul Rapidului avand pe fundal lotul actual al echipei.
- Categoria Galeria prezintă frumosii nebuni ai Giulestiului inca din perioada interbelica .
Aceasta pagina ne arata dragostea unor oameni simpli pentru o echipa de fotbal.
- Categoria Istoria Rapid Bucuresti ne prezinta cea mai frumoasa istorie a unei echipe de
fotbal din Romania. Istoria Rapidului se intinde pe parcursul a 95 de ani , 95 de ani fara vreo
pata , asta e Istoria Rapidului.
- Categoria Clasament prezintă situatia actuala a clubului care se afla in liga a 4-a in lupta cu
adevarata steaua . Se anunta un an greu , insa scopul e unul singur, promovarea.
- Categoria Jucatori de legenda ilustează doar cativa jucatori de legenda care au jucat sub
Podul Grant . Toti cei mentionati s-au dedicat trup si suflet pentru echipa, unii aducand bani
de acasa pentru a stimula jucatorii.
- Categoria Imagini ilustreaza spiritul giulestean. Imaginile sunt cu scopul de a ne arata si
plasa in ceea ce inseamna farmecul vietii , RAPID .
- Categoria Blog conţine stiri de ultim moment si nu numai. Aici este posibilitatea de a se
discuta stirile care apar si de a ne aminti despre rapidul din trecut.
4
ATES TAT INF OR MA TIC Ă
5
ATES TAT INF OR MA TIC Ă
BLOG
Jucatori
GALERIA
de
LUI
RAPID legenda
!
RAPID
BUCURESTI ! Istoria
RAPIDULUI
DIN
Clasament
GIULESTI
Contact Imagini
6
ATES TAT INF OR MA TIC Ă
2.2.Descrierea lucrării
7
ATES TAT INF OR MA TIC Ă
Prima pagina a lucrării se poate încărca o dată cu accesarea paginii Acasa.html care are titlul
descris în urmatoarea secvenţă din codul sursa: <title>Acasa|secreteleistoriei</title>.
8
ATES TAT INF OR MA TIC Ă
Header-ul primei pagini, dar şi al celorlaltor pagini a fost creat cu ajutorul unui slideshow, utilizând
una din funcţionalităţile oferite de Wix , dar şi a aplicaţiei ArcSoft Panorama Maker Pro 5. Acesta
cuprinde 3 imagini ce se rotesc la un interval de 5 secunde , indiferent de pagina accesată.Poţi crea o
imagine perfectă (Panoramă), din mai multe fotografii sau clipuri video folosind acest program
mass-media de gestionare cu instrumente de editare foto care sunt oferite pentru a organiza mai bine
sursele. Codul sursă pentru inserarea acestor imagini:
<imgsrc="Egypt6.JPG"width="980"height="529"border="0"position=”absolute”>,<imgsrc="descar
care.png"width="980"height="529"border="0"position=”absolute>,<imgsrc="lupuldacic.jpg"width
="980px"height="529px" border="0" positon=”absolute”>.
De asemenea , se remarcă prezenţa numeroaselor elemente de design inserate cu ajutorul funcţiei
HTML Code. De exemplu , codul sursă folosit pentru introducerea aşa numitului Flag Counter este :
<a href="http://info.flagcounter.com/mhEx"> <img src=" http://s11. flagcounter.com/count/
mhEx
/bg_FFFFFF/txt_000000/border_CCCCCC/columns_2/maxflags_1/viewers_0/labels_0/pageviews_
0/flags_0/" alt="Flag Counter" border="0"> </a>.
Îmbinarea informaţiilor istorice cu fotografiile şi aplicaţiile atent selecţionate conferă vizitatorului
senzaţia de confort , provocându-l să pătrundă din ce în ce mai mult într-o lume necunoscută ,
continuându-şi astfel periplul istoric prin acceserarea celorlalte pagini ale site-ului.
2.2.3. Meniurile
9
ATES TAT INF OR MA TIC Ă
La o primă vedere, în cadrul site-ului, se pot observa 9 meniuri, împreună cu cel de revenire la
pagina principală. Acestea sunt: HOME, GALERIA, ISTORIA RAPID
BUCURESTI,CLASAMENT,JUCATORI DE LEGENDA,IMAGINI,BLOG,INTERVIURI şi
CONTACT. Programul folosit pentru realizarea lucrării a permis însă crearea unei bare de navigaţie
dinamice la trecerea cursorului mouse-lui pe deasupra precum se poate observa în imaginea de mai
jos.
Inserarea meniului prezentat în imaginea de mai sus s-a facut în cadrul următorului pasaj din codul
sursă:
<!--NAMO_NAVBAR_START T H C h -1 2 3 5 4 6 -->
<div align="center">
<img src="nav/nav_2_index_btn_homeh.gif" name="nav_index_TH0"
border="0"class="namo-hibutton2"alt="Acasa"align="texttop"><a
href="Home.html"onmouseover="na_change_img_src('nav_index_TH1', 'document',
'nav/nav_2_acasa_thr.gif', true);"
onmouseout="na_restore_img_src('nav_index_TH1', 'document');"><img
src="nav/nav_2_europa_th.gif" name="nav_index_TH1"
border="0" class="namo-button2" alt="Home" align="texttop"></a><a href="Galeria.html"
onmouseover="na_change_img_src('nav_index_TH2', 'document', 'nav/nav_2_Galeria_thr.gif',
true);"
onmouseout="na_restore_img_src('nav_index_TH2','document');"><imgsrc="nav/nav_2_preistori
e_th.gif" name="nav_index_TH2"
border="0" class="namo-button2" alt="Preistorie" align="texttop"></a><a href="links.html"
onmouseover="na_change_img_src('nav_index_TH3', 'document', 'nav/nav_2_links_thr.gif',
true);"
10
ATES TAT INF OR MA TIC Ă
onmouseout="na_restore_img_src('nav_index_TH3','document');"><imgsrc="nav/nav_2_links_th.
gif" name="nav_index_TH3"
border="0" class="namo-button2" alt="Mai mult" align="texttop"></a></div>
<!--NAMO_NAVBAR_END-->
De asemenea a fost posibilă crearea unor submeniuri în cadrul meniului Rapid Bucuresti: HOME,
GALERIA, ISTORIA RAPID BUCURESTI,CLASAMENT,JUCATORI DE
LEGENDA,IMAGINI,BLOG,INTERVIURI şi CONTACT, continand fiecare cel putin 3 submeniuri .
11
ATES TAT INF OR MA TIC Ă
Fiecare dintre submeniuri se deschide prin intermediul unei pagini proprii, iar calea spre pagina
respectivă este redată sub forma unui buton, realizat tot cu ajutorul meniului programului de lucru,
customizat în funcţie de designul meniului principal.Tranziţia paginilor este de tipul Out-In.
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,2
9,0" namo_flashbutton width="160" height="28">
<param name="movie"value="banner_06.swf">
<param name="play" value="true">
<param name="loop" value="true">
<param name="quality" value="high">
<param name="WMode" value="Window">
<embed width="160" height="28" src="banner_06.swf" play="true" loop="true" quality="high"
WMode="Window" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?
P1_Prod_Version=ShockwaveFlash"></object>.
12
ATES TAT INF OR MA TIC Ă
2.3.2. Video
Meniurile Galerie, Istoria Rapidului , Clasament , Interviuri dar si alte submeniuri in cadrul
acestor meniuri conţin fiecare câte un VIDEO care face posibilă, o dată cu accesarea sa, vizionarea
unor filmuleţe cu diferite dimensiuni, fiecare fiind în temă cu meniul de care aparţine . Toate
fişierele video au fost preluate de pe www.youtube.com şi inserate cu ajutorul funcţiei Video(Add
Video YouTubeLink to) din meniul editorului. Au fost introduse astfel link-uri spre respectivele
videouri , ele putând fi accesate doar în cazul în care utilizatorul are o conexiune stabilă la Internet.
13
ATES TAT INF OR MA TIC Ă
3. Prezentarea lucrării:
acestei echipe.
14
ATES TAT INF OR MA TIC Ă
3.2. Galeria
15
ATES TAT INF OR MA TIC Ă
16
ATES TAT INF OR MA TIC Ă
O echipă mare!
Iar ea a fost adusă de o mână de oameni, pentru că Rapid nu
a avut un lot numeros în acel sezon, însă concentrarea de
valoare a fost decisivă în câştigarea titlului. Fiecare parte a
campionatului 1966 – 1967 a avut un om decisiv, în sensul de
golgheter. Dacă Puiu Ionescu a făcut legea în tur, când a
marcat cinci goluri numai în victoria 8-1 cu Iaşiul, Nichi
Dumitriu a fost jupân în a doua parte a campionatului. La fel
de adevărat este însă că numărul mare de goluri marcat de
cei doi nu ar fi avut aceeaşi importanţă, dacă alţi colegi de-ai
lor nu ar fi fost la datorie atunci când pericolul era mai mare.
18
ATES TAT INF OR MA TIC Ă
19
ATES TAT INF OR MA TIC Ă
Meciul cu echipa din Andorra a fost un galop de sanatate , echipa noastra se afla
dupa cele 2 victorii de 5-0 , in turul 2 preliminar al Cupei Uefa . In acest tur 2
am intalnit echipa Vardar Skopje din Macedonia iar lucrurile incepeau sa
devina un pic mai serioase .
Meciul cu Feyenoord de pe Giuleşti
Rapid a jucat prima mansa acasa la CAMPIOANA OLANDEI ,
FEYENOORD. Totul a inceput cum nu se putea mai prost pentru
noi , Kuyt deschidea scorul pentru echipa olandeza si Rapid era
deja cu un pas afara din Cupa Uefa.In a doua repriza Rapid a
obtinut un penalty transformat de Vasilache iar meciul s-a incheiat
1 la 1, calificarea se juca pe Giulesti. Meciul s-a jucat cu stadionul
plin. Olandezii au inceput tare si dupa doar 20 de minute au avut 3
ocazii clare de gol . Insa golul a cazut in poarta lor si nu a noastra.
Mugurel Buga scapa din marcaj si inscrie cu sansa golul de 1-0 si
2-1 la general care o duce pe RAPID in grupe .O mare surpriza
tocmai se produsese , Rapid eliminase campioana si liderul la zi a
Olandei. Inainte de meci Copos a spus ca nu vom avea sanse insa
Lucescu a tinut sa-l contrazica pe patron si a spus ca ii va elimina
pe olandezi. La final , Razvan s-a descarcat si a aratat un semn
pentru domnul Copos. .La finalul meciului cu Feyenoord, când
nimeni nu mai era la locul lui. Răzvan era în drum spre casă, iar la
masa presei erau prietenii lui Răzvan. Lacrimile de la Doneţk
În acea epopee, a mai existat un moment tulburător. La Doneţk. Rapidul
lui Răzvan învingea Şahtiorul lui Mircea Lucescu, într-un meci despre
care toţi credeau că va fi blat. Tensiunea a erupt la final, la conferinţa de
presă. Răzvan îşi căuta cuvintele cu bărbia tremurând când Mircea, tatăl,
a intrat şi l-a pupat părinteşte pe creştet. Juniorul a început să plângă,
jurnaliştii ucraineni au început să aplude, plângea chiar şi cine nu
înţelegea ucraineană!
20
ATES TAT INF OR MA TIC Ă
21
ATES TAT INF OR MA TIC Ă
22
ATES TAT INF OR MA TIC Ă
23
ATES TAT INF OR MA TIC Ă
25
ATES TAT INF OR MA TIC Ă
3.4. Clasament
Steaua, Dinamo, Rapid, Carmen si Progresul incep
astazi noul sezon de Liga a 4-a.
CSA Steaua, CS FC Dinamo, Rapidul Primariei si
Rapidul proaspat promovat din Liga a 5-a, dar si
doua echipe cu numele "Progresul" incep astazi noul
sezon de Liga a 4-a.
Seria Bucurestiului programeaza si un meci in
nocturna, lucru total atipic pentru acest nivel.
Academia Rapid, echipa sustinuta de Primaria
Sectorului 1, joaca de la ora 20:00 cu Progresul 2005.
26
ATES TAT INF OR MA TIC Ă
3.4.1.Etapa a 8-a .
27
ATES TAT INF OR MA TIC Ă
28
ATES TAT INF OR MA TIC Ă
29
ATES TAT INF OR MA TIC Ă
30
ATES TAT INF OR MA TIC Ă
31
ATES TAT INF OR MA TIC Ă
3.5.Jucatori de legenda
3.5.1 Daniel Pancu
33
ATES TAT INF OR MA TIC Ă
34
ATES TAT INF OR MA TIC Ă
35
ATES TAT INF OR MA TIC Ă
36
ATES TAT INF OR MA TIC Ă
37
ATES TAT INF OR MA TIC Ă
39
ATES TAT INF OR MA TIC Ă
40
ATES TAT INF OR MA TIC Ă
41
ATES TAT INF OR MA TIC Ă
42
ATES TAT INF OR MA TIC Ă
43
ATES TAT INF OR MA TIC Ă
Rapidist de la 8 ani
Cristi Săpunaru despre galeria Rapidului: „De la 8
ani aveam Rapidul în sânge, mergeam în galerie. Am
fost pasionat de mic de Rapid, am fost, sunt și voi
rămâne toată viața. Când ajungi pe Giulești și vezi
acea atmosferă, nu-ți mai trebuie nimic. Galeria
Rapidului este una dintre cele mai frumoase galerii
din lume”
Adaptare grea la FC Porto
Cristi Săpunaru despre experienţa de la FC Porto:
„După trei zile la FC Porto am vrut să mă întorc
44
ATES TAT INF OR MA TIC Ă
45
ATES TAT INF OR MA TIC Ă
46
ATES TAT INF OR MA TIC Ă
47
ATES TAT INF OR MA TIC Ă
48
ATES TAT INF OR MA TIC Ă
3.6 Imagini
În această pagină sunt disponibile fotografii cu jucatorii rapidului din aproape toti anii de existenta a
clubului, vrand sa sublinieze farmecul acestui minunat club , RAPID BUCURESTI.
51
ATES TAT INF OR MA TIC Ă
52
ATES TAT INF OR MA TIC Ă
53
ATES TAT INF OR MA TIC Ă
3.7. BLOG
Aceasta pagina cuprinde stiri despre echipa Rapid bucuresti . La fiecare stire se
poate adauga cate un comentariu lasand loc fiecarui rapidist de a-si exprima
opinia despre ce se mai produce sub „Podul Grant.„
3.8 Interviuri
Aceasta rubric cuprinde un grup de interviuri luate legendelor rapidiste in care se prezinta povestea
lor de viata si pasiunea lor pentru farmecul vietii, Rapid Bucuresti .
54
ATES TAT INF OR MA TIC Ă
Pagina Contact: În acest meniu sunt prezentate câteva date despre locatia
echipei , existând de asemenea şi un contact form prin care vizitatorii îşi pot exprima părerea asupra
site-ului. Printre acestea putem găsi şi câteva link-uri către:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
<meta charset="utf-8"/>
<title>Acasa|secreteleistoriei</title>
<meta name="fb_admins_meta_tag" content=""/>
<link rel="shortcut icon" href="https://www.wix.com/favicon.ico" type="image/x-icon"/>
<link rel="apple-touch-icon" href="https://www.wix.com/favicon.ico" type="image/x-icon"/>
<script type="text/javascript">
var santaBase = 'https://static.parastorage.com/services/santa/1.2254.7';
var clientSideRender = true;
</script>
<script defer src="https://static.parastorage.com/services/third-
party/requirejs/2.1.15/require.min.js"></script>
<script defer src="https://static.parastorage.com/services/santa/1.2254.7/app/main-
r.min.js"></script>
55
ATES TAT INF OR MA TIC Ă
<script>
// BEAT MESSAGE
try {
window.wixBiSession = {
initialTimestamp : Date.now(),
viewerSessionId: 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g,
function(c)
{ var r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8); return v.toString(16); }
)
};
(new Image()).src = 'http://frog.wix.com/bt?
src=29&evid=3&pn=1&et=1&v=1.2254.7&msid=95e8f89c-84f0-4d89-bbc9-5c3b7ab80201&vsi='
+ wixBiSession.viewerSessionId +
'&url=' + encodeURIComponent(location.href.replace(/^http(s)?:\/\/(www\.)?/, '')) +
'&isp=0&st=2&ts=0&c=' + wixBiSession.initialTimestamp;
} catch (e){}
// BEAT MESSAGE END
</script>
<!-- META DATA -->
<script type="text/javascript">
<meta name="fragment" content="!"/>
<!-- DATA -->
<script type="text/javascript">
var adData = {"topLabel":"<span class=\"smallMusa\">(Wix-Logo) </span>Create a <span
class=\"smallLogo\">Wix</span> site!","topContent":"100s of templates<br />No coding
56
ATES TAT INF OR MA TIC Ă
</body>
</html>
5.Limbaje de programare utilizate
HTML (Hypertext Markup Language) este un limbaj creat în scopul de a descrie, în mod text,
formatul paginilor Web; fisierele create în acest limbaj vor fi interpretate de navigatoare, care vor
afisa paginile în forma doritã (cu texte formatate, liste, tabele, formule, imagini, hiperlegãturi,
obiecte multimedia etc.). HTML a apãrut ca o aplicatie ISO standard (apartine standardului SGML -
Standard Generalized Markup Language, specializat pentru hipertext si adaptat la Web).
Asa cum se poate deduce din numele limbajului, HTML descrie caracteristicile de format ale
elementelor incluse prin procedee de marcare. Acestea pot fi asemãnate intuitiv cu marcajele folosite
în tipografie pentru a indica scrierea unui text cu un anumit tip de caractere. Fiecare element va fi
introdus între douã marcaje ("tags", în limba englezã) - de început si sfârsit - (uzual) de forma
<marcaj> … </marcaj>. Caracterele speciale de delimitare a marcajelor "<", ">" permit deosebirea
acestora de textul propriu-zis. De exemplu, pentru textele aldine (îngrosate), marcajul de început
este <B> iar de sfârsit - </B>.
În informaticã, limbajele de marcare sunt foarte convenabile fiindcã comenzile lor pot fi
interpretate simplu. LaTeX-ul, de exemplu, este tot un limbaj de marcare; prin interpretarea
fisierelor .tex descrise în acest limbaj se va genera formatul dorit al documentelor pe diverse tipuri
de sisteme de calcul (în cazul, LaTeX-ului, se obtine uzual format PostScript sau PDF). În schimb,
procesoarele de documente uzuale nu au un limbaj de marcare standardizat, care sã ofere
57
ATES TAT INF OR MA TIC Ă
compatibilitate între diverse tipuri de calculatoare si sisteme de operare. Astfel, se poate spune cã
avantajele aplicãrii limbajelor de marcare constau în portabilitate si flexibilitate: fisierele create cu
ajutorul lor pot fi transferate pe orice tip de sistem, unde vor fi interpretate cu ajutorul unor
programe specifice.
De fapt, procesoarele de texte uzuale folosesc adesea procedee de marcare pentru formatãri (de
exemplu, formatãrile de tip caracter din Word); în acest caz însã, caracterele de control introduse
sunt ascunse iar rezultatul editãrii este direct vizibil ("What You See Is What You Get"). În schimb,
în limbajele de marcare - inclusiv HTML - marcajele sunt introduse în text, astfel încât acestea sunt
exclusiv succesiuni de caractere (litere, cifre, caractere speciale) - fisiere de tip text.
Referitor la legãtura dintre procesoarele de documente uzuale si limbajul HTML, mai trebuie
mentionat faptul cã ultimele versiuni ale editoarelor de documente oferã facilitãti de salvare în
format HTML - de exemplu, Word, începând cu versiunea Microsoft Office '97. Mai mult, toate
produsele incluse în aceastã gamã dedicatã biroticii (MS Office) oferã compatibilitate cu formatul
HTML.
Paginile HTML se pot crea cu orice editor de texte de cãtre utilizatorii care cunosc limbajul
HTML sau, mai simplu, se pot utiliza editoare speciale, în care obiectele se introduc interactiv iar
codul HTML se genereazã automat. Având în vedere cã si în acest caz este utilã cunoasterea
marcajelor generate pentru corectarea eventualelor erori (mai ales în cazul link-urilor), vom prezenta
în continuare entitãtile care se pot introduce în paginile HTML si marcajele caracteristice acestora:
58
ATES TAT INF OR MA TIC Ă
Toate obiectele HTML sunt introduse între marcaje care le definesc; majoritatea acestora
sunt de forma <tip_obiect> (la început) si </tip_obiect> (la sfârsit). Tipul standard al obiectului
poate fi specificat cu majuscule sau minuscule; totusi, se recomandã utilizarea majusculelor fiindcã
astfel marcajele ies în evidentã.
1. marcaje de bazã - cele care delimiteazã pagina / documentul HTML, titlul acesteia si corpul
paginii;
2. marcaje pentru structurarea documentului - care permit introducerea de subtitluri, paragrafe,
linii de delimitare;
3. marcaje pentru formatarea textului si crearea listelor;
4. marcaje pentru crearea hiperlegãturilor (hyperlinks);
5. marcaje pentru introducerea de obiecte - tabele, formule, imagini sau obiecte multimedia
preluate din fisiere, formulare.
Vom descrie în paragrafele urmãtoare, elementele caracteristice fiecãreia din aceste categorii.
Pentru structurarea si organizarea informatiilor din paginile web se pot utiliza frame-uri
(marcajul <FRAME>), 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 HTML.
Mai mentionãm faptul cã în ultimele versiuni ale limbajului HTML si ale browser-elor s-a
introdus posibilitatea integrãrii, respectiv lansãrii în executie prin navigator, a unor aplicatii. Acestea
sunt scrise în limbajul Java, un limbaj cu caracteristici distribuite si obiectuale, adaptat programãrii
în Web; ele se numesc "applet"-uri si se introduc în sursele HTML cu marcajul <APP> sau
<APPLET> . Ultimele versiuni de editoare HTML permit introducerea interactivã a applet-urilor
Java.
Marcaje de bazã
O paginã Web este delimitatã de marcajele <HTML> si </HTML> care indicã începutul si finalul
documentului si contine:
59
ATES TAT INF OR MA TIC Ă
Zona de antet este utilizatã de cãtre programele de cãutare pe site-urile web 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 marcajele <TITLE> … </TITLE>.
Astfel, o formã extrem de simplã a unui document HTML ar putea fi cea din urmãtorul
exemplu:
<HTML>
<HEAD> <TITLE>Titlul documentului </TITLE>
</HEAD>
<BODY>Document HTML foarte simplu</BODY>
</HTML>
Titlurile de capitole sau subtitlurile sunt definite de marcajele <Hn>, unde n este o cifrã între
1 si 6 care specificã nivelul titlului (1 este titlul principal iar 6 corespunde celui mai scãzut nivel).
Astfel:
<H1> … </H1> indicã un subtitlu de nivelul 1
…
<H6> … </H6> indicã un subtitlu de nivelul 6.
linie nouã - cu marcajul <BR>, eventual cu desenarea unei linii orizontale - marcajul <HR>;
paragraf nou - cu marcajul <P> (se insereazã o linie nouã si eventual se face o indentare).
Marcajul </P> desemneazã sfârsitul de paragraf dar este mai rar folosit (se poate omite).
aldine - în acest scop pentru acel text se aplicã marcajele <B>… </B>;
cursive (italice) - pentru acel text se aplicã marcajele <I> … </I>;
subliniate - textul se introduce între marcajele <U> …</U>.
Unele programe mai vechi de navigare nu permiteau reprezentarea acestor formate; în acest caz,
se aplicau alte moduri de evidentiere a textelor respective (culori, video invers).
60
ATES TAT INF OR MA TIC Ă
<FONT SIZE=x COLOR=y> … </FONT> , care indicã utilizarea unui font de dimensiune x si
culoare y.
x poate fi un numãr între 1 si 12, indicând mãrimea exactã, sau un numãr cu semn, indicând
mãrimea relativã la dimensiunea curentã.
y poate fi numele unei culori standard, specificatã în limba englezã si între ghilimele, sau,
eventual, descompunerea unei culori în componentele RGB, sub formã hexazecimalã (câte
douã cifre hexa pentru fiecare componentã).
Suplimentar, se pot crea pagini de stiluri, în care sã se defineascã stiluri logice, modificabile ulterior;
în acest scop, se folosesc marcajele <DN> - definitie, <EM> - punere în evidentã, <STRONG> -
accentuare puternicã.
Pentru tastaturile care suportã numai codurile ASCII, caracterele speciale se pot crea folosind
formatul &nume_caracter - de exemplu, è pentru e. Având în vedere semnificatia specialã a
caracterelor <, > si &, aparitia lor în documente trebuie specificatã sub forma caracterelor speciale:
< , > , respectiv & .
<head>
<title>Pagina simpla</title>
</head>
<body>
<p>Acesta este un exemplu simplu de o
pagina HTML. Ea arata cum
pot aparea caractere <strong>bold</strong>, <em>italic</em>,
<font size="5">mai mari</font>,
<font size="1">mai mici</font>,
respectiv insera
o mica imagine
<img src="Handshake8114.gif"
width="20" height="14">.
</p>
</body>
</html>
61
ATES TAT INF OR MA TIC Ă
textul este extins pentru a ocupa întregul ecran si este afisat cu un corp de literã diferit fatã
de sursa HTML;
terminatorii de linie nu sunt respectati;
spatiile albe suplimentare din documentul sursã sunt ignorate.
Introducerea obiectelor de tip imagine (marcajul <IMG>) este detaliatã mai jos.
Limbajul HTML permite definirea mai multor tipuri de liste si imbricarea lor (includerea
unor liste în altele), caz în care trebuie verificatã cu atentie corespondenta dintre marcajele de
început si sfârsit pentru fiecare listã. Formatarea listelor la afisarea paginii (introducerea bulinelor,
numerotãrii etc.) se face de cãtre programul de navigare.
Elementele listelor se introduc între marcajele <LI> … </LI> ("list item"). Modul de aparitie
al elementelor depinde de tipul de listã în care sunt incluse (cu buline, numerotate etc.), determinat
de marcajul specific.
Listele utilizate cel mai frecvent sunt cele ordonate si neordonate. Prezentãm în continuare un
exemplu simplu de paginã HTML care contine aceste tipuri de liste.
62
ATES TAT INF OR MA TIC Ă
<html>
<head>
<title>Pagina cu liste</title>
</head>
<body>
<ul>
<li>neordonate</li>
<li>ordonate</li>
</ul>
<ol>
<li>primul element;</li>
<li>al doilea element...</li>
</ol>
</body>
</html>
63
ATES TAT INF OR MA TIC Ă
adrese URL - astfel se asigurã accesul în cadrul procesului de navigare (prin protocoale
specifice), nu numai la paginile web, ci si la diverse servicii Internet;
fisiere / resurse locale adicã aflate pe acelasi calculator cu pagina creatã - link-uri locale ;
acestea ar putea fi accesate si printr-un URL cu protocolul "file" dar pentru mai multã
simplitate, este suficientã specificarea numelui si cãii fisierului local;
În fiecare din aceste cazuri, un click pe textul sau imaginea respectivã va determina activarea
legãturii si afisarea prin intermediul navigatorului a resursei asociate link-ului.
Resursa asociatã unei legãturi este descrisã prin parametrii marcajului <A>:
HREF - permite asocierea unei adresei URL, 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 link intern;
O legãturã internã cãtre o zonã a documentului curent se indicã folosind marcajul <A
NAME="nume-zona">.
În HTML 3.0 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: texte, figuri
sau chiar alte tabele. Se pot realiza reuniri de celule (de exemplu, 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.
Antetul tabelului se poate indica între marcajele <TH>…</TH> ("Table Header"), pentru
trecerea la o linie nouã se utilizeazã marcajul <TR> ("Table Row") iar celulele individuale se
marcheazã cu <TD> ("Table Data"), eventual cu parametru de aliniere. Se mai pot specifica alinieri
orizontale sau verticale ale celulelor, grupãri de celule etc. Aceste marcaje permit navigatorului sã
afiseze diferentiat informatiile din tabel.
<HTML>
<HEAD>
<TITLE>Pagina cu tabel</TITLE>
</HEAD>
<BODY>
<H1>Aceasta pagina da un exemplu de folosire a unui tabel</H1>
<H3>Vanzari anuale:</H3>
<TABLE> <TH>1996</TH><TH>1997</TH><TH>1998</TH><TR>
<TD>125 milioane lei</TD><TD>160 milioane lei</TD><TD>231 milioane lei</TD>
</TABLE>
</BODY>
</HTML>
Includerea imaginilor se face folosind marcajul <IMG>, care are parametri specifici:
SRC indicã (dupã semnul '=') URL-ul imaginii, respectiv calea fisierului dacã acesta este
local; uzual, se acceptã fisiere în format GIF sau JPEG;
ALLIGN controleazã alinierea imaginii fatã de limita inferioarã a textului (TOP, MIDDLE
sau BOTTOM); este un parametru optional;
ALT furnizeazã textul afisat în locul imaginii dacã utilizatorul dezactiveazã optiunea de
afisare a imaginilor (parametru optional);
ISMAP este un indicator optional pentru imaginile care sunt hãrti selectabile.
65
ATES TAT INF OR MA TIC Ă
Formulare. HTML 1.0 permitea uzual doar transferarea informatiilor de la furnizori cãtre
utilizatori, transferul în sens invers fiind foarte dificil. Odatã cu dezvoltarea Web-ului si mai ales cu
utilizarea sa în scopuri comerciale si în diverse alte domenii, s-a fãcut simtitã necesitatea
comunicãrii în dublu sens pentru preluãri de comenzi, completarea unor fise de înregistrare,
distribuirea de produse soft, administrarea de chestionar, transmiterea unor informatii personale etc.
Acestea au fost motivatiile introducerii formularelor în HTML 2.0.
Formularele contin obiecte de control care permit utilizatorilor introducerea de informatii prin
completarea unor câmpuri specifice (casete de text), prin selectarea sau activarea unor optiuni
(comutatoare, grupuri sau liste de optiuni). Aceste informatii vor fi transmise, dupã activarea
butonului SUBMIT (echivalentã cu tastarea lui <Enter>) proprietarului paginii, introduse în baze de
date dedicate si prelucrate cu aplicatii specifice.
Formularele se introduc prin marcajelele <FORM> ... </FORM> , cãrora li se ataseazã parametri
specifici care definesc metodele de transmitere si tratare a datelor. Un formular poate contine obiecte
de control de diverse tipuri, definite cu marcajul <INPUT> si o varietate de parametri care stabilesc,
pentru obiectul definit, tipul, dimensiunea si modul lui de afisare. Astfel, se pot crea câmpuri de text
(care vor fi completate cu texte de cãtre utilizator), liste de alternative, comutatoare, grupuri de
optiuni, butoane, hãrti active etc.
Datele preluate prin intermediul formularelor se trateazã conform standardului CGI (Common
Gateway Interface) prin intermediul unor programe sau script-uri CGI. În plus, un asemenea script
poate interactiona cu baza de date creatã pentru realizarea unor actiuni specifice (de exemplu, hãrtile
active folosesc script-uri CGI pentru a executa diferite actiuni, în functie de zona selectatã de
utilizator).
Script-urile CGI pot executa si alte operatii decât prelucrarea formularelor, producând iesiri
convenabile. Dacã o hiperlegãturã indicã spre un script CGI, la selectarea legãturii se va executa
script-ul (cu anumite variabile de context care retin diverse informatii de stare). Script-ul va produce
un fisier, de exemplu o paginã web, care va fi interpretat(ã) de navigator. Acest mecanism permite
script-urilor sã genereze, aproape instantaneu, pagini web care sã satisfacã diverse cerinte ale
utilizatorilor, furnizând anumite rãspunsuri asteptate în urma unor actiuni.
Crearea interactivã a formularelor, folosind produse soft specializate în realizarea de pagini Web
este relativ accesibilã pentru utilizatorii familiarizati cu caracteristicile obiectelor de control
specifice aplicatiilor soft dar tratarea ulterioarã a informatiilor transmise necesitã cunostinte de
specialitate.
Numele, simbolurile si procedura de introducere interactivã dintr-un editor HTML (de exemplu,
Microsoft Front Page) a obiectelor de control sunt extrem de apropiate de cele asociate obiectelor
similare din formularele sau rapoartele Microsoft Access. Pentru utilizatorii mai putin avizati însã,
crearea, chiar interactivã, a formularelor este mai dificilã.
66
ATES TAT INF OR MA TIC Ă
Resurse minime :
1) Hardware :
- Procesor (CPU) : 500 MHz +
- Memorie (RAM): 64 MB
- Spaţiu liber pe hard-disk : 30 MB
- Monitor :1024*768
2) Software :
- Sistem de operare : Windows 98/XP
- Un browser oarecare: Internet Explorer , Mozilla Firefox , Opera , Google Chrome etc.
Resurse recomandate:
1) Hardware :
- Procesor (CPU) : 1000 MHz +
- Memorie (RAM): 128 MB+
- Spaţiu liber pe hard-disk : 30 MB
- Monitor : VGA 32-bit color (1024x768)
2) Software :
- Sistem de operare : Windows XP , Windows 7
- Un browser oarecare: Internet Explorer , Mozilla Firefox , Opera , Google Chrome etc.
67
ATES TAT INF OR MA TIC Ă
Pentru o rulare normală a site-ului, este necesară instalarea în sistem (recomandat Pentium 3 sau mai
performant) a programului Java , a plugin-ului Adobe Flash Player şi a QuickTime Player-ului.
4.1. Programe utilizate
68
Microsoft Word 2007 Google Chrome
ArcSoft Panorama Maker Pro 5
Paint
Aneesoft 3D Flash Gallery
Adobe Photoshop CS5
7. Modalitǎţi de utilizare
Domenii de utilizare
Lucrarea prezentată are un scop informativ, însă şi educativ. Poate fi folosită cu uşurinţă ca
material auxiliar în şcoli şi licee , adresându-se însă şi altor persoane dornice de informaţii istorice
inedite. Puteţi astfel să vă îmbunătăţiţi cunoştinţele privind istoria, etimologia, originile , dar şi
aspectele economice , sociale şi culturale din trecutul omenirii. Prezenţa imaginilor şi a videourilor
fac posibilă crearea unei păreri din punct de vedere vizual.
Utilizarea site-ului este foarte simplă. Printr-o simplă apăsare a click-ului stânga al mouse-lui
pe unul din butoanele proiectului puteţi ajunge la informaţia dorită.Link-urile din partea de sus a
paginii vă oferă acces la toată informaţia cuprinsă în site. Lansarea se realizează accesând site-ul
gamă largă de informaţii despre cea mai iubita echipa din Romania, RAPID BUCURESTI .
8. Bibliografie
http://ro.wikipedia.org
http://rapidistii.ro
http://www.youtube.com/
http://www.wix.com
https://en.wikipedia.org/wiki/Wix.com
http://rippo.3x.ro/Pagini/caractHTML.htm
http://rippo.3x.ro/Pagini/elemLimbHtml.htm