LIMBAJUL HTML

LECTIA 14
CR E A R E A UNE I PAG I NI P E R S O NA LE
NOŢIUNI PREZENTATE
• etape în construirea unui site
• publicarea site-ului pe web

• În cele ce urmează vom construi o pagină personală. Denumirea de

pagină personală este larg folosită în sensul de site personal, adică o
colecție de fișiere HTML care prezintă informații legate de o persoană
Nu există o rețetă universală în crearea unui astfel de site, dar vom
încerca să vă organizăm modul de lucru şi să căpătați din start
elemente care se coagulează, de obicei, după o anumită perioadă de
experiență.
Crearea unui site ar fi indicat să cuprindă
următoarele etape:
1. stabilirea tematicii şi a modulelor site-ului;
2. pregătirea materialului necesar: înainte de începerea efectivă a site-ului este bine să adunați în
fişiere informația (text, imagini) ce va fi folosită în site; ulterior veți construi mai repede paginile
HTML luând textele adunate anterior şi prin copiere-lipire le puteți introduce în pagini web,
urmând doar să rearanjați conținutul (aplicare de font, culoare etc.);
3. conceperea unui cadru de design al site-ului (desen pe hârtie - cum vreți să arate prima pagină
etc.), stabilirea culorilor (încercați să nu folosiți mai mult de trei culori), eventual crearea unei
hărți a site-ului (cum trebuie navigat pentru a ajunge de la o pagină A la o pagină H);
4. pregătirea zonei de lucru şi a instrumentelor necesare;
5. crearea efectivă a fişierelor HTML;
6. testarea;
7. publicarea site-ului pe web.
• De obicei crearea unui site este mai uşoară şi mai puțin costisitoare
decât multiplele modificări ulterioare. Un site trebuie să fie o
construcție "vie", cu un conținut mereu actualizat, reorganizat,
îmbunătățit. De aceea, un dezvoltător mai mult modifică decât să
construiască de la zero.
Etapa 1 - Stabilirea tematicii şi a modulelor
site-ului
• Acesta este punctul de plecare în construcția site-ului. Trebuie să
stabiliți o tematică a site-ului, pe care evident o puteți îmbogăți
ulterior. Aceasta defineşte orientarea generală a site-ului şi este bine
să fie indicată clar şi prin compoziția primei pagini.
• Noi vrem să construim un site a cărui tematică este "pagina
personală". Proprietarul unui astfel de site îşi poate prezenta aici
preocupările, experiența, fotografii etc.
• În cele ce urmează vom construi o "pagină personală" pentru un
personaj imaginar, Ion Popescu. Aceasta va cuprinde modulele: prima
pagină (descriere generală), curriculum vitae, album, orar şi contact.
Etapa 2 - Pregătirea materialului
• Puteți pregăti în fişiere Word sau fişiere text (.TXT) materialele pe
care vreți să le prezentați în site. De exemplu, vă puteți pregăti un
fişier în care se află CV-ul, adunați imaginile care doriți să apară în site
etc.
Etapa 3 - Conceperea unui cadru de design
• Desenați pe hârtie compoziția site-ului. Aceasta trebuie să reflecte
structura frame-urilor, în cazul în care site-ului foloseşte astfel de
cadre, compoziția paginilor, modul de navigare de la o pagină la alta.
• Încercați să optimizați din start configurația s/te-ului, astfel încât
acesta să se încarce uşor (folosiți observațiile prezentate în lecția 13).
Este indicat ca prima pagină a site-ului să nu depăşească 100KB, de
aceea încercați ca aceasta să nu fie prea încărcată.
 Frame sus – permanent

Frame meniu – permanent

Frame info – aici se vor încărca paginile cu informații

Frame jos - permanent

• Aşadar vom folosi o structură cu patru frame-uri:

• sus: va fi un frame permanent (vizibil tot timpul) în care vom prezenta tema site-
ului;
• meniu: va fi un frame permanent care va conține meniul de navigare;
• info: în acest frame se vor încărca paginile cu informații, atunci câ^: vizitatorul
selectează o anumită pagină din meniu;
• jos: frame permanent în care vom prezenta informații legate de Copyright sau de
constructorul site-ului.

• Toate paginile care se vor încărca în frame-ul info vor avea fundal alb
restul frame-urilor vor fi colorate cu nuanțe de albastru.
Etapa 4 - Pregătirea zonei de lucru şi a
instrumentelor necesare
• Zona de lucru:
• Pregătiți un director în care veți construi site-ul. Aici veți depune fişierele HTML şi
imaginile aferente. Nu amestecați fişierele HTML cu imaginile. Imaginile trebuie
stocate într-un subdirector al directorului curent.
• Nu folosiți nume de fişiere (HTML, imagini) sau directoare care conțin spații. în
loc de spații, puteți folosi caracterul underscore (_).
EXEMPLU Folosiți "index_album.html" în loc de "index [Link]".

