Atestat Informatica Model Documentatie

COLEGIUL NAŢIONAL DE INFORMATICĂ
PIATRA NEAMŢ
PROIECT PENTRU ATESTAREA COMPETENŢELOR

PROFESIONALE ÎN INFORMATICĂ
5 cele mai frumoase capitale

europene
Profesor coordonator: Elev:Popa Raluca

Ene Dumitru Clasa: 12A
Cuprins
Argument..............................................................................................................................................1
Prezentare software utilizat......................................................................................................................2
Implementarea aplicatiei.........................................................................................................................13
Resurse de hard şi soft necesare.............................................................................................................27
Bibliografie...............................................................................................................................................28
Argument
1
Prezentare software utilizat
Notepad + + este un editor de cod sursă gratuit, care vine cu funcții suplimentare,
comparativ cu Notepad standard. La instalare, este necesară un pic de atenție, deoarece este
recomandat să instalați toate plugin-urile și fişerele de auto-completare pentru a asigura o
experiență de programare completă. Notepad + + vine cu o interfață curată și simplă, fără să fie
aglomerat, în ciuda gamei sa largi de funcții, deoarece acestea sunt grupate în meniuri adecvate,
unele dintre ele fiind accesibile din meniul contextual în fereastra principală.
Notepad + + acceptă mai multe limbaje de programare și include o sintaxă de evidențiere
pentru cele mai multe dintre ele. În plus, se poate lucra cu mai multe documente în același timp,
rămânând în același timp incredibil de prietenos cu resursele hardware.
Prin utilizarea de plugin-uri, funcționalitatea Notepad + + poate fi mult îmbunătățită, și
una dintre cele integrate aduce suport FTP, în timp ce altele sunt un corector ortografic sau un
convertor din ASCII în HEX și vice-versa. Funcțiile suplimentare pot fi adăugate prin selectarea
plugin-urilor pe care utilizatorul le preferă.
Generalitati despe limbajul HTML

HTML (Hypertext Markup Language) a apǎrut ca o aplicaţie ISO standard (aparţine
standardului SGML - Standard Generalized Markup Language, specializat pentru hipertext şi
adaptat la Web), reprezentând un limbaj creat în scopul de a descrie, în mod text, formatul
paginilor Web. Altfel spus, HTML reprezintǎ de fapt limbajul pe care browserele de internet îl
înţeleg şi cu ajutorul lui pot fi afişate paginile web.
Orice document HTML începe cu notaţia <html> şi se termina cu notaţia </html>.
Acestea se numesc în literatura de specialitate "TAG-uri". În HTML nu se pot crea tag-uri
proprii, limbajul dispunând deja de un set predefinit de tag-uri, care indicǎ efectele aplicate
diferitelor pǎrţi de paginǎ în programele browser (cum ar fi Internet Explorer, Mozilla Firefox
sau Netscape Navigator).
Documentele HTML sunt documente în format ASCII şi prin urmare pot fi create cu
orice editor de texte (Notepad, Microsoft Office Word) de cǎtre utilizatorii care cunosc limbajul
HTML, sau mai simplu, se pot utiliza editoarele speciale, în care obiectele se introduc interactiv
iar codul HTML se genereazǎ automat, însǎ în ambele cazuri este utilǎ cunoaşterea entitǎţilor
care se pot inttroduce în paginile HTML şi marcajele caracteristice acestora.
Fonturi
2
Un font este caracterizat de următoarele atribute:
 Culoarea fondului paginii Web - se stabileşte astfel: <BODY BGCOLOR = culoare>.
 Culoarea textului - se stabileşte prin intermediul atributului text al etichetei <BODY>
după sintaxa: <BODY TEXT =culoare>.
 Stiluri pentru blocurile de text
Pentru a scrie un text cu un anumit stil trebuie sǎ folosim urmǎtoarele etichete care sǎ îl
delimiteze:
 <b>...</b> - pentru a scrie cu caractere îngroşate, aldine;

 <big>...</big> - pentru a scrie cu caractere mai mari cu o unitate decât cele curente;
 <small>...</small> - pentru a scrie cu caractere mai mici cu o unitate decât cele curente;
 <i>...</i> - pentru a scrie cu caractere inclinate, italice;
 <sub>...</sub> - pentru a scrie caracterele aliniate ca indice;
exponent
 <sup>...</sup> - pentru a scrie caracterele aliniate ca ;
 <u>...</u> - pentru a sublinia caracterele scrise;
 <q>...</q> - pentru a introduce citate cu caractere cursive;
 <code>…</code> - pentru a introduce un text care este codul pentru un program.
Blocuri de text
Aceste etichete se referǎ la funcţiile pe care le poate avea un bloc de text în cadrul paginii
Web. Ele produc automat trecerea la un rând nou şi adăugarea unui spaţiu suplimentar. Inserarea
unei adrese se realizeazǎ cu ajutorul urmǎtoarei etichete: <address>...</address>.
Indentarea unui bloc

