Professional Documents
Culture Documents
Document A Tie
Document A Tie
PROIECT
DE ATESTARE A COMPETENTELOR PROFESIONALE
LA INFORMATICÅ
Roma Antica
Clasa: …….
2020
1
Cuprins
Cuprins
I. Enunt tema......................................................................................................................................3
II. Justificarea alegerii temei...........................................................................................................3
III. Descrierea aplicaţiei....................................................................................................................4
IV. Listing sursa aplicatie.................................................................................................................9
V. Despre softul utilizat.................................................................................................................12
Elementele limbajului HTML..............................................................................................................19
Marcaje de bazã...............................................................................................................................20
Marcaje pentru structurarea documentului......................................................................................20
Marcaje pentru formatarea textului si crearea listelor.....................................................................21
Marcaje pentru crearea hiperlegãturilor...........................................................................................24
Marcaje pentru introducerea de obiecte...........................................................................................25
VI. Concluzii...................................................................................................................................29
VII. Bibliografie...............................................................................................................................30
VIII. Anexe CD/DVD...................................................................................................................30
2
I. Enunt tema
Am ales aceasta tema din dorinta de a crea un mediu online care sa permita ,
intr-un mod dinamic, accesul la informatii despre Roma antica.
Felul in care sunt organizate paginile proiectului ii ofera utilizatorului
posibilitatea de a afla informatii utile ce tin de Roma Antica, intr-un mod placut si
interactiv.
3
III. Descrierea aplicaţiei
Siteul contine o forma principala (home) alcatuita din mai multe butoane (linkuri
spre alte pagini ale siteului) precum:
- Sectiunea Home
- Sectiunea Curiozitati
4
- Sectiunea Razboaie
-Sectiunea Societatea
5
-Sectiunea Galerie
-Sectiunea Video
6
Detalii tehnice
Introducerea imaginilor:
7
Imaginea este introdusa implicit sub imaginea anterioara insa
modificand codul html prin introducerea imaginilor intro lista (tagul
<li>) se obtine pozitionarea actuala.
Crearea legaturilor:
8
IV. Listing sursa aplicatie
Index.html (codul sursa al primei pagini)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--[if lt IE 9]>
<script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<title>Home Page</title>
<link type="text/css" href="documents/textstyles_nf.css" rel="stylesheet">
<link type="text/css" href="documents/print.css" rel="stylesheet" media="print">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery_utils.js"></script>
<!--scripts-->
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<!--menu_java-->
<!--/menu_java-->
<!--endscripts-->
</head>
<body>
<div id="sheet">
<div id="topbar">
<nav><ul id="mmenu"><!--mmenu-->
<li id="ci23"><a id="ma" class="mmenu active" href="index.html" target="_self" aria-
haspopup="true">Home</a>
</li>
<li id="ci33"><a class="mmenu level1" href="alte_curiozitati.html" target="_self" aria-
haspopup="true">Curiozitati</a>
<ul>
<li id="mi33"><a class="smenu" href="alte_curiozitati.html" target="_self">Curiozitati</a></li>
<li id="mi34"><a class="smenu" href="curiozitati_1_.html" target="_self">Curiozitati(1)</a></li>
<li id="mi24"><a class="smenu" href="curiozitati.html" target="_self">Perioada
Imperiului</a></li>
<li id="mi25"><a class="smenu" href="religia.html" target="_self">Religia</a></li>
<li id="mi26"><a class="smenu" href="zeitati.html" target="_self">Zeitati</a></li>
<li id="mi27"><a class="smenu" href="alte_divinitati.html" target="_self">Alte Divinitati</a></li>
<li id="mi28"><a class="smenu" href="dacii_la_roma.html" target="_self">Dacii la Roma</a></li>
<li id="mi32"><a class="smenu" href="mituri_false_1.html" target="_self">Mituri False</a></li>
9
<li id="mi30"><a class="smenu" href="mituri_false_1_.html" target="_self">Mituri
False(1)</a></li>
<li id="mi31"><a class="smenu" href="mituri_false_2_.html" target="_self">Mituri
False(2)</a></li>
<li id="mi29"><a class="smenu" href="mituri_false.html" target="_self">Mituri False(3)</a></li>
<li id="mi35"><a class="smenu" href="moneda.html" target="_self">Moneda</a></li>
</ul></li>
<li id="ci36"><a class="mmenu level1" href="razboaiele_romei.html" target="_self" aria-
haspopup="true">Razboaiele Romei</a><ul>
<li id="mi36"><a class="smenu" href="razboaiele_romei.html" target="_self">Cucerirea
Italiei</a></li><li id="mi37"><a class="smenu" href="luptele_cu_etruscii.html"
target="_self">Luptele cu Latinii</a></li>
<li id="mi38"><a class="smenu" href="italia_de_sud.html" target="_self">Italia de Sud</a></li>
<li id="mi39"><a class="smenu" href="italia_subjugata.html" target="_self">Italia
Subjugata</a></li>
<li id="mi40"><a class="smenu" href="razboaiele_punice.html" target="_self">Primul Razboi
Punic</a></li>
<li id="mi41"><a class="smenu" href="al_doilea_razboi_punic.html" target="_self">Al Doilea
Razboi Punic</a></li>
<li id="mi42"><a class="smenu" href="al_treilea_razboi_punic.html" target="_self">Al Treilea
Razboi Punic</a></li>
</ul></li>
<li id="ci43"><a class="mmenu level1" href="organizarea_sociala.html" target="_self" aria-
haspopup="true">Societatea</a>
<ul>
<li id="mi43"><a class="smenu" href="organizarea_sociala.html"
target="_self">Patricienii</a></li>
<li id="mi44"><a class="smenu" href="plebeii.html" target="_self">Plebeii</a></li>
<li id="mi45"><a class="smenu" href="libertii.html" target="_self">Libertii</a></li>
<li id="mi46"><a class="smenu" href="peregrinii.html" target="_self">Peregrinii</a></li>
<li id="mi50"><a class="smenu" href="justitia.html" target="_self">Justitia</a></li>
</ul></li>
<li id="ci47"><a class="mmenu" href="galerie.html" target="_self" aria-
haspopup="true">Galerie</a>
</li>
<li id="ci48"><a class="mmenu" href="video.html" target="_self" aria-haspopup="true">Video</a>
</li>
<li id="ci49"><a class="mmenu" href="autor.html" target="_self" aria-haspopup="true">Autor</a>
</li><!--/mmenu--></ul></nav>
<div id="eima"><img src="images/cti_0_home.jpg" alt=""></div>
<div id="sitename1">Roma Antica</div>
<div id="sitename2"></div>
<div id="search"><!----></div>
</div>
<div id="xm1"><div id="xm2" data-page="23"><!--page--><div class="rvps1">
<script type="text/javascript">
10
swfobject.embedSWF("extdocs/flashvortex.swf","flash_4","850","100","10,0,0,0",false,false,
{bgcolor:"#BD9572",wmode:"opaque",scale:"exactfit"});
</script>
<noscript></noscript>
<div id="flash_4">
<a href="http://www.adobe.com/go/getflashplayer"><img
src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe
Flash player" /></a>
</div></div><br>
<div class="rvps1"><span class="rvts24"><b>Roma Antica</b></span></div>
<br><div class="rvps0"><img style="margin: 0px 5px;float:right;width:376px;height:251px;"
alt="" title="1" src="1.jpg"></div>
<div class="rvps0"> Roma Antică a fost un oraș-stat a cărui istorie se
întinde în perioada de timp cuprinsă între 753 î.Hr. și 476 d.Hr. Pe parcursul existenței sale de
douăsprezece secole, civilizația romană a trecut de la monarhie la republică oligarhică și, apoi, la
imperiu extins. Ea a dominat Europa de Vest și întreaga arie în jurul Mării Mediterane, prin cuceriri
și asimilare, însă, în final, a cedat în fața invaziilor barbarilor din secolul cinci, marcând, astfel,
declinul Imperiului Roman și începutul Evului Mediu. Civilizația romană e, deseori, clasificată ca o
parte din Antichitatea Clasică, împreună cu Grecia antică, o civilizație care a inspirat mult cultura
Romei antice. </div>
<br>
<div class="rvps0"> Roma antică a adus contribuții importante în
organizarea politică și administrativă, juridică, artă militară, artă, literatură, arhitectură, limbile
Europei (limbile romanice), iar istoria sa continuă să aibă o influență puternică asupra lumii
moderne.</div>
<br>
<div class="rvps0"> Regatul Roman a fost guvernul monarhic al
orașului Roma și al teritoriilor sale de la Fondarea Romei, fondarea sa în 753 î.Hr. de către Romulus
și Remus, până la expulzarea lui Lucius Tarquinius Superbus în 510 î.Hr. și formarea Republicii
Romane. După legendă, orașul Roma a fost întemeiat în anul 753 î.Hr. de către Romulus și Remus,
care au fost crescuți de către o lupoaică. </div>
<br>
<div class="rvps0"> În legenda romană, când grecii au dus Războiul
troian împotriva orașului Troia, prințul troian Aeneas a navigat peste Marea Mediterană către Italia
și a fondat Lavinium. Fiul său, Iulus, a mers mai departe, fondând orașul Alba Longa. Din familia
regală a Albei Longa au venit cei doi gemeni, Romulus și Remus, care au purces la fondarea Romei
în 753 î.Hr .</div>
<!--/page--></div></div>
<div id="footer">
<!--footer--><br><!--/footer-->
</div>
</div>
</body></html>
11
V. Despre softul utilizat
12
Un aspect foarte laudat al Dreamweaver-ului il reprezinta arhitectura sa extensibila.
Extensiile,asa cum sunt ele cunoscute ,sunt mici programe,pe care orice dezvoltator le poate
scrie (de obicei in HTML si JavaScript ) sip e care le poate descarca si instala , acestea
aducand un spor de performanta si functionalitate imbunatatita programului .Exista o
comunitate de dezvoltatori care produc extensii si le publica (atat commercial , cat si
gratuit ) pentru probleme de dezvoltare web ,de la simple efecte rollover pana la solutii
complete de vanzare online.
13
Meniul programul Macromedia Dreamweaver 8
Meniurile File si Edit sunt standard pentru majoritatea programelor.Meniul File contine
comenzi de deschidere, salvare , import si export de fisiere. Meniul edit contine comenzile
Cut , Copy si Paste ,alaturi de comenzile Find si Replace si comanda Preferences.Multe
elemente din interfata Dreamweaver si din operarea sa pot fi configurate in Preferences.
14
Meniul View activeaza si dezactiveaza vizualizarea continutului sectiunii de antet(head); a
elementelor inviziblile;a straturilor ,tabelelor si limitelor cadrelor,a barei de stare si a hartilor
de imagine.
Meniul View are de asemenea comenzi de activare a riglei si a grilei,de executare a pug-in-
urilor si pentru afisarea de imagini de trasare. Comanda Prevent Layer Overlaps(Prevenirea
suprapunerii de straturi) este si ea pozitionata in meniul View.
Meniul View
15
Meniul Insert este aproape echivalent cu bara de inserari.Din acest meniu se poate insera
optional toate elementele disponibile pe bara de inserari. Bara de inserari contine un numar
total de sectiuni din care putem sa alegem diferite categorii de obiecte disponibile. Exista
douasprezece sectiuni in bara de inserari: Common,
Layout,Text,Tables,Frames,Forms,Templates,Characters,Media,Head,Script si Application.
Pentru a afisa butoanele obiectelor dintr-o anumita categorie trebuie sa dam click pe
sectiunea categoriei.
16
Meniul Modify ne permite sa modificam proprietatile obiectului selectat la un moment dat.
17
Meniul Text ne ofera acces la mai multe modalitati de finisare a aspectului textului din
pagina Web. Cel mai important pentru cei care scriu cu greseli este ca meniul text contine
comanda Check Spelling (verificarea ortografiei). Putem indenta un text,crea o lista si
modifica proprietatile fontului.
Meniul Commands ofera comenzi utile cum ar fi Clean up HTML (curatarea codului
HTML) si Clean Up Word HTML ( Curatarea cuvintelor din codul HTML).
18
Elementele limbajului HTML
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ã.
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.
19
Marcaje de bazã
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>
20
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>.
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 & .
21
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>
<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>
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.
22
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.
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.
<html>
<head>
<title>Pagina cu liste</title>
</head>
<body>
<ul>
<li>neordonate</li>
23
<li>ordonate</li>
</ul>
<ol>
<li>primul element;</li>
<li>al doilea element...</li>
</ol>
</body>
</html>
24
Î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.
25
<COL>, având ca parametru ALIGN - modul de aliniere a informatiilor din acea
coloanã (LEFT, CENTER, RIGHT).
<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>
26
Mãrimea liniilor si a coloanelor poate fi controlatã suplimentar prin marcajele
<ROWSPAN=x> si respectiv <COLSPAN=y>, fiecare indicând mãrimea în "celule
normale". În plus, se poate indica trasarea unei margini pentru tabel, prin marcajul
<TABLE BORDER>.
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.
27
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.
28
VI. Concluzii
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>.
29
VII. Bibliografie
http://www.google.ro
http://www.w3schools.com/
http://tutorialehtml.com/en/
http://tutorialehtml.com/ro/tutoriale-css-introducere-in-css/
http://etutoriale.ro/articles/103/1/Tutorial-complet-CSS/
https://ro.wikipedia.org/wiki/Roma_Antic%C4%83
https://istoriiregasite.wordpress.com/tag/roma-antica/
http://www.descopera.ro/cultura/2685019-top-10-mituri-false-despre-
romani-si-roma-antica
CD proiect
30