0% au considerat acest document util (0 voturi)

109 vizualizări79 pagini

Laborator AI

Analiza informatica

Încărcat de

Drepturi de autor

Respectăm cu strictețe drepturile privind conținutul. Dacă suspectați că acesta este conținutul dumneavoastră, reclamați-l aici.

Formate disponibile

Descărcați ca PDF, TXT sau citiți online pe Scribd

0% au considerat acest document util (0 voturi)

109 vizualizări79 pagini

Laborator AI

Analiza informatica

Încărcat de

Andrei Camen

Drepturi de autor

Respectăm cu strictețe drepturile privind conținutul. Dacă suspectați că acesta este conținutul dumneavoastră, reclamați-l aici.

Formate disponibile

Descărcați ca PDF, TXT sau citiți online pe Scribd

Sunteți pe pagina 1/ 79

L1 AI Limbajul HTML

4. Structura unui program

Un document HTML are următoarea structură cadru:

Figura 4. Structura unui program HTML

4.1. Secţiunea de antet
Secţiunea de antet este cuprinsă între marcajele <head> … </head>.
Marcajul <title> este obligatoriu şi poate apare doar în secţiunea HEAD.
Dintre marcajele care nu sunt afişate de browser existente în secţiune HEAD sunt:
 <META>

<META NAME="nume" CONTENT="continut">

 <base> - stabileste URL-ul de "baza" al documentului. Toate referinţele din documentul respectiv
vor fi deschise relativ la marcajul <base>. (<a href="nume_pagina.html"></a>, respectiv
<img src="nume_imagine.gif">)

<head>
<base href="http://www.ace.ucv.ro/index.php" target="_top">
</head>
Secţiunea HEAD a unui document HTML este prezentată în figura 5.

Figura 5. Secţiunea de antet – HEAD

Marcatorii existenţi în această secţiune sunt <h1>, <h2>, <h3>, <h4>, <h5>, <h6> prezentaţi în
figura 6.

Codul pentru editorul Notepad Vizualizarea de Internet Explorer

<h1> PROIECT </h1> PROIECT

<h2> PROIECT </h2> Proiect

<h3> PROIECT </h3> Proiect

<h4> PROIECT </h4> Proiect

<h5> PROIECT </h5> Proiect
<h6> PROIECT </h6> Proiect

Figura 6. Marcaje folosite în secţiunea de antet

Trecerea pe o linie nouă se face la comanda explicită prin marcajul <br> (de la "line break" care
înseamnă întrerupere de linie) care trebuie să apară în pagină.
Pentru centrarea titlului în cadrul paginii se foloseşte marcajul <center> iar pentru terminarea
acţiunii se utilizează </center>.
Există posibilitatea de a introduce comentarii, folosind marcajul < ! - - textul comentariului - - >
Folosind marcajele prezentate programul va arata ca în figura7.

<html>
<head>
<title><center>PROIECT</center></title>
</head>
<body>
...........
</body>
</html>

Figura 7. Utilizarea marcajelor secţiunii de antet

4.2. Sectiunea BODY

Această secţiune este cuprinsă între marcajele <body>...... </body> şi poate avea următoarele
atribute:

<body [ BACKGROUND="adresa_imagine"] [ BGCOLOR="#rrggbb"|"culoare"]

[TEXT="#rrggbb"|"culoare"] [ LINK="#rrggbb"|"culoare"] [VLINK="#rrggbb"|"culoare"] [
ALINK="#rrggbb"|"culoare"] LEFTMARGIN=marg_st] [ TOPMARGIN=marg_top]>
................
conţinut document
.................
</body>

Marcajul de sfârşit (</BODY>) nu este obligatoriu.

A. Culoarea de fond
O culoare poate fi precizată în două moduri:
 printr-un nume de culoare, conform sintaxei:
<body bgcolor="gray">
fiind disponibile cel puţin 16 nume de culori: aqua, black, fuchsia, gray, green, lime, maroon,
navy, olive, purple, red, silver, teal, white şi yellow.
 printr-o constantă "#rrggbb", conform standardului de culoare RGB (Red, Green, Blue). O astfel
de constantă se formează astfel: "#rrggbb" unde r,g şi b sunt cifre hexazecimale care pot lua
valorile: 0,1,2,3,4,5,6,7,8,9,a,A,b,B,c,C,d,D,e,E,f,F şi în acest fel pot fi definite 65536 culori,
utilizând sintaxa:
<body bgcolor="#999999">

B. Culoarea textului

Culoarea textului se realizează prin intermediul atributului text tot prin două modalităţi:
 printr-un nume de culoare, conform sintaxei:
<body text="gray">

 printr-o constantă "#rrggbb", conform sintaxei

<!—Programul 2-->
<html>
<head>
<title> Curs HTML </title>
<META name="author" content="Camelia Maican">
<META name="copyright" content="© 2010 ACE">
<META name="keywords" content="curs, html, anul_IV">
</head>

<body bgcolor="#999999" text="red" leftmargin=0 topmargin=0>

<!—Linia precedentă nu este afişată de browser -->
<p>Textul primului paragraf </p>
<p>Textul următorului paragraf </p>
</body> <! Acest marcaj de sfârşit al corpului documentului nu este
obligatoriu >
</html>

Figura 8. Utilizarea culorii de fond şi a marcajului de paragraf

Poziţionarea conţinutului paginii Web faţă de marginile ferestrei browser-ului se poate face cu
ajutorul a două atribute leftmargin şi topmargin (care sunt extensii Microsoft şi nu funcţionează decât în
Internet Explorer 3+):
Textul afişat este caracterizat de următoarele atribute:
 marime (size)
 culoare (color)
 font (style)
Aceste atribute apar în cadrul marcajului <basefont>, conform sintaxei :

<basefont size=număr color="culoare" style="font">

Atributele implicite sunt:

size = 3, color = black şi style = "Times New Roman".
În exemplul din figura 7 a aparut un marcaj nou <p> (paragraf). Pentru formatarea textului pot fi
folosite diferite stiluri utilizând următoarele marcaje:
 <b>...</b> - blocul de text apare cu caractere îngroşate
 <i>...</i> - blocul de text apare cu caractere inclinate
 <u>...</u> - blocul de text apare cu caractere subliniate
 <s>...</s> - blocul de text apare cu caractere "taiate"
 <pre>...</pre> - marcajul de informţie preformatată
o conserva toata caracterele şi spaţierile de linii
o utilizează un font diferit (Courier)
 <sup>...</sup> - secvenţă de text aliniată ca exponent
 <sub>...</sub> - secvenţă de text aliniată ca indice
 <br> - textul după acest marcaj este trecut pe o linie nouă şi poate apare oriunde în text
 <hr> - trasează o linie subţire orizontală
C. Fontul unui text

Un font este caracterizat de următoarele atribute:

o Culoarea, stabilită prin atributul color, se precizează prin două moduri similar culorii textului;
o tipul sau stilul este stabilit prin atributul face;
o mărimea definită prin atributul size
o grosimea definită prin atributul weight ; valorile acestui atribut pot fi cuprinse între 100 (cel mai
subţire) şi 900 (cel mai gros);

<!—Programul 4-->
<html>
<head>
<title><h3><center>FONT </center> /h3></title>
</head>
<body> <pre>
<font size=7 color="green" face="Times New
Roman"><b><u>Cuprins </u></b> </font><br>
<font size=5 color="blue" face="Times New Roman">
<b>Capitolul 1</b> </font><br>
<font size=4 color="red" face="Arial">
Paragraful 1.1.
Paragraful 1.2. </font><br>
</pre>
</body>
</html>

Figura 9. Specificarea fontului unui text

Atributul "align"

Puteti alinia la stanga (left), dreapta (right) sau la mijlocul (center) pagini aproape orice element.
<h2 align="center">Titlu centrat </h2>
Vizualizare
Titlu centrat
Alete exemple:
<h2 align="left">Titlu aliniat la stanga </h2>
<h2 align="center">Titlu centrat </h2>
<h2 align="right">Titlu aliniat la dreapta </h2>

Vizualizare
Titlu aliniat la stanga
Titlu centrat
Titlu aliniat la dreapta

Valori standard pentru atribute

Atribute generice
Atributele sunt folosite pentru a personaliza elementele unei pagini web.
Atribute Optiuni Functii
align right, left, center Aliniere orizontala
valign top, middle, bottom Aliniere verticala
numeric,
Un background in spatele
bgcolor hexidecimal, sau
elementului
valoare RGB
background URL O imagine in spatele elementului
Numeste un element care se va
id Definit de user
folosi cu CSS
Clasifica un element care se va
class Definit de user
folosi cu CSS
Specifica latimea unui tabel,
width Valoare numerica
imagine, sau casute de tabel.
Specifica inaltimea unui tabel,
height Valoare numerica
imagine, sau casute de tabel.
"Pop-up". Afiseaza un titlu pentru
title Definit de user
un element stabilit.

Paragraful
Tag-ul pentru paragraf este <p> </p>.

<p>Paragraful este un elemet de baza in...</p>

<p>Acesta va plasa o linie goala deasupra si...</p>

Vizualizare
Paragraful este un elemet de baza in editare de text. Tag-ul pentru
paragraf este <p>.
Acesta va plasa o linie goala deasupra si dedesuptul textului
pentru a fi evidentiat, iar browser-ul il va interpreta ca atare.
Paragraf incadrat, justify

<p align="justify">Paragraful este un elemet de baza in...</p>

Vizualizare
Paragraful este un elemet de baza in editare de text. Tag-ul pentru
paragraf este <p>. Acesta va plasa o linie goala deasupra si
dedesuptul textului pentru a fi evidentiat, iar browser-ul il va
interpreta ca atare.

Paragraf centrat, center

<p align="center">Paragraful este un elemet de baza in...</p>
Vizualizare
Paragraful este un elemet de baza in editare de text. Tag-ul pentru
paragraf este <p>. Acesta va plasa o linie goala deasupra si
dedesuptul textului pentru a fi evidentiat, iar browser-ul il va
interpreta ca atare.

Paragraf aliniat la dreapta, right

<p align="right">Paragraful este un elemet de baza in...</p>
Vizualizare
Paragraful este un elemet de baza in editare de text. Tag-ul pentru
paragraf este <p>. Acesta va plasa o linie goala deasupra si
dedesuptul textului pentru a fi evidentiat, iar browser-ul il va
interpreta ca atare.

Spatii multiple

Exista insa o entitate care poate fi introdusa pentru a afisa mai mult de un spatiu.
<p> In acesta fraza au fost introduse     
mai multe spatii.<p>
Vizualizare
In acesta fraza au fost introduse mai multe spatii.

Un salt in line

<p>
Vlad Ionescu <br />
Calea Bucuresti No.1 <br />
Craiova, Romania <br />
</p>
Vizualizare

Vlad Ionescu
Calea Bucuresti No.1
Craiova, Romania
Deasemenea se poate folosi pentru a evidentia o semnatura ca de exemplu la sfarsitul unei scrisori.
<p>
Multumesc anticipat,<br />
<br />
<br />
Vlad Ionescu <br />
Manager
</p>
Vizualizare
Multumesc anticipat,

Vlad Ionescu
Manager

O linie orizontala.

<hr/>
Utilizati
<hr/><hr/>
Cu
<hr/>
Moderatie
<hr/>
Vizualizare

Utilizati

Moderatie

Linia orizontala poate deveni utila in diferite circumstante, ca de exemplul o nota de subsol:
<hr />
<p>1. "The Hobbit", JRR Tolkein.<br />
2. "The Fellowship of the Ring" JRR Tolkein.</p>
Vizualizare

1. "The Hobbit", JRR Tolkein.

2. "The Fellowship of the Ring" JRR Tolkein.
HTML -LISTE
HTML pune la dispozitie trei tipuri de liste.
Pentru a realiza lista cea mai potrivita cerintelor, folositi atributele type si start.
- <ol> - ordered list, numere
- <ul> - unsorted list, buline
- <dl> - definition list, lista de definitii.

Liste ordonate
Foloseste tag-ul <ol>pentru a incepe o lista ordonata. Prin punerea <li></li> (list item) intre tagurile <ol>
si </ol> se semnalizeaza browser-ului elementele listei.
<h4 align="center">Obiective</h4>
<ol>
<li>Sa gasesc o slujba </li>
<li>Sa iau bani multi </li>
<li>Sa ma mut in alt oras </li>
</ol>
Vizualizare
Obiective
1. Sa gasesc o slujba
2. Sa iau bani multi
3. Sa ma mut in alt oras

Se poate incepe lista cu orice alt numar, specificandu-l insa cu ajutorul atributului start.

<h4 align="center">Obiective</h4>
<ol start="3" >
<li>Sa gasesc o slujba </li>
<li>Sa iau bani multi </li>
<li>Sa ma mut in alt oras </li>
</ol>
Vizualizare

Obiective
3. Sa gasesc o slujba
4. Sa iau bani multi
5. Sa ma mut in alt oras

Alte tipuri de liste ordonate

Pentru a modifica tipul numerotarii folosim atributul type.

Vizualizare
Numere romane cu Numere romane cu
Litere mici Majuscule
litere mici majuscula
a. Un loc de A. Un loc de i. Un loc de munca I. Un loc de munca
munca munca ii. Bani II. Bani
b. Bani B. Bani iii. Alt oras III. Alt oras
c. Alt oras C. Alt oras

Liste nesortate sau neordonate

O lista nesortata se creaza cu ajutorul tagului <ul>. Listele nesortate sunt de mai multe tipuri si anume:
patratele, buline si cerculete.Valoarea standard redata de majoritatea browser-elor sunt bulinele

<h4 align="center">lista de cumparaturi </h4>

<ul> <li>lapte</li>
<li>branza</li>
<li>oua</li>
<li>zahar</li>
</ul>

Exemplu despre cum arata si celelalte tipuri de liste neordonate.

Liste de definitii
Se pot face liste de definitii folosind tag-ul <dl>. Aceasta lista reda cuvantul deasupra definitiei. Este
indicat sa ingrosam cuvantul pentru a fi mai bine evidentiat.
Listele de tip definiţie sunt introduse prin intermediul marcajelor:
 <dl>...</dl> - lista definitii (definition list)
 <dt> - termenul definit (definition term)
 <dd> - definitie (definition)

<dl>
<dt><b> Reţea de calculatoare </b></dt>
<dd> ansamblu de calculatoare autonome, interconectate prin
intermediul unor medii de comunicaţie.</dd>
<dt><b> Domeniu </b></dt>
<dd> Nume unic prin care se identifica un site pe Internet </dd>
</dl>

Link-uri
Pentru a realiza o legătură hipertext se utilizează tag-ul ancoră: <A>……</A>, care include şi atribute.
Unul dintre aceste atribute este: HREF (Hypertext REFerence), utilizat pentru a specifica URL-ul
documentului ţintă. Sintaxa este:

atribut Valoarea atributului Textul pe care se clicheaza, afisat diferit

<a href=”localizarea documentului”>text de legatura</a>

Tag de inceput Tag de sfarsit

Linkurile (referintele) pot fi de trei tipuri:

- interne (ancore) - catre locuri specifice din pagina (anchors)
- locale (relative) - catre alte pagini dar pe acelasi domeniu
- globale (absolute) - catre alte domeni in afara site-ului
Internal - href="#anchorname"
Local - href="../img/foto.jpg"
Global (extern) - href="http://www.ucv.ro/"

Link-uri text
Pentru a seta inceputul si sfarsitul unui anchor se poate folosi <a> </a>.

Atributul target spune browser-ului daca trebuie sa deschida noua pagina intr-o noua fereastra sau in
aceeasi fereastra.

target=" _blank" Deschide o noua fereastra

_self" Deschide pagina in aceeasi fereastra
Deschide noua pagina intr-un frame superior
_parent"
linkului
deschide noua pagina in acelasi browser anuland
_top"
toate frame-urile

Legătura internă
Se realizează între elemente ale aceluiaşi document sau către un anumit punct ţintă al altui document.
Aceasta implică:
1) crearea unei ancore în punctul ţintă:

<A NAME="cuvânt_cheie">Paragraf ţintă</A>

Ancorele din punctul ţintă nu sunt afişate diferit faţă de restul documentului.

2) realizarea unei legături prin care se specifică numele fişierului (dacă legătura se face într-un punct
al altui fişier) şi paragraful:

<A HREF="[nume fisier]#cuvânt_cheie">Paragraf ţintă</A>

Se utilizează acest tip de legătură în cadrul unui document organizat pe secţiuni. La începutul
documentului poate fi prezentat conţinutul.

Legătura locală

<A HREF="fisier_local"> text de legătură </A>

Valoarea "fişier_local" reprezintă adresa fişierului local către care se face legătura, acesta va fi încărcat.
Fişierul local se precizează folosind:
• calea relativă, serverul va căuta documentul începând din acelaşi director ca şi documentul de la care a
fost apelată legătura;
• calea absolută, când documentul va fi identificat începând cu directorul rădăcină.

Legătura externă

atribut URL document Textul pe care se clicheaza, afisat diferit

<a href=”http://www.ace.ucv.ro”>text de legatura</a>

Tag de sfarsit
Tag de inceput

Ţinta unei legături hipertext poate fi: un fişier HTML, o imagine externă (GIF, JPEG sau PostScript), un
film sau text (căruia i s-a marcat o ancoră).
Ancore
Numele ancorelor nu pot conţine spatii şi trebuie sa fie unice în pagina respectivă.

<h1>HTML - Hypertext Reference / href<a

name="top"></a></h1>
<h2>HTML - Llink-uri text<a name="text"></a></h2>
<h2>HTML - Link-uri de e-mail<a name="email"></a> </h2>

