Вы находитесь на странице: 1из 15

1

Ministerul Educaiei Naionale



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

Bibliografie
ro.wikipedia.org/wiki/Fractal
giphy.com/search/fractal
google.ro/search?q=fractals&es_sm=122&source=lnms&tbm=isch&s
a=X&ei=O3BjU_vcLKOX7Qbhr4CIDw&ved=0CAgQ_AUoAQ&bi
w=1440&bih=775
(Google Image Search-Fractals)

Вам также может понравиться