,

,

,

,

.

(H3)

Liste 1. Să se creeze o listă ordonată cu elemente studenŃii dintr-o grupă. 2. Să se creeze o listă ordonată cu elemente studenŃii dintr-un an de studii care sunt bursieri. Lista să fie numerotată cu litere romane scrise cu litere mari 3. Sa se creeze o listă neordonată cu elemente facultăŃile din universitate, iar simbolul listei să fie un cerc. 4. Să se scrie cod HTML pentru a crea următoarea lista imbricată: I. Exemplul 1
Varianta A
Varianta B
Varianta C II. Exemplul 2
Varianta A

2

• Varianta 2.A. a) • Varianta 2 A b)
Varianta B 5. Să se scrie cod HTML pentru a crea următoarea lista de definiŃii: I appreciate your help Multumesc pentru ajutor Excuse me A atrege atentia cuiva My name is Numele meu este 6. Cu ce atribut al elementului

browser-ul va alinia definiŃia pe

acelaşi rând cu termenul asociat ? Tabele 1. Să se scrie cod HTML pentru a crea următorul tabel, aliniat pe centru Nume

Prenume

Adresa

Ene

Ana

Sos Pantelimon, nr. 400, sector 2, Bucuresti

Georgesccu

Dan

Sos Colentina, nr.300, sector 2, Bucuresti

Ioanitiu

Oana

Sos Iancului,nr.120, sector 2, Bucuresti

2. Să se scrie cod HTML pentru a crea un tabel, aliniat drepta, chenar exterior de grosime 5 si de culoare albastră, chenar interior numai între coloane, fundal galben . Linia de titlu mai înalta, si textul centrat si pe orizontala si pe verticală. Tabelul sa aiba o etichetă. Produs

Cantitate

Pret/buc

A

20b

10 Ron

B

10b

20Ron

3. Să se scrie cod HTML pentru a crea un tabel, pentru care spaŃiul dintre celule să fie 15, iar pentru fiecare celulă, spaŃiul dintre text şi marginea celulei să fie de 10. 4. Să se scrie cod HTML pentru a crea un tabel, care are linia de antet de 25% din spaŃiu, iar linia de subsol tot 25%. Corpul tabeluli are liniile de liniile de aceeaşi grosime.

FIRMA X Produs

Cantitate

Pret/buc

A

20b

10 RON

B

10b

20RON

5. SUMA

6. 30RON

4. Să se scrie cod HTML pentru a crea un tabel, în care se concateneză liniile 1 şi 2 şi coloanele 2 şi 3 , astfel

A12

A11

3

A21 5. 6. 7. 8.

A31 A32 A33 Care este diferenŃa între TD şi TH? Care sunt elementele de grupare a liniilor unui tabel, în antent, subsol şi corp de tabel? Care este elementul de grupare a coloanelor pentru a aplica aceeaşi formatare şi elementul de formatare pentru fiecare coloana? Cum va fi format tabelul care are următorul cod HTML?

A	20B	10RON
B	10B	20RON

Imagini 1. Elementul este element de linie sau de bloc? 2. Cum va fi scris textul pe lingă o imagine aliniată la stânga, ca in exemplu de mai jos?

un paragraf inaintea unei imagini

Acesta e un text liber(frunză) scris după o imagine aliniata la stanga. Atentie la aliniere!

Atentie cum se aliniaza al doilea paragraf!

3. Cum va fi scris textul pe lingă o imagine aliniată la dreapta, ca în exemplul de mai jos?

un paragraf inaintea unei imagini

Acesta e un text liber(frunză) scris după o imagine aliniata la dreapta. Atentie la aliniere!

Atentie cum se aliniaza al doilea paragraf!

un paragraf inaintea unei imagini

Acesta e un text liber(frunză) scris după o imagine aliniata top. Atentie la aliniere!

Atentie cum se aliniaza al doilea paragraf!

un paragraf inaintea unei imagini

Acesta e un text liber(frunză) scris după o imagine aliniata middle.

4

Atentie la aliniere!

Atentie cum se aliniaza al doilea paragraf!

un paragraf inaintea unei imagini

Acesta e un text liber(frunză) scris după o imagine aliniata bottom. Atentie la aliniere!

Atentie cum se aliniaza al doilea paragraf!

imaginea va fi deformată sau redimensionată?

9. In elementul urmator imaginea va fi deformată sau redimensionată?

