Documente Academic
Documente Profesional
Documente Cultură
Web 2
Web 2
HTML
HTML notiuni de baza
1) Să se creeze o pagină HTML, al cărei continut să fie format dintr-un text pe
mai multe rănduri. Paginii i se va da titlul : Exemplu 1.
<html>
<head>
<title>Exemplu 1</title>
</head>
<body>
bla bla bla <BR> bla bla bla
</body>
</html>
<html>
<head>
<title>Exemplu 2</title>
</head>
<body>
bla bla bla <BR><BR> bla bla bla
</body>
</html>
<html>
<head>
<title>Exemplu 2</title>
</head>
<body>
<P align=right>bla bla bla</P>
<P align=left>bla bla bla</P>
<P align=center>bla bla bla</P>
<P align=justify>bla bla bla</P>
</body>
</html>
<html>
<head>
<title>Exemplu 2</title>
</head>
<body>
<P align=left>bla bla1 bla.<BR>bla bla1 bla</P>
<P align=left><nobr>bla bla1 bla.bla bla1<BR> bla</nobr></P>
</body>
</html>
<html>
<head>
<title>Exemplu 2</title>
</head>
<body>
<P><nobr>Limbajele care crează o pagină statică sunt:<br>
HTML, XHTML, XML<br>
Limbajele care crează o pagină dinamică sunt:<br>
JavaScript, PHP, ASP, Flach</nobr></p>
</body>
</html>
Afiseaza “text preformatat Acest text a fost scris in HyperText Markup Language(HTML) si afisat
in browser-ul InternetExplorer ” scris la rand fara nici o linie noua.
<html>
<head>
<title>Exemplu 4</title>
</head>
<body>
<p> data: 25-11-08 <br> Maria Popescu</p>
<p> data: 25-11-08 <br> Maria Popescu1</p>
<pre> data: 25-11-08 <br> Maria Popescu</pre>
<pre> data: 25-11-08 <br> Maria Popescu1</pre>
</body></html>
<html>
<head>
<title>Exemplu 4</title>
</head>
<body>
<p> data: 25-11-08 <br> Maria Popescu
data: 25-11-08 <br> Maria Popescu1</p>
<pre> data: 25-11-08 <br> Maria Popescu
data: 25-11-08 <br> Maria Popescu1</pre>
</body></html>
Linie neagra
Paragraft 1
Linie Albastra
Paragraft 2
Linie Rosie
Paragraf 3
Stiluri de text
3) Scrieti cod HTML pentru formatarea unui paragraf cu: fontul Courier
New, culoarea rosie, dimensiune 5.
4) Scrieti cod HTML pentru formatarea paginii cu: fontul Arial Black,
culoarea magenta, dimensiune 3.
Sau
<OL type=I>
<LI>GIGI</LI>
<LI>FANE</LI>
</OL>
<UL type=circle>
<LI>GIGI</LI>
<LI>FANE</LI>
</UL>
I. Exemplul 1
Varianta A
Varianta B
Varianta C
II. Exemplul 2
Varianta A
• Varianta 2.A. a)
• Varianta 2 A b)
Varianta B
<OL type=I>
<LI>Exemplul 1
<UL type=square>
<LI>Varianta A</LI>
<LI>Varianta B</LI>
<LI>Varianta C</LI>
</UL></LI>
<LI>Exemplul 2
<UL type=square>
<LI>Varianta A</LI>
<UL type=disc>
<LI>Varianta 2.A. a)</LI>
<LI>Varianta 2.A. b)</LI>
</UL>
<LI>Varianta B</LI>
</UL></LI>
</OL>
<DL>
<DT>I appreciate your help
</DT>
<DD>Multumesc pentru ajutor
</DD>
<DT>Excuse me
</DT>
<DD>A atrege atentia cuiva
</DD>
<DT>My name is
</DT>
<DD>Numele meu este
</DD>
</DL>
<DL COMPACT>
TABELE
1.
<html>
<head>
<title> Exemplu1</title>
</head>
<body>
<table border=1 align="center">
<tr> <td> Nume </td> <td>Prenume </td> <td> Adresa</td></tr>
<tr> <td> Ene </td> <td> Ana </td> <td> Sos Pantelimon, nr 400, sector 2,
Bucuresti</td></tr>
<tr> <td> Georgescu </td> <td> Dan </td> <td> Sos Colentina, nr 300, sector 2,
Bucuresti</td></tr>
<tr> <td> Ioanitiu </td> <td> Oana </td> <td> Sos Iancului, nr 120, sector 2,
Bucuresti</td></tr>
</table>
</body>
</html>
2.
<html>
<head>
<title> Exemplu2</title>
</head>
<body>
<table border=5 align="center" bordercolor="blue" bgcolor="yellow" rules=cols>
<caption align="top"> <b> Vanzari </b> </caption>
<tr > <td align="center" height="70%"> Produs </td> <td align="center" height="70%">
Cantitate </td> <td align="center" height="70%"> Pret/Buc </td></tr>
<tr> <td align="center"> A </td> <td align="center"> 20b </td> <td align="center"> 10
RON</td></tr>
<tr> <td align="center"> B </td> <td align="center"> 10b </td> <td align="center"> 20
RON</td></tr>
</table>
</body>
</html>
3.
<html>
<head>
<title> Exemplu3</title>
</head>
<body>
<table border=1 align="center" cellspacing=15 cellpadding=10>
<tr > <td align="center"> Produs </td> <td align="center"> Cantitate </td> <td
align="center"> Pret/Buc </td></tr>
<tr> <td align="center"> A </td> <td align="center"> 20b </td> <td align="center"> 10
RON</td></tr>
<tr> <td align="center"> B </td> <td align="center"> 10b </td> <td align="center"> 20
RON</td></tr>
</table>
</body>
</html>
4.
<html>
<head>
<title> Exemplu4</title>
</head>
<body>
<table border=5 align="center" cellspacing=15 cellpadding=10 bordercolor="orange"
rules=all>
<col height="55%">
<tr bgcolor="yellow"> <td colspan=3 align="center"> FIRMA X </td> </tr>
<tr bgcolor="green"> <td align="center"> Produs </td> <td align="center"> Cantitate
</td> <td align="center"> Pret/Buc </td></tr>
<tr bgcolor="green"> <td align="center"> A </td> <td align="center"> 20b </td> <td
align="center"> 10 RON</td></tr>
<tr bgcolor="green"> <td align="center"> B </td> <td align="center"> 10b </td> <td
align="center"> 20 RON</td></tr>
<tr bgcolor="yellow"> <td align="center" colspan=2> 5. SUMA </td> <td
align="center"> 6. 30 RON </td></tr>
</table>
</body>
</html>
5. elementele <TD> si <TH> descriu o celula a unui tabel. daca respectiva celula contine si text,
prin folosirea tag-ului <TH> acesta va aparea aldin si centrat in celula.
6. antet: <THEAD>.......</THEAD>
subsol: <TFOOT> .....</TFOOT>
corp: <TBODY>.......</TBODY>
7. <COLGRUP>.......</COLGROUP> si <COL>
8.
<html>
<head>
<title> Exemplu8</title>
</head>
<body>
<table border=1>
<colgroup span=1 width=50% align="right">
<col width="50%">
<colgroup span=2 align=left>
</table>
</body>
</html>
Imagini
7. Scrieti atributele lui IMG din exemplul precedent care creaza o bordura de
grosime 5 imaginii si care lasă un spTiul alb de 20 pixeli pe orizontală si
verticală între imagine si text.
<img src=raton.jpg border=5 hspace=20 vspace=20 alt="EU" align=middle>
8. In elementul urmator <IMG src=poza_mea.jpg alt=”EU” height=150
width=100> imaginea va fi deformată sau redimensionată?
img va fi redimensionata
Legături
1. Elementul <IMG atribute> este element de linie sau de bloc?
linie
2. Care sunt culorile implicite ale legăturilor nevizitate, active si vizitate?
Schimbati aceste culori implicite în : cyan (#00FFFF), green(#0080000),
respectiv orange(#FFA500).
cele ale browser-ului
3. Ce reprezintă o legatură din exemplul următor?
...
Detalii despre Editura Teora <br>
<A href=http://www.teora.ro > Editura Teora
<img src=http://www.teorausa.com/picts/Top.jpg> Sigla editurii
Teora </A>
Adauga o imagine ca link
4. Cum aflati adresa unei imaginii de pe internet? Realizati o legatura la o parte a
unei imagini de pe internet!
proprietatile imaginii de pe site
codul:
<a href=http://www.teora.ro>
<img src=http://www.teorausa.com/picts/Top.jpg>
</a>
5. ScrieTi 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 s italic.
<html>
<body>
<p>
Mail:
<a href="mailto:someone@microsoft.com">
<i>Puteti sa-mi scrie</i></a>
</body>
</html>
6. Ce efect va avea următorul cod HTML?
<ADRESS> <A href =mailto:rodicaniculescu@gmail.com
?subject=Intrebare
&va rog sa-mi precizati..>Puteti sa-mi scrieti </A>
</ADRESS>
va crea un link catre adresa stabilita cu subiectul Intrebare&va rog sa-mi precizati
7. DefiniTi 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 definiTii de ancore si legături la ele? SpecificaTi
care ancoră este incorect definită?
<A id= mat-inf> trimitere la site-ul fac mat-inf </A>
…………………………………..
<A name=USH> trimitere la site-ul univ SH</A>
…………………………….
<P id=Arhit> Trimitere la site-ul fac de Arhitectura</A>
………………………………….
<P name= fac_eng> Trimitere la site-ul fac de Engleză</A>
…………………………
<A href=#mat_inf> MAT_INF </A>
<A href =.USH> UnivSH </A>
<A href=#Arhit> Arhitectura </A:
<A href =.fac_eng> fac de Engleză</A>
9. Să se creeze un fisier animale.html, cu ancore definite la descrierea
fiecărui animal., de exemplu
<A id=”pisica”> </A>
<H3> PISICA </H3>
Pisica este o felina…..……………………….
<A id=”pisica”> </A>
<H3> PISICA </H3>
<A id=”ciine”></A>
<H3>Ciine </H3>
Ciinele este un animal f.credicions ….
…………………..
Sa se creeze un fisier de forma:
Imagine animal …. referire la ancora animalului din fisierul animale.html
(<IMG src=pisica.jpg> <A href=animale.html#pisica> Pisica </A>
<br>)
Cadre
1. Ce va afisa urmatorul cod HTML?
<HTML> <HEAD> </HEAD>
<FRAMESET rows="30, *">
<FRAME src="articol.doc">
<FRAME src="c:\windows\wewallpaper\tullips.html">
</FRAMESET> </HTML>
Va afisa 2 cadre
2. Este corect următorul cod HTML?
<HTML> <HEAD> </HEAD>
<BODY>
<FRAME src="Carte_web.doc">
<FRAME src="c:\carte_web\cap_web_5\ex_9_2.html">
</BODY> </HTML>
da
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
<HTML>
<FRAMESET rows="50, 15%, *" frameborder="0">
<FRAME src="scriere_col.html">
<FRAMESET cols="30%, 2*, 3*" border="5" bordercolor="red" frameborder="1">
<FRAME src="pagina_1.html">
<FRAME src="pagina_2.html">
<FRAME src="pagina_3.html">
</FRAMESET>
<FRAMESET cols="50%,*" border="6" bordercolor="#800080" frameborder="1">
<FRAME src="flori.jpg">
<FRAME src="C:/Windows/WEB/WALLPAPER/Autumn.jpg">
</FRAMESET>
</FRAMESET>
</HTML>
4. Să se scrie cod HTML pentru a afisa patru pagini într-o fereastră, în
formatul:
5. Să se scrie cod HTML pentru a afisa patru pagini într-o fereastră, în
formatul:
6. Să se scrie cod HTML pentru a afisa 5 pagini într-o fereastră, în formatul:
nu există chenare interioare, chenarul exterior este albastru si de
grosime 5
7. Ce va afisa codul HTML?
<FRAMESET rows="15%, *" frameborder="0">
<FRAME src="Site-ul meu">
<FRAMESET cols="30%, 2*, 3*" border="5" bordercolor="red”>
<FRAME src="pagina_1.html">
<FRAME src="pagina_2.html">
<FRAME src="pagina_3.html">
</FRAMESET>
</FRAMESET>
3 pagini web deschide
8. În exemplul de mai sus să se adauge o altă culoare sI dimensiune pentru
fiecare cadru creat.
9. Ce va crea tag-ul<FRAMESET rows="2*, 3*" cols="40%, *" border="5"
bordercolor="blue"> 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 <FORM> atribute?
_ Action
_ Method
_ Enctype
_ Target
2. Care este diferenta dintre metodele GET si POST de transmitere a datelor
dintr-un formular?
get este directa, post este indirecta
GET:se foloseste ptr a primi date
POST: se foloseste ptr a stoca, updata date sau trimite mailuri
3. Să se scrie codul HTML pentru a crea un formular cu 3 casete de text:
nume, prenume, adresa si un buton de transmitere cu numele GO .
<html>
<body>
<form name="input" action="form_action.asp" method="get">
Nume: <input type="text" name="Nume" size="20" /><br />
Prenume: <input type="text" name="Prenume" size="20" /><br/>
Adresa: <input type="text" name="Adresa" size="50" /><br/>
<input type="GO" value="GO" />
</form>
</body>
</html>
4. Să se scrie codul HTML pentru a crea un formular cu:
_ 2 casete de text: nume_prenume si una cu numele unui examen
_ o caseta de tip parolă cu numele “cod student”
_ o caset ascunsă care să conTină nota la examen
_ un buton de transmitere cu numele GO
<html>
<body>
<form name="input" action="form_action.asp" method="get">
Nume si Prenume: <input type="text" name="Nume si Prenume" size="50" /><br />
Nume Examen: <input type="text" name="Nume Examen" size="20" /><br/>
Cod Student: <input type="password" name="Cod Stundent" size="50" /><br/>
Nota Examen: <input type="hidden" name="Nota Examen" size="5" /></br/>
<input type="GO" value="GO" />
</form>
</body>
</html>
5. Să se scrie codul HTML pentru a crea un formular care să conTină un grup
de butoane radio: de forma
Aparitia publicatiei XX
o zilnic
o saptamanal
o lunar
o annual
<html>
<body>
<form name="input" action="form_action.asp" method="get">
Aparitia editurii XX:<br />
<input type="radio" name="zilnic" size="50" />zilnic<br />
<input type="radio" name="saptamanal" size="20" />saptamanal<br/>
<input type="radio" name="lunar" size="50" />lunar<br/>
<input type="radio" name="anual" size="5" />anual</br/>
</form>
</body>
</html>
6. Să se scrie codul HTML pentru a crea un formular care să conTină 4 casete
de validare , cu posibilele publicatii cumparate, a doua fiind implicit
validatade forma:
Cumpar publicatiile
o adevarul
o cotidianul
o gandul
o cancan
<html>
<body>
<form name="input" action="form_action.asp" method="get">
Cumpar publicatiile:<br />
<input type="checkbox" name="adevarul" size="50" />adevarul<br />
<input type="checkbox" name="cotidianul" size="20" />cotidianul<br/>
<input type="checkbox" name="gandul" size="50" />gandul<br/>
<input type="checkbox" name="cancan" size="5" />cancan</br/>
</form>
</body>
</html>
7. Ce va afisa brwser-ul ?
<B>Forma de invatamant</B>
<SELECT name="Catalog">
<OPTION value= "s1">Popescu Ion
<OPTION value= "s2">Ene Ana
<OPTION value= "s3">Popa Oana
<OPTION value= "s4">Ionescu Dan
<OPTION value= "s5">Grigore Dana
</SELECT>
Se va afisa forma de invatamant si o caseta de selectare
8. Să se adauge la lista de mai sus atributele elementului SELECT pentru a
pute alege mai multe elemente din listă si pentru a fi mereu vizibile 3
elemente ale listei, iar primul element al listei sa fie mereu selectat
. <html>
<body>
<B>Forma de invatamant</B>
<SELECT name="Catalog" multiple="multiple">
<OPTION value= "s1">Popescu Ion
<OPTION value= "s2">Ene Ana
<OPTION value= "s3">Popa Oana
<OPTION value= "s4">Ionescu Dan
<OPTION value= "s5">Grigore Dana
</SELECT>
</body>
</html>
9. La lista de mai sus sa se adauge un buton de transmitere care sa aibă o
imagine si un buton de reinitializare a dtelor din formular
10. În formularul creat la 8 să se insereze o caseta de text ca re sa conTină 5
rânduri si 40 de coloane vizibile .
Imagini hărTi si animaTie
<html>
<body>
<B>Forma de invatamant</B>
<SELECT name="Catalog" multiple="multiple">
<OPTION value= "s1">Popescu Ion
<OPTION value= "s2">Ene Ana
<OPTION value= "s3">Popa Oana
<OPTION value= "s4">Ionescu Dan
<OPTION value= "s5">Grigore Dana
<br></br>
<form input type="get">
</br>
<textarea rows="5" cols="40"></textarea></br>
</SELECT>
</body>
</html>
CSS…..
JavaScript
PROBLEME INTREBARI
1. JavaScript este o versiune
a.. Java
xb. LiveScript
c. C++
d. VBScript
5. write( ) este :
a. Obiect
xb. Metodă
c. Proprietate
d. Variabilă
Instructiuni JS
3. Ce fel de ciclu determină browserul să execute cel puTin o dată instrucTiunile din
cadrul ciclului?
xa. ciclul do...while
b. ciclul while
c. ciclul for
d. ciclul for in
7. Adevărat sau Fals. Clauza default este folosită într-o instrucTiune if pentru
a atribui variabilelor valorile prestabilite.
a. TRUE
xb. FALSE
11. In cadrul definiTiei unei funcTii, argumentele trebuie separate două câte
două prin virgulă?
a. TRUE
xb. FALSE
OBIECTE
1. Folosind obiectul Math să se scrie un script pentru a afisa:
- Aria unui cerc de raza 10
- [1.78] (parte întreagă)
- | -7.89| valoare absoluta
<HTML>
<HEAD>
</HEAD>
<BODY>
<SCRIPT language="JavaScript">
alert("Aria cercului de raza 10= " + Math.PI*Math.pow(5,2))
alert("[1.78]= " + Math.floor (1.78))
alert("abs(-7.89) =" + Math.abs (-7.89 ) )
</SCRIPT>
</BODY>
</HTML>
2. ScrieTi codul care afisează
Metode ale obiectului Math
<HTML>
<HEAD>
</HEAD>
<BODY>
<SCRIPT language="JavaScript">
alert("Math.sqrt(Math.pow((4-8),2)+Math.pow((5-2),2))= " + Math.sqrt(Math.pow((4-
8),2)+Math.pow((5-2),2)) +" lungime segment")
</SCRIPT>
</BODY>
</HTML>
3. ScrieTi cod pentru aflarea modululi unui numar complex
<HTML>
<HEAD>
<SCRIPT language="JavaScript">
function complex(a,b)
{ this.real=a; this.imag=b; this.modul=modul}
function modul()
{return Math.sqrt(this.real*this.real + this.imag*this.imag)}
</SCRIPT>
</HEAD>
<BODY>
<B> Modulul unui număr complex </B> <BR>
<SCRIPT language="JavaScript">
z=new complex(3,4)
document.write("z.real= " +z.real + " z.imaginar= " + z.imag +"<BR>")
m=z.modul()
document.write("modulul numarului complex z= " + m)
</SCRIPT>
</BODY>
</HTML>
<HTML>
<HEAD>
<SCRIPT language="JavaScript">
function complex(a,b)
{ this.real=a; this.imag=b; this.modul=modul}
function modul()
{return Math.sqrt(this.real*this.real + this.imag*this.imag)}
</SCRIPT>
</HEAD>
<BODY>
<B> Modulul unui număr complex </B> <BR>
<SCRIPT language="JavaScript">
z=new complex(3,4)
document.write("z.real= " +z.real + " z.imaginar= " + z.imag +"<BR>")
m=z.modul()
document.write("modulul numarului complex z= " + m)
</SCRIPT>
</BODY>
</HTML>
Tablouri si siruri
Probleme întrebări
2. Ce metodă aTi folosi pentru a crea un sir din elementele unui tablou, separândule
prin cratimă?
a. shift()
b. join()
xc. concat ()
d. str join()
3. Ce metodă este folosită pentru a sterge un element de la sfârsitul (baza) unui
tablou?
a. push( )
xb. pop ()
c. reverse ()
d. shift()
7. Adevărat sau fals: dimensiunea unui tablou este egală cu indicele ultimului
element al tabloului?
a. TRUE
xb.FALSE
7. Indicele ultimului element din tabloul sirului are aceeasi valoare cu lungimea sirului?
xa. TRUE
b. FALSE
Evenimente
5. Ce eveniment are loc când un utilizator evidenTiază text într-un câmp de text?
a. onblur
b. onfocus
xc. onselect
e. onchange
8. O funcTie JavaScript poate schimba doar atributele unui element care apelează funcTia
JavaScript?
xa. TRUE
b.FALSE
9. O funcTie internă
a. Trebuie definită în eticheta <head>
b. Trebuie definită în eticheta <body>
c. Trebuie definită de programator fie pentru a înainta, fie pentru a reseta
formularul
xd. Nu e definită de programator
PHP
1. Care este operatorul de concatenare a mai multor siruri?
a. +
xb. .
c. &
d. *
5. Ce va afisa scriptul
<? Php
$a=10;
$b=”a”;
echo $$b;
?>
a. nimic
xb. 10
c. a
d. “a”