Ramki

Karta pracy 2017/2018

Adres:
http://plotkarka.eu/KP/ramki.html
Autor:
Radosław Kowaluk

Definiowanie ramek

 

W swoim folderze roboczym utwórz dokument strona1.html (wykorzystaj plik szablonstrony.html, metodę kopiuj-wklej) zawierający następujący kod:

<!DOCTYPE html>
<html>
 <head>
  <title>Strona 1</title>
  <meta charset="utf-8"/>
 </head>
 <body>
  <h1>Strona 1</h1>
 </body>
</html>

 

W swoim folderze roboczym utwórz dokument strona2.html (wykorzystaj plik szablonstrony.html, metodę kopiuj-wklej) zawierający następujący kod:

<!DOCTYPE html>
<html>
 <head>
  <title>Strona 2</title>
  <meta charset="utf-8"/>
 </head>
 <body>
  <h1>Strona 2</h1>
 </body>
</html>

 

W swoim folderze roboczym utwórz dokument menu.html (wykorzystaj plik szablonstrony.html, metodę kopiuj-wklej) zawierający następujący kod:

<!DOCTYPE html>
<html>
 <head>
  <title>Menu</title>
  <meta charset="utf-8"/>
 </head>
 <body>
  <div></div>
 </body>
</html>

Definiowanie ramki1 (lokalizacja pliku2)

W źródle pliku strona1.html, w elemencie body dopisz kod. 

 <body>
  <iframe src="menu.html"></iframe>
  <h1>Strona 1</h1>

Zapisz dokument i otwórz go w przeglądarce.

Szerokość3

W źródle pliku strona1.html, w elemencie iframe dopisz kod. 

  <iframe src="menu.html" width="300">

Zapisz dokument i otwórz go w przeglądarce.

Wysokość4

W źródle pliku strona1.html, w elemencie iframe dopisz kod. 

  <iframe src="menu.html" width="300" height="200">

Zapisz dokument i otwórz go w przeglądarce.

W źródle pliku strona2.html umieść definicję ramki (wykorzystaj plik strona1.html, metodę kopiuj-wklej).

 <body>
  <iframe src="menu.html" width="300" height="200">
  </iframe>
  <h1>Strona 2</h1>

Zapisz dokument i otwórz go w przeglądarce.

W źródle pliku menu.html, w elemencie body dopisz kod. Zapisz dokument i otwórz w przeglądarce dokument strona1.htm - kliknij link: Strona 1. 

  <div>
  <a href="strona1.html">Strona 1</a>
 </div>

Definiowanie okna docelowego dla otwieranego pliku5

W źródle pliku menu.html, w elemencie body dopisz kod. Zapisz dokument i otwórz w przeglądarce dokument strona1.htm - kliknij link: Strona 1. 

  <a href="strona1.html" target="_top">Strona 1</a>

W źródle pliku menu.htm, w elemencie body dopisz kod z linkiem do pliku strona2.htm. 

  <a href="strona1.html" target="_top">Strona 1</a>
  <a href="strona2.html" target="_top">Strona 2</a>
 </div>

Zapisz dokument i otwórz go w przeglądarce , przetestuj hiperłącza.

Dodaj w pliku index.html link do pliku strona1.html w części Rozwiązania

Wgrywanie plików na serwer

Po sprawdzeniu poprawności kodu i linków umieść pliki strona1.html, strona2.html, menu.html i index.html na serwerze.

  1. Element <iframe> - definiuje ramkę (zamiast ramek w dokumencie można zastosować element object)
  2. Atrybut src - definiuje nazwę pliku. Wartością jest URL.
  3. Atrybut width - definiuje szerokość ramki. Wartością jest iczba pikseli.
  4. Atrybut height - definiuje wysokość ramki. Wartością jest iczba pikseli.
  5. Atrybut target - defiuniuje okno docelowe dla otwieranego pliku. Możliwe wartości: _self (okno aktualne), _blank (nowe okno), _parent (okno rodzica), _top (okno główne), nazwa (okno, ramka o podanej nazwie)