Pentru ca un bloc de text sǎ fie deplasat la dreapta cu o anumitǎ distanţǎ faţǎ de marginea
din stânga trebuie ca acel bloc de text sǎ fie cuprins între urmǎtoarele etichete:
<blockquote>...</blockquote>, care produc automat trecerea la un rând nou şi adǎugarea unui
spaţiu suplimentar.
Blocul preformatat
Pentru ca browser-ul sǎ ia în considerare rândurile vide pe care noi le introducem în
editorul de text trebuie ca textul sǎ fie delimitat de urmǎtoarele etichete: <pre>...</pre>.
Caracterul "spaţiu" poate fi luat în considerare de browser dacă este inserat explicit prin
.
Blocuri paragraf
3
Pentru a insera un spaţiu suplimentar înainte de blocul paragraf trebuie folositǎ eticheta:
<p> şi etichetele <p>....</p> pentru a insera un spaţiu suplimentar dupǎ blocul paragraf. De
asemenea pentru a alinia textul la dreapta, la stânga sau centrat trebuie sa folosim etichetele: <p
align=”right”>, <p align=”left”>, respectiv <p align=”center”>.
Blocuri de titlu
Pentru a introduce titluri (headers) trebuie sǎ folosim urmǎtoarele etichete:
 <h1>....</h1> (pentru caractere mai mari şi aldine),
 <h2>....</h2> (pentru caractere mai mici),
 <h3>....</h3> (pentru caractere şi mai mici decât cele precedente de la h2),
 <h4>....</h4> (pentru caractere şi mai mici decât cele precedente de la h3),
 <h5>.....</h5> (pentru caractere şi mai mici decât cele precedente de la h4),
 <h6>.....</h6> (pentru caractere şi mai mici decât cele precedente de la h5).
De asemenea, unui titlu i se poate stabili şi poziţia, altfel el va fi aliniat automat la stânga.
Acest lucru se poate realiza prin includerea în etichetele menţionate mai sus a poziţiei în care
dorim sǎ fie aliniat titlul, ca de exemplu pentru un titlu de mǎrime 2 centrat îl vom mǎrgini cu
urmǎtoarele etichete: <h2 align=”center”>...</h2>.
Linii orizontale
Pentru a introduce olinie orizontalǎ trebuie sǎ folosim eticheta <hr>. Pentru a stabili
caracteristicile acestei linii trebuie sǎ introducem în cadrul etichetei <hr> urmǎtoarele cuvinte-
cheie: align=”poziţie” (right, left, center) pentru a stabili poziţia liniei, width=grosime pentru a
stabili grosimea liniei, size=lǎţime pentru a stabili lǎţimea liniei, noshade pentru a introduce o
linie fǎrǎ umbrǎ, color=”culoare” pentru a stabili culoarea liniei.
De exemplu pentru a introduce o linie aliniatǎ la stânga, de grosime 12 pixeli, de lǎţime
150 pixeli, fǎrǎ umbrǎ, de culoare roşie vom introduce urmǎtoarea etichetǎ: <hr align=”left”
width=12 size=150 noshade color=”red”>.
Blocuri <center>
Pentru a alinia la centru toate elementele unui bloc de text vom delimita acest bloc cu
urmǎtoarele etichete: <center>.....</center>.
4
Blocuri <div>
Modalitatea cea mai eficientă de delimitare şi de formatare a unui bloc de text este
folosirea delimitatorilor <div>...</div>. Un parametru foarte util pentru stabilirea
caracteristicilor unui bloc <div> este align.Valorile posibile ale acestui parametru sunt:
 left - (aliniere la stânga);
 center - (aliniere centrală);
 right - (aliniere la dreapta).
Un bloc <div>...</div> poate include alte subblocuri. În acest caz , alinierea precizată de
atributul align al blocului are efect asupra tuturor subblocurilor incluse în blocul <div>;
Liste neordonate
Pentru a introduce o listǎ neordonatǎ va trebui sǎ delimitǎm blocul de componente ale
listei prin etichetele <ul>.....</ul> şi sǎ punem tag-ul <li> în faţa fiecǎrei componente în parte,
pentru ca astfel ele sǎ fie scrise pe un nou rând indentat faţǎ de restul paginii. Pentru a introduce
marcatori fiecǎrei componente a listei trebuie sa introducem in cadrul tag-ului <li> una din
urmǎtoarele atribute şi valori: type=”circle” (cerculeţ);
 type=”disc” (disc plin);
 type=”square” (pǎtrat).
De exemplu pentru urmǎtoarea secvenţǎ:
<ul> Atribut
<li type=”disc”> bgcolor;
<li type=”square”> text;
</ul>, scrisǎ în editorul de text, browser-ul va afişa:
Atribut
 bgcolor;
 text;
Liste ordonate
5
Pentru a introduce o listǎ orodonatǎ va trebui sǎ delimitǎm blocul de componente ale
listei prin etichetele <ol>....</ol> sǎ punem eticheta <li> în faţa fiecǎrei componente în parte,
pentru ca astfel ele sǎ fie scrise pe un nou rând indentat faţǎ de restul paginii.
Tag-ul <ol> poate avea atributul start care stabileşte valoarea de plecare a secvenţei de
ordonare, dar şi atributul type care stabileşte tipul de caractere utilizat pentru ordonarea listei.
Valorile pe care le poate lua atributul type sunt:
 ,,A” pentru ordonare de tipul A, B, C, D etc. (litere mari);
 ,,a” pentru ordonare de tipul a, b, c, d etc. (litere mici);
 ,,I” pentru ordonare de tipul I, II, III, IV etc. (cifre romane mari);
 ,,1” pentru ordonare de tipul 1, 2, 3, 4 etc. (cifre arabe-opţiune prestabilitǎ).
