Html 22y2m

  • ed by: Ольга Сосова
  • 0
  • 0
  • July 2021
  • PDF

This document was ed by and they confirmed that they have the permission to share it. If you are author or own the copyright of this book, please report to us by using this report form. Report 3i3n4

Overview 26281t

& View Html as PDF for free.

More details 6y5l6z

  • Words: 12,766
  • Pages: 64
Salvaţi fişierul cu numele "pagina.htm". Lansaţi browserul Internet Explorer. Selectaţi "Open" (sau "Open Page") din meniul File al browserului. Apare o fereastră de dialog. Selectaţi "Browse" (sau"Choose File") şi localizaţi fişierul HTML creat - "pagina.htm" – selectaţi-l şi efectuaţi click pe "Open". În fereastra de dialog va apărea adresa fişierului, de exemplu "D:\HTML\pagina.htm". Efectuaţi click OK şi browserul va afişa această pagină.

Explicarea exemplului Orice document HTML începe cu notaţia şi se termină cu notaţia . Aceste notaţii se numesc în literatura de specialitate ”tag-uri”. Prin convenţie, toate tagurile HTML încep cu o paranteză unghiulară deschisă ”<” şi se termină cu o paranteză unghiulară închisă ”>”. Tag-urile între aceste paranteze transmit comenzi către browser pentru a afişa pagina întrun anumit mod. Tag-ul indică browserului că acesta este începutul documentului

4

HTML. Ultimul tag din document este . Acest tag indică browserului că acesta este sfîrşitul documentului HTML. Între cele două marcaje şi există două secţiuni: - secţiunea de antet ... şi - corpul documentului .... Blocul ... cuprinde conţinutul propriu-zis al paginii HTML, adică ceea ce va fi afişat în fereastra browserului. Un tag poate fi scris atît cu litere mici, cît şi cu litere mari. Adică = = . Caracterele ”spaţiu” şi ”CR/LF” ce apar între taguri sunt ignorate de către browser. Titlul unei pagini se obţine inserînd în secţiunea ... a următoarei linii:

Titlul paginii Web 49q2r Conţinutul blocului ... 716l1p va apărea în bara de titlu a ferestrei browser-ului. Dacă acest bloc lipseşte într-o pagină HTML, atunci în bara de titlu a ferestrei browser-ului va apărea numele fişierului. Textul dintre tagurile şi

este textul care apare în fereastra browserului. În

secţiunea ... poate fi scris text cît doriţi. Daca nu apare nici un marcaj de tipul atunci interpretatorul HTML le va lua ca texte simple şi le va afişa pe ecran. Dacă introducem mai multe linii intr-o pagină browser-ul va afişa într-un singur rînd, întrucît caracterele ”CR/LF” sunt ignorate de browser. Trecerea pe o linie noua se face la o comandă explicită, care trebuie să apară în pagina html. Această comandă este marcajul
(de la ”line break” - întrerupere de linie). Textul dintre tagurile şi este o informaţie de antet. Informaţia de antet nu este afişată în fereastra browserului.

Extensiune HTM sau HTML? Fişierul HTML poate fi salvat cu extensiunea .htm sau .html. În exemplu a fost utilizată extensiunea .htm prin analogie cu extensiunile de 3 litere ale altor fişiere, deşi extensiunea .html este echivalentă.

Editoare HTML: Documentele HTML sunt documente în format ASCII şi prin urmare pot fi create cu orice editor de texte. Fişierele HTML pot fi create şi redactate utilizînd un editor WYSIWYG (what you see is what you get - ce vezi este ceea ce obţii ), precum FrontPage, Claris Home Page, sau Adobe PageMill fără a fi nevoit să scrieţi tagurile de marcare în textul documentului.

5

Au fost de asemenea dezvoltate convertoare care permit formatarea HTML a documentelor generate (şi formatate) cu alte editoare. Dacă doriţi să fiţi un elaborator Web profesionist este necesar să utilizaţi un editor de texte pentru a învăţa a scrie fişiere HTML.

Întrebări frecvente (Frequently Asked Questions) După ce am compus un fişier HTML, nu pot vedea rezultatul în browser. Care este cauza? Asuguraţi-vă că ati salvat documentul cu un nume corect cu extensiunea .htm sau .html, de exemplu "d:\pagina.htm". De asemenea asiguraţi-vă că utilizaţi acelaşi nume cînd deschideţi fişierul în browser.

Am încercat să redactez fişierul HTML, dar modificările nu au apărut în browser. Care este cauza? Browserul menţine paginile în memoria cache, ca să nu citească aceeaşi pagină de două ori. Dacă aţi modificat pagina, browserul nu ştie acest lucru. Utilizaţi butonul refresh/reload al browserului pentru a forţa browserul să citească pagina modificată.

Ce browser trebuie să utilizez? Poate fi utilizat orice browser, Internet Explorer, Mozilla, Netscape sau Opera. Unele documente Web necesită ultimile versiuni ale browserelor. 1.2. HTML 4.0 sau HTML 3.2? HTML 3.2 nu mai este recomandat să se utilizeze! Iniţial HTML nu a fost lansat pentru formatarea documentelor. Tagurile HTML au fost create pentru a defini conţinutul sau structura documentului, de exemplu:

Acesta este un paragraf

Acesta este un titlu 5b3u3y

. Atunci cînd au fost adăugate taguri de tipul şi atributele pentru culori în specificaţiile HTML 3.2 a început durerea de cap a programatorilor de pagini Web. Elaborarea unor situri Web de proporţii, unde fonturile şi culorile trebuie adăugate pentru fiecare pagină Web a devenit un proces de durată, anevoios şi extenuant.

