Document a Tie atestat

Colegiul National Militar “Dimitrie Cantemir” - 2015

Lucrare de atestat la informatica

Profesor indrumator: Elev:

Stanciu Diana Chirita Alexandra

1


Anatomia omului

2


CUPRINSCUPRINS

Motivatia temei alese.........................................Motivatia temei alese.........................................44

Despre HTML & CSS ........................................5Despre HTML & CSS ........................................5

WPM....................................................................21WPM....................................................................21

Index ...................................................................23Index ...................................................................23

Screenshot .........................................................26 Screenshot .........................................................26

Bibliografie .......................................................30 Bibliografie .......................................................30

3


Motivatia temei aleseMotivatia temei alese

Mi-am ales aceasta tema deoarece oricât de mult am progresat înMi-am ales aceasta tema deoarece oricât de mult am progresat în înţelegerea propriului nostru corp, a alcătuirii şi funcţiilor lui, trupul omenescînţelegerea propriului nostru corp, a alcătuirii şi funcţiilor lui, trupul omenesc rămâne încă, din multe puncte de vedere, un mister al evoluţiei. Printre altele,rămâne încă, din multe puncte de vedere, un mister al evoluţiei. Printre altele, suntem adesea martorii unor reacţii şi comportamente foarte banale în aparenţă,suntem adesea martorii unor reacţii şi comportamente foarte banale în aparenţă, dar care, la o investigare mai atentă, sunt cu adevărat misterioase: habar n-avemdar care, la o investigare mai atentă, sunt cu adevărat misterioase: habar n-avem care sunt originile şi scopul lor. Avem, desigur, ipoteze, dar niciuna nu estecare sunt originile şi scopul lor. Avem, desigur, ipoteze, dar niciuna nu este unanim acceptată, iar reacţiile respective rămân în continuare nişte enigme.unanim acceptată, iar reacţiile respective rămân în continuare nişte enigme.

Iată, de pildă, sughiţul; ştim ce este – o contracţie involuntară aIată, de pildă, sughiţul; ştim ce este – o contracţie involuntară a muşchiului numit diafragma, care desparte cavitatea toracică de cea abdominalămuşchiului numit diafragma, care desparte cavitatea toracică de cea abdominală – dar de ce apare el, asta nu ştim încă. Putem doar să presupunem şi să încercăm– dar de ce apare el, asta nu ştim încă. Putem doar să presupunem şi să încercăm apoi să găsim argumente care să ne confirme presupunerile.apoi să găsim argumente care să ne confirme presupunerile.

Organismul uman, ca orice fiinţă vie, există graţie corelării fine şiOrganismul uman, ca orice fiinţă vie, există graţie corelării fine şi perpetue a tuturor structurilor şi proceselor sale, cu scopul realizării funcţiilorperpetue a tuturor structurilor şi proceselor sale, cu scopul realizării funcţiilor acestora. El constituie un sistem ierarhizat, ce dispune de sisteme de autoreglareacestora. El constituie un sistem ierarhizat, ce dispune de sisteme de autoreglare integrate. Deşi majoritatea funcţiilor sunt îndeplinite de structuri specializate,integrate. Deşi majoritatea funcţiilor sunt îndeplinite de structuri specializate, acestea nu acţionează izolat, ci în strânsă dependenţă de celelalte.acestea nu acţionează izolat, ci în strânsă dependenţă de celelalte.

4


DESPRE HTML & CSSDESPRE HTML & CSS

NOTIUNI GENERALE

Ce este limbajul HTML ?

HTML nu este un limbaj de programare.HTML s-a dezvoltat ca un subdomeniu al SGML(Standard Generalized Markup Language) care este un limbaj de marcare mai avansat si a fost mult timp favoritul DoD(Department of Defense).Problema schimbului de informatie intre doua sau mai multe calculatoare este o problema extrem de complexa. Rezolvarea acestei probleme implica existenta unor "reguli de comunicare" pe care calculatoarele sa le respecte. O comunicare reala intre doua parti - fie ele calculatoare sau nu - se bazeaza pe faptul ca informatia oferita de una dintre parti poate fi preluata si mai apoi inteleasa de catre cealalta. Regulile dupa care doua calculatoare care ruleaza sub diferite sisteme de operare comunica sunt stabilite de catre protocoale. Despre acestea am vorbit pe scurt in capitolul precedent. Dar in afara acestor reguli mai apare nevoia existentei unui "limbaj" pe care ambele calculatoare sa-l inteleaga. In WWW acesta este limbajul HTML.Redus la esenta, HTML (Limbajul de Marcare HiperText) este alcatuit dintr-un set de marcaje, coduri speciale inserate in continutul unui text, care ofera unui program numit interpretor de HTML informatii despre modul de formatare a continutului unui document si despre legaturile acestuia cu alte fisiere.

