LECTIA 14

CREAREA UNEI PAGINI PERSONALE

NoTIUNI PREZENTATE
etape în construirea unui site
" publicarea site-ului pe web

Incele ce urmeaz vom construio pagin personal. Denumirea de

adic o
pagin personal este larg folosit în sensul de site personal,persoan.
colecie de fi_iere HTML care prezint informai legate de o
Nu exist oreet universal în crearea unui astfel de site, dar vom
încerca s v organizm modul de lucru _is cptai din start
elemente care se coaguleaz, de obicei, dupå o anumit perioadå de
experient.

Crearea unuisite ar fi indicat s cuprind urmtoarele etape:

1. stabilirea tematicii _i a modulelor site-ului;
2. pregtirea materialului necesar: înainte de începerea efectiv a
site-uluieste bine s adunai în fi_iere informaia (text, imagini) ce va
fifolosit în site; ulterior vei construimai rpede paginile HTML
luând textele adunate anterior i prin copiere-lipire le putetiintroduce
în pagini web, urmând doar s rearanjati coninutul (aplicare de font,
culoare etc.);
3. conceperea unui cadru de design alsite-ului (desen pe hârtie -
cum vrei s arate prima pagin etc.), stabilirea culorilor (încercai s
nufolosii mai mult de trei culori),eventual crearea unei hrti a
site-ului(cum trebuie navigat pentru a ajunge de la o pagin Ala o
pagin H);
4. pregtirea zonei de lucru_i ainstrumentelor necesare:
5. crearea efectiv afi_ierelor HTML;
6. testarea;
7. publicarea site-ului pe web.

136
OBSERVAIE
De obiceicrearea unui site este mai u_oar i maiputin
costisitoare
decât multiplele modificri ulterioare. Un site trebuie s fie o
construcie "vie", cu un coninut mereu actualizat, reorganizat,
îmbuntit. De aceea, un dezvolttor mai mult modific decât s
construiasc de la zero.

Etapa 1- Stabilirea tematici _ià modulelor site-ului

Acesta este punctul de plecare în construcia site-ului. Trebuie s
stabilii o tematic asite-ului, pe care evidento putetiîmbogi ulterior.
Aceasta define_te orientarea general a site-ului i este bine s fie
indicat clar i prin compoziia primei pagini.
Noivrem s construim un site a crui tematic este "pagina personala".
Proprietarul unuiastfel de site î_i poate prezenta aici preocuprile,
experiena, fotografii etc.

În cele ce urmeaz vom construi o "pagin personalä" pentru un

personaj imaginar, lon Popescu. Aceasta va cuprinde modulele: prima
pagin (descriere general), curriculum vitae, album, orar i contact.

Etapa 2- Pregätirea materialului

Putetipregti în fisiere Word sau fi_iere text (.TXT) materialele pe car
Vrei s le prezentai în site. De exemplu, v putei pregti un fi_ier în
care se afl CV-ul, adunai imaginile care doriti såapar în site etc.
Etapa 3- Conceperea unui cadru de design
Desenai pe hârtie compoziia site-ului. Aceasta trebuie s reflecte
structuraframe-urilor, în cazulîn care site-ului folose_te astfelde cadre,
compoziia paginilor, modul de navigare de la o pagin la alta.

OBSERVAIE
Încercai s optimizai din start configuraia site-ului,astfel încât
acesta s se încarce u_or (folosii observaile prezentate în lecia
13). Este indicat caprima pagin a site-ului s nu dep_easc
100KB, de aceea încercai ca aceasta s nu fie prea încrcat.

137
 urmtoarea
Incazul paginii personale a lui lon Popescu noivom folosi
compoziie:
frame sus - permanent
frame meniu - permanent

frame info aici se vor încrca paginile cu informaii

frame jos - permanent

