LICEUL TEORETIC ,,MIHAIL SEBASTIAN BRILA

ATESTAT LA INFORMATICA CU TEMA: WEBSITE .

Profesor coordonator Calu Liliana Elev Mototolea Madalin Clasa XII-A

Mai 2013

Cuprins

1. Tema proiectului. Pag 3 2. Scurta istorie a HTML-ului. Pag 4-5 3. Documente HTML. Pag 5-8 4. Schema bloc a lucrarii. Pag 8-12 5. Surse fisiere HTML. Pag 12-19 6.Bibliografie Pag 19

1.Tema lucrarii

Tema lucrarii este realizarea unui site cu tema SISTEMUL SOLAR. Site-ul vine in sprijinul elevilor si tuturor celor ce sunt interesati de astronomie. Am ales aceasta tema deoarece cred ca toata lumea ar trebui sa stie despre sistemul nostru solar. . Acest site incearca, prin continutul sau, sa puna la dispozitia elevilor de gimnaziu si liceu, informatii referitoare la cele 8 planete din sistemul solar. Situl poate fi folosit pentru pregatirea concursurilor de astronomie si chiar de geografie .

2.Despre limbajul HTML

Hypertext Prin hipertext se ntelege un document (evident n sensul utilizat n informatica: fisier creat printr-un editor, procesor etc) care contine, pe lnga text (continutul clasic al unui document), grafic, imagini, animatie, nregistrri audio, legturi ctre alte documente. Un hipertext poate fi gndit ntr-un spatiu cu mai multe dimensiuni, fiecare ax reprezentnd un alt mijloc de comunicare: text, audio, video etc. Hipertextul permite prsirea modului traditional de citire a unui document: linie dup linie, pagin dup pagin etc. Legturile activate produc o desfsurare a documentului dup nevoile utilizatorului plus posibilitatea de pstrare a atentiei cititorului prin utilizarea legturilor grafice, audio etc. World Wide Web World Wide Web, sau WWW, sau Web a aprut la sfrsitul anilor '80 cnd cercettorii de la CERN, Laboratorul European pentru fizica particulelor, au dezvoltat o retea pentru a avea acces mai usor la documentele produse de diversele laboratoare. n 1990, ei au introdus un browser doar pentru texte si au dezvoltat HTML. n 1991 au implementat Web la CERN.

n 1992 cercettorii de la CERN au introdus Web n comunitatea Internet si aceasta a nceput revolutia (S.E. Eddy - HTML in plain English). Ceea ce diferentiaz WWW de celealte componente ale Internet-ului este tocmai hipertextul, care si-a gsit n Web calea ideal de exprimare. Toate documentele accesibile n Web sunt legate ntre ele indiferent de serverul pe care sunt memorate si indiferent de locul geografic unde sunt. Trecerea de la un document la altul, de la un subiect la altul, de la un loc la altul etc produce o impresie puternic asupra utilizatorului, i d acestuia certitudinea c totul este potrivit intereselor lui, potrivit ritmului propriu de ntelegere. HTML HTML, sau HyperText Markup Language, a fost proiectat s poat opera cu functionalittile multimedia ale WWW. Limbajul de marcare permite transformarea oricrui text ntr-un hipertext prin introducerea unor marcaje, care vor indica modul cum se efectueaza legturile documentului, cum vor aprea paginile documentului etc. Un document HTML poate fi fcut public dac este pe un calculator care are acces la Internet. Un document fcut public poate fi vzut din orice punct al Internet-ului. Desi nu este optiunea cea mai fericit, vom utiliza cuvantul tag pentru marcaj. Pe lnga versiunea standardizat, o serie de firme productoare de browsere (programele care permit vizualizarea documentelor) au creat propriile extensii. Sunt cunoscute extensiile Netscape si Microsoft, cele doua mari firme care-si disput piata, extensii dintre care se vor alege cu sigurant extensiile pentru versiunile ulterioare de HTML.

3.Documente HTML

