Sunteți pe pagina 1din 52

CNILC

COREEA
Lucrare pentru sustinerea
examenului de atestat
profesional la informatica

Indrumatoare: Elev:
Buturuga Daniela Sima Alexandru Georgian

Mai 2023

- Pagina 1 -
Cuprins
ARGUMENT ..........................................................................................................................................3

HTML......................................................................................................................................................4

DE CE HTML? .......................................................................................................................................7

CSS........................................................................................................................................................ 12

PROGRAME UTILIZATE ................................................................................................................ 21

ISTORIA COREEI .............................................................................................................................. 23

GENERALITATI DESPRE COREEA .............................................................................................. 24

GEOGRAFIA COREEI ....................................................................................................................... 25

LOCURI DE VIZITAT SI MANCARE DIN COREEA ................................................................... 26

CODUL SURSA................................................................................................................................... 27

SURSE DE DOCUMENTARE........................................................................................................... 52

- Pagina 2 -
ARGUMENT
Bineînțeles! Am ales tema Coreea pentru că este o țară cu o istorie și o cultură
foarte bogate, iar schimbările politice și economice din ultimii ani au făcut ca
această țară să fie un subiect de mare interes pentru mulți oameni din întreaga
lume.

Pe de o parte, Coreea de Sud este una dintre cele mai dinamice și competitive
economii din lume, care a reușit să își transforme rapid și eficient economia
dintr-una bazată pe agricultură într-una bazată pe tehnologie și inovație. În plus,
Coreea de Sud este o țară cu o cultură populară extrem de bogată, care a reușit
să devină un lider în producția de filme, muzică și jocuri video, câștigând
popularitate și dincolo de granițele sale.

Pe de altă parte, Coreea de Nord este o țară care atrage atenția lumii întregi
datorită regimului politic autoritar, care controlează fiecare aspect al vieții
cetățenilor și care a provocat o serie de tensiuni geopolitice. De asemenea, există
multe mistere și incertitudini legate de viața în Coreea de Nord, datorită faptului
că este una dintre cele mai închise și secrete țări din lume.

- Pagina 3 -
HTML
Realizarea unei pagini web presupune cunoaşterea limbajului HTML
(HyperText Markup Language). Acesta e un limbaj de marcare, introdus de Tim
Berners-Lee. Fiind un limbaj de marcare, HTML nu utilizează instrucţiuni sau
comenzi, ci etichete, acestea fiind numite şi balize, elemente sau tag-uri.

Origini
Unul din primele elemente, fundamentale de altfel, ale WWW (World Wide
Web) este HTML, standard ce descrie formatul primar în care documentele sunt
distribuite şi văzute pe Web. Multe din trăsăturile lui, cum ar fi independenţa
faţă de platformă, structurarea formatării şi legăturile hipertext, fac din el un
foarte bun format pentru documentele Internet şi Web. Primele specificaţii de
bază ale Web-ului au fost HTML, HTTP şi URL.

Menire şi semnificaţii

HTML a fost dezvoltat iniţial de Tim Berners-Lee la CERN în 1989. HTML


este un limbaj bazat pe SGML (Standard Generalized Markup Language), o aşa-
numită aplicaţie a acestuia. SGML este un standard internaţional (ISO-8879)
aprobat în 1986. HTML a fost iniţial văzut ca o posibilitate pentru fizicienii care
utilizează computere diferite să schimbe între ei informaţie prin mijlocirea
Internetului. Erau prin urmare necesare câteva condiţii esenţiale: independenţa
de platformă, posibilităţi hipertext şi structurarea documentelor. Independenţa
de platformă semnifică faptul că un document poate fi afişat în mod asemănător
(sau aproape identic) de computere diferite (deci cu font, grafică şi culori
aidoma), lucru vital pentru o audienţă numeroasă şi extrem de variată. Hipertext
se traduce prin faptul că orice cuvânt, frază, imagine sau element al
documentului văzut de un utilizator (client) poate face referinţă la un alt
document sau chiar la paragrafe din interiorul aceluiaşi document, ceea ce
uşurează mult navigarea între părţile componente ale unui document sau între
multiple documente. Structurarea riguroasă a documentelor permite convertirea
acestora dintr-un format în altul precum şi interogarea unor baze de date
înglobând aceste documente.

Începuturile
Născut în urmă cu aproximativ 30 de ani, într-o tentativa de a rezolva unele
probleme ivite la transportul documentelor între diferite computere, limbajul
hipertext a evoluat încet. În primii ani de evoluţie HTML a demarat lent în

- Pagina 4 -
principal pentru că îi lipseau posibilităţile de a reda publicaţii electronice
profesionale; limbajul permitea oarece control asupra fonturilor dar nu permitea
inserarea graficii. În 1993, NCSA a îmbogăţit limbajul pentru a permite
inserarea graficii şi a construit primul navigator grafic: Mosaic. Au urmat apoi
contribuţii ad hoc ale diverselor firme care au adus tot felul de adăugiri
limbajului HTML astfel încât, în 1994, limbajul părea scăpat de sub control.
Urmarea a fost că la prima conferinţă WWW de la Geneva (Elveţia) s-a
constituit un grup de specialişti (HTML Working Group) a cărui primă misiune
a fost formalizarea HTML, lucru care s-a concretizat în HTML 2.0. Importanţa
acţiunii acestui grup constă în faptul că, odată standardizat, limbajul a putut fi
apoi extins într-un mod mai controlat la alte nivele.

Standardizarea
Standardul oficial HTML este dat de World Wide Web Consortium (W3C), care
este afiliat la Internet Engineering Task Force (IETF). W3C a enunţat câteva
versiuni ale specificaţiei HTML, printre care şi HTML 2.0, HTML 3.0, HTML
3.2, HTML 4.0 şi HTML 4.01. În acelaşi timp, autorii de browsere cum ar fi
Netscape şi Microsoft, au dezvoltat adesea propriile "extensii" HTML în afara
procesului standard şi le-au încorporat în browserele lor. În unele cazuri (cum ar
fi tagul Netscape), aceste extensii au devenit standarde de facto adoptate de
autorii de browsere. Când navigatorul încarcă un document HTML, el "citeşte"
documentul în căutarea tag-urilor HTML, formatează textul şi imaginea şi le
afişează pe ecran. Este motivul pentru care acelaşi document HTML apare uşor
diferit când este privit utilizând navigatoare diferite. Stadiile prin care trece un
standard elaborat de W3C sunt:

1. Orice standard îşi începe aventura ca W3C Note.


2. De aici este preluat de către un grup particular de lucru (Working Group)
şi este discutat până când se ajunge la un consens.
3. În acest moment este publicat ca propunere (Working Draft) şi în acest
stadiu oricine poate face comentarii.
4. În momentul în care se obţine o susţinere şi un consens suficient de larg,
directorul W3C decide dacă specificaţia este gata să devină propunere
oficială de recomandare (Proposed Recommendation).
5. Urmează o perioadă de 6 săptămâni în care toţi membrii W3C au sansa să
voteze această propunere de recomandare; votul nu este obligatoriu,
putându-se vota în 4 moduri diferite:
o da;
o da, sub rezerva unor îmbunătăţiri;
o nu, până când anumite sarcini nu sunt îndeplinite;
o nu, specificaţia trebuie abandonată.
6. Charta W3C stipulează necesitatea obţinerii consensului complet, astfel că
fiecare vot trebuie să fie un da fără rezerve.
7. Dacă toţi paşii anteriori au fost îndepliniţi, specificaţia trebuie aprobată în
final de Director şi se publică sub forma unui standard (W3C

- Pagina 5 -
Recommendation).

- Pagina 6 -
De ce HTML?
Dar de ce a fost preferat HTML pentru publicaţii pe Web, când pentru realizarea
publicaţiilor electronice există multe alte tehnologii? Primul motiv este
simplitatea. Al doilea este că permite formatarea textului ASCII cu tag-uri în
format ASCII. Rezultă de aici o compresie bună, suport pentru legături hipertext
şi uşurinţa în a scrie navigatoare pentru vizualizarea documentelor.

Varianta 2.0

