Slide 1

Limbajul HTML (III)

Utilizarea formularelor in HTML

Formulare Un formular este constituit din elemente speciale, denumite elemente de control (controls), cum ar fi butoane radio, butoane de validare, câmpuri text, meniuri, prin intermediul cărora cel care vizualizează pagina Web poate transmite informaţii către serverul care găzduieşte pagina Web respectivă

O sesiune cu o pagina Web ce conţine un formular cuprinde două etape: Utilizatorul completează formularul şi, prin apăsarea butonului de expediere, trimite serverului datele înscrise în formular. O aplicaţie dedicată de pe server (un script) analizează informaţiile transmise şi, în funcţie de configuraţia scriptului, fie stochează datele într-o bază de date, fie le transmite la o adresă de mail indicată. Dacă este necesar, serverul poate expedia şi un mesaj de răspuns utilizatorului.

Inserarea formularelor in site-uri se realizeaza in mai multe etape: 1. proiectarea formularului de intrare, care va fi completat de vizitator; 2. scrierea aplicatiei care va prelucra informatiile din formular; 3. proiectarea documentului raspuns - generat de scriptul CGI - Common Gateway Interface, PHP Hypertext Preprocesor sau ASP Active Server Pages (raspuns la cererea adresata prin completarea formularului)

Crearea unui formular <FORM> </FORM> In interiorul blocului sunt incluse: elementele formularului, în care vizitatorul urmează să introducă informaţii un buton de expediere (submit), la apăsarea căruia, datele sunt transmise către server opţional, un buton de anulare (reset, cancel), prin care utilizatorul poate anula datele înscrise în formular

Eticheta <FORM> are două atribute esenţiale: action și method action comunică browserului unde să trimită datele introduse în formular. Action: stabileste ce anume se va intampla cu datele scrise in formular. Ca valoare a acestui atribut se poate specifica: o un program/script care trateaza continutul formularului ca un set de cuvinte cheie ce vor defini o cautare; o URL-ul unui script CGI, aflat, de obicei, in directorul cgi-bin de pe serverul WWW local (cel care contine pagina respectiva) o Action="mailto:adresa_de_mail": specifica faptul ca datele din formular vor fi trimise prin posta electronica la adresa data; acestea pot fi prelucrate ulterior, eventual "manual"; action mentioneaza adresa scriptului (aflat pe server) care va interpreta formularul (va prelua datele si le va prelucra). exemplu: <FORM action="http://www.yahoo.com/cgi-bin/nume_fis.cgi">.

method - precizează metoda utilizată de browser pentru expedierea datelor formularului. Atributul method poate avea două valori: post - folosită în cele mai multe cazuri. Indică serverului să furnizeze datele direct scriptului ca date de intrare standard si sunt permise cantitati mari de date. get (valoarea implicită) - datele din formular sunt adăugate la adresa URL precizată de atributul action, între adresa URL şi date fiind inserat un "?". Permite trimiterea unor mici cantitati de date. Datele sunt adăugate conform sintaxei: nume_camp=valoare_camp De exemplu: "http://www.yahoo.com/cgi-bin/nume_fis.cgi? nume1=valoare1&nume2=valoare2"

Pentru a defini elementele care fac parte din formular se utilizează etichetele <INPUT> <SELECT> <OPTION> <TEXTAREA>

Eticheta <INPUT> - se pot introduce în formular câmpuri de editare (casete de text), câmpuri de tip password, butoane de expediere şi anulare, butoane radio şi casete de validare Atribute: type - prin care se precizează tipul elementului. name - permite ataşarea unui nume fiecărui element al formularului. value - permite atribuirea unei valori iniţiale unui element al formularului.

Atributul type poate avea următoarele valori: text - se foloseşte pentru a introduce un câmp de editare pe o singură linie password se foloseşte pentru a insera un câmp de editare în care caracterele introduse sunt înlocuite cu asteriscuri (*) Pentru câmpurile text -atribute size - Seteaza marimea campului. maxlength - valoarea maxima de caractere ce pot fi introduse

radio folosit pentru a insera un şir de butoane radio (elemente care se folosesc pentru a selecta dintr-o listă de opţiuni una şi numai una dintre ele) checkbox folosit pentru a introduce un şir de casete de validare (elemente care se folosesc când dintr-o listă de opţiuni se poate alege mai mult de o singură variantă)

submit se foloseşte pentru a introduce un buton de expediere reset se foloseşte pentru a introduce un buton de anulare a informaţiilor introduse în formular button - se foloseşte pentru a introduce în formular un buton obişnuit hidden - se foloseşte pentru a introduce în formular un câmp ascuns formular1.html Casete de text: formular2.html