10. In elementul următor imaginea va fi deformată sau redimensionată? Legături 1. Elementul este element de linie sau de bloc? 2. Care sunt culorile implicite ale legăturilor nevizitate, active şi vizitate? Schimbati aceste culori implicite în : cyan (#00FFFF), green(#0080000), respectiv orange(#FFA500). 3. Ce reprezintă o legatură din exemplul următor? ... Detalii despre Editura Teora
Editura Teora Sigla editurii Teora

4. Cum aflatiadresa unei imaginii de pe internet? Realizati o legatura la o parte a unei imagini de pe internet! 5. ScrieŃi cod HTML pentru o legătură care trimite la o adresa de mail mesajul “Puteti sa-mi scrieti”. Formatati legătura ca să fie la început de linie ş italic. 6. Ce efect va avea următorul cod HTML?

5

Puteti sa-mi scrieti 7. DefiniŃi trei ancore într-un document de 3 pagini, cite una la fiecare nceput de pagine, si faceti legătura la ele? 8. Sunt corecte următoarele definiŃii de ancore şi legături la ele? SpecificaŃi care ancoră este incorect definită? trimitere la site-ul fac mat-inf ………………………………….. trimitere la site-ul univ SH …………………………….

Trimitere la site-ul fac de Arhitectura ………………………………….

Trimitere la site-ul fac de Engleză ………………………… MAT_INF UnivSH Arhitectura fac de Engleză 9. Să se creeze un fişier animale.html, cu ancore definite la descrierea fiecărui animal., de exemplu

PISICA

Pisica este o felina…..……………………….

PISICA

Ciine

Ciinele este un animal f.credicions …. ………………….. Sa se creeze un fişier de forma: Imagine animal …. referire la ancora animalului din fişierul animale.html ( Pisica
)

Elementele de structură: HEAD şi BODY 1. Să se scrie trei legături la pagini diferite din site-ul editurii Teora , care au o parte comună: “http://www.teora.ro”, care va fi trecută ca valoare a atributului href, a elementului BASE. <TITLE> Elementul BASE <META name="description" content="invatamint suparior"> <META name="keywords" content=" Editura Teora”> beletristica
Arta
4. Ce va afişa codul următor?

<TITLE> Elementul META_Author <META name"description" content="Carte WEB"> <META name="author" content="Rodica Niculescu> <META name="copyright" content="Editura Spiru Haret"> copyright©2006, Editura Spiru Haret 5. Ce efect se va produce executând codul? <TITLE> Elementul META_http-equiv <META http-equiv="refresh" content="120">

Fisierul contine tag-uri meta

6. Să se scrie cod HTML pentru redirecŃionare fişierului de mai sus la adresa www.teora.ro la fiecare 5 minute. 7. Să se folosească atributele elementului BODY în exemplul de mai jos, pentru a formata legaturile nevizitate cu rosu, cele visitate cu cyan, cele active cu green, iar fundalul sa aiba culoare yellow beletristica
Arta


Dictionare

8. Să se folosească atributele elementului BODY în exemplul de mai sus,

pentru a introduce o imagine de fundal, pentru a lăsa margini staânga 10, dreapta 30, susşi jos 10, iar textul sa fie scris cu darkblue. De asemenea, să se introduca comentarii într-o pagina pe unul sau mai multe râduri şi să se folosească un bloc de centrare informaŃii

7

Cadre 1. Ce va afişa urmatorul cod HTML?

2. Este corect următorul cod HTML?

3. Să se scrie cod HTML pentru a crea 3 cadre, în linia 2, cadranul stânga este inserat o pagină care are 3 legaturi, care se deschid în cadranul din dreapta,de felul următor: Carte WEB Partea _I_ HML Partea_II_ CSS Partea _III_JavaScript 4. Să se scrie cod HTML pentru a afişa patru pagini într-o fereastră, în formatul:

5. Să se scrie cod HTML pentru a afişa patru pagini într-o fereastră, în formatul:

6. Să se scrie cod HTML pentru a afişa 5 pagini într-o fereastră, în formatul: nu există chenare interioare, chenarul exterior este albastru si de grosime 5

7. Ce va afişa codul HTML?

8



8. În exemplul de mai sus să se adauge o altă culoare şI dimensiune pentru fiecare cadru creat. 9. Ce va crea tag-ul aflat în corpul unei pagini?

10. Să se creeze un cadru interioar , folosind IFRAME, în care să se deschidă 3 pagini html.

Formulare 1. Care sunt atributele elementului

atribute? 2. Care este diferenta dintre metodele GET şi POST de transmitere a datelor dintr-un formular? 3. Să se scrie codul HTML pentru a crea un formular cu 3 casete de text: nume, prenume, adresa şi un buton de transmitere cu numele GO . 4. Să se scrie codul HTML pentru a crea un formular cu:
2 casete de text: nume_prenume şi una cu numele unui examen
o caseta de tip parolă cu numele “cod student”
o caset ascunsă care să conŃină nota la examen
un buton de transmitere cu numele GO 5. Să se scrie codul HTML pentru a crea un formular care să conŃină un grup de butoane radio: de forma Aparitia publicatiei XX  zilnic  saptamanal  lunar  anual 6. Să se scrie codul HTML pentru a crea un formular care să conŃină 4 casete

de validare , cu posibilele publicatii cumparate, a doua fiind implicit validatade forma: Cumpar publicatiile  adevarul  cotidianul  gandul  cancan 7. Ce va afişa brwser-ul ? Forma de invatamant <SELECT name="Catalog"> Popescu Ion Ene Ana Popa Oana Ionescu Dan Grigore Dana

9

8. Să se adauge la lista de mai sus atributele elementului SELECT pentru pute alege mai multe elemente din listă şi pentru a fi mereu vizibile elemente ale listei, iar primul element al listei sa fie mereu selectat 9. La lista de mai sus sa se adauge un buton de transmitere care sa aibă imagine şi un buton de reinitializare a dtelor din formular 10. În formularul creat la 8 să se insereze o caseta de text ca re sa conŃină rânduri şi 40 de coloane vizibile .

a 3 o 5

Imagini hărŃi şi animaŃie 1. Ce atribut obligatoriu trebuie să contină tag-ul IMG pentru ca imaginea respectivă să fie considerat ca o hartă şi care e sintaxa acestuia? 2. Care sunt elementele care defineşte o hartă? 3. Ce efect are următorul cod HTML? <MAP NAME="carte"> 4. Ce va crea următorul cod HTML?

5. Ce va crea următorul cod HTML? <MARQUEE> Acesta este un anunt de publicitate la cartea web!

6. Să se creeze o animaŃie a unei imagini care să se deplaseze de sus în jos, conŃinutul blocului să se deplaseze alternativ, la 1 secunda, numărul de pixeli la un pas este de 10, iar culoarea de fond este coral. 7. Să se creeze o animaŃie a unui bloc care conŃine un text şi o imagine, care să se deplaseze de sus în jos, conŃinutul blocului să se deplaseze alternativ, la 0.5 secunde, culoarea de fond este ivory, direcŃia de deplasare a blocului să fie de la stânga la dreapta, iar blocul sa fie inalt de 40% din dimensiunea ferestrei.

10

CSS (Cascading Style Sheets) 1.

2. 3. 4.

5.

din 6. 7.

Să se creeze stiluri in_line , pentru a insera 3 poze în celulele unui tabel cu o linie şi trei coloane, fiecare cu proprietăŃile: border-width, border-style şi border-color cu alte valori. Să se formateze folosind stilurile in_line , un paragraf cu : scris de la dreapta la stanga; cursiv, aldin, cu culoare verde; dimensiune 12; Să se creeze foi de stil în pagină pentru : A - nesubliniat, culoare albastră, corp de literă courier, dimensiune 30; DIV- fundal galben, culoare text rosie, dimensiune 10 SPAN – fundal verde, corp de litera rosu Cum vor fi scrise elementele HTML coform următoarelor stiluri în pagină ? <STYLE> P{font-size:20pt;font-weight:light;color:red;text-align:center:} *{font-style:italic;} OL{font-size:15pt;background:cyan;} LI{font-size:10pt;color:blue;} A{text-decoration:none;color:grown;font-size:15pt;} Se cosideră fişierul de stiluri sil.css Codul fişierului stil-extern.css este: DIV{font-size:20pt;font-weight:light;color:red;text-align:center;} *{font-style:blue;} OL{font-size:30pt;background:green;} LI{font-size:15pt;color:blue} A{text-decoration:none; color:BlueViolet;} Să se creeze o pagină legată la fişierul sil.css care să conŃină elementele fişier (OL,LI,DIV ) Care este prioritatea tipurilor de stiluri? Cum va fi format elementul OL din următoarea pagină? <TITLE>Stiluri-cascada <STYLE>

OL{color:#0000FF;}

Definirea stilurilor(stil intern: blue, extern: italic, fundal cyan)
1. Stil in-line
   
2. Stil in pagina
   (
3. In fisiere externe
   

Fişier extern: cascada.css OL{font-style:italic;background:cyan;}

8.

Să se creze două foi de stil pentru selctorul ID, cu numele #ID1 şi #ID2, care au proprietăŃi diferite. Cu aceste stiluri sa se formateze 3 paragrafe, primil cu ID!, al doilea cu iD@ şi al treulea cu ID1 şI ID2.

11

9.

Să se creze două foi de stil pentru selectorii pseudo-clasă, first-child, pentru prima linie a unui tablou şI pentru primul elemen al unei liste ordonate.

10.

Să se creze 4 foi de stil pentru selectorii pseudo-elemnt first-line şi firstletter. Două blocuri P de formatează unul cu stilul first-line şi celălalt cu stilul first-letter. Un bloc DIV se formatează cu stilul first-line, iar blocul CENTER cu stilul first-letter.

11. ScrieŃi paragraful următor “Un exemplu de paragraf formatat” cu stilul: caseta P are: inaltimea bordura de forma solid grosime 1 cm, culoare roşie, fundalul verde deschis, Ńesătura de dimensiuni 1cm,1in, textul să fie aliniat la centru , cu font Arial, bold, italic 12. Exemplul de mai sus sa aibă pe fundal o imagine aflată pe web 13. FolosiŃi atribute pentru font şi text pentru a ascrie paragraful: ” Acest text a fost scris subliniat, cu un cuvant taiat , unul barat, aliniat pe centru, de grosime 600, de dimensiune large”. 14. FolosiŃi atribute pentru font şi text pentru a ascrie paragraful: ” Acest text a fost scris identat la 15px, cu litere mari, spatiat între rinduri la 1cm, între litere la 1mm şi între cuvinte la 5pt”. 15. FolosiŃi atribute pentru casetă, font şi text pentru a ascrie paragraful: ” Acest text a fost scris de grosime subtire, dimensiune 15pt, litere mici, italic, stil sans-serif, culoare text albastru, spatiere între linii la 0,5cm, margini stânga 1cm, margini dreapta 2 cm, margini top 3cm, padding, bordura grosime medie, culoare verde inchis, stil outset”. Să se introducă o singură imagine de fundal la mijlocul ferestrei, care rămine fixă. 16. Să se introducă o imagine care să se repete pe orizontală, poziŃionată la 1/3 din partea stâga ferestrei şi 1/2 din înălŃimea ei(33%, 50. 17. Să se introducă o imagine care să defileze cu pagina, să aibă fundal coral, să se repete pe orizontală şi verticală. PoziŃionarea elementelor în pagină în CSS 1. Să se construiască arborele următorului document HTML: <STYLE>

P {background:yellow; height:50px; width:550px; border_width:10px;} B {background:cyan height:10px; width:100px;} I {{background:red; height:10px; width:150px}

Pozitionarea caseteleor in flux normal si crearea Arborelui paginii

Semn de Eclamare

a11	a12
a21	a22

Tabel 1

Tabel 2

12

b11	b12
b21	b22

C11	C12
C21	C22

2. Să se scrie toate elementele in_line şi apoi in_block 3. Să se schimbe fluxul normal aliniind imaginea şi a primului tabel la dreapta 4. Sa se poziŃioneze imaginea absolut faŃă de colŃul stânga sus

5. Să se poziŃioneze absolut elementu TD care contine imaginea

13

6. Cum va poziŃiona browser-ul elementele confor codului HTML ? <STYLE> P {background:yellow; height:50px; width:300px; border_width:10px;} B {background:cyan height:10px; width:100px;} I {{background:red; height:10px; width:150px} Table {position:absolute; left:100 ;top:100;} IMG {position:absolute; left:40; top:50} 7. Să se poziŃioneze relativ imaginea astfel :

8. Ce va afişa browserul la intilnirea proprietăŃi Z-index <STYLE> #table{position:absolute;background-color:cyan; top:50; left:50; zindex:1;} #table2{position:absolute; background-color:yellow;top:70; left:70;zindex2;} #table3{position:absolute;background-color:coral;top:100;left:100;zindex:3;} ? 9. ScrieŃi cod HTML pentru a obŃine rezultatul de mai jos(imaginile din tabele pot fi oarecare)

14

10. SchimbaŃi poziŃia tabelelor din imagine !

JavaScript PROBLEME INTREBARI 1. JavaScript este o versiune a. a.. Java b. LiveScript c. C++ d. VBScript 2. Un program JavaScript trebuie să fie inclus în a. Eticheta