HTML 2.0, elaborat în iunie 1994, este standardul pe care ar trebui să-l suporte
toate browserele curente - inclusiv cele în mod text. HTML 2.0 reflectă
concepţia originală a HTML ca un limbaj de marcare independent de obiectele
existente, focalizându-se pe aşezarea lor în pagină, în loc de a specfica exact
cum ar trebui să arate acestea. Dacă doriţi să fiţi siguri că toţi vizitatorii vor
vedea paginile aşa cum trebuie, folosiţi tagurile HTML 2.0.

Varianta 3.0

Specificaţia HTML 3.0, enunţată în 1995, a încercat să dezvolte HTML 2.0 prin
adăugarea unor facilităţi precum tabelele şi un mai mare control asupra textului
din jurul imaginilor. Deşi unele din noutăţile HTML 3.0 erau deja folosite de
autorii de browsere, multe nu erau încă oficializate. În unele cazuri, taguri
asemănătoare implementate de autorii de browsere au devenit mai răspândite
decât tagurile "oficiale". Specificaţia HTML 3.0 a expirat repede, deci nu mai
este un standard oficial în prezent.

Varianta 3.2

În Mai 1996, W3C a scos pe piaţă specificaţia HTML 3.2 , care era proiectată să
reflecte şi să standardizeze practicile acceptate la scară largă. Deci HTML 3.2
include tagurile HTML 3.0 care erau adoptate de autorii de browsere precum
Netscape şi Microsoft plus noi extensii HTML.

Revoluţia HTML 4.0, HTML 4.01

În acest moment, HTML 4.0 este larg utilizat şi au fost deja publicate
specificaţiile HTML 4.01. Limbajul HTML dă proiectanţilor de pagini web
posibilitatea:

• să publice documente cu headere, texte, tabele, liste, fotografii, etc...

- Pagina 7 -
• să regăsească on-line informaţii prin intermediul hiperlink-urilor accesate
printr-un simplu click de mouse
• să proiecteze formulare pentru realizarea tranzacţiilor cu servere aflate la
distanţă, pentru căutări de informaţie sau pentru activităţi specifice
comerţului
• să includă foi de calcul tabelar, clipuri video, sunete şi alte aplicaţii direct
în documente.

Elementul esenţial diferit adus de versiunea 4.0 şi mai ales 4.01 faţă de
versiunea 3.2 este posibilitatea separării structurii unui document de prezentarea
lui prin introducerea „stilurilor de documente“ (style sheet). Utilizând limbajul
HTML pentru structurarea unui document şi style sheet-urile pentru a stiliza
prezentarea acestuia, proiectanţii pot obţine mult mai usor independenţa de
periferic/computer/platforma hard-soft, lucru care a facut HTML-ul atât de
popular. Un document cu o structură complexă poate fi prezentat în diferite
moduri pe medii diferite, permiţând documentului însuşi să se adapteze mai uşor
noilor tehnologii (cum ar fi, de exemplu, browserele capabile să vorbească,
cititoarele braille, etc...).

În plus, separarea conţinutului de partea de prezentare permite modificarea


înfăţişării chiar a unui întreg site doar prin modificarea unui style-sheet (a unui
document care descrie stilul). Experienţa a demonstrat că o astfel de abordare
poate reduce dramatic costurile de deservire a unui spectru larg de platforme şi
probleme, facilitând şi o intreţinere ulterioară şi modificări mult mai uşoare.

HTML este utilizat pentru a structura informaţia unei pagini web, pentru a
stabili partea de început, titlul, conţinutul paginii şi încheierea pagini. Aceste
informaţii se realizează prin tagurile HTML care explică browserului cum să
afişeze textul pe ecranul monitorului. Tag-urile în limba engleză înseamna
"eticheta". Pentru a se putea deosebii de textul propriu-zis, tag-urile sunt incluse
între paranteze speciale şi anume < şi >. De obicei tagurile sunt folosite în
perechi, de exemplu pentru a scrie un text cu caractere îngroşate se foloseste
partea de deschidere a tagului <b>textul propriu-zis</b> şi la încheiere se
foloseşte acelaşi marcaj la care se adaugă semnul / care specifică că acolo se
închide marcajul cu acelaşi nume deschis anterior.
Versiunile de început ale limbajului, erau destul de limitate, dar mai apoi, odată
cu dezvoltarea web-ului şi apariţia mai multor browsere, au fost introduse mai
multe taguri, elemente şi atribute pentru un impact şi o structurare a
informaţiilor dintr-o pagina mult mai bune. Deşi browserele actuale pot afişa o
pagina web chiar dacă sintaxa limbajului acelei pagini nu este corectă, este de
preferat să se respecte standardele, asa fiind siguri că acea pagină se va vedea
aproximativ la fel pe orice browser. Spun "aproximativ" şi nu "la fel", deoarece
sunt unele browsere care nu respecta întru totul standardele.
În continuare, o să explic câte ceva despre structura şi sintaxa unui document
HTML.

- Pagina 8 -
<!DOCTYPE HTML PUBLIC "-
//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3
.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-
Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
</head>
<body>
</body>
</html>
Pentru orice document web trebuie sa i se atribuie un tip. Acest tip este
specificat in prima linie a documentului. Este important pentru a se putea
deosebi documentul de tip HTML de cel de tip XHTML sau alte tipuri existente.
Pentru documentele de tip HTML exista 3 tipuri şi anume strict, transitional şi
frameset. În mare, documentele de tipul "strict" exclud din prezentarea lor
atributele şi elementele cu suport pentru formatarea paginii (CSS), cele
"transitionale" includ şi aceste attribute, iar cele de tip "frameset" sunt în general
construite din mai multe bucăţi (frame)

Următoarea linie conţine un tag care anunţă browserul că începe un document in


format HTML.

Linia următoare specifică partea de sus a documentului, antetul (head). În


această parte sunt incluse diferite informaţii cum ar fi titlul paginii sau diferite
taguri care spun bowserului anumite informatii despre pagina curenta. Aceste
taguri sunt cunoscute sub numele de meta-taguri şi au o importanţă mai mare
decât tagurile normale. În cazul exemplului de mai sus este specificat un
meta-tag care spune browserului ce tip de caractere sunt folosite în pagina
curentă (este util în cazul în care scrieţi pagini în mai multe limbi, browserele şi
motoarele de căutare vor şti să afişeze caracterele din acele pagini).

Următoarea linie din cadrul antetului este linia care conţine titlul paginii curente.
Este de preferat ca fiecare pagină de web să aibă un titlu căt mai sugestiv (util în
cadrul motoarelor de căutare, dar şi dacă vreţi sa tipăriţi pagina la imprimantă)

Tagul următor este un tag de închidere, şi anume se specifică browserului că


acolo se termina partea de antet a documentului. După antet, urmează conţinutul
efectiv al documentului, care este specificat prin tagul de deschidere <body>
Între acest tag şi până când browserul întâlneste tagul de închidere </body> se
poate pune conţinutul efectiv al paginii, şi anume text, taguri de formatare a
textului, elemente de aranjare în pagină precum si hipertext.

- Pagina 9 -
Ultima linie din document trebuie sa fie întotdeauna tagul de închidere al
documentului HTML şi anume tagul </html>

Un document html se poate scrie în orice tip de editor de texte care ştie să
salveze textul neformatat (gen Notepad, dar nu şi Word care preformatează
textul). Documentele HTML de obicei au extensia .htm sau .html dar pot fi şi
alte extensii cum ar fi .dhtml sau .xml sau .php. Desigur alte extensii sunt date
de tipuri diferite de documente HTML. După crearea unei pagini, pentru a
verifica dacă este compatibilă cu standardul, se poate verifica la adresa
http://validator.w3.org/ unde găsiţi un validator automat care verifică structura şi
corectitudinea sintaxei paginii.
Pentru o delimitare mai usoara a elementelor in pagina, am utilizat obiecte de tip
<div></div>. Acestea nu sunt altceva decat niste containere, standard fara
background, fara bordura, fara margini, cu alte cuvinte, perfect invizibile. In
unele cazuri, s-a recurs la schimbarea unora dintre proprietatile acestor div-uri,
dar care vor fi prezentate ulterior. Singurul atribut al obiectului div este “id”
care ii da un identificator obiectului pentru a putea fi editat ulterior din CSS.
Niciun site nu poate relationa paginile intre ele fara obiecte de tip <a></a>
(ancore sau link-uri). Atributele pe care le poate primi obiectul <a> sunt:
href: adresa care va fi incarcata la executarea unui click pe link.