Tag-ul <li> poate avea atributul value care stabileşte valoarea pentru elementul respectiv
al listei (aceastǎ valoare trebuie sǎ fie un numǎr întreg pozitiv). De exemplu pentru <li value=6>
program, se afişeazǎ 6.program.
Tabele
Pentru a introduce un tabel se utilizeazǎ etichetele <table>....</table>. Putem stabili
numǎrul de rânduri pe care le are un tabel prin inserarea etichetelor <tr>...</tr> ori de câte ori
dorim ca în tabel sǎ fie introdus un nou rând, iar numǎrul de coloane stabilind numǎrul de celule
pe care le are fiecare rând prin inserarea tag-ului <td> în interiorul spaţiului delimitat de
etichetele <tr>...</tr>.
În mod prestabilit un tabel nu are chenar. Pentru a adǎuga un chenar unui tabel, se
utilizeazǎ un atribut al etichetei <table> numit border, care poate sǎ nu fie urmat de nicio
valoare, caz în care tabelul va avea un chenar de grosime prestabilitǎ egalǎ cu 1 pixel.
Pentru a stabili lǎţimea şi înǎlţimea unui tabel vom utiliza atributele width şi height ale
etichetei <table>. Valorile acestor atribute pot fi:
 numere întregi pozitive reprezentând lăţimea respectiv înălţimea în pixeli a tabelului;
 numere întregi între 1 şi 100, urmate de semnul %, reprezentând fracţiunea din lăţimea şi
înălţimea totalǎ a paginii;
Zona din jurul unui tabel

Valoarea atributului hspace a etichetei <table> reprezintǎ distanţa pe orizontalǎ dintre
imagine şi text (spre exemplu).
Valoarea atributului vspace a etichetei <table> reprezintǎ distanţa pe verticalǎ dintre
imagine şi text (spre exemplu).
6
Titlul unui tabel
Pentru a pune titlu unui tabel va trebui sǎ utilizǎm eticheta <caption>, care trebuie
inclusǎ în interiorul spaţiului delimitat de etichetele <table>....</table>, dar în afara celui
delimitat de <tr>....</tr>.
Pentru a stabili poziţia titlului faţǎ de tabel vom utiliza atributul align al etichetei
<caption> care poate lua valorile:
 bottom - (sub tabel);
 top - (deasupra tabelului);
 left - (la stânga tabelului);
 right - (la dreapta tabelului).
Cap de tabel
Un tabel poate avea celule cu semnificaţia cap de tabel. Aceste celule sunt introduse în
eticheta <th> în loc de <td>, însǎ toate atributele care pot fi ataşate etichetei <td> pot fi, de
asemenea, ataşate etichetei <th>, iar conţinutul celulelor definite cu <th> este scris cu caractere
aldine şi centrat.
Unificarea unei celule cu una sau mai multe celule din dreapta ei se realizeazǎ cu ajutorul
atributului colspan al etichetei <td>, care ia ca valori numere naturale ce au ca semnificaţie
numǎrul de celule care se unificǎ.
Unificarea unei celule cu una sau mai multe celule de dedesubtul ei se realizeazǎ cu
ajutorul atributului rowspan al etichetei <td>, care ia ca valori numere naturale ce au ca
semnificaţie numǎrul de celule care se unificǎ.
Celule vide ale unui tabel

În cazul în care într-un tabel apar celule de date vide acestea nu vor apǎrea delimitate de
un chenar, astfel cǎ pentru ca aceste celule sǎ fie bordate şi ele de un chenar se procedeazǎ astfel:
dupǎ <td> se pune caracterul &nbsp (no break space)SAU: dupǎ <td> se pune <br> .
Alte atribute ale etichetei <table>:
 background permite stabilirea unei imagini pentru fondul unui tabel;
 bordercolor permite stabilirea întregii culorii pentru chenarul unui tabel;
 bordercolorlight permite stabilirea unui colţ colorat pentru chenarul 3D al unui tabel);
 bordercolordark permite stabilirea altui colţ colorat pentru chenarul 3D al unui tabel).
