Partea Scrisa

Colegiul National M.
Eminescu
Atestat la informatica
Despre Fotografie
Profesor coordonator:
Ilas Adela- Luminita
Alexandru
Elev:Maftei
Clasa a XII a B
Mai 2014
Cuprins
Memoriu justificativ
Ce este HTML-ul
Taguri uzuale
Imagini i linkuri
Codul HTML al primei pagini (index.html)
Concluzie
Bibliografie
3
5
7
11
14
15
Memoriu justificativ
Am ales tema Despre fotografie, prezentat sub forma unei pagini
web, redactat n limbajul HTML.
Pagina rezultat este fiabil i uor de accesat, fiind compatibil cu
orice browser. Tocmai de aceea am ales redactarea direct n html, de la
zero, fr s folosesc editoare de tip What You See Is What You Get, care ar
fi ngreunat accesarea site-ului, printr-o serie de tag-uri inutile. Din contr,
redactnd site-ul sut la sut manual, am obinut o pagin de web
optimizat, uor accesibil utilizatorilor, indiferent de sistemul de operare
sau de browserul utilizat.
Rezultatul este o pagin de web cu multe imagini,cu articole
interesante, structurate ergonomic i cu o surs dinamic, uor de completat
i modificat.
Ce este HTML-ul?
HTML este prescurtarea HyperText Markup Language. HTML este cea
mai popular limb a web-ului. Pagini i sit-uri web sunt scrise n HTML. Cu
HTML i WWW, poi aduce n acelai loc texte, sunete, poze, i legturi ctre
alte situri. Documentele HTML pot fi compuse i editate pe orice tip de
calculator.
Bazele unei pagini HTML

Tagurile
O pagin de HTML are numele de forma pagina.html unde pagina
este denumirea pe care i-am dat-o paginii web, iar .html este extensia
documentului.
Intr-un document HTML poti avea caractere aldine (bold in limba
engleza), cursive (italice), mici si mari.
Pentru a crea propoziia de mai sus, codul HTML va arta aa:
Intr-un document HTML poti avea caractere <b>aldine (bold in limba
engleza)</b>, <i>cursive (italice)</i>, <font size=-2>mici</font> si <font
size=+2>mari</font>
n cod HTML, cnd se scrie un text ntre < i > se creaz un tag.
De exemplu, tagul <b> d comanda de a ncepe scriere cu caractere bold, i
tagul </b> d comanda de a opri scrierea cu caractere bold. Tagul cu
semnul slash (/) este cunoscut ca tag de nchidere. Cele mai multe taguri
necesit i un tag de nchidere, dar nu toate. Tagurile formeaz ntreaga
structur a unui document HTML.
<b>Acest text are caractere bold.</b>,
Structura documentelor HTML

Documentele HTML sunt fiiere ce conin texte, i care primesc
extensia .htm, .html sau .shtml. Documentele HTML au dou pari, head-ul
i body-ul. Body este partea mai mare a documentului n care se va gsi
coninutul paginii. Head-ul unui document conine titlul acelui document i
o scurt descriere.
Structura unui document HTML, exemplu:

<html>
<head>
<title>Titlul paginii</title>
</head>
<body>
Continut pagina aici
</body>
</html>
Pentru a nelege mai bine i a-mi uura munca, am lsat spaii ntre
liniile documentului.
Tot ceea ce se gsete ntre tagurile title va fi titlul documentului,
acesta va aprea n momentul vizionrii documentului n susul paginii n bara
pentru titlu.
Titlul acestei pagini este Leonardo da Vinci.
Heading
Heading-urile sunt unele dintre cele mai importante taguri din
coninutul (body) al unui document HTML. Tagul de deschidere pentru
heading este <hn> i cel de nchidere fiind </hn> unde n reprezint
mrimea heading-ului; acesta variind de la 1 la 6 (1 fiind cel mai mare iar 6
cel mai mic).
Exemple:
Titlul de nivel 1. {Heading 1}