target: specifica unde va fi incarcata pagina la executarea click-ului. Acest


atribut poate lua orice valoare din lista “_blank” (pagina se deschide intr-o
fereastra noua), “_parent” (pagina se deschide in aceeasi fereastra ca parintele
ei), “_self” (pagina se deschide in pagina curenta) sau numele unui frame in
cazul in care s-au folosit acestea (nu este cazul in proiectul acesta).
title: un scurt mesaj ce va fi afisat atata timp cat mouse-ul stationeaza
deasupra link-ului (acest atribut poate fi aplicat oricarui obiect din HTML asa ca
nu va mai fi precizat in continuare pentru fiecare element).
class: se defineste numele unei clase de atribute definite in CSS pentru a-i
modifica aspectul (culorile, font-ul, etc). La fel ca la title, class poate fi atribuit
oricarui obiect, asa ca nu se va mai insista asupra sa.
Pentru realizarea graficii unei site, desi s-a avansat mult in privinta graficii
determinate de CSS, nu se poate renunta inca la obiectul de tip <img /> ce
insereaza in pagina o imagine dorita. Acesta, spre deosebire de cele prezentate
pana acum, nu mai este anuntat de doua tag-uri, ci de unul singur ( <img /> ).
Atributele pe care le poate primi o imagine sunt:

- Pagina 10 -
src: ofera informatii cu privire la adresa pozei ce va fi incarcata. Aceasta adresa
poate fi absoluta (www.site.ro/imagine.jpg) sau adresa relativa fata de pozitia
paginii ce o incarca (daca pagina care incarca imaginea este in acelasi folder cu
imaginea, se poate spune direct src=”imagine.jpg”).
width: defineste latimea pozei. Acest atribut poate primi ca valoare orice
unitate de masura liniara uzuala (px – pixeli , cm – centimetrii, m - metrii, em –
de atatea ori marimea fontului, in – inchi).
Pentru modificarea stilului de scriere in zone relativ restranse din paragrafe vine
in ajutor obiectul de tip <span></span>. Acesta nu primeste decat atributul class
pentru a putea fi editat ulterior in CSS.

- Pagina 11 -
CSS
CSS este un acronim provenind din Cascading Style Sheets, care înseamnã "foi
de stil în cascadă". În documentele W3C, CSS nu e definit ca un nou limbaj, ci
ca un mecanism care permite formatarea documentului HTML. CSS-ul nu
exclude HTML-ul din pagina web. Nu se poate realiza o pagină web folosind
numai CSS, care a fost proiectat astfel încât să conlucreze cu HTML-ul.
Tagurile HTML au fost iniţial destinate pentru a defini conţinutul unui
document. Pentru a afişa "Acesta este un antet", "Acesta este un paragraf" sau
"Acesta este un tabel", trebuiau folosite taguri ca <h1>,<p>,<table> etc. Modul
de aranjare al documentului era sarcina browser-ului, fară a fi folosite taguri de
structură.

Pe masură ce Netscape şi IE continuau să adauge noi taguri HTML şi atribute


(ca tagul <font> şi atributul color) sintaxei HTML originale, devenea din ce în
ce mai greu să creezi site-uri web în care conţinutul documentelor HTML să fie
separat clar de aranjamentul documentului. Stilurile definesc cum să fie afişate
elementele HTML 4.0, aşa cum face tagul font sau atributul color în HTML 3.2.
Stilurile sunt salvate în mod normal în fişiere diferite de cele cu extensia html.
Foile de stil externe vă permit să schimbaţi apariţia şi aranjarea tuturor paginilor
în site-ul dvs. web, doar prin editarea unui singur document CSS. Dacă aţi
încercat vreodată să schimbaţi fontul sau culoarea tuturor anteturilor din paginile
web pe care le-aţi creat, veţi întelege cum CSS vă poate scuti de multă muncă
inutilă. Proiectanţii CSS-ului au urmărit îndeosebi separarea între conţinutul
paginii (textul destinat vizitatorului şi imaginile din pagină) şi codul-sursă.
Folosind CSS, se ajunge la un control mai fin asupra paginii web, la scăderea
dimensiunii în octeti a paginii web, atunci când codul CSS e conţinut într-un
fişier extern. Modificând fişierul CSS extern, modificăm simultan toate paginile
web în care acesta e inclus. Se pot crea efecte mai sofisticate decât cele produse
de codul HTML: suprapunerea unei imagini peste altă imagine, a unui text peste
alt text, impresia de relief, efectul hover, afişarea unor fonturi mai mari decât h1
etc.

CSS este foarte util în Web design, deoarece le permite developerilor să


controleze stilul şi chenarul mai multor pagini web în acelaşi timp. Ca web
developer puteţi defini un stil pentru fiecare element HTML şi să-l aplicaţi câtor
pagini web doriti. Pentru a face o schimbare globală, schimbaţi stilul şi toate
elementele din paginile web vor fi modificate automat.

Dezavantaj lucrului cu CSS este că pagina conţinând cod CSS poate arata diferit
în navigatoare diferite, deoarece nu toate browserele interpretează codul CSS la
fel.
Adăugând cod JavaScript, se obtin efecte şi mai sofisticate, chiar de animatie.
CSS + JavaScript = DHTML (Dynamic HTML). Aceste efecte spectaculoase

- Pagina 12 -
justifică titulatura de "artişti CSS" sau "artizani CSS" acordată unor creatori de
pagini web.

Foile de stil dau posibilitatea specificării informaţiei despre stil în mai multe
feluri. Stilurile se pot specifica într-un singur element HTML, în interiorul
elementului <head> al unei pagini HTML sau într-un fişier extern CSS. Dintr-un
singur document HTML se pot face referiri către mai multe foi de stil externe.
Deci, un stil din interiorul unui element HTML are cea mai mare prioritate, ceea
ce înseamnă că va suprascrie fiecare stil declarat în tagul <head>, într-o foaie de
stil externă şi în browser.

În documentul HTML, codul CSS poate fi introdus în mai multe moduri:


1. Codul CSS e prezent în pagina web, iar efectul său se aplică asupra
întregului document.

<html>
<head>
<style>
b {color:red;}
i {color:blue;}
</style>
</head>
<body>
<p align=center><b>Introducere in CSS</b></p>
<p><i>Această sectiune se adresează celor ce
cunosc deja HTML-ul. </i></p>
</body>
</html>

Consecinţă: Orice text cuprins între <b>şi </b> va fi afişat cu roşu, oriunde s-ar
afla în document. Orice text afişat cu italice va fi de culoare albastră.
Se observã că introducerea codului CSS în head duce la mărirea dimensiunii în
octeti a fişierului.

<html>
<head>
<style>
a { text-decoration: none; }
</style>
</head>
<body>
<a href="Intro.htm">Introducere</a>
<a href="A.htm">Partea I</a>
<a href="B.htm">Partea a II-a</a>

- Pagina 13 -
</body>
</html>

Eticheta <style> anunţă browserul că urmează codul CSS, iar </style> că a luat
sfârsit codul CSS. Efectul codului alăturat este că toate link-urile din acest
document vor apărea nesubliniate (text-decoration:none;).

2. Codul e prezent în pagina web, iar efectul sãu se aplicã elementelor izolate.

<html>
<head>
</head>
<body>
<a href="Intro.htm" style="color:red;">Introducere
</a>
<a href="A.htm" style="color:green;">Partea I</a>
<a href="B.htm" style="color:blue;">Partea a II-
a</a>
</body>
</html>

Efectul acestei secvenţe de cod este:

Introducere
Partea I
Partea a II-a

Se observă că nu mai avem, în acest caz, o etichetă <style>, ci un atribut style al


etichetei <a>. Orice etichetă HTML poate beneficia de acest atribut. Pentru
formatarea unor porţiuni mari de text, puteţi folosi containerele div sau span.
Totuşi, această abordare nu satisface principiul separării codului CSS de textul
afisat în browser.

3 Codul CSS se află într-un fişier extern, cu extensia css. Efectul său se aplică
întregului document. (aceasta modalitate a fost folosita in proiect)