Elemente de marcare

Elementele de marcare sunt principalele componente ale limbajului HTML. Ele apar in document sub forma de etichete (tag-uri) sau controale HTML. Numele elementului apare in controlul de inceput (sub forma <nume-element>) si in cel de sfarsit (sub forma </nume-element>). Exemplu: <BODY> si </BODY>

5


Portiunea din document incadrata de controalele HTML se mai numeste continutul elementului marcat si este partea de document asupra caruia actioneaza respectivul mod de formatare.Anumite elemente nu necesita etichete de sfarsit (Ex: P), iar altele nu au etichete de sfarsit, in general pentru ca nu au un continut pe care sa-l incadreze (Ex: BR). Exista, de asemenea, elemente prezente in document care pot sa nu fie marcate cu ajutorul etichetelor, prezenta lor in cadrul documentului fiind implicita (Ex: BODY).Limbajul HTML nu face distinctie intre literele mari si literele mici ale alfabetului. De aceea formularile <BR>, <br> sau <Br> desemneaza acelasi control. Atribute

Atributele reprezinta proprietati ale elementelor de marcare scrise sub forma unor perechi de nume si valori in interiorul etichetei de inceput, dupa numele elementului referit. Exemplu: <H1 id = "Paragraful 1" color = "blue"> Prezenta ghilimelelor la valorile atributelor este optionala. Fiecare control HTML are anumite atribute cu valori presetate care pot fi modificate de catre creatorul documentului conform dorintei acestuia. Ele pot fi, de asemenea, modificate dinamic, in timpul interactiunii cu utilizatorul, cu ajutorul scripturilor. Dar despre ele, mai tarziu... Atributele ale caror valori sunt de tip boolean (adica adevarat sau fals) sunt setate in felul urmator: - absenta lor in eticheta de inceput a marcajului echivaleaza cu valoarea false presetata - prezenta lor echivaleaza cu setarea valorii true

Exemplu:Formularea <option selected = "selected"> sau <option selected> marcheaza atribuirea valorii true atributului selected, atribut al elementului option.

Daca valoarea unui atribut nu este una valida ea va fi ignorata.

Referinte de entitati Pentru a introduce in continutul documentelor HTML unele caractere care nu fac parte din alfabetul limbii engleze, numite si caractere speciale, (cum ar fi è, ß sau ®) se folosesc marcaje speciale numite referinte de entitati sau referinte de caracter. Spre deosebire de controalele de marcaj despre care am vorbit in sectiunile anterioare,

6

referintele de entitate nu sunt incadrate de caracterele "<" si ">". Ele incep intotdeauna cu caracterul ampresand "&" urmat de un text in stransa legatura cu caracterul pe care il reprezinta sau un cod numeric si se termina cu caracterul ";".De asemenea, caracterele folosite in marcajele HTML (<, >, &) se pot insera in cadrul documentului numai cu ajutorul referintelor de entitate.

Iata cateva din caracterele speciale, impreuna cu marcajele care le reprezinta: & sau &#32 = &< sau &#60 = <> sau &#62 = >" sau &@34 = "® = ®

Comentarii

Reprezinta texte care apar in fisierul sursa HTML, dar care nu vor fi afisate de catre browser catre utilizator. Ele au rolul de a expune diferite aspecte legate de document in vederea realizarii unui fisier sursa cat mai clar si mai usor de inteles si corectat. Comentariile sunt incadrate de marcajele "". E foarte important ca in interiorul comentariului sa nu existe secventa de caractere "--" deoarece aceasta genereaza confuzie.

Exemplu:

 Alinierea Pentru a specifica modul in care un element (antet,imagine,tabel,etc) va fi pozitionat pe orizontala relativ la elementul "container " care il contine se foloseste atributul align. Valorile acordate acestui atribut pot fi: left - pentru alinierea la stanga center - pentru pentru pozitionarea centrata right - pentru alinierea la dreapta