A_adar vom folosio 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 conine meniul de
navigare;
info: în acest frame se vor încrca paginile cu informai, atunci când
vizitatorul selecteaz o anumit pagin din meniu;
jos: frame permanent în care vom prezenta informaii legate de
copyrightsau de constructorul site-ului.
Toate paginile care se vor încrca în frame-ul info Vor avea fundal alb,
restul frame-urilor vor fi colorate cu.nuane de albastru.
Etapa 4- Pregtirea zonei de lucru _i a
Zonade lucru:
instrumentelor necesare
Pregtiti un director în care vei construi site-ul. Aici vei
fi_ierele HTML _i imaginile aferente. Nu amestecati depune
fi_ierele HTML cu
imaginile. Imaginile trebuie stocate într-un subdirector
curent. al directorului
Nu folosii nume de fi_iere
spai. In loc de spaii, putei (HTML, imagini) saudirectoare care Conin
folosi caracterul underscore ( ).
EXEMPLU
Folosii "index_album.html" în loc de "index
album.html".
Pentru denumifi_ierele HTML ^i
a
fie numai litere mari. imaginile folositifie numai litere mici,
folosirea amestecat Majoritatea
de litere miciserver-elor
_i
web sunt
mari poate conduce case-sensitive_l
de legare a paginilor. usor lagre_ell
138
Instrumente necesare:
în acest pas trebuie stabilii cum vei
s
folosi un editor
specializat
mân" în totalitate,
construi paginile HTML: veti
_i, dac da, care,
cu un editor text de tip sau vei scrie paginile "de
specializate conduc NotePad? Editoarele
un editor bun nu esteevident la un timp mult mai scurt în dar
gratis
lucrati cu fiecare editor în
_i, de asemenea, construcie,
trebuie învat cum sa
parte.
Pentru unsite personal, a_a cum ne-am
scrie toate paginile "de mânä" cu un propus noi s construim, putel
editor text tip NotePad. lat un
exemplu de folosire a editorului NotePad:
exemplull - Notepad
Fle Et Seach Help
CHTML><HEADSTITLE>Exemplul 13.1</TITLE></HEAD>
<BODY>
<TABLE WIDTH="400" CELLPADDING="1 BGCOLOR="#ffo000"
<TR><TD> BORDER="0
TABLE WIDTH="1006"CELLSPACING-T" BORDER"0">
<TR
CTD WIDTH="50%" BGCOLOR-"# ffffff>celula1</TD>
<TD WIDTH="5096 BGCOLOR-"#fffffl>celola2</TD>
</TRS
</TABLEX
<JD>
</TR>
</TABLE>
</BODY
</HTML>

Etapa 5-Crearea efectiv asite-ului

S ne reamintim structura site-ului:
sus: lon Popescu -Pagin Personal
meniu: prima pagin, cv, album, orar, contact

info - aicise vor încrca paginile cu informaii

jos - copyright
139
Vom avea de construit mai multe pagini: sus;
1. sus.htmlcare se va încrca în frame-ul "meniu" _i vaconine
2. meniu.html care se va încrca în frame-ul
link-uri la paginile cu informaii; frame-ul de jos;
3. jos.html care se va încrca în care se vaîncrca
4. home. htmlaceasta va fi prima pagin, adic cea
initial în frame-ul "info";
5. cv.html va conine cv-ul;
6. album.htmlva fi o pagin cuimagini de familie;
7. orar.htnl conine orarul;
8. contact. html va conine informaii de contact pentru lon Popescu;
9. index.htmlaceasta este pagina care se încarc prima din tot site-ul:
ea va fi o pagin care descrie compoziia site-ului. Incrcarea ei
conduce la încrcarea automat apaginilor sus.html, meniu.html,
home.html _ijos.html în structura prezentatäanterior.
Vom prezenta construcia fiecrei pagini în parte:
1) sus.html Observaii:
<html> Pagina nuva avea titlu,
<body bgcolor-"#336699" marginheight="10"> deoarece titlulcare se
<div align="center"> va observa în browser

<font size-"4" face="Verdana" color="#FFFFFF">

va fi cel specificat în
index.html. Este o
Ion POPESCU - Pagina Personala pagin cuun fundal
</font>
<b>
albastru (#336699)
<Jdiy>
care conine tema
site-ului, scris cufont
<body> Verdana de culoare
<htm]> alb.
2) meniu.html
<html> Observai:
<body bgcolor-"#FFCCÓ0" marginwidth="â" Pagina va avea fundal
marginheight-"0"
link="#000000" alink="#ff0000" vlink="#000000"> galben. Link-urile vor
<center> avea culoarea neagr,
<font face=-"Verdana" size="2"><b> mai puin cele active
<a href-"home.html" care vor fi ro_i.
<a href-"cv.btml" target="info">prima pagina</a>| Link-urile active, s ne
target-"info">curriculum
<a href"album.html" vitae</a>|
target-"info">album</a>| reamintim, sunt cele
<a href-"orar.html" target="info">orar</a>| pentrucare pagina
<a href-"contact.html" target-"info">contact</a> corespunztoare este
<b></font> Încrcat. Când pagina
</center> Corespunztoare unui
<body> link se vaîncrca la
noiîn frame-ul "info"
140
<html>
link-ul va avea
culoarea ro_ie.
Observai _i
specificarea target-ului
pentru link-uri.
3)jos.html
htm|> Observaii:
áody bgcolor="#336699" marginwidth=-"0" Observati folosirea
text="#FFFFFF"> marginheight="0" entitáii speciale
<div align="center" &copy; pentru
introducerea
<font size="2" face="Verdana"> caracterului.
Copyright &copy; Ion Popescu 2002
<font>
</diy>
<body>
<html>

