Sunteți pe pagina 1din 33

Colegiul Militar Liceal Dimitrie Cantemir - 2014

Lucrare de atestat la
informatica

Profesor indrumator:
Diana Stanciu

Elev:
Stroe George

Colegiul Militar Liceal Dimitrie Cantemir - 2014

Sahul

Colegiul Militar Liceal Dimitrie Cantemir - 2014

CUPRINS
Motivatia temei alese.........................................4
Despre HTML & CSS ........................................5
WPM....................................................................21
Index ...................................................................23
Screenshot .........................................................32
Bibliografie .......................................................33

Motivatia temei alese


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

Colegiul Militar Liceal Dimitrie Cantemir - 2014

posibilitatilor sale aproape infinite.


Scurta istorie a sahului
Sahul 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-a
raspandit si in vest. Bineinteles, in timp au avut loc numeroase schimbari
in forma si regula jocului, ajungandu-se la ceea ce este in prezent.
De exemplu, mutarea pionului cu doua campuri inainte a fost
introdusa in anul 1280, in Spania. Regulile privind promovarea pionului
au 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.
Bineinteles, in prezent, pionul poate fi schimbat cu un cal, cu un nebun,
cu un turn sau cu regina.

Colegiul Militar Liceal Dimitrie Cantemir - 2014

DESPRE 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 </numeelement>). Exemplu:
<BODY> si </BODY>
5

Colegiul Militar Liceal Dimitrie Cantemir - 2014

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

Colegiul Militar Liceal Dimitrie Cantemir - 2014

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:
&amp; sau &#32 = &
&lt; sau &#60 = <
&gt; sau &#62 = >
&quot; sau &@34 = "
&reg; =
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 "<!--" si "-->". E foarte important ca in interiorul
comentariului sa nu existe secventa de caractere "--" deoarece aceasta
genereaza confuzie.
Exemplu:
<!-- Acesta este un comentariu
care ocupa doua linii de text. -->
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

Colegiul Militar Liceal Dimitrie Cantemir - 2014

controlului a atributului dir la valoarea "rtl" (Right-To-Left). In acest caz


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 #000000
Blue #0000ff
Fuchsia #ff00ff
Gray #808080
Green #00ff00
Lime #008000
Maroon #800000

Navy #000080
Olive #808000
Purple #800080
Red #ff0000
Silver #c0c0c0
Teal #008080
White #ffffff
Yellow #ffff00

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>
<!--Sectiunea de antet a documentului cuprinde titlul documentului
si definirea tipului si a setului de caractere folosit -->

2014

<title>Structura Documentului HTML</title>


<META http-equiv="Content-Type" content="text/html; charset=iso8859-1">
</head>
<body>
<!--Acesta este corpul documentului. Aici va fi plasat
continutul paginii pe care o creati-->
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 ContentType 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-88591">
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
Exemplu:

motoare

de

cautare

Web.

<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-88591>
<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-88591">
</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 &nbsp; (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>&nbsp;
<p>&nbsp;
<p>&nbsp;
<p>&nbsp;
<p>Paragraf3:<br>
..dupa 4 linii libere...
<p>
Paragraf4:<br>
Intre&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cuvi
nte
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;exista&nbsp;&nbsp;&n
bsp;&nbsp;&nbsp;
suficient&nbsp;&nbsp;&nbsp;&nbsp;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>&nbsp;
<p>&nbsp;
<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>
invizibilii@nicaieri.com </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&nbsp;&nbsp;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/xhtml1transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" />


<title>Titlu pagina</title>
</head>
<body>
<div id="container">

2014

<div id="header">
<h1>Titlu site</h1>
<p>descriere site</p>
</div> <!-- sfarsit header -->
<div id="continut">
<h1>Titlu articol</h1>
<p> acesta este continutul, iar acesta este un <a href="#">link</a>
</div> <!-- sfarsit continut -->
</div> <!-- sfarsit container -->
</body>
</html>

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

2014

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.

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=ISO8859-1">
<meta name="generator" content="Web Page Maker (unregistered
version)">
<style type="text/css">

2014

