Interakcje

Karta pracy 2017/2018

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

Elementy interaktywne

 

W swoim folderze roboczym utwórz dokument interakcje.html (wykorzystaj pliki szablonów, metodę kopiuj-wklej) zawierający następujący kod:

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

 </body>
</html>

Detale1 i podsumowanie2

W elemencie body dopisz kod:

<details>
 <summary>
Zawartość widoczna
 </summary>
 <p>
Zawartość niewidoczna
 </p>
</details>

Zapisz zmiany i odśwież podgląd dokumentu w przeglądarce. Kliknij podsumowanie.

Atrybut otwarty 3

W znaczniku details dopisz kod:

<details open>

Zapisz zmiany i odśwież podgląd dokumentu w przeglądarce. Kliknij podsumowanie.

Menu podręczne elementu4, pozycja menu5 (atrybuty6)

W elemencie body dopisz kod:

<p contextmenu="menu">Element</p>
<menu type="context" id="menu">
<menuitem label="MENU">
</menuitem>
</menu>

Zapisz zmiany i odśwież podgląd dokumentu w przeglądarce.

Uwaga: Elementy nie są poprawnie interpretowane przez przegądarki internetowe.

Element dialog7

W elemencie body dopisz kod:

<dialog>
Zawartość okna dialogowego
</dialog>

Zapisz zmiany i odśwież podgląd dokumentu w przeglądarce.

Atrybut otwarty 3

W znaczniku dialog dopisz kod:

<dialog open>

Zapisz zmiany i odśwież podgląd dokumentu w przeglądarce.

Zagnieżdżanie elementów

W elemencie body dopisz kod:

<details>
 <summary>
Zawartość 1
 </summary>
<details>
 <summary>
Zawartość 2
 </summary>
 <p>
Zawartość 3
 </p>
</details>
</details>

Zapisz zmiany i odśwież podgląd dokumentu w przeglądarce. Kliknij podsumowania.

Zapisz pliki ćwiczeniowe.

Zastosuj poznane elementy (wybrane) w swojej stronie lub blogu.

  1. Element <details> - zawiera strukturę elementów (summary i tekst).
  2. Element <summary> - zawiera widoszny, wyróżniony tekst. Kliknięcie ukrywa lub pokazuje informaje dodatkowe.
  3. Atrybut open - definiuje pokazanie zawartości ukrytej lub okna dialogowego.
  4. Element <menu> - zawiera strukturę elementów (menuitem). Kliknięcie prawym przyciskiem myszy elementu pokazuje jego menu z dodatkowymi pozycjami określonymi w elementach menuitem.
  5. Element <menuitem> - zawiera pozycję menu elementu.
  6. Atrybut contextmenu elementu definiuje identyfikator menu podręczne (zgodny z id elementu menu). Atrybut type="context" elementu menu definiuje typ menu (kontekstowe). Atrybut label definiuje etykietę menu elementu.
  7. Element <dialog> - okno dialogowe.

Przyciski, opcje i hiperłącza

Przycisk1

W elemencie body dopisz kod:

<button>Przycisk 1</button>

Zapisz zmiany i odśwież podgląd dokumentu w przeglądarce.

Przycisk2

W elemencie body dopisz kod:

<input type="button" value="Przycisk 2">

Zapisz zmiany i odśwież podgląd dokumentu w przeglądarce.

Opcja3

W elemencie body dopisz kod:

<select>
<option>Opcja 1</option>
<option>Opcja 2</option>
</select>

Zapisz zmiany i odśwież podgląd dokumentu w przeglądarce.

Hiperłącze4

W elemencie body dopisz kod:

<a href="http://plotkarka.eu/">Przycisk 1</a>

Zapisz zmiany i odśwież podgląd dokumentu w przeglądarce.

Klawisze skrótu

  1. Element <button> - definiuje przycisk akcji.
  2. Element <input> - (z trybutem type="button" i value="tekst") definiuje przycisk akcji z etykietą tekst.
  3. Element <option> i <select>- .
  4. Element <a> - hiperłącze.
  5. Atrybut accesskey - .