Mai departe trebuie sa formulam codul link-ului punand innaintea numelui anchor-ului semnul diez (#).

<a href="#top">Mergi la inceput </a>

<a href="#text">Invata despre link-uri text </a>
<a href="#email">Invata despre adrese de e-mail </a>
Vizualizare
Mergi la inceput
Invata despre link-uri text
Invata despre adrese de e-mail

Link-uri de e-mail

<a href="mailto:[email protected]?subject=Nelamuriri "

>Nelamuriri aici </a>

In cazul in care un subiect nu este de ajuns si vreti sa adaugati ceva si la continutul email-ului, o puteti
face cu ajutorul urmatorului cod:
<a
href="mailto:[email protected]?subject=Nelamuriri&body=Scrie
aici daca ai nelamuriri " >Nelamuriri aici </a>
L2 AI HTML

Inserarea fişierelor audio

Introducerea de secvente audio se poate realiza prin doua modalitati:

1. sub forma unei referinte(link) cum se poate vedea în figura 19.
2. prin intermediul marcajelor embed (figura 20) sau bgsound (figura 21).

<html>
<head>
<title>Inserarea unui fişier audio ca referinţă </title>
</head>
<body>
<p> Execută click pe legătura următoare
<a href="sunet.au">
<p> Fisierul audio va fi rulat în cadrul unei aplicaţii existente pe
calculator cum ar fi Media Player
</body>
</html>
Figura 19. Înserarea unui fişier audio ca referinţă

Marcajul embed poate avea atributele urmatoarele:

 autostart setat true, are ca efect rularea fişierului audio imediat după încarcare;
 hidden setat true, nu va afişa interfaţa pentru rularea fişierului audio;
 loop setat true, are ca efect reluarea secvenţei audio la "nesfârşit";
 volume are rolul de a seta volumul de redre a secvenţei audio ;

<html>
<head>
<title>Inserare secventa audio cu embed</title>
</head>
<body>
<embed src="aaa.wav" width="200" height="200"
autostart=false hidden=false loop=true volume=50>
</body>
</html>

Figura 20. Înserarea unui fişier audio utilizând marcajul embed

In HTML 4 embed este înlocuit de marcajul object. Există trei formate de fişiere care sunt
recomandate pentru utilizarea cu acest marcaj: wav, au şi midi.
Marcajul bgsound va rula o secvenţă audio în fundal. Acest marcaj, fiind o extensie Microsoft, va
funcţiona numai în Internet Explorer.

<html>
<head>
<title>Inserare secventa audio cu bgsound</title>
</head>
<body>
<bgsound src="aaa.wav" loop=10>
</body>
</html>
Figura 21. Înserarea unui fişier audio utilizând marcajul bgsound

Frame
In general frame-urile se folosesc pentru a afisa un meniu pe de o parte iar continutul pe de o alta parte.
Atunci cand cineva da un clik pe un link din meniu se va deschide o alta pagina in partea de continut.
Vom exempifica toate acestea cu ajutorul codului urmator:

- frameset - Este tagul care stabileste caracteristicile frame-ului. Frame-urile individuale vor fi definite
inauntrul lui.
- frameset cols="#%, *"- "Cols" stabileste latimea pe care fiecare frame o va avea. In exemplul anterion
am stabilit ca primul frame (meniul) va ocupa 30% din suprafata afisata, si am folosit semnul " * " pentru
a indica browser-ului ca in restul paginii ramase se va afisa continutul paginii.
- frame src="" - adresa fisierelor care vor fi afisate ca meniu si respectiv continut.

HTML - Frame- Adaugarea unui banner sau Titlu

Folositi codul urmator:

frameset rows="#%, *"- "rows" stabileste inaltimea fiecarui frame care va fi afisat. In exemplul anterior
am ales ca primul frame va fi 20% iar restul de spatiu ramas va fi impartit intre menu.html si
content.html.

HTML - Frame - Margine si Spatiere

Probabil ati observat ca intre frame-uri raman niste linii gri care de multe ori nu sunt dorite. Inlaturarea
lor este posibila cu ajutorul frameborder si framespacing. Aceste atribute vor fi introduse in interiorul
tag-ului frameset.
**Nota: In realitate frameset si frameborder este acelasi atribut. Exista insa browsere care nu recunosc
decat unul dintre cele doua. De aceea, sfatul nostru, este sa le folositi pe amandoua pentru mai multa
siguranta.
frameborder="#" - Valoarea 0 nu reproduce margine.
- border="#"- modifica grosimea marginii. (folosit de netscape)
- framespacing="#" - modifica grosimea marginii (folosit de Internet Explorer)
Iata si un exemplu practic:

HTML - "frame name" si "frame target"

Pentru a menitine meniul in pozitia actuala iar cand executam clic pe pagina de contact de exemplu sa se
deschida in locul pagini de continut, vom da un nume fiecarui frame si vom precisa locul unde se va
deschide cu ajutorul base target.
Iata si codul pentru pagina noastra

Noresize si scrolling
Frame-ul se mai poate personaliza inca putin folosind atributele noresize si scrolling.

- noresize - nu lasa ca framul sa se redimensioneze in functie de monitorul vizitatorului

- scrolling="(yes/no)"- permite sau nu sroll-ul intr-un frame
Tabele
HTML permite descrierea tabelelor într-o manieră amănunţită ca şi în cazul listelor. Un tabel poate
conţine un alt tabel. O celulă dintr-un tabel poate conţine: text, liste, imagini, legături hipertext sau
elemente ale unui formular. Sintaxa generală pentru crearea unui tabel este:

<TABLE BORDER=m CELLPADING=n2 CELLSPACING=n3 WIDTH=n4%>

--- descrierea tabelului---
</TABLE>

Proprietăţile generale ale unui tabel se specifică prin atributele:

• BORDER, grosimea bordurii de încadrare a tabelului;
• CELLPADING, spaţiul din jurul textului unei celule;
• CELLSPACING, spaţiul între celule;
• WIDTH specifică în procente cât la sută din suprafaţa ferestrei ocupă tabelul.
Tabelul este descris rând cu rând cu ajutorul tag-ului:
<TR VALIGN=TOP|BOTTOM|MIDDLE ALIGN=RIGHT|LEFT|CENTER> </TR>
Atributul VALIGN specifică alinierea verticală a textului în toate celulele rândului, iar
ALIGN dă alinierea orizontală.
Definirea unei celule în cadrul unui rând se face prin:
<TD VALIGN=v1 ALIGN=v2 COLSPAN=n1 ROWSPAN=n2 NOWRAP> </TD>
Toate celulele unui rând moştenesc valorile atributului VALIGN definit în tag-ul <TR>, cu excepţia
cazului când acest atribut este redefinit prin tag-ul <TD>, devenind astfel prioritar în raport cu primul.
Atributul COLSPAN specifică lăţimea celulei, ca multiplu de laţimea coloanei de bază, iar ROWSPAN
specifică înălţimea celulei, ca multiplu de înălţimea rândului de bază.
Dimensionarea celulelor unui tabel se face automat la lungimea maximă a textului din celule.
Dacă textul introdus într-o celulă este mai lung de 64 caractere, navigatorul îl împarte automat în mai
multe rânduri. Atributul NOWRAP permite inhibarea acestei reguli, lăsând textul pe un singur rând,
indiferent de lungimea acestuia.

<table border="1">
<tr><td>Row 1 Cell 1</td><td>Row 1 Cell 2</td></tr>
<tr><td>Row 2 Cell 1</td><td>Row 2 Cell 2</td></tr>
</table>
Vizualizare
Row 1 Cell 1 Row 1 Cell 2
Row 2 Cell 1 Row 2 Cell 2

Continutul va fi plasat in interiorul casutelor tabelului. O casuta este ceea ce se afla intre <td> si </td>.
Atributul border stabileste latimea marginii tabelului.

Tabele asimetrice
Pentru a forma tabele asimetrice vom folosi "rowspan" pentru a traversa mai mute linii si "colspan"
pentru a traversa mai multe coloane. Deasemenea daca vrem ca prima linie sa serveasca de titluri pentru
toate coloanele vom folosi tagul <th>. Acestea vor fi scrise cu litere ingrosate dupa cum vom vedea in
exemplu urmator:

<table border="1">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr><td rowspan="2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td><td>Row 1 Cell 3</td></tr>
<tr><td>Row 2 Cell 2</td><td>Row 2 Cell 3</td></tr>
<tr><td colspan="3">Row 3 Cell 1</td></tr>
</table>

Vizualizare
Column 1 Column 2 Column 3
Row 1 Cell 2 Row 1 Cell 3
Row 1 Cell 1
Row 2 Cell 2 Row 2 Cell 3
Row 3 Cell 1

Spatierea celulelor
Cu ajutorul atributelor "cellpadding" si "cellspacing" vom defini distanta dintre celule. "cellspacing"
stabileste marimea marginii, iar "cellpandding" stabileste distanta dintre margine si continut. In exemplu
urmator a fost adaugata deasemenea putina culoare.

<table border="1" cellspacing="10"

bgcolor="rgb(0,255,0)">
<tr>
<th>Column 1</th> <th>Column 2</th>
</tr>
<tr><td>Row 1 Cell 1</td><td>Row 1 Cell 2</td></tr>
<tr><td>Row 2 Cell 1</td><td>Row 2 Cell 2</td></tr>
</table>

Exemplul .
<TABLE border="1">
<CAPTION> Exemplu de tabel</CAPTION>
<TR><TH rowspan="2">Disciplina<TH colspan="2">Anul de studiu
<TH rowspan="2">Forma de <BR>evaluare
<TR><TH>An I<TH>An II
<TR><TH>Sisteme de calcul<TD>sem I<BR>sem II<TD> -<TD>Examen
<TR><TH>Tehnologii Web<TD> -<TD>sem II<TD>Colocviu
</TABLE>

Figura 4. Rezultatul afişării codului anterior

Antetul tabelului se descrie prin tag-ul <TH>… </TH> care are aceleaşi atribute ca şi <TD>.
Textul din acest tag este automat centrat şi boldit.
Titlul tabelului se specifică prin tag-ul:
<CAPTION ALIGN=TOP|BOTTOM>… </CAPTION>

Exemplul. Tabel ale cărui celule conţin elemente de tipuri diferite: legături hipertext, imagini, formular,
liste şi text.
<HTML><HEAD>
<TITLE>Tabel in pagina HTML</TITLE>
</HEAD>
<BODY>
<TABLE BORDER=3 CELLSPACING=2 CELLPADDING=10 >
<TR ALIGN=CENTER>
<TD><A HREF="http://www.infocib.ase.ro">CIBERNETICA,
STATISTICA SI
</A>
<BR><A HREF="http://ie.ase.ro">INFORMATICA
ECONOMICA</A></TD>
<TD>Catedrele <BR>facultatii</TD>
<TD></TD>
</TR>
<TR>
<TD><IMG SRC="WWW.GIF"></TD>
<TD>
<UL>
<LI>Informatica Economica</LI>
<LI>Matematica</LI>
<LI>Statistica</LI>
</UL></TD>
<TD ALIGN=CENTER>
<A HREF ="http://www.infocib.ase.ro">
<IMG SRC="Revenire.gif" ></A></TD>
</TR>
<TR>
<TD ALIGN=CENTER><I>Introduceti numele</I>
<BR><I>dumneavoastra</I></TD>
<TD ALIGN=LEFT><FORM method="post"
action=" "><INPUT name="nume"></TD>
<TD ALIGN=CENTER><INPUT type="submit"
value="OK"></FORM></TD>
</TR>
<CAPTION align="bottom">Exemplu de <B>tabel</B></CAPTION>
</TABLE>
</BODY>
</HTML>
Figura 5. Tabel în pagină HTML

Un layout nu are prea multe optiuni. Pe de alta parte un table este foarte folositor. Intr-un tabel poate fi
introdus cam orice element, chiar si un alt tabel.
<table id="shell" bgcolor="black" border="1" heigh="200"
width="300">
<tr><td> <table id="inner" bgcolor="white" heigh="100"
width="100">
<tr><td>Tables inside tables!</td></tr>
</table> </td></tr></table>

HTML - layout standard

Un layout standard consta intr-un banner in zona de sus a paginii un meniu in partea din stanga iar zona
de continut in partea de dreapta-mijloc. Acesta este cel mai clasic layout pentru un website.
<table cellspacing="1" cellpadding="0" border="0"
bgcolor="black" id="shell" height="250" width="400">
<tr height="50"><td colspan="2" bgcolor="white">
<table title="Banner" id="banner" border="0">
<tr><td>Place a banner here</td></tr>
</table>
</td></tr> <tr height="200"><td bgcolor="white">
<table id="navigation" title="Navigation" border="0">
<tr><td>Links!</td></tr>
<tr><td>Links!</td></tr> <tr><td>Links!</td></tr>
</table>
</td><td bgcolor="white"> <table title="Content" id="content"
border="0"> <tr><td>Content goes here</td></tr>
</table>
</td></tr></table>
Aceasta este o abordare de baza, va daveni foarte complex pe masura ce veti adauga continut. Cu toate
acestea este important sa specificati inaltimea (height) si latimea (width). Cu cat veti fi mai clari in
stabilirea acestor atribute cat si a altora cu atat mai putine bug-uri veti avea.
<table id="shell" title="Shell" height="250" width="400"
border="0" bgcolor="black" cellspacing="1" cellpadding="0">
<tr height="50"><td bgcolor="white">
<table title="banner" id="banner">
<tr><td>Banner goes here</td></tr>
</table>
</td></tr> <tr height="25"><td bgcolor="white">
<table title="Navigation" id="navigation">
<tr><td>Links!</td> <td>Links!</td> <td>Links!</td></tr>
</table>
</td></tr> <tr><td bgcolor="white">
<table title="Content" id="content"> <tr><td>Content goes
here</td></tr>
</table> </td></tr></table>

HTML - Adauga culoare tabelelor

Acest exemplu arata cum sa colorezi un tabel de diverse culori, folosint atributul "bgcolor".
<table>
<tr bgcolor="#FFFF00"><td>This Row is Yellow!</td></tr>
<tr bgcolor="#AAAAAA"><td>This Row is Gray!</td></tr>
<tr bgcolor="#FFFF00"><td>This Row is Yellow!</td></tr>
<tr bgcolor="#AAAAAA"><td>This Row is Gray!</td></tr>
<tr bgcolor="#FFFF00"><td>This Row is Yellow!</td></tr>
<tr bgcolor="#AAAAAA"><td>This Row is Gray!</td></tr>
</table>

HTML - Font si background impreuna

Mai intai de toate vom pune in practica un exemplu de o tabla de scoruri facand un joc de culori pentru a
evidentia anumite aspecte.
<table bgcolor="#000000">
<tr><td bgcolor="#009900">
<font color="#FFFF00" align="right">Steaua</font></td>
<td><font color="#FFFFFF">27</font></td></tr>
<tr><td bgcolor="#0000FF">
<font color="#DDDDDD" align="right">Dinamo</font></td>
<td><font color="#FFFFFF">20</font></td></tr>
</table>
Exemplu de paragraf colorat pe fond gri
<table bgcolor="#777777">
<tr><td>
<p><font face="Monotype Corsiva, Verdana" size="4"
color="#00FF00"> This paragraph tag has... </font></p>
</td></tr>
</table>

In afara de o culoare solida pentu fond, se poate folosi la fel de bine o fotografie. Pentru a face acest lucru
urmareste cu atentie urmatorul exemplu.

<table height="100" width="150" background="../img/image.jpg"

> <tr><td>Acest text are drept fond o imagine </td></tr> </table>

Vizualizare
Formulare
Formularele (chestionarele) sunt instrumente oferite prin limbajul HTML pentru a genera pe ecran zone
de dialog cu cititorul documentelor Web. Un formular reprezintă doar o interfaţă pentru captarea
informaţiilor, el necesită elemente pentru tratarea datelor colectate.

Prelucrarea finală a datelor se execută pe server, de exemplu, prin programele denumite CGI (Common
Gateway Interface). Altfel spus, CGI asigură interacţiunea server-navigator în sensul personalizării
rezultatelor prin diverse prelucrări asupra elementelor din paginile Web.

Prin intermediul tag-urilor HTML se descriu zonele formularului, care vor fi completate de utilizator.

<FORM METHOD=tip_m ACTION=URL_cgi NAME=nf TARGET=cadr>

unde:

• Atributul METHOD=tip_m specifică modul cum se emite informaţia către server.

Valorile cel mai frecvent utilizate pentru tip_m sunt: GET şi POST.

Când se utilizează metoda GET şirul de caractere constituit din ansamblurile nume câmp şi valoare este
adăugat la URL-ul scriptului care se va executa. Separatorul între numele scriptului şi restul şirului de
caractere îl reprezintă caracterul ?. Deoarece majoritatea browserelor afişează URL curent, acest şir de
caractere va fi vizibil. Din această cauză se preferă metoda POST, când şirul de caractere este trimis către
server printr-o secvenţă HTTP specială. De exemplu, dacă tag-ul de început este:

<FORM METHOD=GET ACTION=http://www.ace.ucv.ro/dir/nume_script>

URL-ul pe care îl va apela clientul, după completarea formularului, are următoarea formă:

http://www.ace.ucv.ro/dir/nume_script? câmp1=valoare1&câmp2=valoare2&câmp3=valoare3…
• Atributul ACTION=URL_cgi indică locul unde se emite informaţia, unde se găseşte scriptul care se va
executa. Valoarea sa este reprezentată prin URL-ul scriptului.

• Atributul NAME=nf deţine două funcţii particulare:

− indică scriptului numele formularului care a trimis datele, în situaţia când mai multe formulare există în
acelaşi document;

− identifică un formular, prin numele său, pentru a putea fi referit prin funcţiile JavaScript.

• Atributul TARGET=cadr specifică fereastra sau cadrul (frame) în care se va afişa rezultatul execuţiei
scriptului. În absenţa atributului TARGET se înlocuieşte pagina curentă.

Textul încadrat de <FORM> şi </FORM> va conţine un ansamblu de comenzi: INPUT, SELECT etc.
Tag-uri pentru definirea intrărilor într-un formular

Sintaxa generală a tag-ului care defineşte un câmp pentru introducerea datelor într-un

formular este:

<INPUT TYPE="tip" NAME="nume_câmp" VALUE="val" SIZE="n" MAXLENGHT="m">

• Atributul TYPE specifică tipul intrării, care poate fi:

− text: text simplu, parolă, ascuns, multilinie;

− meniu: cu selectarea unei intrări sau selectare multiplă;

− butoane: casetă de control, radio, reset şi submit.

• Atributul NAME permite definirea numelor, în scopul identificării datelor care vor fi

trimise către server. Într-un formular se utilizează o singură dată acelaşi nume.

Celelalte atribute sunt dependente de tipul intrării.

Intrarea text este cel mai simplu tip de intrare într-un formular. Zona de introducere date
acceptă un cuvânt sau o linie de text. Atributele sunt:

• VALUE="val", atribut opţional care permite predefinirea conţinutului din câmpul text,

cu alte cuvinte, ceea ce o să apară pe ecran la prima activare a formularului;

• SIZE ="n", atribut opţional prin care se stabileşte lungimea câmpului de intrare text (în

caractere);

• MAXLENGTH ="m", atribut opţional prin care se limitează numărul caracterelor care pot

fi introduse (dacă se depăşeşte acest număr apare un semnal sonor).

Exemplul 7.
<FORM METHOD="Post" ACTION="http://www. …. ">

Care este numele de familie?

<INPUT TYPE="text" NAME="Nume_familie" VALUE="Nastase"

SIZE="10" MAXLENGTH="15">

</FORM>

Intrarea: password utilizează aceleaşi atribute ca şi intrarea text.

Exemplul 8.
<FORM METHOD="Post" ACTION="http://www.infocib …. ">

Introdu 8 caractere pentru parola:

<INPUT TYPE="password" NAME="parola" SIZE="8" MAXLENGTH="8">

</FORM>

Intrare: textarea se utilizează pentru introducerea unui text multilinie. De data aceasta tag-ul
<INPUT TYPE="text"> este înlocuit cu:

<TEXTAREA NAME="nume_câmp" ROWS="r" COLS="c"> [Text implicit] </TEXTAREA>

Atributele sunt:

• ROWS="r", specifică numărul de rânduri care pot fi afişate, din textul care se va

introduce;

• COLS="c", specifică numărul de coloane care pot fi afişate;

• Text implicit, text afişat iniţial.

Exemplul 9.
<FORM METHOD="Post" ACTION="http://www... ">

Transmiteti eventualele reclamatii

<TEXTAREA NAME = "Reclamatie" ROWS="3" COLS="40">

Reclamatii despre activitatea de seminar

</TEXTAREA>

</FORM>

Când numărul liniilor şi al coloanelor introduse depăşesc pe cele prevăzute a fi afişate se utilizează
scrollbars.

Intrarea meniu: SELECT are loc selecţia unei intrări din meniu. De data aceasta se utilizează

tag-ul SELECT în contextul:

<OPTION [VALUE="v"][SELECTED] > Nume_Optiune1

<OPTION > Nume_Optiune2

……..

</SELECT>

Atributele sunt:
• OPTION, prin care se specifică o opţiune a meniului;

• VALUE="v", atribut opţional prin care se specifică valoarea opţiunii emise spre server

(dacă nu se regăseşte acest parametru, numele opţiunii va fi emis ca valoare);

• SELECTED, atribut opţional prin care se specifică prima opţiune afişată a meniului (dacă

acest atribut lipseşte se va afişa prima opţiune din lista meniu).

Exemplul 10.
<FORM METHOD="Post" ACTION="http://www. …. ">

Cum evaluati cunoştintele dumneavoastra în domeniul calculatoarelor?

<OPTION>Foarte bun

<OPTION SELECTED>Bun

<OPTION VALUE="acceptabil">Mediu spre bun

<OPTION>Mediu

<OPTION>Slab

<OPTION>Foarte slab

</SELECT>

</FORM>

Intrare meniu: SELECT cu SIZE permite alegerea multiplă dintr-o listă de opţiuni.

Diferenţa faţă de situaţia anterioară constă în utilizarea opţiunilor: SIZE, prin care se specifică numărul de
linii afişate şi MULTIPLE, care permite o selecţie multiplă.

Exemplul 11.
<FORM METHOD="Post" ACTION="http://www.…. ">

Doreşti sa cumperi:

<SELECT MULTIPLE NAME="cumparaturi" SIZE="5">

<OPTION> Îmbracaminte

<OPTION VALUE="AL" SELECTED> Alimente

<OPTION> Rechizite şcolare

<OPTION SELECTED> Carti de specialitate

<OPTION> Echipament sportiv

<OPTION> Încaltaminte

</SELECT>

</FORM>

Intrarea buton: checkbox (casetă de control), principiul de introducere a datelor este: dacă

da, completează caseta. Pentru acest tip de intrare se revine la tag-ul:

<INPUT TYPE="checkbox" VALUE="v" CHECKED>

unde:
• VALUE="v", atribut opţional prin care se specifică valoarea trimisă către server, în cazul selectării
(dacă nu este definită, o valoare “on“ se emite către server);

• CHECKED, atribut opţional pentru selectarea în mod implicit a casetei.

Exemplul 12.
<FORM METHOD="Post" ACTION="http://www.…. ">

<INPUT TYPE="checkbox" NAME="donatie" CHECKED>Da, daca vrei sa faci o donatie

<P>

<INPUT TYPE="checkbox" NAME="lista e-mail">Da, daca vrei sa fii

inclus în lista de poşta

</FORM>

Intrare buton: radio selectează una dintre posibilităţile existente. Sunt cazuri când trebuie aleasă o
opţiune din mai multe, tipul câmpului de intrare este definit prin atributul TYPE="radio". Alte atribute:

• VALUE="v", atribut necesar pentru a indica valoarea asociată butonului, dacă acesta este selectat.
Valoarea specificată prin atributul NAME identifică blocul de butoane;

• CHECKED, buton radio selectat (se recomandă să se folosească acest atribut).

Exemplul 13.
<FORM METHOD="Post" ACTION="http://www…. ">

Calculatorul ruleaza sub:

<DL><DD> Sistemul de operare:

<P><INPUT TYPE="radio" NAME="Sistem_operare" VALUE="DOS"> DOS

<INPUT TYPE="radio" NAME="Sistem_operare" VALUE="WIN"> WINDOWS

<INPUT TYPE="radio" NAME="Sistem_operare"VALUE="W_NT" CHECKED>

WIN_NT

<P><DD> Ieşirea se face la:<P>

<INPUT TYPE="radio" NAME="Ieşire" VALUE="ecran">Ecran

<INPUT TYPE="radio" NAME="Ieşire" VALUE="Imprim">Imprimanta

</DL>

</FORM>

Intrarea buton: reset/submit, prin activarea acestor câmpuri are loc ştergerea tuturor zonelor de intrare
din formular (se vor regăsi valorile iniţiale), respectiv transmiterea datelor către server. Butonul SUBMIT
transferă informaţia, din formularul completat, la URL specificat prin atributul ACTION al tag-ului
<FORM…>. Atributul opţional VALUE se utilizează pentru afişarea unui text pe buton.
Exemplul 14.
<FORM METHOD="Post" ACTION="http://www.…. ">

---------------

<INPUT TYPE="reset" VALUE="Şterge câmpurile">

<INPUT TYPE="submit" VALUE="Trimite datele">

</FORM>

Intrarea: hidden transmite informaţie ascunzând textul.

Atributul VALUE="v" este necesar pentru a se specifica valoarea textului ascuns, care va fi

emis către server.

Exemplul 15.
<FORM METHOD="Post" ACTION="http://www.…. ">

Nu se va vedea nimic

<INPUT TYPE="hidden" NAME="nume" VALUE="ABCD">

</FORM>

Exemplul 16. Chestionar

<HTML>

<HEAD>

<TITLE> * Chestionar * </TITLE>

<BODY>

<H1 ALIGN=CENTER>CHESTIONAR</H1>

<UL>

<LI><P><H2>Care este domeniul dumneavoastra de

activitate:</H2>

<FORM METHOD="post" ACTION="http://www.…" >

<SELECT MULTIPLE NAME="domeniu" SIZE="6">

<OPTION>EDUCATIE/INVATAMINT

<OPTION>INFORMATICA

<OPTION>SANATATE

<OPTION>COMERT
<OPTION>SERVICII PUBLICE

<OPTION>FINANTE

<OPTION>CHIMIE

<OPTION>CONSTRUCTII

<OPTION>ALTE DOMENII

</SELECT>

<LI><P><H2>Care este functia pe care o îndepliniti: </H2>

<SELECT MULTIPLE NAME="functie" SIZE="6">

<OPTION>DIRECTOR

<OPTION>PROFESOR

<OPTION>ADMINISTRATOR

<OPTION>INGINER

<OPTION>MUNCITOR

<OPTION>CERCETATOR

<OPTION>SEF COLECTIV

<OPTION>ALTE

</SELECT>

<P>

<INPUT TYPE=SUBMIT VALUE=Tasteaza_pentru_Validare>

</FORM>

</HTML>
Figura 3. Formular în pagina HTML
CSS L1

Sintaxa CSS este urmatoarea

tag { atribut: valuare }

Observatii si reguli de scriere a codului CSS

In cazul in care valoarea elementului se compune din doua cuvinte le vom pune intre ghilimele

p { font-family: "times new roman"}

Daca vom scrie mai mult decat o proprietate le vom separa una de cealalta prin punct si virgula (;).

p { text-align: right;color: green; }

Recomandare:
Se recomanda sa se scrie toate aceste propietati una sub alta pentru o mai buna citire ulterioara a codului. De asemenea se
recomanda sa puneti punct si virgula dupa toate proprietatile elementului chiar daca este ultima dintr-un sir sau daca
elementul are o singura proprietate. Luand in calcul acestea codul CSS ar deveni urmatorul:

p{
text-align:right;
color:green;
font-family:"times new roman";
}

O alta regula CSS spune ca mai multe elemente cu aceleasi proprietati se pot grupa dupa cum urmeaza:
h1, h2, h3, p {
font-family:arial;
color:green;
}

Comentariile in CSS au aceasi functie ca si comentariile HTML, de a specifica ce am facut intr-o anumita expresie, sau
daca lipseste ceva sau orice altceva ne trece prin minte.

/Un comentariu se marcheaza asa/

p{
text-align:right;
color:green;
/*Un comentariu se marcheaza asa*/
font-family:"times new roman";
}
CSS - Class si Id
Pentru a stabili in CSS o clasa de elemente cu aceleasi proprietati vom folosi atributul class sau id.

Atributul class
Clasele de elemnte in CSS pot fi stabilite pentru un singur tag HTML sau pentru orice alt tag care are la atributul class
valoarea stabilita anterior. Desi suna putin cam complicat este chiar simplu. Sa ne uitam la urmatorul exemplu care
stabileste o clasa in CSS.

p.center {text-align:center}
p.right {text-align:right}
Cu aceasta bucata de cod CSS am stabilit doua clase de paragrafe, unul centrat si altul aliniat la dreapta. Acum le vom
aplica in HTML.

<p class="center">Paragraf centrat.</p>

<p class="right">Paragraf aliniat la dreapta.</p>
In cazul in care vrem sa folosim aceasi clasa pentru mai multe elemente vom elimina tagul <p> din numele clasei.
Sa zicem ca vrem sa centram mai multe elemente. De exemplu un div, un titlu, un paragraf si o imagine. Putem folosi aceasi
clasa.

.center {text-align:center}
Ar trebui mentionat ca numele clasei ".center", este un nume generic si nu are nimic de-a face cu actiunea asupra unui tag.
Cu toate acestea, va sfatuiesc sa folositi nume descriptive si intuitive. Sunt mult mai simple si servesc mai bine la
intelegerea ulterioara a codului CSS
Nota:
Inceperea numelui cu un numar NU este recomandata. Clasele denumite gen: ".165464" sau ".6ceva" sunt interpretate doar
de IE

CSS - Id
Id-ul se foloseste la fel ca si class. De fapt singura diferenta intre class si id este sintaxa de definire. Vom folosi un diez (#)
in loc de punct pentru a defini id-ul in CSS

#center {
text-align:center;
color:blue;
font-family:"sans serif";
}

CSS - Extern intern sau inline

In momentul de fata codul CSS se poate stoca sau pune in trei locuri si anume:

- fisier extern (.css)

- in head
- in tagul care se vrea personalizat (inline)
Fisier .css extern
In general fisierele externe de CSS sunt cele mai folosite. Este de recomandat sa folositi aceasta metoda pentru o mai
simpla modificare a intregului website. In acest fel se poate modifica un site intreg schimband continutul unui singur fisier
.css. Singura conditie este ca toate paginile site-ului sa contina in sectiunea head tag-ul <link>.

Un fisier CSS se poate scrie in orice editor de text, notepad, notepad++, word, macromedia, etc dar trebuie salvat cu
extensia ".css"
Un exemplu simplu de cod CSS ar fi urmatorul :

body { background-image: url("img/imagine.png"); }

hr { color: #efefef;}
p { margin-left: 15px;}
Observatie: NU lasati spatiu intre numarul specificat si unitatea de masura. Folosind "margin-left:15 px;" in loc de "margin-
left:15px;" vom genera erori in Firefox si Opera.

CSS intern
Codul CSS in head, nu ar trebui folosit prea mult, cu exceptia faptului ca aveti o pagina care are nevoie de un stil propriu
si nu il imparte cu nici o alta pagina.
Codul CSS intern este acelasi ca si la cel introdus intr-un CSS extern., cu exceptia unor taguri speciale care il incapsuleaza.
Dar sa aruncam o privire la exemplul urmator.

<head>
<style type="text/css">
body { background-image: url("img/imagine.png"); }
hr { color: #efefef; }
p { margin-left:15px;}
</style>
</head>

Dupa cum am mentionat anterior, pentru a plasa CSS in HTML vom folosi tagul <style> impreuna cu atributul
type="text/css", pe care le vom pune in sectiunea head a documentului HTML.

CSS inline
CSS inline nu inseamna nici mai mult nici mai putin decat CSS in interiorul tagului HTML. Folosind CSS-ul sub aceasta
forma vom pierde toate avantajele pentru care a fost creat si anume pentru a nu amesteca tagurile HTML cu formatarea si
prezentarea lor. Exista totusi si avantaje in a folosi CSS-ul in aceasta maniera dupa cum vom vedea. Dar mai intai sa vedem
cum anume se poate introduce CSS intr-un tag HTML.

<p style="text-align:right;color:green;font-family:`times new

roman`;margin-left:15px;">Acesta este un paragraf formatat cu ajutorul
CSS.</p>

Observatie:
Dupa cum se observa in exemplul anterior valoarea fontului este o valoare compusa din trei cuvinte. In acest caz in loc de
ghilimele duble am folosit ghilimele simple pentru a evita conflictul cu ghilimele duble folosite pentru a incapsula valoarea
atributului style.
Sa mai aruncam o privire peste exemplul in discutie:

style="text-align:right;color:green;font-family:`times new
roman`;margin-left:15px;"
Daca am folosii acelasi tip de ghilimele peste tot, browser-ul ar intrerpreta sfarsitul valorii inainte de vreme. Iata bucata de
cod CSS care va fi interpretata de browser:

style="text-align:right;color:green;font-family:"
Restul codului CSS fiind ignorat.

Prevalenta metodelor de a insera CSS in documentele HTML

Codul CSS se poate insera in HTML dupa cum urmeaza:
- fisier extern (.css)
- in head
- in tagul care se vrea personalizat (inline)
Vom adauga acum si cea de-a 4-a modalitate si anume:
- toate trei anterioare.
Ce se intampla insa atunci cand formatam un element si folosim mai multe modalitati de inserare a CSS-ului?
Ordinea de reproducere in browser va fi urmatoarea:
1. Formatare CSS inline (in interiorul tag-ului HTML)
2. Formatere CSS interna (in sectiunea head a documentului)
3. Formatare CSS externa (fisier .css extern)
4. Standardul browser-ului (valori CSS atribuite standard)
Concluzie
Formatarea inline anuleaza toate celelalte expresii CSS de formatare. Iar standardele de formatare ale browser-ului intervin
doar atunci cand nu este specificata o alta formatare CSS.
Exceptie:
In cazul in care tagul <link> este pus dupa tagul <style> codul CSS aflat in fisierul .css extern va anula codul CSS intern.
<head>
<style type="text/css">
body { background-image: url("img/imagine.png"); }
hr { color: #efefef;}
p { margin-left: 15px;}
</style>
<link rel="stylesheet" type="text/css" href="fisier_extern.css" />
</head>

Exemplu 1:
<head>
<title> Formatarea textului in head</title>
<style type="text/css">
p {color: white; font-family: verdana,arial; font-size:14px; background-color: purple;}
</style>
</head>
<body>
...
<p>Text imprimat pe fond purpuriu.</p>
...
Rezultat:

Exemplu2:
<head><title>Exemplu putin mai complicat</title>
<style type="text/css">
h1 { font-size: x-large; color: red }
h2 { font-size: large; color: blue }
body {background-color: black;
color: white;
}
p{
color: green;
font-family: tahoma,arial,verdana;
font-size: 12px;
}
</style>
</head>
<body>
Textul de aici e alb pe fond negru
<p>Text verde imprimat pe fond negru.</p>
Si textul de aici e alb pe fond negru
<p>Alt text verde imprimat pe fond negru.</p>
</body>
Observaţie: Dacă zona de definire a stilurilor ataşate diferitelor marcaje este salvată separat, într-un fişier
denumit de exmplu stil.css, pentru a impune într-o pagină web a saitului aceleaşi modificări, se va include în
secţiunea <head> a acesteia un marcaj <link> în care se va specifica fişierul care conţine definiţiile de stiluri, ca
în exemplul de mai jos:
Exemplu 3:
<head><title>Exemplu fisier extern</title>
<link rel="stylesheet" type="text/css" href="stil.css" />
</head>
<body>
.....
</body>

Avantajul acestei soluţii constă din faptul că aspectul paginilor sitului în care este inclus fişierul stil.css poate
uşor modificat, prin simpla editare a regulilor conţinute de acesta.

CSS Background
Pentru a formata background-ul elementelor HTML cu ajutorul CSS vom folosi urmatoarele atribute
- background-color
- background-image
- background-repeat
- background-attachment
- background-position

Background solid

body { background-color: #efefef; }

h1 { background-color:red, }
p { background-color:rgb(255,0,0); }
div { background-color: black; }
Dupa cum se observa culoarea background-ului poate fi exprimata in sistemul hexadecimal, RGB sau folosind numele in
engleza.

Background imagine
Ca si valoare standard browserul va repeta imaginea pe latimea si lungimea pagini pentru a crea background-ul

body { background-image: url("o_imagine.gif"); }

Pentru a repeta imaginea doar pe verticala sau doar pe orizontala vom folosi urmatorul cod CSS:

body
{
background-image:url("o_imagine.gif");
background-repeat:repeat-x;
}

Aceasta functie speciala a CSS-ului se poate folosi la crearea background-urilor cu efect gradient. Pentru a repeta
inaginea pe verticala in loc de "repeat-x" vom folosi "repeat-y".
Daca nu vrei ca imaginea sa se repete trebuie sa specifici acest lucru

body
{
background-image:url("o_imagine.gif");
background-repeat:no-repeat;
}
Odata ce am specificat ca nu vrem ca imaginea sa se repede si in cazul in care nu specificam altceva browserul va adauga:
background-position: top left; ca valoare standard.

CSS - background-attachment
CSS background-attachment se foloseste pentru a pune ca background o imagine care se misca impreuna cu continutul
sau pur si simplu este fixa. Sintaxa CSS ar fi urmatoarea:

body
{
background-image:url("o_imagine.png");
background-repeat:no-repeat;
background-attachment:fixed;
}

Scurtarea codului CSS

body {
background-color:#ffffff;
background-image:url("o_imagine.gif");
background-repeat:no-repeat;
background-position:top right;
}
Tot ce am scris mai sus se poate rezuma la expresia CSS de mai jos

body { background-color: #ffffff url("o_imagine.gif") no-repeat top

right; }

Cand se foloseste varianta scurta a acestor atribute ordinea lor va fi mereu urmatoarea:
-background-color
-background-image
-background-repeat
-background-attachment
-background-position
Nu conteaza daca unul sau mai multe valori lipsesc atata timp cat se pastreaza aceasta ordine.

Unităţi de măsură
Unele dintre proprietăţile elementelor conţinute într-o pagină web necesită scrierea unei dimensiuni. Cu excepţia valorilor
nule, după dimensiune trebuie scrisă unitatea de măsură.

U.M. Explicaţie
% procent. Ex: p.big {line-height: 200%}
in inch. Ex: h2 {margin: 0.5in;}
cm centimetri. Ex. h2 {margin: 0.5cm;}
mm milimetri
em 1 em este egal cu mărimea normală a fontului. Ex. h1 {font-size: 2em;} (identic cu font-size:200%)
pt point 1pt=1/72in
pc pica 1pc=12px
px pixeli. Exemplu: p {font-size: 12px}

Exemplu:
p {margin: 0 20px 0 20px}
Fonturi
În CSS fontul este definit prin denumire, dar, deoarece pe calculatorul pe care se afişează pagina web fontul indicat poate
lipsi, după denumirea fontului (fonturilor) se precizează familia din care acesta face parte. Proprietatea utilizată este
fontfamily.

Fontul Familia
"Times New Roman", Gramond, Georgia serif

Arial, Verdana, Helvetica sans-serif

Courier, "Courier New" monospace

Exemplu:
h1 {font-family: verdana,helvetica, sans-serif;}
h2 {font-family: "Times New Roman", serif;}

Majoritatea paginilor web folosesc Verdana.

Înclinarea caracterelor se stabileşte cu ajutorul proprietăţii font-style, valorile posibile fiind normal, italic sau oblique.

Exemplu:
h2 {
font-family: "Times New Roman", serif;
font-style: italic;
}

Folosind proprietatea font-variant se poate impune scrierea cu majuscule mici (font-variant: small-caps) sau normal (font-
variant: normal). Scrierea bold se poate impune folosind font-weight: Proprietatea poate avea valorile bold sau normal.
Dimensiunea caracterelor poate fi impusă folosind proprietatea font-size. De obicei mărimea este definită în pixeli (px) sau
procentual (% sau em). Este recomandată varianta definirii procentuale deoarece în acest caz rămâne posibilă mărirea
fontului folosind opţiunile programului de navigare. Varianta definirii mărimii caracterelor în unităţi absolute (px, in, cm,
etc.) se aplică în cazurile în care modificarea mărimii fontului în momentul afişării ar afecta grav aspectul acesteia. De
exemplu textul plasat deasupra unui buton desenat nu trebuie să poată fi mărit.

Exemplu:
h1 {font-family: arial, verdana, sans-serif;
font-size: 150%; font-weight: bold}
h2 {font-family: "Times New Roman", serif;
font-size: 120%;}

h1 { font-size: 30px; }
h2 { font-size: 20px; }
p { font-size: 12px; }

Formatarea textului
Formatarea textului se realizează cu un set de proprietăţi care permit diverse tipuri de alinieri, indentări şi spaţieri.
Indentarea textului se realizează folosind proprietatea text-indent. Efectul indentării este decalarea poziţiei de început a
primei linii a fiecărui paragraf cu o mărime impusă.

Exemplu:
p{
text-indent: 50px;
}
Alinierea textului se realizează folosind proprietatea text-align. Valorile posibile ale proprietăţii sunt: left, right, center sau
justify.
Exemplu:
th {
text-align: right;
}
td {
text-align: center;
}
p{
text-align: justify;
}
Sublinierea sau bararea textului se realizează folosind proprietatea text-decoration. având valorile posibile none, underline
(subliniat), overline (barat), line-through (tăiat).

Exemplu:
h1 {
text-decoration: underline;
}
h2 {
text-decoration: overline;
}
h3 {
text-decoration: line-through;
}

Modificarea distanţei dintre caractere se realizează folosind proprietatea letter-spacing.

Exemplu:
h1 {
letter-spacing: 6px;
}
p{
letter-spacing: 3px;
}
Controlul scrierii cu majuscule se realizează folosind proprietatea text-transform. Valorile posibile sunt:
- capitalize - prima literă va fi majusculă
- uppercase - toate literele vor fi majuscule,
- lowercase - toate literele vor fi mici,
- normal - caracterele vor fi scrise normal.

p { text-transform: uppercase; }
p { text-transform: lowercase; }
p { text-transform: capitalize; }

CSS - incadrarea continutului.

Folosind CSS putem incadra contiunutul, putem stabilii distanta intre continut si border intre border si marginea paginii.
Vom folosi urmatoarele atribute:
- margin - distanta intre border si marginea paginii
- border - marginea si cutia care incadreaza continutul
- padding - distanta intre border si continut
- content - continutul propriu-zis (text, imagini, etc)
Vom aplica atributele de mai sus sub forma:
div {
width:200px;
padding:15px;
border:5px solid;
margin:15px;
}

Observatie:
Vom considera exemplul de mai sus un element. Trebuie mentionat ca acest element are o latime totala de 270px
(200+15x2+5x2+15x2=270px).
Concluzie:
latimea continutului + left padding + right padding + left border + right border + left margin + right margin = Latimea
totala
si
inaltimea continutului + top padding + bottom padding + top border + bottom border + top margin + bottom margin =
Inaltimea totala
Aceste doua formule trebuiesc luate in considerare atunci cand stabilim inaltimea si latimea continutului.
Nota:
Trebuie mentionat aici ca Internet Explorer, include padding-ul si border-ul in latime (width) in cazul in care acesta este
specificata. Aceasta eroare se corecteaza introducand un DOCTYPE la inceputul documentului.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0

Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
div {
width:200px;
padding:15px;
border:5px solid;
margin:15px;
}
</style>
</head>

CSS - Border Style

Css border nu este altceva decat o bordura de jur-imprejurul continutului. Bordurile realizate cu ajutorul CSS vor fi puse
in scena cu ajutorul atributului border-style cu urmatoarele valori:
- none
- solid
- dotted
- dashed
- double
- groove
- ridge
- inset
- outset
Valorile precum groove, ridge, inset si outset pot genera borduri CSS 3D daca sunt alese culorile corecte

CSS - Border Width

Lungimea bordurii in CSS este determinata de atributul border-width. Acest atribut nu va functiona in cazul in care nu este
specificat in prealabil atributul border-style. Vom folosi ca unitati de masura pixelii sau putem pune valorile thin, medium
sau thick. Iata si un exemplu:

div {
border-style:solid;
border-width:2px;
}

CSS Border Color

Culoarea borduri va fi specificata de catre atributul border-color in sistemul hexazecimal, RGB, sau pur si simplu numind
culorile. De retinut ca se poate stabili ca bordura sa fie transparenta in cazul in care este nevoie.
Pentru a putea stabilii culoarea bordurii in CSS trebuie mai intai sa stabilim stilul acesteia dupa cu urmeaza.

div {
border-style:solid;
border-color:red;
}
Observatie:
Se pot deasemenea stabilii proprietati individuale pentru fiecare dintre laturile chenarului obtinut.

div {
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;
}

Forma scurta de a scrie toate aceste valori intr-o singura expresie este

div {
border-style:dotted solid;
}
Folosind forma scurta de a scrie CSS putem stabill aceste valori mult mai simplu economisind timp. Iata cateva exemple:
- div { border-style:dotted solid double dashed; }
Bordura de sus este "dotted", cea din stanga "solid", cea din dreapta "double" iar cea de jos este "dashed".
- div { border-style:dotted solid double; }
Bordura de sus este punctata, cea din dreapta si din stanga sunt solide iar bordura de jos este dubla.
- div { border-style:dotted solid; }
Bordurile de sus si de jos sunt punctate iar cele din dreapta si din stanga sunt solide.
- div { border-style:dotted; }
Desi deasupra s-a luat un exemplu de baza folosind border-style, aceleasi reguli se aplica la toate celelalte atribute
mentionate.
Observatie:
O alta metoda de a coda in CSS toate proprietatile bordurii intr-o singura expresie este:

border: 4px dotted #EFEFEF;

De mentionat ca ordinea va fi mereu aceasta.
CSS - Outline
Atributul outline a aparut odata cu introducerea CSS2 si are urmatoarele proprietati:
- outline
- outline-color
- outline-style
- outline-width
Outline deseneaza un chenar de jur imprejurul continutului

Tabelul de referinte pentru valori disponibile atributului outline.

Proprietate Descriere Valuare

outline Setează toate proprietăţile outline într-o declaraţie outline-color
outline-style
outline-width
inherit
outline-color Setează culoarea unui outline color_name
hex_number
rgb_number
invert
inherit
outline-style Setează stilul unui outline none
dotted
dashed
solid
double
groove
ridge
inset
outset
inherit
outline-width Setează latimea unui outline thin
medium
thick
length
inherit

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
p
{
border:1px solid red;
outline:green dotted thick;
}
</style>
</head>
<body>
<p><b>Nota:</b> IE8 suporta proprietatile outline numai daca este specificat un !DOCTYPE.</p>
</body>
</html>

CSS - Margin
Atributul margin stabileste o distanta in afara bordurii stabilite anterior. Marginea definita nu va avea nici o culoare, cu alte
cuvinte va fi transparenta.
Pentru a defini aceasta margine vom stabili valoarea fiecarei margini in parte cea de sus (margin-top) marginea din dreapta
si din stanga ( margin-right si respectiv margin-left), si cea de jos (margin-bottom). Retineti aceasta ordine intrucat va fi
utila atunci cand stabiliti margin folosind expresia scurta:
margin: 30px 20px 30px 50px; (sus, dreapta, stanga, jos)
margin: 30px 20px 50px; (sus, dreapta si stanga, jos)
margin: 30px 20px (sus si jos, dreapta si stanga)
margin: 30px (sus jos dreapta si stanga - cu alte cuvinte o spatiere de 30 de pixeli de jur imprejurul bordurii)

CSS - Padding
Padding se refera la regiunea dintre continut si bordura (border). Vom stabili aceasta regiune in acelasi fel ca si la atributul
margin, folosind:
- padding-top:10px;
- padding-bottom:10px;
- padding-right:20px;
- padding-left:20px;
Expresia CSS sub forma scurta se formeaza ca si la margin

padding:25px 50px 75px 100px;

CSS - Liste
In HTML avem doua tipuri de liste:
- ordonate - numere, numere romane sau litere
- neordonate - cerculete, buline, patratele etc.
Atributul list din CSS permite modificarea tipului de lista sau folosirea unei imagini ca marcator.
Un exemplu practic de a folosi atributul list este:

ul {list-style-type:disc;}
ol {list-style-type:upper-roman;}
Pentru a folosi o imagine ca marcator vom folosi:

ul { list-style-image:url("image.png"); }
Mentiune:
NU toate browser-ele vor afisa imaginea in aceasi pozitie. De exemplu Internet Explorer si Opera va afisa imaginea ceva
mai sus decat Firefox si Google Chrome.
Pentru a plasa imaginea in pozitia dorita si sa ramana acolo in orice navigator vom:
- folosi imaginea ca background fara sa o repetam.
- vom stabili distanta fata de marginea din stanga si cea de sus.
- vom stabili ca lista sa nu aibe nici un marcator si vom egala margin si padding cu 0 pentru a fi afisat la fel in toate
browser-ele.
ul {
list-style-type:none;
padding:0px;
margin:0px;
}
li {
background-image:url(image.png);
background-repeat:no-repeat;
background-position:0px 5px;
padding-left:15px;
}

Alinierea unei liste

ul.inside {list-style-position:inside}
ul.outside {list-style-position:outside}
Valuarea standard pentru o lista este outside. O valuare precum inside va impinge lista spre interiorul paginii.

CSS - Forma scurta a unei liste

list-style:none inside url("arrow.gif");

Va trebuii sa pastram ordinea mentionata mai sus.

CSS - Pozitionare
Pozitionarea elementelor este de patru tipuri.

- statica
- fixa
- relativa
- absoluta

CSS - Pozitionare statica

Pozitionarea statica este valoarea standard in browser atribuita unui element cand vine vorba de pozitionare.
CSS - Pozitionare fixa
Folosind valuarea "fixed" pentru atributul "position" vom obtine un element pe pagina care are o pozitie fixa indiferent de
celelalte elemente. Cu altea cuvinte elementul pluteste in pozitia stabilita chiar daca dam de rotita mouseului. Folosind
valoarea "fixed" elementele se pot suprapune, celelalte elemente comportandu-se ca si cand elementul fix nu ar exista.

.pozitie_fixa {
position:fixed;
top:25px;
right:10px;
}

Mentiune: IE nu interpreteaza acest atribut daca nu este specificat un !DOCTYPE.

CSS - Pozitionare relativa

Pozitionarea relativa se refera la o pozitie diferita fata de pozitia statica
.pozitionare_relativa {
position:relative;
left:15px;
top:30px;
}
Valorile lui top si left pot fi deasemenea negative.

.pozitionare_relativa{
position:relative;
left:-15px;
top:-30px;
}
Folosind aceasta pozitionarea relativa pot fi suprapuse mai multe elemente.

CSS - Pozitionare absoluta

Elementele pozitionate absolut vor fi pozitionate in functie de primul element parinte care are o pozitionare non-statica.
Daca nu este gasit un astfel de element, elementul parinte va fi considerat <html>.
Spatiul rezervat elementelor pozitionate absolut nu va fi pastrat. In acest sens celelalte elemente se comporta ca si cand
elementul pozitionat absolut nu ar exista. In felul acesta se pot suprapune mai multe elemente.

p
{
position:absolute;
left:200px;
top:200px;
}

Suprapunerea mai multor elemente in CSS

Cu ajutorul CSS pot fi suprapuse mai multe elemente.
Vom folosi atributul z-index pentru a specifica ordinea elementelor. z-index poate avea atat valori pozitive cat si negative.

<html>
<head>
<style type="text/css">
img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
</style>
</head>
& <body>
<h1>Suprapunerea mai multor elemente in CSS</h1>
<img src="imagine.jpg" width="100" height="100" />
<p>Vom folosi atributul z-index pentru a specifica ordinea elementelor.
z-index poate avea atat valori pozitive cat si negative.</p>
</body>
</html>
Datorita faptului ca "z-index"-ul imagini are valoarea -1, imaginea va fi pozitionata in spatele textului. De aici regula ca un
element cu "z-index" mai mare va fi pozitionat in fata unui element cu "z-index" mai mic.

Exemplul 1 = border-width=
<html>
<head>
<style type="text/css">
p.one
{
border-style:solid;
border-width:5px;
}
p.two
{
border-style:solid;
border-width:medium;
}
p.three
{
border-style:solid;
border-width:1px;
}
</style>
</head>

<body>
<p class="one">Scrieti un text.</p>
<p class="two">Scrieti un alt text.</p>
<p class="three">Hai! Mai scrieti un text.</p>
<p><b>Nota:</b> Proprietatea "border-width" nu se poate folosi fara sa fi selectat mai intai stilul
bordurii cu "border-style".</p>
</body>
</html>
Exemplul 2= border-color=
<html>
<head>
<style type="text/css">
p.one
{
border-style:solid;
border-color:red;
}
p.two
{
border-style:solid;
border-color:#98bf21;
}
</style>
</head>

<body>
<p class="one">O bordura rosie, groasa.</p>
<p class="two">O bordura verde, groasa</p>
<p><b>Note:</b> Si aceasta proprietate se utilizeaza similar cu cea de la exemplul 1.</p>
</body>
</html>

Exemplul 3 = borduri diferite=

<html>
<head>
<style type="text/css">
p
{
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;
}
</style>
</head>
<body>
<p> In acest exemplu s-au ales 2 borduri diferite.</p>
</body>
</html>

Exemplul 4 =outline=
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
p
{
border:1px solid red;
outline:green dotted thick;
}
</style>
</head>
<body>
<p><b>Nota:</b> IE8 suporta proprietatile outline numai daca este specificat un !DOCTYPE.</p>
</body>
</html>

Exemplul 5 =margin=
<html>
<head>
<style type="text/css">
p
{
background-color:yellow;
}
p.margin
{
margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;
}
</style>
</head>
<body>
<p>In acest paragraf marginile nu sunt specificate.</p>
<p class="margin">Dar in acest paragraf s-au specificat marginile.</p>
</body>
</html>

Exemplul 6 =padding=
<html>
<head>
<style type="text/css">
p
{
background-color:yellow;
}
p.padding
{
padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;
}
</style>
</head>

<body>
<p>La acest paragraf nu s-a specificat padding-ul.</p>
<p class="padding">Aici s-a utilizat padding.</p>
</body>
</html>

Exemplul 7 =Liste =
<html>
<head>
<style type="text/css">
ul.a {list-style-type:circle;}
ul.b {list-style-type:square;}
ol.c {list-style-type:upper-roman;}
ol.d {list-style-type:lower-alpha;}
</style>
</head>
<body>
<p>Exemplu de liste neordonatea:</p>

<ul class="a">
<li>Cafea</li>
<li>Ceai</li>
<li>Coca Cola</li>
</ul>

<ul class="b">
<li>Cafea</li>
<li>Ceai</li>
<li>Coca Cola</li>
</ul>
<p>Exemplu de liste ordonate:</p>

<ol class="c">
<li>Cafea</li>
<li>Ceai</li>
<li>Coca Cola</li>
</ol>

<ol class="d">
<li>Cafea</li>
<li>Ceai</li>
<li>Coca Cola</li>
</ol>
</body>
</html>

Bara de navigare in CSS

In general pentru a crea o bara de navigare fie ea orizontala sau un meniu vertical sunt folosite listele HTML care ulterior
sunt personalizate folosind CSS. Linkuri normale in interiorul tagului <li> care vor fi incapsulate in tagul <ul>
Am atasat mai jos codul html necesar:
<ul>
<li><a href="#">Acasa</a></li>
<li><a href="#">Articole</a></li>
<li><a href="#">RSS feed</a></li>
<li><a href="#">Contact</a></li>
</ul>
Vom folosi acum CSS pentru a da forma listei de mai sus, si anume list-style-type:none - pentru a inlatura "bulinele"
specifice listei. Deasemenea vom inlatura marginea si pading-ul pe care browser-ul il atribuie ca valoare standard.

ul{
list-style-type:none;
margin:0;
padding:0;
}
Codul CSS de mai sus poate fi folosit atat pentru meniuri verticale cat si pentru bara orizontala.

CSS - Bara verticala de meniu

Pentru a crea un meniu vertical de linkuri nu trebuie decat sa reprezentam linkurile ca un block si sa stabilim latimea
blocului.

a{
display:block;
width:100px;
}
***Nota
Desi nu este absolut obligatoriu sa stabiliti latimea blocului de elemente, se recomanda insa, sa nu omiteti acest detaliu. In
browsere mai vechi bara de linkuri poate fi distorsionata.
In principiu codul de mai sus este de ajuns pentru a crea un meniu vertical. In continuare aveti insa un meniu terminat si
finisat decent.

Model
Meniu Vertical
<html>
<head>
<style type="text/css">
ul {
list-style-type:none;
margin:0;
padding:0;
}
a:link,a:visited {
display:block;
font-weight:bold;
font-size:17px;
color:#fff;
background-color:#d2691e;
width:200px;
padding:8px;
text-decoration:none;
}
a:hover,a:active {
background-color:#daa520;
}
</style>
</head>
<body>
<ul>
<li><a href="#">Acasa</a></li>
<li><a href="#">Articole</a></li>
<li><a href="#">RSS Feedt</a></li>
<li><a href="#">Contact</a></li>
</ul>
</body>
</html>

CSS - Bara orizontala de meniu

Pentru a crea o bara de meniu orizontala in css putem folosi, ori atributul inline, pentru a forta elementele listei sa fie
insirate pe aceasi line, ori atributul floating pentru a forta elementele listei sa fie afisate unul langa celalalt.

Folosind inline
Pentru a crea o bara de meniuri orizontale cu atributul inline nu trebuie decat sa adaugam urmatoarea linie de cod CSS.

l i { display:inline; }

Ca si afisare standard elementele unei liste sunt afisate in bloc. Linia de cod CSS de mai sus nu face decat sa elimine enter-
urile inainte si dupa acestea afisand link-urile pe aceasi linie.

Folosind float
Vom folosi atributul float pentru a afisa elementele listei unul langa celalalt. Vom folosi de asemenea atributul
display:block; pentru a afisa linkul ca si un buton si vom stabili latimea acestuia.
Iata codul CSS aferent.

li {
float:left;
}
a{
display:block;
width:60px;
}
Odata ce am reprezentat elementul in bloc este obligatoriu sa stabilim latimea acestuia. In caz contrar acesta va ocupa toata
latimea disponibila.
Codurile afisate anterior sunt suficiente pentru a crea o bara de meniuri orizontala folosind CSS.
Modele de meniu orizontal

Meniu construit folosind inline

<html>
<head>
<style type="text/css">
ul {
list-style-type:none;
margin:0;
padding:0;
padding-top:6px;
padding-bottom:6px;
}
li {
display:inline;
}
a:link,a:visited {
font-weight:bold;
font-size:17px;
color:#FFFFFF;
background-color:#d2691e;

text-align:center;
padding:6px;
text-decoration:none;
}
a:hover,a:active {
background-color:#daa520;
}
</style>
</head>
<body>
<ul>
<li><a href="#">Acasa</a></li>
<li><a href="#">Articole</a></li>
<li><a href="#">RSS Feed</a></li>
<li><a href="#">Contact</a></li>
</ul>
</body>
</html>
Meniu construit folosind float
<html>
<head>
<style type="text/css">
ul {
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li {
float:left;
}
a:link,a:visited {
display:block;
width:120px;
font-weight:bold;
font-size:17px;
color:#FFFFFF;
background-color:#d2691e;
text-align:center;
padding:4px;
text-decoration:none;
}
a:hover,a:active {
background-color:#daa520;
}
</style>
</head>
<body>
<ul>
<li><a href="#">Acasa</a></li>
<li><a href="#">Articole</a></li>
<li><a href="#">RSS Feed</a></li>
<li><a href="#">Contact</a></li>
</ul>
</body>
</html>
AI L4 CSS

A. Chenare si margini

Fiecare element este incadrat intr-o caseta care este compusa din urmatoarele elemente:

marginea (margin) este spatiul exterior chenarului pana la celelalte elemente

chenarul (border) este o bordura care inconjoara elementul
completarea (padding) stabileste distanta dintre continut si chenar
continutul include informatia utila (text, tabele, imagini, formulare, etc.)

Originea elementului este considerat coltul din dreapta sus fata de care se vor raporta toate
dimensiunile prezentate in continuare.

width si height
Latimea si inaltimea unui element sunt stabilite in HTML prin atributele width si height. Aceste
atribute pot fi adaugate sau suprascrise prin comenzi CSS.

Exemplu: folosind comenzi CSS modificam dimensiunile originale ale imaginii

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

</style>
</head>
<body>
<img src="margini.gif">
</body>
</html>

padding si margin
padding stabileste distanta dintre obiect si chenar simultan pentru toate laturile. Distantele pot fi
stabilite si individual folosind padding-top, padding-bottom, padding-left saupadding-right.
margin stabileste distanta dintre chenar si celelalte obiecte din pagina simultan pentru toate
laturile. Distantele pot fi stabilite si individual folosind margin-top, margin-bottom,margin-
left sau margin-right.

Valorile pentru padding si margin pot fi exprimate in: px (pixeli), in (inci), pt (puncte) sau cm
(centimetri).

Exemplu: folosind comenzi CSS imaginea este pozitionata la 100px fata de latura stanga si 25px
fata de latura de sus

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

</style>
</head>
<body>
<img src="margini.gif">
</body>
</html>

border
Netscape si Internet Explorer afiseaza diferit chenarele. Comanda CSS pentru definirea
chenarului este border avand proprietatile asociate width, style si color. Pentru a fi siguri ca
aceste proprietati functioneaza atat in Internet Explorer cat si in Netscape trebuie sa declaram
pentru border cel putin width si style.

border-width stabileste grosimea chenarului si poate fi exprimata

in px (pixeli), pt (puncte),cm (centimetri) sau in (inci).

border-style stabileste tipul chenarului si poate

fi dotted, dashed, solid, double, groove,ridge, inset si outset.

border-color stabileste culoarea chenarului si poate fi exprimata prin valoare hexazecimala sau
in cuvinte.

Exemplu: definim noua clase utilizand proprietatile border-width border-style si border-color

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

</style>
</head>
<body>
<div class="clasa1">border-width: 2px; border-style: dotted; border-color: red;</div><br>
<div class="clasa2">border-width: 3px; border-style: dashed; border-color: blue;</div><br>
<div class="clasa3">border-width: 2px; border-style: solid; border-color: green;</div><br>
<div class="clasa4">border-width: 3px; border-style: double; border-color: black;</div><br>
<div class="clasa5">border-width: 2px; border-style: groove; border-color: silver;</div><br>
<div class="clasa6">border-width: 3px; border-style: ridge; border-color: lime;</div><br>
<div class="clasa7">border-width: 2px; border-style: inset; border-color: yellow;</div><br>
<div class="clasa8">border-width: 3px; border-style: outset; border-color: aqua;</div><br>
<div class="clasa9">border-width: 2px; border-style: hidden; border-color: olive;</div>
</body>
</html>

B. Pozitionare

Pozitionarea permite asezarea unui obiect intr-un anume loc folosind coordonatele. Totodata
obiectele pot fi pozitionate pe straturi diferite, unul deasupra celuilalt.

Atat pozitionarea absoluta (ASOLUTE) cat si cea relativa (RELATIVE) folosesc

proprietatileLEFT si TOP exprimate in px (pixeli), in (inci), pt (puncte), ems, procentaje sau cm
(centimetri).

Pozitionare absoluta plaseaza obiectul in pagina exact in locatia data de left si top. Astfel poate
fi creat un element liber fata de celelalte din pagina. Obiectul poate fi orice, de exemplu text sau
imagine.

Exemplu: am aplicat pozitionarea absoluta etichetei h4

<html>
<head>
<title>Exemplul 1</title>
</head>
<body>
<h4 style="position: absolute; left: 50px; top: 50px">Text 1</h4>
<h4 style="position: absolute; left: 100px; top: 200px">Text 2</h4>
</body>
</html>

Pozitionare relativa este pozitia normala pe care o ocupa un element, dupa elementele
anterioare si inaintea celor urmatoare. Poate fi deplasat fata de aceasta pozitie folosind
proprietatile left si top.
Exemplu: am folosit doua obiecte, unul pozitionat absolut, celalalt relativ

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

</style>
</head>
<body>
<div class="absolut">Pozitionare absoluta, independent de celelate obiecte din pagina</div>
Text
<div class="relativ">Pozitionare relativa, dupa "Text"</div>
</body>
</html>

Pozitionarea tridimensionala
Elementele sunt pozitionate pe ecran pe o suprafata bidimensionala dar pot fi asezate si unul
deasupra celuilalt, intr-o stiva utilizand un indicativ (index-z) incepand cu 0, urmatorul 1 si tot
asa in continuare. Elementul cu indexul cel mai mare este asezat deasupra.

Exemplu: am folosit trei obiecte pozitionate absolut

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

</style>
</head>
<body>
<div class="element1"><img src="poza.jpg"></div>
<div class="element2"><img src="poza.jpg"></div>
<div class="element3"><img src="poza.jpg"></div>
</body>
</html>

CSS3 - text-shadow, word-wrap, text-overflow

CSS3 introduce noi proprietati pentru efecte de text, dar multe dintre ele nu sunt inca recunoscute de principalele
navigatoare web
CSS3 text-shadow
Proprietatea text-shadow introdusa in CSS3 permite adaugarea unui efect de umbra care sa fie aplicat la textul dintr-
un element HTML. Umbra apare in jurul literelor.
Sintaxa:
text-shadow: offset_X offset_Y blur culoare;
- offset_X - specifica pozitia umbrei pe orizontala. Sunt permise si valori negative.
- offset_Y - specifica pozitia umbrei pe verticala. Sunt permise si valori negative.
- blur - defineste distanta pentru valoarea "blur" (optional).
- culoare - defineste culoarea umbrei (optional). Daca nu e specificata, se foloseste negru.
text-shadow e recunoscut in principalele browsere, cu exceptia Internet Explore, dar incepand cu versiunea 8 a
Internet Explorer puteti folosi o proprietate filter pentru a crea efecte de umbra pt. text si in IE.
Sintaxa:
filter:progid:DXImageTransform.Microsoft.Shadow(color=val, direction=val, strength=val);
- color - specifica culoarea umbrei.
- direction - poate avea una din aceste valori numerice: 0=top, 45=top right, 90=right, 135=bottom right,
180=bottom, 225=bottom left, 315=top left.
- strength - reprezinta cantitatea de "blur".

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

<h2>Text cu text-shadow</h2>

Se pot adauga mai multe umbre la acelasi text, prin adaugarea mai multor liste de umbre in proprietatea text-
shadow, separate prin virgula.
Urmatorul cod amesteca o culoare verde cu una albastra ca sa creeze un efect de umbra cu aceste culori:
<style type="text/css"></style>

<h2>Text cu doua culori pt. text-shadow</h2>

- Observati ca s-a folosit formula rgba(Rosu, Verde, Albastru, Alpha) la definirea culorii, adaugand si transparenta
(Alpha) in acelasi timp.

CSS3 word-wrap
Cu word-wrap puteti determina browser-ul sa rupa cuvintele lungi, cand acestea depasesc lungimea elementului,
trecand pe un rand nou.
Sintaxa:
word-wrap: valoare;
"valoare" poate fi:
- normal - Nu rupe cuvintele intregi (valoarea prestabilita).
- break-word - Permite ruperea cuvintelor intregi. Cuvintele sunt rupte la nivel de caracter, nu in silabe.

Exemplu:
<style type="text/css"></style>
<div id="id1">Curs CSS gratuit - word-wrap un_cuvant_mai_lung.</div>
CSS3 text-overflow
Cu proprietatea text-overflow puteti determina ce sa se intample cu textul, cand acesta depaseste lungimea
elementului.
text-overflow este suportat in majoritatea navigatoarelor web, in afara de Firefox.
Sintaxa:
text-overflow: valoare;
"valoare" poate fi:
- clip - taie textul (valoarea prestabilita).
- ellipsis - afiseaza trei-puncte ("…") in locul textului taiat.

• In general, proprietatea text-overflow se foloseste impreuna cu white-space:nowrap; si overflow:hidden;.

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

<div id="id1">CSS Tutorial - un text lung pe o singura linie, alte cuvinte.</div>

<div id="id2">Site web www.marplo.net - alt text lung intr-un singur rand.</div>

CSS3 opacity
Proprietatea opacity seteaza nivelul de opacitate al unui element HTML, opacity permite modificarea transparentei
elementului.
IE8 si versiuni anterioare folosesc o varianta alternativa, proprietatea filter.
- Sintaxa:
filter: alpha(opacity=X); /* pt. IE */
opacity: X;
- X - reprezinta o valoare intre 0 (complet transparent) si 1.0 (fara transparenta).
1) Exemplu, un <div> cu o transparenta CSS de 40%:
<style type="text/css"></style>

<div id="dv">Un continut oarecare ...</div>

2) Exemplu, seteaza opacitate 50% la o imagine:
<style type="text/css"></style>
<img src="html_course.jpg" alt="Curs HTML si CSS" width="155" height="160" id="im" />
CSS3 transformari 2D
• CSS rotate()
• Metoda scale()
• CSS skew()
Cu proprietatea CSS transform se poate modifica forma, marimea si pozitia elementelor HTML.
Se pot transforma elementele HTML in plan 2D sau 3D.
- Sintaxa:
transform: metoda(valori);
Internet Explorer 9 foloseste: -ms-transform .
Firefox foloseste: -moz-transform .
Chrome si Safari folosesc: -webkit-transform .
Opera foloseste: -o-transform .
Metoda translate()
Metoda translate() muta elementul de la pozitia initiala, in functie de parametri dati pentru pozitionare de la Stanga
(axa-X) si de Sus (axa-Y) .
- Sintaxa:
transform: translate(X, Y);
Exemplu. Cand utilizatorul plaseaza cursorul mouse-ului pe un anumit Div, ii muta pozitia cu 20 pixeli de la stanga
si 15 pixeli din partea de sus.
<style type="text/css">
#idv {
width:90px;
height:90px;
background:#b0b1fe;
font-size:17px;
}

#idv:hover {
transform: translate(20px, 15px);
-ms-transform: translate(20px, 15px); /* IE 9 */
-webkit-transform: translate(20px, 15px); /* Safari si Chrome */
-o-transform: translate(20px, 15px); /* Opera */
-moz-transform: translate(20px, 15px); /* Firefox */
}
</style>

<div id="idv">Pozitionati mouse-ul aici.</div>

CSS rotate()
Metoda rotate() roteste elementul HTML, in sensul orelor de ceas daca valoarea e pozitiva, in sens invers orelor de
ceas daca valoarea e negativa.
- Sintaxa:
transform: rotate(grade);
Exemplu. Roteste element cu 60 grade in sensul orelor de ceas.
<style type="text/css">
#idv2 {
width:90px;
height:90px;
background:#b0b1fe;
font-size:17px;
}

#idv2:hover {
transform: rotate(60deg);
-ms-transform: rotate(60deg); /* IE 9 */
-webkit-transform: rotate(60deg); /* Safari si Chrome */
-o-transform: rotate(60deg); /* Opera */
-moz-transform: rotate(60deg); /* Firefox */
}
</style>

<div id="idv2">Pozitionati mouse-ul aici.</div>

Metoda scale()
Metoda scale() mareste sau micsoreaza marimea elementului HTML (inclusiv continutul din el), in functie de
parametri pentru Lungime (axa-X) si Inaltime (axa-Y).
- Sintaxa:
transform: scale(Lungime, Inaltime);
- Valorile pentru Lungime si Inaltime sunt in procente. De exemplu, 1.5 inseamna 150% din marimea originala.

Exemplu. Transforma lungimea sa fie de 2 ori marimea originala, si inaltimea 1.5 ori inaltimea originala.
<style type="text/css">
#idv3 {
width:90px;
height:90px;
background:#b0b1fe;
font-size:17px;
}

#idv3:hover {
transform: scale(2, 1.5);
-ms-transform: scale(2, 1.5); /* IE 9 */
-webkit-transform: scale(2, 1.5); /* Safari si Chrome */
-o-transform: scale(2, 1.5); /* Opera */
-moz-transform: scale(2, 1.5); /* Firefox */
}
</style>

<div id="idv3">Pozitionati mouse-ul aici.</div>

CSS skew()
Metoda skew() distorsioneaza elementul HTML pe orizontala (axa-X) si verticala (axa-Y), incluzand si continutul
din el.
- Sintaxa:
transform: skew(Xdeg, Ydeg);
Exemplu. Distorsioneaza elementul 20 grade pe lungime (axa-X) si 25 grade pe verticala (axa-Y).
<style type="text/css">
#idv4 {
width:160px;
height:90px;
background:#abcdfe;
font-size:18px;
transform: skew(20deg, 25deg);
-ms-transform: skew(20deg, 25deg); /* IE 9 */
-webkit-transform: skew(20deg, 25deg); /* Safari si Chrome */
-o-transform: skew(20deg, 25deg); /* Opera */
-moz-transform: skew(20deg, 25deg); /* Firefox */
}
</style>

Cele 4 metode de transformare pot fi utilizate si intr-o singura definitie transform, separate prin spatiu.
- Sintaxa:
transform: translate(X, Y) rotate(grade) scale(Lungime, Inaltime) skew(Xdeg, Ydeg);
- Puteti adauga doar acele metode pe care doriti sa le folositi in transformare.

Exemplu: muta elementul cu 50 pixeli de la stanga si 25 pixeli din partea de sus, il roteste cu 20 grade in sens invers
orelor de ceas, transforma lungimea de 2 ori cea originala si inaltimea 1.5 ori, distorsioneaza elementul cu 15 grade
pe orizontala si 20 grade pe verticala.
<style type="text/css">
#idv5 {
width:90px;
height:90px;
background:#00da01;
font-size:17px;
transform: translate(50px, 25px) rotate(-20deg) scale(2, 1.5) skew(15deg, 20deg);
-ms-transform: translate(50px, 25px) rotate(-20deg) scale(2, 1.5) skew(15deg, 20deg); /* IE 9 */
-webkit-transform: translate(50px, 25px) rotate(-20deg) scale(2, 1.5) skew(15deg, 20deg); /* Safari si Chrome */
-o-transform: translate(50px, 25px) rotate(-20deg) scale(2, 1.5) skew(15deg, 20deg); /* Opera */
-moz-transform: translate(50px, 25px) rotate(-20deg) scale(2, 1.5) skew(15deg, 20deg); /* Firefox */
}
</style>

<div id="idv5">Continut oarecare...</div>

CSS3 transition
CSS3 transition poate fi utilizat pentru a anima proprietatile CSS, adaugand un efect de animatie cand se modifica
proprietatile CSS ale unui element HTML, schimband gradual de la un stil la altut.
CSS3 transition are 4 componente:
• transition-property - Specifica numele proprietatii (sau proprietatilor) la care transition trebuie aplicat
(precum: width, color, font-size, etc.).
CSS3 transition poate fi utilizat cu proprietatile prezentate aici: Proprietati CSS ce pot fi animate
• transition-duration - Specifica durata tranzitiei (animatiei), in sesunde (s), milisecunde (ms), (implicit 0).
• transition-timing-function - Defineste tipul vitezei efectului in timpul transformarii:
ease (implicit), linear, ease-in, ease-out, ease-in-out
• transition-delay - Defineste timpul de asteptare pana cand incepe efectul "transition" (implicit 0)

Pentru a folosi CSS3 transition, trebuie specificate aceste doua lucruri:

1. Proprietatea CSS la care se aplica efectul ( transition-property ).
2. Durata efectului ( transition-duration ).
- Ultimele doua componente ( transition-timing-function si transition-delay ) sunt optionale.
- Internet Explorer recunoaste "CSS3 transition" incepand cu IE 10.

Exemplu. Cand mouse-ul e deasupra unui anumit Div, se schimba gradual lungimea.
<style type="text/css">
#iddv {
width:80px;
height:80px;
background:#b8b9fe;
font-size:17px;
transition-property: width;
transition-duration: 1.4s;

/* Firefox 4 */
-moz-transition-property: width;
-moz-transition-duration: 1.4s;
/* Safari si Chrome */
-webkit-transition-property: width;
-webkit-transition-duration: 1.4s;
/* Opera */
-o-transition-property: background-color, color;
-o-transition-duration: 1.4s;
}

#iddv:hover {
width:200px;
}
</style>

<div id="iddv">Pozitionati mouse-ul pe acest patrat.</div>

Proprietatea transition prescurtata

Se pot adauga toate cele 4 componente intr-o singura proprietate transition.
Sintaxa:
transition: transition-property transition-duration transition-timing-function transition-delay;
Exemplu: Schimba gradual "font-size" (in 0.4 secunde, cu viteza "ease-out") cand mouse-ul e deasupra unui element
cu class="clse".
<style type="text/css">
.clse {
width:150px;
font-size:13px;
transition: font-size 0.4s ease-out;
-moz-transition: font-size 0.4s ease-out; /* Firefox 4 */
-webkit-transition: font-size 0.4s ease-out; /* Safari si Chrome */
-o-transition: font-size 0.4s ease-out; /* Opera */
}

.clse:hover {
font-size: 16px;
}
</style>

<ul>
<li class="clse"><a href="http://www.marplo.net/curs_css/" title="Curs CSS gratuit">Curs CSS gratuit</a></li>
<li class="clse"><a href="http://www.marplo.net/html/" title="Curs HTML">Curs HTML</a></li>
<li class="clse"><a href="http://www.coursesweb.net/" title="Cursuri Programare Web">Cursuri Programare
Web</a></li>
</ul>
Adaugarea JavaScript intr -o pagina HTML

Codul JavaScript se adauga in paginile web folosind elementul HTML: <script>

</script>.
In interiorul etichetei <script> ... </script> se scrie codul JS.
Pentru scrierea si executarea programelor JavaScript avem nevoie de un editor simplu de texte
(cum ar fi Notepad++) si un browser (ex. Mozilla Firefox, Google Chrome).

Putem, de asemenea, sa introducem instructiunile JavaScript intr-un alt fisier, extern, care va
avea extensia ".js", pentru editarea acestui fisier este nevoie la fel de un editor simplu de texte.
Avantajul fiind ca putem folosi acelasi cod in mai multe pagini HTML si in cazul necesitatii
unei modificari in codul JavaScript, modificam doar datele dintr-un singur fisier (cel cu
extensia ".js").
In cazul in care codul JavaScript se afla intr-un fisier extern, eticheta <script> din pagina
HTML va trebui sa contina atributul "src" a carui valoare e locatia fisierului in care se afla
codul JavaScript.
- In fisierul extern cu extensia "js" nu trebuie sa scriem eticheta "<script>", scriem direct
instructiunile scriptului.

Iata un exemplu de script JavaScript scris in interiorul unei pagini web (HTML):

<!DOCTYPE html>
<html>
<head>
<title>Title</title>
</head>
<body>
<h3>Continut HTML ..</h3>

Instructiunea document.write este folosita pentru a tipari ceva in pagina.

Daca dorim sa incarcam scriptul dintr-un fisier extern (de exemplu "cod.js"), codul nostru in
documentul HTML va arata astfel:

<!DOCTYPE html>
<html>
<head>
<title>Title</title>
</head>
<body>
<h3>Continut HTML ..</h3>

- Iar fisierul "cod.js" va contine:

document.write('Textul afisat cu document.write() din JS.');

Rezultatul afisat in pagina web va fi acelasi ca-n exemplu anterior.

Comentarii in codul JavaScript

Comentariile in interiorul codului sunt necesare cand dorim sa specificam rolul anumitor
functii si variabile, pentru o mai usoara intelegere ulterioara a scriptului.
Pentru a adauga un comentariu, pe o singura linie, in interiorul codului, incepem scrierea
acestuia cu succesiunea //.
Daca dorim sa scriem comentarii pe mai multe randuri, se foloseste /* la inceputul
comentariului si */ la sfarsitul acestuia.

/*
Comentarii pe mai multe linii
Alt rand,
Alte comentarii
*/
document.write('Textul afisat cu document.write() din JS.');
</script>

Conventii de sintaxa

In orice limbaj, scrierea are conventii si reguli de sintaxa. Chiar si scrierea în limba româna
are regulile ei de sintaxa: orice propozitie incepe cu litera mare, se termina cu un semn de
punctuatie, etc.! La fel si limbajele de programare au regulile si sintaxa lor.
In continuare vor fi prezentate regulile de sintaxa din limbajul JavaScript.

1. Case-sensitive - se face diferenta intre literele mari si mici, astfel cuvinte precum
"exemple, Exemple" vor fi tratate diferit.
2. Punct si virgula (;) - Declaratiile /liniile de cod trebuie sa se termine cu un caracter
"punct si virgula" (;).
Exemplu:

var1 = 8; var2 ='abc';

var3 ='JavaScript';

3. Spatiile libere - JavaScript ignora spatiile libere, tab-urile si liniile libere care apar în
instructiuni, acestea sunt utile pentru a face codul mai bine structurat si usor de citit.
Recunoaste doar spatiile care apar în string-uri (sirurile de caractere).
Exemplu:

var1 = 'Tutorial JS' ;

// E la fel cu
var1='Tutorial JS';

4. Ghilimelele - Ghilimelele simple ('') si duble ("") sunt folosite pentru a delimita sirurile
de caractere (string). (Exemplu: "Invat JavaScript" sau 'String JavaScript' ).
5. Caractere speciale - cand scriem scripturi, apare necesitatea de a folosi in cod sau in
datele de iesire, un caracter special, sau o linie noua. Pentru aceasta folosim caracterul
backslash "\" in fata unuia din codurile Escape , astfel :

\b - backspace
\f - indica o pagina noua
\n - linie noua
\r - indica un CR (Carriage Return)
\t - indica spatiu de tasta TAB
\\ - caracter backslash
\' - indica un apostrof (ghilimele simple)
\" - indica ghilimele duble

De exemplu, daca dorim sa afisam un text, folosind document.write(), iar acel text
trebuie sa contina ghilimele si caracter backslash "\", si anume textul (Curs "JavaScript" \
Java.net), pentru a nu "deruta" scriptul in interpretarea codului, deoarece ghilimelele si backslash
fac parte din sintaxa, adaugam \ in fata acestor caractere din interiorul sirului. Comanda de
afisare a sirului va fi astfel:

document.write("Curs \"JavaScript\" \\ Java.net");

6. Numele variabilelor si functiilor - numele dat variabilelor si functiilor trebuie sa

respecte urmatoarele reguli:

- primul caracter trebuie sa fie o litera, un caracter de subliniere (_) sau semnul $.
- primul caracter nu poate fi un numar.
- numele nu trebuie sa contina spatii libere.
- nu se folosesc cuvinte rezervate, care fac parte din limbajul JavaScript (cum sunt
"array", "status", "alert", "script"), deoarece interpretorul programului nu va face
diferenta intre aceste nume si comenzile JavaScript cu aceleasi nume.

Structura fișierelor

– index.html va contine structura elementelor aplicatiei

– script.js va fi locul unde scriem codul javascript

Cel mai ușor ar fi sa pornim mereu de la aceasta structura, iar practic pentru fiecare proiect nou
sa copiem acest folder inițial si sa il folosim pe post de sablon.

Am putea scrie si codul de Javascript tot interiorul fișierului html, însă aceasta practica este
descurajata în cadrul proiectelor mai mari.

HTML (layout-ul paginii):

OBS.: charset este atribut de caracter, specifică codarea caracterelor pentru documentul HTML.
Valori ale atributului charset:
-UTF-8 - Character encoding for Unicode
-ISO-8859-1 - Character encoding for the Latin alphabet
Definire Variabile si Constante

Definire si utilizare variabile

Variabilele sunt nume stocate in memorie la care se atribue /memoreaza diferite date.
In JavaScript variabilele se pot defini folosind declaratia: var sau let.
var name ='Value';
//Sau
let name ='Value';
- Unde 'name' este numele variabilei, iar 'Value' este valoarea atribuita.
Variabilele se folosesc specificand numele lor, si rezulta valoarea care este atribuita.

Diferenta dintre var si let

Cu var se definesc variabile Globale, valabile in tot scriptul si care pot fi apelate si modificate in
alte sectiuni (corpuri separate) din script; sau Locale, valabile in corpul functiilor.
Declaratia let permite definirea de variabile care sunt limitate la sectiunea /scopul, expresia unde
au fost definite.
- Se poate intelege diferenta dintre 'var' si 'let' din aceste doua exemple similare.
1. Exemplu cu "let":

if(xn ==1){
let xn =2;
}
document.write(xn); // 1
</script>
2. Exemplu cu "var":
<script>
var xn = 1;

if(xn ==1){
var xn =2;
}

document.write(xn); // 2
</script>

3. Exemplu cu "var":
<script type="text/javascript">

var variabila1 = "Acesta este un simplu text";

document.write(variabila1);
document.write("<br/>");
var variabila2 = 255;
document.write(variabila2 + 5 + "45");
document.write("<br/>")
variabila2 = "Acum sunt text din nou";
document.write(variabila2);
</script>

Pentru a lucra cu variabile, primul lucru care trebuie sa il facem este sa le declaram.In
momentul declararii le dam un nume si le putem da si o valoare initiala, care poate varia pe
durata script-ului.

Se foloseste cuvantul cheie var urmat de numele care dorim sa il dam variabilei : var
variabila1, in plus, se poate declara o valoare : var variabila1 = "Acesta este un simple text".

Se foloseste operatorul de alocare "=" pentru a stabili valoarea care dorim sa o ia variabila.
Daca dorim sa ii dam o valoare textuala atunci folosim ghilimele"".

Trebuie mentionat faptul ca putem introduce text atat cu ghilimele duble cat si simple dar
daca incepem cu o forma , trebuie sa terminam de aceeasi forma.

De exemplu , "Aceasta nu este forma corecta ', nu este un lant de text corect in Javascript.
Daca aveti nevoie sa includeti ghilimele in text atunci folositi cealalta forma de deschidere.'acest
text contine ghilimele duble " dar este corect '.

Este important sa intelegem ca valorile variabilelor se pot schimba pe parcursul script-ului

dupa cum vom vedea in continuarea.

Tipuri de valori si Variabile

Sunt mai multe tipuri de date care se pot atribui la variabile. Tipul valorii adaugate determina
tipul variabilei.

Determinand tipul de date al unei variabile, putem limita valorile pe care le poate lua precum si
operatiile in care poate aparea.

De exemplu, sa ne gandim la o variabila care stocheaza un text.Aceasta variabila nu poate lua o

valoare numerica si nu ar trebui sa ia parte la o operatie de multiplicare.

Cu toate acestea, javascript poate realiza conversii automate de tip, astfel incat o variabila poate
lua valori distincte de tipuri de date pe parcursul script-ului.Acest lucru nu este o buna tactica,
dar adesea este folositoare.

 string (sir) - Valori de tip text, adaugate intre ghilimele simple sau duble.
Un șir în JavaScript trebuie să fie înconjurat de ghilimele.

let str = "Hello"; let str2 = 'alt sir '; let str3 = `un sir ${str}`;

În JavaScript, există 3 tipuri de ghilimele.

1. Ghilimele duble: "Hello" .

2. Ghilimele unice: 'Hello' .

3. Backticks: `Hello` .

Intre ghilimele duble și simple nu există nicio diferență în JavaScript.

Backticks sunt ghilimele cu „funcționalitate extinsă”. Acestea ne permit să încorporam
variabile și expresii într-un șir, înglobându-le în ${…}.

var x = 'Site java.net';

 number - Numere intregi sau cu zecimale.

var x = 8;
var y = 7.95;

 booleen - Valoarea true sau false.

var x = true;
var y = false;

 undefined - Variabila declarata fara vreo valoare.

let x;

 null - Valoare nula, anulata.

var x = null;

Exemplu de schimbare a tipului de variabila pe parcursul codului.

x = '<h4>Java</h4>'; //acum e string

document.write(x);
</script>
Definire si utilizare Constante

Constante se definec cu declaratia: const.

Spre deosebire de variabile, valoarea unei constante nu poate fi schimbata si nu poate fi
redeclarata, valoarea lor ramane aceeasi, fixa.
const X = 'Java';

//schimband valoarea, rezulta eroare in consola

X ='abc';

//redeclarare, rezulta eroare in consola

const X = 123;
Ca si variabilele, constantele se folosesc specificand numele lor, si rezulta valoarea care este
atribuita.
<script>
const TJC = 'Tutorial JavaScript - Constante';
document.write(TJC);
</script>

Operatori

Unul dintre elementele care permit crearea unor expresii mai complexe sunt operatorii.
In Javascript putem folosi o multime de operatori impartiti in functie de caracterul lor :
Operatori matematici
+ Suma - Diferenta * Multiplicare / Impartire
++ Increment -- Decrement % Modul
Operatori de comparare
== Egal cu != Distinct de < Mai mic ca <= Mai mic sau egal cu
> Mai mare ca >= Mai mare sau egal cu
Operatori de alocare Exemplu(x = 2 , y = 4) Echivalent Rezultat
= x=y x=4
+= x += y x=x+y x=6
-= y -= x y=y-x y=2
*= y *= x y=y*x y=8
/= y /= x y=y/x y=2
%= y %= x y=y%x y=0
Operatorii cu siruri de caractere Exemplu Rezultat
+ "Buna " + "Seara" "Buna Seara" - observa
ca "Buna " are un
spatiu liber la final
Cadre de dialog
In JavaScript trei cadre de dialog sunt predefinite :

1.Fereastra Alert

Se foloseste pentru a trimite utilizatorului un mesaj informativ.

Este cel mai simplu dintre cele trei deoarece acest cadru include decat mesajul care dorim
sa il vada utilizatorul si un buton de confirmare.
Sintaxa:
window.alert('mesaj')
- Unde "mesaj" este textul care va apare in fereastra Alert.

Se poate folosi si direct: alert('mesaj');, fara 'window'.

Cod HTML:
<!doctype html>
<html>
<head>
<title>Title</title>
</head>
<body>
Continut HTML
<script>
alert('Bine ai venit');
</script>
</body>
</html>
Urmatorul exemplu deschide o fereastra cu mesajul: "Bine ai venit".

2.Fereastra Prompt

Se foloseste pentru a cere informa tii de la utilizator.Este cel mai complex

cadru de dialog.
Optional se poate facilita o valoare implicita , care este colectata in cazul in
care utilizatorul apasa pe butonul Ok fara sa introduca o informatie/valoare.

Fereastra Prompt se creaza cu sintaxa:

window.prompt('mesaj', 'valoare implicita')

- Unde "mesaj" este un text care va apare in fereastra, deasupra unei casute de text input; iar
"valoare implicita" este textul care va apare in casuta input.

Exemplu1 fereastra "Prompt".

O linie de cod:
<script type="text/javascript">
var raspuns = prompt("Care este numele tau ? :","anonim")
</script>
Stocheaza in variabila raspuns valoarea introdusa de utilizator.
Ne putem confrunta cu diferite cazuri :
1.Utilizatorul introduce numele lui si apasa butonul OK. In acest caz variabila raspuns stocheaza numele
utilizatorului.
2.Utilizatorul apasa direct pe butonul OK, in acest caz daca exista un sir de text initial(daca este setata o
valoare implicita)
variabila raspuns primeste aceasta valoare , daca nu exista atunci raspuns este "nedefinit" ( undefined ).
3.Se apasa direct pe butonul Cancel, in acest caz raspuns primeste valoarea null.
In orice caz , atat valoarea intoarsa cat si mesajul si valoarea initiala sunt siruri de text ( string ).
Cod HTML exemplu 1:
<!doctype html>
<html>
<head>
<title>Title</title>
</head>
<body>
Continut HTML
<script>
window.prompt('Scrieti numele', 'Nume');
</script>
</body>
</html>
In browser va apare o fereastra ca in imaginea urmatoare:
Textul pe care utilizatorul il adauga in campul din fereastra prompt poate fi preluat intr-o
variabila si folosit apoi in script.
Iata un exemplu in care atribuim deschiderea ferestrei Prompt unei variabile (aici "nume"),
care va prelua sirul adaugat in caseta de text, apoi valoarea acestei variabile o introducem in
mesajul unei ferestre Alert:
Continut HTML
<script>
var nume = window.prompt('Scrieti numele', 'Nume');
alert('Salut '+ nume +'\n Bine ai venit.');
</script>
Dupa ce utilizatorul scrie numele in fereastra Prompt si apasa OK se va deschide o fereastra
Alert care contine in mesaj numele adaugat de utilizator.
- S-a folosit "\n" pentru a adauga o linie noua, dupa "nume", in textul care apare in fereastra
Alert.

3.Fereastra Confirm
Se foloseste pentru ca utilizatorul sa confirme o actiune.Spre deosebire de cadrul
anterior, aici apar doua butoane ( OK si Cancel ). Putem afla ce buton a apasat
utilizatorul si sa actionam depinzand de alegerea lui.
Fereastra de confirmare se creaza cu sintaxa:
window.confirm('intrebare')
In fereastra de confirmare va apare textul "intrebare" si doua butoane "OK" si "Cancel".
Aceasta fereastra este folosita pentru a fi executata o comanda cand este apasat butonul "OK"
(returneaza TRUE) si alta comanda cand este apasat butonul "Cancel" (returneaza FALSE)

- Urmatorul exemplu deschide o fereastra "Confirm" in care apare intrebarea "Rezultatul lui 0+0
este 0?". Daca este apasat butonul "OK" apare o fereastra Alert cu mesajul "Corect", iar daca
este apasat butonul "Cancel" apare o fereastra Alert cu mesajul "Incorect".
Continut HTML
<script>
var intrebare = window.confirm('Rezultatul lui 0+0 este 0?');
if(intrebare) alert('Corect');
else alert('Incorect');
</script>
In browser va apare o fereastra ca in imaginea urmatoare:
In urmatorul cod :

Aplicatii:

Variabile

1. Declarați două variabile: admin și name .

2. Alocați numele "John" name .

3. Copiați valoarea de la name la admin .

4. Afișați valoarea admin folosind alert (trebuie să emită „John”).

II. Care este rezultatul scriptului?

let name = "Ilya"; alert( `hello ${1}` );

alert( `hello ${"name"}` );

alert( `hello ${name}` );

Definirea unei functii

Atunci cand sarcina care trebuie sa o indeplineasca un script este complexa, este mai bine
sa separam o problema mare in probleme mai mici, care sunt mai simplu de gestionat.
JavaScript permite descompunerea unei probleme in sarcini mai mici folosind conceptul de
functie. O functie nu este nimic mai mult decat un set de instructiuni care indeplinesc o sarcina
bine definita.
Aceeasi idee o putem gasi in multe situatii cotidiene. Sa spunem ca vrem sa facem cartofi
prajiti, cu singuranta prima data impartim problema in sarcini mai concrete, cum ar fi: punem
tigaia pe foc pentru ca sa se incinga uleiul, curatam cartofii, spalam cartofii, etc ….
Fiecare dintre aceste sarcini coincid cu o functie in javascript, iar prepararea cartofilor
prajiti sunt script-ul in sine. Observati ca fiecare functie este importanta, de asemenea, ordinea in
care se foloseste.
Dar cel mai bun lucru este faptul ca aceste functii pot fi refolosite, sa spunem ca dupa ce
am terminat cartofii prajiti, vrem sa mai facem o portie de cartofi prajiti cu cascaval, observam
ca putem refolosi anumite functii.Cum ar fi: curat cartofii, spal cartofii, etc…
Acest lucru inseamna ca, prin descompunerea programului in functii, putem folosi acele
functii in mai multe locuri, fara a fi nevoie sa le scriem din nou.
Deci, O functie poate contine mai multe instructiuni si comenzi care ulterior pot fi utilizate
usor si de mai multe ori prin apelarea functiei care le contine. Daca un program necesita multe
linii de cod, folosind functiile putem imparti codul in parti mai mici pe care le putem utiliza
separat acolo unde este nevoie.
Exista functii predefinite, adica cele care apartin direct programului JavaScript (precum:
alert(), parseInt(), trim(), etc.); si functii create in script (cele definite de programator).
Pentru a putea folosi o functie trebuie, mai intai, sa o definim.
Creare (definire) functii
Exista mai multe moduri de a crea o functie in JavaScript.
1.Modul standard - folosind cuvantul function urmat de numele functiei si doua paranteze
rotunde.
Sintaxa:
function name_functie (p1, p2){
//codul care va fi executat
}
- 'name_functie' reprezinta numele functiei. Poate fi orice nume ca si la variabile.
- 'p1 p2' sunt parametri functiei, si reprezinta valorile care trebuie sa le primeasca functia cand
este apelata. Acestia sunt optionali (poate fi definita si fara parametri).
Parametri sunt necesari cand se doreste transmiterea de date care sa fie utilizate in codul
functiei. Se pot adauga unul sau mai multi parametri, cat sunt necesari.
- Exemplu, fara parametru:
function fun1(){
alert('Mesaj important; Nu tratati cu indiferenta.');
}
Intre acolade scriem corpul functiei, adica actiunile care trebuie sa le faca aceasta .

Dupa ce am creat o functie, pentru a fi folosita, functia trebuie apelata.

O functie fara parametri se apeleaza in felul urmator:
nume_functie();
Exemplu1:
<!doctype html>
<html>
<head>
<title>Invata javascript</title>
</head>
<body>
<script>
function afiseaza() {
alert( 'Bine ai venit!' );
}
afiseaza();
</script>
</body>
</html>
O variabilă declarată în interiorul unei funcții este vizibilă numai în interiorul funcției
respective.
Exemplu2:
<script>
function afiseaza_mesajul() {
let mesaj = "Hello, JavaScript!"; // variabila locala
alert( mesaj);
}
afiseaza_mesajul();
</script>

O funcție poate accesa și o variabilă exterioară, de exemplu:

Funcția are acces complet la variabila exterioară. Se poate modifica valoarea atribuita unei
variabile ca in exemplul de mai jos.
<script>
let userName = 'Ana';
function afiseaza() {
userName ='Dana'; // atribuim alta valoare variabilei
let mesaj = 'Buna, ' + userName;
alert(mesaj);
}
alert( userName );// Ana
afiseaza(); // Buna, Dana scimba variabila dupa ce se apeleaza functia
</script>

O functie care contine parametri se apeleaza in felul urmator:

nume_functie(v1, v2);
- 'v1, v2' sunt valorile care se transmit functiei si sunt asociate in aceeasi ordine cu parametri
adaugati la definirea ei.
In definirea unei functii vorbeam de parametrii (acele date de care o functie are nevoie
pentru a-si indeplini sarcinile).Acum , cand chemam functia, ii dam aceste date prin
intermediul argumentelor v1, v2.
Exemplu:
1. Sa se calculeze suma a doua numere.
<script>
function sum(a,b) {
return a + b;
}
var c=sum(3,5);
document.write(c);
</script>
2. Sa se calculeze patratul unui numar ce apartine intervalului [1,20].

Lista de parametri se foloseste pentru a comunica functia cu restul script-ului. De exemplu, in

acest caz, functia trebuie sa conoasca valoarea introdusa de utilizator, aceasta valoare i se acorda
prin parametrul valoare.

La randul ei , functia poate intoarce o valoare. In acest caz, o sa intoarca o valoare boolean true
sau false.Pentru a intoarce o valoare, functia foloseste instructia return.
Prin definirea unei functii, doar indicam ce dorim sa facem cu ea , pentru a o executa trebuie sa o
apelam.

De retinut despre definirea functiilor :

-Pentru a putea folosi o functie, trebuie sa o definim anterior.
-O functie poate intoarce o valoare codului care o foloseste folosind instructia return.
-O functie poate comunica cu codul care o foloseste prin intermediul parametrilor.
-O functie poate folosi alta functie pentru a-si indeplini obiectivul.

Pentru rezolvarea cerintelor de la ex.2 vom defini doua functii:

- o functie care incearca sa afle daca numarul introdus de utilizator este intre numerele 1 si 20.
Functia intoarce o valoare booleana indicand daca acesta este cazul. Daca nu pastram rezultatul
intr-un anumit loc, functia nu ne foloseste.
function valideaza( valoare )
{
if( (valoare >= 1) && ( valoare <= 20))
{
return true;
}
else
{
return false;
}
}

-o functie care sa calculeze patratul numarului

2.Functii atribuite la variabile - se adauga ca valori la variabile, si se apeleaza cu numele

variabilei.
Sintaxa:
var nume_variabila = function(p1, p1){
//codul care va fi executat
}
- 'nume_variabila' e numele variabilei dar si al functiei utilizat la apelarea ei.
- 'p1, p2' sunt parametri functiei (optionali).
- Exemplu:
var fun1 = function(){
alert('Mesaj important; Nu tratati cu indiferenta.');
}

Diferenta fata da modul standard e aceasta: o functie definita in mod standard nu mai
poate fi redefinita, dar o functie atribuita unei variabile poate fi redefinita deoarece
reprezinta o valoare a variabilei iar valorile de variabile pot fi schimbate.

3.Arrow functions - functii definite fara cuvantul "function"; se foloseste o prescurtare:

"()=>".
Diferit la acestea e faptul ca nu au propriul this (care face referire la obiectul functiei).
Sintaxa:
var name_variabila = (p1, p2)=>{
//codul care va fi executat
}
- 'p1, p2' sunt parametri functiei (optionali).
- Exemplu:

var fun1 = ()=>{

alert('Mesaj important; Nu tratati cu indiferenta.');
}
Instructiunea return
O functie care returneaza un rezultat foloseste pentru aceasta instructiunea return. Aceasta
specifica valoarea pe care o returneaza functia cand este apelata.
Sintaxa:
function nameFun(p1, p2)
//codul care va fi executat
return 'Valoare';

Instructiunea return se poate aplica in oricare tip de functie; la cele atribuite ca valori de
variabile, si la 'arrow functions'.
Pe langa faptul ca 'return' returneaza o valoare, acesta opreste executia functiei; codul din
functie adaugat dupa 'return' nu este executat.
Exemplu:
//returneaza suma parametrilor a si b
function sum(a, b){
return a + b;
}

Cod HTML:
<!doctype html>
<html>
<head>
<title>Invata javascript</title>
</head>
<body>
<script type="text/javascript">
function sum(a, b) {
return a + b;
}
let result = sum(5, 2);
alert( result ); // 7
</script>
</body>
</html>
sau:
<!doctype html>
<html>
<head>
<title>Invata javascript</title>
</head>
<body>
<script type="text/javascript">
function sum(a,b) {
return a + b;
}
let suma=sum(3,5);
document.write(`rezultatul este ${suma}`);
</script>
</body>
</html>

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

HTML Lecția
Încă nu există evaluări
HTML Lecția
20 pagini
Website Informatii
Încă nu există evaluări
Website Informatii
61 pagini
Lab 1 HTML
Încă nu există evaluări
Lab 1 HTML
8 pagini
Curs HTML Complet
Încă nu există evaluări
Curs HTML Complet
44 pagini
Tehnologii Web
Încă nu există evaluări
Tehnologii Web
120 pagini
Un Document HTML Este Format Din Text Şi Marcaje (Tag-Uri) - Textul Conţine Informaţia Care Va Fi
Încă nu există evaluări
Un Document HTML Este Format Din Text Şi Marcaje (Tag-Uri) - Textul Conţine Informaţia Care Va Fi
4 pagini
Programare Java Curs 4 2020
Încă nu există evaluări
Programare Java Curs 4 2020
41 pagini
Programare Orietata Obiect
Încă nu există evaluări
Programare Orietata Obiect
60 pagini
Laborator 2 HTML&CSS
Încă nu există evaluări
Laborator 2 HTML&CSS
61 pagini
HTML
Încă nu există evaluări
HTML
43 pagini
HTML All
Încă nu există evaluări
HTML All
184 pagini
DNS SMTP Pop
Încă nu există evaluări
DNS SMTP Pop
20 pagini
AJAX Romana
Încă nu există evaluări
AJAX Romana
7 pagini
CSS - Avansat - Curs FF - BUN
Încă nu există evaluări
CSS - Avansat - Curs FF - BUN
3 pagini
Problem e Javascript
Încă nu există evaluări
Problem e Javascript
2 pagini
Lab JavaScript
Încă nu există evaluări
Lab JavaScript
2 pagini
Retele de Calculatoare in LINUX
Încă nu există evaluări
Retele de Calculatoare in LINUX
12 pagini
Protocolul DNS
Încă nu există evaluări
Protocolul DNS
16 pagini
HTML 1 Formatari
Încă nu există evaluări
HTML 1 Formatari
6 pagini
Mufare Cablu Internet UTP
Încă nu există evaluări
Mufare Cablu Internet UTP
2 pagini
Tema 5 Formulare in HTML
Încă nu există evaluări
Tema 5 Formulare in HTML
41 pagini
HTML Curs
100% (1)
HTML Curs
44 pagini
Introducerea Şi Formatarea Textului
Încă nu există evaluări
Introducerea Şi Formatarea Textului
11 pagini
Elaborarea Unui Sait Pe HTML
Încă nu există evaluări
Elaborarea Unui Sait Pe HTML
34 pagini
Laborator 3 - HTML 4
Încă nu există evaluări
Laborator 3 - HTML 4
3 pagini
Tehnologii Web
Încă nu există evaluări
Tehnologii Web
120 pagini
Test CSS
Încă nu există evaluări
Test CSS
4 pagini
Lab 1 Web
Încă nu există evaluări
Lab 1 Web
9 pagini
Dezvoltarea de Aplicatii Web Folosind Limbajul de Program Are Java
100% (1)
Dezvoltarea de Aplicatii Web Folosind Limbajul de Program Are Java
25 pagini
Web05DezvoltareaAplicatiilorWeb PHP
Încă nu există evaluări
Web05DezvoltareaAplicatiilorWeb PHP
270 pagini
Curs14 - RC - VPN Intranet
Încă nu există evaluări
Curs14 - RC - VPN Intranet
14 pagini
8 Cadre - HTML
Încă nu există evaluări
8 Cadre - HTML
1 pagină
HTML Curs - Probleme
Încă nu există evaluări
HTML Curs - Probleme
7 pagini
Curs 2 HTML&CSS PDF
Încă nu există evaluări
Curs 2 HTML&CSS PDF
62 pagini
2 HTML
100% (1)
2 HTML
103 pagini
Type - Tip Text Ce Contine Comenzi CSS Href - Fisierul Sau Adresa Fisierului CSS
100% (1)
Type - Tip Text Ce Contine Comenzi CSS Href - Fisierul Sau Adresa Fisierului CSS
12 pagini
Initiere in PHP Si MySQL - Valentin Ivascu 2005
Încă nu există evaluări
Initiere in PHP Si MySQL - Valentin Ivascu 2005
2 pagini
Front-End Web Development Online School
Încă nu există evaluări
Front-End Web Development Online School
5 pagini
Laborator 7 CSS
Încă nu există evaluări
Laborator 7 CSS
5 pagini
Criptarea Datelor Retea LAN
Încă nu există evaluări
Criptarea Datelor Retea LAN
16 pagini
Tema 2 Initiere in Limbajul HTML
Încă nu există evaluări
Tema 2 Initiere in Limbajul HTML
37 pagini
Javascript
Încă nu există evaluări
Javascript
233 pagini
Css Romana
Încă nu există evaluări
Css Romana
37 pagini
Tutorial JavaScript
Încă nu există evaluări
Tutorial JavaScript
9 pagini
5 XML Si Java Script
100% (1)
5 XML Si Java Script
46 pagini
! Help Java
Încă nu există evaluări
! Help Java
50 pagini
CSS Prezentare
Încă nu există evaluări
CSS Prezentare
99 pagini
Curs PHP
Încă nu există evaluări
Curs PHP
54 pagini
Toate Cursurile Daw
Încă nu există evaluări
Toate Cursurile Daw
154 pagini
Javascript Curs
Încă nu există evaluări
Javascript Curs
118 pagini
Tutorial PHP Incepatori
Încă nu există evaluări
Tutorial PHP Incepatori
10 pagini
Css
Încă nu există evaluări
Css
99 pagini
Java Lab 1,2
Încă nu există evaluări
Java Lab 1,2
37 pagini
HTML Prin Exemple - Curs
Încă nu există evaluări
HTML Prin Exemple - Curs
11 pagini
Curs 1 Introducere
Încă nu există evaluări
Curs 1 Introducere
61 pagini
Java Basics
Încă nu există evaluări
Java Basics
123 pagini
Elemente Principale HTML
Încă nu există evaluări
Elemente Principale HTML
59 pagini
Curs Css
Încă nu există evaluări
Curs Css
53 pagini
Universitatea TRANSILVANIA Brasov: Introducere in PHP
Încă nu există evaluări
Universitatea TRANSILVANIA Brasov: Introducere in PHP
19 pagini
HTML Lectia1
Încă nu există evaluări
HTML Lectia1
5 pagini