Marcaje (taguri) Un document HTML este un fisier text obisnuit (cunoscut si sub denumirea de fisier ASCII) care contine, pe lnga informatiile textuale propriu-zise, marcaje pentru utilizarea optiunilor de formatare si de conectare. Numim tag un asemenea marcaj. Un tag se introduce in text sub forma < nume_tag>, unde parantezele unghiulare sunt elementele care indic prezenta unui tag. Numele marcajelor poate fi scris oricum, limbajul nefiind senzitiv la litere mari/litere mici. Exist dou tipuri de marcaje: individuale perechi (containere) Un tag individual are o actiune bivalenta, de genul nceputul unei noi linii (care termin deci linia anterioar) sau introducerea unui nou termen ntr-o list (ceea ce termin termenul anterior). 4

Un container este alctuit din tag-ul de nceput, continutul si tag-ul de sfrsit. Forma general este <nume_tag> continut </nume_tag> unde se remarc faptul c sfrsitul unui tag este indicat prin utilizarea caracterului "/" n fata numelui de tag. Este evident c actiunea implicat de prezenta tag-ului container este suportat de ntreg continutul containerului. Tagurile perechi pot fi mbricate. Regula este cea uzual n limbajele de programare, anume c un container trebuie s fie integral n interiorul altui container. Exist anumite browsere care nu accept mbricarea n toate cazurile. Acestea vor considera doar tagul cel mai interior pentru formatare. De remarcat, n final, c browserele ignor tagurile si optiunile pe care nu le recunosc. Aceste situatii pot s apar att datorit faptului c browserul este mai vechi dect ultimul standard de HTML, ct si prin utilizarea n document a unor extensii ale HTML, extensii recunoscute doar de anumite programe. Aceasta proprietate, de ignorare a tagurilor necunoscute este utilizat cu bun stiint n cazul utilizrii unor extensii particulare, cum ar fi FRAME sau a utilizrii script-urilor (vezi capitolele MULTIMEDIA si/sau CADRE). Sectiunile unui document HTML Un document HTML este ncadrat de containerul HTML cu sintaxa: [<HTML> Documentul [</HTML>] HTML]

unde documentul HTML reprezint un ntreg document. Tagul <HTML> trebuie s fie primul tag din document iar tagul de sfrsit </HTML> trebuie s fie ultimul tag din document. Un document HTML contine dou sectiuni. Prima este ntotdeauna sectiunea HEAD n timp ce pentru a doua sectiune structura este diferit dup forma pe care o are pagina web construit: poate fi sectiunea BODY (caracteristic documentelor afisate ntr-o singur fereastr) sau poate fi FRAMESET (caracteristic documentelor afisate ntr-o structur complex de ferestre, cum ar fi manualul prezent). Structura de cadre (frame-uri) va fi discutat ntr-un capitol separat. Sectiunea HEAD Sectiunea HEAD este continut n containerul <HEAD> marcaje specifice pentru HEAD </HEAD> Marcajele din aceast sectiune au doar rolul s descrie documentul curent pentru programe (cum ar fi browsere), pentru alte documente HTML sau pentru documentare. Informatiile prezentate n aceast sectiune nu vor fi vizibile n pagina afisat de browser, cu exceptia titlului ce va apare pe linia titlu a browserului (de 5

exemplu: Netscape: titlul documentului). Nici vizionarea codului surs al documentului nu va arta, n general, informatiile din aceast sectiune. Dintre tagurile care pot fi mbricate n aceast sectiune prezentm <TITLE> si <META>. Alte cteva taguri, <ISINDEX>, <BASE>, <STYLE>, <SCRIPT> si <LINK>, ori au o functionalitate mult prea complex pentru acest stadiu al prezentrii, ori sunt introduse pentru a fi utilizate n versiuni ulterioare al HTML, ori sunt pstrate pentru compatibilitate cu versiuni mai vechi. <TITLE>textul titlului</TITLE> are scopul s fixeze titlul documentului curent. Textul este bine s se limiteze la 64 de caractere (inclusiv spatiile) si s aib nteles n sine. Tagul TITLE poate s apar doar n sectiunea HEAD. <META [ NAME="nume"] [ CONTENT="continut"] antet-HTTP"]>text[</META>] [ HTTP-EQUIV="nume-camp-

