PROIECT PENTRU OBINEREA ATESTRII PROFESIONALE N INFORMATIC

TITLUL LUCRRII:

BOTOANA

Cuprins

1. Introducere 2. Generalitati despre limbajul HTML 3. Structura si continutul proiectului 4. Bibliografie

1. Introducere:
de fata are ca tema prezentarea comunei Botosana. Am ales aceasta tema deoarece aceasta este comuna unde traiesc de-o viata, unde am copilarit, unde am avut parte de bune si rele. De aceea am decis sa fac aceasta lucrare, pentru a va arata si dumneavoastra frumusetea si atractiile care poate

Lucrarea

va vor hotari sa treceti pe aici. Un alt motiv este acela ca o parte din locuitorii acestei comune, si nu numai, nu prea au habar de trecutul acesteia. Aplicatia cuprinde aspecte despre istoria, geografia, conducerea, credinta, cultura, gospodarii si despre traditiile pastrate de multe secole de sateni. Mai cuprinde de asemenea fotografii caracteristice si videoclipuri cu evenimente importante ce au avut loc in ultimii ani. Aplicatia a fost realizata in aplicatia Front Page a Microsoft Office-ului, cea mai mare parte cu ajutorul elementelor de baza ale acesteia,

dar si in limbajul HTML, prin programare direct in cod sursa (scrierea liniilor de comanda).

2. Generalitati despre limbajul HTML

Microsoft FrontPage (cuvnt englez artificial; front page se traduce "pagina ntia", de exemplu a unui ziar) este un editor HTML WYSIWYG realizat de Microsoft pentru sistemul de operare Microsoft Windows. ntre 1997 i 2003 a fcut parte din suita Microsoft Office. n 1998 a fost lansat i varianta pentru Macintosh. Dup 2006, Microsoft FrontPage a fost nlocuit de Microsoft Expression Web i Microsoft Sharepoint Designer. MS FrontPage aparine categoriei de Editoare HTML. Microsoft Front Page ofera mai multe moduri de vizualizare si gestiune a site-urilor, reflectate prin butoane specifice: operatii asupra paginilor - Page, organizarea fisierelor n foldere Folders, raportari asupra fisierelor si hiperlegaturilor - Reports, navigare n structura site-ului Navigation, vizualizarea hiperlegaturilor - Hyperlinks, executii specifice - Tasks. n cadrul interfetei dedicate crearii paginilor, modul uzual de lucru, numit Normal (si marcat n partea de jos a ferestrei de lucru), permite utilizatorului sa introduca n document textele, formatele si obiectele dorite prin intermediul meniului si butoanelor, utiliznd eventual sabloanele sau asistentii pusi la dispozitie. n urma acestor actiuni, se va genera automat codul HTML corespunzator; acesta poate fi urmarit n modul HTML. Formatul n care documentul creat va fi afisat de navigator se poate vizualiza n modul Preview.

Limbajul HTML - HyperText Markup Language - este un limbaj de marcare utilizat pentru crearea paginilor Web. Un marcator (sau tag) este cuprins ntre caracterele < i >. Majoritatea tagurilor au tag de sfrit, acesta avnd acelai nume ns precedat de simbolul /. Exemplu de marcatori:
<b>text</b> <br>

Marcatorul b are tag de sfrit, iar br este de sine stttor. n cazul n care avem deschise mai multe taguri, acestea se nchid n ordine invers fa de cum au fost deschise (ultimul tag deschis va fi primul nchis). Corect: <p><b>Text corect</b></p> Greit: <p><b>Text incorect</p></b>

Un tag poate s conin unul sau mai multe atribute. Acestea sunt perechi de forma nume="valoare". Exemple de atribute:
<p align="center">paragraf centrat</p> <hr size="1" width="50">

Comentariile sunt cuprinse ntre comentariu:

<!-- comentariu -->

<!--

-->.

Exemplu de

Editarea i vizualizarea documentelor HTML

Pentru editarea documentelor HTML se poate utiliza orice editor de texte obinuit (de exemplu n Linux joe, pico, sau Notepad n Windows). Exist o serie de editoare specializate dintre care recomandm HTML Kit i Ultra Edit. Utilizarea altor editoare fr acceptul cadrului didactic care ine laboratorele este interzis. Pentru sistemul Linux, documentele vor fi stocate n directorul html aflat n directorul de home al unui utilizator. Accesarea paginii se va realiza prin intermediul adresei http://student.infoiasi.ro/~cont, unde cont este numele de