file - permite expedierea conţinutului unui fişier a cărui adresă URL este transmisă prin intermediul atributului value sau poate fi tastată într-un câmp de editare ce apare odată cu formularul sau poate fi selectată prin intermediul unei casete de tip File Upload sau Choose File care apare la apăsarea butonului Browse din formular. <input type= file" name="file"> formular_ex_file.html

Butoanele Radio se folosesc atunci cand se doreste alegerea unei singure optiuni dintr-un numar limitat de posibilitati. Atributul checked pentru valoare implicită Exemplu: <form> <input type="radio" name="sex" value="barbat"> Barbat <br> <input type="radio" name="sex" value="femeie"> Femeie </form> formular_buton_radio.html formular3.html

Casetele de selectie se folosesc atunci cand se doreste selectarea unei optiuni sau mai multor optiuni dintr-un numar limitat de optiuni. Atributul checked pentru valoare implicită Exemplu: <form> Imi place sa lucrez la calculator: <input type="checkbox" name="calculator" value= "Calculator > <br> Imi place sa citesc: <input type="checkbox" name="lectura" value="lectura" checked> <br> </form> formular_casete_selectie.html formular4.html

Etichetele <SELECT> şi <OPTION> Un meniu de selectie se obtine utilizand elementul "select" Fiecare optiune a acestui meniu se obtine prin intermediul elementului "option" (<option>... </option>). formular5.html Eticheta <TEXTAREA>formular6.html formular7.html Validarea datelor

Inserarea sunetelor si videoclipurilor Multimedia se prezintă într-o multitudine de formate, iar pe Internet veţi găsi multe dintre aceste elemente înglobate în pagini web. Browser-ele actuale oferă suport pentru multe dintre aceste formate, dar nu pentru toate. Suportul pentru sunete, animaţii şi video este tratat în mod diferit de browsere diferite. Unele elemente pot fi manevrate intern, altele necesită anumite plug-inuri, în vreme ce altele pot solicita activarea anumitor controale ActiveX. Elementele multimedia (precum sunetele şi video) sunt stocate în fişiere media. Modalitatea cea mai simplă de a determina tipul unui fişier media este de a analiza extensia fişierului respectiv.

Formatul fişierelor multimedia ce conţin sunete. Formatul MIDI (Musical Instrument Digital Interface) este un format ce permite transmiterea de informaţii muzicale între dispozitive electronice muzicale (precum sintetizatoare) şi plăcile de sunet ale calculatoarelor. Formatul MIDI a fost implementat în 1982 de către industria muzicală. Acest format este foarte flexibil şi poate fi folosit de la crearea unor sunete foarte simple, până la crearea unora cu adevărat profesionale. Fişierele MIDI nu conţin sunete, ci un set de instrucţiuni digitale muzicale (note muzicale) care pot fi interpretate de plăcile de sunet ale calculatoarelor. Dezavantajul la acest tip de fişiere constă în faptul că nu pot stoca muzică (în toată complexitatea ei), ci doar note muzicale. Avantajul îl constituie mărimea mică a acestor fişiere, prin urmare se pot încărca uşor întro pagină web, precum şi faptul că acest format este suportat de majoritatea sistemelor de operare şi de cele mai populare browsere de Internet. Fişierele de tip MIDI au extensia.mid sau.midi.

Formatul RealAudio Formatul RealAudio a fost dezvoltat pentru Internet de către Real Media. Acest format suportă chiar şi video. Formatul permite difuzarea de informaţii audio (muzică on-line, Internet radio) cu lăţime de bandă joasă. Din cauza acestei lăţimi de bandă, calitatea este, de cele mai multe ori, slabă. Fişierele de tip RealAudio au extensia.rm sau.ram.

Formatul AU Acest format a fost dezvoltat de către Sun Microsystems şi este suportat de majoritatea sistemelor de operare. Aceste fişierele au extensia.au.

Formatul AIFF (Audio Interchange File Format) a fost dezvoltat de către Apple. Acest tip de fişiere nu sunt suportate de toate browser-ele. Aceste fişiere au extensia.aif sau.aiff. Formatul SND (Sound) a fost dezvoltat de către Apple şi fișierele au acelaşi dezavantaj, şi anume că nu sunt suportate de toate browserele. Aceste fişierele au extensia.snd.

Formatul WAVE WAVE (waveform) a fost dezvoltat de către IBM şi Microsoft. Este un format suportat de toate computerele pe care rulează Windows şi este recunoscut de majoritatea browserelor. Fişierele de tip WAVE au extensia.wav.

