inițiere în programare web · 2016-10-18 · bordercolor –permite setarea culorii chenarelor...
Post on 22-Feb-2020
4 Views
Preview:
TRANSCRIPT
Inițiere în programareweb
Colegiul National Ecaterina Teodoroiu din Targu Jiu
Adrian Runceanu2016
copyright@www.adrian.runceanu.ro
Lectia 4
Limbajul HTML(partea IV)
18.10.2016 Tehnologii Web 2
copyright@www.adrian.runceanu.ro
Limbajul HTML (partea III)
7. Ferestre în HTML7.1. Organizarea documentului în cadre - Tagul <frameset>7.2. Definirea cadrelor - Tagul <frame>7.3. Browserele vechi - Tagul <noframe>7.4. Cadre in-line - Tagul <iframe> (in-line frame)7.5. Exemple
Tehnologii Web18.10.2016 3
copyright@www.adrian.runceanu.ro
Cadrele permit împărţirea unei ferestre însecţiuni independente între ele, în fiecare dintreacestea fiind posibilă încărcarea unui documentHTML.
Astfel, utilizatorul poate vizualiza simultan maimulte documente.
Tehnologii Web18.10.2016 4
copyright@www.adrian.runceanu.ro
• De exemplu, putem împărţi documentul în două cadre.
• În primul cadru va fi afişată o bara de navigaţie.
• Selectarea unui meniu al barei de navigaţie va determina încărcarea paginii corespunzătoare în cel de-al doilea cadru.
• Astfel, bara de meniuri va fi vizibilă în orice moment al navigării site-ului.
Tehnologii Web18.10.2016 5
copyright@www.adrian.runceanu.ro
Pentru structurarea unui document HTML în cadre sunt utilizate tag-urile:
1. <frameset>2. <frame>3. <noframe>4. <iframe>
Tehnologii Web18.10.2016 6
copyright@www.adrian.runceanu.ro
Limbajul HTML (partea III)
7. Ferestre în HTML7.1. Organizarea documentului în cadre - Tagul <frameset>7.2. Definirea cadrelor - Tagul <frame>7.3. Browserele vechi - Tagul <noframe>7.4. Cadre in-line - Tagul <iframe> (in-line frame)7.5. Exemple
Tehnologii Web18.10.2016 7
copyright@www.adrian.runceanu.ro
7.1. Organizarea documentului în cadre - Tagul <frameset>
Un document cu cadre se realizează similar unui document HTML oarecare, în care tagurile <body>, respectiv </body> sunt înlocuite cu tagurile <frameset>, respectiv </frameset>:
<html><head>
...</head><frameset>…</frameset>
</html>
Tehnologii Web18.10.2016 8
copyright@www.adrian.runceanu.ro
• Aşadar, tagul <frameset> permitestructurarea documentului principal în cadre.
• În interiorul perechii <frameset> </frameset> nu pot exista decât elemente:
1. <frameset>2. <frame>3. <noframe>
Tehnologii Web18.10.2016 9
copyright@www.adrian.runceanu.ro
Tagul <frameset> acceptă următoareleatribute:
• rows – primeşte ca parametru o listă de valori, separate prin virgulă, ce reprezintă înălţimea cadrelor orizontale ale documentului principal.
• Numărul de cadre orizontale este dat de numărul de valori din listă.
Tehnologii Web18.10.2016 10
copyright@www.adrian.runceanu.ro
Valorile sunt exprimate:
1. fie prin numere întregi pozitive (înălţime absolută exprimată în pixeli)
2. fie prin procente din înălţimea cadrului părinte (înălţime relativă)
3. fie prin caracterul de punctuaţie ‘*’, care semnifică o înălţime relativă
Tehnologii Web18.10.2016 11
copyright@www.adrian.runceanu.ro
Observaţii:
– Nu se recomandă ca toate valorile să fieabsolute, deoarece browserele pot utilizarezoluţii diferite, ceea ce poate duce ladistorsiuni ale afişării;
– În cazul utilizării procentelor, suma acestoranu poate să depăşească 100%, în cazcontrar, browserul va trunchia toate valorilepână ce suma va fi 100.
Tehnologii Web18.10.2016 12
copyright@www.adrian.runceanu.ro
Tagul <frameset> - alte atribute:
cols – permite împărţirea cadrului curent în sectoare verticale.
Parametrii acceptaţi respectă aceleaşi reguli ca şi în cazul atributului rows, numai că se referă la lungimea cadrului.
Tehnologii Web18.10.2016 13
copyright@www.adrian.runceanu.ro
border – primeşte o valoare întreagă nenegativă, reprezentând grosimea, exprimată în pixeli, a chenarului cadrelor.
Implicit, grosimea chenarului este de 5 pixeli. Valoarea 0 a atributului border inhibă afişarea
chenarelor tuturor cadrelor.
bordercolor – permite setarea culorii chenarelor cadrelor.
Culoarea poate fi specificată fie printr-un triplet hexa de forma #rrggbb, fie printr-un nume predefinit de culoare.
Tehnologii Web18.10.2016 14
copyright@www.adrian.runceanu.ro
• frameborder – controleaza afişarea/ascunderea chenarelor tuturor cadrelor. – Atributul poate primi valorile:
• yes sau 1 (se forţează afişarea chenarelor)• no sau 0 (se forţează ascunderea chenarelor)
• framespacing – permite specificarea distanţei, în pixeli, de spaţiu liber în jurul tuturor cadrelor.
Tehnologii Web18.10.2016 15
copyright@www.adrian.runceanu.ro
Observaţie:
• Ascunderea unui chenar, prin utilizarea perechii frameborder=”no” sau border=”0”, face ca acesta să nu mai fie vizibil pentru utilizator.
• Totuşi, în Internet Explorer, utilizatorul poate opta pentru redimensionarea cadrului, prin operaţia Drag and Drop asupra marginii invizibile.
• Pentru a inhiba această posibilitate, ascunderea chenarului trebuie însoţită de secvenţa: framespacing=”0”.
Tehnologii Web18.10.2016 16
copyright@www.adrian.runceanu.ro
Limbajul HTML (partea III)
7. Ferestre în HTML7.1. Organizarea documentului în cadre - Tagul <frameset>7.2. Definirea cadrelor - Tagul <frame>7.3. Browserele vechi - Tagul <noframe>7.4. Cadre in-line - Tagul <iframe> (in-line frame)7.5. Exemple
Tehnologii Web18.10.2016 17
copyright@www.adrian.runceanu.ro
7.2.Definirea cadrelor - Tagul <frame>
• Tagul <frame> permite definirea unui cadru în interiorul unui set de cadre.
• El are sens numai atunci când apare în interiorul perechii <frameset> </frameset>.
Atribute acceptate:• src – specifică adresa URL a documentului ce va fi
încărcat în cadrul respectiv;• name – specifică numele cadrului, nume ce va fi utilizat
pentru referirea cadrului respectiv atunci când se va încărca în el un alt document HTML, prin intermediul unei hiperlegături aflate în alt cadru. – Numele este o combinaţie de caractere
alfanumerice;Tehnologii Web18.10.2016 18
copyright@www.adrian.runceanu.ro
• marginwidth, marginheight – controleaza distanţa, exprimată în pixeli, între conţinutul cadrului şi chenarul său;
• scrolling – atributul controlează afişarea/ascunderea barelor de defilare (orizontală sau verticală). Poate primi valorile:– yes – se forţează afişarea barelor de defilare;– no - se forţează ascunderea barelor de defilare;– auto - barele de defilare vor fi afişate numai
atunci când este necesar (când conţinutul cadrului depăşeşte lungimea şi/sau înălţimea cadrului va fi afişată bara de defilare orizontală şi/sau cea verticală);
Tehnologii Web18.10.2016 19
copyright@www.adrian.runceanu.ro
• border – permite setarea grosimii chenarului cadrului curent. – Valoarea atributului border aflat în interiorul tagului frame
este prioritară faţă de valoarea aceluiaşi atribut aflat în tagul frameset.
• noresize – se inhibă utilizatorului posibilitatea de a redimensiona cadrele. – Altfel, el are această posibilitate, prin operaţia Drag and
Drop asupra marginilor cadrelor. • frameborder – controleaza afişarea/ascunderea chenarului
cadrului curent. – Atributul poate primi valorile: yes sau 1(se afişează
chenarul), no sau 0 (se ascunde chenarul);• framespacing – permite specificarea distanţei, în pixeli, de
spaţiu liber în jurul cadrului.• bordercolor – permite specificarea culorii chenarului cadrului
respectiv.
Tehnologii Web18.10.2016 20
copyright@www.adrian.runceanu.ro
Limbajul HTML (partea III)
7. Ferestre în HTML7.1. Organizarea documentului în cadre - Tagul <frameset>7.2. Definirea cadrelor - Tagul <frame>7.3. Browserele vechi - Tagul <noframe>7.4. Cadre in-line - Tagul <iframe> (in-line frame)7.5. Exemple
Tehnologii Web18.10.2016 21
copyright@www.adrian.runceanu.ro
7.3.Browserele vechi - Tagul <noframe>
• Tagul <noframe> este utilizat în cazul în care se navighează cu un browser mai vechi, care nu suportă cadrele.
• În această situaţie, browserul va afişa conţinutul inclus în interiorul perechii <noframe> </noframe>.
• Dacă însă, browserul recunoaşte cadrele, el va ignora conţinutul perechii <noframe> </noframe>.
Tehnologii Web18.10.2016 22
copyright@www.adrian.runceanu.ro
• De regulă, atunci când un browser nu recunoaşte un tag, nu îl interpretează.
• Acest lucru se poate întâmpla şi în cazul tagurilor <frameset>, <frame>.
• Este evident că dacă un browser nu recunoaşte tagurile <frameset> şi <frame> el nu va recunoaşte nici <noframe>.
• Însă, va interpreta tagurile pe care le recunoaşte, adică, în acest caz, cele cuprinse între <noframe> şi </noframe>.
• De fapt, efectul tagului <noframe> este, în cazul browserelor care recunosc cadre, acela de a ignora conţinutul inclus în interiorul perechii <noframe> </noframe>.
Tehnologii Web18.10.2016 23
copyright@www.adrian.runceanu.ro
Limbajul HTML (partea III)
7. Ferestre în HTML7.1. Organizarea documentului în cadre - Tagul <frameset>7.2. Definirea cadrelor - Tagul <frame>7.3. Browserele vechi - Tagul <noframe>7.4. Cadre in-line - Tagul <iframe> (in-line frame)7.5. Exemple
Tehnologii Web18.10.2016 24
copyright@www.adrian.runceanu.ro
7.4. Cadre in-line - Tagul <iframe> (in-line frame)
• Tagurile <iframe> sunt similare tagurilor <frame>, cu deosebirea că se includ în documente HTML obişnuite (nu în documente HTML cu cadre), adică în interiorul perechii <body> </body>.
• La ora actuală (anul 2009!!) numai Internet Explorer acceptă cadre in-line.
• Dacă un browser nu recunoaşte cadre, el va afişa conţinutul cuprins între <iframe> şi </iframe>.
• Tagul <iframe> acceptă aceleaşi atribute ca şi tagul <frame>, în plus acceptă atribute preluate de la tagul <img>, care controlează modul de afişare al cadrului în interiorul documentului.
Tehnologii Web18.10.2016 25
copyright@www.adrian.runceanu.ro
Atribute acceptate:
1. preluate de la tag-ul<frame>:• src• name• scrolling• border• bordercolor• frameborder• framespacing• noresize• marginwidth, marginheight
Tehnologii Web
2. preluate de la tag-ul<img>:• align• width, height• vspace, hspace
Toate atributele menţionatemai sus au semnificaţiile şiparametrii prezentaţi anterior.
18.10.2016 26
copyright@www.adrian.runceanu.ro
Limbajul HTML (partea III)
7. Ferestre în HTML7.1. Organizarea documentului în cadre - Tagul <frameset>7.2. Definirea cadrelor - Tagul <frame>7.3. Browserele vechi - Tagul <noframe>7.4. Cadre in-line - Tagul <iframe> (in-line frame)7.5. Exemple
Tehnologii Web18.10.2016 27
copyright@www.adrian.runceanu.ro
7.5. ExempleRealizarea cadrelor orizontale
<!--index.html-->
<html><head>
<title>Universitatea Constantin Brancusi</title></head>
<frameset rows="150,*,20%"><frame src="antet.html"><frame src="continut.html"><frame src="adresa.html">
</frameset></html>
Tehnologii Web18.10.2016 28
copyright@www.adrian.runceanu.ro
7.5. Exemple
<!--antet.html--><html>
<head></head>
<body><center>
<h3>Universitatea Constantin Brancusi</h3><h3>Facultatea de Inginerie</h3><h3>Catedra de Automatica si Informatica</h3>
</center></body></html>
Tehnologii Web18.10.2016 29
copyright@www.adrian.runceanu.ro
7.5. Exemple
<!--continut.html-->
<html><head></head>
<body><p>Specializarile Facultatii de Inginerie sunt: </p><p>Automatica si Informatica; Mecanica; Energetica.</p>
</body></html>
Tehnologii Web18.10.2016 30
copyright@www.adrian.runceanu.ro
7.5. Exemple
<!--adresa.html-->
<html><head></head>
<body><p align="center"><b>Targu-Jiu, Str. Geneva 3, Telefon: 0253.111.111.</b></p>
</body></html>
Tehnologii Web18.10.2016 31
copyright@www.adrian.runceanu.ro
Tehnologii Web18.10.2016 32
copyright@www.adrian.runceanu.ro
7.5. ExempleImbricarea cadrelor
<!--index.html--><html>
<head><title>Universitatea Constantin Brancusi</title></head>
<frameset rows="120,*,20%"><frame src="antet.html"><frameset cols="100,*">
<frame src="meniu.html"><frame src="desprenoi.html">
</frameset><frame src="adresa.html">
</frameset></html>
Tehnologii Web18.10.2016 33
copyright@www.adrian.runceanu.ro
Tehnologii Web18.10.2016 34
copyright@www.adrian.runceanu.ro
Cadre imbricate cu chenare colorate de diverse grosimi
<html><head>
<title>Cadre imbricate</title></head>
<frameset rows="50,*,50%">
<frameset cols="25%,*" border="30" bordercolor="red">
<frame src="Pagina1.html"><frame src="Pagina2.html">
</frameset>
Tehnologii Web18.10.2016 35
copyright@www.adrian.runceanu.ro
Cadre imbricate cu chenare colorate de diverse grosimi
<frameset cols="*,2*,3*" ><frame src="Pagina3.html" scrolling = "yes" ><frame src="Pagina4.html" scrolling = "auto" ><frame src="Pagina5.html" scrolling = "no" >
</frameset><frameset cols="*,100" border="15">
<frame src="Pagina6.html"><frame src="Pagina7.html" bordercolor="maroon"
noresize></frameset>
</frameset></html>
Tehnologii Web18.10.2016 36
copyright@www.adrian.runceanu.ro
Tehnologii Web18.10.2016 37
copyright@www.adrian.runceanu.ro
Chenare inactive<!--index.html--><html>
<head><title>Universitatea Constantin Brancusi</title>
</head><frameset rows="92,*,20%" frameborder="no"
framespacing="0"><frame src="antet.html"><frameset cols="100,*">
<frame src="meniu.html"><frame src="desprenoi.html">
</frameset><frame src="adresa.html">
</frameset></html>
Tehnologii Web18.10.2016 38
copyright@www.adrian.runceanu.ro
7.5. Exemple
Tehnologii Web18.10.2016 39
copyright@www.adrian.runceanu.ro
Cadre in-line<html>
<head><title>Formate de Imagini</title>
</head><body>
<iframe name="cadru" src="Generalitati.html" width="200" height="100" border="3" align="right">Site realizat cu cadre in-line. Browserul dvs. nu suporta!</iframe>
<b>Formate de Imagini:<ul>
<li><a href="bmp.html" target="cadru">BMP</a></li><li><a href="jpeg.html" target="cadru">JPEG</a></li><li><a href="tiff.html" target="cadru">TIFF</a></li>
</ul></b></body></html>
Tehnologii Web18.10.2016 40
copyright@www.adrian.runceanu.ro
7.5. Exemple
Tehnologii Web18.10.2016 41
copyright@www.adrian.runceanu.ro
Studiati:
Avocode - http://avocode.com/
Ember -http://campus.codeschool.com/courses/try-ember/contents
Întrebări?
18.10.2016 42Tehnologii Web
top related