4) home.html Observaii:
<html> Observai indentarea
<body bgcolor="#FFFFFF" text-"#000000" marginwidth="0" textului prin folosirea
marginheight-"0"> tag-ului
P&nbsp;p> <BLOCKQOUTE>.
blockquote>
<font size="2" face-"Verdana"<b>
Bine ati venit pe pagina mea personala!
<b></font>

<p><font size-"2" face="Verdana">

Ma numesc
<b><font color="#0066FF" size="4">lon Popescu</font><b>
si sunt un elev pasionat de HTML.<font> </p>
<p<font face="Verdana" size="2">In acest site
veti gasi informatii despre preocuparile mele<br>
precum siun album personal.</font><p>
<blockquote>
<body>
<htm>

5) cv.html
<htm>
<body bgcolor-"#FFFFFF" text="#000000" marginwidth="0"
marginheight="0">
p>&nbsp:<p>
blockquote>
<p><font face="Verdana" size="2"
color="#0066FF"><b>Curriculum
141
 Vitae</b></font></p>
<p><font face="Verdana" size="2">>Date generale:</b>
Ion Popescu, elev, 16ani</font></p>
p><font size-"2" face="Verdana"><b>Contact:</b>
<a href-"mailto:ionpopescu@yaho0.com%20">
ionpopescu@yahoo.com <a><font><p>
<p><font face="Verdana" size-"2">cb>Educatie:<b>
Liceul Teoretic de Informatica</font><p>
<p><font face="Verdana"
size="2"><b>Experienta:</b></font><p>
<ul>
<li><font face-"Verdana" size-2"<b>HTML</b>
-nivel avansat</font></li>
<li><font face="Verdana" size="2><b>C++</b>
- nivel avansat</font></li>
<lib<font face-"Verdana" size="2"><b>Pascal</b>
-nivel avansat</font></l>
<ul>
<blockquote>
<body>
<htm>

6) album.html
<htm> Observaii:
Pentru album au fost
<body bgcolor-"#FFFFFF" text="#000000" marginwidth="0"
marginheight-"0"> folosite trei imagini:
<p>&nbsp;:<p> foto1.jpg, foto2,jpg i
<blockquote> foto4.jpg stocate în
<p align="center"> subdirectorul "imagini".
<font face="Verdana" size="2" Fotografile au fost
dispuse într-un tabel
color-"#0066FF"><b>Album</b></font> cu border invizibil:
<table width="200" border="0" cellspacing="0" primele dou în celule
align="center"> cellpadding="3" diferite pe prima linie,
<tr> iar cea de a treia pe al
<tdwidth="100" align="right"><img doilea rând, într-o
height="100"></d> src="imagini/foto2.jpg" celul care ocupãdou£à
<td width="100"><img src="imagini/fotoljpg" celule standard pe
height-"100"></td> orizontal.
</t
<tr>
<tdcolspan="2"
height="100"> align="center"><img src="imagini/foto4.jpg"
<itd>
</tr>
</table>
<blockquote>
</body>
<html>
142
7)orar.html
Observaiü:
<htm|> Am introdus un orar
<body bgcolor="#FFFFFF" text="#000000" marginwidth="o" imaginar pentru doar
marginheight-"0">
dou zile.
q>&nbsp;<p>
<blockquote
<font face="Verdana" siz="2"
alor-"#0066FF"><b>Orar</b></font>
p<font size-"2" face="Verdana"><b>Luni<b><br>
08-10 Informatica<br>
10-12 Matematica</font>

<><font size="2" face="Verdana"><b>Marti</b><br>

08-10 Sport<br>
10-12 Informatica</font>

<blockquote>
<body>
<html>

8)contact.html
<htm>
<body bgcolor-"#FFFFFF" text-"#000000" marginwidth="0"
marginheight-"0">
P&nbsp;<p
blockquote>
p><font size="2" face-"Verdana"
color-"#0066FF"><b>Contact</b></font></p>
p<font size="2"face-"Verdana'">Adresa: <b>Str. Aleea
Rozelor, nr.21</b></font></p>
<p><font size-"2" face="Verdana">E-mail: <b>
<a href-"mailto:ionpopescu@yahoo.com">
1onpopescu@yahoo.com<a>
<b></font>

<blockquote>
<body>
<htm]>

9) index.html
html>
head>
utle>lon Popescu - Pagina Personala</title>
Smeta name-"description" content="lon Popescu - Pagina personala">
Smeta name="keywords" content-"lon Popescu, Popescu lon, lon, Popescu, informatica,
HTML, matematica">
143
<head>