Implicit, alinierea se realizeaza la stanga, cu exceptia cazului in care elementul de pozitionat contine text a carui directie de scriere este de la dreapta la stanga, optiune realizata prin setarea in interiorul controlului a atributului dir la valoarea "rtl" (Right-To-Left). In acest caz

7


alinierea implicita este la dreapta. Pentru a determina alinierea pe verticala a unui element in cadrul elementului container se foloseste atributul valign cu urmatoarele valori posibile: middle - pentru pozitionarea centrata top - pentru alinierea la partea de sus a containerului bottom - pentru alinierea la partea de jos a containerului Culorile Valorile atributelor referitoare la culorile textului, fondului sau ale altor elemente se pot exprima fie prin codul hexazecimal al culorii respective, fie prin numele uneia dintre cele 16 culori "sigure", adica acele culori care vor fi recunoscute si afisate de majoritatea calculatoarelor.Exprimarea numerica se realizeaza prin codul RGB ( adica RED-GREEN-BLUE ) al culorii.Codul este alcatuit din 3 numere cuprinse intre 0 si 255 scrise in baza 16, fiecare exprimand prezenta cantitativa a uneia dintre cele trei nuante care definesc codul culorii respective.

Exemplu: <P style="color:#ff00cc"> Este de preferat ca atunci cand utilizati culori sa apelati la una din cele 16 culori numite "sigure". Iata un tabel cu numele si codul lor:Aqua #00ffff Black #000000Blue #0000ffFuchsia #ff00ffGray #808080Green #00ff00Lime #008000Maroon #800000Navy #000080Olive #808000Purple #800080Red #ff0000Silver #c0c0c0Teal #008080White #ffffffYellow #ffff00

8

Dimensiunile

Dimensiunile unor elemente prezente in documentul HTML se pot preciza in trei moduri:

a.Dimensiunea absoluta este referita in pixeli. De exemplu o exprimare de forma "width = 300" denota ca un anumit element are latimea de 300 pixeli

b.Dimensiunea relativa (procentuala) este referita in procente. Astfel textul "width = 50%" exprima faptul ca elementul referit va avea ca latime jumatate din latimea disponibila a elementului in care este incadrat.

c.Dimensiunea proportionala (multidimensiunea) este folosita atunci cand doua sau mai multe elemente impart un anumit numar de pixeli disponibili. Ea se exprima sub forma "i*", unde i este un numar care arata cate "parti" din total sunt revendicate. De exemplu, pe un spatiu de 60 de pixeli disponibili, dimensiunile notate 1*, 2*, 3* insumeaza 6 unitati in care spatiul disponibil va fi impartit. Fiecare unitate contine 10 pixeli. Astfel ca cele trei dimensiuni exprimate mai sus reprezinta 10 pixeli, 20 pixeli si, respectiv, 30 pixeli.

Valori data-ora

Formatul pentru scrierea acestor valori este : YYYY-MM-DDThh:mm:ssTZD unde YYYY - reprezinta anul scris cu 4 cifre MM - reprezinta luna (Ianuarie = 01, .., Decembrie = 11) DD - reprezinta ziua din luna, cu valori de la 01 la 31 T - ramane caracter scris cu litera mare pentru a marca inceputul scrierii orei hh - repreinta ora scrisa cu doua cifre, de la 00 la 23. Nu se admit formulari care contin AM sau PM. mm - reprezinta minutele cu valori intre 00 si 59. ss - reprezinta secundele cu valori intre 00 si 59. TZD - reprezinta precizarea fusului orar si poate lua urmatoarele valori: "Z" pentru Coordinated Universal Time (UTC)+hh:mm pentru un fus orar in avans cu hh ore si mm minute fata de UTC.-hh:mm pentru un fus orar in devans cu hh ore si mm minute fata de UTC.

Exemplu:

2015

1994-11-05T08:15:30-05:00

Coduri de limbaje

Pentru a specifica limba in care un anumit text este scris se foloseste atributul lang a carui valoare este codul de limbaj al tarii respective. Codul de limbaj este alcatuit din doua parti: Cod principal - cu ajutorul caruia se identifica tara in care limbaujul este folosit Subcod (optional) - specifica o versiune a limbajului respectiv Cele doua componente vor fi separate de cracterul "-". Iata cateva exemple: en = limba engleza en-US = limba engleza -varianta americana fr = limba franceza de = limba germana it = limba italiana es = limba spaniola pt = limba portugheza