<h1>Titlul de nivel 1. {Heading 1}</h1>




Linii orizontale
Liniile orizontale sunt folosite pentru a separa diferite arii ntr-o pagina
web. Tagul pentru linie orizontala este <hr>, aceast comand nu are tag de
nchidere. I se pot aduga acelui tag diferite atribute, ca: width=n (pentru
lungimea liniei n puncte) sau width=n% (pentru lungimea liniei raportate la
toat lungimea ecranului), size=n (pentru linie ngroat dar transparent) i
noshade (pentru linie ngrot plin). Un tag <hr> fr atribute va fi
interpretat ca linia s aib toat lungimea paginii.
Taguri uzuale
Tagul paragraf
Paragrafele se folosesc destul de des n HTML, la fel ca n scriera unei
poveti, cri, tagul de deschidere pentru paragraf este <p>, iar cel de
nchidere este </p>. Tagul de nchidere pentru paragraf nu este ntotdeauna
necesar dar se recomand folosirea lui.
Formatul textului
O pagin web fr un format anume al textului va arta plictisitoare.
De aceea se folosesc aceste taguri pentru text (bold, italice, subliniat).
Cteva taguri cunoscute pentru formatul textului sunt <b> i </b> pentru
bold, <i> i </i> pentru italic, <u> i </u> pentru subliniat. Pentru
dimensiunea textului se folosesc tagurile <font size=n> i </font>.
Multe taguri suport atribute de aliniere n pagin; aliniere la stnga,
n centru, la dreapta. Atributul align se ataeaz tagului de deschidere
naintea semnului >.
Exemple:
Aliniere stanga
<h2 align=left>Aliniere stanga</h2>
Aliniere centru
<h2 align=center>Aliniere centru</h2>
Aliniere dreapta
<h2 align=right>Aliniere dreapta</h2>
Sfritul rndului
Tagul pentru sfrit de rnd este <br>. Acest tag nu are un altul
pentru nchidere.
Exemplu fr tag de sfrit de rnd:
O cafea. Doua cafele. Trei cafele.
Prima linie.
A doua linie.
A treia linie.
Exemplu cu tag de sfrit de rnd:
Prima linie.
A doua linie.
A treia linie.
O cafea.<br>
Doua cafele.<br>
Trei cafele.<br>
Imagini i Link-uri
Link-urile
Link-urile sunt esena webului, fr acestea paginile unui sit nu ar avea
legtur ntre ele. Pentru a aduga un link se folosete tagul de deschidere
<a href="locatie"> i tagul de nchidere </a>. Tot ce va aprea ntre aceste
dou taguri va fi subliniat i colorat, iar n momentul click-ului pe acel text,
browser-ul va fi trimis spre locaia dat.
Exemplu:
Vizitati site-ul Colegiului National Mihai Eminescu
Sursa:
Vizitati site-ul <a href="http://www.cnme.lx.ro">Colegiului National Mihai
Eminescu</a>
Daca link-ul este ctre o pagina care se afla n acelai director cu
pagina curent se introduce doar numele paginii. Spre exemplu, dac pagina
se numete publicitate.html se va folosi codul <a href="index.html">Pagina
Principala</a>
Link-urile sunt folosite pentru a naviga de la o pagin la alta, dar pot fi
folosite i pentru trimiterea mail-urilor.
Exemplu:
Trimite un e-mail la WebMaster.
Sursa:
Trimite un e-mail la <a href="mailto:webmaster@site.ro">WebMaster</a>.
Imagini
Paginile web pot conine i imagini att timp ct acestea sunt n format
.gif, .jpg, .bmp sau, mai recent i .png. Tagul pentru a adauga o imagine
este <img src="locatie">. Este recomandat adugarea atributelor height i
width, acestea permind imaginii s aib diferite dimensiuni. Este de
asemenea recomandat folosirea atributului alt="descrierea imaginii", acesta
n momentul suprapunerii cursorului mouse-ului cu imaginea indic