contine descrierea si cuvintele cheie atasate documentului curent, informatii care vor fi interpretate de programele de cutare (nu exist standarde asupra utilizrii de ctre serverele HTTP a informatiei din META). NAME este numele, descrierea sau identificarea documentului curent sau a textului care este n META. CONTENT este continutul tagului META, n general va contine cuvintele cheie atasate documentului curent. HTTP-EQUIV arat c informatia META va fi dat unui antet HTTP. Sectiunea BODY Sectiunea BODY este determinat de containerul <BODY [ BACKGROUND="adresa_imagine"] [ BGCOLOR="#rrggbb"|"culoare"] [ TEXT="#rrggbb"|"culoare"] [ LINK="#rrggbb"|"culoare"] [ VLINK="#rrggbb"|"culoare"] [ ALINK="#rrggbb"|"culoare"] [ LEFTMARGIN=marg_st] [ TOPMARGIN=marg_top] [ BGPROPERTIES="fixed"]> continut document </BODY> si contine, practic, tot ceea ce este vizibil pentru un vizitator al paginii create. Cu exceptia tagurilor enumerate la sectiunea HEAD, toate celelalte taguri ale setului HTML sunt specifice sectiunii BODY. LEFTMARGIN precizeaz, n pixeli, marginea stng a documentului (distanta dintre fereastr si continutul documentului); TOPMARGIN precizeaz, n pixeli, marginea de sus a documentului (distanta dintre fereastr si continutul documentului) Prezentarea celorlalte atribute ale tagului BODY se va face separat, n capitole diferite si dup logica manualului, pentru cele care privesc legaturi hipertext si cele care definesc decorarea documentului. Documentul HTML minimal 6

Un document HTML are structura minimal: <HTML> <HEAD> <TITLE> Document minimal </TITLE> </HEAD> <BODY> Acesta este cel mai simplu document HTML. </BODY> </HTML> <! textul comentariului> Functionalitatea lui principal este cea uzual n orice limbaj de programare. Apare ns si o functie nou, oarecum improprie unei linii de comentariu, aceea de a "ascunde" anumite portiuni ale textului. Portiunile respective vor fi interpretate doar de unele browsere, vezi sectiunea dedicat scriptrilor. n acelasi sens se poate remarca faptul c editorul Netscape (si nu numai) introduce n fata documentului o linie de comentariu care contine anumite informatii (posibil a fi interpretate de browsere), cum ar fi versiunea HTML utilizat, editorul utilizat. De exemplu, pentru HTML 3.2, aceast linie arat: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> si unii autori recomand prezenta unei astfel de linii.

4.Schema lucrarii

Pag.1html-este prima a site-ului Pe aceasta pagina se gaseste un meniu care duce la celelalte pagini ale site-ului si cateva vorbe depre faptul ca orice neam ar trebui sa stie putin din istoria stramosilor.

Pag.2html- In aceasta pagina este prezentat Iancu de Hunedoara si tot ceea ce a facut el pentru poporul roman. Iancu de Hunedoara a fost, fara nici o indoiala, una din cele mai mari personalitati politice, diplomatice si militare ale istoriei medievale romanesti, dar si ale istoriei medievale a Europei in general. El a fost, dupa parerea noastra, ultimul cruciat adevarat, ultimul mare luptator impotriva semilunei, desi nu si-a propus sa elibereze locurile sfinte, ci numai acele parti din Europa care fusesera ocupate de turcii otomani.....

Pag. 3html-Aici se gaseste acelasi meniu ca pe toate celelalte pagini si cateva vorbe despreVlad Tepes. Vlad Tepes s-a nascut in anul 1431 in fortareata de la Sighisoara. Tatal sau, Vlad Dracul, era in acea vreme guvernatorul Transilvaniei, functie in care fusese numit de catre imparatul Sigismund. Tepes a fost nepotul altui mare voievod roman: Mircea cel Batran (1386-1418). In iarna lui 1436-1437, Dracul devine print al Valahiei (una dintre cele trei provincii romanesti) si isi stabileste resedinta la palatul din Targoviste, capitala principatului. Vlad Tepes si-a urmat tatal si a trait la curtea princiara sase ani. In 1442, din motive politice, Dracula si fratele sau mai mic Radu au fost luati ostatici de catre Sultanul Murad al II-lea.....