<html>
<head>
<link rel=StyleSheet href="style.css" title="
Setarea link-urilor" type="text/css">
</head>
<body>
<a href="Intro.htm">Introducere</a>

- Pagina 14 -
<a href="A.htm">Partea I</a>
<a href="B.htm">Partea a II-a</a>
</body>
</html>

Fişierul extern poate fi scris în Notepad şi salvat cu extensia css. Includerea sa în


pagina web se face folosind tag-ul <link>, care trebuie să se afle între <head>şi
</head> (în antetul paginii).

Fisierul style.css poate conţine următorul cod:

body { color: blue;}


a {color: red; text-decoration: none;}

Consecinţa va fi afişarea cu fonturi albastre a întregului text, exceptând


link-urile, care vor fi colorate în rosu.
Observaţie:
Într-un fişier html, pot fi incluse astfel oricâte alte fisiere cu extensia css, htm,
html sau pdf.
Această metodã de includere a CSS-ului în pagina web e mai avantajoasã ca
primele douã. Codul CSS introdus astfel conlucreazã cu cel scris direct în
pagină.

4. Documentul CSS se poate importa în pagina web.

<html>
<head>
<style>
@import url(style.css);
</style>
</head>
<body>
</body>
</html>

Importul trebuie declarat imediat după tag-ul <style>, înaintea oricărei alte linii
de cod. În exemplul alăturat, s-a realizat importul în pagina curentă a fişierului
style.css. Desigur, fişierul importat poate avea şi o adresă relativă.

Sintaxa CSS este alcătuită din trei părţi: un selector, o caracteristică şi o valoare.
Selectorul este elementul/tagul pe care vreţi să-l definiţi, caracteristica este
atributul pe care doriţi să-l schimbaţi şi fiecare caracteristică poate lua o valoare.
Caracteristica şi valoarea sunt separate de semnul (:) şi sunt încadrate de
acolade:

- Pagina 15 -
body {color: black}

Dacă doriţi să specificaţi mai mult de o caracteristică, trebuie să separaţi fiecare


caracteristică cu semnul (;). Exemplul de mai jos arată cum să definiţi un
paragraf aliniat central, cu culoarea roşie a textului:

p {text-align: center; color: red}

Pentru a întelege mai bine aceasta definiţie de stil, puteţi descrie o caracteristică
pe fiecare rând, ca în exemplul următor:

p {
text-align: center;
color: black;
font-family: arial
}

Atributul class

Cu acest atribut puteţi defini stiluri diferite pentru acelaşi element. Să zicem că
vreţi două tipuri de paragrafe în documentul dvs: unul aliniat la dreapta şi unul
centrat. Iată cum puteţi face asta cu stiluri:

p.right {text-align: right}


p.center {text-align: center}

Trebuie să folosiţi atributul class în documentul dvs. HTML:

<p class="right">
Acest paragraf va fi aliniat la dreapta.
</p>

<p class="center">
Acest paragraf va fi aliniat pe centru.
</p>

Atributul id

Atributul id trebuie să fie unic pe pagină. Nu poate exista decât un element cu


un id dat într-un document. El este marcat în documentul HTML cu id în loc de
class:

- Pagina 16 -
<p id="intro">
Acest paragraf va fi aliniat la dreapta.
</p>

Atributul id poate fi definit în doua moduri. Poate fi definit pentru a se potrivi


tuturor elementelor cu un id specific sau să se potrivească numai unui element
cu un id specific. În exemplul următor, atributul id se va aplica tuturor
elementelor cu id= "intro":

#intro {
font-size:110%;
font-weight:bold;
color:#0000ff;
background-color:transparent
}

Fiecare pagina a site-ului are declarat in cadrul zonei <head> un link catre
fisierul CSS style.css ce controleaza aspectul site-ului. Deoarece toate au acestea
au acelasi fisier css, modificarea aspectului site-ului poate fi facuta modificand
doar style.css, neoperandu-se asupra fisierelor sursa HTML (sau PHP).
body
{
background-color: black;
font-size: 11px;
font-family: Tahoma, Arial, Helvetica, sans-serif;
color: #666666;
}

Fundalul fiecarei pagini este controlat de cele proprietati ale lui body:
background: defineste culoarea de fundal

background-image: defineste o imagine de fundal ce va fi repetata atat pe ox


cat si pe oy pentru a acoperi toata suprafata elementului.
Daca nu sunt definite explicit, detaliile legate de font sunt mostenite si de
elementele “copil”.
font-family: defineste familia de fonturi ce pot fi folosite pentru afisarea
textului. Daca unul din ele nu este disponibil, se va incerca folosirea
urmatorului.
font-size: defineste dimensiuena fontului. Acesta poate primi orice unitate de
masura uzuala, dar s-a folosit cu precadere px.

- Pagina 17 -
font-weight: defineste “greutatea” textului (bold sau normal).

Pentru un control facil asupra pozitionarii centrate a site-ului, toate elementele


din <body> din pagini sunt incluse intr-un <div> cu id=”container”.

#container
{
position: relative;
margin: auto;
width: 806px;
}

position: defineste modalitatea de pozitionare in pagina: absoluta sau relativa


fata de celelalte elemente.
margin: defineste distanta de la bordura elementului pana la marginea efectiva
a sa. Acesta este un spatiu transparent. Acesta poate primi o valoare, doua, trei
sau chiar patru, nu neaparat omogene. Cand primeste o singura valoare, aceasta
este aplicata tuturor partilor (top, right, bottom, left). Daca primeste doua valori,
prima se aplica pe verticala (top si bottom), iar a doua pentru orizontala (right si
left). In cazul a trei valori, prima se aplica pentru top, a doua pentru right si
pentru left si ultima pentur bottom. Daca se definesc patru valori se aplica
pentru top, right, bottom, respective left. Daca un element este pozitionat relativ
si are marginile left si right setate pe auto, acesta va fi afisat centrat.
width: defineste dimensiunea elementului.

padding: este distanta de la marginea de scriere a elementului pana la bordura


sa.

- Pagina 18 -
Imaginea de mai sus arata modalitatea de calculare a distantelor in cadrul unui
obiect: height, width, padding, margin, border.

Paginile sunt separate in continuare (folosind div-uri) in inca trei zone denumite
header, meniu si text. In header se gaseste imaginea de sus, in meniu linkurile ce
alcatuiesc meniul, iar in text textul efectiv al paginii.

#container #header
{
background-image: url(images/header.jpg);
background-repeat: no-repeat;
height: 230px;
border-bottom: 8px solid #333333;
}

#container #meniu
{
background-image: url(images/menu.png);
height: 280px;
width: 240px;
position: relative;
top: -100px;
float: left;
padding: 40px 0px 0px 0px;
}

#container #meniu a
{
line-height: 3em;
text-decoration: none;
color: #FFCC00;
border-top: 1px dotted #FFDE9F;
display: block;
background-image: url(images/bullet.png);
background-repeat: no-repeat;
background-position: 10px 15px;
padding: 0px 0px 0px 30px;
}

#container #meniu a.last


{
border-bottom: 1px dotted #FFDE9F;
}

#container #meniu a.sublink


{

- Pagina 19 -
border: none;
background-image: url(images/miniBullet.png);
line-height: 3em;
background-position: 45px 15px;
padding: 0px 0px 0px 60px;
}

#container #meniu a.curent


{
font-weight: bold;
color: white;
}

#container #text
{
min-height: 270px;
padding: 20px 20px 20px 260px;
text-align: justify;
border-bottom: 3px solid #555555;
margin-bottom: 5px;
}

- Pagina 20 -
Programe utilizate
Web design-ul este o ramura ce a cunoscut o ascensiune vertiginoasa in ultimii
ani. Tot mai multi incep sa ajute la dezvoltarea standardelor web (HTML, PHP,
etc), comunitatea de devoleperi open-source crescand pe zi ce trece. Cu un
public atat de larg in domeniu, producatorii de soft-uri pentru webdesign duc o
lupta acerba pentru afirmare. Astfel, noi, utilizatorii, avem o gama larga de
produse la care putem apela pentru a ne dezvolta platformele web.

Pentru scrierea codului, se poate utiliza orice editor de texte, in afara celor ce
preformateaza textul. Totusi, este mult mai facila codarea intr-un program ce
asigura anumite facilitati si o cromatica specifica. Astfel, pentru scriptare, am
apelat la titanul programelor de webdevelopment: Atom.