<frameset rows="36, 18, *,20" border-0 frameborder-0>

marginwidth="0"
<framesrc="sus.html" name-"sus" noresize scrolling="no"
marginheight="0">
<frame src="meniu.html" name="meniu" noresize scrolling="no" marginwidth="0"
marginheight="0">
<frame src="home.html" name="info" noresize scrolling="auto" marginwidth="0"
marginheight-"0">
<frame sre="jos.html" name="jos" noresize scrolling="no" marginwith="0"
marginheight="0">
<frameset>
<html>

Observai, în interiorul tag-ul <HEAD>, prezena cuvintelor cheie _ia

descrierii pagini.
Etapa6- Testarea
Pentru testare, navigai prin tot site-ul de dou£ori, folosind Internet
Explorer _i Netscape Navigator. Majoritatea navigatorilor web
folosesc aceste browser-e. Dac paginile se încarc OK la voi atunci se
vor încrca OK _i pe web.
lat cum arta în browser pagina personal a lui lon
selectând pe rând toate optiunile din meniul de Popescu,
navigare:

144
lon Popescu: Pagina Personala - Microsoft Intetnet
Explorer
iew GoFevoitat Hela

Retesh Home Seach Favohtes Hetoy Charnels Ful

D:\html\lecti\lectia14 \index.htrol
Ion POPESCU - Pagina Personala
prima pagina I curriculum vitae | album I grar I contact

Bine ati venit pe pagina mea personalal

Ma numesc Ion Popescu si sunt un elev pasionat de HTML.

In acest site veti gasi informatii despre preocuparile mele

precum si un album personal.

Copyright © Ion PopesCu 2002

O My Compule

lon Popescu- Pagina Personala - Microsoft Internet Explorer

Vie GOavorites Help

Reftesh. Home SearchFovontes Hstory Chames

D:ShlmSlectillecial4 index.html
Ion POPESCU- Pagina Personala
primo ponina TEurriculum yitag I album I orar | contact

Çurriculum Vitae

Date generale: lon. Popescu, elev, 16 ani

Contact: /pnpopescuQyahoo.com
Educatie: Liceul Teoretic de Informatica

Experlenta:
" HTML - nivel avansat
"C++ - nivel avansat
" Pascol - nivel avansat

Copyrnght lon Popescu 2002

OMy Copke
145
lon Popescu - Pagina Personala - Micosoft Inteinel Explorer
File Edi View Go Fvontes Help

Back Reteth Home 5earch Histary Chantels

Address DhimNlectilectia14Nndex htm
Ion POPESCU - Pagina Personala
prima pagina | currlculum vitae Ialbum I orar I contoct

Album

Copyright lon Popescu 2002

lon Popescu - Pagina Per sonala - Microsoft Internet Explorer

Edit Vew Go avotes hen

Beck Rotesl
D: htmNlectiVectia14 irndex html
Ion POPESCU - Pagina Personala
prima pagina | curiculum vtae I album brat I contac

Orar

Lunl.
08-10 Informatica
10-12 Matematica
Martl
08-10 Sport
10-12 Informatica

Copyright CIon Popescu 2002

Done
MyComputer
146
 SlonPopescu Pagina Personala -Miciosoft Intenet Explorer
Fie Edk Vew Go Favortes Hep

Batk Stop Relresh. Home Seach fayorke Hitoy Channek

address D: himNleciNlectia14\irndexhm
Ion POPESCU - Pagina Personala
prima pagina | curriculum vitae l album1grar I contncu

Contact

Adresa: Str. Aleea Rozelor, nr.21

E-mail: ionpopescu@yahoo.com

Copyright Ion Popescu 2002

DMyCurnptte
Bore

Etapa 7-Publicarea site-ului pe web

diverse locai:
Publicarea unuisite se poate face în
server-ul web al _coli, dac suntei elev, student _i _coala dispune
"
de un astfel de server; exist£ omultitudine de
gzduire (hosting) specializate:
server-e de unele necesit tax de gzduire, dar
astfel de server-e pe Internet;
gzduire gratis; acestea din urm,
sunt _iserver-e care ofer publicitare la fiecare încrcare a unei
afi_eaz de obicei banner-e pagina afi_at
fie inclus direct în
pagini gzduite; banner-ul poate s configuraia
destulde suprtor, stricând i aspectul pagin)
(lucru
sau în pagin separat.
REZUMAT câteva etape.
Crearea unui site web trebuie s parcurg
startostructur asite-ului.
" Este important s stabilim din

ExERCITI dup
Incercati s£ v construii un site cu tema "Pagina personal",
modelul celui din lecie.
147