Atest Partial

Cuprins

Argument………………………………………………………………2

HTML-Noţiuni de bază…………………………………………..3

CSS-Noţiuni de bază………………………………………………4

Structura aplicaţiei………………………………………………..15

1

Argument

Motivul pentru care am ales aceasta tema,pentru lucrarea de competente profesionale

este in principal fascinatia si iubirea pe care o am inca din copilarie pentru feline.

Pisica este considerata a fi al doilea animal de companie ca raspandire, dupa caine. Spre

deosebire de acesta, pisica a ramas un animal independent. In zilele noastre, mai mult de 42 de

milioane de pisici traiesc in cadrul familiilor din Europa. Popularitatea pisicii are mai multe origini.

In primul rand, prin fizicul si atitudinea sa, pisica simbolizeaza frumusetea si seductia.

In al doilea rand, micuta felina este admirata datorita unor trasaturi de caracter foarte puternice:

independenta, personalitate si naturalete. In al treilea rand, caracteristicile naturale (talie mica,

autonomie, curatenie) fac din pisica companionul ideal pentru persoanele care muncesc sau cele

care locuiesc intr-un apartament.

2

HTML-Noţiuni de bază

HTML este prescurtarea de la Hyper Text Mark-up Language si este codul care sta la baza paginilor web.

Paginile HTML sunt formate din etichete sau tag-uri și au extensia „.html” sau „.htm”. În marea lor majoritate aceste etichete sunt pereche, una de deschidere <eticheta> și alta de închidere </eticheta>, mai există și cazuri în care nu se închid, atunci se folosește <eticheta />.

Browserul interpretează aceste etichete afișând rezultatul pe ecran. HTML-ul nu este un limbaj case sensitiv ( nu face deosebire între litere mici și mari.)

Pagina principala a unui domeniu este fisierul „index.html” respectiv „index.htm”. Această pagină este setată a fi afișată automat la vizitarea unui domeniu.

De exemplu la vizitarea domeniului www.nume.ro este afișată pagina www.nume.ro/index.html.

Unele etichete permit utilizarea de atribute care pot avea anumite valori: <eticheta atribut="valoare"> ... </eticheta>

Componența unui document HTML este:

1. versiunea HTML a documentului 2. zona head cu etichetele <head> </head>3. zona body cu etichetele <body> </body> sau <frameset> </frameset>

3

CSS-Noţiuni de bază

CSS, prescurtarea de la Cascading Style Sheets, sunt etichete folosite pentru formatarea paginilor web (de exemplu formatare text, background sau aranjare in pagina, etc.).

Beneficiile sintaxei CSS sunt:

formatarea este introdusa intr-un singur loc pentru tot documentul editarea rapida a etichetelor datorita introducerii intr-un singur loc a etichetelor se obtine o micsorare a codului

paginii, implicit incarcarea mai rapida a acesteia

Sintaxa CSS este structurata pe trei nivele:nivelul 1 fiind proprietatile etichetelor din documentul HTML, tip inlinenivelul 2 este informatia introdusa in blocul HEAD, tip embeddednivelul 3 este reprezentat de comenzile aflate in pagini separate, tip externe

Cea mai mare importanta (suprascrie orice alt parametru) o are sintaxa de nivelul 1 iar cea mai mica importanta o are cea de nivelul 3.

Folosirea unui fisier extern sau nivel 3 care sa contina comenzi CSS este foarte practic deoarece poate fi utilizat in mai multe situatii (mai multe fisiere HTML pot folosi acelasi fisier extern CSS) eliminand timpul necesar introducerii codului corespunzator in fiecare pagina si totodata editarea lor intr-un singur loc pentru mai multe fisiere. Extensia acestor fisiere este .css.Legatura paginilor HTML cu fisierele extene CSS se face prin introducerea urmatoarei linii:

<link rel="stylesheet" type="text/css" href="fisier_css.css">

Atributele indica urmatoarele: rel - fisierul este tip styleshhettype - tip text ce contine comenzi CSShref - fisierul sau adresa fisierului CSS.

Comenzile de nivel 2 sau embedded sunt cele gazduite oriunde intre perechea de etichete <head> si </head> conform sintaxei:

<style type="text/css"></style>

Unde style -specifica unde incepe si unde se termina blocul CSS iar type este folosit pentru a ascunde de browserele vechi, care nu cunosc sintaxa CSS, continutul blocului style.