Atom este un editor de cod open-source care s-a bucurat de o popularitate tot
mai mare în ultimii ani. Programul a fost creat de către GitHub și este disponibil
pe platformele Mac, Windows și Linux. Atom se remarcă prin interfața sa
intuitivă și flexibilitatea sa, putând fi personalizat pentru a răspunde nevoilor
fiecărui utilizator în parte.

Atom dispune de o mulțime de funcții utile programatorilor, precum sugestii


inteligente de cod, completare automată, indentare și formatare de cod. Acestea
sunt doar câteva dintre facilitățile oferite de acest editor care îl fac să fie preferat
de mulți dezvoltatori web.

Unul dintre cele mai importante avantaje ale Atom este posibilitatea de a instala
diferite pachete care îmbunătățesc funcționalitatea editorului. Există o gamă
largă de pachete disponibile, de la cele care oferă facilități pentru lucrul cu
HTML, CSS și JavaScript, până la cele care ajută la lucrul cu framework-uri
populare, cum ar fi React sau Vue.js. Practic, orice funcție dorită poate fi găsită
într-un pachet disponibil pentru Atom.

Un alt avantaj important al Atom este comunitatea sa activă și implicată.


Dezvoltatorii Atom lucrează împreună cu utilizatorii săi pentru a îmbunătăți
constant programul și a adăuga noi funcții. Această colaborare face ca Atom să
fie un editor de cod dinamic și mereu în pas cu noile tehnologii și tendințe din
domeniul web.

Atom este un editor de cod performant și ușor de folosit, fiind apreciat atât de
dezvoltatorii începători, cât și de cei avansați. Cu posibilitatea de a instala
diferite pachete și de a personaliza complet interfața, Atom este un instrument
foarte util în lucrul cu proiecte web de orice fel.

- Pagina 21 -
- Pagina 22 -
ISTORIA COREEI
Coreea este o peninsulă în Asia de Est, situată între China și Japonia, care a fost
locuită de sute de mii de ani. Prima perioadă a istoriei Coreei este cunoscută sub
numele de perioada Paleoliticului Superior, care a început acum aproximativ
40.000 de ani. În această perioadă, oamenii au trăit prin vânătoare, pescuit și
colectarea de plante.

În perioada neolitică, din jurul anului 3000 î.Hr., Coreea a cunoscut o dezvoltare
a agriculturii și a creșterii animalelor. În jurul anului 1000 î.Hr., triburile
coreene au început să se organizeze în state și regate.

Cel mai important regat din istoria Coreei a fost Regatul Goguryeo, care a
existat din anul 37 î.Hr. până în anul 668 d.Hr. Acest regat a fost cunoscut
pentru cultura și știința sa, precum și pentru abilitățile sale militare.

Acesta a fost urmat de alte două regate importante, Baekje și Silla.În secolul al
VII-lea, regatul Silla a reușit să unifice cele trei regate și să creeze Regatul Silla
Unificat, care a durat până în anul 935. Acesta a fost urmat de dinastia Goryeo,
care a existat între anii 918 și 1392.

În anul 1392, generalul Yi Seong-gye a preluat puterea și a creat dinastia Joseon.


Acesta a fost un moment important în istoria Coreei, deoarece a adus o perioadă
de pace și stabilitate care a durat până în secolul al XIX-lea. În această perioadă,
cultura coreeană a cunoscut o dezvoltare importantă, în special în literatură, arte,
arhitectură și tehnologie.

În secolul al XIX-lea, Coreea a fost forțată să se deschidă către Occident, ceea


ce a adus o serie de schimbări importante în societate și economie. În anul 1910,
Coreea a fost anexată de Japonia și a rămas sub dominația japoneză până la
sfârșitul celui de-al Doilea Război Mondial.

După cel de-al Doilea Război Mondial, Coreea a fost împărțită în două state
separate, Republica Coreea (Coreea de Sud) și Republica Populară Democratică
Coreeană (Coreea de Nord). Această separare a condus la războiul coreean din
1950-1953, care a avut consecințe semnificative asupra ambelor țări.
În prezent, Coreea de Sud este o democrație dezvoltată, cu o economie puternică
și o cultură vibranta.

- Pagina 23 -
GENERALITATI DESPRE COREEA
Coreea este o țară din Asia de Est, situată în partea de sud a Peninsulei Coreene,
la est de China și la vest de Japonia. Coreea are o istorie bogată și o cultură
distinctă, cu multe tradiții și obiceiuri care datează de secole.

Populația Coreei este de aproximativ 51 de milioane de oameni, iar capitala sa


este Seul. Limba oficială este coreeană, iar moneda oficială este wonul sud-
coreean. În prezent, Coreea este una dintre cele mai dezvoltate țări din lume, cu
unul dintre cele mai puternice economii și tehnologii avansate.

Istoria Coreei poate fi împărțită în trei perioade majore: perioada celor Trei
Regate (57 î.Hr.- 668 d.Hr.), perioada dinastiei Goryeo (918-1392) și perioada
dinastiei Joseon (1392-1910). În timpul perioadei celor Trei Regate, Coreea a
fost împărțită în trei regate: Goguryeo, Baekje și Silla. Aceste regate s-au luptat
pentru putere, dar în cele din urmă, Silla a reușit să unifice peninsulă în 668
d.Hr.

În perioada dinastiei Goryeo, Coreea a fost condusă de o serie de regi din


dinastia Goryeo. Această perioadă a fost marcată de avansarea artei, culturii și
literaturii, precum și de dezvoltarea relațiilor cu China și Mongolia.
În perioada dinastiei Joseon, Coreea a fost condusă de dinastia Joseon, care a
fost fondată de Yi Song-gye în 1392. Această perioadă a fost marcată de
dezvoltarea artei, literaturii și culturii coreene, precum și de relațiile diplomatice
și comerciale cu China și alte țări din Asia.

În 1910, Coreea a fost anexată de Japonia și a fost supusă unui control japonez
timp de 35 de ani. După sfârșitul celui de-al Doilea Război Mondial, Coreea a
fost divizată în două zone de ocupație, de către Statele Unite și Uniunea
Sovietică. Această divizare a dus la crearea Republicii Coreea (Coreea de Sud)
și a Republicii Populare Democrate Coreene (Coreea de Nord).

În prezent, Coreea de Sud este o țară democratică și prosperă, cu o economie


puternică și o cultură vibrantă. Coreea de Nord, în schimb, este una dintre cele
mai izolate și represive țări din lume, cu o economie slabă și o populație care
trăiește sub oprimarea guvernului.

- Pagina 24 -
Geografia Coreei
Coreea este o țară situată în partea de est a Asiei, în Peninsula Coreeană, și este
împărțită în două regiuni diferite: Coreea de Sud și Coreea de Nord.

Coreea de Sud se învecinează la nord cu Coreea de Nord, la vest cu Marea


Galbenă și Marea Galbenă de Est, la est cu Marea Japoniei, iar la sud cu
Strâmtoarea Korea și Marea Chinei de Est. Are o suprafață totală de 100.363
km², fiind o țară relativ mică. Teritoriul este alcătuit dintr-o serie de munți care
acoperă o mare parte a țării, cu vârfuri care depășesc 2.000 de metri. Cel mai
înalt munte din Coreea este Hallasan, cu o altitudine de 1.950 de metri. În afară
de munți, Coreea de Sud are și câteva câmpii largi și râuri importante, cum ar fi
râul Han și râul Nakdong.

Coreea de Nord se învecinează la sud cu Coreea de Sud, la nord și la est cu


China, la nord-est cu Rusia și la vest cu Marea Galbenă. Are o suprafață totală
de 120.540 km² și are un teren predominant muntos, cu o serie de lanțuri
montane care se întind pe tot teritoriul. Munții cele mai mari din Coreea de Nord
sunt Paektu-san, care este, de asemenea, cel mai înalt munte din Peninsula
Coreeană, cu o altitudine de 2.744 de metri, și Kumgang-san, cu o altitudine de
1.638 de metri. Există, de asemenea, câteva câmpii largi și râuri importante, cum
ar fi râul Yalu și râul Tumen.

Peninsula Coreeană are un climat continental temperat, cu veri călduroase și