descrierea imaginii. Tagul pentru adaugare imagine nu are i tag de
nchidere.
Exemplu:
Sursa:
<img src="leonardo.jpg" width=260 height=417 alt="Leonardo da Vinci">
Adugarea de sunete
Pentru adugarea de sunete unei pagini de web se folosete tagul
<embed>. Acest tag supot extensii de genul .wav, .mp3, .au, .midi.
Structura de baz a acestui tag:
<embed src="nume_sunet" width=n height=n autoplay=n hidden=n loop=n
volume=n> </embed>
Dac se vrea ca sunetul s nceap automat la deschiderea paginii, se
seteaz autoplay=true, dac nu vrei ca sunetul s nceap automat, seteaza
autoplay=false. Daca nu vrei ca player-ul s apar n pagin, seteaz
hidden=true. Dac vrei ca sunetul s se aud n mod repetat seteaz
loop=true. Volumul se seteaz pe o scar de la 1 la 100 (50 fiind valoarea
predefinit).
Folosirea diacriticelor
Pentru a fi ct mai prezentabil, pagina de internet ar trebui s
conin i diacritice. n limbajul HTML exist o serie de coduri care ne ajut
n acest sens.
Caracter
Cod
HTML
ă
Ă
â
Â
î
Î
ş
Ş
ţ
Ţ
n continuare urmeaz codul HTML al primei pagini (index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF8" />
<title>Pictures</title>
<link href='http://fonts.googleapis.com/css?family=Cantarell|
Oswald' rel='stylesheet' type='text/css'>
<link href="styles.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="nivo/default.css" type="text/css"
media="screen" />
<link rel="stylesheet" href="nivo/nivo-slider.css"
type="text/css" media="screen" />
<link rel="stylesheet" href="prettyphoto/prettyPhoto.css"
type="text/css" media="screen" title="prettyPhoto main
stylesheet" charset="utf-8" />
<script type="text/javascript" src="nivo/jquery1.6.1.min.js"></script>
<script src="prettyphoto/jquery.prettyPhoto.js"
type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).ready(function(){
//Set opacity on each span to 0%
$(".rollover").css({'opacity':'0'});
$('#gallery a.item').hover(
function() {
$(this).find('.rollover').stop().fadeTo(500,
1);
},
function() {
$(this).find('.rollover').stop().fadeTo(500,
0);
}
)
});
</script>
</head>
<body>
<div id="container">

<div id="header">
<div id="header-logo"><h1>Cele mai tari
fotografii</h1></div>
<div id="header-tag"><h2>A circle is the reflection of
eternity.</h2></div>
<div id="header-social">
<ul>
<li><a href="#natura"
class="natura">Natura</a></li>
<li><a href="#time" class="time">Right
Time</a></li>
</ul>
</div>
</div>

<div class="slider-wrapper theme-default">
<span id="slider-shadow"></span>
<div id="slider" class="nivoSlider">
<img src="images/slider/slider-img-1.jpg" alt=""
title="#htmlcaption1" />
<a href="#"><img src="images/slider/slider-img2.jpg" alt="" title="#htmlcaption2" /></a>
</div>
<div id="htmlcaption1" class="nivo-html-caption">
<strong>"Natura</strong> nu este un templu, ci
un atelier n care omul trebuie s rmn un simplu muncitor."
</div>
<strong>"Timpul</strong> e o fiara care are
nesfarsita rabdare de a inghiti totul. "<br>Surprinde viata din
plin. :)
</div>
<strong>"Nu exista arta abstracta.</strong>
Trebuie sa incepi cu ceva. Apoi indepartezi orice urma de
realitate"
</div>
<strong>"Inimile</strong> animate de sentimente

puternice vorbesc chiar prin emoiile lor."
</div>
<strong>"Dorete-i</strong> o personalitate i
vei deveni acea personalitate."<br/>Friedrich Nietzsche
</div>
</div>