Pag. 4html- In pagina 4 este scris tot ceea ce a facut Stefan cel Marepentru poporul roman. Stefan, Stefan,Domn cel Mare, Seaman pe lume nu are Decat numai mandrul soare! Stefan era fiul lui Bogdan al II-lea, din familia Musatinilor, domn al Moldovei intre 1449-1451.Tatal sau a fost ucis la Reuseni, in timpul unui ospat, din ordinul fratelui sau, Petru Aron. Stefan a vazut omorul si a reusit sa fuga. Mama sa era Maria Oltea, din neamul Basarabilor, vestita dinastie a Tarii Romanesti. Se pare ca mai fusese casatorita, iar Stefan a avut frati si surori dupa mama, ce aveau proprietati in Tara de Jos a Moldovei .

Pag.5html-aceasta este pagina in care ne este prezentat Neagoie Basarab. Neagoe Basarab - Domnitorul Tarii Romanesti (1512 1521). Ctitorul bisericii de la Curtea de Arges. Inceputurile domniei. In privinta originii lui Neagoe Basarab, unii istorici il socot fiu legitim al lui Basarab cel Tanar (Tepelus), cu o sora a Craiovestilor, Neaga; altii il considera fiu nelegitim al aceluiasi, Neaga fiind nu sora, ci sotia lui Parvu Craiovescu. Izvoare contemporane Viata Patriarhului Nifon, un raport al beglerbegului Rumeliei si un memoriu al unor boieri pribegi adresat Portii inlatura cu totul paternitatea lui Tepelus, si-l arata pe Neagoe ca fiu al lui Parvu Craiovescu.

Pag.6html-aici este prezentat Mihai Viteazu. Mihai Viteazu (1593-1601) Mare Ban al Craiovei, "Domn al Tarii Romanesti si al Ardealului si a toata tara Moldovei", realizatorul primei uniri a celor trei tari romne (1600-1601) "...se zice ca Romnul (Mihai Viteazu-n.n.) este foarte tare si ca planurile lui cresc potrivit cu izbnzile" - Henric al IV-lea, rege al Frantei (1593-1616). "Este un lucru demn de cea mai mare consideratie si de glorie eterna, intruct ceea ce nu au putut realiza att de multi imparati, regi si principi, a izbutit un Mihai, cel mai neinsemnat si mai sarac dintre duci, anume sa invinga ostile marelui Sultan." - Edward Barton, agent englez la Istanbul, 7 noiembrie 1595.

Pag.7html-in aceasta pagina cei care viziteaza site-ul pot sa ne contacteze,sau sa ne spuna opiniile lor despre site. In aceasta pagina se gaseste un formular in care se pot completa date,si trimise programatorului.

10

Pag.8html-in aceasta pagina se gasesc informatii despre sistem si cine la realizat.

5.Surse fisiere HTML

<tr> <td width="100%" colspan="2" align="center"> <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://active.macromedia.com/flash4/cabs/swflash.cab#version=4,0,0,0" id="istorie" width="412" height="208"> <param name="movie" value="istorie.swf"> <param name="quality" value="high"> <param name="bgcolor" value="#FFFFFF"> <embed name="istorie" src="istorie.swf" quality="high" bgcolor="#FFFFFF" width="412" height="208" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi? P1_Prod_Version=ShockwaveFlash"> </embed></object> </td> </tr> <tr> <td width="100%" align="center"><a href="index.html"> <img border="0" src="images/buton1.jpg" width="154" height="24"></a></td> </tr>

11

