Anghel documeneteat

Colegiul Militar Liceal “Dimitrie Cantemir” - 2014

Lucrare de atestat la informatica

Profesor indrumator: Elev:

Diana Stanciu Stroe George

1


Sahul

2


CUPRINSCUPRINS

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

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

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

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

Screenshot .........................................................32 Screenshot .........................................................32

Bibliografie .......................................................33 Bibliografie .......................................................33

3


Motivatia temei aleseMotivatia temei alese

Mi-am ales aceasta tema fiindca sahul este cu siguranta unulMi-am ales aceasta tema fiindca sahul este cu siguranta unul dintre cele mai cunoscute jocuri din lume. Asta poate si datorita istorieidintre cele mai cunoscute jocuri din lume. Asta poate si datorita istoriei lui foarte indelungate, dar si datorita stilului foarte interactiv si alui foarte indelungate, dar si datorita stilului foarte interactiv si a posibilitatilor sale aproape infinite.posibilitatilor sale aproape infinite.

Scurta istorie a sahuluiScurta istorie a sahului

Sahul are o istorie foarte lunga si speciala. Se crede ca acesta aSahul are o istorie foarte lunga si speciala. Se crede ca acesta a aparut in India, in timpul imperiului Gupta si apoi, in secolul al IX-lea, s-aaparut in India, in timpul imperiului Gupta si apoi, in secolul al IX-lea, s-a raspandit si in vest. Bineinteles, in timp au avut loc numeroase schimbariraspandit si in vest. Bineinteles, in timp au avut loc numeroase schimbari in forma si regula jocului, ajungandu-se la ceea ce este in prezent.in forma si regula jocului, ajungandu-se la ceea ce este in prezent.

De exemplu, mutarea pionului cu doua campuri inainte a fostDe exemplu, mutarea pionului cu doua campuri inainte a fost introdusa in anul 1280, in Spania. Regulile privind promovarea pionuluiintrodusa in anul 1280, in Spania. Regulile privind promovarea pionului au fost interzise destul de mult timp precum in secolele al XVIII-lea si alau fost interzise destul de mult timp precum in secolele al XVIII-lea si al XIX-lea, cand pionul era limitat la o captura prealabila a unei piese.XIX-lea, cand pionul era limitat la o captura prealabila a unei piese. Bineinteles, in prezent, pionul poate fi schimbat cu un cal, cu un nebun,Bineinteles, in prezent, pionul poate fi schimbat cu un cal, cu un nebun, cu un turn sau cu regina.cu un turn sau cu regina.

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:

2014

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>



2014

<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

2014

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

2014

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

2014

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

2014

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:

2014

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>

2014

<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...

2014

<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

2014

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.

2014

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">

2014

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>

2014

Web Page Maker

(WPM)

2014

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.

2014

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>Istoric</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;}

2014

.wpmd {font-size: 13px;font-family: Arial,Helvetica,Sans-Serif;font-style: normal;font-weight: normal;}

/*----------Para Styles----------*/DIV,UL,OL /* Left */{ margin-top: 0px; margin-bottom: 0px;}</style>

<style type="text/css">a.style1:link{color:#FFFFFF;text-decoration: none;}a.style1:visited{color:#FFFFFF;text-decoration: none;}a.style1:hover{color:#FFFFFF;text-decoration: none;}a.style1:active{color:#FFFFFF;text-decoration: none;}</style>

<style type="text/css">div#container{

position:relative;width: 1165px;margin-top: 0px;margin-left: auto;margin-right: auto;text-align:left;

}body {text-align:center;margin:0}</style>

</head><body

background="images/chess_image_pattern_1920x1200.jpg" bgColor="#E4E6D9" style="background-repeat:repeat-y;">

<div id="container"><div id="image6" style="position:absolute; overflow:hidden;

left:454px; top:77px; width:686px; height:165px; z-index:0"><img src="images/right0.jpg" alt="" title="" border=0 width=686 height=165></div>

<div id="text1" style="position:absolute; overflow:hidden; left:407px; top:676px; width:682px; height:431px; z-index:1">

<div class="wpmd">

2014

<div align=center><font color="#800000" class="ws14"><B>Istoria acestui joc se pierde in negura timpului. Prezenta deja în mormintele Faraonilor egipteni, cunoscuta în culturile nordice, exista multe reprezentari artistice despre prezenta lui in diferite civilizatii.</B></font></div>

<div align=center><font color="#800000" class="ws14"><B><BR></B></font></div>

<div align=center><font color="#800000" class="ws14"><B>Se spune ca rajahul Balhait i-a cerut înteleptului brahman Sissa sa conceapa un joc în care sa prevaleze puterea mintii si nu a norocului. Mai mult, dorea sa dezvolte intelectul si sa aiba valente educative. Sissa a inventat un joc în care diferite piese trebuiau mutate pe o tabla patrata formata din 64 de carouri si este evident ca era vorba de un precursor al sahului.</B></font></div>


