Download - Lucrare de curs WEB
Ministerul Educaţiei al Republicii Moldova
Colegiul Tehnic Feroviar din Bălti
Proiect de curs
La disciplina: Proiectarea şi crearea
paginilor WEB
Pe tema: Enigmele antice
Elaborat: Scobiola D.
Grupa: IG-410
Verificat: Baltag I.
Bălţi 2013
MINISTERUL EDUCAŢIEI AL REPUBLICII MOLDOVACOLEGIUL TEHNIC FEROVIAR DIN BĂLŢI
Aprobat la şedinţa catedrei ______________________
Proces verbal nr ._______ Din ,,__” _________ 2013
Şeful catedrei ___________
PLANUL INDIVIDUAL DE ELABORAREAL PROIECTULUI DE CURS
LA DISCIPLINA: ,,PROIECTAREA ŞI CREAREA PAGINILOR WEB”
Pe tema: Enigmele anticeA elevului gr.IG-410 Scobiola Daniel
Planul de elaborare al proiectului de cursNr. Denumirea misiunii de re-
alizareTermenul de
realizareEvaluarea
rezultatelorSemnătu-ra
conduc.1. Culegerea informaţiei2. Formatarea textului3. Formatarea documentului4. Organizarea legăturii5. Crearea tabelelor6. Formarea proiectului de curs
Sarcina dată ,,____”_________201__
Semnătura profesorului__________________
Sarcina primită ,,____”_________201__
Semnătura elevului____________________
CUPRINS
Întroducere ........................................................................................................................... 4
1. Partea teoretică ............................................................................................................ 5
2. Descrierea programului ............................................................................................. 13
3. Afişarea rezultatelor ................................................................................................. 15
4. Listingul programului ............................................................................................... 19
Concluzii ............................................................................................................................. 24
Bibliografia ........................................................................................................................ 25
Mod.
Coala № Document Semnat Data
Coala
3
CTFB 1851
Îndeplinit Scobiola D.
Verificat Baltag I.
N Control.
Enigmele antice Litera Coli
25
IG-410
ÎNTRODUCERE
Limbajul HTML este un limbaj de programare conceput pentru crearea paginilor WEB.
Aceste site-uri WEB scrise in limbaj HTML pot fi vizualizate de oricine conectat la Internet.
Este relativ uşor de invăţat, informaţiile de bază fiind accesibile pentru cei mai mulţi oameni
intr-o singură zi, si limbajul HTML este destul de puternic ceea ce va permite sa creaţi WEB
site-uri. Ea este in continua evoluţie şi în curs de revizuire pentru a satisface cererea şi a
cerintelor de Internet tot mai mare audienţa sub indrumarea World Wide Web se ocupa cu
proiectarea şi menţinerea in această limbi. Limbajul HTML este un limbaj, alcătuit din coduri de
cuvinte şi de sintaxa ca orice alta limba.
Definiţia HTML este Hyper Text Markup Language.
Hyper Text este o metoda prin care ne mişcam in jurul webului, făcînd clic pe textul
speciale numite hyperlink-uri care ne va aduce la pagina următoare. Faptul că este doar hiper
înseamna că nu este liniară - de exemplu puteţi merge la orice loc de pe Internet ori de cate ori
doriţi, făcînd clic pe link-uri - nu exista reguli de a face lucruri.
Markup este ceea ce tag-uri HTML fac cu textul din interiorul lor. Ele marchează un
anumit tip de text (bold - text îngroşat, de exemplu).
Scopul proiectului de curs este de a realiza un site cu tematica “Egiptul Antic”, care spre
să fie interesant și captiv.
Mi-am ales tema dată pe motiv că iubesc mult cultura antică și tot ce este legat de
antichitate este legat de personalitatea mea.
Documentele HTML pot fi create cu ajutorul fiecărui Redactor de text sau HTML-
Redactorilor specializate. Alegerea redactorului, care poate fi de utilizat pentru crearerea HTML
documentelor depinde numai de la preferinţele personale fiecării autor.
Lucrarea este alcătuită din 2 părți: partea teoretică, în care este analizată teoria limbajului
HTML și partea practică, care conține o aplicație realizată în limbajul HTML referitor la pietre
și minerale și cu ajutorul căreia orice persoană poate realiza orice aplicație la dorință.
Lucrarea conține 26 pagini, 4 figuri și partea practică care este înscrisă pe disc și e atașată
lucrării date.
Mod.
Coala № Document Semnat Data
Coala
4
CTFB 1851
Îndeplinit Scobiola D.
Verificat Baltag I.
N Control.
ÎNTRODUCERE Litera Coli
25
IG-410
PARTEA TEORETICĂ
Cu ajutorul limbajului HTML (Hyper Text Markup Language) putem construi pagini
WEB nu foarte pretenţioase insă reprezintă un inceput pentru realizarea site-urilor profesionale.
Structura unui document HTML
Despre tag-uri.
Tag-urile nu sunt altceva decît nişte marcaje sau etichete pe care limbajul HTML le
foloseşte alaturi de texte pentru a ajuta browser-ul de internet să afiseze corect conţinutul paginii
web. Aceste tag-uri (etichete) pot fi de doua feluri:
1. tag-uri pereche (un tag de inceput si unul de incheiere). Exemple: <HTML> si </HTML>;
<TITLE> si </TITLE>; <HEAD> si </HEAD>;
2. tag-uri singulare (nu au un tag de incheiere) Exemple: <HR>, <BR>.
Să vedem tag-urile de baza pe care trebuie sa le conţină un document HTML:
<HTML> - cu acest tag incepe orice document HTML. Prin folosirea acestui tag iî spunem
browser-ului că este vorba de un fişier HTML pentru a îl putea afişa.
<HEAD> - între aceste tag-uri sunt trecute, pe langă titlul paginii, diverse informaţii folositoare
pentru browser-ul de internet, informaţii pe care le vom descoperi pe parcursul acestui curs.
</HEAD> - acesta este tag-ul de incheiere al tag-ului <HEAD>
<TITLE> - cu ajutorul acestei perechi de tag-uri vei putea dă un titlu documentului tău. Astfel,
textul pe care îl vei scrie între aceste tag-uri va fi afişat in bara de titlu a documentului.
</TITLE> - este tag-ul de оncheiere al tag-ului <TITLE>. Aratî sfîrşitul titlului documentului.
<BODY> - odată cu acest tag începe conţinutul paginii web. Tot ce vei scrie între tag-urile
<BODY> si </BODY> va fi afişat, de catre browser, pe ecranul monitorului.
</BODY> - îi spui browser-ului ca ai terminat de scris conţinutul paginii. Tot ceea ce vei scrie
dupa acest tag nu va mai fi afişat.
</HTML> - este tag-ul de оncheiere al tag-ului <HTML>. Codul oricarui document se termina
cu acest tag. Tag-urile (etichetele) pot fi scrise atat cu litere mari cat si cu litere mici.
Despre atribute HTML
Atributele pot fi definite ca niste proprietaţi ale tag-urilor. Atributele se pun numai in tag-
ul de inceput. Daca un tag nu are nici un atribut, atunci browser-ul va lua în considerare valorile
implicite ale tag-ului respective.
Mod.
Coala № Document Semnat Data
Coala
5
CTFB 1851
Îndeplinit Scobiola D.
Verificat Baltag I.
N Control.
PARTEA TEORETICĂ Litera Coli
25
IG-410
Atributul BGCOLOR care se foloseste cu tag-ul <BODY> indică ce culoare va avea
fondul viitoarei pagini web. Fondul unei pagini web are in mod implicit culoarea albă, dar să
spunem că vrem ca fondul paginii noastre să fie portocaliu. Vom putem folosi pentru atributul
BGCOLOR codul care-va culorii (ex: orange- #FF9900).
Atunci cînd vrem sa trasăm o linie, folosim tag-ul <HR> care înseamna linie
orizontala. Daca nu îi asociem acestui tag nici un atribut atunci vom obtine o line
orizontala cat latimea paginii web. Daca vrem sa folosim propriile noastre proprietati .
Pentru trasarea unei linii orizontale vom apela la atributele tag-ului <HR>. Aceste atribute
sunt urmatoarele: ALIGN - pentru alinierea liniei, COLOR - pentru culoarea liniei, SIZE - pentru
grosimea liniei si WIDTH - pentru lungimea liniei.
Pentru a trasa o linie rosie (COLOR="#FF0000"), cu o lungime de jumatate din valoarea
implicită (WIDTH="50%") şi puţin mai groasă decît cea implicită (SIZE="5%") ce va fi aliniată
in centrul paginii (ALIGN="center"), vom folosi urmatoarea linie de cod:
<HR COLOR="#FF0000" WIDTH="50%" SIZE="5%" ALIGN="center">
Despre culori HTML
I. Culoarea fondului unei pagini web
Nu trebuie ca fondul paginii tale sa fie alb. Poţi opta pentru ce culoare vrei cu ajutorul
atributului BGCOLOR al tag-ului <BODY>.
Tot ce trebuie sa face este sa cauţi in tabelul cu nume si coduri de culori, sa alegi una care-
ţi place şi să-i scrii numele sau codul in cadrul atributului BGCOLOR.
II. Culoarea textului
Culoarea textului in cadrul unei pagini html se poate schimba folosind atributul COLOR
(culoare) al tag-ului <FONT>.
Formatarea textului in HTML
I. Titluri
Atunci cînd avem nevoie să folosim un titlu în cadrul paginii noastre web putem apela la
tag-urile <H1>, <H2>, <H3>, <H4>, <H5>, <H6>. Cu ajutorul acestor tag-uri, care au şi tag-uri
de încheiere, vom scrie titlurile din cadrul paginilor noastre web. Astfel in cadrul codului HTML
vom folosi tag-ul <H1>, de exemplu, urmat de textul titlului, iar la sfîrşit vom folosi tag-ul de
incheiere </H1>. Tag-urile <H1> si </H1> permit scrierea unui titlu cu caracterele cele mai mari
in timp ce textul încadrat de tag-urile <H6> si </H6> va fi afişat cu caracterele cele mai mici.
Tag-urile acestea accepta atributul ALIGN cu ajutorul căruia titlul va putea fi aliniat la stînga, la
centru sau la dreapta (ex: ALIGN="left" ALIGN="center" ALIGN="right")
II. Etichete pentru formatarea textului
Mod. Coala.
№ Document. Semnat Data
Coala.6
Pentru alegerea caracteristicilor unui text, putem folosi tag-ul <FONT>. Acest tag acceptă
mai multe atribute (color, face, size) care ne vor ajuta in formatarea textelor. Atributul COLOR
se referă la culoarea textului ce va fi incadrat de tag-urile <FONT> şi </FONT>, atributul FACE
arata tipul fontului, iar atributul SIZE arată marimea fontului.
Pentru a alege culoarea textului, trebuie să consulţi mai întîi tabelul de culori, iar apoi, atunci
cand te-ai hotarît ce culoare vei folosi, să scrii codul sau numele acelei culori ca valoare a
atributului COLOR.
La tipul fontului, la fel ca şi la culori, este bine sa foloseşti un font care se afla pe majoritatea
calculatoarelor, pentru ca daca foloseşti un font mai putin utlizat, multi
utilizatori nu vor putea vedea textele din cadrul paginilor tale cu acelaşi font. Cele mai
folosite fonturi pentru paginile web sunt urmatoarele:
Acest text a fost scris cu fontul "arial"
Acest text a fost scris cu fontul "times new roman"
Acest text a fost scris cu fontul "courier new"
Acest text a fost scris cu fontul "verdana"
<FONT COLOR=”#000000” FACE=”Arial”>Acest text ...</FONT>
Pentru a schimba dimensiunea implicită a fontului, vom folosi una din valorile atributului
size. Acesta poate lua una din valorile 1,2,3,4,5,6,7 (1 pentru cea mai mica dimensiune si 7
pentru cea mai mare):
<FONT COLOR=”#FFA500” FACE=”Arial” SIZE=”7”>
www.inforavelromania.ro</FONT>
Dacă vrem ca textul nostru să fie scris cu caractere ingroşate, folosim perechea de etichete
<B> si </B> (ex: <B>Text bold</B>) va fi - Text bold.
Pentru ca textul să fie scris cu caractere italice, folosim perechea de etichete <I>si</I> (ex:
<I>Text italic</I>) va fi - Text italic.
Pentru ca textul să fie subliniat, folosim perechea de etichete <U> si </U> (ex:<U>Text
subliniat</U>) va fi - Text subliniat.
Dacă vrem ca textul să fie afişat in centrul paginii putem folosi perechea de etichete
<CENTER> si </CENTER> (ex: <CENTER>Text centrat</CENTER>) va fi –
Text centrat
Atunci cînd vrem ca textul din cadrul paginii noastre web să fie afişat pe mai multe
rînduri vom folosi unul din tag-urile <BR> sau <P>. Tag-ul <BR> nu are tag de incheiere, în
timp ce tag-ul <P> are tag de incheiere, insă nu este obligatoriu.
Tag-ul <BR> vine de la line break (intrerupere de linie) şi l-am mai folosit in cadrul acestui curs.
Este folosit pentru a face trecerea de la o linie la alta.
Mod. Coala.
№ Document. Semnat Data
Coala.7
Tag-ul <P> vine de la cuvîntul paragraf si se deosebeşte de tag-ul <BR> prin faptul că prin
utilizarea lui nu numai ca se trece pe urmatorul rînd, dar se-şi lasa un rînd liber între texte.
HTML – imagini
I. Formatele imaginilor
Browserele recunosc, in cadrul paginilor web, mai multe formate ale imaginilor. Cele mai
răspîndite sunt cele cu extensia .gif şi cele care au una din terminatiile .jpg sau .jpeg. Iata în
continuare cîteva caracteristici ale acestor formate de imagini:
GIF (Graphics Interchange Format) – Formatul GIF poate reda un numar de 256 de culori,
de aceea este folosit pentru imaginile de dimensiuni mici: butoane, icon-uri, animaţii.
JPEG (Joint Photographic Expert Group) – Formatul JPEG nu mai este limitat la 256 de
culori şi de aceea este folosit pentru fotografii. Imaginile care apartin acestui format au
extensia .jpg sau .jpeg.
Se observă ca în cazul fotografiilor, formatul jpg ofera o calitate mai buna a imaginii si
ocupa un spaţiu mult mai mic decăt dacă am fi salvat aceeasi imagine in formatul gif.
II. Adaugarea imaginilor in paginile web
La majoritatea site-urilor, imaginile dau o nota aparte paginilor web. Pentru a folosi
imagini si in cadrul paginilor tale web trebuie să foloseşti tag-ul <IMG> insoţit de atributul SRC
(source) care indică adresa sau calea către imaginea pe care vrei sa o folosesti. Forma generală a
acestui tag va fi:
<IMG SRC="numeleimaginii.extensie">
Dacă vrei ca imaginea să fie incadrata de un chenar, foloseşte atributul BORDER al tag-
ului <IMG>. Acest atribut are ca valoare numere intregi pozitive.
<IMG SRC=”bebe.jpg” BORDER=5>.
Daca imaginea va fi de dimensiuni mai mari, atunci pană cînd se va încărca şi va fi afişata
de browser, utilizatorul poate vedea un text înlocuitor al imaginii. Acest lucru se poate realiza
folosind atributul ALT împreuna cu tag-ul <IMG>. Dacă trecem cursorul mouse-ului deasupra
imaginii, o sa apara textul pe care l-am scris la atributulALT.
<IMG SRC=”../Poze/bebe.jpg” BORDER=5 ALT=”Imagine bebe”>
III. Folosirea imaginilor alături de texte
Pentru a alinia o imagine vom folosi atributul ALIGN al tag-ului <IMG>. Atributul
ALIGN poate avea una dintre valorile: left sau right, aliniere la stîngă sau la dreapta paginii.
Dacă vrei ca textul să fie afisat la o anumită distanţa de imagine, foloseşte atributele
HSPACE (spaţiu pe orizontala) şi VSPACE (spaţiu pe verticala). Valorile acestor atribute
trebuie să fie numere intregi, care reprezintă de fapt distanţa în pixeli dintre imagine şi text.
Mod. Coala.
№ Document. Semnat Data
Coala.8
Cu ajutorul atributului BACKGROUND al tag-ului <BODY> poţi folosi o imagine ca
fond al unei pagini web. Pentru a întelege mai bine, copiază imaginile următoare (click dreapta,
iar apoi Save Picture As) in folder-ul Poze cu numele scrise sub fiecare. Acum în codul paginii
imagini.html din folder-ul Pagini adaugă tag-ului <BODY> atributul BACKGROUND după
cum urmează: <BODY BACKGROUND=”../Poze/background1.jpg”>
Crearea legaturilor in HTML
I. Legatura catre o alta pagina
Pentru a folosi legaturi in paginile web pe care le vei face, trebuie sa folosesti perechea de
tag-uri <A> si </A>. Numele acestor tag-uri vine de la cuvantul anchor care se traduce ancora.
Tag-ul <A> va trebui folosit impreuna cu atributul HREF. Linia de cod pentru
inserarea unei legaturi in cadrul unei pagini web va avea urmatoarea forma:
<A HREF=numelepaginii.html>Textul legaturii</A>
Daca pagina respectiva se afla in acelasi folder cu pagina pe care se afla legatura atunci nu
sunt necesare ghilimelele.
II. Legatura catre un site
Dupa ce ai vazut cum se folosesc legaturile catre alte pagini html locale acum vom vedea
impreuna cum putem adauga o legatura catre un site particular. Trebuie sa folosesti urmatoarea
linie de cod:
<A HREF="adresa site-ului">Textul legaturii</A>
Asa cum ai observat pana acum, atunci cand dai click pe una dintre legaturile din paginile
prezentate ca exemple, se deschide o pagina HTML in aceeasi fereastra a browser-ului, peste
pagina ce contine legatura. Pentru a deschide o noua fereastra a browser-ului atunci cand se da
click pe o legatura trebuie folosit atributul TARGET caruia i se atribuie valoarea "_blank".
III. Legatura catre o adresa de e-mail
Daca vrei ca utilizatorii paginii tale web sa iti poata scrie parerile lor despre site, de
exemplu, atunci trebuie ca in cadrul paginii sa existe o legatura catre o adresa de e-mail. Cum
faci asta? Foarte simplu. Forma generala a unei legaturi catre o adresa de e-mail este urmatoarea:
<A HREF="mailto:adresa de e-mail">Trimite-mi un e-mail</A>
In codul HTML al paginii intrebari.html adauga inainte de linia de cod ce contine eticheta
de incheiere </BODY>, urmatoarea secventa de cod:
<BR><BR><BR><FONT FACE="Arial" COLOR="#FF9900">
Pentru a afla răspunsul la alte întrebări, trimite un mail la:
</FONT>
<A HREF="mailto:[email protected]" TITLE="Dacă vrei să pui o întrebare
nu ezita să o faci">Părerea ta</A><BR>
Mod. Coala.
№ Document. Semnat Data
Coala.9
IV. Cum pot schimba culorile legaturilor?
Fiecare legatura din cadrul unei pagini web are trei culori:
• o culoare pentru legaturile nevizitate (nu a fost efectuat nici un click pe ele)
• o culoare pentru legaturile vizitate (s-a efectuat cel putin un click pe ele)
• o culoare pentru legaturile active (atunci cand cursorul mouse-ului se afla deasupra lor).
Pentru fiecare culoare, din cele trei de mai sus, exista cate un atribut al tag-ului </BODY> cu
ajutorul caruia putem schimba culoarea implicita:
• LINK pentru legaturile nevizitate
• VLINK pentru legaturile vizitate
• ALINK pentru legaturile active
Fiecarui atribut i se va atribui un nume de culoare sau codul unei culori. Spre exemplu daca vrei
ca in cadrul paginii tale web, legaturile sa fie de culoare rosie atunci cand nu au fost vizitate, de
culoare neagra cele vizitate si de culoare portocalie atunci cand se trece cu mouse-ul pe deasupra
lor, trebuie sa folosesti urmatoarea linie de cod:
<BODY LINK=”#FF0000” VLINK=”#000000” ALINK=”FF9600”>
Pentru a folosi culorile preferate pentru legaturile paginilor tale nu trebuie decat sa
inlocuiesti in linia de mai sus, codurile, cu cele ale culorilor dorite
Crearea listelor in HTML
I. Liste neordonate (UL)
Inainte de vorbi despre listele neordonate sa vedem, mai intai, cum arata una:
Firma noastra va ofera urmatoarele servicii:
printare
printare
indosariere
Pentru a putea face o lista neordonata trebuie sa folosim tag-urile <UL> si </UL>.
(denumirea acestor tag-uri vine de la "unordered list" care inseamna in limba engleza lista
neordonata). Fiecare element al listei trebuie introdus de tag-ul <LI>. Ca sa intelegi mai bine sa
vedem impreuna cum arata codul HTML pentru lista de mai sus.
Cu ajutorul atributului TYPE, putem schimba cercul plin din fata fiecarui element. Acesta
este folosit in mod implicit atunci cand folosim o lista neordonata. Astfel, prin atribuirea unei
valori atributului TYPE, vom putea face ca elementele listei sa fie precedate de un patrat sau de
un cerc gol(ex: <UL TYPE=square>)
II. Liste ordonate (OL)
Lista urmatoare pastreaza continutul celei de mai sus insa este o lista ordonata (ordered
list). Sa vedem diferenta:
Mod. Coala.
№ Document. Semnat Data
Coala.10
Firma noastra va ofera urmatoarele servicii:
1. printare
2. printare
3. indosariere
Listele ordonate se formeaza cu ajutorul tag-urilor <OL> si </OL>, denumirea acestora
venind din limba engleza „ordered list” care inseamna lista ordonata. La fel ca si la listele
neordonate, fiecare element trebuie introdus de tag-ul <LI>.
Ca si in cazul listelor neordonate, si la listele ordonate, atributul TYPE are o valoare
implicita, asa cum am vazut in exemplul de mai sus: numerele. in loc de numere putem folosi si
alte caractere. Pentru a folosi aceste caractere este de ajuns sa utilizam atributul TYPE cu
valoarea potrivita(ex: <OL TYPE=A>)
Pe langa atributul TYPE, pentru tag-ul <OL> mai putem folosi si atributul START. Acest
atribut este folosit atunci cand vrem sa schimbam valoarea initiala, de exemplu daca vrem sa
incepem de la 4, in cazul numerelor, sau de la D, in cazul literelor mari, etc. Forma generala a
acestui atribut este START=n, unde n este un numar natural. Sa vedem un exemplu: <OL
TYPE=A START=4>
III. Liste de definitii (DL)
Pentru a forma liste de definitii trebuie sa folosesti tag-urile <DL> si </DL> (denumirea
lor vine de la „definition list” = lista de definitii). Iata cum arata o lista de definitii:
Teorema lui Pitagora
În orice triunghi dreptunghic suma pătratelor catetelor este egală cu pătratul ipotenuzei.
Teorema catetei
În orice triunghi dreptunghic pătratul catetei este egal cu produsul dintre ipotenuză şi
proiecţia catetei pe ipotenuză.
Teorema înălţimii
În orice triunghi dreptunghic pătratul înălţimii este egal cu produsul proiecţiilor celor două
catete pe ipotenuză.
Fiecare element al unei liste de definitii va trebui introdus de tag-ul <DT> (Definition
Term), iar apoi fiecare definitie va fi precedata de tag-ul <DD> (Definition Definition)
Tabele in HTML
Pentru a crea un tabel, trebuie sa folosim tag-urile <TABLE> si </TABLE>. Tot ce va fi scris
intre aceste tag-uri va forma un tabel. Dupa tag-ul <TABLE> urmeaza tag-ul <TR>, care vine de
la "Table Row" (randul tabelului) si reprezinta introducerea unui rand in cadrul tabelului. Tot ce
va fi scris intre tag-urile <TR> si </TR> va forma un rand al tabelului. Dupa crearea unui rand,
trebuie sa adaugam in cadrul acestuia, cateva celule, cu ajutorul tag-urilor <TD> si </TD>.
Mod. Coala.
№ Document. Semnat Data
Coala.11
Proprietatile tabelelor
Pentru ca liniile unui tabel sa fie vizibile tag-ul <TABLE> trebuie sa fie insosit de atributul
BORDER avand valoarea egala cu cel putin 1. In plus, poti schimba culoarea liniilor unui tabel
folosind atributul BORDERCOLOR insotit de codul culorii dorite. Astfel, daca vrem ca liniile
tabelului nostru sa aiba culoarea rosie vom folosi urmatoarea linie de cod: <TABLE
BORDER="1" BORDERCOLOR="#FF0000">
Liniile tabelului sunt practic niste linii duble. Pentru a avea decat o singura linie vom folosi
atributul CELLSPACING cu valoarea "0". Acest atribut specifica distanta dintre celulele unui
tabel. Alaturi de acest atribut putem folosi si atributul CELLPADING care indica distanta dintre
marginile celulelor si textul din cadrul acestora.
Pentru a stabili dimensiunea unui tabel, unui rand sau a unei celule, folosim atributele
WIDTH pentru latime si/sau HEIGHT pentru inaltime. Pentru alinierea datelor din cadrul
tabelului folosim atributul ALIGN cu una dintre valorile "left", "center" sau "right". Pentru a
alinia datele tabelului pe verticala folosim atributul VALIGN insotit de una dintre valorile "top",
"middle" sau "bottom". Pentru a schimba culoarea unei celule, unui rand sau chiar a intregului
tabel folosim atributul BGCOLOR impreuna cu codul culorii alese.
Mod. Coala.
№ Document. Semnat Data
Coala.12
DESCRIEREA PROGRAMULUI
Site-ul meu se numeşte “Enigmele antice”, el are 34 pagini WEB.
Structura site-ului meu:
“Pagina principală” este împărţită in 2 rînduri şi o coloană, în care mai apoi am pus
“cuprinsul” fiecărei părţi. În partea dreapta a acestei ferestre am pus meniul principal, care constă
din 15 puncte. Pen-ultimul punct “Faraoni” are încă 5 puncte. Lucru cu site-ul meu este foarte
simplu – voi alegeţi oarecare punct din meniu şi el automat deschide în fereastra de cuprins toata
informaţia, care rămîne neschimbată ca şi partea de sus a paginii. Fiecare pagina are o referinţa la
început (Якорь), care ajută în navigare.
În prima pagina care se numeşte “Jumhuriyat Misr al-Arabiyah – Republica Araba
Egipt'” sunt plasate nişte imagini cu textul alternativ, care ajută utilizatorului să înţeleaga
denumirea imaginii. Încă am utilizat o referinţă la Hartă Egiptului contemporan şi o referinţă la
pagina despre istoria Egiptului Antic.
Prima pagina a fost ca o “introducere” despre Republica Egipteană. A 3 pagina se numeşte
“Naşterea interesului”, in aceasta pagina se descrie cum au fost gasite comorile Egiptului, cum
au fost descifrate ieroglifele ş.a. Tot aşa am pus imagini cu textul alternativ (el este prezent în tot
site-ul), este referinţă la Hartă Egiptului contemporan şi la ieroglife antice. “Naşterea interesului”
este alcătuită din 2 pagini, care sunt legate.
A 5 pagina se numeşte “Cronologie”. Aici am utilizat un tabel care are un titlu şi este
alcătuit din 2 coloane şi 45 de rînduri. În tabel sunt plasate datele cronologice importante.
În a 6-ea pagina „Istoria Egiptului Antic” sunt descrise toate perioadele istorice Egiptului
(Regatul Nou, Mijlociu ş.a.). Pagina este alcatuita din 3 pagini care sunt legate.
„Cultura Egiptului Antic” – a 9-a pagina,aici se descrie cultura şi arhitectura Egiptului
Antic. Este o referire la o hartă a obiectelor turistice Egiptului.
În a 10-a pagina „Religia Egipteană” se descrie despre poporul religios, despre „Cartea
Morţilor” egiptenilor, despre Lumea de Încolo şi judecata.
A 11-a pagina „Zeii” conţine 4 pagini,in ele se descriu cei mai importanti şi cunoscuti zei
ai Egiptului Antic.
Pagina 18-a se numeşte „Valea Regilor”, este alcătuită din 2 pagini. Am
utilizat un tabel despre morminte, alcătuit din 2 coloane şi 63 de rînduri. Încă am utilizat 4
Mod.
Coala № Document Semnat Data
Coala
13
CTFB 1851
Îndeplinit Scobiola D.
Verificat Baltag I.
N Control.
DESCRIEREA PROGRAMULUI
Litera Coli
25
IG-410
referinţe: prima – la o hartă mormînturilor în Valea Regilor, a doua – la pagina despre faraonul
Tutankhamon, a treia – la pagina despre faraonul Ramses II, a patra – la pagina despre faraonul-
femeie Hatshepsut.
In pagina 20 „Valea Reginelor” am utilizat un tabel despre mormîntele din 2 coloane şi
22 de rînduri. Merge vorba despre mormintul sotiei lui Ramses II Reginei Nefertari.
Cînd alegeţi punctul „Faraoni” din meniul principal – automat apare În fereastra aceea alt
„submeniu” din 5 puncte: „Akhenaton”, „Nefertiti”, „Tutankhamon”, „Hatshepsut”, „Ramses
II”. Întoarcerea la meniul principal se face prin butonul „Menu”.
Pagina 32 ”Foto galerie”,este alcătuită din 3 pagini. Am plasat imagini în tabel fără
bordură. El contine 4 coloane şi 7 rînduri (total – 28 imagini).
Imaginile au mărime comună. Cînd apăsaţi pe imagine butonul sting al mouse-lui aceasta
imagine va apărea cu dimensiuni mai mari,in aceiasi fereastra. Ne intoarcem la pagina „Foto
Galerie” cu ajutorul butonului „Înapoi”.
La pagina 32(2) şi 32(3) am plasat imagini în tabel fără bordură. Tabelul paginei 32(2) are
4 coloane şi 4 rînduri (total – 16 imagini), tabelul paginei 32(3) conţine 2 rînduri şi 2 coloane
(total – 4 imagini). Revenirea la pagina „Foto Galerie” se face in acelasi mod.
Mod. Coala.
№ Document. Semnat Data
Coala.14
AFIŞAREA REZULTATELOR
Pagina principală
Fig 1 Pagina principală
(În pagina principală merge vorba despre Republica Arabă Egipt contemporană.)
Mod.
Coala № Document Semnat Data
Coala
15
CTFB 1851
Îndeplinit Scobiola D.
Verificat Baltag I.
N Control.
AFIȘAREA REZULTATELOR
Litera Coli
25
IG-410
Nefertiti
Fig 2 Prima pagină din meniu
(Pentru faraoni există alt Menu, el deschide în fereastra unde este plasat meniul principal. Meniul
„Faraoni” are 5 puncte, întoarcerea la meniul principal se face cînd apasăm butonul „Menu”.)
Mod. Coala.
№ Document. Semnat Data
Coala.16
Foto Galerie
Prima pagină
Fig 3 Foto galerie
(Pagina „Foto Galerie” constă din 3 pagini. Imagini sunt plasate in tabel cu acelaşi dimensiuni)
Mod. Coala.
№ Document. Semnat Data
Coala.17
Foto Galerie
Mărire imagenii
Fig 4 Foto galerie 2
(Cînd apăsaţi pe inagine butonul stinga mouse-lui aceasta imagine va apărea cu dimensiuni mai
mare în aceea fereastră. Intoarcem la pagina „Foto Galerie” cu ajutorul butonului „Înapoi”)
Mod. Coala.
№ Document. Semnat Data
Coala.18
LISTINGUL PROGRAMULUI
Cronologie
<html>
<head>
<title> CRONOLOGIE </title>
</head>
<body bgcolor="sandybrown" alink="darkblue" link="darkviolet" vlink="indigo">
<font color="firebrick" face="Sylfaen" size="7">
<center> <b> <a name="#inc">Datele cronologice </a></b> </center> </font>
<hr width=50% align=center color="red">
<hr width=30% align=center color="red">
<p>
<Font size=3>
<p align=justify>
Datele exacte referitoare la dinastiile egiptene si ale domniilor individuale inca mai fac subiectul
multor controverse intre experti. Cronologia redata mai jos se bazeaza pe utilele liste oferite de
John Baines si Jaromir Malek in Atlasul Egiptului Antic (Oxford, 1980)
<br>
<p>
<center>
<table bgcolor="orange" border cellpadding=4 cellspacing=4>
<caption>
<tr> <th> Timp </th> <th> Data </th> </tr>
</caption>
<tr> <td> <b>Perioada Preistorica</b> </td> <td> inainte de 4000 i.e.n.</td> </tr>
<tr> <td> <b>Perioada Predinastica</b> </td> <td>inainte de 3000 i.e.n.</td> </tr>
<tr> <td> <b>Perioada Dinastica Timpurie</b> </td> <td>aprox.3000-2575 </td> </tr>
<tr> <td>Primele dinastii</td> <td>aprox.3000-2770</td> </tr>
<tr> <td>Dinastia a II-a</td> <td>2770-2649</td> </tr>
<tr> <td>Dinastia a III-a</td> <td>2649-2575</td> </tr>
Mod.
Coala № Document Semnat Data
Coala
19
CTFB 1851
Îndeplinit Scobiola D.
Verificat Baltag I.
N Control.
LISTINGUL PROGRAMULUI Litera Coli
25
IG-410
<tr> <td> <b>Vechiul Regat</b> </td> <td>2575-2134</td> </tr>
<tr> <td>Dinastia a IV-a</td> <td>2575-2465</td> </tr>
<tr> <td>Dinastia a V-a</td> <td>2465-2323</td> </tr>
<tr> <td>Dinastia a VI-a</td> <td>2323-2150</td> </tr>
<tr> <td>Dinastia a VII-a/a VIII-a</td> <td>2150-2134</td> </tr>
<tr> <td> <b>Prima perioada intermediara </b> </td> <td>2134-2040</td> </tr>
<tr> <td>Dinastia a IX-a/a X-a (Herakleopolitana) </td> <td>2134-2040</td> </tr>
<tr> <td>Dinastia a XI-a (Tebana) </td> <td>2134-2040</td> </tr>
<tr<td>30 i.e.n.-395 e.n.</td> </tr>
</table> <p>
<center> <a href="#inc"><b> La inceputul pagenii</b> </a>
</center>
</body>
</html>
Nefertiti
<html>
<head>
<title> NEFERTITI </title>
</head>
<body bgcolor="sandybrown" alink="darkblue" link="darkviolet" vlink="indigo">
<font color="firebrick" face="Sylfaen" size="7">
<center> <b><a name="inc"> Nefertiti</a> </b> </center> </font>
<hr width=50% align=center color="red">
<hr width=30% align=center color="red">
<p>
<img src="nefertiti.jpg" border=2 alt="Regina Nefertiti" align=left hspace="15"
vspace="15" width=30% height=83%>
<p align=justify>
Nefertiti s-a casatorit cu faraonul Akhenaton, fiul lui Amenophis III, in cel de-al patrulea an al
domniei acestuia. Se pare ca ea avea cam 15 ani la vremea respectiva, iar Akhenaton, cel putin
14. In urma acestei casatorii, frumoasa femeie a devenit una dintre cele mai puternice figuri
feminine care au domnit vreodata in Egipt. Era iubita, onorata, venerata. Aparea alaturi de faraon
in toate ocaziile importante, avand un statut apropiat de al acestuia. Apoi insa, absolut brusc,
acest traseu se intrerupe. Pana in prezent nu a fost gasita nici o dovada care sa explice sfarsitul
misterios al lui Nefertiti.
Mod. Coala.
№ Document. Semnat Data
Coala.20
</p>
<p>
<p align=justify>
Exista o teorie conform careia este posibil ca ea sa fi fost printesa mitanica Tadukhepa, menita a
fi mireasa lui Amenophis III, dar care, in final, s-a casatorit cu fiul acestuia. O alta ipoteza
sustine ca Nefertiti a fost nascuta din uniunea lui Amenophis III cu o concubina – ceea ce i-ar fi
facut pe Akhenaton si Nefertiti sa fie frati vitregi. Dar si aceasta teorie este destul de putin
probabila, caci, in acest caz, titlul de “Fiica a faraonului” i s-ar fi cuvenit de drept lui Nefertiti –
insa nu i-a fost atribuit niciodata. O a treia ipoteza sustine ca Nefertiti era fiica lui Ti (scris si
“Tiy”) si Ay (scris si “Aya”). Tatal ei ar fi fost un demnitar de rang inalt la Curtea lui
Amenophis III si, in consecinta, un confident apropiat al lui Akhenaton. Conform acestei teorii,
care castiga tot mai mult teren la ora actuala printre egiptologi, Nefertiti ar fi fost deci crescuta in
inalta societate egipteana. Totusi se pare ca Ti nu a fost mama biologica a frumoasei regine, ci
mai degraba, dupa cum arata dovezile descoperite, doica acesteia. Pentru gloria Zeului-Soare.
</p>
<p>
<img src="nefertiti_1.jpg" border=2 alt="Frumusetea Reginei Nefertiti" align=right
hspace="15" vspace="15" width=46% height=80%>
<p align=justify>
Frumusetea reginei Nefertiti este una dintre cele mai celebre pe care le cunoaste istoria.
Nenumaratele reproduceri ale bustului ei de piatra, descoperit la el-Amarna, ne infatiseaza chipul
ei, cu trasaturi de o noblete aparte.
</p>
<p>
<p align=justify>
<i>„Toata lumea,</i> afirma Leonard Cottrell, <i> cunoaste acest gat gratios si delicat, aceasta
barbie hotarata dar feminina, acest nas fin modelat, acesti ochi langurosi cu pleoape grele,
aceasta gura, desavarsit de conturata, ale carei buze nu sunt nici prea senzuale, nici prea
rezervate, nici prea darnice dar nici prea zgarcite cu harurile lor. Este
o minune de echilibru. Chiar grecii, la apogeul geniului lor, nu au creat vreodata un chip
asemanator, zeitele lor sunt zeite, femeile sunt femei, si atat. Nefertiti este intruchiparea
amandurora." </i>
</p>
<p>
<p align=justify>
Mod. Coala.
№ Document. Semnat Data
Coala.21
Frumusetea acestei regine a carei prestanta a dominat perioada amarniana ne impresioneaza inca,
in profida mileniilor.
</p>
<p>
<p align=justify>
De la inceputul casatoriei sale, regele a fost foarte indragostit de sotia lui. A iubit-o cu patima,
iar numeroasele inscriptii care o slavesc o dovedesc cu prisosinta:
</p>
<p>
<p align=justify>
<i> "Mostenitoarea, aleasa de baza, doamna a gingasiei, dulceata a dragostei, Stapana a Sudului
si a Nordului, frumoasa la chip, impodobit cu doua panasuri, indragita de Amon cel viu, Marea
doamna sotie dintai a regelui care o iubeste, Suverana celor Doua Tari, mareata prin dragoste,
Nefertiti, in veci nepieritoare..." </i>
</p>
<p>
<p align=justify>
Uimitoare declaratie de dragoste din partea unui suveran al unui stat puternic cum este Egiptul!
Nici o regina nu a fost vreodata slavita astfel.
</p>
<p>
<center>
<a href="#inc"> <b>La inceputul pagenii</b> </a> </center>
</body>
</html>
Foto Galeri
<html>
<head>
<title> FOTO GALERIE </title>
</head>
<body bgcolor="sandybrown" alink="darkblue" link="darkviolet" vlink="indigo"
leftmargin="1" rightmargin="1">
<font color="firebrick" face="Sylfaen" size="7">
<center> <b><a name="inc"> Foto Galerie </a> </b> </center> </font>
<hr width=50% align=center color="red">
Mod. Coala.
№ Document. Semnat Data
Coala.22
<hr width=30% align=center color="red">
<p>
<center>
<td> <a href="Stat3.html"> <img src="Foto galerie/foto1/g28.jpg" width="200" height="150"
border=1 alt="Statuie lui Faraon"></a> </td>
</tr>
</center>
</table>
<center>
<table width="20%" border="0">
<tr>
<td><center><<</center></td>
<td><a href="foto.html"><center><b>1</b></center></a></td>
<td><a href="foto01.html"><center><b>2</b></center></a></td>
<td><a href="foto02.html"><center><b>3</b></center></a></td>
<td><center>>></center></td>
</tr>
</table>
<p>
<center>
<a href="#inc"> <b>La inceputul pagenii</b> </a>
</adress> </center>
</body>
</html>
Mod. Coala.
№ Document. Semnat Data
Coala.23
CONCLUZII
În acest proiect de curs a fost prevăzută tema „Egiptul Antic”. Proiect de curs conţine 34
de pagini WEB, care sunt legate între ele. În timpul creerii au fost folosite tabele cu parametre –
antetul tabelului, bordură. Încă tabelile au fost folosite pentru crearea foto galeriei site-ului.
Aceasta tabela este fără bordură, a fost folosit spaţiul între celule pentru despărţirea imaginilor
una de altă. A fost folosită o formă pe pagina principală, care o desparte în 2 rînduri şi o coloană.
Dimensiuni acesturi 3 părţi ale formei sunt redate în pixel. Pe paginile site-ului au fost plasate
imagine, care diferă ca format, mărime şi locul lor pe pagine. Încă au fost folosite link-uri
înauntru documentului, aşa ca: trecerea de la sfîrşitul paginii la începutul ei, trecerea la
următarea pegina, link-uri pe diferite harturi Egiptului, link-uri pe alte pagini ale site-ului
prezentat.
Obiectul de proiectare şi creare paginilor WEB este foarte uşor de învăţat, complecat este
numai lucru cu designe site-ului.
Am făcut concluzii că învăţarea limbajului HTML are trei mari avantaje:
1. este foarte simplă şi nu necesită mult timp;
2. oferă controlul absolut asupra realizării paginii web;
3. poţi folosi în cadrul paginilor pe care le vei realiza secvente de cod HTML "imprumutate" de
la alte pagini web (pentru a vedea codul sursa al unei pagini web, in Internet Explorer întra în
meniul View şi apoi selectează Source).
Mod.
Coala № Document Semnat Data
Coala
24
CTFB 1851
Îndeplinit Scobiola D.
Verificat Baltag I.
N Control.
CONCLUZII Litera Coli
25
IG-410
BIBLIOGRAFIE
Cărţi:
1. А. Матросов, А. Сергеев, М. Чаунин «HTML 4.0», Санкт-Петербург, 2004 г.
2. Е. Л. Полонская «Самоучитель язык HTML».
3. Аленова Наталья «Первые шаги» - Учебник (руководство) по HTML.
Siteografia:
1. http://www.Egiptul-antic.info
2. http://www.wikipedia.org/wiki/Egipt
3. http://www.egyptround.com
4. http://www.TURIZM.ru
5. http://www.egypt-countrz.ru
6. http://www.foto.egyptclub.ru
7. http://www.oldegypt.info/gallery
8. http://www.egyptgod.ru
9. http://www.travelworld.ro/images
10. http://www.oferteegypt.ro
11. http://www.infotravelromania.ro
12. http://www.AncientEgypt.4t.com
13. http://bhv.ru
Mod.
Coala № Document Semnat Data
Coala
25
CTFB 1851
Îndeplinit Scobiola D.
Verificat Baltag I.
N Control.
BIBLIOGRAFIE Litera Coli
25
IG-410