Formatul MP3 Fişierele MP3 sunt de fapt fişiere MPEG, dezvoltate iniţial pentru video de către Moving Pictures Experts Group. Se poate afirma că fişierele MP3 reprezintă partea de sunet dintr-un fişier video în format MPEG. MP3 este în prezent unul dintre cele mai populare formate folosite la înregistrarea muzicii. Sistemul de codificare MP3 combină o bună compresie (ce duce la fişiere mici) cu calitate înaltă. Fişierele de tip MP3 au extensia.mp3 sau.mpga.

Formatul MP4 MP4 nu este o evolutie a MP3 este un container de clipuri video şi multe alte formate de mass-media MP4 este cel mai frecvent utilizat pentru a stoca formate video și audio, dar poate fi de asemenea utilizat pentru a stoca și subtitrări, imagini statice, și streaming pe internet. MP4 este un format protejat care folosește tehnologia DRM (Digital Rights Management) pentru a restricționa copierea.

Inserarea fișierelor audio Tag-ul <audio> se foloseste pt. a adauga sunet, muzica in pagina web. Atribute: autoplay (autoplay="autoplay") - Sunetul, muzica va incepe automat. controls (controls="controls") - Controalele audio (play / pauza, etc.) vor fi afisate. loop (loop="loop") - Muzica va incepe din nou dupa ce se termina. src (src="url") - Adresa URL a fisierului audio. Elementul <audio> foloseste tag-ul <source> ca sa specifice sursa fisierului audio si fisiere alternative pentru diferentele dintre navigatoarele web, bazate pe tipul de codec recunoscut.

<!DOCTYPE html> <html> <body> <audio controls="controls"> <source src="audio/balada_1_chopin.mp3" type="audio/mpeg " > Browser-ul nu suporta elementul audio. </audio> </body> </html> test_audio.html

Formatul fişierelor multimedia ce conţin video Formatul AVI Formatul AVI (Audio Video Interleave) a fost dezvoltat de către Microsoft. Este un format suportat de toate computerele pe care rulează Windows şi este recunoscut de majoritatea browsere-lor. Deşi este un format des întâlnit pe Internet, nu este întotdeauna suportat de calculatoarele cu sisteme de operare non- Windows. Fişierele de tip AVI au extensia.avi.

Formatul Windows Media Acest format a fost dezvoltat de către Microsoft și este unul suportat de toate computerele pe care rulează Windows, dar nu este suportat de calculatoarele cu sisteme de operare non- Windows decât în urma instalării unor extra componente (playere specializate). Fişierele de tip Windows Media au extensia.wmv.

Formatul MPEG Formatul MPEG (Moving Pictures Expert Group) este în prezent unul dintre cele mai populare formate folosite pe Internet. Acest format este suportat de majoritatea sistemelor de operare şi de cele mai populare browsere de Internet. Fişierele de tip MPEG au extensia.mpg sau.mpeg.

Formatul QuickTime Formatul QuickTime a fost dezvoltat de către Apple şi nu poate rula pe platformele Windows fără instalarea unui player specializat. Fişierele de tip QuickTime au extensia.mov sau.qtm. Formatul RealVideo Formatul RealVideo a fost dezvoltat pentru Internet de către Real Media. Formatul permite difuzarea de informaţii video (video on-line, Internet video) cu lăţime de bandă joasă. Din cauza acestei lăţimi de bandă, calitatea este, de cele mai multe ori, slabă. Fişierele de tip RealVideo au extensia.rm sau.ram.

Formatul Shockwave (Flash) Formatul Shockwave a fost dezvoltat de către Macromedia. Acest format necesită instalarea unui player specializat pentru a putea rula. În prezent, această componentă este oferită preinstalată de ultimele versiuni ale browsere-lor Netscape şi Internet Explorer. Fişierele de tip Shockwave au extensia.swf.

Tag-ul <video> este un element multimedia folosit pt. a adauga in pagina web video clipuri si alt continut video. Tag-ul HTML5 <video> poate folosi atributele: autoplay (autoplay="autoplay") - Filmul /videoclip-ul va incepe automat. controls (controls="controls") - Butoanele de control (play / pauza, etc.) vor fi afisate. height (height="pixeli") - Inaltimea player-ului, in pixeli. width (width="pixeli") - Lungimea player-ului, in pixeli. muted (muted="muted") - Sunetul din film va fi pe mut, nu e redat. poster (poster="url") - Specifica o imagine care sa fie afisata in timp ce filmul se incarca, sau pana cand e apasat butonul play. Daca acest atribut nu e adaugat, va fi afisat primul cadru din film. loop (loop="loop") - Filmul va porni de la inceput dupa ce se termina. src (src="url") - Adresa URL a fisierului video. <source>- sursa fisierului video