<div id="gallery">
<div id="title-divider"><h3><a id="natura">Poze din
natura</a></h3></div>
<a href="images/col/1.jpg" class="item"
rel="prettyPhoto[gallery1]"><span class="rollover"></span><span
class="gallery-shadow"></span><img src="images/col/t1.jpg"/></a>
</div>
<div id="gallery">
<div id="title-divider"><h3><a id="time">Momentul
potrivit</a></h3></div>

</div>
<div id="gallery">
<div id="title-divider"><h3>Imagini
abstracte</h3></div>
<a href="images/gallery/gallery-full1.jpg"
class="item" rel="prettyPhoto[gallery1]"><span
class="rollover"></span><span class="gallery-shadow"></span><img
src="images/gallery/gallery-thumb1.jpg"/></a>
</div>
<div id="gallery">
<div id="title-divider"><h3>Imagini
emotionante</h3></div>
<a href="images/col/e1.jpg" class="item"
class="gallery-shadow"></span><img src="images/col/te1.jpg"/></a>
</div>

<div id="about">
<div id="title-divider"><h3>Despre
fotografie</h3></div>
Cele trei fenomene necesare obtinerii imaginilor
fotografice sunt cunoscute de mult timp:
<li>nc de pe vremea lui Aristotel s-a stiut cum se poate pune
realitatea ntr-o cutie: este suficient s facem o gaur ntr-o
cutie nchis ca s apar o imagine real inversat pe fondul
interior al cutiei. Se obtine astfel o asa-numit camer obscur.
</li><li>Pe de alt parte, alchimistii stiau c lumina
nnegreste clorura de argint.
</li><li>A treia contributie a venit din partea lui John
Herschel, care n 1819 a descris propriettiile hiposulfitului
de sodiu, care va deveni "fixatorul" fotografiei.
</li>
<b>Joseph Nicphore Nipce</b>, un mic fizician din provincie, a

folosit toate aceste trei proceduri pentru a fixa o imagine pe o
plc metalic cu depunere de halogenur de argint (1829).
Rezultatul a avut o calitate medie. Niepce a murit n 1833, dar
inventia sa a fost recuperat de ctre Jacques Mand
Daguerre.<br />
De aceea, data oficial a inventiei fotografiei este 1839, cnd
Daguerre a prezentat inventia numit de el "daghereotip", care
este o simpl ameliorare a descoperirii fcute de Niepce.
Proprietar al inventiei a devenit statul francez.<br />
Gratie daghereotipiei se obtine o matrit a mediului pe o plac
metalic tratat cu o substant fotosensibil , dup o expunere
de "doar" 8 ore (cnd cerul este complet senin). Copierea se
fcea prin presarea matritei pe suportul de hrtie, ca si la
orice tiprire a ziarelor.<br />
Aceast expunere lent
Parisului, chiar si la
Tehnica va avansa ns
nou meserie, aceea de
vremii.<br />
aduce cu sine cteva probleme: strzile

o or de vrf, apar n ntregime goale.
rapid, noua inventie fcnd s apar si o
fotograf, cutat n special de ziarele
n anul 1848, Felix Tournachon, cunoscut mai bine sub numele

Flix Nadar, realizeaz prima fotografie aerian, fotografiind
Parisul din nacela unui aerostat (balon).<br />
Dac la nceput negativul (cunoscut si sub numele de "cliseu")
se realiza pe o plac de cristal, pentru a nu avea deformri,
plac foarte casabil si care cerea o manipulare deosebit, prin
dezvoltarea artei fotografice a aprut necesitatea unui suport
fotosensibil mai usor de manipulat dect cristalul.<br />
George Eastman reuseste n anul 1884 s realizeze primul negativ