Ce este valoros în HTML 4.0 ? În HTML 4.0 toate formatările pot fi scoase în afara documentului HTML şi incluse într-o foaie separată denumită style sheet sau foaie de stil. Deoarece HTML 4.0 separă presentarea documentului de structura lui, a fost obţinut ceea ce se dorea dintotdeauna: controlul total al şablonului de prezentare fără a implica conţinutul documentului.

Ce se recomandă?

6

Încetaţi să utilizaţi atribute de prezentare în interiorul tagurilor HTML. Lista completă a tagurilor HTML indică tagurile şi atributele învechite (deprecated) HTML 4.0 şi este prezentată în anexa 1.

1.3. Validarea fişierelor HTML 4.01 Un document HTML este validat referitor la Document Type Definition - Definirea Tipului de Document (DTD). Înainte de a valida un fişier HTML, este necesar de a adăuga DTD corect în primul rînd al fişierului. HTML 4.01 Strict DTD permite includerea elementelor şi atributelor care nu sunt învechite sau nu se utilizează în definirea cadrelor (frameset):

HTML 4.01 Transitional DTD permite includerea tuturor elementelor din DTD strict plus elementele şi atributele învechite:

HTML 4.01 Frameset DTD include transitional DTD plus cadrele (frames):



2. Elemente şi atribute HTML Documentele HTML sunt fişiere de tip text, care conţin elemente HTML. Elementele HTML sunt definite prin intermediul tagurilor HTML. 2.1.Taguri HTML •

Tagurile HTML se utilizează pentru a marca elementele HTML.

•

Tagurile HTML sunt delimitate prin intermediul a 2 caractere < şi >.

•

Caracterele de delimitare se numesc paranteze unghiulare.

•

Tagurile HTML de obicei se utilizează în perechi, de exemplu şi . 7

•

Primul tag din pereche este tagul de start, al doilea tag este tag de final.

•

Textul dintre tagul de start şi de final este conţinutul elementului.

•

Tagurile HTML nu depind de registru, este echivalent cu .

•

Unele elemente HTML au numai tag de start. Aceste elemente se numesc vide (empty).

•

Tagurile de final sunt opţionale pentru unele elemente, standardul HTML 4.0 recomandă însă includerea tagurilot de final opţionale.

2.2. Elemente HTML Considerăm un exemplu de document HTML:

Elemente HTML 6x4826

Fragment de text. Acest text este evidenţiat cu aldine

 Acesta este un element HTML: Acest text este evidenţiat cu aldine Elementul HTML începe cu tagul de start: . Conţinutul elementului HTML este: Acest text este evidenţiat cu aldine. Elementul HTML se termină cu tagul de final: . Tagul se utilizează pentru a defini un element HTML afişat cu aldine. Acesta este de asemenea un element HTML:



8

Fragment de text. Acest text este evidenţiat cu aldine



Acest element HTML începe cu tagul de start şi se termină cu tagul de final . Tagul defineşte elementul HTML care conţine corpul documentului HTML. De ce utilizăm taguri cu minuscule? Tagurile (tags) HTML nu depind de registru: este echivalent cu . Dacă veţi naviga pe Web, veţi observa că în majoritatea tutorialelor se utilizează taguri HTML scrise cu majuscule. În această lucrare se utilizează taguri HTML scrise cu minuscule. De ce? Consorţiumul World Wide Web (W3C) http://www.w3.org recomandă utilizarea tagurilor HTML cu minuscule în standardele HTML 4. XHTML (generaţia următoare HTML) necesită de asemenea taguri cu minuscule.

2.3. Atribute Tagurile pot avea atribute. Atributele oferă informaţie suplimentară despre elementele HTML. Tagul defineşte elementul body din pagina HTML. Dacă se adaugă atributul bgcolor, atunci browserul afişează pagina într-o culoare de fundal indicată de valoarea atributului bgcolor.

Exemplu culoare de fundal. Dacă fundalul paginii este galben deschis, atunci trebuie să se scrie: . Exemplu tabel fără bordură. Tabelele se creează cu tagul . Dacă se adaugă atributul border cu valoarea 0, atunci browserul va afişa un tabel fără bordură.










Acesta este text din paragraf.

Acesta este text din paragraf.

Acesta este text din paragraf.



Elementul paragraph este definit de tagul p.

. HTML adaugă în mod automat spaţiu liber pînă şi după paragraf. 3.2. Titluri (Headings) Titlurile sunt definite cu tagurile

. 5p6m3i