cont al utilizatorului care dorete s-i publice pagina pe Web. Pagina de start al unui site depinde de serverul pe care se afl, de regul fiind index.html. Pentru a vedea o pagin Web de pe calculatorul local, din meniul File al navigatorului se va selecta opiunea Open (n cazul n care utilizm navigatorul Internet Explorer, vom apsa pe butonul Browse pentru a vizualiza sistemul de fiiere i pentru a selecta pagina Web dorit).

Structura general a unui document HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>. . . </title> ... </head> <body> ... </body> </html>

Mai nti se definete tipul documentului (cu DOCTYPE), n cazul nostru este vorba de HTML 4.01. Informaiile sunt cuprinse ntre marcatorul html, iar acesta conine dou seciuni: head i body. n partea de head vor fi cuprinse infromaii utile pentru navigatorul Web sau pentru alte aplicaii, cum ar fi motoarele de cutare. Marcatorul title va conine un text care va fi afiat pe bara de titlu a navigatorului Web. De regul, seciunea body va cuprinde informaiile care vor fi vizibile n suprafaa de afiare a ferestrei navigatorului.

Paragrafe
Pentru inserarea de urmtoarele taguri: Numele tagului p paragrafe avem la dispoziie

Descriere Paragraf obinuit

Paragrafe pentru titlu. Sunt h1, h2, h3, utilizate pentru titlu, subtitlu, h4, h5, h6 subsubtitlu, .am.d. Dintre atributele suportate menionm: Numele atributului
align

Valoare

Descriere

Specific alinierea left | right | paragrafului. Implicit este center | justify valoarea left.

Paragrafele (i n general elementele care introduc informaiile vizibile celor care viziteaz paginile Web) vor fi scrise n seciunea body a documentului HTML. Exemple de paragrafe:
<p align="justify">Paragraf aliniat la stanga si la dreapta</p> <h1 align="center">Titlu aliniat centrat</h1> <h5 align="right">Titlu 5 aliniat la dreapta</h5>

Liste
Pentru definirea de liste nenumerotate putem utiliza marcatorul ul, iar pentru numerotate ol. Ambele posed tag de sfrit. Un element al listei este cuprins n interiorul tagului li.

Elementele listei nenumerotate sunt precedate de un anumit simbol. Pentru a stabili simbolul dorit se va utiliza atributul type pentru marcatorul ul, cu una din valorile: disc (pentru buline, care este implicit), square (pentru ptrat) i circle (pentru cercuri). Exemplu de list nenumerotat care utilizeaz ptrele:
<ul type="square"> <li>trandafiri</li> <li>lalele</li> <li>narcise</li> </ul>

Pentru listele numerotate atributul type poate lua una din valorile: 1 pentru numerotarea cu cifre arabe (care este i implicit), a pentru litere mici, A pentru litere mari, i pentru cifre romane mici i I pentru cifre romane mari. n plus listele numerotate posed atributul start care poate lua o valoare numeric. Aceasta indic valoarea de la se ncepe numerotarea. Exemplu de list numerotat cu cifre romane mari:
<ol type="I" start="3"> <li>Beauty and the Beast</li> <li>Ice Age</li> <li>Shreck</li> <li>Snow White</li> </ol>

Tabele
Un tabel se definete prin intermediul marcatorului Acesta posed urmtoarele atribute importante: Numele atributului
align table.

Valoare

Descriere

left | right | Specific alinierea tabelului. center Implicit este valoarea left.

border

valoare numeric

Stabilete grosimea marginii tabelului. Implicit este valoarea 0.

width

Indic limea tabelului. Valoarea numeric reprezint limea valoare tabelului exprimat n pixeli, iar numeric | cea procentual n proporia din procente limea ferestrei navigatorului Web. valoare numeric valoare numeric Desemneaz distana n dintre celulele tabelului. pixeli

cellspacing

cellpadding

Desemneaz distana n pixeli dintre textul unei celule i marginea (bordura) acesteia.