Grupuri de coloane
Pentru definirea unui grup de coloane va trebui sǎ folosim etichetele
7
<colgroup>...< / colgroup>. Pentru a stabili o lǎţime unicǎ, o anumitǎ aliniere şi
numǎrul de coloane care intrǎ într-un grup vom utiliza urmǎtoarele atribute ale etichetei
<colgroup>: width, align şi respectiv span, însǎ putem de asemenea folosi aceleaşi atribute
pentru fiecare coloanǎ în parte dintr-un grup
dacǎ utilizǎm tag-ul <col>, care admite şi el aceste atribute. În acest caz span identificǎ
acea coloanǎ din grup pentru care se face configurarea (dacǎ lipseşte, atunci coloanele sunt
configurate în ordine), width determinǎ o laţime pentru coloana identicǎ prin span, iar align
determinǎ o aliniere pentru coloana identicǎ prin span.
Atributul rules al etichetei <table> permite alegerea unor delimitatori pentru celulele
unui tabel. Valorile posibile sunt: all, cols, rows, none.
Imagini
Pentru a insera o imagine într-o paginǎ, se utilizează eticheta <img>, astfel:
<img src=” adresa URL a imaginii”>, unde src este un atribut al etichetei <img> prin
intermediul cǎruia imaginea este identificatǎ.
Pentru a utiliza o imagine ca link (o zonǎ activǎ pe care dacǎ efectuǎm click cu butonul
mouse-ului în browser se va deschide o nouǎ paginǎ ) vom folosi etichetele <a>....</a>, atributul
href al etichetei <a> care stabileşte pagina care se va deschide atunci când se va face click pe
link, precum şi eticheta <img> şi atributul ei src, care stabileşte imaginea care va constitui link-
ul , astfel:
<a href=”nume paginǎ+extensie”>< img src=”adresa URL a imaginii”></a>.
Legǎturi
Pentru a stabili o legǎturǎ cǎtre o paginǎ aflatǎ în acelaşi director vom folosi etichetele
<a>....</a> şi atributul href al etichetei <a> care ia valoare numele fişierului HTML aflat în
acelaşi director, care va înlocui vechea paginǎ. Cele douǎ fişiere se deschid unul dupǎ altul prin
apǎsarea unui click pe textul subliniat (pe link).
Pentru a stabili o legǎturǎ cǎtre o paginǎ aflatǎ pe acelaşi disc local, dar într-un alt
director vom folosi din nou etichetele <a>...</a> şi atributul href al etichetei <a> care însǎ de
aceastǎ datǎ ia valoarea cǎii fişierului HTML aflat pe acelaşi disc local, dar într-un alt director.
Cele douǎ fişiere se deschid când unul când altul prin apǎsarea unui singur click pe textul
subliniat (pe link).
8
Stiluri ,,identificate”
Atributul id poate identifica de asemenea şi stilul utilizat de un element. Pentru a utiliza
un stil ,,identificat”, vom proceda astfel:
1. <style>
#NUMELE STILULUI DEFINIT
{
carcteristicile_stilului _separate_prin”;”
}
</style>
2. în elementul în care se doreşte utilizarea localǎ a acestui stil, folosiţi atributul id care
primeşte ca valoare numele stilului definit anterior.
Dacǎ dorim ca un stil ,,identificat” sǎ fie aplicabil numai pentru anumite elemente ale
documentului, atunci procedǎm astfel: mai întâi definim clasa de stiluri în modul urmǎtor:
<style>tip_elemente# nume_stil{ carcteristicile_stilului _separate_prin”;” }
</style>, apoi o aplicǎm elementelor cu tipul dorit astfel:
<tip_de _text id=nume_stil>…< / tip_de_text>.
De exemplu dacǎ dorim ca toate blocurile de text cursiv dintr-un bloc de text de tip
paragraf sǎ fie de culoare roşie, atunci:
<style> p , i {color : red ; }<style>
Stilurile in-line sunt definite chiar în eticheta ce iniţiazǎ blocul în care dorim sǎ se aplice
aceste stiluri astfel:
<tip_bloc style=” carcteristicile_stilului _separate_prin”;” ”>....</tip_bloc>.
În cazul în care dorim utilizarea unui anumit stil pentru un fragment de text, atunci
includem acest text într-un bloc cu ajutorul delimitatorilor <span>…< / span> dupǎ care
utilizǎm atributul style, care ia ca valoare carcteristicile stilului definit separate prin ”;” pentru
eticheta <span>.
Stiluri definite în fişiere externe

Procedǎm astfel:
1. Creǎm un fişier html, care va avea ca şi conţinut conţinutul unui bloc <style>…< / style>,
fǎrǎ ca aceşti delimitatori sǎ fie incluşi.
9
2. Creǎm un nou fişier html în care includem în blocul <head>…< / head> o etichetǎ
<link> având atributele:
 atributul rel cu valoarea “stylesheet”
 atributul type cu valoarea “text/css”
 atributul href având ca valoare adresa URL a fişierului creat anterior.
Dacǎ un atribut are valoarea ,, ! important ”, atunci el are prioritate maximǎ.
Tipul fontului poate fi stabilit cu ajutorul atributului font-family, care are ca valoare
numele tipului fontului dorit.
Grosimea fontului poate fi stabilitǎ cu ajutorul atributului font-weight, care poate lua
ca valori:
 normal - pentru caractere de grosime normalǎ;
 bold - pentru caractere de grosime mai mare;
 bolder - pentru careactere de grosime şi mai mare decât cea anterioarǎ;
 lighter - pentru caractere de grosime mai micǎ decât cea normalǎ;
Valori numerice între 100 (pentru fontul cel mai subţire) şi 900 (pentru fontul cel mai
gros);
Stilul fontului poate fi stabilit cu ajutorul atributului font-style, care poate lua ca valori:
 normal – pentru caractere scrise normal;
 italic- pentr caractere scrise înclinat;
Variantele fontului pot fi stabilite cu ajutorul atributului font-variant, care poate luaca
valori:
 normal- pentru carctere scrise normal;
 small-caps- pentru majuscule;
Cadre în HTML
Dacǎ dorim ca în interiorul ferestrei browser-ului sǎ definim alte subferestre (cadre) va
trebui sǎ înlocuim în fişierul html blocul <body>...</body> cu blocul
<frameset>....</frameset>, în interiorul cǎruia fiecare cadru este introdus prin eticheta <frame>
ce are un atribut obligatoriu, şi anume src, care primeşte ca valoare adresa URL a documentului
HTML care va fi încărcat în acel frame (cadru).
Definirea cadrelor se face prin împărţirea ferestrelor (şi a subferestrelor) în linii şi
coloane:
10
 împărţirea unei ferestre într-un număr de subferestre de tip coloanǎ se face cu ajutorul
