Ramki (7)


Tomasz Bartuś



Pływające ramki (ang. floating frames, inline frames) są techniką HTML, która została zaimplementowana w oficjalnym standardzie języka w wersji 4.0, a następnie uznana w standardzie XHTML 1.0. W standardzie XHTML 1.1, podobnie jak klasyczne ramki, została zaniechana, by powrócić (po uszczupelniu listy dostępnych atrybutów) do łask w HTML 5. Używana jest w celu wklejenia wewnątrz strony www treści zawartej w osobnym pliku html. To wklejene ma charakter wyspy otoczonej zawartością udostępnioną w innym pliku html.

Ogólna postać tagu wprowadzająca pływające ramki ma postać:

<iframe width="" height="" src="">
Twoja przeglądarka nie wyświetla pływających ramek!
</iframe>

np:

<iframe width="400" height="200" src="home.html">
Twoja przeglądarka nie wyświetla pływających ramek!
</iframe>


Zdanie "Twoja przeglądarka nie wyświetla pływających ramek!" zostanie wyświetlone w przeglądarkach nie akceptujących pływających ramek.

Atrybut frameborder, który występował w specyfikacji HTML 4 nie jest już wspierany w HTML 5. Gdybyśmy w standardzie HTML 4.0 chcieli pozbyć się granic ramki, moglibyśmy napisać:

<iframe width="400" height="200" frameborder="0" src="home.html">
Twoja przeglądarka nie wyświetla pływających ramek!
</iframe>




Jeśli dodamy do tagu znany nam już atrybut scrolling="no", ramka zostanie pozbawiona suwaka. Atrybut ten również został wycofany z HTML 5.

<iframe width="400" height="200" frameborder="1" scrolling="no" src="home.html">
Twoja przeglądarka nie wyświetla pływających ramek!
</iframe>


Zawartości strony nie można przewinąć.

HTML 4 przewidywał użycie atrybutów marginwidth="x" i marginheight="y". Pozwalały one wprowadzić dodatkowe marginesy w pływającej ramce. Atrybuty te zostały wycofane z polecenia w HTML 5 - w ich miejsce współcześnie wykorzystuje się style CSS.

Pływającą ramkę można też ustawić po prawej stronie dokumentu czy bloku, używając atrybutu align="right". Atrybut ten nie jest już jednak wspierany w HTML 5 i zaleca się pozycjonowanie za pomocą stylów.

<iframe width="400" height="200" frameborder="0" scrolling="no" align="right" src="home.html">
Twoja przeglądarka nie wyświetla pływających ramek!
</iframe>


W wersji HTML 5 pojawił się nowy atrybut seamless za pomocą którego wtapiamy ramkę w stronę www.

<iframe width="400" height="200" src="home.html" seamless>
Twoja przeglądarka nie wyświetla pływających ramek!
</iframe>


Oczywiście, tak jak w przypadku zwykłych ramek, za pomocą ramek pływającch też możemy tworzyć przeględarki odnośników. Wystarczy dodać do tagu iframe atrybut name i dowolnie nazwać ramkę, a w odnośnikach w atrybucie target wystarczy odpowiednio zaadresować linki.

Ramka:

<iframe width="400" height="200" name="moja_ramka" src="home.html" seamless>
Twoja przeglądarka nie wyświetla pływających ramek!
</iframe>

Miejsce nad/pod ramką:

<a href="./kurs_html/frames/examples/home.html" target="moja_ramka">Home</a>
<a href="./kurs_html/frames/examples/tutaj.html" target="moja_ramka">Tutaj</a>
<a href="./kurs_html/frames/examples/tam.html" target="moja_ramka">Tam</a>



Home | Tutaj | Tam

 
 

Wykłady:

 
 

1. Sieci komputerowe

 
 
1.1 Pojęcia podstawowe
 
1.2. Internet - historia i współczesność
 
1.3. Rodzaje sieci
 

2. HTML 5.0

 
 
2.1. HTML - konwencje
 
2.2. Kod minimalny dokumentów .html
 
2.3. Znaki diakrytyczne i metainformacje
 
2.4. Podstawowe tagi
 
2.5. Formatowania tekstu
 
2.6. Obrazy
 
2.7. Odnośniki
 
2.8. Listy
 
2.9. Tabele
 

3. CSS

 
 
3.1. CSS - konwencje
 
3.2. Kolory
 
3.3. Tła
 
3.4. Model pudełkowy
 
3.5. Krawędzie
 
3.6. Marginesy
 
3.7. Dopełnienia
 
3.8. Wysokość i szerokość
 
3.9. Tekst
 
3.10. Czcionki
 
3.11. Opływanie
 
3.12. Technika zagnieżdżonych bloków, Display
 

4. Dodatki

 
 
4.1. Publikacja stron www
 
4.2. Grafika
 
4.3. Walidacja dokumentów
 
4.4. Linux (1)
 

Ćwiczenia:

Zakładanie kont


Tabele:

1  2  3  4  5  6
 

Ramki:

1  2  3  4  5  6  7
 
 

CSS: