c3_ai_2011_2012
DESCRIPTION
curs 3 htmlTRANSCRIPT
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).
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 ;
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>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>
<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 21. Înserarea unui fişier audio utilizând marcajul bgsound
FormulareFormularele (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. Sintaxa generală pentru deschiderea unui formular este:
<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.
<html>
<head>
<title>Inserare secventa audio cu bgsound</title>
</head>
<body>
<bgsound src="aaa.wav" loop=10>
</body>
</html>
• 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 formularSintaxa generală a tag-ului care defineşte un câmp pentru introducerea datelor într-unformular 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 fitrimise 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 (încaractere);
• MAXLENGTH ="m", atribut opţional prin care se limitează numărul caracterelor care potfi 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 vaintroduce;• 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:
<SELECT NAME="nume_câmp"><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?<SELECT NAME="evaluare"><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 fiiinclus î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 fiemis 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 deactivitate:</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