atributului cols al etichetei <frameset> ce descrie acea fereastră şi care ia ca valoare o
listă de elemente separate prin virgulă , care descriu modul în care se face împărţirea;
 împărţirea unei ferestre într-un număr de subferestre de tip linie se face cu ajutorul
atributului rows al etichetei <frameset> ce descrie acea fereastră şi care ia ca valoare o
listă de elemente separate prin virgulă , care descriu modul în care se face împărţirea;
Elementele unei liste care descrie modul în care se face împărţirea pot fi:
 un număr întreg de pixeli;
 procente din dimensiunea ferestrei (număr între 1 şi 99 terminat cu %);
 n* care înseamnă n părţi din spaţiul rămas;
Observaţii
 dacă mai multe elemente din listă sunt configurate cu * , atunci spaţiul disponibil rămas
pentru ele se va împărţi în mod egal;
 subfereastră poate fi un cadru (folosind <frame>) în care se va încărca un document
HTML, sau poate fi împărţită la rândul ei la alte subfereste (folosind <frameset>);
Culori pentru chenarele cadrelor şi dimensionarea chenarului unui cadru

Dacǎ dorim ca un chenar al unui cadru sǎ aibǎ o anumitǎ culoare atunci vom folosi
atributul bordercolor care ia ca valoare un nume de culoare sau o culoare definită în
conformitate cu modelul de culoare RGB şi care este atribuit fie etichetei frameset, dacǎ dorim sǎ
stabilim culoarea tuturor chenarelor cadrelor incluse, fie etichetei frame pentru a stabili culoarea
chenarului pentruaunacadruaindividual.
Pentru a stabili grosimea exprimatǎ în pixeli a chenarelor vom utiliza atributul border al
etichetei <frameset>. În cazul în care nu dorim sǎ stabilim o anumitǎ grosime a chenarelor, ea va
lua automat valoarea prestabilitǎ de 5 pixeli. O valoare de 0 pixeli va defini un cadru fără chenar.
În mod prestabilit, chenarul unui cadru este afişat şi are aspect tridimensional, însǎ
afişarea chenarului unui cadru se poate dezactiva dacă se utilizează atributul frameborder cu
valoare "no", sau activa dacǎ se utilizeazǎ acest atribut cu valoarea ”yes”. Dacǎ dorim ca
dezactivarea afişǎrii chenarelor sǎ fie valabilă pentru toate cadrele incluse atunci vom ataşa
atributul frameboard etichetei <frameset>, iar dacǎ dorimca ea sǎ fie valabilă numai pentru un
singur cadru atunci îl vom ataşa etichetei <frame>.
Bare de defilare
11
Dacǎ dorim sǎ putem naviga în interiorul documentului afişat în interiorul unui cadru,
atunci vom folosi atributul scrolling al etichetei <frame>, care adaugă acelui cadru o bară de
derulare. Valorile pe care le poate lua acest atribut sunt:
 yes - barele de derulare sunt adăugate întotdeauna;
 no - barele de derulare nu sunt utilizabile;
 auto - barele de derulare sunt vizibile atunci când este necesar;
În plus dacǎ dorim ca utilzatorul sǎ nu poatǎ redimensiona cadrul cu ajutorul mouse-ului
atunci vom folosi atributul noresize al etichetei <frame> (fără nici o valoare suplimentară).
Poziţionarea documentului într-un cadru

Avem posibilitatea de a stabili distanţa în pixeli dintre conţinutul unui cadru şi marginile
verticale, respectiv orizontale ale cadrului cu ajutorul atributelor marginheight şi marginwidth
ale etichetei <frame>, care iua ca valori numărul de pixeli sau procentul din lăţimea, respectiv
din înălţimea cadrului.
Ţinte pentru legături

În mod prestabilit, la efectuarea unui clic pe o legătură, noua pagină (către care indică
legătura) o înlocuieşte pe cea curentă în aceeaşi fereastră (acelaşi cadru). Acest comportament se
poate schimba în două moduri:
 prin plasarea în blocul <head>...</head> a unui element <base> care precizează, prin
atributul target numele ferestrei (cadrului) în care se vor încărca toate paginile noi
referite de legăturile din pagina curentă conform sintaxei:
<base target="nume_fereastra/frame_de_baza"> ;
 prin plasarea în eticheta <a> a atributului target, care precizează numele ferestrei
(cadrului) în care se va încărca pagina nou referită de legătura, conform sintaxei:
<a href="legătura" target="nume_fereastra/frame">...</a>;
12
Implementarea aplicatiei
Primul lucru pe care l-am luat in considerare a fost zona de “header” si felul in care as
putea genera ceva care sa atraga din punct de vedere vizual, dar care sa nu submineze continutul
de baza al paginii, si anume cele 5 capitale. Astfel am optat pentru un design nu foarte sofisticat,
iar in schimb am adaugat putina animatie: la incarcarea paginii, titlul si banner-ul vor aparea in
forma completa in mod treptat. Acest lucru a fost realizat cu ajutorul sintaxei @keyframes
13
Pentru design-ul continutului principal am ales sa aplic o masca celor 5 poze
corespunzatoare oraselor, astfel incat atunci cand utilizatorul muta cursorul deasupra uneia dintre
poze, senzatia simulata sa fie una de descoperire, asemanatoare cu deschiderea unei carti.
Elementele au fost structurate astfel:
14
Mai jos este prezentat modul in care a fost creat design-ul.
15
16
Cod sursa:
<!DOCTYPE HTML>
<html>
<head>
<title>Reiseführer</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="assets/css/main.css" />
</head>
<body>


