Botosana - Documentatie
29
PROIECT PENTRU OBŢINEREA ATESTĂRII PROFESIONALE ÎN INFORMATICĂ TITLUL LUCRĂRII: BOTOŞANA
-
Upload
george-oleniuc -
Category
Documents
-
view
164 -
download
0
Transcript of Botosana - Documentatie
PROIECT PENTRU OBŢINEREA ATESTĂRII PROFESIONALE ÎN
INFORMATICĂ
TITLUL LUCRĂRII:
BOTOŞANA
Cuprins
1. Introducere
2. Generalitati despre limbajul HTML
3. Structura si continutul proiectului
4. Bibliografie
1. Introducere:
Lucrarea 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 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 (cuvânt englez artificial; front page se traduce "pagina întâia", de exemplu a unui ziar) este un editor HTML WYSIWYG realizat de Microsoft pentru sistemul de operare Microsoft Windows. Între 1997 şi 2003 a făcut 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 aparţine 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, utilizând 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 sfârşit, acesta având acelaşi nume însă precedat de simbolul /.
Exemplu de marcatori:
<b>text</b> <br>
Marcatorul b are tag de sfârşit, iar br este de sine stătător.
Î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>
Greşit:
<p><b>Text incorect</p></b>
Un tag poate să conţină 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 <!-- şi -->. Exemplu de comentariu:
<!-- comentariu -->
Editarea şi vizualizarea documentelor HTML
Pentru editarea documentelor HTML se poate utiliza orice editor de texte obişnuit (de exemplu în Linux joe, pico, sau Notepad în Windows). Există o serie de editoare specializate dintre care recomandăm HTML Kit şi Ultra Edit. Utilizarea altor editoare fără 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 doreşte 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 opţiunea Open (în cazul în care utilizăm navigatorul Internet Explorer, vom apăsa pe butonul Browse pentru a vizualiza sistemul de fişiere ş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 întâi se defineşte tipul documentului (cu DOCTYPE), în cazul nostru este vorba de HTML 4.01. Informaţiile sunt cuprinse între marcatorul html, iar acesta conţine două secţiuni: head şi body. În partea de head vor fi cuprinse infromaţii utile pentru navigatorul Web sau pentru alte aplicaţii, cum ar fi motoarele de căutare. Marcatorul title va conţine un text care va fi afişat pe bara de titlu a navigatorului Web. De regulă, secţiunea body va cuprinde informaţiile care vor fi vizibile în suprafaţa de afişare a ferestrei navigatorului.
Paragrafe
Pentru inserarea de paragrafe avem la dispoziţie următoarele taguri:
Numele tagului
Descriere
p Paragraf obişnuit
h1, h2, h3, h4, h5, h6
Paragrafe pentru titlu. Sunt utilizate pentru titlu, subtitlu, subsubtitlu, ş.am.d.
Dintre atributele suportate menţionăm:
Numele atributului
Valoare Descriere
alignleft | right | center | justify
Specifică alinierea paragrafului. Implicită este valoarea left.
Paragrafele (şi în general elementele care introduc informaţiile vizibile celor care vizitează paginile Web) vor fi scrise în secţiunea 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 sfârşit. 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 pătrat) şi circle (pentru cercuri).
Exemplu de listă nenumerotată care utilizează pătrăţele:
<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 defineşte prin intermediul marcatorului table. Acesta posedă următoarele atribute importante:
Numele atributului
Valoare Descriere
alignleft | right | center
Specifică alinierea tabelului. Implicită este valoarea left.
bordervaloare numerică
Stabileşte grosimea marginii tabelului. Implicită este valoarea 0.
width valoare numerică | procente
Indică lăţimea tabelului. Valoarea numerică reprezintă lăţimea tabelului exprimată în
pixeli, iar cea procentuală în proporţia din lăţimea ferestrei navigatorului Web.
cellspacingvaloare numerică
Desemnează distanţa în pixeli dintre celulele tabelului.
cellpaddingvaloare numerică
Desemnează distanţa în pixeli dintre textul unei celule şi marginea (bordura) acesteia.
Marcatorul tr stabileşte o linie din tabel (eng. table row), iar în cadrul acesteia pot apărea 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 şi td pot avea următoarele atribute:
Numele atributului
Valoare Descriere
alignleft | right | center
Specifică alinierea textului în cadrul celulei. Implicită este valoarea left pentru marcatorul td şi center pentru th.
valigntop | middle | bottom
Specifică alinierea textului pe verticală din cadrul celulei. Implicită este valoarea middle. Pentru a observa efectul acestui atribut trebuie să avem pe aceeaşi linie două celule inegale (pe verticală).
colspanvaloare numerică
Stabileşte numărul de coloane pe care se întinde respectiva celulă.
rowspanvaloare numerică
Stabileşte numărul de rânduri din tabel pe care se întinde respectiva celulă.
widthvaloare numerică | procente
Indică lăţimea celulei şi are aceeaşi semnificaţie ca pentru tabele. De regulă, se specifică doar lăţimile celulelor din prima linie (acestea fiind şi lăţimile coloanelor).
Un alt exemplu de tabel:
<table align="center" width="70%" cellpadding="3" cellspacing="0" border="1"><tr> <td></td> <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 doreşte scrierea pe mai multe coloane sau, în general, când se doresc diverse alinieri.
Imagini
Imaginile sunt stocate în fişiere separate cum ar fi cele în format GIF, JPEG sau mai nou PNG. Marcatorul utilizat este img, iar acesta nu posedă tag de sfârşit. Principalele atribute sunt:
Numele atributului
Valoare Descriere
src adresăAdresa relativă sau absolută a fişierului sursă care conţine imaginea.
widthvaloare numerică | procente
Indică lăţimea imaginii.
heightvaloare numerică | procente
Indică înălţimea imaginii.
alt text
Stabileşte un text alternativ. Dacă navigatorul Web nu poate afişa imaginile, atunci în locul lor vor apărea textele alternative.
De regulă, sunt specificate dimensiunile reale a imaginilor. Mărirea acestora nu este recomandată deoarece se pierde din calitatea acesteia, iar micşorarea se poate realiza într-un
editor grafic, astfel micşorându-se dimensiunea fişierului (ceea ce duce la o încărcare 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">
Legături
Pentru a stabili (hiper)legături între paginile Web (sau în cadrul aceleiaşi 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 legături:
<!-- referinţe relative --><a href="prezentare.zip">Laborator 1</a><a href="mercedes.jpg">Prototip Mercedes</a><!-- referinţe 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: Comăneşti, 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=windows-1252"><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-color-normal: #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"> </font><font size="7"> </font><font size="7" face="Modern"> </font>
<font face="Segoe Script" size="7">Datele mele </font></p><p> </p><p><img border="0" src="SDC15066.JPG" width="366" height="483"> </p><p> </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">[email protected]</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; z-index: 3; left: 585px; top: 484px" id="layer14">
<font size="5">0747387396</font></div><div style="position: absolute; width: 302px; height: 43px; z-index: 3; left: 587px; top: 256px" id="layer11">
<font size="5">Comuna</font><font size="5"> Botosana, Nr. 456</font></div><div style="position: absolute; width: 150px; height: 42px; z-index: 2; left: 398px; top: 143px" id="layer2">
<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"> </div><p> </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> </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> </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">E-m</font><b><font size="5">ail:</font></b></font></div><p> </p>
</html>
Bibliografie
http://www.html-tutor.net/ http://www.botosana-sv.ro/
index.php# “Monografia satului Botosana”, de
prof. Vasile Boca “Botosana Vatra Stramoseasca”,
de prof. Simeon Ghiata http://www.hoinari.ro http://www.google.ro/imghp?
hl=ro&tab=wi http://www.youtube.com/
