• Like
Lucrare de curs WEB
Upcoming SlideShare
Loading in...5
×

Lucrare de curs WEB

  • 161 views
Uploaded on

Lucrare de curs in limbajul HTML

Lucrare de curs in limbajul HTML

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
161
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
11
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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