Fișiere video de pe Youtube Fișierele video de pe Youtube pot fi inserare în cadrul unei pagini web preluând codul de pe pagina respectiva. Codul ce trebuie inserat se găsește accesând Share» Embed. Ex. <!DOCTYPE html> <html> <body> <iframe width="560" height="315" src="https://www.youtube.com/embed/itafff2y2o0" frameborder="0" allowfullscreen></iframe> </body> </html> test_youtube.html

HTML5 embed tag Tag-ul <embed> se folosește pentru a adăuga in pagina aplicații cu conținut interactiv, cum sunt prezentările flash SWF, plug-inuri, sau fișiere cu imagini. Poate să folosească atributele: height (height="pixeli") - Inaltimea cadrului in care este afișat conținutul, in pixeli. width (width="pixeli") - Lungimea cadrului in care este afișat conținutul, in pixeli. type (type="mime_type") - Tipul MIME al conținutului. src (src="url") - Adresa URL a fișierului. Ex. <embed src="flash_game.swf" height= 150" width="150 />

Utilizarea stilurilor CSS (Cascade Style Sheets)

CSS - etichete folosite pentru formatarea paginilor web (formatare text, background, aranjare in pagina, etc.). Beneficiile sintaxei CSS sunt: formatarea este introdusă intr-un singur loc pentru tot documentul editarea rapidă a etichetelor datorită introducerii intr-un singur loc a etichetelor se obține o micșorare a codului paginii, implicit incărcarea mai rapidă a acesteia

Specificarea stilurilor Sintaxa CSS este structurată pe trei nivele: 1. nivelul 1 proprietățile etichetelor din documentul HTML, tip inline 2. nivelul 2 informația introdusă in blocul HEAD, tip embedded (intern) 3. nivelul 3 - comenzile aflate in pagini separate, tip extern

Comenzile CSS de nivel 1 sau inline suprascriu orice alte comenzi CSS. Sunt amplasate in interiorul etichetelor HTML aflate in zona BODY și au sintaxa: <eticheta style="codul CSS dorit">...textul sau obiectul asupra caruia este aplicat codul CSS... </eticheta>

Comenzile de nivel 2 sau embedded sunt cele amplasate oriunde intre perechea de etichete <head> și </head> conform sintaxei: <style type="text/css">... comenzi CSS... </style> style -specifică unde incepe și unde se termină blocul CSS, iar type este folosit pentru a ascunde de browserele vechi, care nu cunosc sintaxa CSS, conținutul blocului style.

Folosirea unui fișier extern sau nivel 3 care conține comenzi CSS poate fi utilizat in mai multe situații (mai multe fișiere HTML pot folosi același fișier extern CSS) eliminând timpul necesar introducerii codului corespunzător in fiecare pagină și totodata editarea lor intr-un singur loc pentru mai multe fișiere. Extensia acestor fișiere este.css. Legătura paginilor HTML cu fișierele externe CSS se face prin <link rel="stylesheet" type="text/css" href="fisier_css.css"> Atributele indică: rel - fișierul este tip stylesheet type - tip text ce conține comenzi CSS href - fișierul sau adresa fișierului CSS

Etichetele CSS sunt cunoscute sub numele de elemente sau selectori având un layout asemănător cu etichetele HTML. eticheta HTML <eticheta proprietate="valoare"> eticheta CSS element {proprietate : valoare;} Obs. element poate fi o eticheta HTML, un id sau un class, iar proprietatea și valoarea sunt aceleași ca in HTML.

Sintaxa generală a unei declaraţii de stil este: listă_selectori{ proprietatea_1:listă_valori1; proprietatea_2:listă_valori2; proprietatea_n:listă_valorin; } Selectorii sunt utilizaţi pentru determinarea elementelor HTML asupra cărora vor fi aplicate stilurile. Ex. h1 { font-family:"arial"; font-size:15px; } Obs. Proprietățile și valorile constituie definiția regulii CSS. Acestea se regăsesc sub forma de perechi, despărțite de caracterul două puncte :, fiecare pereche se termină cu un caracter punct și virgulă ";".

Selectorul HTML redefinește modul de afisare a continutului unei etichete HTML Clasa o regula care poate fi aplicata oricarei etichete HTML <selector class="nume_clasa"> Text </selector>.nume_clasa {proprietate:valoare; proprietate:valoare;...} Identificator - stilizează elementele dintr-o pagină care apar o singură dată < selector id="nume_id"> Text </ selector > #nume_id {proprietate:valoare; proprietate:valoare;... }

class și id sunt comenzi care dau unei formatări CSS un nume. Se folosesc atunci când dorim să aplicăm un style de formatare unei anumite zone.