Marcatorul tr stabilete o linie din tabel (eng. table row), iar n cadrul acesteia pot aprea celule pentru capul de tabel (eng. table head), prin intermediul marcatorului th, sau/i celule cu date (eng. table data), caz n care se utilizeaz marcatorul td. Exemplu de tabel aliniat centrat:
<table border="1" align="center" width="75%" cellspacing="0" cellpadding="5"> <tr> <!-- definim o linie de tabel --> <th>Nume si prenume</th> <!-- definim capul de tabel --> <th>Nr. absente</th> <th>Nota</th> </tr> <!-- s-a terminat prima linie --> <tr> <!-- incepem a doua linie --> <td>Oleniuc George</td> <!-- completam cu date --> <td>-</td> <td>10</td> </tr> <tr> <!-- alta linie cu date --> <td>Martinescu Gabriela</td> <td>1</td> <td>10</td>

</tr> <!-- s.a.m.d. --> </table>

Marcatorii

tr

td

pot avea urmtoarele atribute: Descriere

Numele atributului

Valoare

align

Specific alinierea textului n left | right cadrul celulei. Implicit este | center valoarea left pentru marcatorul td i center pentru th. Specific alinierea textului pe vertical din cadrul celulei. | Implicit este valoarea middle. | Pentru a observa efectul acestui atribut trebuie s avem pe aceeai linie dou celule inegale (pe vertical). Stabilete numrul de coloane pe care se ntinde respectiva celul. Stabilete numrul de rnduri din tabel pe care se ntinde respectiva celul.

valign

top middle bottom

colspan

valoare numeric valoare numeric

rowspan

width

Indic limea celulei i are aceeai semnificaie ca pentru valoare tabele. De regul, se specific numeric | doar limile celulelor din prima procente linie (acestea fiind i limile coloanelor).

Un alt exemplu de tabel:

<table align="center" border="1"> <tr> <td></td> width="70%" cellpadding="3" cellspacing="0"

<th>Grupa 1</th> <th>Grupa 2</th> </tr> <tr> <th>8-10</th> <td colspan="2" align="center">Limba engleza</td> </tr> <tr> <th>10-12</th> <td rowspan="2">Web</td> <td>Matematica</td> </tr> <tr> <th>12-14</th> <td>Geografie</td> </tr> </table>

Tabelele sunt utilizate i n cazul n care se dorete scrierea pe mai multe coloane sau, n general, cnd se doresc diverse alinieri.

Imagini
Imaginile sunt stocate n fiiere separate cum ar fi cele n format GIF, JPEG sau mai nou PNG. Marcatorul utilizat este img, iar acesta nu posed tag de sfrit. Principalele atribute sunt: Numele atributului src Valoare Descriere Adresa relativ sau absolut a fiierului surs care conine imaginea. | Indic limea imaginii. Indic nlimea imaginii. |

adres valoare numeric procente valoare numeric

width height

procente Stabilete un text alternativ. Dac navigatorul Web nu poate afia imaginile, atunci n locul lor vor aprea textele alternative.

alt

text

De regul, sunt specificate dimensiunile reale a imaginilor. Mrirea acestora nu este recomandat deoarece se pierde din calitatea acesteia, iar micorarea se poate realiza ntr-un editor grafic, astfel micorndu-se dimensiunea fiierului (ceea ce duce la o ncrcare mai rapid a ntregii pagini Web). Exemple de utilizare a imaginilor:
<!-- specificarea adresei absolute --> <img src="http://students.infoiasi.ro/~stanasa/eyes.gif" alt="Ochi"> <!-- specificarea adresei relative si adimensiunilor reale a imaginilor --> <img src="ferrari.jpg" alt="Masina sport" height="100" width="275"> <img src="chivu.jpg" alt="fotbalist (Chivu)" height="300" width="100">

Legturi
Pentru a stabili (hiper)legturi ntre paginile Web (sau n cadrul aceleiai pagini) se utilizeaz marcatorul a. Acesta posed atributul href, iar ca valoarea acesta are o adres relativ sau absolut. Astfel se pot crea trimiteri la documente de diferite tipuri (de exemlu: PDF, GIF, ZIP, XML, VRML). Exemple de legturi:
<!-- referine relative --> <a href="prezentare.zip">Laborator 1</a> <a href="mercedes.jpg">Prototip Mercedes</a> <!-- referine alsolute --> <a href="http://www.infoiasi.ro">Facultatea de Informatica</a> <a href="http://students.infoiasi.ro/~stanasa/cv.pdf">CV</a>

3. Structura si continutul proiectului