ierni reci. Coreea de Sud are patru anotimpuri clare, în timp ce Coreea de Nord
are un climat mai sever, cu ierni mai lungi și mai reci și veri mai scurte și mai
reci. În general, Coreea are ploi abundente în timpul verii și uscăciune în timpul
iernii, ceea ce face ca apa să fie o resursă prețioasă în toată peninsula.
În concluzie, geografia Coreei este dominată de munți, cu câmpii și râuri
importante. Peninsula Coreeană are un climat continental temperat, cu patru
anotimpuri clare în Coreea de Sud și un climat mai sever în Coreea de Nord.

- Pagina 25 -
LOCURI DE VIZITAT SI MANCARE DIN
COREEA
1. Locuri de vizitat în Coreea:
a. Palatul Gyeongbokgung - este un palat vechi și magnific situat în inima
Seulului. Acesta este unul dintre cele mai importante monumente istorice
ale Coreei, care datează din perioada dinastiei Joseon.
b. Insula Jeju - este o insulă situată în largul coastei sudice a Coreei. Este
renumită pentru peisajele sale naturale, inclusiv cascade, plaje și vulcani.
Insula este, de asemenea, cunoscută pentru cultura sa unică și tradițiile
folclorice.
c. Piata Gwangjang - este o piață tradițională veche de 100 de ani din Seul,
renumită pentru mâncarea tradițională coreeană. Aici puteți găsi o
varietate de preparate precum tteokbokki (batoane de orez picante),
bibimbap (orez cu legume și carne), gimbap (roluri de orez cu legume și
carne), pajeon (clătite de ceapă verde) și multe altele.
d. Templul Jogyesa - este un templu budist important din Seul și centrul
spiritual al budismului coreean. Aici puteți experimenta atmosfera calmă
și liniștită a unui templu budist tradițional și puteți asista la ceremonii
budiste.
e. Satul tradițional Hanok - este un sat tradițional vechi din Seul, care
prezintă cultura și tradițiile coreene autentice. Aici puteți vizita casele
tradiționale coreene (hanok) și puteți experimenta stilul de viață
tradițional coreean.
2. Mâncarea tradițională coreeană:
a. Bulgogi - este un preparat coreean de carne marinată (de obicei vită sau
porc), care este friptă și servită cu orez și legume. Acesta este unul dintre
cele mai populare preparate coreene, renumit pentru gustul său delicios și
aroma sa.
b. Kimchi - este o salată coreeană fermentată, făcută din varză și alte
legume, precum și condimente și ardei iute. Este un aliment de bază în
bucătăria coreeană și este adesea servit ca garnitură sau alături de alte
preparate.
c.

- Pagina 26 -
CODUL SURSA
lml
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Acasa</title>
<link rel="stylesheet" href="style.css">

<link rel="preconnect" href="https://fonts.googleapis.com">


<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200
;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,60
0;1,700;1,800;1,900&display=swap" rel="stylesheet">

<link rel="preconnect" href="https://fonts.googleapis.com">


<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,
400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap"
rel="stylesheet">
</head>
<body>

<div class="nav">
<div class="nav-bar">
<h2>Coreea</h2>
<div class="nav-buttons">
<h3 class=" acasa" >
Acasa
</h3>

<h3 class="aroma gen"


onclick="window.location.href='Generalitati.html';" >
Generalitati
</h3>

<h3 class="aroma geo"


onclick="window.location.href='Geografie.html';" >

- Pagina 27 -
Geografie
</h3>

<h3 class="aroma" onclick="window.location.href='Turism.html';" >


Turism
</h3>

<h3 class="aroma" onclick="window.location.href='Galerie.html';" >


Galerie foto
</h3>

</div>
</div>
</div>

<div class="contents">

<div class="AcasaL">
<div class="text">

<p>
Coreea este o zonă geografică, o o civilizație și un fost stat situat în Peninsula
Coreei, în estul Asiei. Acum peninsula este împărțită în Coreea de Nord și
Coreea de Sud și se învecinează cu China la nord-vest, cu Rusia la nord-est și cu
Japonia spre sud-est, dincolo de Strâmtoarea Coreei. </p>
<p>
Coreea a fost unită până în 1948. în momentul de față este împărțită în Coreea
de Sud și Coreea de Nord. Coreea de Sud, official Republica Coreea, este o țară
capitalistă și democrată, membră a ONU, WTO, OECD și G-20. Coreea de
Nord, oficial Republica Populară Democrată Coreea, este o țară comunistă,
fondată de Kim Ir-sen și condusă azi de Kim Jong-un. </p>
<p>
Dovezi arheologice și lingvistice sugerează că originile coreenilor au fost în
limba altaică, limba migratorilor din centrul și sudul Siberiei[2] dar și a
populațiilor din sudul și sud-estul Asiei care au migrat și au populat Coreea
antică in valuri succesive din Neolitic pana in Epoca Bronzului. Adoptarea
sistemului de scriere chinezesc ("Hanja" în coreeană) in secolul II î.Hr și
Budismul în secolul IV d.Hr, au avut efecte profunde.
</p>
</div>

- Pagina 28 -
</div>

</body>
</html>