Structura unui document

Sectiunile unui document HTML

Un document HTML este impartit in trei sectiuni:

a.Sectiunea de informatii HTML b.Sectiunea de antet a documentului c.Corpul documentului

Controalele <HTML> si <HTML> incadreaza antetul si corpul documentului .Ele comunica interpretorului HTML ca blocul de text cuprins intre ele este scris si formatat in limbajul HTML standard.

Prezenta acestor etichete in document este optionala.Structura explicata a unui document HTML:

<html><head>



2015

<title>Structura Documentului HTML</title><META http-equiv="Content-Type" content="text/html;

charset=iso-8859-1"></head><body>Salut. Aceasta este o pagina Web cat se poate de simpla.</body></html>

Sectiunea de informatii Sectiunea de informatii HTML ofera informatii asupra versiunii limbajului HTML folosit. Multe editoare de HTML insereaza automat textul necesar la inceputul documentului Exemplu:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

Antetul documentului

Sectiunea de antet a documentului este incadrata de controalele <HEAD> si </HEAD>. Prezenta celor doua controale in document este optionala, insa ea ajuta la o impartire mai clara a documentului pe sectiuni.Antetul documentului cuprinde, in general, informatii precum titlul documentului (pentru a fi afisat pa baza de sus a a ferestrei programului de navigare sau pentru ca documentul sa poata fi mai usor identificat de catre utilizator), cuvinte-cheie care folosesc motoarelor de cautare de documente, precum si alte informatii legate de documentul creat. Informatiile folosite in aceasta sectiune nu sunt afisate de catre browser, ele avand doar rol informativ.

Astfel:

<TITLE> indica titlul documentului. Textul aflat aici va fi - de obicei- afisat pe bara de titlu al programului de exporare sau va putea fi folosit de utilizatori pentru pastrarea documentului in listele specifice ale acestui program.

<META> si <LINK> ofera asa-numitele meta-informatii despre document declarand anumite proprietati impreuna cu valorile acelor proprietati. Daca valoarea unei proprietati este definita intern se va folosi controlul <META>, iar daca valoarea va fi luata dintr-o locatie oarecare din exterior se va folosi controlul <LINK>. Succesul folosirii acestor doua

2015

controale depinde in mare masura de interpretorul de HTML utilizat de catre utilizator. De exemplu, cu ajutorul elementului META se pot preciza informatiile care vor fi trimise in "header-ul" documentului, adica informatii specifice protocolului HTTP si pe care browserul le "citeste" pentru a pregati afisarea documentului.Se folosesc formularile:

http-equiv= pentru numele informatiei meta content= pentru continutul (valoarea) informatiei respective.

In exemplul de mai jos se foloseste informatia meta Content-Type pentru a preciza:

-tipul documentului -setul de caractere folosit

Tipul documentului pentru un document HTML este - "text/html". Setul de caractere reprezinta o multime de caractere folosite in alfabetul diferitelor limbi, caractere identificate printr-un numar de cod. De aceea, pentru ca browserul sa poata descifra corect informatia pe care o primeste este recomandabil ca acest atribut sa fie specificat in antetul fiecarui document. Seturile de caractere sunt niste standarde stabilite de catre ISO (Organizatia Internationala pentru Standardizare) si reprezinta reguli de codificare a caracterelor. Printre cele mai folosite astfel de seturi aminitim:

-ISO 8859-1 -(sau ISO Latin-1) reprezinta setul care contine cele mai raspandite extensii ale alfabetului latinsi este cel mai des intalnit;

-ISO 8859-5 - alfabetul chirilic; -ISO 8859-6 - alfabetul arab; -ISO 646 - codificarea ASCII restransa (pe 7 biti, adica 128 de

caractere) Exemplu:

<META http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> Pentru alte tipuri de informatii meta cuprinse in antet se va utiliza formularea<META name="[nume proprietate]" content="[valoare proprietate]">

In acest mod se pot specifica informnatii privind autorul paginii respective, sau informatii in scopuri de indexare a paginii de catre

2015

paianjeni sau motoare de cautare Web. Exemplu:

<META name="author" content="Superman"><META name="keywords" content="Sport, fotbal, FIFA">

Despre elementul LINK vom vorbi intr-unul din capitolele urmatoare.

Corpul documentului

Corpul documentului este locul unde se plaseaza continutul efectiv al documentului si este incadrat de controalele <BODY> si </BODY>. Chiar daca marcarea corpului documentului cu cele doua etichete este optionala, folosirea lor va determina o mai mare claritate in impartirea documentului pe sectiuni. Controlul <BODY> poate sa contina atribute referitoare la fondul si marginile documentului sau culoarea textului.

Astfel:

background = "imagine.jpeg" seteaza imaginea de fond a documentului. bgcolor = "#0000ff" seteaza culoare fondului documentului (Aqua).

In cazul in care ambele sunt prezente, browserul cauta fisierul mentionat ca imagine de fond. Daca acesta exista, el va fi afisat si multiplicat pentru a acoperi intreaga suprafata a documentului, culoarea de fond fiind vizibila numai daca fondul imagini este transparent. Daca nu, fondul documentului va fi dat de culoarea setata de catre bgcolor. text = "#ff0000" seteaza culoarea textului existent in document.

Pentru a seta dimensiunile marginilor din stanga si de sus ale documentului se folosesc atributele:

Pentru Internet Explorer: topmargin - pentru marginea de sus leftmargin - pentru marginea din stanga

Pentru Netscape Navigator: marginheight - pentru marginea de sus marginwidth - pentru marginea din stanga

Pentru Internet Explorer exista posibilitatea de a atasa unui document un fond sonor. Aceasta se poate realiza prin folosirea in antetul documentului a elementului BGSOUND. Doua dintre atributele acestuia sunt foarte importante: src - determina fisierul audio care va fi rulat de catre browser la incarcarea documentului in fereastra

2015

loop - determina de cate ori va fi repetata secventa de sunet respectiva. O valoare egala cu -1 determina repetarea continua a sunetului

Exemplu:Document cu imagine de fundal

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html> <head> <title>Document cu imagine si sunet de fundal</title><meta http-equiv=”content-type” content=”text/html; charset=iso-8859-1”><bgsound src=”muzica.mp3” loop=”-1”></head> <body background=”pozamea.jpg” bgcolor=”#ff0000” text=”#800080”>Acest document are o imagine in fundal</body></html>

Exemplu:Document cu setarea culorii fundalului si a dimensiunii

marginilor

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html> <head> <title>Document cu culoare de fond</title><META http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <body bgcolor="#00FFFF" text="#000080" marginwidth=0 marginheight=0 leftmargin=0 topmargin=0> Aceasta pagina are culoarea de fond "aqua". Textul va fi tiparit cu culoare albastra <br> Marginile documentului au fost fixate la <b>"0"</b> prin setari care vor fi acceptate si de Internet Explorer si de Netscape Navigator </body> </html>

In cazul in care in corpul documentului interpretorul HTML gasete o eticheta pe care nu o recunoaste (o eticheta scrisa gresit, inexistenta sau o eticheta de sfarsit care nu are eticheta de inceput corespunzatoare) el nu o va lua in considerare, tiparind doar eventualul continut marcat de eticheta respectiva. Insa aceste etichete "scapate" in

2015

corpul documentului pot provoca diferente semnificative intre forma dorita si cea obtinuta a continutului afectat!

Despre aspectul unui document

Generalitati

In capitolul de fata vom vorbi despre controalele folosite in dispunerea fizica si logica a elementelor care constitue documentul HTML. Trebuie subliniat faptul ca aspectul cat mai atragator al materialului prezentat trebuie insotit si de o prezentare a informatiei cat mai logica si usor de urmarit.

Impartirea documentului in linii si paragrafe

Programele de explorare Web ignora caracterele Enter, taburile si spatiile multiple. Astfel, aspectul documentului afisat utilizatorului nu coincide cu aspectul fisierului sursa. Pentru a obtine asezarea dorita a componentelor documentului in fereastra programului de navigare, se folosesc controalele de separare <BR> si <P> care determina desfasurarea continutului pe linii si paragrafe. Astfel, pentru a marca trecerea la un nou paragraf folositi controlul <P>, iar pentru a marca trecerea la o linie noua folositi controlul <BR>. Aceste doua controale nu necesita marcaj de inchidere (terminare). Pentru a insera in document un numar oarecare de spatii libere se foloseste caracterul special (NonBreakingSpace). Spatiile astfel inserate au proprietatea de a nu permite browserului trecerea la linie noua.Pentru a forta afisarea unei parti de text mai lunga pe o singura linie se mai pot folosi controalele <NOBR> si </NOBR> cu rolul de a marca inceputul si sfarsitul sectiunii de text care va fi afisata pe o singura linie. Nu toate browserele recunosc aceste controale, asa ca - daca se poate - evitati sa le folositi!

