Lucrare de curs in limbajul HTML

1. 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

2. MINISTERUL EDUCAŢIEI AL REPUBLICII MOLDOVA
COLEGIUL TEHNIC FEROVIAR DIN BĂLŢI
Aprobat la şedinţa catedrei
______________________
Proces verbal nr ._______
Din ,,__” _________ 2013
Şeful catedrei ___________
PLANUL INDIVIDUAL DE ELABORARE
AL PROIECTULUI DE CURS
LA DISCIPLINA:
,,PROIECTAREA ŞI CREAREA PAGINILOR WEB”
Pe tema: Enigmele antice
A elevului gr.IG-410 Scobiola Daniel
Planul de elaborare al proiectului de curs
Nr.
1.
2.
3.
4.
5.
6.
Denumirea misiunii de
realizare
Culegerea informaţiei
Formatarea textului
Formatarea documentului
Organizarea legăturii
Crearea tabelelor
Formarea proiectului de curs
Sarcina dată
Termenul de
realizare
,,____”_________201__
Semnătura profesorului__________________
Sarcina primită
,,____”_________201__
Semnătura elevului____________________
Evaluarea
rezultatelor
Semnătu-ra
conduc.

3. CUPRINS
Întroducere ...........................................................................................................................
4
1. Partea teoretică ............................................................................................................
5
2. Descrierea programului .............................................................................................
13
3. Afişarea rezultatelor
.................................................................................................
15
4. Listingul programului ...............................................................................................
19
Concluzii .............................................................................................................................
24
Bibliografia ........................................................................................................................
25
CTFB 1851
Mod. Coala
№ Document
Îndeplinit
Scobiola D.
Verificat
Baltag I.
N Control.
Semnat
Data
Enigmele antice
Litera
Coala
Coli
3
25
IG-410

4. Î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 HTMLRedactorilor 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.
CTFB 1851
Mod. Coala
№ Document
Îndeplinit
Scobiola D.
Verificat
Baltag I.
N Control.
Semnat
Data
ÎNTRODUCERE
Litera
Coala
Coli
4
25
IG-410

5. 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ă
<HEAD>
este
vorba
de
un
fişier
HTML
pentru
a
îl
putea
afişa.
- î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>
<TITLE>
-
acesta
este
tag-ul
de
incheiere
al
tag-ului
<HEAD>
- 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
Mod. Coala
№ Document
Îndeplinit
Scobiola D.
Verificat
Baltag I.
N Control.
Semnat
CTFB 1851
Data
PARTEA TEORETICĂ
Litera
Coala
Coli
5
25
IG-410

6. Atributele pot fi definite ca niste proprietaţi ale tag-urilor. Atributele se pun numai in tagul de inceput. Daca un tag nu are nici un atribut, atunci browser-ul va lua în considerare valorile
implicite ale tag-ului respective.
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>.
Coala
.
Mod. Coala
.
№ Document.
Semnat
Data
6

7. 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
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
COLOR.
atributului
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>
Coala
.
Mod. Coala
.
№ Document.
Semnat
Data
7

8. 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
(ex:<U>Text subliniat</U>)
<U>
</U>
si
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.
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
Coala
.
Mod. Coala
.
№ Document.
Semnat
Data
8

9. 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.
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
BACKGROUND
după
cum
<BODY>
urmează:
atributul
<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:

10. <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
Pentru
a
afla
r&#259spunsul
FACE="Arial"
la
alte
COLOR="#FF9900">
&#238ntreb&#259ri,
trimite
un
mail
la:
</FONT>
<A
HREF="mailto:contact@ecursuri.ro"
TITLE="Dac&#259
vrei
s&#259 pui o &#238ntrebare nu ezita s&#259 o faci"> P&#259rerea
ta</A><BR>
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).
Coala
.
Mod. Coala
.
№ Document.
Semnat
Data
9

11. 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:
Firma noastra va ofera urmatoarele servicii:
1.
printare
2.
printare
Coala
.
Mod. Coala
.
№ Document.
Semnat
Data
10

12. 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
valoarea potrivita(ex: <OL
Pe langa atributul
TYPE
cu
TYPE=A>)
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.
Coala
.
Mod. Coala
.
№ Document.
Semnat
Data
11

13. Dupa crearea unui rand, trebuie sa adaugam in cadrul acestuia, cateva celule, cu ajutorul tagurilor <TD> si </TD>.
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
distanta
dintre
marginile
celulelor
si
CELLPADING
textul
din
cadrul
care indica
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.
Coala
.
Mod. Coala
.
№ Document.
Semnat
Data
12

14. 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.
Mod. Coala A № Document
11-a pagina
Îndeplinit
Scobiola D.
ai Egiptului Antic.
Baltag I.
Verificat
N Control.
CTFB 1851
Semnat Data
„Zeii” conţine 4 pagini,in ele se descriu cei mai importanti şi cunoscuti zei
Litera
Coala
Coli
DESCRIEREA
25
13
PROGRAMULUI
IG-410

15. 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
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 faraonulfemeie 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.
Coala
.
Mod. Coala
.
№ Document.
Semnat
Data
14

16. AFIŞAREA REZULTATELOR
Pagina principală
Fig 1 Pagina principală
(În pagina principală merge vorba despre Republica Arabă Egipt contemporană.)
CTFB 1851
Mod. Coala
№ Document
Îndeplinit
Scobiola D.
Verificat
Baltag I.
N Control.
Semnat
Data
AFIȘAREA
REZULTATELOR
Litera
Coala
Coli
15
25
IG-410

17. 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”.)
Coala
.
Mod. Coala
.
№ Document.
Semnat
Data
16

18. Foto Galerie
Prima pagină
Fig 3 Foto galerie
(Pagina „Foto Galerie” constă din 3 pagini. Imagini sunt plasate in tabel cu acelaşi dimensiuni)
Coala
.
Mod. Coala
.
№ Document.
Semnat
Data
17

19. 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”)
Coala
.
Mod. Coala
.
№ Document.
Semnat
Data
18

20. 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>
CTFB 1851
Mod. <tr> <td>Primele dinastii</td>Data
Coala № Document
Semnat
<td>aprox.3000-2770</td>
</tr>
LISTINGUL PROGRAMULUI
<tr> <td>Dinastia a II-a</td> <td>2770-2649</td> </tr>
Îndeplinit
Scobiola D.
Verificat
Baltag I.
N Control.
Litera
Coala
Coli
19
25
IG-410

21. <tr> <td>Dinastia a III-a</td> <td>2649-2575</td> </tr>
<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
Coala
.
Mod. Coala
.
№ Document.
Semnat
Data
20

22. 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.
</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
Coala
.
Mod. Coala
.
№ Document.
Semnat
Data
21

23. 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>
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>
Coala
.
Mod. Coala
.
№ Document.
Semnat
Data
22

24. </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">
<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>
Coala
.
Mod. Coala
.
№ Document.
Semnat
Data
23

25. 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).
CTFB 1851
Mod. Coala
№ Document
Îndeplinit
Scobiola D.
Verificat
Baltag I.
N Control.
Semnat
Data
CONCLUZII
Litera
Coala
Coli
24
25
IG-410

26. 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
CTFB 1851
Mod. Coala
№ Document
Îndeplinit
Scobiola D.
Verificat
Baltag I.
N Control.
Semnat
Data
BIBLIOGRAFIE
Litera
Coala
Coli
25
25
IG-410