<div align=center><font color="#800000" class="ws14"><B>Cuvîntul "</B></font><font color="#333333" class="ws14"><B>SAH</B></font><font color="#800000" class="ws14"><B>" deriva din persanul "</B></font><font color="#333333" class="ws14"><B>SHAH</B></font><font color="#800000" class="ws14"><B>" insemnând Rege, cuvântul original se presupune a fi "</B></font><font color="#333333" class="ws14"><B>ASHA</B></font><font color="#800000" class="ws14"><B>", Ordinea Cosmica.</B></font></div>


<div align=center><font color="#800000" class="ws14"><B>Legenda povesteste ca Regele Vishtaspa al Persiei a devenit extrem de plictisit de viata pentru ca a realizat tot ce si-a dorit: el era plin de triumf în razboaie, satul de vânatoare, obosit de intrigile si placerile de la curtea sa. Regele suferea de plictiseala si pâna la urma a oferit o recompensa nelimitata celui care l-ar fi facut sa îsi recapete interesul pentru viata.</B></font></div>

</div></div>

<div id="image2" style="position:absolute; overflow:hidden; left:381px; top:294px; width:16px; height:725px; z-index:2"><img src="images/line120.gif" alt="" title="" border=0 width=16 height=725></div>


2014

<div class="wpmd"><div><font class="ws8" color="#808080" face="Tahoma">Web

Page Maker is an easy to use utility that allows you to create your site without knowing HTML. </font></div>

<div><font class="ws8" color="#808080" face="Tahoma"><BR></font></div>

<div><font class="ws8" color="#808080" face="Tahoma">You can create your site using the professional templates or start from scratch by dragging and dropping objects into a layout. </font></div>

<div><font class="ws8" color="#808080" face="Tahoma"><BR></font></div>

<div><font class="ws8" color="#808080" face="Tahoma">The program also includes built-in FTP publisher to allow you upload your site to the Internet by pressing a publish button.</font></div>

</div></div>

<div id="image9" style="position:absolute; overflow:hidden; left:0px; top:1204px; width:1142px; height:42px; z-index:4"><img src="images/software_09.jpg" alt="" title="" border=0 width=1142 height=42></div>



<div id="g_text1" style="position:absolute; overflow:hidden; left:147px; top:7px; width:875px; height:34px; z-index:5; border:#FF0000 3px solid">

<div class="wpmd"><div align=center><font face="Tahoma" class="ws11"><B><a

href="index.html" title="" class="style1">Home</a></B></font><font face="Tahoma" class="ws11"><B><a href="index.html" title="" class="style1"> </a></B></font><font color="#0000FF" face="Tahoma" class="ws11"><B>               </B></font><font face="Tahoma" class="ws11"><B><a href="sfaturi.html" title="" class="style1">Sfaturi</a></B></font><font color="#0000FF" face="Tahoma" class="ws11"><B>                    </B></font><font face="Tahoma" class="ws11"><B><a href="Curiozitati.html" title="" class="style1"> Curiozitati    </a></B></font><font color="#0000FF"

2014

face="Tahoma" class="ws11"><B>                </B></font><font face="Tahoma" class="ws11"><B><a href="Piese de sah.html" title="" class="style1">Piese de sah</a></B></font><font color="#0000FF" face="Tahoma" class="ws11"><B>    </B></font><font color="#000000" face="Tahoma" class="ws11"><B>                 </B></font><font color="#000000" face="Tahoma" class="ws8"><B>     </B></font><font color="#000000" face="Tahoma" class="ws11"><B> </B></font></div>

</div></div>

<div id="image4" style="position:absolute; overflow:hidden; left:15px; top:76px; width:459px; height:164px; z-index:6"><img src="images/images.jpg" alt="" title="" border=0 width=459 height=164></div>

<div id="image20" style="position:absolute; overflow:hidden; left:30px; top:301px; width:60px; height:60px; z-index:7"><img src="images/schach-0028.gif" alt="" title="" border=0 width=60 height=60></div>

<div id="image21" style="position:absolute; overflow:hidden; left:38px; top:501px; width:60px; height:60px; z-index:8"><img src="images/schach-0029.gif" alt="" title="" border=0 width=60 height=60></div>

<div id="image24" style="position:absolute; overflow:hidden; left:1026px; top:684px; width:139px; height:109px; z-index:9"><img src="images/spiele-0154.gif" alt="" title="" border=0 width=139 height=109></div>

<div id="image26" style="position:absolute; overflow:hidden; left:368px; top:659px; width:69px; height:100px; z-index:10"><img src="images/spiele-0277.gif" alt="" title="" border=0 width=69 height=100></div>

<div id="marquee1" style="position:absolute; overflow:hidden; left:151px; top:259px; width:150px; height:90px; z-index:11">