Exemplu:Folosirea paragrafelor a liniilor de text si a spatiilor libere

<html><head>

<title>Linii si paragrafe</title></head><body><p>Paragraf1:

2015

Acest text va fi afisat pe o singura linie.<p>Paragraf2:<br>O linie de text<br>Alta linie de text<p> <p> <p> <p> <p>Paragraf3:<br>..dupa 4 linii libere...<p>Paragraf4:<br>Intre cuvinte exista suficient spatiu<p>Paragraf5:<br><nobr>bla-bla-bla-bla bla-bla bla bla bla-bla-bla bla-bla-bla-bla bla-bla bla-bla-bla-bla bla-bla-bla- bla-bla- bla-bla- bla-bla- bla-bla-bla- bla pe o singura linie</nobr></body></html>

Antetele de sectiune

In cazul in care informatia prezentata trebuie impartita in sectiuni si sub-sectiuni, alegerea cea mai naturala este folosirea marcajelor de formatare a subtitlurilor.Titlurile si subtitlurile sectiunilor documentului se vor marca folosind elementele de la H1 la H6, in ordine descrescatoare a importantei, dimensiunea fontului folosit descrescand si ea. La afisare, programul de navigare va lasa linii goale inainte si dupa fiecare marcaj pentru titlu si subtitlu.

Exemplu:Antete de sectiune

<h1>Element H1</h1><H2>Element H2</H2><H3>Element H3</H3><h4>Element H4</h4><h5>Element H5</h5>

2015

<H6>Element H6</H6>

Rigla orizontala

Pentru o mai vizibila impartire a corpului documentului se voloseste rigla orizontala marcata cu controlul <HR>. Prezenta acestui control produce desenarea unei linii orizontale subtiri pe toata latimea documentului.Dimensiunile riglei pot fi controlate cu ajutorul atributelor width si size, care seteaza dimensiunile pe orizontala si, respectiv, pe vericala a liniei in pagina. Pentru a elimina aspectul tridimensiunal al riglei se poate utiliza optiunea noshade care elimina efectul de "umbrire" a riglei.

Exemplu:rigle orizontale

<hr noshade><hr align="center" width="30%"><hr align="center" width="50%"><hr align="center" width="70%"><hr align="center" width="90%"><p> <p> <p><hr align="left" width="50%" size="20" color="#0000FF"></p><hr align="right" width="50%" size="20" color="#0000FF" ></p>

Controlul <Address>

Acest control este folosit de obicei la sfarsitul documentului pentru a plasa informatii utile utilizatorului pentru a contacta autorul paginii sau informatii de copyright.

Exemplu:Folosirea elementului Address

<H1 align="center">Draga cititorule,</H1><p>Bla-bla-bla...<p>Bla-bla-bla...<p>Bla-bla-bla...

2015

<p align="right">Cu drag, <b>Seful</b>!</p><hr><address>Pentru recalmatii contactati-ne la<br>[email protected] </address>

Controalele <DIV> si <SPAN>

Controlul <DIV> este folosit in document pentru a grupa intr-un bloc "logic" o parte din continutul documentului in vederea atribuirii unitare a caracteristicilor legate de stilul de prezentare, sau pentru a identifica respectivul bloc de continut in vederea utilizarii lui de catre scripturile prezente in document. Browserul va trece la line noua inainte si dupa terminarea acestui marcaj.De asemenea acest controle se mai poate folosi alaturi de proprietatile de stil pentru pozitionare pentru a creea in cadrul documentului "straturi" de dimensiuni variabile ce pot fi pozitionate in diferite locatii ale documentului, suprapuse, ascunse sau expuse, in functie de necesitatile designer-ului.