/*----------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;fontstyle: 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;

2014

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">
<div align=center><font color="#800000" class="ws14"><B>Istoria
acestui joc se pierde in negura timpului. Prezenta deja n mormintele
Faraonilor egipteni, cunoscuta&nbsp; 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><BR></B></font></div>
<div align=center><font color="#800000"
class="ws14"><B>Cuvntul "</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>" insemnnd Rege, cuvntul original
se presupune a fi "</B></font><font color="#333333"
class="ws14"><B>ASHA</B></font><font color="#800000"

2014

class="ws14"><B>", Ordinea Cosmica.</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>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 vnatoare, obosit de intrigile si
placerile de la curtea sa. Regele suferea de plictiseala si pna 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>
<div id="text3" style="position:absolute; overflow:hidden;
left:662px; top:1362px; width:173px; height:249px; z-index:3">
<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>
<!--[if IE]><div id="g_text1" style="position:absolute;
overflow:hidden; left:147px; top:7px; width:881px; height:40px; z-index:5;
border:#FF0000 3px solid"><![endif]-->

2014

<!--[if !IE]>--><div id="g_text1" style="position:absolute;


overflow:hidden; left:147px; top:7px; width:875px; height:34px; z-index:5;
border:#FF0000 3px solid"><!--<![endif]-->
<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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nb
sp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nb
sp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp
;&nbsp; </B></font><font face="Tahoma" class="ws11"><B><a
href="Curiozitati.html" title="" class="style1">
Curiozitati&nbsp;&nbsp;&nbsp; </a></B></font><font color="#0000FF"
face="Tahoma"
class="ws11"><B>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nb
sp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </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>&nbsp;&nbsp;&nbsp;
</B></font><font color="#000000" face="Tahoma"
class="ws11"><B>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nb
sp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</B></font><font color="#000000" face="Tahoma"
class="ws8"><B>&nbsp;&nbsp;&nbsp;&nbsp; </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>

2014

<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">
<div align=center><font color="#0000FF"
class="ws18"><B>Campioni</B></font></div>
</div></marquee>
</div>
<div id="text2" style="position:absolute; overflow:hidden; left:93px;
top:301px; width:281px; height:83px; z-index:12">
<div class="wpmd">
<div align=center><font color="#0000FF"
class="ws16"><B>Campionii mondiali n versiunea FIDE (19932006)</B></font></div>
</div></div>
<div id="text5" style="position:absolute; overflow:hidden; left:19px;
top:377px; width:373px; height:115px; z-index:13">
<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

2014

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>
<div id="text6" style="position:absolute; overflow:hidden; left:79px;
top:511px; width:260px; height:67px; z-index:14">
<div class="wpmd">
<div align=center><font color="#0000FF"
class="ws14"><B>Campionii mondiali n versiunea
clasica</B></font></div>
</div></div>
<div id="text7" style="position:absolute; overflow:hidden; left:19px;
top:596px; width:301px; height:51px; z-index:15">
<div class="wpmd">
<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>
<div id="text8" style="position:absolute; overflow:hidden;
left:109px; top:670px; width:201px; height:58px; z-index:16">
<div class="wpmd">
<div align=center><font color="#0000FF"
class="ws14"><B>Campionii mondiali n versiunea
unificata</B></font></div>
</div></div>
<div id="text9" style="position:absolute; overflow:hidden; left:19px;
top:743px; width:322px; height:38px; z-index:17">
<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>

2014

</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 id="text10" style="position:absolute; overflow:hidden;
left:637px; top:304px; width:214px; height:73px; z-index:19">
<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>
<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 id="text11" style="position:absolute; overflow:hidden;
left:393px; top:345px; width:687px; height:328px; z-index:23">
<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&nbsp; 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

2014

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 id="text4" style="position:absolute; overflow:hidden;
left:496px; top:1214px; width:328px; height:31px; z-index:24">
<div class="wpmd">
<div><font color="#FF0000" class="ws14"><B><I>Realizator:
</I></B></font><font color="#FF0000" class="ws14"><B>Anghel MihaiRazvan</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>

Screenshot
index.html

2014

BIBLIOGRAFIE
2014

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