Style.css
body {
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
font-size: 16px;
line-height: 1.5;
background-color: #f5f5f5;

}
body {
background-image: url("assets/background.jpg");
overflow: auto;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE and Edge */

background-repeat: no-repeat;
background-size: cover;

/* navigation styles */
.nav {
background-color: #fff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
position: fixed;
top: 0;
left: 0;
width: 100%;
}

.nav-bar {
display: flex;
align-items: center;
justify-content: space-between;
max-width: 1200px;

- Pagina 29 -
margin: 0 auto;
padding: 10px 20px;
}

.nav-bar h2 {
margin: 0;
font-family: 'Lato', sans-serif;
font-size: 24px;
font-weight: 700;
}

.nav-buttons {
display: flex;
justify-content: center;
align-items: center;
}

.nav-buttons h3 {
margin: 0;
margin-left: 20px;
padding: 10px;
font-family: 'Lato', sans-serif;
font-size: 18px;
font-weight: 400;
cursor: pointer;
transition: background-color 0.2s ease-in-out;
}

.nav-buttons h3:hover {
background-color: #f5f5f5;
}

/* contents styles */
.contents {
max-width: 1200px;
margin: 100px auto 0;
padding: 0 20px;
}

.AcasaL {
display: flex;
justify-content: space-between;
align-items: center;
}

- Pagina 30 -
.AcasaL img {
max-width: 400px;
margin-left: 40px;
}

.text {
max-width: 750px;
}

.text p {
margin: 20px 0px;
font-size: 20px;
font-weight: 800;
color: #D3D3D3;
text-shadow: 2px 2px 4px rgb(0,0,0);
line-height: 1.5;
opacity: 2;
}

input[type="text"] {
border: none;
padding-left: 100px;
}

Generalitati.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Generalitati</title>
<link rel="stylesheet" href="generalitati.css">

<link rel="preconnect" href="https://fonts.googleapis.com">


<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200
;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,60
0;1,700;1,800;1,900&display=swap" rel="stylesheet">

<link rel="preconnect" href="https://fonts.googleapis.com">


<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

- Pagina 31 -
<link
href="https://fonts.googleapis.com/css2?family=Bruno+Ace&display=swap"
rel="stylesheet">

<link rel="preconnect" href="https://fonts.googleapis.com">


<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100;0,20
0;0,300;0,400;0,500;0,600;0,700;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,7
00;1,800;1,900&display=swap" rel="stylesheet">

<link rel="preconnect" href="https://fonts.googleapis.com">


<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,
400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap"
rel="stylesheet">
</head>
<body>

<div class="nav">
<div class="nav-bar">
<h2>Generalitati</h2>
<div class="nav-buttons">
<h3 class="aroma acasa"
onclick="window.location.href='frontpage.html';">
Acasa
</h3>

<h3 class="gen" >


Generalitati
</h3>

<h3 class="aroma geo"


onclick="window.location.href='Geografie.html';" >
Geografie
</h3>

<h3 class="aroma" onclick="window.location.href='Turism.html';" >


Turism
</h3>

- Pagina 32 -
<h3 class="aroma" onclick="window.location.href='Galerie.html';" >
Galerie foto
</h3>

</div>
</div>
</div>
<div class="AcasaL">
<div class="text">
</div>

</div>

<div class="contents">

<div class="AcasaL">

<div class="image-and-text">

<p> <img src="assets/confiucius.jpg" alt="Image" class="float-right">


Coreea este o țară situată în Asia de Est și este împărțită în două părți: Coreea de
Nord și Coreea de Sud. Este o țară cu o cultură bogată și o istorie interesantă. În
ceea ce privește geografia, Coreea are o mare de est, Marea Japoniei, iar la vest
se învecinează cu Marea Galbenă. În plus, este mărginită la nord de China și la
sud de Oceanul Pacific.

</p>
<br>
</p>

<p> <img src="assets/mancare.jpg" alt="">


Oamenii din Coreea sunt cunoscuți pentru ospitalitatea și politețea lor, iar
cultura lor este adesea influențată de Confucianism. Coreea este, de asemenea,
renumită pentru gastronomia sa, care include mâncăruri precum kimchi, bulgogi
și bibimbap. În plus, Coreea este cunoscută pentru tehnologia sa avansată, cu
companii precum Samsung, LG și Hyundai care au făcut o mare impresie în
întreaga lume.
</p>

- Pagina 33 -
<br>

</p>

<p><img src="assets/bani.avif" alt="Image" class="float-right">


În Coreea, limba oficială este coreeana, iar moneda oficială este wonul sud-
coreean. Coreea de Sud este una dintre cele mai dezvoltate țări din lume, cu o
economie puternică și un înalt nivel de trai. Pe de altă parte, Coreea de Nord este
considerată una dintre cele mai izolate țări din lume, cu un regim politic
autoritar și o economie controlată de stat.

</p>
</div>

</div>

</div>

</body>
</html>

Generalitati.css
/* body styles */
body {
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
font-size: 16px;
line-height: 1.5;
background-color: #f5f5f5;
background-image: url("assets/background.jpg");
background-repeat: no-repeat;
background-size: cover;
overflow: auto;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE and Edge */
}

/* navigation styles */
.nav {
background-color: #fff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);

- Pagina 34 -
position: fixed;
top: 0;
left: 0;
width: 100%;
}

.nav-bar {
display: flex;
align-items: center;
justify-content: space-between;
max-width: 1200px;
margin: 0 auto;
padding: 10px 20px;
}

.nav-bar h2 {
margin: 0;
font-family: 'Lato', sans-serif;
font-size: 24px;
font-weight: 700;
}

.nav-buttons {
display: flex;
justify-content: center;
align-items: center;
}

.nav-buttons h3 {
margin: 0;
margin-left: 20px;
padding: 10px;
font-family: 'Lato', sans-serif;
font-size: 18px;
font-weight: 400;
cursor: pointer;
transition: background-color 0.2s ease-in-out;
}

.nav-buttons h3:hover {
background-color: #f5f5f5;
}

/* contents styles */

- Pagina 35 -
.contents {
max-width: 1200px;
margin: 100px auto 0;
padding: 0 20px;
}

.AcasaL {
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: row-reverse;
}

.AcasaL img {
max-width: 300px;
max-height: 400px;
margin-right: 20px;
float: right;
}

.text {
max-width:600px; /* change the text width */
}

.image-and-text p {
margin: 20px 0;
font-size: 20px;
font-weight: 600;
color: #D3D3D3;
text-shadow: 2px 2px 4px rgb(0,0,0);
line-height: 1.5;
opacity: 2;
vertical-align: middle;
}

Geografie.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Geografie</title>

- Pagina 36 -
<link rel="stylesheet" href="Geografie.css">

<link rel="preconnect" href="https://fonts.googleapis.com">


<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200
;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,60
0;1,700;1,800;1,900&display=swap" rel="stylesheet">

<link rel="preconnect" href="https://fonts.googleapis.com">


<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,
400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap"
rel="stylesheet">
</head>
<body>

<div class="nav">
<div class="nav-bar">
<h2>Geografie</h2>
<div class="nav-buttons">
<h3 class="aroma acasa"
onclick="window.location.href='frontpage.html';">
Acasa
</h3>

<h3 class="aroma gen"


onclick="window.location.href='Generalitati.html';" >
Generalitati
</h3>

<h3 class="geo" >


Geografie
</h3>

<h3 class="aroma" onclick="window.location.href='Turism.html';" >


Turism
</h3>

<h3 class="aroma" onclick="window.location.href='Galerie.html';" >


Galerie foto

- Pagina 37 -
</h3>

</div>
</div>
</div>

<div class="contents">

<div class="AcasaL">

<div class="text">

<p>
Coreea este o peninsulă situată în Asia de Est, delimitată la vest de Marea
Galbenă și la est de Marea Japoniei. În general, teritoriul Coreei este montan în
interior și colinar pe coastă, iar aceste caracteristici geografice au influențat în
mod semnificativ cultura și economia acestei țări.

</p>

<br>
<p>
La nord se învecinează cu China și Rusia, iar la sud cu Japonia și Marea
Japoniei. La vest se află Marea Galbenă, care o separă de China și de Insula
Shandong. La est se găsește Marea Japoniei, care o separă de Japonia.
</p>
<br>
<p>
Partea de sud a peninsulei este ocupată de Coreea de Sud, o țară dezvoltată cu
economie puternică și o democrație stabilită. În schimb, partea de nord este
ocupată de Coreea de Nord, o țară izolată și închisă, cu o economie slabă și o
dictatură comunistă.
</p>
<br>
<p>
În ceea ce privește reliefurile, peste 70% din teritoriul Coreei de Sud este
muntos, cu vârfuri care depășesc 2.000 de metri, cum ar fi vârful Hallasan din

- Pagina 38 -
insula Jeju. La nord, pe teritoriul Coreei de Nord, se întinde lanțul muntos
Munții Chogori, care includ vârful Paektu, cel mai înalt munte din Peninsula
Coreeană.
</p>
<br>
<p>
De asemenea, Coreea este recunoscută și pentru râurile sale, cum ar fi râul Han
și râul Nakdong, care sunt importante pentru agricultură, dar și pentru generarea
de energie electrică. Clima din Coreea este temperat-continentală, cu veri calde
și ierni reci, cu precipitații abundente, în special în timpul sezonului musonic.
</p>

<br>

<div class="image"> <img src="assets/mapa.avif" alt="""> </div>

</div>

</div>

</div>
</body>
</html>

Geografie.css

/* body styles */
body {
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
font-size: 16px;
line-height: 1.5;
background-color: #f5f5f5;
}

body {
background-image: url("assets/background.jpg");
overflow: auto;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE and Edge */

- Pagina 39 -
background-repeat: no-repeat;
background-size: cover;
}

/* navigation styles */
.nav {
background-color: #fff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1;
}

.nav-bar {
display: flex;
align-items: center;
justify-content: space-between;
max-width: 1200px;
margin: 0 auto;
padding: 10px 20px;
}

.nav-bar h2 {
margin: 0;
font-family: 'Lato', sans-serif;
font-size: 24px;
font-weight: 700;
}

.nav-buttons {
display: flex;
justify-content: center;
align-items: center;
}

.nav-buttons h3 {
margin: 0;
margin-left: 20px;
padding: 10px;
font-family: 'Lato', sans-serif;
font-size: 18px;
font-weight: 400;

- Pagina 40 -
cursor: pointer;
transition: background-color 0.2s ease-in-out;
}

.nav-buttons h3:hover {
background-color: #f5f5f5;
}

/* contents styles */
.contents {
max-width: 1000px;
margin: 100px auto 0;
padding: 0 20px;
}

.AcasaL {
display: flex;
justify-content: space-between;
align-items: center;
}

.AcasaL img {
float:middle;
max-width: 800px;
margin-left: 10px;
vertical-align: middle;
}

.text {
max-width:1000px;
}

.text p {
margin: 20px 0;
font-size: 20px;
font-weight: 600;
color: #d3d3d3;
text-shadow: 2px 2px 4px rgb(0, 0, 0);
line-height: 1.5;
opacity: 0.8;
}

- Pagina 41 -
input[type="text"] {
border: none;
padding-left: 10px;
}

Turism.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Turism</title>
<link rel="stylesheet" href="tur.css">

<link rel="preconnect" href="https://fonts.googleapis.com">


<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200
;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,60
0;1,700;1,800;1,900&display=swap" rel="stylesheet">

<link rel="preconnect" href="https://fonts.googleapis.com">


<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,
400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap"
rel="stylesheet">
</head>
<body>

<div class="nav">
<div class="nav-bar">
<h2>Turism</h2>
<div class="nav-buttons">
<h3 class="aroma acasa"
onclick="window.location.href='frontpage.html';">
Acasa
</h3>

<h3 class="aroma gen"


onclick="window.location.href='Generalitati.html';">
Generalitati
</h3>

- Pagina 42 -
<h3 class="aroma geo"
onclick="window.location.href='Geografie.html';" >
Geografie
</h3>

<h3 class="aroma-2" >


Turism
</h3>

<h3 class="aroma" onclick="window.location.href='Galerie.html';" >


Galerie foto
</h3>

</div>
</div>
</div>

<div class="contents">

<div class="AcasaL">
<div class="image-and-text">

<p> <img src="assets/Seoul.jpg" alt="">


Seoul - capitala Coreei de Sud, este un oraș vibrant și modern, dar care păstrează
tradițiile și cultura coreeană. Aici veți găsi palate istorice, temple budiste, piețe
tradiționale, muzee și multe alte atracții turistice.
</p>
<br>
<p> <img src="assets/Jeju.jpg" alt="">
Insula Jeju - este o insulă tropicală, situată în sudul Coreei de Sud, cunoscută
pentru frumusețea sa naturală. Aici puteți vizita vulcani, cascade, plaje și grădini
frumoase.
</p>
<br>
<p> <img src="assets/Gyeon.jfif" alt="">
Gyeongju - este un oraș istoric, cunoscut pentru patrimoniul său cultural și
istoric. Aici puteți vizita temple vechi, morminte regale, castele și muzee.

</p>
<br>
<p> <img src="assets/Busan.jpg" alt="">

- Pagina 43 -
Busan - este un oraș portuar, situat în sud-estul Coreei de Sud, cunoscut pentru
plajele sale, frumusețea naturală și viața de noapte vibrantă.
</p>
<br>
<p> <img src="assets/parcul.jpg" alt="">

Parcul Național Seoraksan - este situat în Munții Taebaek din estul Coreei de
Sud și este un loc popular pentru drumeții și activități în aer liber. Aici puteți
admira cascade, stânci spectaculoase și o varietate de specii de plante și animale.
</p>
<p>
Acestea sunt doar câteva dintre cele mai populare locații turistice din Coreea de
Sud. În plus, Coreea de Sud este cunoscută și pentru bucătăria sa delicioasă, cu
preparate precum kimchi, bulgogi, bibimbap și multe altele.
</p>
<br>

</div>

</div>

</div>

<!-- <div class="back">


<button onclick="window.location.href='moduri.html';" >
<p>Înapoi</p>
</button>
</div> -->

</body>
</html>

Tur.css
/* body styles */
body {
margin: 0;

- Pagina 44 -
padding: 0;
font-family: 'Poppins', sans-serif;
font-size: 16px;
line-height: 1.5;
background-color: #f5f5f5;
background-image: url("assets/background.jpg");
background-repeat: no-repeat;
background-size: cover;
overflow: auto;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE and Edge */
}

/* navigation styles */
.nav {
background-color: #fff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
position: fixed;
top: 0;
left: 0;
width: 100%;
}

.nav-bar {
display: flex;
align-items: center;
justify-content: space-between;
max-width: 1200px;
margin: 0 auto;
padding: 10px 20px;
}

.nav-bar h2 {
margin: 0;
font-family: 'Lato', sans-serif;
font-size: 24px;
font-weight: 700;
}

.nav-buttons {
display: flex;
justify-content: center;
align-items: center;
}

- Pagina 45 -
.nav-buttons h3 {
margin: 0;
margin-left: 20px;
padding: 10px;
font-family: 'Lato', sans-serif;
font-size: 18px;
font-weight: 400;
cursor: pointer;
transition: background-color 0.2s ease-in-out;
}

.nav-buttons h3:hover {
background-color: #f5f5f5;
}

/* contents styles */
.contents {
max-width: 1200px;
margin: 100px auto 0;
padding: 0 20px;
}

.AcasaL {
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: row-reverse;
}

.AcasaL img {
max-width: 500px;
max-height: 500px;
margin-right: 20px;
float: right;
}

.text {
max-width:700px;
}

.image-and-text p {
margin: 100px 0;

- Pagina 46 -
font-size: 20px;
font-weight: 600;
color: #D3D3D3;
text-shadow: 2px 2px 4px rgb(0,0,0);
line-height: 1,5;
opacity: 2;
vertical-align: middle;
}

Galerie.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Galerie Foto</title>
<link rel="stylesheet" href="gal.css">

<link rel="preconnect" href="https://fonts.googleapis.com">


<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200
;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,60
0;1,700;1,800;1,900&display=swap" rel="stylesheet">

<link rel="preconnect" href="https://fonts.googleapis.com">


<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,
400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap"
rel="stylesheet">
</head>
<body>

<div class="nav">
<div class="nav-bar">
<h2>Galerie Foto</h2>
<div class="nav-buttons">
<h3 class="aroma acasa"
onclick="window.location.href='frontpage.html';">
Acasa
</h3>

- Pagina 47 -
<h3 class="aroma gen"
onclick="window.location.href='Generalitati.html';">
Generalitati
</h3>

<h3 class="aroma geo"


onclick="window.location.href='Geografie.html';" >
Geografie
</h3>

<h3 class="aroma" onclick="window.location.href='Turism.html';" >


Turism
</h3>

<h3 class="aroma-2" >


Galerie foto
</h3>

</div>
</div>
</div>

<div class="contents">

<div class="AcasaL">
<div class="gallery">
<img src="assets/download.jfif" alt="Photo 1">
<img src="assets/1.jfif" alt="">
<img src="assets/2.jfif" alt="">
<img src="assets/3.jfif" alt="">
<img src="assets/images.jfif" alt="">
<img src="assets/mancare.jpg" alt="">
<img src="assets/4.jfif" alt="">
<img src="assets/5.jfif" alt="">
<img src="assets/6.jfif" alt="">

</div>

</div>

</div>

- Pagina 48 -
<!-- <div class="back">
<button onclick="window.location.href='moduri.html';" >
<p>Înapoi</p>
</button>
</div> -->

</body>
</html>

Gal.css
/* body styles */
body {
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
font-size: 16px;
line-height: 1.5;
background-color: #f5f5f5;
background-image: url("assets/background.jpg");
background-repeat: no-repeat;
background-size: cover;
overflow: auto;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE and Edge */
}

/* navigation styles */
.nav {
background-color: #fff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
position: fixed;
top: 0;
left: 0;
width: 100%;
}

.nav-bar {
display: flex;
align-items: center;

- Pagina 49 -
justify-content: space-between;
max-width: 1200px;
margin: 0 auto;
padding: 10px 20px;
}

.nav-bar h2 {
margin: 0;
font-family: 'Lato', sans-serif;
font-size: 24px;
font-weight: 700;
}

.nav-buttons {
display: flex;
justify-content: center;
align-items: center;
}

.nav-buttons h3 {
margin: 0;
margin-left: 20px;
padding: 10px;
font-family: 'Lato', sans-serif;
font-size: 18px;
font-weight: 400;
cursor: pointer;
transition: background-color 0.2s ease-in-out;
}

.nav-buttons h3:hover {
background-color: #f5f5f5;
}

/* contents styles */
.contents {
max-width: 1200px;
margin: 100px auto 0;
padding: 0 20px;
}

.AcasaL {
display: flex;
justify-content: space-between;

- Pagina 50 -
align-items: center;
flex-direction: row-reverse;
}

.AcasaL img {
max-width: 100%;
height: auto;
margin-bottom: 20px;
}

.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
grid-gap: 20px;
}

.gallery img {
width: 120%;
height: auto;
object-fit: cover;}

- Pagina 51 -
Surse de documentare

• wikipedia.com/coreea
• CSS - Prentice Hall
• Nationalgeographic.com
• Asianfood.com
• Eturia.ro

- Pagina 52 -

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