Controlul <SPAN>are rolul de a "extrage" o portiune de document - de obicei inclusa intr-un bloc marcat de controale HTML si care, eventual, are specificate un anumit numar de atribute - pentru a o identifica sau apentru a-i oferi un format de afisare diferit de restul blocului din care face parte.

Exemplu:identificarea blocurilor de text cu ajutorul elementelor Div si

Span

<div style="font-size:14;color:blue;background color:yellow">Elementul Div</div><hr align="right" color="#0000ff" width="50%"><div style="color:red">Certificatul de deces consemneaza la rubrica "Profesia" - fermier. Daca ar fi fost numai atat, azi nu s-ar mai vorbi nimic de <span style = "color:navy">Elementul Span</span>.

Folosirea atributului style

Ultimele versiuni ale limbajului HTML au optat in mod categorig pentru despartirea continutului unui document HTML de forma in care

2015

este el prezentat. Acest lucru este posibil prin utilizarea foilor de stil, a stilurilor definite in antetele documentului, sau prin gruparea proprietatilor legate de forma de prezentare in cadrul unui singur atribut: style.Utilizarea acestuia in interiorul unui control HTML - aproape toate care se pot gasi in interiorul corpului documentului, cu putine exceptii (<Script> sau <Basefont>) se face respectand urmatorul tipar de scriere: <element style ="proprietate:valoare ; proprietate:valoare;..."unde :

-element este numele elementului folosit (ex: H1, Img,Table) -proprietate este numele unei proprietati de stil. Aceste nume nu

coincid in totalitate cu numele proprietatilor marcajelor HTML. De exemplu proprietatea face a morcajului Font devine font-family ca proprietate de stil. Cele mai utilizate proprietati de stil vor fi prezentate in lectia consacrata modelelor de stil.

-valoare este valoarea acordata proprietatii respective. Ea trebuie sa corespunda valorilor posibile ale acestei proprietati.

Creatorii de documente HTML sunt puternic incurajati sa foloseasca proprietatile de stil in locul setarii individuale a fiecarii proprietati in cadrul marcajelor. Trebuie stiut, insa, ca versiunile mai vechi ale programelor de explorare Web nu recunosc nici atributul style, nici marcajul STYLE si nici referintele catre modelele de stil. De aceea, inainte de a folosi una sau alta dintre variante trebuie sa faceti un calcul exact al avantajelor si dezavantajelor pe care fiecare le implica.

Informatii tool-tip Cea mai simpla forma de interactiune a documentului cu utilizatorul o reprezinta afisarea unor informatii foarte scurte despre elementele documentului atunci cand utilizatorul pozitioneaza mouse-ul in spatiul ocupat de elementele respective.Pentru a realiza acest lucru se foloseste proprietatea de stil title, valoarea ecestei proprietati fiind textul informativ afisat in dreptul cursorului odata cu pozitionarea mouse-ului pe elementul care are setata aceasta proprietate.

2015

CASCADE STYLE SHEET

CSS este un acronim provenind din Cascading Style Sheets, care inseamna “foi de stil in cascada” (cea mai apropiata traducere). In documentele W3C, CSS nu e definit ca un nou limbaj, ci ca un mecanism care permite formatarea documentului HTML.CSS-ul nu exclude HTML-ul din pagina web. Nu se poate realiza o pagina web folosind numai CSS, care a fost proiectat astfel incat sa conlucreze cu HTML-ul. Folosind CSS, se ajunge 1.un control mai fin asupra paginii web 2. scaderea dimensiunii in KB a paginii web, atunci cand codul CSS e continut intr-un fisier extern 3. o mai mare comoditate: modificand fisierul CSS extern, modificati simultan toate paginile web in care acesta e inclus 4. efecte mai sofisticate decat cele produse de codul HTML: suprapunerea unei imagini peste alta imagine, a unui text peste alt text, impresia de relief, efectul hover, afisarea unor fonturi mai mari decat h1 si multe altele.

Exemplu de cod :

<!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=iso-8859-1" /><title>Titlu pagina</title></head><body><div id="container">

2015

http://www.w3.org/1999/xhtml

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd

<div id="header"><h1>Titlu site</h1><p>descriere site</p></div> 

<div id="continut"><h1>Titlu articol</h1><p> acesta este continutul, iar acesta este un <a href="#">link</a></div> </div> </body></html>

2015

Web Page Maker

(WPM)

2015