Comenzile CSS de nivel 1 sau inline sunt cele mai folosite, ele suprascriind orice alte comenzi CSS. Sunt amplasate in interiorul etichetelor HTML aflate in zona BODY si au sintaxa:

4

<eticheta style="codul CSS dorit">...textul sau obiectul asupra caruia este aplicat codul CSS...</eticheta>

Este permisa folosirea comentariilor in CSS astfel:

/* Acesta este un comentariu in CSS */

div, span si etichete CSS

Eticheta <div> functioneaza asemanator cu eticheta <p>, putand gazdui comenzi CSS aplicabile la un bloc sau mai multe din continutul paginii.

Eticheta <span> este similara cu eticheta <font> (pe cale de a fi eliminata de consortiul W3C) aplicandu-se elementelor dintr-un paragraf.

Etichetele CSS sunt cunoscute sub numele de elemente sau selectori avand un layout asemanator cu etichetele HTML.

eticheta HTML<eticheta argument="valoare">

eticheta CSSelement{argument: valoare;}

elementul poate fi o eticheta HTML, un id sau un class, iar argumentul si valoarea sunt aceleasi ca in HTML.

Exemplu: acelasi text realizat in HTML si in HTML cu CSS

HTML<font color="#00FF00"><p>Text verde</p></font>

HTML cu CSS<p style="color: #00FF00;">Text verde</p>

Comenzile de CSS pot fi plasate si in zona HEAD rezultand o functionare identica, chiar mai mult, aceleasi comenzi putand fi folosite in mai multe locuri in aceeasi pagina.

Exemplu: comenzi CSS incluse in zona HEAD

<html><head><title>Exemplul 1_1</title><style type="text/css"></style>

5

</head><body><p>Text verde</p>Text negru<p>Text verde</p></body></html>

Stiluri pentru fonturi

Aceste elemente specifica argumentul fontului care se asociaza unui element HTML fiind incluse ori in zona HEAD ori in interiorul etichetei dorite.In cazul de fata se remarca asemanarea cu eticheta font din HTML care accepta argumentele type, style, size si weight.

font-familyfont-family este de fapt o lista de fonturi din care browserul va folosi in ordinea in care le recunoaste (primul folosit va fi primul din lista, daca nu este recunoscut il foloseste pe al doilea si tot asa mai departe). Este recomandat ca ultima pozitie din lista sa fie un font generic (de exemplu serif, sans-serif sau monospace). In situatia in care numele fontului este format din doua cuvinte se incadreaza intre ghilimele duble pentru ca browserul sa le interpreteze impreuna.

Exemplu: CSS introdus in HEAD aplicat etichetei p. Browserul nu recunoaste primele doua fonturi din lista, folosindu-l pe al treilea

<html><head><title>Exemplu 3_1</title><style type="text/css"></style></head><body><p>Text scris cu cu fontul Arial</p>Text negru<p>Text scris cu cu fontul Arial</p></body></html>

Exemplu: acelasi exemplu dar CSS introdus in eticheta p din HTML

<html><head><title>Exemplu 3_2</title></head><body><p style="font-family: font1,font2,arial;">Text scris cu cu fontul Arial</p>Text negru<p style="font-family: font1,font2,arial;">Text scris cu cu fontul Arial</p>

6

</body></html>

font-size

Este parametrul prin care stabilim dimesiunea fontului, exprimat in pixeli (px), puncte (pt), keywords sau procente. Are o functionare asemanatoare cu eticheta <font>.

Exemplu: CSS introdus in HEAD aplicat etichetei p, dimensiunea exprimata in pixeli

<html><head><title>Exemplu 3_3</title><style type="text/css"></style></head><body><p>Text scris cu font de 20px</p>Text negru</body></html>

Pentru dimensiunea exprimata in puncte folosim acelasi exemplu inlocuid px cu pt.

Procentele sunt o alta valoare pe care o poate lua font-size. Aceasta modalitate poate fi vizualizata diferit de browsere diferite.Ca verificare folositi acelasi exemplu schimband 20px cu 200%.

font-style

font-style este folosit pentru a adauga caracteristica italica fontului. Poate lua valorile normal si italic.

<style type="text/css"></style>

font-weight

font-weight este paramerul care stabileste grosimea caracterului putand lua valorile numerice de la 100 la 900 sau BOLD, BOLDER, LIGHTER.

<style type="text/css"></style>

7

Compunerea stilurilor