<marquee width="150" height="90"><div class="wpmd">

2014

<div align=center><font color="#0000FF" class="ws18"><B>Campioni</B></font></div>

</div></marquee></div>


<div class="wpmd"><div align=center><font color="#0000FF"

class="ws16"><B>Campionii mondiali în versiunea FIDE (1993-2006)</B></font></div>

</div></div>


<div class="wpmd"><UL><li><font class="ws12"><B>Anatoli Karpov</B></font><font

class="ws12"> (1993-1999)</font></li><li><font class="ws12"><B>Alexander Khalifman</B></font><font

class="ws12"> (1999-2000)</font></li><li><font class="ws12"><B>Vishwanathan Anand</B></font><font

class="ws12"> (2000-2002)</font></li><li><font class="ws12"><B>Ruslan Ponomariov</B></font><font

class="ws12"> (2002-2004)</font></li><li><font class="ws12"><B>Rustam

Kasimdzhanov</B></font><font class="ws12"> (2004-2005)</font></li><li><font class="ws12"><B>Veselin Topalov</B></font><font

class="ws12"> (2005-2006)</font></li></UL></div></div>



class="ws14"><B>Campionii mondiali în versiunea clasica</B></font></div>

</div></div>


<div class="wpmd">

2014

<UL><li><font class="ws12"><B>Gari Kasparov</B></font><font

class="ws12"> (1993-2000)</font></li><li><font class="ws12"><B>Vladimir Kramnik</B></font><font

class="ws12"> (2000-2006</font></li></UL></div></div>



class="ws14"><B>Campionii mondiali în versiunea unificata</B></font></div>

</div></div>


<div class="wpmd"><UL><li><font class="ws12"><B>Vladimir Kramnik</B></font><font

class="ws12"> (2006-2008)</font></li><li><font class="ws12"><B>Viswanathan Anand</B></font><font

class="ws12"> (2008-prezent)</font></li></UL></div></div>

<div id="image1" style="position:absolute; overflow:hidden; left:33px; top:669px; width:60px; height:60px; z-index:18"><img src="images/dg.gif" alt="" title="" border=0 width=60 height=60></div>


<div class="wpmd"><div><font color="#000000" class="ws20"><B><I>Putina

istorie</I></B></font></div></div></div>

<div id="image8" style="position:absolute; overflow:hidden; left:469px; top:77px; width:298px; height:165px; z-index:20"><img src="images/sdasd.jpg" alt="" title="" border=0 width=298 height=165></div>

2014

<div id="image11" style="position:absolute; overflow:hidden; left:56px; top:792px; width:266px; height:210px; z-index:21"><img src="images/sdgsdgs.jpg" alt="" title="" border=0 width=266 height=210></div>

<div id="image13" style="position:absolute; overflow:hidden; left:764px; top:77px; width:376px; height:164px; z-index:22"><img src="images/sdsd.jpg" alt="" title="" border=0 width=376 height=164></div>


<div class="wpmd"><div align=center><font color="#800000" class="ws18"><B>Cine a

inventat sahul?</B></font></div><div align=center><font color="#800000"

class="ws16"><B><BR></B></font></div><div align=center><font color="#800000" class="ws16"><B> Desi

exista multe ipoteze privind originea sahului, versiunea cea mai acceptata, la ora actuala, e ca el ar proveni din chaturanga, un joc aparut in India secolului 6 (denumirea inseamna, in limba sanscrita, „cele patru palcuri de oaste” si face referire la formatia de batalie clasica, la acea vreme: infanteria, cavaleria, elefantii si carele de lupta, reprezentate azi sub forma pionilor, cailor, nebunilor si turelor). Jocul a ajuns in Persia, un veac mai tarziu, si a fost redenumit shatranj. Aici, practicantii obisnuiau sa strige „Sah!”, atunci cand atacau regele rival si „Sat mat! (Regele e mort), cand castigau.</B></font></div>

</div></div>


<div class="wpmd"><div><font color="#FF0000" class="ws14"><B><I>Realizator:

</I></B></font><font color="#FF0000" class="ws14"><B>Anghel Mihai-Razvan</B></font></div>

<div><font color="#FF0000" face="Tahoma" class="ws11"><B><BR></B></font></div>

<div><font color="#C0C0C0" face="Tahoma" class="ws8"><BR></font></div>

</div></div>

</body></html>

2014

Screenshot

index.html

2014

BIBLIOGRAFIEBIBLIOGRAFIE

1. www.sahul.ro 2. www.wikipedia.com 3. www.html.com 4. www.uniterdc.com 5. www.toptenz.net 6. www.webpagemaker.com

2014

Date post:	24-Jan-2016
Category:	Documents
Upload:	pricope-razvan-antonio
View:	290 times
Download:	0 times

Anghel documeneteat

Documents