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>

Wykaz skrótów

Dodatki pracy 2013/2014

Adres:
http://plotkarka.eu/b/abbr.html
Autor opracowania:
Radosław Kowaluk

AAC
advanced audio coding
AI
Artificial Intelligence
AIML
Artificial Intelligence Markup Language
API
Application Programming Interface
ASCII
American Standard Code for Information Interchange
BMP
? (file format)
BTS
Base Transceiver Station
CDR
? (file format Corel Corporation)
CMD
Cross Document Messaging
CMS
Content Management System
CMY
cyan, magenta, yellow
CMYK
cyan, magenta, yellow and key (black)
CSS
Cascading Style Sheets
DHTML
Dynamic HyperText Markup Language
DOM
Document Object Model
DTD
Document Type Definition
ECMA
European Computer Manufacturers Association
EOT
Embedded Open Type
FLAC
Free Lossless Audio Codec (format pliku dźwiękowego)
FTP
File Transfer Protocol
GIF
Graphics Interchange Format
GNU
GNU’s not Unix
GPL
General Public License
GPS
Global Positioning System
HSL
Hue Saturation Lightness
HSLA
Hue Saturation Lightness Alpha
HSV
Hue Saturation Value (brightness)
HTML
HyperText Markup Language
HTTP
Hypertext Transfer Protocol
HTTPS
Hypertext Transfer Protocol Secure
IE
Internet Explorer
IP
Internet Protocol
IT
Information Technology
JNG
JPEG network graphics
JPEG
(file format), Joint Photographic Experts Group
JPG
JPEG
ISO
International Organization for Standardization
i18n
internationalization
MDN
Mozilla Developer Network
MIME
Multipurpose Internet Mail Extensions
MP3
MPEG-1/MPEG-2 Audio Layer 3
NEF
Nikon Electronic File
PCX
? PiCture eXchange
PCM
Pulse Code Modulation (format dźwięku)
PHP
PHP/FI - Personal Home Page/Forms Interpreter
PNG
Portable Network Graphics
PSD
? (file format Photoshop Document)
RAW
? (format graficzny)
RGB
Red Green Blue
RGBA
Red Green Blue Alpha
SGML
Standard Generalized Markup Language
SMIL
Synchronized Multimedia Integration Language
SWF
small web format
sRGB
standarised RGB (Red, Green, Blue)
SQL
Structured Query Language
SVG
Scalable Vector Graphics
TCP/IP
Transmission Control Protocol / Internet Protocol
TIFF
Tagged Image File Format
TXT
text file
URI
Uniform Resource Identifier
URL
Uniform Resource Locator
UTF
Unicode Transformation Format
XDM
Cross-Document Messaging
XML
Extensible Markup Language
XHTML
Extensible HyperText Markup Language
W3C
World Wide Web Consortium
WAI
Web Accessibility Initiative
WaSP
Web Standards Project
WAV
WAVE (format pliku dźwiekowego)
WCAG
Web Content Accessibility Guidelines
WMA
Windows Media Audio
WWW
World Wide Web