flexibil, pe un suport de nitroceluloz, cunoscut sub denumirea
de "roll film", usor de manipulat, incasabil si cu aceleasi
proprietsi fotografice ca si ale plcii de cristal. Totodat,
volumul si greutatea aparatului de fotografiat se micsoreaz
considerabil, transportarea lui nemaifiind o problem.<br />
<h2><b>Evolutie</b></h2>
n decursul timpului fotografia a evoluat foarte mult.
Progresele au urmat trei directii principale:<br />
<li>reducera duratei de expunere / mrirea sensibilittii
filmului sau a plcii;
</li><li>mrirea stabilittii imprimrii;
</li><li>simplificarea aplicrii tehnicilor de fotografiat,
datorit aparitiei:</li>
-aparatelor de fotografiat din ce n ce mai mici si mai
ieftine<br/>
-substantelor chimice de developare si stabilizare a peliculei
sensibile negative sau a suportului de carton pentru pozitive
gata preparate de laboratoare specializate.<br/>
<h2>Fotografia color</h2><br/>
Ideea de fotografie color a circulat nc de la aparitia

inventiei. Primele experimente fotografice n culoare nu au avut
succes, astfel de exemplu nu s-a putut mpiedica decolorarea
fotografiilor. Prima fotografie cu culori permanente a fost
fcut n 1861 de fizicianul James Clerk Maxwell.<br/>
Primul sistem color, Autochrome Lumire, a aprut pe piat la 17
decembrie 1903. Acesta era un sistem de fotografie color
transparent. Fotografierea se fcea pe trei plci fotografice
alb/negru cu substane cromatice sensibile numai la culorile

rosu, verde si albastru. Apoi cele trei fotografii transparente
rezultante se suprapuneau, dnd o fotografie color
transparent.<br/>
Pelicula color de tip Kodachrome a aprut n 1935 si s-a bazat
pe emulsii tricromatice. Majoritatea peliculelor color moderne,
cu exceptia "Kodachrome", se bazeaz pe o tehnologie dezvoltat
de compania german Agfa n 1936.<br/>
Fotografia instantanee cunoscut sub numele de Polaroid a aprut
n anul 1948, fiind pus la punct de dr. Edwin Land, la nceput
n alb/negru, iar din 1962 n culori.<br/>
Fotografia digital<br />
Fotografierea traditional a fost dificil pentru fotografii ce
lucrau departe de sediu (precum corespondenii de pres din
strintate), fr acces la facilitti de procesare si
transmitere. Pentru a tine pasul cu popularitatea crescnd a
televiziunii, acestia au fcut tot posibilul pentru a trimite
imaginile lor la ziar ct mai repede. Fotojurnalistii trimisi n
locatii distante trebuiau s si ia cu ei un mini-laborator foto
si un aparat pentru cuplarea la liniile de transmitere a
imaginilor. n 1990, compania Kodak a prezentat publicului DCS
100, primul aparat de fotografiat digital disponibil n comert.
Pretul su ridicat indica o utilizare numai n fotojurnalism si
aplicatii profesionale, dar ncetul cu ncetul si ramura
digital a fotografiei a devenit disponibil n comert.<br/>
n decurs de 10 ani aparatele de fotografiat digitale au devenit
articole de consum uzuale. La ora actual, rspndirea lor pe
glob a depsit de mult predecesorul lor traditional, deoarece
pretul componentelor electronice scade permanent iar simultan se
mbuntteste si calitatea imaginilor digitale.<br/>
n ianuarie 2004 Kodak a anuntat c nu va mai produce aparate
foto rencrcabile cu film de 35 mm ncepnd de la finalul
anului. Totusi, si fotografia "ud" va continua s existe, atta
timp ct artiti fotografici talentati si unii amatori vor dori
s profite de posibilittile ei multiple.<br/>
</div>
<div id="sub-container">

<div id="bib">
<div id="title-sub-
divider"><h3>Bibliografie</h3></div>
<div id="bib-col1">
<li> <a
href="http://www.youramazingplaces.com">Amazingplaces</a></li>
<li><a
href="http://www.citatepedia.ro">Citatepedia</a></li>
<li><a
href="http://www.boredpanda.com">Boredpanda</a></li>
<ul>
</ul>
</div>
<div id="about-col2">
<p></div>
</div>