Stilurile prezentate anterior pot fi folosite simultan in interiorul aceeasi etichete fiind despartite de caracterul ; (punct si virgula).

Exemplu: folosirea unui stil compus aplicat etichetei p

<html><head><title>Exemplu 3_4</title><style type="text/css"></style></head><body><p>Text scris cu Arial, 20px, italic, 800</p>Text negru</body></html>

Stiluri pentru text

Aliniere

text-align pozitioneaza pe orizontala obiecte (de exemplu text sau imagini) si admite valorile left, right si center ca si eticheta align din HTML.

In continuare este prezentat ca exemplu codul folosit in HEAD, aplicat etichetei p:

<style type="text/css"></style>

Exemplu: prin intermediul lui div aplicam stilul pecentru imaginii si textului

<html><head><title>Exemplu 4_1</title><style type="text/css"></style></head><body><div class="pecentru"><img src="poza.jpg"></div>Text neformatat<div class="pecentru">Text formatat</div></body></html>

vertical-align este folosit pentru alinierea pe verticala a obiectelor dintr-un tabel si poate lua valorile: top, middle si bottom.In exemplul de mai jos este creat clasa sus care va putea fi aplicat elementelor <td> ale tabelului

<style type="text/css"></style>

float este folosit pentru alinierea textului cu imaginile si poate avea valorile: left si right. In functie de valoarea aleasa imaginea va fi aliniata in partea opusa a paginii.

Exemplu: cream clasa auto si o aplicam inaginii

<html><head><title>Exemplu 4_2</title><style type="text/css"></style></head><body><img src="poza.jpg" class="auto">Textul se aliniaza la dreapta, iar poza la stanga datorita clasei "auto".</body></html>

Tabulare

text-indent este folosit pentru alinierea textului in interior avand valori exprimate in inci (in), centimetri (cm) sau pixeli (px).In exemplul de mai jos text-indent este aplicat etichetei p deplasand textul cu 10 pixeli in interior

9

<style type="text/css"></style>

Decorare

text-decoration adauga sublinierea sau taierea blocului text asociat si poate avea valorile underline, line-through sau none.

Exemplu: stilul asociat etichetei p este prezentat in HEAD

<html><head><title>Exemplu 4_3</title><style type="text/css"></style></head><body>Text normal<p>Text subliniat</p></body></html>

Culoare

color defineste culoarea textului dintr-o zona sau intraga pagina.

Exemplu: stilul asociat etichetei p este prezentat in HEAD

<html><head><title>Exemplu 4_4</title><style type="text/css"></style></head><body>Text normal<p>Text albastru</p></body></html>

10

Stiluri pentru legaturi

In HTML culoarea legaturilor poate fi stabilita prin atributele LINK, ALINK si VLINK declarate in interiorul etichetei BODY.Acelasi lucru si chiar mai mult poate fi realizat folosind sintaxa CSS.

Exemplu

<html><head><title>Exemplu 4_5</title><style type="text/css"></style></head><body>Text normal<a href="exemplu4_4.html">link</a> catre exemplul 4_4</body></html>

a defineste stilul general pentru legaturaa:link defineste stilul legaturii nevizitatea:visited defineste stilul legaturii vizitatea:active defineste stilul legaturii active (nu prea se foloseste)a:hover defineste stilul cand mouse-ul este deasupra legaturii

Stiluri pentru background

Background culoare sau imagine poate fi definita pentru intreaga pagina, o celula a tabelului sau pentru text.

Culoare de fond

11

background-color defineste culoarea de fond si poate fi asociat oricarei etichete HTML.

Exemplu: definim un stil pentru intreg BODY si un altul pentru eticheta p

<html><head><title>Exemplu 5_1</title><style type="text/css"></style></head><body>Text normal<p>Text cu background rosu</p></body></html>

Imagine de fond

Imaginile pot fi folosite ca fundal in spatele intregii pagini, a unui obiect sau a textului.background-image asociaza o imagine ca fundal unui obiect.

Exemplu: definim un stil pentru eticheta p

<html><head><title>Exemplu 5_2</title><style type="text/css"></style></head><body>Text normal<p>Text cu imagine de fond</p></body></html>

Repetare

12

Functie de dimensiunile obiectului caruia ii sunt asociate imaginile de fond se repeta pe orizontala si verticala.Repetarea poate fi controlata prin parametrul background-repeat care poate lua valorile:repeat-x imaginea se repeta pe orizontalarepeat-y imaginea se repeta pe verticalano-repeat imaginea nu se repeta