<div id="wrapper">


<header id="header" class="alt">
<a href="index.html" class="logo"><strong>Reiseführer</strong></a>
</header>

<section id="banner" class="major">
<div class="inner">
<header class="major">
<h1>5 cele mai frumoase capitale europene</h1>
</header>
</div>
</section>


<div id="main">
2
<section id="one" class="tiles">
<article>
<span class="image">
<img src="images/pic02.jpg" alt="" />
</span>
<h3><a href="paris.html" class="link">Paris</a></h3>
<p>De la Tour Eiffel pana la Sacre-Coeur, de la Louvre pana la Versailles</p>
</header>
</article>
<article>
</span>
<h3><a href="roma.html" class="link">Roma</a></h3>
<p>Cetatea eterna</p>
</header>
</article>
<article>
</span>
<h3><a href="praga.html" class="link">Praga</a></h3>
<p>Orasul celor o suta de turnuri</p>
</header>
</article>
<article>
3
</span>
<h3><a href="londra.html" class="link">Londra</a></h3>
<p>Capitala Regatului Unit</p>
</header>
</article>
<article>
</span>
<h3><a href="moscova.html" class="link">Moscova</a></h3>
<p>Orașul cu cel mai mare număr de locuitori din Europa</p>
</header>
</article>
</section>
</div>
</div>

<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.scrolly.min.js"></script>
<script src="assets/js/jquery.scrollex.min.js"></script>
<script src="assets/js/skel.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>
4
CSS
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym,
address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u,
i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
p{
text-align:justify;
}
ol, ul {
list-style: none;
}
body {
-webkit-text-size-adjust: none;
5
}
/* Box Model */
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/* Grid */
.row {
border-bottom: solid 1px transparent;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
-ms-overflow-style: scrollbar;
}
body {
background: #242943;
}
body.is-loading *, body.is-loading *:before, body.is-loading *:after {

-moz-animation: none !important;
-webkit-animation: none !important;
-ms-animation: none !important;
6
animation: none !important;
-moz-transition: none !important;
-webkit-transition: none !important;
-ms-transition: none !important;
transition: none !important;
}
/* Type */
body, input, select, textarea {

color: #ffffff;
font-family: "Source Sans Pro", Helvetica, sans-serif;
font-size: 17pt;
font-weight: 300;
letter-spacing: 0.025em;
line-height: 1.65;
}
@media screen and (max-width: 1680px) {

font-size: 14pt;
}
@media screen and (max-width: 1280px) {

font-size: 12pt;
7
}
a{
-moz-transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
-webkit-transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
-ms-transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
border-bottom: dotted 1px;
color: inherit;
text-decoration: none;
}
a:hover {
border-bottom-color: transparent;
color: #9bf1ff !important;
}
a:active {
color: #53e3fb !important;
}
strong, b {
color: #ffffff;
font-weight: 600;
}
em, i {
font-style: italic;
8
}
p{
margin: 0 0 2em 0;
}
h1, h2, h3, h4, h5, h6 {

color: #ffffff;
font-weight: 600;
line-height: 1.65;
margin: 0 0 1em 0;
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
color: inherit;
border-bottom: 0;
}
h1 {
font-size: 2.5em;
}
h2 {
font-size: 1.75em;
}
h3 {
font-size: 1.35em;
}
9
h4 {
font-size: 1.1em;
}
h5 {
font-size: 0.9em;
}
h6 {
font-size: 0.7em;
}
sub {
font-size: 0.8em;
position: relative;
top: 0.5em;
}
sup {
font-size: 0.8em;
position: relative;
top: -0.5em;
}
blockquote {
border-left: solid 4px rgba(212, 212, 255, 0.1);
font-style: italic;
margin: 0 0 2em 0;
padding: 0.5em 0 0.5em 2em;
}
10
code {
background: rgba(212, 212, 255, 0.035);
font-family: "Courier New", monospace;
font-size: 0.9em;
margin: 0 0.25em;
padding: 0.25em 0.65em;
}
pre {
-webkit-overflow-scrolling: touch;
font-family: "Courier New", monospace;
font-size: 0.9em;
margin: 0 0 2em 0;
}
pre code {
display: block;
line-height: 1.75;
padding: 1em 1.5em;
overflow-x: auto;
}
hr {
border: 0;
border-bottom: solid 1px rgba(212, 212, 255, 0.1);
margin: 2em 0;
}
hr.major {
11
margin: 3em 0;
}
/* Section/Article */
section.special, article.special {
text-align: center;
}
header.major {
width: -moz-max-content;
width: -webkit-max-content;
width: -ms-max-content;
width: max-content;
margin-bottom: 2em;
}
header.major > :first-child {

margin-bottom: 0;
width: calc(100% + 0.5em);
}
header.major > :first-child:after {

content: '';
background-color: #ffffff;
display: block;
height: 2px;
margin: 0.325em 0 0.5em 0;
width: 100%;
}
12
header.major > p {
font-size: 0.7em;
font-weight: 600;
margin-bottom: 0;
text-transform: uppercase;
}
body.is-ie header.major > :first-child:after {

max-width: 9em;
}
body.is-ie header.major > h1:after {

max-width: 100% !important;
}
.image {
border: 0;
display: inline-block;
position: relative;
}
.image img {
display: block;
}
.image.left, .image.right {
max-width: 30%;
}
.image.left img, .image.right img {
13
width: 100%;
}
.image.left {
float: left;
margin: 0 1.5em 1.25em 0;
top: 0.25em;
}
.image.right {
float: right;
margin: 0 0 1.25em 1.5em;
top: 0.25em;
}
.image.fit {
display: block;
margin: 0 0 2em 0;
width: 100%;
}
.image.fit img {
width: 100%;
}
.image.main {
display: block;
margin: 2.5em 0;
width: 100%;
}
14
.image.main img {
width: 100%;
}
/* Tiles */
.tiles {
display: -moz-flex;
display: -webkit-flex;
display: -ms-flex;
display: flex;
-moz-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
border-top: 0 !important;
}
.tiles + * {
border-top: 0 !important;
}
.tiles article {
-moz-align-items: center;
-webkit-align-items: center;
-ms-align-items: center;
align-items: center;
display: -moz-flex;
15
display: -ms-flex;
display: flex;
-moz-transition: -moz-transform 0.25s ease, opacity 0.25s ease, -moz-filter 1s ease, -webkit-filter 1s ease;
-webkit-transition: -webkit-transform 0.25s ease, opacity 0.25s ease, -webkit-filter 1s ease, -webkit-filter
1s ease;
-ms-transition: -ms-transform 0.25s ease, opacity 0.25s ease, -ms-filter 1s ease, -webkit-filter 1s ease;
transition: transform 0.25s ease, opacity 0.25s ease, filter 1s ease, -webkit-filter 1s ease;
padding: 4em 4em 2em 4em ;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
cursor: default;
height: 40vh;
max-height: 40em;
min-height: 23em;
overflow: hidden;
position: relative;
width: 50%;
}
.tiles article .image {

display: none;
}
.tiles article header {

position: relative;
z-index: 3;
}
16
.tiles article h3 {
font-size: 1.75em;
}
.tiles article h3 a:hover {

color: inherit !important;
}
.tiles article .link.primary {

border: 0;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 4;
}
.tiles article:before {
-moz-transition: opacity 0.5s ease;
-webkit-transition: opacity 0.5s ease;
-ms-transition: opacity 0.5s ease;
transition: opacity 0.5s ease;
bottom: 0;
content: '';
display: block;
height: 100%;
left: 0;
opacity: 0.85;
position: absolute;
17
width: 100%;
z-index: 2;
}
.tiles article:after {
background-color: rgba(36, 41, 67, 0.25);
content: '';
display: block;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 1;
}
.tiles article:hover:before {
opacity: 0;
}
.tiles article.is-transitioning {
-moz-transform: scale(0.95);
-webkit-transform: scale(0.95);
-ms-transform: scale(0.95);
transform: scale(0.95);
-moz-filter: blur(0.5em);
-webkit-filter: blur(0.5em);
-ms-filter: blur(0.5em);
filter: blur(0.5em);
opacity: 0;
18
}
.tiles article:nth-child(4n - 1), .tiles article:nth-child(4n - 2) {

width: 50%;
}
.tiles article:nth-child(6n - 5):before {

background-color: #6fc3df;
}