Aplicatia a fost realizata in aplicatia Front Page a Microsoft Office-ului, cea mai mare parte cu ajutorul elementelor de baza ale acesteia, dar si in limbajul HTML, prin programare direct in cod sursa (scrierea liniilor de comanda). In meniul principal avem o lista (unordered list), din care poti alege: Home , Cultura, Geografie, Istorie, Oamenii din sat, Primaria, Sate vecine, Obiective turistice, Galerie foto, Galerie video.

1.

Home index.html. In aceasta pagina sunt prezentate date introductive despre comuna Botosana si detalii despre autorul proiectului.

2. Cultura cultura.html. In aceasta pagina sunt prezentate istorisiri si legende preluate din Monografia satului Botosana.

3. Geografia geografie.html. In aceasta pagina sunt prezentate date generale despre geografia comunei, dar si modalitati pentru a ajunge pe aceste meleaguri.

4. Istorie istorie.html. In aceasta pagina sunt prezentate istoricul localitatii, precum si date despre formarea acesteia si despre provenienta numelui.

5.

Oamenii din sat oamenisat.html. In aceasta pagina sunt prezentate date despre personalitati care au primit distinctia de CETATEAN DE ONOARE AL COMUNEI BOTOSANA , precum si primarii comunei incepand cu anul 1763: si pana in prezent.

6. Primaria primaria.html. In aceasta pagina sunt prezentate date despre primar, secretar si despre consiliul local al comunei Botosana.

7.

Sate vecine vecini.html. In aceasta pagina sunt prezentate date despre satele invecinate: Comneti, Cacica, Poieni-Solca, Cajvana si Arbore.

8. Obiective turistice obiective.html. In aceasta pagina sunt prezentate imagini si descrieri ale locurilor unde istoria si trecutul si-au lasat amprenta.

9. Galerie foto fotog.html. In aceasta pagina sunt prezentate imagini ale comunei luate din elicopter, imagini ale vechii biserici, actual monument istoric, ale batranului stejar, ale unor harti din vremuri stravechi, precum si imagini inedite ale satenilor din timpurile trecute.

10. Galerie video video.html. In aceasta pagina sunt prezentate videoclipuri cu evenimente care au dat renume acestui sat, cu obiceiuri si traditii inca din timpuri stravechi, dar si cu cetateni care ne-au facut mandri ca suntem locuitori ai acestei comune.

Prima pagina mai contine un buton, Contact contact.html , unde gasiti date despre mine, autorul lucrarii.

Codul sursa al paginii contact.html :