<tr> <td width="100%" align="center"><a href="pag1.html"> <img border="0" src="images/buton2.jpg" width="154" height="24"></a></td> </tr> <tr> <td width="100%" align="center"><a href="pag2.html"> <img border="0" src="images/buton3.jpg" width="154" height="24"></a></td> </tr> <tr> <td width="100%" align="center"><a href="pag3.html"> <img border="0" src="images/buton4.jpg" width="154" height="24"></a></td> </tr> <tr> <td width="100%" align="center"><a href="pag4.html"> <img border="0" src="images/buton5.jpg" width="154" height="24"></a></td> </tr> <tr> <td width="100%" align="center"><a href="pag5.html"> <img border="0" src="images/buton6.jpg" width="154" height="24"></a></td> </tr> <tr> <tr> <td width="100%" align="right"><a href="#capat"> <img border="0" src="images/sus.jpg" width="16" height="20"></a></td> </tr> <script language="Javascript"> <!-function valideaza_mesaj() { if (document.mesaj.numepren.value == "") { alert ("Introduceti numele si prenumele !"); return; } else if (document.mesaj.subiect.value == "") { alert ("Introduceti subiectul !"); return; } else if (document.mesaj.mesaj.value == "") { alert ("Introduceti mesajul !"); return; } else { numepren=document.mesaj.numepren.value subiect=document.mesaj.subiect.value mesajbd='mesaj de la - '+numepren+' - '+document.mesaj.mesaj.value document.location='mailto:domnitori@as.ro? from='+numepren+'&subject='+subiect+'&body='+mesajbd; } } //-->

12

</script> <tr> <td width="43%"><font face="Verdana" style="font-size: 9pt">&nbsp; &nbsp;Nume si prenume:</font></td> <td width="57%"><input type="text" name="numepren" size="35" maxlength="40" class=textboxul></td> </tr> <tr> <td width="43%"> <font face="Verdana" style="font-size: 9pt">&nbsp;&nbsp; Subiect:</font></td> <td width="57%"><input type="text" name="subiect" size="35" maxlength="40" class=textboxul></td> </tr> <tr> <td width="43%" valign="top"><font face="Verdana" style="font-size: 9pt">&nbsp;&nbsp; Mesaj:</font></td> <td width="57%"><font face="Tahoma" style="font-size: 8pt"><textarea name="mesaj" cols="34" rows="9" class="area"></textarea></font></td> </tr> <tr> <td width="100%"> <img border="0" src="images/label7.jpg" width="338" height="36"></td> </tr> <tr> <td width="100%"> <img border="0" src="images/separator.jpg" width="158" height="31"></td> </tr> <tr> <td width="100%">&nbsp;</td> </tr> <tr> <td width="100%" align="center"> &nbsp;</td> </tr> <tr> <td width="100%" align="center"> <table border="0" cellpadding="3" cellspacing="3" style="border-collapse: collapse" bordercolor="#111111" width="76%" id="AutoNumber6" height="289"> <tr> <td width="100%" height="15" colspan="2"> <font face="Verdana" style="font-size: 9pt" color="#C43302"><b>Informatii sistem</b></font><a name="top"><hr noshade color="#A0A0A0" size="1"></td> </tr>

13

<tr> <td width="65%" height="21"> <font face="Verdana" style="font-size: 9pt" color="#000000">Sistem de operare:</font></td> <td width="35%" height="21"> <font color="#000000"> <script LANGUAGE="JavaScript"> <!-function checkOS() { if(navigator.userAgent.indexOf('IRIX') != -1) { var OpSys = "Irix"; } else if((navigator.userAgent.indexOf('Win') != -1) && (navigator.userAgent.indexOf('98') != -1)) { var OpSys = "Windows 98"; } else if((navigator.userAgent.indexOf('Win') != -1) && (navigator.userAgent.indexOf('95') != -1)) { var OpSys = "Windows 95"; } else if(navigator.appVersion.indexOf("16") !=-1) { var OpSys = "Windows 3.1"; } else if (navigator.appVersion.indexOf("NT") !=-1) { var OpSys= "Windows NT"; } else if(navigator.appVersion.indexOf("SunOS") !=-1) { var OpSys = "SunOS"; } else if(navigator.appVersion.indexOf("Linux") !=-1) { var OpSys = "Linux"; } else if(navigator.userAgent.indexOf('Mac') != -1) { var OpSys = "Macintosh"; } else if(navigator.appName=="WebTV Internet Terminal") { var OpSys="WebTV"; } else if(navigator.appVersion.indexOf("HP") !=-1) { var OpSys="HP-UX"; } else { var OpSys = "other"; } return OpSys; } // --> </script>

14