<div id="contact">
<div id="title-sub-divider"><h3>Contact</h3></div>
<form id="contact-form" action="contact.php">
<input type="text" name="name" id="name"
value="Your Name" />
<input type="text" name="email" id="email"
value="Your Email Address" />
<textarea id="comment"></textarea>
<input type="submit" value="submit"
id="submit" />
</form>
</div>
</div>
</div>

<div id="footer">
<div id="footer-container">
<center><h2>Copyright © Alexandru Maftei</h2></center>
</div>
</div>
<script type="text/javascript"
src="nivo/jquery.nivo.slider.pack.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider({
effect:'random',
slices:15,
animSpeed:500,
pauseTime:5000
});
});
</script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$
("a[rel^='prettyPhoto']").prettyPhoto({animation_speed:'normal',
theme:'dark_rounded', social_tools:false, slideshow:false,
autoplay_slideshow: false});
$(".image
a[rel^='prettyPhoto']").prettyPhoto({animation_speed:'normal',
theme:'dark_rounded', social_tools:false, slideshow:false,
autoplay_slideshow: false});
});
</script>
</body>
</html>
Concluzie
La finalul acestui proiect, nu numai c mi-am verificat cunotinele
dobndite n cei patru ani de liceu la disciplina informatic, dar am reuit i
s aflu lucruri noi n acest domeniu.
Pentru a hotr asupra celor mai nimerite metode de prezentare i
structurare ale unei pagini de web, am consultat nu numai un numr mare
de site-uri i template-uri, dar i o serie de documentaii care prezentau
posiblitile limbajului HTML, tipurile de aplicaii posibile sau arhitectura unei
pagini web.
Din documentaia folosit nu au lipsit nici crile de hrtie, cumprate
sau mprumutate de la bibliotec. Dintre acestea, cele mai mari probleme leau creat cele n limba englez, dar, odat ce am depit aceste dificulti, am
realizat c acestea au fost i cele mai bune, datorit limbajului lor nealterat
de traducere.
n sfrit, dup ce am stabilit toate detaliile preliminarii, munca
efectiv a decurs fr alte probleme, datorit configurrii dinamice a site-ului
i a unei bune cunoateri a limbajuli HTML.
Produsul finit este una din realizrile mele n acest an, satisfcnd
toate exigenele la care a fost supus pn acum. Fiind uor de utilizat, de
actualizat i de modificat, reprezint un site fiabil att din punctul de vedere
al utilizatorului ct i al programatorului.
Bibliografie
1. Imagini
http://www.youramazingplaces.com/
http://www.boredpanda.com/
2. Clipuri video
http://www.citatepedia.ro/
3. Informatii
http://wikipedia.com/

Partea Scrisa

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Partea Scrisa

Încărcat de

Drepturi de autor:

Formate disponibile

Colegiul National M.

Bazele unei pagini HTML

Structura documentelor HTML

Structura unui document HTML, exemplu:

Titlul acestei pagini este Leonardo da Vinci.

Titlul de nivel 1. {Heading 1}

Titlul de nivel 2. {Heading 2}

Titlul de nivel 3. {Heading 3}

<h3>Titlul de nivel 3. {Heading 3}</h3>

Titlul de nivel 4. {Heading 4}

Titlul de nivel 5. {Heading 5}

Titlul de nivel 6. {Heading 6}

n momentul suprapunerii cursorului mouse-ului cu imaginea indic

n continuare urmeaz codul HTML al primei pagini (index.html):

<strong>"Inimile</strong> animate de sentimente

<a href="images/col/11.jpg" class="item"

<b>Joseph Nicphore Nipce</b>, un mic fizician din provincie, a

aduce cu sine cteva probleme: strzile

n anul 1848, Felix Tournachon, cunoscut mai bine sub numele

George Eastman reuseste n anul 1884 s realizeze primul negativ

Ideea de fotografie color a circulat nc de la aparitia

alb/negru cu substane cromatice sensibile numai la culorile

S-ar putea să vă placă și