Colegiul Naional MIHAIL SADOVEANU Pacani PROIECT PENTRU SUSINEREA EXAMENULUI DE ATESTARE A COMPETENELOR PROFESIONALE LA INFORMATIC TITLU PROIECT: Fractali FILIERA: Teoretic PROFIL: Real SPECIALIZAREA: Matematic-Informatic, intensiv informatic NUME CANDIDAT:Mititelu Mihai PROFESOR COORDONATOR:Mitric Eduard Gabriel CLASA: a XII-a D SESIUNEA: MAI 2014
2
CUPRINS : 1. Prima paginpag. 1 2. Cuprins.pag. 2 3. Introducerepag. 3 4. Prezentare..pag.4-5 5. Structura aplicaieipag.6-7 6. Descrierea limbajului HTML..pag.8-14 6.1. Noiuni generale...pag.8 6.2. Structura unui document HTML...pag.10 6.3. Inserarea unei imagini.pag.13 7. Despre realizarea unor paginipag.9-14 Bibliografie ..pag.15
3
Introducere Am ales s realizez acest proiect pentru a crea un material exemplificator n ceea ce privete aceste aspecte geometrice numite fractali. Aplicaia este una simplist, cuprinznd informaii generale. Am inclus o serie de imagini cu rol informativ, spre a face lectura materialului mai plcut. Site-ul este fcut cu scopul de a demonstra potenialul artistic al matematicii, prin animaii demonstrative.
4
Prezentarea aplicaiei Am realizat aplicaia folosind programul freeware WebPageMaker, pentru uurina n utilizare. Programul are o interfa simpl, cu butoanele necesare amplasate n susul paginii.
Proiectul conine, n mare parte, casete de text i imagini. Acestea au fost inserate prin comenzile Insert > Text, respectiv Insert > Image :
5
Redimensionrile necesare se fac prin click-and-drag, sau folosind tastele sgei+ tasta Shift.
6
Structura aplicaiei Proiectul conine 4 pagini, realizate n intregime n limbajul HTML. Prima pagin este introductiv, coninnd definiii, date istorice i exemple de fractali.
Cea de-a doua pagin conine exemple n imagini:
Pagina 3:din nou, imagini cu rol de exemplu: 7
i finalmente, pagina 4, care conine animaii referitoare la subiect:
8
Descrierea limbajului HTML 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>
Grei t: <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"> Comentariil e sunt cuprinse nt re <!-- i -->. Exempl u de comentariu: <!-- comentariu --> 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). 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 9
Internet Explorer, vom apsa pe butonul Browse pentru a vizualiza sistemul de fiiere i pentru a selecta pagina Web dorit). <!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), 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 paragrafe avem la dispoziie urmtoarele taguri: Numele tagului Descriere p Paragraf obinuit h1, h2, h3, h4, h5, h6 Paragrafe pentru titlu. Sunt utilizate pentru titlu, subtitlu, subsubtitlu, .am.d. Dintre atributele suportate menionm: Numele atributului Valoare Descriere align left | right | center | justify Specific alinierea paragrafului. 10
Implicit este valoarea left. Paragrafele (i n general elementele care introduc informaiile vizibile celor care viziteaz paginile Web) vor fi scrise n seciuneabody 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 typepentru 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), apentru 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. Exeplu 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> 11
<li>Snow White</li> </ol> Tabele Un tabel se definete prin intermediul marcatorului table. Acesta posed urmtoarele atribute importante: Numele atributului Valoare Descriere align left | right |center Specific alinierea tabelului. Implicit este valoarea left. border valoare numeric Stabilete grosimea marginii tabelului. Implicit este valoarea 0. width valoare numeric | procente Indic limea tabelului. Valoarea numeric reprezint limea tabelului exprimat n pixeli, iar cea procentual n proporia din limea ferestrei navigatorului Web. cellspacing valoare numeric Desemneaz distana n pixeli dintre celulele tabelului. cellpadding valoare numeric 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>Chistol Crina-Elena</td> <!-- completam cu date --> 12
<td>-</td> <td>10</td> </tr> <tr> <!-- alta linie cu date --> <td>Chiriac Ioana</td> <td>1</td> <td>10</td> </tr> <!-- s.a.m.d. --> </table> Marcatorii tr i td pot avea urmtoarele atribute: Numele atributului Valoare Descriere align left | right |center Specific alinierea textului n cadrul celulei. Implicit este valoarea left pentru marcatorul td i center pentru th. valign top | middle |bottom 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). colspan valoare numeric Stabilete numrul de coloane pe care se ntinde respectiva celul. rowspan valoare numeric Stabilete numrul de rnduri din tabel pe care se ntinde respectiva celul. width valoare numeric | procente Indic limea celulei i are aceeai semnificaie ca pentru tabele. De regul, se specific doar limile celulelor din prima linie (acestea fiind i limile 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> 13
</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 Valoare Descriere src adres Adresa relativ sau absolut a fiierului surs care conine imaginea. width valoare numeric | procente Indic limea imaginii. height valoare numeric | procente Indic nlimea imaginii. alt text Stabilete un text alternativ. Dac navigatorul Web nu poate afia imaginile, atunci n locul lor vor aprea textele alternative. 14
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> 15