<font face="Verdana" style="font-size: 9pt"> <script LANGUAGE="JavaScript"> <!-var OpSys = checkOS(); document.write(OpSys); // --> </script> </font> </font></td> </tr> <tr> <td width="65%" height="21"> <font face="Verdana" style="font-size: 9pt"> <font color="#000000">Cod aplicatie pentru browser</font><font color="#000000">:</font></font></td> <td width="35%" height="21"> <font color="#000000"> <font face="Verdana" style="font-size: 9pt"> <script> document.write(navigator.appCodeName) </script> <script> <!-var version = 0; if (navigator.userAgent.indexOf("Mozilla/5.0") ! = -1) document.write("5.0"); else if (navigator.userAgent.indexOf("Mozilla/4.7") != -1) document.write("4.7"); else if (navigator.userAgent.indexOf("Mozilla/4.61") != -1) document.write("4.61"); else if (navigator.userAgent.indexOf("Mozilla/4.5") != -1) document.write("4.5") else if (navigator.userAgent.indexOf("Mozilla/4") != -1) document.write("4.0"); else if (navigator.userAgent.indexOf("Mozilla/3") != -1) document.write("3.0"); else if (navigator.userAgent.indexOf("Mozilla/2") != -1) document.write("2.0"); else document.write("Nedeterminat"); // --> </script> </font> </font></td> </tr>

15

<tr> <td width="65%" height="21"> <font face="Verdana" style="font-size: 9pt" color="#000000">Limbaj browser:</font></td> <td width="35%" height="21"><font color="#000000"> <font face="Verdana" style="font-size: 9pt"> <script language="javascript">document.write(navigator.browserLanguage)</script> </font> </font></td> </tr> <tr> <td width="65%" height="21"> <font color="#000000"><font face="Verdana" style="fontsize: 9pt">Intrare pe pagina din URL:</font></td> <td width="35%" height="21"><font color="#000000"> <font face="Verdana" style="font-size: 9pt"> <Script Language="JavaScript"> <!-document.write("( "+ document.referrer +" )" ) //--> </script> </font> </font></td> </tr> <tr> <td width="65%" height="21"> <font color="#000000"><font face="Verdana" style="font-size: 9pt">Versiune Javascript:</font></td> <td width="35%" height="21"><font color="#000000"> <font face="Verdana" style="font-size: 9pt"> <SCRIPT LANGUAGE="JavaScript"> <!-- Begin document.write("" + jsver + "") // End --> </SCRIPT> </font></font></span></td> </tr> <tr> <td width="65%" height="21"> <font face="Verdana" style="font-size: 9pt" color="#000000">Cookies:</font></td> <td width="35%" height="21"><font color="#000000"> <font face="Verdana" style="font-size: 9pt">

16

<script language="javascript"> <!-if (navigator.appName=="Microsoft Internet Explorer") { if (navigator.cookieEnabled==true) { document.write("active pe acest sistem.") } else {document.write("inactive pe acest sistem.") } } else document.write("Netscape nu poate detecta!!") --> </script> </font></font></td> </tr> <tr> <td width="65%" height="21"> <font face="Verdana" style="font-size: 9pt" color="#000000">Java activ:</td> <td width="35%" height="21"> <font color="#000000" size="1" face="Verdana" style="font-size: 9pt"> <script language="javascript"> <!-if (navigator.javaEnabled() < 1) document.write("Nu"); if (navigator.javaEnabled() == 1) document.write("Da"); --> </script> </font></td> </tr> <tr> <td width="65%" height="21"> <font face="Verdana" color="#000000"><font style="font-size: 9pt">Rezolutie curenta:</font></td> <td width="35%" height="21"> <font face="Verdana" style="font-size: 9pt"> <script language="javascript"> <!-x = window.screen.width; y = window.screen.height; document.write(x); document.write(" x ");

17

document.write(y); --> </script> </font> </td> </tr> <tr> <td width="100%" height="44" colspan="2"> <p align="center"> <font face="verdana" style="font-size: 8pt"><br> <br> Rezolutia recomandata pentru acest site este de <b>1024</b>&nbsp;x&nbsp;<b>768</b>&nbsp;pixeli </font></td> </tr>

18

6.Bibliografie
http://ro.wikipedia.org Revista Terra Sistemul solar-Carte+system mobil editura Teora

19