CADRE ÎN HTML
Presentation
•
Computers
•
11th Grade
•
Practice Problem
•
Hard
Gabriela Gitu
Used 9+ times
FREE Resource
12 Slides • 5 Questions
1
CADRE ÎN HTML
FRAMESET, FRAME şi IFRAME
2
Sunt situatii in care imaginea afisata de browser este formată din
mai multe pagini HTML numite cadre.
Cadrele permit împărţirea unei ferestre în secţiuni independente
între ele, în fiecare dintre acestea fiind posibilă încărcarea unui
document HTML. Astfel, utilizatorul poate vizualiza simultan mai multe documente.
3
Pentru structurarea unui document HTML în cadre sunt
utilizate tagurile:
• <frameset>
• <frame>
• <noframe>
• <iframe>
4
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>
Aşadar, tagul <frameset> permite structurarea documentului
principal în cadre. În interiorul perechii <frameset> </frameset>
nu pot exista decât elemente <frameset>, <frame>, <noframe>.
5
Tagul <frameset> acceptă următoarele atribute:
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ă. Valorile sunt exprimate fie prin numere întregi
pozitive (înălţime absolută exprimată în pixeli), fie prin procente din înălţimea cadrului
părinte (înăţime relativă), fie prin caracterul de puncuaţie „*‟, care semnifică o înălţime
relativă.
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.
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.
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. Dacă framespacing=0, cadrele nu pot fi redimensionate cu drag and
drop (adică prin tragere cu mouse-ul).
6
Cadrele sunt introduse prin perechea de etichete <frame>
</frame>,si suporta atributele:
• src fisierul sau adresa fisierului introdus
• bordercolor culoarea chenarului cadrului curent conform
modelului #rrggbb
• noresizedezactiveaza
posibilitatea
vizitatorului
de
a
redimensiona cadrul
• scrolling
adaugă
cadrului
bare
de
defilare
cu
valorile yes,no sau auto
• 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;
7
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>.
8
Realizaţi o pagină html numită index.html care să fie
împărţită în 2 cadre verticale.
• Rezolvare:
• Fişierul index.html va avea următorul conţinut:
• <html>
<head><title>Exemplu cadre</title></head>
<frameset cols="20%,80%">
<frame src=“paginastanga.html”>
<frame src=“exersarelink.html" name="mainFrame">
</frameset>
</html>
9
Rezultat
10
Pagina impartita in 3 cadre
<html>
<head><title>Exemplu cu cadre</title>
</head>
<frameset cols= "180,*" border=0>
<frame src="paginastanga.html" noresize >
<frameset rows = "120, *" border = 0>
<frame src="imagine.png" scrolling="no">
<frame src="exersarelink.html"
name="cadrul2">
</frameset>
</frameset>
</html>
11
Rezultat
12
Multiple Choice
Cadrele sunt folosite pentru:
împărţirea unui document Notepad în secţiuni independente între ele, în fiecare dintre acestea fiind posibilă încărcarea unui document HTML
împărţirea unei ferestre în secţiuni independente între ele, în fiecare dintre acestea fiind posibilă încărcarea unui document HTML
crearea unor secţiuni independente între ele, în fiecare dintre acestea fiind posibilă încărcarea unui document
împărţirea unei ferestre în secţiuni independente între ele, în fiecare dintre acestea fiind posibilă încărcarea unor documente
13
Fill in the Blanks
Type answer...
14
Multiple Select
Ce atribute acceptă tagul <frameset> ?
rows
align
frameborder
color
cols
15
Fill in the Blanks
Type answer...
16
Multiple Choice
Care este atributul obligatoriu pentru eticheta <frame>
bordercolor
noresize
scrolling
src
name
17
Aplicatie
Realizati o pagina cu doua cadre orizontale in proportia
20% si 80% din inaltimea totala. Pagina de sus are
chenarul rosu iar cea de jos are scroll.
CADRE ÎN HTML
FRAMESET, FRAME şi IFRAME
Show answer
Auto Play
Slide 1 / 17
SLIDE
Similar Resources on Wayground
11 questions
CIRCULATORY SYSTEM
Presentation
•
10th Grade
13 questions
Gerunds and Gerund Phrases
Presentation
•
10th Grade
13 questions
LINUX - DOWIĄZANIA
Presentation
•
11th Grade
11 questions
Scratch 3.0
Presentation
•
KG
12 questions
REMEDIAL JARKOM XI
Presentation
•
11th Grade
15 questions
Programming
Presentation
•
11th Grade
12 questions
Вопросы по HTML 10 класс
Presentation
•
10th Grade
11 questions
Lesson 3
Presentation
•
10th Grade
Popular Resources on Wayground
20 questions
Math Review
Quiz
•
3rd Grade
15 questions
Fast food
Quiz
•
7th Grade
20 questions
Context Clues
Quiz
•
6th Grade
20 questions
Inferences
Quiz
•
4th Grade
19 questions
Classifying Quadrilaterals
Quiz
•
3rd Grade
20 questions
Figurative Language Review
Quiz
•
6th Grade
20 questions
Equivalent Fractions
Quiz
•
3rd Grade
10 questions
Identify Fractions, Mixed Numbers & Improper Fractions
Quiz
•
3rd - 4th Grade
Discover more resources for Computers
10 questions
Fact Check Ice Breaker: Two truths and a lie
Quiz
•
5th - 12th Grade
10 questions
Video Games
Quiz
•
6th - 12th Grade
15 questions
Memorial Day Trivia
Quiz
•
KG - 12th Grade
12 questions
Name that Candy
Quiz
•
KG - 12th Grade
20 questions
Guess The App
Quiz
•
KG - Professional Dev...
30 questions
K/H Final Review Part 1
Quiz
•
9th - 12th Grade
40 questions
NCFE Earth and Environmental Science Released Test
Quiz
•
9th - 12th Grade
22 questions
Revise and Edit Final Review 3
Quiz
•
8th - 12th Grade