• Pentru a denumi fişierele HTML şi imaginile folosiți fie numai litere

mici fie numai litere mari. Majoritatea server-elor web sunt case-
sensitive şi folosirea amestecată de litere mici şi mari poate conduce
uşor la greşeli de legare a paginilor.
• Instrumente necesare:
• În acest pas trebuie să stabiliți cum veți construi paginile HTML: veți
folosi un editor specializat şi, dacă da, care, sau veți scrie paginile "de
mână" în totalitate, cu un editor text de tip NotePad? Editoarele
specializate conduc evident la un timp mult mai scurt în construcție,
dar un editor bun nu este gratis şi, de asemenea, trebuie învățat cum
să lucrați cu fiecare editor în parte.
• Pentru un site personal, aşa cum ne-am propus noi să construim,
puteți scrie toate paginile "de mână" cu un editor text tip NotePad.
lată un exemplu de folosire a editorului NotePad:
Etapa 5 - Crearea efectivă a site-ului
sus: Ion Popescu - Pagină Personală

meniu: prima pagină, cv, album, orar, contact

info - aici se vor încărca paginile cu informații

jos - copyright
Vom avea de construit mai multe pagini:
1. [Link] care se va încărca în frame-ul sus;
2. [Link] care se va încărca în frame-ul "meniu" şi va conține link-un la paginile cu
informații;
3. [Link] care se va încărca în frame-ul de jos;
4. [Link] aceasta va fi prima pagină, adică cea care se va încărca inițial în frame-ul "info";
5. [Link] va conține cv-ul;
6. [Link] va fi o pagină cu imagini de familie;
7. [Link] conține orarul;
8. [Link] va conține informații de contact pentru Ion Popescu;
9. [Link] aceasta este pagina care se încarcă prima din tot site-ul ea va fi o pagină care
descrie compoziția site-ului. Încărcarea ei conduce la încărcarea automată a paginilor
[Link], [Link], [Link] şi [Link] în structura prezentată anterior.
Vom prezenta construcția fiecărei pagini în parte:

[Link]

Pagina nu va avea titlu deoarece titlul

care se va observa în browser va fi cel
specificat în [Link]. Este o pagină cu
un funda albastru (#336699) care conține
tema site-ului, scrisă cu font Verdana de
culoare albă.
[Link]

Pagina va avea fundal galben. Link-urile vor avea

culoarea neagră mai puțin cele active care vor fi roşii.
Link-urile active, să reamintim, sunt cele pentru care
pagina corespunzătoare este încărcată. Când pagina
corespunzătoare unui link se va încărca la
noi în frame-ul "info”.
[Link]
Observați folosirea
entității speciale ©
pentru introducerea
caracterului ©
 [Link]

Observați indentarea textului prin folosirea tag-ului <BLOCKQUOTE>

[Link]
[Link]

Pentru album au fost folosite trei imagini:

[Link], [Link] şi [Link] stocate în
subdirectorul "imagini". Fotografiile au
fost dispuse într-un tabel cu border
invizibil: primele două în celule diferite pe
prima linie, iar cea de a treia pe al doilea
rând, într-o celulă care ocupă două celule
standard pe orizontală.
[Link]

Am introdus un orar imaginar

pentru doar două zile.
[Link]
[Link] Observați, în interiorul tag-ul
<HEAD>, prezența cuvintelor
cheie şi a descrierii paginii.
Etapa 6 - Testarea
• Pentru testare, navigați prin tot site-ul de două ori, folosind Internet
Explorer Chrome şi Firefox. Majoritatea navigatorilor web folosesc
aceste browser-e. Dacă paginile se încarcă OK la voi atunci se vor
încărca OK şi pe web.
Etapa 7 - Publicarea site-ului pe web
• Publicarea unui site se poate face în diverse locații:
• server-ul web al şcolii, dacă sunteți elev, student şi şcoala dispune de
un astfel de server;
• server-e de găzduire (hosting) specializate: există o multitudine de
astfel de server-e pe Internet; unele necesită taxă de găzduire, dar
sunt şi server-e care oferă găzduire gratis; acestea din urmă, afişează
de obicei banner-e publicitare la fiecare încărcare a unei pagini
găzduite; banner-ul poate să fie inclus direct în pagina afişată (lucru
destul de supărător, stricând configurația şi aspectul paginii) sau în
pagină separată.
Temă
• încercați să vă construiți un site cu tema "Pagina personală", după
modelul celui din lecție.