Właściwości ramek

Tekst alternatywny1

W źródle pliku strona1.html i strona2.html, w elemencie iframe dopisz kod.

  <iframe src="menu.htm">
   twoja przeglądarka nie obsługuje ramek,
   <a href="menu.html">kliknij link</a>
  </iframe>

Zapisz dokument i otwórz go w przeglądarce.

Styl strony2 (definicja CSS2)

W źródle pliku menu.html, w elemencie head dopisz kod.

  <title>Menu</title>
  <style>
body {
color: red;
}
  </style>
 </head>

Zapisz dokument i otwórz go w przeglądarce.

Klasa elementu4

W źródle pliku strona1.html, w znaczniku body dopisz kod.

 <body class="strona">

Plik styli CSS (selektor klasy)

W edytorze utwórz plik style.css (kodowanie UTF-8) zawierający kod:

.strona {
color: silver;
}

Link do pliku styli5 (lokalizacja pliku6, relacja7 )

W źródle pliku strona1.html, w elemencie head dopisz kod.

  <title>Strona 1</title>
  <link rel="stylesheet" href="style.css">
 </head>

Zapisz dokument i otwórz go w przeglądarce.

Wykonaj analogiczne zmiany w pliku strona2.html.

  <title>Strona 2</title>
  <link rel="stylesheet" href="style.css">
 </head>

Zapisz dokument i otwórz go w przeglądarce.

Atrybut frameborder8

Przykładowy kod uzyskany z serwisu Mapy Google

<iframe src="https://www.google.com/maps/embed?..."
 width="800" height="600"
 frameborder="0" style="border:0">
</iframe>

Znajdź aktualne informacje o osadzaniu map w dokumencie internetowym z wykorzystaniem elementu iframe.

W źródle pliku strona1.html, w elemencie body wstaw kod osadzający mapę (Mapy Google). Zapisz dokument i otwórz go w przeglądarce.

Atrybut allowfullscreen9

Przykładowy kod uzyskany z serwisu YouTube.

Uwaga:
W atrybucie  src brakuje przedrostka https:, który należy dodać.

<iframe width="560" height="315"
 src="//www.youtube.com/embed/..."
 frameborder="0" allowfullscreen>
</iframe>

Znajdź aktualne informacje o osadzaniu filmów w dokumencie internetowym z wykorzystaniem elementu iframe.

W źródle pliku strona2.html, w elemencie body wstaw kod osadzający film (YouTube). Zapisz dokument i otwórz go w przeglądarce.

Wgrywanie plików na serwer

Umieść poprawne pliki strona1.html, strona2.html, menu.html, style.css na serwerze i sprawdź ich działanie, poprawność.

Nowe elementy multimedialne w HTML5 3

  1. Tekst alternatywny - definiuje zawartość wyświetlaną w przypadku, gdy przeglądarka nie obsługuje ramek.
  2. Element <style> - definiuje styl strony (atrybut type="text/css" - definiujący typ zawartości nie jest obowiązkowy w HTML5).
  3. Definicja CSS strony składa się z selektora i opisanych cech formatowania w nawiasie, oddzielonych średnikami.
  4. Atrybut class - definiuje nazwę klasy elementu.
  5. Element <link> - definiuje styl strony w osobnym pliku.
  6. Atrybut href - defiuniuje lokalizację pliku. Wartością jest URL.
  7. Atrybut rel - definiuje typ zawartości pliku. Wartością jest URL.
  8. Atrybut frameborder - definiuje obramowanie ramki, wartość 0 (lub no) oznacza brak ramki (atrybut uznany za przestarzały, zaleca się stosowanie stylów CSS).
  9. Atrybut allowfullscreen - definiuje umożliwienie pracy odtwarzacza w trybie pełnoekranowym. Atrybut w składni XML powinien mieć postać: allowfullscreen="allowfullscreen"
  10. Elementy: <svg>, <math>