Exemplu: imaginea nu se repeta sub eticheta p

<html><head><title>Exemplu 5_3</title><style type="text/css"></style></head><body>Text normal<p>Text cu imagine de fond</p></body></html>

Pozitia

In mod normal imaginea de fundal incepe din coltul stanga sus al obiectului asociat, dar acest lucru poate fi controlat prin comanda CSS background-position.Sunt acceptate doua valori:in prima pozitie poate fi: top, center, bottom, percentage sau pixelin a doua pozitie poate fi: right, center, left, percentage sau pixel

Exemplu: imaginea de fundal este asociata etichetei BODY fiind amplasata top si center, fara repetare

<html><head><title>Exemplu 5_4</title><style type="text/css"></style></head><body>Text normal</body>

13

</html>

14

Structura aplicatiei

Aplicatia este usor de folosit pentru orice fel de utilizator.Stilul creat ofera informatii despre cateva rase de pisici si ,de asemenea, si cateva curiozitati.

Am preferat sa imi definesc propriul stil in CSS pentru a lucra mai usor cu el.

Pagina principala:

Codul html:

<html>

<head>

<style>

body{background-color:#669999;

background-image:url("forgotten_episodes_by_kittycrime-d4m07oo.jpg") ;

background-position: center top;

15

background-repeat: no-repeat;

background-size: cover;}

div

{

background-image:url("images1.jpg");

border:no border;

width:auto;

position:absolute;

left:106.5pt;

right:100pt;

top:80pt;

text-align:center;font-family:"Monotype Corsiva";color:#666699;font-size:25px;

}

h1{color:#6600CC;font-size: 70px;font-family:"Monotype Corsiva";text-align: center;

text-shadow: 1px 2px #000000;

}

p{color:#6600CC;font-size: 50px;font-family:"Monotype Corsiva";text-align:center;

text-shadow: 1px 2px #000000;text-align:bottom;

16

}

</style></head>

<body>

<h1> Lumea pisiceasca </h1>

<div><b>"Daca esti demn de afectiunea ei, o pisica iti va fi o buna prietena, dar niciodata o sclava".

Theophile Gautier</b></div>

<br><br><br><br><br><br><br>

<p><a href="index.html" >Rase de pisici</a></p>

<p><a href="curiozitati.html">50 de curiozitati despre pisici</a></p>

</body>

</html>

Pentru pagina Rase de pisici am folosit tag-ul <frameset>. Frame-urile sunt folosite pentru a afisa mai

multe documente .html intr-o fereastra. In general frame-urile se folosesc pentru a afisa un meniu, pe de o

parte ,iar continutul, pe de o alta parte. Atunci cand cineva da un click pe un link din meniu se va deschide o

alta pagina in partea de continut.

Cod html:

<frameset rows="30%,*" >

<frame name="f1" src="fisier1.html"frameborder="0" noresize="noresize">

<frameset cols="20%,*" >

<frame name="f2" src="fisier2.html" frameborder="0"noresize="noresize">

<frame name="f3" src="fisier3.html"frameborder="0"noresize="noresize">

</frameset>

17

</frameset>

Frameset-ul contine 3 fisiere :

Primul fisier ( fisier1.html) contine o imagine:

<html>

<head>

<style>

body

{background-image: url("love.jpg");

background-repeat:no-repeat;

background-position: center top;

background-size:450px 170px;

}

18

</style>

</head>

<body>

</body>

</html>

Al doilea ( fisier2.html ) fisier este constituit dintr-o lista nesortata cu tag-ul <ul> si link-uri(<a>)

care trimit in fisierul 3 catre detalii despre fiecare rasa de pisica:

<ul class="a">

<li><a href="fisier3.html#a1" target="f3">Pisica Albastru de Rusia (Russian Blue)</a></li>

<li><a href="fisier3.html#a2" target="f3">Maine Coon</a></li>

<li><a href="fisier3.html#a3" target="f3">Pisica Birmaneza</a></li>

<li><a href="fisier3.html#a4" target="f3">Pisica Angora Turceasca</a></li>

<li><a href="fisier3.html#a5" target="f3">Pisica Siameza</a></li>

<li><a href="fisier3.html#a6" target="f3">Pisica Bengaleza</a></li>

<li><a href="fisier3.html#a7" target="f3">Pisica Sfinx</a></li>

<li><a href="fisier3.html#a8" target="f3">Pisica American Bobtail</a></li>