defineşte titlul de nivel 1 (mai important, evidenţiat cu litere aldine avînd cea mai mare înălţime relativă. 3c5y35

defineşte titlul de nivel 6 (cel mai mic). HTML adaugă în mod automat un rind liber pînă şi după titlu. Cod HTML: 43523c

Titlu de nivel 1 1t163s

Titlu de nivel 2 2e5x4a

Titlu de nivel 3 2g1p5b

Titlu de nivel 4 4bh51

Titlu de nivel 5 2c6520
Titlu de nivel 6 1p3k3j

Utilizati tagurile heading doar pentru titluri. Nu le utilizati pentru a evidentia un text. Există alte taguri pentru evidentiere.













Acesta
este para
graf cu întreruperi de linie.






pentru a insera un rînd nou. Utilizaţi în acest scop tagul
. (Nu utilizaţi însă tagul
pentru a crea liste.) Paragrafele pot fi create fără tagul de închidere













- 4a16k

Defineşte titlurile de nivel 1 pînă la 6 h3a6q



Defineşte un paragraf




Inserează o singură întrerupere de linie



Defineşte o linie orizontaă

13



Defineşte un comentariu

4. Liste HTML În HTML există liste ordonate (numerotate), liste neordonate (marcate) şi liste de definiţii. 4.1. Liste neordonate O listă marcată este o listă de elemente (cuvinte sau fraze scurte). Elementele din listă sunt marcate printr-un character special (de obicei cerculeţe mici). O listă marcată are tagul de start Atributele se utilizează întotdeauna în perechi: name="value". (nume="valoare".) Atributele se adaugă întotdeauna în tagul de start al elementului HTML. Utilizarea ghilimelelor: "red" sau 'red' ? Valorile atributelor trebuie să fie întotdeauna incluse între ghilimele. În majoritatea cazurilor se utilizează ghilimele duble, dar pot fi utilizate şi ghilimele simple. 9 Rareori, atunci cînd valoarea atributului conţine ghilimele este necesar să se utilizeze ghilimele simple: name='Ion "NumeScurt" Ionescu' 3. Elemente ce definesc titluri, paragrafe 3.1. Paragrafe Cele mai utilizate taguri HTML sunt cele ce definesc titlurile (headings), paragrafele (paragraphs) şi întreruperile de linie (line breaks). Cea mai eficientă cale de a studia HTML este de a scrie şi testa diferite exemple. Testează singur - Exemple Cel mai simplu document HTML Acest exemplu este un document HTML foarte simplu, cu un număr minim de taguri HTML. Exemplul demonstrează cum este afişat textul din interiorul elementului body în fereastra browserului. Cod HTML: Continutul elementului body. Text structurat prin intermediul tagurilor HTML. Rezultatul apare in fereastra browserului. Rezultat: Continutul elementului body. Text structurat prin intermediul tagurilor HTML. Rezultatul apare in fereastra browserului. Paragrafe simple. Acest exemplu demonstrează cum este afişat textul marcat cu elementul paragraph. Cod HTML: 10 Rezultat: Acesta este text din paragraf. Acesta este text din paragraf. Acesta este text din paragraf. Elementul paragraph este definit de tagul

- 4a16k

11 Rezultat. Titlu de nivel 1 Titlu de nivel 2 Titlu de nivel 3 Titlu de nivel 4 Titlu de nivel 5 Titlu de nivel 6 Sfaturi utile Utilizati tagurile heading doar pentru titluri. Nu le utilizati pentru a evidenţia un text. Existã alte taguri pentru evidenţiere. 3.3. Întreruperi de linie Tagul se utilizează cînd doriţi ca rîndul să se termine, dar nu doriţi să începeţi un paragraf nou. Tagul forţează textul să treacă dintr-un rind în altul, indifferent unde este plasat acest tag. Tagul este vid (empty). El nu are tag de final. Rezultat: Acesta este para graf cu întreruperi de linie. 3.4. Comentarii HTML Tagul pentru comentariu este utilizat pentru a insera un comentariu în sursa cod HTML. Comentariul este ignorat de browser. Comentariile se utilizează pentru a explica codul HTML, pentru revizuiri ulterioare. 12 Notă. Semnul exclamării apare după paranteza unghiulară de deschidere, dar nu înainte de paranteza de închidere. Sfaturi utile Atunci cînd scrieţi text HTML, nu puteţi şti cum va apărea acest text în alt browser. Unii utilizatori au calculatoare cu ecrane de dimensiuni mari, alţii – calculatoare cu ecrane de dimensiuni mici. Textul va fi reformatat de fiecare dată cînd utilizatorul va redimensiona fereastra browserului. Nu încercaţi niciodată să formataţi textul din editor prin adăugarea liniilor libere sau a spaţiilor în text. HTML va elimina spaţiile din text. Orice număr de spaţii va fi interpretat ca un singur spaţiu. În HTML un rînd nou din editorul de text se interpretează ca un spaţiu. Nu se recomandă utilizarea paragrafelor vide, adică tagul este opţional. Se recomandă să utilizaţi tagul . Următoarea versiune HTML nu va permite să omiteţi nici un tag de închidere. HTML adaugă în mod automat un rînd liber înainte şi după unele elemente, de exemplu pînă şi după un paragraf, precum şi pînă şi după titluri. În această lucrare se utilizează o linie orizontală (tagul ) pentru a separa diferite teme. Taguri de bază HTML Tag Descriere Defineşte un document HTML Defineşte corpul documentului






Fără cellpadding şi cellspacing: 4k3bc

. Un tabel este compus din rînduri (se utilizează tagul ), iar fiecare rînd este compus din celule (se utilizează tagul , şi sunt rareori utilizate, deoarece nu toate browserele le ă. Browserul Internet Explorer 5.0 sau de o versiune mai nouă acceptă aceste elemente. 28 8.5. Atributele Cellpadding şi Cellspacing Atributul cellpadding se utilizează pentru a adăuga spaţii libere între conţinutul celulei şi graniţele celulei. Atributul cellspacing se utilizează pentru a adăuga spaţii libere între conţinutul celulei şi graniţele celulei.
). Caracterele td provin de la "table data (date din tabel)", adică indică conţinutul din celule. Datele din celule pot conţine text, imagini, liste, paragrafe, formulare, linii orizontale, tabele, etc.

rîndul 1, celula 1 rîndul 1, celula 2
rîndul 2, celula 1 rîndul 2, celula 2
Rezultatul acestui cod în browser: rîndul 1, celula 1 rîndul 1, celula 2 rîndul 2, celula 1 rîndul 2, celula 2

8.2. Tabele şi Atributul Border Dacă nu este specificat atributul border, tabelul va apărea fără chenar. Uneori este util ca tabelul să apară fără chenare, dar de cele mai dese ori este necesar ca tabelul să fie cu chenar. Pentru a afişa un tabel cu chenar trebuie să fie utilizat atributul border:





26
Rîndul 1, celula 1 rîndul 1, celula 2
8.3. Titluri în Tabel Titlurile de coloană dintr-un tabel sunt definite prin tagul		 .

Titlu de coloană Alt titlu
rîndul 1, celula 1 rîndul 1, celula 2
rîndul 2, celula 1 rîndul 2, celula 2
În browser rezultatul va apărea astfel: Titlu de coloană

Alt titlu

rîndul 1, celula 1 rîndul 1, celula 2 rîndul 2, celula 1 rîndul 2, celula 2

8.4. Celule libere (vide) în tabel Celulele fără conţinut din tabel nu sunt afişate bine în majoritatea browserelor.





27
rîndul 1, celula 1 rîndul 1, celula 2
rîndul 2, celula 1
În browser va apărea: rîndul 1, celula 1 rîndul 1, celula 2 rîndul 2, celula 1 Notaţi că chenarul lipseşte pentru celulele fără conţinut (NB! Browserul Mozilla Firefox afişează chenarul). Pentru a soluţiona această problemă, adăugaţi un spaţiu liber (non-breaking space -  ) pentru celulele fără conţinut, pentru a face chenarul visibil:

rîndul 1, celula 1 rîndul 1, celula 2
rîndul 2, celula 1  
Rezultatul în browser: rîndul 1, celula 1 rîndul 1, celula 2 rîndul 2, celula 1

Sfaturi utile Elementele
Celula 1 Celula 2
Celula 3 Celula 4

Cu cellpadding: 1j132e

Celula 1 Celula 2
Celula 3 Celula 4


29

8.6. Alinierea conţinutului în tabel Alinierea conţinutului celulelor se efectuează prin intermediul atributului align, care poate avea 3 valori posibile: left; center; right.

Cheltuieli Ianuarie Februarie
Haine $241.10 $50.20
Cadouri $30.00 $44.45
Alimente $730.40 $650.00
Suma $1001.50 $744.65


30

 Rezultatul în browser:

Taguri Tabele Tag

Descriere



































































Exemplu de Formular 1w5g3m

Un formular cu un cîmp de editare şi un buton de expediere 7524v









































Formular 2 383o3u

Un formular cu un buton reset 252w1p









Formular 3 6hl2t

Un formular cu cîmp parolă 3z641f














Formular 4 m68

Un formular cu butoane radio 57632b













Formular 5 1qxj

Un formular cu casete checkbox 76v45





















Formular 6 w3v61

Un formular cu caseta de fisiere 1p283u

























Formular 10 5dg6z

Un formular complex 166r4r

Defineşte un tabel Defineşte un rînd din tabel Defineşte grupuri de coloane în tabel Defineşte valori ale atributelor pentru una sau mai multe coloane în tabel Defineşte antetul unui tabel Defineşte corpuul unui tabel Defineşte subsolul unui tabel 9. Formulare Un formular este un set de zone active alcătuit din cîmpuri de completare text, casete de selectare, butoane, etc. Formularele asigură construirea unor pagini Web care permit utilizatorilor să introducă informaţii şi sa le transmită serverului. Formularele pot varia de la un simplu cîmp de text, pentru introducerea unui şir de caractere cu sensul de cuvinte cheie de căutare – element caracteristic tuturor motoarelor de căutare din Web – pînă la o structură complexă, cu multiple secţiuni, care oferă posibilităţi de transmitere a datelor. O sesiune cu o pagină web ce conţine un formular cuprinde următoarele etape: • Utilizatorul completează formularul şi îl expediază unui server. 31 • aplicaţie (cod scris într-un limbaj de programare) de pe server analizează datele din formularul completat şi le prelucrează. De cele mai dese ori stochează datele într-o baza de date. • Daca este necesar serverul expediază un răspuns utilizatorului. Un formular este definit într-un bloc delimitat de tagurile respective şi . 9.1. Atribute esenţiale ale elementului Există doua atribute esenţiale ale elementului . 1. Atributul action precizează unde vor fi expediate datele formularului odată ce acesta este completat. De regulă, valoarea atributului action este adresa URL a unui script aflat pe un server WWW care primeşte datele formularului, efectuează o prelucrare a lor şi expediază către utilizator un răspuns. . Script-urile pot fi scrise în limbajele Perl, C, PHP, Unix shell. 2. Atributul method precizează metodă utilizată de browser pentru expedierea datelor din formular. Sunt posibile următoarele valori: • get (valoarea implicită). În acest caz, datele din formular sunt adăugate la adresa URL precizată de atributul action; Nu sunt permise cantităţi mari de date (maxim 1 Kb); între adresa URL şi date este inserat un caracter”?”. Datele sunt adăugate conform sintaxei: nume_cîmp = valoare_cîmp. Între diferite seturi de date la expediere este introdus un caracter”&”. Exemplu: ”http://www.server.md/cgi-bin/nume_fis.cgi?nume1 = val_1&nume2 = val_2”; post. În acest caz datele sunt expediate separat. Sunt permise cantităţi mari de date (ordinul MB) Pentru ca un formular sa fie funcţional, trebuie precizat ce se va întîmpla cu el după completare şi expediere. • Cel mai simplu mod de utilizare a unui formular este expedierea acestuia prin posta electronica (este-mail). Pentru aceasta se foloseşte atributul action al elementului 32 , care primeşte ca valoare ”mailto:” concatenat cu o adresă validă de e-mail către care se va expedia formularul completat. 9.2. Cîmp de tip text Majoritatea elementelor unui formular sunt definite cu ajutorul elementului . Pentru a preciza tipul elementului se foloseşte atributul type al elementului . Pentru un cîmp de editare, acest atribut primeşte valoarea ”text”. Alte atribute pentru un element sunt: • atributul name, permite ataşarea unui nume fiecărui element al formularului. • atributul value, care permite atribuirea unei valori iniţiale unui element al formularului. Numele: Pentru elementul de tipul cîmp text – cîmp de completare – (type = ”text”), alte două atribute pot fi utile: • atributul size specifică lăţimea cîmpului de editare; dacă el depăşeşte aceasta • lăţime, atunci se execută automat o derulare a acestui cîmp; atributul maxlength specifică numărul maxim de caractere pe care le poate primi un cîmp de editare; caracterele tastate peste numărul maxim sunt ignorate. Sfaturi utile: Dacă atributul type lipseşte într-un element , atunci cîmpul respectiv este considerat în mod prestabilit ca fiind de tip ”text”. Formularele cu un singur cîmp (de tip text) nu au nevoie de un buton de expediere, datele sunt expediate automat după completarea şi apăsarea tastei ENTER. 33 9.3. Butoane Într-un formular pot fi afişate butoane. Cînd utilizatorul apasă un buton, se lansează în execuţie o funcţie de tratare a acestui eveniment. Limbajul HTML nu permite scrierea unor astfel de funcţii (acest lucru este posibil daca se utilizează limbajele Javascript sau Java). Pentru a insera un buton într-un formular, se utilizează tagul avînd atributul type cu valoarea ”button”. Alte doua atribute ale elementului ”button” sunt: • atributul name, care permite atribuirea unui nume butonului; • atributul value, care primeşte ca valoare textul ce va fi afişat pe buton. Există o a doua modalitate de a introduce într-o pagină Web un buton de apăsat, şi anume prin intermediul elementului . Un astfel de buton poate fi inserat într-un formular, în acest caz efectuînd acţiuni legate de acel formular, sau poate fi introdus oriunde în pagina pentru iniţierea unor acţiuni independente de formulare. Atributele posibile ale elementului ”button” sunt: • name acorda elementului un nume; • value precizează textul care va fi afişat pe buton; • type precizează acţiunea ce se va execută la apăsarea butonului, dacă acesta este inclus într-un formular. Valorile posibile pentru acest atribut sunt: ”button”, ”submit”, ”reset”. În corpul blocului se poate afla un text sau un tag de inserare a unei imagini. 9.4. Butonul Send Un buton de expediere al unui formular se adaugă cu ajutorul elementului , în care atributul type are valoarea ”submit”. Acest element poate primi un nume prin atributul name. Pe buton apare scris ”Submit Query” sau valoarea atributului value, daca această valoare a fost stabilită. 9.5. Butonul Reset Dacă un element de tip are atributul type cu valoarea ”reset”, atunci în formular apare un buton de resetare. La apăsarea acestui buton, toate elementele din 34 formular primesc valorile prestabilite (definita odată cu formularul), chiar dacă aceste valori au fost modificate de utilizator. Un buton de tip Reset poate primi un nume cu ajutorul atributului name şi o valoare printr-un atribut value. Un asemenea buton afişează textul ”Reset” daca atributul value lipseşte, respectiv valoarea acestui atribut în caz contrar. Nume: Prenume: 9.6. Cîmp de tip ”” Dacă se utilizează tagul avînd atributul type cu valoarea ””, atunci în formular apare un element asemănător cu un cîmp de editare obişnuit (introdus prin type = ”text”). Toate atributele unui cîmp de editare rămîn valabile. Singura deosebire constă în faptul ca acest cîmp de editare nu afişează caracterele culese, ci numai caractere *, care ascund de privirile altui utilizator aflat în apropiere valoarea introdusă într-un asemenea cîmp. La expedierea formularului însă, valoarea tastată într-un cîmp de tip ”” se transmite în mod obişnuit, fără criptare. Nume: Prenume: 35 : 9.7. Butoane radio Butoanele radio permit alegerea, la un moment dat, a unei singure variante din mai multe posibile. Butoanele radio se adaugă prin tagul cu atributul type avînd valoarea ”radio”. Alegeti culoarea preferată: alb roz La expedierea formularului se va transmite una dintre perechile ”color=b” sau ”color=f”, în funcţie de alegerea făcută de utilizator. 9.8. Casete de validare O casetă de validare (checkbox) permite selectarea sau deselctarea unei opţiuni. Pentru inserarea unei casete de validare se utilizează eticheta cu atributul type configurat la valoarea ”checkbox”. 36 Sfaturi utile: Fiecare casetă poate avea un nume definit prin atributul name. Fiecare casetă poate avea valoarea prestabilită ”selectat” definită prin atributul checked. Alegeti meniul : Nectar Bere Cafea 9.9. Casete de fişiere Într-o pereche ”name = value” a unui formular se poate folosi întregul conţinut al unui fişier pe post de valoare. Pentru aceasta se inserează un element într-un formular, cu atributul type avînd valoarea ”file” (fişier). Atributele pentru un element de tip caseta de fişiere: • atributul name permite ataşarea unui nume; • atributul value primeşte ca valoare adresa URL a fişierului care va fi expediat o dată cu formularul. Această valoare poate fi atribuită direct atributului value, poate fi tastată într-un cîmp de editare ce apare o dată cu formularul sau poate fi selectată prin intermediul unei casete de tip File sau Choose File care apare la apăsarea butonului Browse... din formular; 37 • atributul enctype precizează metoda utilizata la criptarea fişierului de expediat. Valoarea acestui atribut este ”multipart/form-data”. Alegeti fisierul: 9.10. Liste de selecţie O listă de selecţie permite utilizatorului să aleagă unul sau mai multe elemente dintr-o listă finită. Lista de selecţie este inclusă în formular cu ajutorul tagurilor <select> şi . O lista de selecţie poate avea următoarele atribute: • atributul name, care atribuie listei un nume (utilizat în perechile ”name=value” • expediat serverului); atributul size, care precizează (printr-un număr întreg pozitiv, valoarea prestabilita fiind 1) cîte elemente din listă sunt vizibile la un moment dat pe ecran (celelalte devenind vizibile prin acţionarea barei de derulare ataşate automat listei). Elementele unei liste de selecţie sunt incluse în listă cu ajutorul elementului 9.12. Cîmpuri text comentariu Într-un formular cîmpurile de editare de mai multe rînduri (comentariu) se adaugă cu ajutorul elementului 9.13. Un formular complex În exemplul următor este prezentat un formular conţinînd elemente prezentate anterior. Cîmpurile formularului sunt incluse în celulele unui tabel pentru a obţine o aliniere dorită.


Defineşte un titlu de coloană în tabel


Defineşte o celulă din tabel


Defineşte denumirea unui tabel




Nume:
Prenu:

41
Telefon:
Alegeti tipul de transport: autobus tren

avion
Alegeti tipul de plata:
  • cash


  • card
Comentarii:

Rezultatul în browser:

42

Sfaturi utile: Elementul
poate avea un atribut target, care primeşte ca valoare numele unei ferestre a browserului în care va fi încărcat răspunsul trimis serverului WWW la expedierea unui formular. Toate elementele cuprinse într-un formular pot avea un atribut disabled, care permite dezactivarea respectivului element. Toate elementele de tip text cuprinse într-un formular pot avea un atribut readonly, care interzice modificarea conţinutului acestor elemente.

10. Cadre (frames) în HTML 10.1. Crearea cadrelor Ferestrele sau (cadrele) permit să definim în fereastra browserului subferestre în care să fie încărcate documente HTML diferite. Ferestrele sunt definite într-un fişier HTML special, în care blocul ... este înlocuit de blocul ... . În interiorul acestui bloc, fiecare cadru este introdus prin tagul . 43

Un atribut obligatoriu al elementului este src, care primeşte ca valoare adresa URL a documentului HTML, care va fi încărcat în acel frame. Definirea cadrelor se face prin împărţirea ferestrelor (şi a subferestrelor) în linii şi coloane: •

împărţirea unei ferestre într-un număr de subferestre de tip coloana se face cu ajutorul atributului cols al elementului ce descrie acea fereastră;

•

împărţirea unei ferestre într-un număr de subferestre de tip linie se face cu ajutorul atributului rows al elementului ce descrie acea fereastră;

•

valoarea atributelor cols şi rows este o listă de valori separate prin virgulă, care descriu modul în care se face împărţirea.

Valorile listei pot fi: 1. un număr întreg de pixeli; 2. procente din dimensiunea ferestrei (număr între 1 şi 99 urmat de %); 3. n* care înseamnă n părţi din spaţiul rămas; Exemplul 1: cols = ”100, *, 70%” înseamnă o împărţire în 4 subferestre, dintre care prima are 100 pixeli, a treia ocupă 70% din spaţiul total disponibil, iar a doua ocupa în mod egal restul de spaţiu rămas disponibil. Exemplul 2: rows = ”200, 1*, 50%, 2* ” înseamnă o împărţire în 4 subferestre, dintre care prima are 200 pixeli, a treia ocupă jumătate din spaţiul total disponibil, iar a doua şi a patra ocupă de spaţiu rămas disponibil, care se împarte în trei parţi egale, a doua fereastră ocupînd o parte, iar a patra ocupînd 2 părţi. Sfaturi utile: Dacă mai multe elemente din listă au valori *, atunci spaţiul disponibil rămas pentru ele se va împărţi în mod egal. O subfereastra poate fi un cadru (folosind ) în care se va încărca un document HTML sau poate fi împărţită la rîndul ei în alte cadre (folosind ).

Cadre_1 216q4z

44

În exemplul următor este creată o pagină Web cu trei cadre orizontale. Pentru al doilea cadru valoarea atributului src este adresa URL a unei imagini.

Cadre_2 3b2z3i În exemplul următor este creată o matrice de 4 cadre (2 x 2). Pentru a realiza acest lucru, se folosesc simultan cele două atribute cols şi rows.

Cadre_3 4h2i63

În exemplul următor este creată o pagină Web cu trei cadre mixte. Pentru a o crea se procedează astfel. Mai întîi, pagina este împărţită în două subferestre de tip coloana, după care a doua subfereastra este împărţită în două subferestre de tip linie.

Cadre_4 3o3d4t

45





10.2. Dimensionarea chenarului unui cadru Atributul border al elementului permite configurarea lăţimii chenarelor tuturor cadrelor la un număr dorit de pixeli. Valoarea prestabilită a atributului border este de 5 pixeli. O valoare de 0 pixeli va defini un cadru fără chenar.

Cadre_5 33432p



Pentru a obţine cadre fără chenar se utilizează border = ”0”. În mod prestabilit, chenarul unui cadru este afişat şi are aspect tridimensional. Afişarea chenarului unui cadru se poate dezactiva dacă se utilizează atributul frameborder cu valoare ”no”. Acest atribut poate fi utilizat atît cu elementul (dezactivarea fiind valabilă pentru toate cadrele incluse) cat şi cu elementul (dezactivarea fiind valabilă numai pentru un singur cadru). Valorile posibile ale atributului frameborder sunt: ”yes” - echivalent cu 1; ”no” - echivalent cu 0;

Cadre_6 a5f6z

46





Cadre_7 3g726h 10.3. Bare de derulare Atributul scrolling al elementului este utilizat pentru a adăuga unui cadru o bară de derulare care permite navigarea în interiorul documentului afişat în interiorul cadrului. Valorile posibile sunt: •

”yes” - barele de derulare sunt adăugate întotdeauna;

•

”no” - barele de derulare nu sunt utilizabile;

•

”auto” - barele de derulare sunt vizibile atunci cînd este necesar

Cadre_8 5b6f3r

47

Atributul noresize al elementului (fără nici o valoare suplimentară) dacă este prezent, inhibă posibilitatea prestabilită a utilizatorului de a redimensiona cadrul cu ajutorul mouse-ului.

10.4. Poziţionarea documentului într-un cadru Atributele marginheight şi marginwidth ale elementului permit stabilirea distanţei în pixeli dintre conţinutul unui cadru şi marginile verticale, respectiv orizontale ale cadrului. Valori posibile:

- număr de pixeli; - procent din lăţimea, respectiv din înălţimea cadrului;

Cadre_9 2k696j Exisă browsere care nu ă cadre. În acest caz se utilizează în interiorul blocului elementul <noframes>. Dacă browserul ştie să interpreteze cadre, va ignora ce se găseşte în aceasta porţiune, iar daca nu, materialul cuprins în zona <noframes> ... va fi singurul care va fi înţeles şi afişat. Între tagurile <noframes> ... se pot introduce orice alte tag-uri HTML (inclusiv imagini, hiperlink-uri, tabele).

10.5. Cadre interne Un cadru intern este specificat prin intermediul blocului <iframe> ... . Un cadru intern se inserează într-o pagină Web în mod asemănător cu o imagine sau în modul în care se specifică elementul <iframe>, aşa cum rezultă din următorul exemplu:

<iframe src = "insert.html" height =40% width =50%>

48

În acest caz, am specificat că dorim o fereastră de cadru intern care are 40% din înălţimea şi 50% din lăţimea paginii curente. Atributele acceptate de elementul <iframe> sunt în parte preluate de la etichetele şi , cum ar fi: src, border, frameborder, bordercolor, marginheight, marginwidth, scrolling, name, noresize; sau de la elementul vspace, hspace, align, width, height;

Cadre_10 1t226q Home
<iframe width = "60%" height = "50%" border = 2 bordercolor = "red" name = "icadru" src = "fr.html"> Daca vedeti acest text în browser, înseamnă că browserul Dvs. nu a cadre interne. Ar fi preferabil sa reveniti, folosind Netscape Navigator versiune 4.0 (/ulterioara) sau Internet Explorer 4.0. (/ulterioara) Pagina fara cadre interne Rezultatul acestui cod în browserul Internet Explorer v 6.0

49

În cadrul intern din acest exemplu a fost încărcat fişierul ce reprezintă formularul complex. Activarea hiperlegăturilor va avea ca efect încărcarea documentelor respective în cadrul intern.

10.6. Ţinte pentru legături În mod prestabilit, la efectuarea unui clic pe o legătura nouă pagina (către care indică legătura) o înlocuieşte pe cea curenta în aceeaşi fereastra (acelaşi cadru). Acest comportament se poate schimba in doua moduri: •

prin plasarea în blocul ... a unui element prin plasarea în elementul a atributului target, care precizează numele ferestrei (cadrului) în care se va încărca pagina nou referită de legătura, conform sintaxei:

... Sfaturi utile:

50

Dacă este prezent atît un atribut target în Valori pentru atributul target Atributul target al elementului acceptă anumite valori predefinite de o valoare deosebită pentru creatorii de pagini Web. Aceste valori sunt: •

”_self” (încărcarea noii pagini are loc în cadrul curent);

51

•

”_blank” (încărcarea noii pagini are loc într-o fereastră nouă anonimă);

•

”_parent” (încărcarea noii pagini are loc în cadrul părinte al cadrului curent dacă acesta exista, altfel are loc în fereastra browserului curent);

•

”_top” (încărcarea noii pagini are loc în fereastra browserului ce conţine cadrul curent);

11. Fonturi HTML Tagul în HTML este învechit. Se presupune că în versiunile ulterioare HTML nu va mai fi folosit. Chiar dacă mulţi autori de pagini Web utilizează acest element, încercaţi să utilizaţi foile de stil în cascadă pentru a indica fonturile utilizate în formatarea textului.

11.1. Elementul HTML Prin codul HTML ce urmează puteţi specifica tipul şi dimensiunea fontului afişat de browser:

Acesta este un

paragraf.

Acesta este alt paragraf.

11.2. Atributele elementului Font Atribut

Exemple

Descriere

size="number"

size="2"

Defineşte dimensiunea fontului

size="+number"

size="+1"

Măreşte dimensiunea fontului

size="-number"

size="-1"

Micşorează dimensiunea fontului

face="face-name"

face="Times"

Defineşte tipul fontului

color="color-value"

color="#eeff00"

Defineşte culoarea fontului

color="color-name"

color="red"

Defineşte culoarea fontului

Tagul NU ar trebui sa fie utilizat

52

Tagul este învechit (deprecated) şi nu va fi utilizat în versiunile în versiunile noi (HTML 4 şi XHTML). Consortiumul World Wide Web (W3C) a înlăturat tagul din recomandările sale. În versiunile ulterioare HTML vor fi utilizate foile de stil în cascadă (Cascading Style Sheets CSS) pentru a defini aspectul şi caracteristicile elementelor HTML.

11. Culori HTML Culorile sunt afişate prin combinarea a trei componente Red (roşu), Green (verde) şi Blue (albastru).

12.1.Valori pentru culori Culorile sunt definite în notarea hexazecimală prin combinarea valorilor pentru Red(roşu), Green(verde), şi Blue (albastru) (RGB). Valoarea minimă care poate fi atribuită unei componente a culorii este 0 (hex #00). Valoarea maximă este 255 (hex #FF). În tabelul

ce urmează este indicat rezultatul dintre diferite combinaţii de Red, Green, Blue. Culoare

Valoare Culoare HEX

Valoare Culoare RGB

#000000

rgb(0,0,0)

#FF0000

rgb(255,0,0)

#00FF00

rgb(0,255,0)

#0000FF

rgb(0,0,255)

#FFFF00

rgb(255,255,0)

#00FFFF

rgb(0,255,255)

#FF00FF

rgb(255,0,255)

#C0C0C0

rgb(192,192,192)

#FFFFFF

rgb(255,255,255)

12.2. Nume de culori Majoritatea browserelor ă un set de nume de culori. Notă: Doar 16 nume de culori sunt ate de W3C HTML 4.0 standard (aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow). Pentru alte culori se recomandă să utilizaţi valorile de culori HEX. Culoare

Culoare HEX

Nume Culoare

#F0F8FF

AliceBlue

#FAEBD7

AntiqueWhite

53

#7FFFD4

Aquamarine

#000000

Black

#0000FF

Blue

#8A2BE2

BlueViolet

#A52A2A

Brown

12.3. Culori Web Safe (sigure) Cu cîţiva ani în urmă, cînd majoritatea calculatoarelor au doar 256 de culori diferite, a fost sugerată o listă de 216 culori sigure Web ca standard Web. Alte 40 de culori diferite sunt reservate de sistemele de operare Microsoft şi Mac (fiecare cîte 20 culori). Nu ştim cît de important este acest lucru acum, doarece tot mai multe calculatoare în prezent pot afişa milioane de culori diferite, dar alegerea vă aparţine.

12.4. Paleta de 216 de Culori independente de platformă Această paletă de 216 de culori independente de platformă a fost creată iniţial pentru a avea siguranţa că toate calculatoarele vor afişa corect această paletă. Fişierul culori.html din directoriul HTML de pe CD include informaţii despre componentele paletei de 216 culori şi afişează culorile respective. 000000

000033

000066

000099

0000CC

0000FF

003300

003333

003366

003399

0033CC

0033FF

006600

006633

006666

006699

0066CC

0066FF

009900

009933

009966

009999

0099CC

0099FF

00CC00

00CC33

00CC66

00CC99

00CCCC

00CCFF

00FF00

00FF33

00FF66

00FF99

00FFCC

00FFFF

330000

330033

330066

330099

3300CC

3300FF

333300

333333

333366

333399

3333CC

3333FF

336600

336633

336666

336699

3366CC

3366FF

339900

339933

339966

339999

3399CC

3399FF

33CC00

33CC33

33CC66

33CC99

33CCCC

33CCFF

33FF00

33FF33

33FF66

33FF99

33FFCC

33FFFF

660000

660033

660066

660099

6600CC

6600FF

663300

663333

663366

663399

6633CC

6633FF

666600

666633

666666

666699

6666CC

6666FF

669900

669933

669966

669999

6699CC

6699FF

66CC00

66CC33

66CC66

66CC99

66CCCC

66CCFF

66FF00

66FF33

66FF66

66FF99

66FFCC

66FFFF

990000

990033

990066

990099

9900CC

9900FF

993300

993333

993366

993399

9933CC

9933FF

996600

996633

996666

996699

9966CC

9966FF

999900

999933

999966

999999

9999CC

9999FF

99CC00

99CC33

99CC66

99CC99

99CCCC

99CCFF

99FF00

99FF33

99FF66

99FF99

99FFCC

99FFFF

54

CC0000

CC0033

CC0066

CC0099

CC00CC

CC00FF

CC3300

CC3333

CC3366

CC3399

CC33CC

CC33FF

CC6600

CC6633

CC6666

CC6699

CC66CC

CC66FF

CC9900

CC9933

CC9966

CC9999

CC99CC

CC99FF

CCCC00

CCCC33

CCCC66

CCCC99

CCCCCC

CCCCFF

CCFF00

CCFF33

CCFF66

CCFF99

CCFFCC

CCFFFF

FF0000

FF0033

FF0066

FF0099

FF00CC

FF00FF

FF3300

FF3333

FF3366

FF3399

FF33CC

FF33FF

FF6600

FF6633

FF6666

FF6699

FF66CC

FF66FF

FF9900

FF9933

FF9966

FF9999

FF99CC

FF99FF

FFCC00

FFCC33

FFCC66

FFCC99

FFCCCC

FFCCFF

FFFF00

FFFF33

FFFF66

FFFF99

FFFFCC

FFFFFF

Anexa 1 Entităţi HTML HTML 4.01 ă setul de caractere ISO 8859-1 (Latin-1). Caracterele ISO-8859-1, coduri din diapazonul 0-127 reprezintă standardul original 7-BIT

ASCII. Majoritatea acestor caractere pot fi utilizate direct fără a fi nevoie de referinţe de caractere (entităţi). Caracterele ISO-8859-1, coduri din diapazonul 160-255 pot fi utilizate prin intermediul referinţelor de caractere (entităţi).

Notă. Numele entităţilor sunt sensitive la registru. Entităţi ASCII Resultat Descriere

Nume Entitate

Reprezentare hexazecimală

"

ghilimele " (quotation mark)

"

'

apostrof (apostrophe)

' (does not work in IE)

'

&

ampersand

&

&

<

mai mic (less-than)

<

<

>

mai mare (greater-than)

>

>

Lista altor seturi de entităţi este prezentată în Anexa 2.

55

Anexa 2 Lista tagurilor HTML ordonată alfabetic • •

NN: indică versiunea Netscape începînd cu care este at tagul respectiv IE: indică versiunea Internet Explorer care ă tagul respectiv

Tag

Descriere

NN IE



Defineşte un comentariu

3.0 3.0

Defineşte tipul documentului

Defineşte o ancoră

3.0 3.0



Defineşte o abreviere

6.2



Defineşte un acronim

6.2 4.0



Defineşte o adresă

4.0 4.0



Învechit. Defineşte un aplet

2.0 3.0

<area>

Defineşte o zonă într-o imagine hartă

3.0 3.0



Defineşte un text cu aldine

3.0 3.0

Defineşte URL de bază pentru toate referinţele din pagină

3.0 3.0

Învechit. Defineşte fontul de bază

3.0 3.0



Defineşte direcţia de afişare a textului

6.2 5.0



Defineşte un text mai mare

3.0 3.0



3.0 3.0



Defineşte elementul body

3.0 3.0




Inserează o întrerupere de linie

3.0 3.0