<html> <head> <meta http-equiv="Content-Language" content="en-us"> <meta http-equiv="Content-Type" content="text/html; charset=windows1252"> <title>Datele mele</title> <script language="JavaScript"> <!-function FP_swapImg() {//v1.0 var doc=document,args=arguments,elm,n; doc.$imgSwaps=new Array(); for(n=2; n<args.length; n+=2) { elm=FP_getObjectByID(args[n]); if(elm) { doc.$imgSwaps[doc. $imgSwaps.length]=elm; elm.$src=elm.src; elm.src=args[n+1]; } } } function FP_preloadImgs() {//v1.0 var d=document,a=arguments; if(!d.FP_imgs) d.FP_imgs=new Array(); for(var i=0; i<a.length; i++) { d.FP_imgs[i]=new Image; d.FP_imgs[i].src=a[i]; } } function FP_getObjectByID(id,o) {//v1.0 var c,el,els,f,m,n; if(!o)o=document; if(o.getElementById) el=o.getElementById(id); else if(o.layers) c=o.layers; else if(o.all) el=o.all[id]; if(el) return el; if(o.id==id || o.name==id) return o; if(o.childNodes) c=o.childNodes; if(c) for(n=0; n<c.length; n++) { el=FP_getObjectByID(id,c[n]); if(el) return el; } f=o.forms; if(f) for(n=0; n<f.length; n++) { els=f[n].elements; for(m=0; m<els.length; m++){ el=FP_getObjectByID(id,els[n]); if(el) return el; } } return null; } // -->

</script> </head> <body bgcolor="#C0C0C0" onload="FP_preloadImgs(/*url*/'button3.jpg', /*url*/'button2.jpg')"> </body> <p align="center"> <a href="index.htm"> <font size="1"> <img border="0" id="img1" src="button1.jpg" height="33" width="100" alt="Home" fp-style="fp-btn: Soft Tab 9; fp-font-size: 12; fp-font-colornormal: #008000; fp-orig: 0" fp-title="Home" onmouseover="FP_swapImg(1,0,/*id*/'img1',/*url*/'button2.jpg')" onmouseout="FP_swapImg(0,0,/*id*/'img1',/*url*/'button1.jpg')" onmousedown="FP_swapImg(1,0,/*id*/'img1',/*url*/'button3.jpg')" onmouseup="FP_swapImg(0,0,/*id*/'img1',/*url*/'button2.jpg')" align="right"></font></a><font size="1">&nbsp; </font><font size="7">&nbsp;&nbsp;&nbsp;&nbsp; </font> <font size="7" face="Modern">&nbsp;&nbsp;&nbsp; </font> <font face="Segoe Script" size="7">Datele mele&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </font></p> <p>&nbsp;</p> <p><img border="0" src="SDC15066.JPG" width="366" height="483"> </p> <p>&nbsp;</p> <div style="position: absolute; width: 302px; height: 43px; z-index: 3; left: 586px; top: 200px" id="layer19"> <font size="6">George</font></div> <div style="position: absolute; width: 302px; height: 43px; z-index: 3; left: 587px; top: 372px" id="layer18"> <font size="5">727050</font></div> <div style="position: absolute; width: 302px; height: 43px; z-index: 3; left: 586px; top: 312px" id="layer17"> <font size="6">Suceava</font></div> <div style="position: absolute; width: 302px; height: 43px; z-index: 3; left: 586px; top: 430px" id="layer16"> <font size="5">oleee_geo23@yahoo.com</font></div> <div style="position: absolute; width: 302px; height: 43px; z-index: 3; left: 585px; top: 140px" id="layer15"> <font size="6">Oleniuc</font></div>

<div style="position: absolute; width: 302px; height: 43px; 585px; top: 484px" id="layer14"> <font size="5">0747387396</font></div> <div style="position: absolute; width: 302px; height: 43px; 587px; top: 256px" id="layer11"> <font size="5">Comuna</font><font size="5"> 456</font></div> <div style="position: absolute; width: 150px; height: 42px; 398px; top: 143px" id="layer2">

z-index: 3; left: z-index: 3; left: Botosana, Nr. z-index: 2; left:

<p align="left"><font face="Segoe Script" size="5" color="#0000FF">Nume:</font></div> <div style="position: absolute; width: 383px; height: 494px; z-index: 1; left: -5px; top: 141px; border: 5px outset #0000FF" id="layer1"> &nbsp;</div> <p>&nbsp;</p> <div style="position: absolute; width: 149px; height: 42px; z-index: 2; left: 399px; top: 258px" id="layer3"> <font face="Segoe Script" size="5" color="#0000FF">Adres<b>a:</b></font></div> <div style="position: absolute; width: 150px; height: 42px; z-index: 2; left: 399px; top: 201px" id="layer4"> <font face="Segoe Script" size="5" color="#0000FF">Prenume:</font></div> <p>&nbsp;</p> <div style="position: absolute; width: 151px; height: 42px; z-index: 2; left: 401px; top: 487px" id="layer5"> <font size="5" face="Segoe Script" color="#0000FF">Telefon:</font></div> <div style="position: absolute; width: 152px; height: 42px; z-index: 2; left: 399px; top: 372px" id="layer6"> <font face="Segoe Script" size="5" color="#0000FF">Cod postal:</font></div> <div style="position: absolute; width: 150px; height: 42px; z-index: 2; left: 399px; top: 315px" id="layer8"> <font face="Segoe Script" size="5" color="#0000FF">Judet:</font></div> <p>&nbsp;</p> <div style="position: absolute; width: 152px; height: 42px; z-index: 2; left: 400px; top: 431px" id="layer7">

<font face="Segoe Script" color="#0000FF"><font size="5">Em</font><b><font size="5">ail:</font></b></font></div> <p>&nbsp;</p> </html>

Bibliografie
http://www.html-tutor.net/ http://www.botosanasv.ro/index.php#

Monografia satului prof. Vasile Boca

Botosana,

de

Botosana Vatra Stramoseasca, de prof. Simeon Ghiata http://www.hoinari.ro http://www.google.ro/imghp? hl=ro&tab=wi http://www.youtube.com/ http://ro.wikipedia.org/