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

4

CTFB 1851


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

5

CTFB 1851


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.


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.


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&#259spunsul la alte &#238ntreb&#259ri, trimite un mail la:

</FONT>

<A HREF="mailto:[email protected]" TITLE="Dac&#259 vrei s&#259 pui o &#238ntrebare

nu ezita s&#259 o faci">P&#259rerea ta</A><BR>

Mod. Coala.


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.


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.


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.


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

13

CTFB 1851


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.


Coala.14

AFIŞAREA REZULTATELOR

Pagina principală

Fig 1 Pagina principală

(În pagina principală merge vorba despre Republica Arabă Egipt contemporană.)

Mod.


Coala

15

CTFB 1851


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.


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.


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.


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">


<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

19

CTFB 1851


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">


<center> <b><a name="inc"> Nefertiti</a> </b> </center> </font>



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


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.


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">


<center> <b><a name="inc"> Foto Galerie </a> </b> </center> </font>


Mod. Coala.


Coala.22


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


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

24

CTFB 1851


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

25

CTFB 1851


Verificat Baltag I.

N Control.

BIBLIOGRAFIE Litera Coli

25

IG-410

http://bhv.ru/

http://www.AncientEgypt.4t.com/

http://www.infotravelromania.ro/

http://www.oferteegypt.ro/

http://www.travelworld.ro/images

http://www.egyptgod.ru/

http://www.oldegypt.info/gallery

http://www.foto.egyptclub.ru/

http://www.egypt-countrz.ru/

http://www.TURIZM.ru/

http://www.egyptround.com/

http://www.wikipedia.org/wiki/Egipt

http://www.Egiptul-antic.info/

Lucrare de curs WEB

Documents

Transcript of Lucrare de curs WEB