Web Page maker este un program de realizat site-uri usor cu ajutorul codul HTML si CSS. Web Page Maker contine majoritatea elementelor de care este nevoie pentru o pagina web si anume : imagini , sunete , tabele , linkuri , flash , video , iframe , javascript , butoane.Programul suporta si functia drag n drop pentru imagini.Cu ajutorul acestei functii puteti redimensiona o imagine direct din interfata programului.Pe langa astea programul permite utilizarea de foilor de stil in cascada , adica CSS , pentru modul in care vor fii afisate elementele intr-o pagina web .Un alt lucru destul de folositor , este includerea unor template-uri predefinite , adica site-uri web gata construite , singurul lucru care trebuie sa il faceti este sa le adaptati cerintelor dvs.Dupa finalizarea web site-ului creat,il putem salva in format .wss pentru modificari ulterioare sau in putem exporta in format HTML.De asemenea continutul HTML,odata exportat,poate fi modificat dar acest lucru necesita cunostinte HTML.Tot cu Web Page Maker puteti uploada prin ftp continutul site-ului, pe un host , sau daca doriti chiar pe calculatorul personal, daca il folositi ca server web .Daca inainte de a publica site-ul web , doriti sa il vizualizati , Web Page Maker dispune de o optiune , prin care puteti incarca site-ul intr-un browser, pentru o previzualizare.

2015

http://ionutz.net/creati-un-site-de-la-0-folosind-html-tutorial/

Codul indexului

Index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>Coperta</title><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><meta name="generator" content="Web Page Maker (unregistered version)"><style type="text/css">/*----------Text Styles----------*/.ws6 {font-size: 8px;}.ws7 {font-size: 9.3px;}.ws8 {font-size: 11px;}.ws9 {font-size: 12px;}.ws10 {font-size: 13px;}.ws11 {font-size: 15px;}.ws12 {font-size: 16px;}.ws14 {font-size: 19px;}.ws16 {font-size: 21px;}.ws18 {font-size: 24px;}.ws20 {font-size: 27px;}.ws22 {font-size: 29px;}.ws24 {font-size: 32px;}.ws26 {font-size: 35px;}.ws28 {font-size: 37px;}.ws36 {font-size: 48px;}.ws48 {font-size: 64px;}.ws72 {font-size: 96px;}.wpmd {font-size: 13px;font-family: Arial,Helvetica,Sans-Serif;font-style: normal;font-weight: normal;}/*----------Para Styles----------*/DIV,UL,OL /* Left */{

2015

margin-top: 0px; margin-bottom: 0px;}</style>

</head><body><div id="text2" style="position:absolute; overflow:hidden; left:179px; top:79px; width:231px; height:65px; z-index:0"><div class="wpmd"><div align=center><font color="#FFFFFF" face="Tahoma" class="ws12"><B>Anatomia omului by Chirita Alexandra</B></font></div></div></div>

<div id="image1" style="position:absolute; overflow:hidden; left:12px; top:30px; width:1194px; height:860px; z-index:1"><img src="images/man_gavel_punch_red_white_8694_1920x1200.jpg" alt="" title="" border=0 width=1194 height=860></div>

<div id="image5" style="position:absolute; overflow:hidden; left:944px; top:585px; width:70px; height:84px; z-index:2"><img src="images/Caduceus_yellow.png" alt="" title="" border=0 width=70 height=84></div>

<div id="image2" style="position:absolute; overflow:hidden; left:747px; top:557px; width:120px; height:120px; z-index:3"><img src="images/halloween-bones4.gif" alt="" title="" border=0 width=120 height=120></div>

<div id="text1" style="position:absolute; overflow:hidden; left:826px; top:649px; width:173px; height:30px; z-index:4"><div class="wpmd"><div><font class="ws18"><a href="Prezentare Generala.html" title="">Click Here!</a></font></div></div></div>

</div>

</body></html></html>

2015

Screenshot

Prezentare generala.html

2015

Sistemul nervos.html

2015

Sistemul osos.html

2015

BIBLIOGRAFIEBIBLIOGRAFIE

1. ro.wikipedia.org/wiki/Anatomiewww.wikipedia.com

2. www.html.com

3. www.uniterdc.com

4. www.toptenz.net

5. www.webpagemaker.com

2015

Document a Tie atestat

Documents

Transcript of Document a Tie atestat