background-color: #8d82c4;
}

background-color: #ec8d81;
}

background-color: #e7b788;
}
background-color: #8ea9e8;
}
.tiles article:nth-child(6n):before {
background-color: #87c5a4;
}
.tiles article:nth-child(5n){
margin-left:350px;
19
}
/* Header */
@-moz-keyframes reveal-header {
0% {
top: -4em;
opacity: 0;
}
100% {
top: 0;
opacity: 1;
}
}
@-webkit-keyframes reveal-header {
0% {
top: -4em;
opacity: 0;
}
100% {
top: 0;
opacity: 1;
}
}
@-ms-keyframes reveal-header {
0% {
20
top: -4em;
opacity: 0;
}
100% {
top: 0;
opacity: 1;
}
}
@keyframes reveal-header {
0% {
top: -4em;
opacity: 0;
}
100% {
top: 0;
opacity: 1;
}
}
#header {
display: -moz-flex;
display: -ms-flex;
display: flex;
background-color: #2a2f4a;
box-shadow: 0 0 0.25em 0 rgba(0, 0, 0, 0.15);
cursor: default;
21
font-weight: 600;
height: 3.25em;
left: 0;
line-height: 3.25em;
margin: 0;
position: fixed;
text-transform: uppercase;
top: 0;
width: 100%;
z-index: 10000;
}
#header .logo {
border: 0;
font-size: 0.8em;
height: inherit;
line-height: inherit;
padding: 0 1.5em;
}
#header .logo strong {

-moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
-webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
-ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
background-color: #ffffff;
color: #242943;
22
line-height: 1.65em;
margin-right: 0.325em;
padding: 0 0.125em 0 0.375em;
}
#header .logo:hover strong {

background-color: #9bf1ff;
}
#header .logo:active strong {