<li><a href="fisier3.html#a9" target="f3">Scottish Fold</a></li>

<li><a href="fisier3.html#a10" target="f3">Pisica Norvegiana de Padure</a></li>

</ul>

19

Fisierul3.html contine cele 10 rase de pisici cu caracteristicile specific pe care le-am incadrat in

tabele.

<table>

<tr ><th rowspan="2"><p><h2>Tara de origine:</h2> Rusia

<h2>Speranta de viata:</h2> peste 15 ani

<h2>Sanatate:</h2> Albastru de Rusia este o rasa sanatoasa. Nu are probleme de sanatate

specifice, dar, ca si in cazul celorlalte rase de pisici, incepand cu varsta de opt ani, este recomandat

sa mergeti anual cu pisica la un control de rutina, incluzand curatarea dintilor si analize ale sangelui

pentru ficat si rinichi.

<h2>Energie:</h2> ridicata

<h2>Compatibilitate cu alte pisici:</h2> medie

<h2>Compatibilitate cu alte animale:</h2> medie

<h2>Compatibilitate cu copiii:</h2> medie

<h2>Cum arata pisica Albastru de Rusia?</h2>

Aceasta felina se regaseste in grupul pisicilor cu par scurt, matasos, cu "blana dubla". Primul

strat este moale si fin, de aceeasi dimensiune cu stratul superior care are culoarea albastru-

argintiu. Doar pisica Albastru de Rusia si Chartreux au acest tip de blana. Are trupul lung, musculos,

blana deasa si fina la atingere, ochii inchisi la culoare sau verde smarald. Petele albe pe blana sunt

considerate defecte in expozitiile de feline. Adeseori pisicile Russian Blue sunt confundate cu

British Shorthair sau chiar Korat.

<h2>Temperament</h2>

Fricoasa, linistita, calma, iubitoare, este o pisicuta care se adapteaza extrem de usor

mediului in care este crescuta. Se ataseaza foarte mult de stapani si este prin excelenta, o pisicuta

de apartament. O trasatura specifica rasei este inteligenta superioara altor rase si abilitatea de a

20

linisti oamenii, simtind emotiile umane. Pisica Albastru de Rusia poate fi invatata sa joace aport, e

extrem de loiala stapanului si se intelege bine cu alte rase de pisici si alte animale de companie.

</p></th>

<th ><img src="Albastru de Rusia.jpg" ></a></th></tr>

<tr><td><iframe src="http://www.youtube.com/embed/RtI7UgN3bxQ" width="450"

height="350"></iframe></td></tr></table>

La fiecare descriere am adaugat si cate un video cu ajutorul tag-ului <iframe>.

Pagina 50 de curiozitati despre pisici este organizata intr-un tabel pe doua coloane,iar

textul este incadrat intr-un <div> pentru a fi scos in evidenta si a se citi mai usor.

<div>

<table>

<tr><td><p>1. Exista mai mult de 500 de milioane de pisici domestice in lume</p></td>

<td><p>26. Daca pisicuta refuza sa bea apa de la robinet, inseamna ca aceasta contine prea

mult clor sau alte minerale.</p>

21

<p><img src="apa.jpg" width="250" height="250"></p></td></tr>

<tr><td><p>2. Inima unei pisici bate de doua ori mai repede decat a unui om</p></td>

<td><p>27. Pisicile nu pot supravietui daca beneficiaza de un meniu exclusiv vegetarian.</p>

</td></tr>

<tr><td><p>3. Cea mai mare rasa de pisici domestice este Ragdoll. Cea mai mica rasa de pisici esre

Singapura.</p>

<p> <img src="Ragdoll.jpg" width="300" height="250">&nbsp &nbsp <img src="Singapura-Cat.jpg"

width="300" height="250"></p></td>

<td><p>28. Nu ii da pisicutei hrana pentru catei. Pisicile au nevoie de 5 ori mai multe proteine

decat cateii.</p></td></tr>

<tr><td><p>4. Aproape toate pisicile Calico sunt femele.</p>

<p><img src="pisica calico.jpg" width="300" height="250"></p></td>

<td><p>29. Pisicile dorm in medie 16 ore pe zi.

</p>

<p><img src="f.jpg" width="300" height="250"></p></td></tr>

22

Bibliografie

https://ro.wikipedia.org

http://www.w3schools.com

www.animalutul.ro/pisica/rase-pisici

www.zooland.ro

23

Documents

Atest Partial