background-color: #53e3fb;
}
#header.reveal {
-moz-animation: reveal-header 0.35s ease;
-webkit-animation: reveal-header 0.35s ease;
-ms-animation: reveal-header 0.35s ease;
animation: reveal-header 0.35s ease;
}
#header.alt {
-moz-transition-delay: 0.75s;
-webkit-transition-delay: 0.75s;
-ms-transition-delay: 0.75s;
transition-delay: 0.75s;
-moz-animation: none;
23
-webkit-animation: none;
-ms-animation: none;
animation: none;
background-color: transparent;
box-shadow: none;
position: absolute;
}
#header.alt.style1 .logo strong {

color: #6fc3df;
}
body.is-loading #header.alt {
opacity: 0;
}
/* Banner */
#banner {
-moz-align-items: center;
-webkit-align-items: center;
-ms-align-items: center;
align-items: center;
background-image: url("../../images/banner.jpg");
display: -moz-flex;
display: -ms-flex;
display: flex;
24
padding: 6em 0 2em 0 ;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
border-bottom: 0 !important;
cursor: default;
height: 60vh;
margin-bottom: -3.25em;
max-height: 32em;
min-height: 22em;
position: relative;
top: -3.25em;
}
#banner:after {
-moz-transition-delay: 0.75s;
-webkit-transition-delay: 0.75s;
-ms-transition-delay: 0.75s;
transition-delay: 0.75s;
-moz-pointer-events: none;
-webkit-pointer-events: none;
-ms-pointer-events: none;
pointer-events: none;
background-color: #242943;
content: '';
25
display: block;
height: 100%;
left: 0;
opacity: 0.85;
position: absolute;
top: 0;
width: 100%;
z-index: 1;
}
#banner h1 {
font-size: 3.25em;
}
#banner > .inner {

-moz-transition: opacity 1.5s ease, -moz-transform 0.5s ease-out, -moz-filter 0.5s ease, -webkit-filter 0.5s
ease;
-webkit-transition: opacity 1.5s ease, -webkit-transform 0.5s ease-out, -webkit-filter 0.5s ease, -webkit-
filter 0.5s ease;
-ms-transition: opacity 1.5s ease, -ms-transform 0.5s ease-out, -ms-filter 0.5s ease, -webkit-filter 0.5s
ease;
transition: opacity 1.5s ease, transform 0.5s ease-out, filter 0.5s ease, -webkit-filter 0.5s ease;
padding: 0 !important;
position: relative;
z-index: 2;
}
26
Resurse de hard şi soft necesare
Cerinţele de sistem ale programelor utilizate nu sunt exagerate, după cum poate fi
observat şi în următoarele recomandări.
Resurse minime:
 Hardware
 Procesor (CPU) : 400 MHz+;
 Memorie (RAM) : 64 Mb;
 Spatiu liber pe hard- disk : 30 Mb;
 Monitor : VGA 16-bit color;
 Software
 Sistem de operare : Windows XP;
 Un browser oarecare: Internet Explorer, Google Chrome, etc;
Resurse recomandate:
 Hardware
 Procesor (CPU) : 2000 MHz+;
 Memorie (RAM) : 256 Mb;
 Spatiu liber pe hard- disk : 100 Mb;
 Monitor : VGA 32-bit color;
 Software
 Sistem de operare : Windows 7;
 Un browser oarecare: Internet Explorer 8.0 , Google Chrome etc;
27
Bibliografie
 https://www.infotour.ro/
 https://www.ghiduri-turistice.info/
 https://www.lynda.com/
 https://www.w3schools.com/
28

Atestat Informatica Model Documentatie

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Atestat Informatica Model Documentatie

Încărcat de

Drepturi de autor:

Formate disponibile

COLEGIUL NAŢIONAL DE INFORMATICĂ

PROIECT PENTRU ATESTAREA COMPETENŢELOR

5 cele mai frumoase capitale

Profesor coordonator: Elev:Popa Raluca

Generalitati despe limbajul HTML

 <b>...</b> - pentru a scrie cu caractere îngroşate, aldine;

Indentarea unui bloc

Zona din jurul unui tabel

Celule vide ale unui tabel

Stiluri definite în fişiere externe

Culori pentru chenarele cadrelor şi dimensionarea chenarului unui cadru

Poziţionarea documentului într-un cadru

Ţinte pentru legături

body.is-loading *, body.is-loading *:before, body.is-loading *:after {

body, input, select, textarea {

@media screen and (max-width: 1680px) {

body, input, select, textarea {

@media screen and (max-width: 1280px) {

body, input, select, textarea {

h1, h2, h3, h4, h5, h6 {

header.major > :first-child {

header.major > :first-child:after {

body.is-ie header.major > :first-child:after {

body.is-ie header.major > h1:after {

.image.left img, .image.right img {

.tiles article .image {

.tiles article header {

.tiles article h3 a:hover {

.tiles article .link.primary {

.tiles article:nth-child(4n - 1), .tiles article:nth-child(4n - 2) {

.tiles article:nth-child(6n - 5):before {

.tiles article:nth-child(6n - 4):before {

.tiles article:nth-child(6n - 3):before {

.tiles article:nth-child(6n - 2):before {

#header .logo strong {

#header .logo:hover strong {

#header .logo:active strong {

#header.alt.style1 .logo strong {

#banner > .inner {

S-ar putea să vă placă și

body.is-loading , body.is-loading :before, body.is-loading *:after {