Lekcja 59 – 60.
Skrypty PHP i bazy mySQL – rozwiązywanie zadań.

Przykład poprawnie wykonanego ćwiczenia z poprzedniej lekcji: do pobrania.

Kontynuacja ćwiczenia z poprzedniej lekcji. Do pliku index.php wpisuj kolejne skrypty PHP poprzedzone nagłówkiem drugiego stopnia z numerem ćwiczenia oraz akapitem tekstu z krótkim opisem ćwiczenia.

Ćwiczenie 3.

Utwórz listę kolumn w tabeli dania z bazy baz2024.

Wskazówka: sprawdź zapytanie show columns in baza_danych.tabela; lub show columns from baza_danych.tabela;.

Ćwiczenie 4.

Na podstawie danych z tabeli pracownicy w bazie baz2024, utwórz tabelę HTML.

Ćwiczenie 5.

Na podstawie wybranych danych z tabeli dania w bazie baz2024, utwórz cennik dań (w postaci tabeli HTML).

Kolejne ćwiczenia do wykonania.

Ćwiczenie 6.

W aplikacji phpMyAdmin dopisz do tabeli `pracownicy`: Zenobia Zdziwiona, stanowisko 3.

Zapamiętaj kod zapytania SQL - wykorzystasz go do wykonania kolejnego ćwiczenia.

Ćwiczenie 7.

Zapomocą skryptu PHP dopisz do tabeli `pracownicy` swoje imię i nazwisko oraz stanowisko 3.

Eksportuj bazę danych do pliku typu sql i wyślij ten plik do oceny.

Przed końcem lekcji spakuj zawartość Twojego folderu z bazą (w tym plik index.php!!!) do pliku ostatnie_zadanie.zip i wyślij ten plik do oceny.

Lekcja 57 – 58.
Skrypty PHP - pobieranie danych z bazy mySQL.
Budowanie tabel i list w dokumencie HTML – ćwiczenia.

Przygotowanie do wykonania ćwiczenia:

1. W folderze C:\xampp\htdocs\ utwórz podfolder baz2024.
2. W folderze baz2024 utwórz plik index.php – poprawny dokument HTML. W tym pliku będziesz umieszczał skrypty PHP – rozwiązania kolejnych ćwiczeń.
3. Otwórz aplikację XAMPP i włącz moduły Apache i mySQL.
4. Otwórz aplikację phpMyAdmin i utwórz nową bazę danych baz2024.
5. Pobierz plik baz2024.sql i importuj ten plik do bazy baz2024.
6. W folderze C:\xampp\htdocs\baz2024\ utwórz utwórz plik index.php zawierający poprawną strukturę dokumentu HTML i nagłówek pierwszego stopnia z tekstem: PHP i mySQL. Poniżej tego nagłówka umieść akapit tekstu: Opracował: ... zawierający Twoje imię i nazwisko (zamiast kropek).

Teraz kontynuuj ćwiczenie. Do pliku index.php wpisuj kolejne skrypty PHP poprzedzone nagłówkiem drugiego stopnia z numerem ćwiczenia oraz akapitem tekstu z krótkim opisem ćwiczenia.

Ćwiczenie 1.

Utwórz listę uporządkowaną zawierającą nazwy wszystkich baz danych zapisanych na tym serwerze.

Wskazówka: sprawdź zapytanie show databases; lub show schemas;.

Ćwiczenie 2.

Utwórz listę nieuporządkowaną zawierającą nazwy wszystkich tabel w bazie baz2024.

Wskazówka: sprawdź zapytanie show tables in nazwa_bazy; lub show tables from nazwa_bazy;.

Ćwiczenie 3.

Utwórz listę kolumn w tabeli dania z bazy baz2024.

Wskazówka: sprawdź zapytanie show columns in baza_danych.tabela; lub show columns from baza_danych.tabela;.

Ćwiczenie 4.

Na podstawie danych z tabeli pracownicy w bazie baz2024, utwórz tabelę HTML.

Ćwiczenie 5.

Na podstawie wybranych danych z tabeli dania w bazie baz2024, utwórz cennik dań (w postaci tabeli HTML).

Przed końcem lekcji spakuj zawartość folderu baz2024 do pliku baz2024.zip i wyślij plik do oceny.

Lekcja 55 – 56.
PHP i SQL - odczytywanie i publikowanie danych z bazy MariaDB.
Formularze HTML i skrypty PHP - zapisywanie danych w bazie Maria DB.

Materiał do tej lekcji powstał przy użyciu ChatGPT – zapoznaj się z przebiegiem rozmowy.

Jak skorzystać z efektów tej rozmowy?

1. Zainstaluj na swoim komputerze serwer Apache, PHP i MariaDB (pakiet XAMPP). Zakładając standardową instalację będziesz lokalnie pracować w folderze: C:\xampp\htdocs\, w którym utworzysz podfolder baza.
2. Umieść na serwerze lokalnym (w folderze C:\xampp\htdocs\baza\) pliki users_db.php, index.php i db.php.
3. Uruchom XAMPP Control Panel i włącz moduły Apache i MySQL.
4. Uruchom skrypt users_db.php: otwórz przeglądarkę i przejdź do http://localhost/baza/users_db.php, aby utworzyć bazę danych, tabelę oraz dodać przykładowe dane.
5. Sprawdź stronę: Przejdź do http://localhost/baza/index.php, aby zobaczyć listę użytkowników pobraną z bazy danych MariaDB.
6. W panelu XAMPP Control Panel wyłącz moduły Apache i MySQL.
7. Zamknij XAMPP Control Panel.

Zadanie do wykonania

Stosując odpowiednie komentarze podpisz (w kodzie) pliki users_db.php, index.php i db.php swoim imieniem i nazwiskiem. Dodaj do każdego kodu informację postaci Opracował: Imię Nazwisko, która zostanie wyświetlona po uruchomieniu pliku w przeglądarce.

Spakuj folder baza do archiwum (zip) i wyślij plik do oceny.

W arkuszach egzaminacyjnych publikowany jest (w miarę potrzeb) zestaw podstawowych funkcji biblioteki mysqli w wersji strukturalnej.

Porównanie wesji strukturalnej i obiektowej tej biblioteki znajdziesz tutaj – strona została wygenerowana przez ChatGPT.

Oto kolejna rozmowa z czatem, znajdziesz w niej informacje o wysyłaniu danych z formularza HTML do bazy MariaDB oraz różne sposoby (strukturalne i obiektowe) rozwiązania zadania.

UWAGA: Problem z zamianą portu 3306 na 3307 został rozwiązany po rozmowie z czatem - zainteresowanym polecam tę lekturę. Niestety, skrypty PHP łącząc się z bazą danych muszą dodatkowo zawierać numer portu.

Lekcja 53 – 54.
Wysyłanie danych z formularza i przetwarzanie ich w skrypcie PHP.
Ćwiczenia w budowaniu formularzy HTML - rozwiązywanie zadań.

Formularz

Utwórz dokument zadanie_abc.html i zbuduj w nim formularz przedstawiony na rysunku.

Wykorzystaj następujące fragmenty kodu:

• <form action="javascript: oblicz()" onsubmit="return sprawdzaj()"> – znacznik otwierający formularz.
• <fieldset> – zestaw pól formularza (obramowanie obejmujące trzy pola tekstowe input wraz z opisem legend, linię i przycisk typu submit). Pola do wprowadzania danych powinny mieć odpowiednie nazwy i identyfikatory: a, b i c.
• <legend> Opis? </legend> – tytuł lub podpis dla grupy kontrolek formularza zagnieżdżonych wewnątrz znacznika <fieldset>.
• <input type="submit"> – przycisk wysyłający dane z formularza do przetworzenia przez skrypt.
• <output id="wynik"></output> – obiekt do wyświetlania wyników obliczeń (rozwiązanie zadania).

Umieść w dokumencie skrypt zawierający funkcje:

  function sprawdzaj() {
    // sprawdzenie poprawności danych
	var x = document.querySelectorAll("[type=\"text\"]");
    // zmienna a
    if (isNaN(x[0].value) || x[0].value <= 0) {
      alert('Wprowadź liczbę dodatnią!');
      x[0].select();
      return false;
    }
    // zmienna b
    if (isNaN(x[1].value) || x[1].value <= 0) {
      alert('Wprowadź liczbę dodatnią!');
      x[1].select();
      return false;
    }
    // zmienna c
    if (isNaN(x[2].value) || x[2].value <= 0) {
      alert('Wprowadź liczbę dodatnią!');
      x[2].select();
      return false;
    }
    return true;
  }

  function oblicz() {
    // dane - konwersja tekstu na liczby zmiennoprzecinkowe
    let a = parseFloat(x[0].value); // zmienna a;
    let b = parseFloat(x[1].value); // zmienna b;
    let c = parseFloat(x[2].value); // zmienna c;
    // obliczenia (uzupełnij)
    
    // wynik (zredaguj odpowiedź i umieść w obiekcie <output id="wynik"></output>)

  }

Zadania do rozwiązania

Zadanie 1. Oblicz objętość, pole powierzchni całkowitej i długość przekątnej prostopadłościanu o krawędziach długości a, b i c (trzy liczby dodatnie).

Zadanie 2. Oblicz pole powierzchni i obwód trójkąta o bokach długości a, b i c (trzy liczby dodatnie) lub napisz, że te liczby nie są bokami trójkąta.

Zadanie 3. Rozwiąż równanie kwadratowe ax² + bx + c = 0, gdy a ≠ 0.

...

...

Lekcja 51 – 52.
Formularz HTML i różne typy znacznika <input> do wprowadzania danych (ćwiczenia).
Przyciski w formularzu - pobieranie i wysyłanie danych z formularza (ćwiczenia).

Pole do wprowadzania danych (input) w formularzu link.

Przyciski w formularzu link.

Lekcja 49 – 50.
Przykłady reguł CSS dostosowanych do mediów.
Pobieranie i przetwarzanie danych z formularza HTML - ćwiczenia.

Wybrane przykłady reguł CSS dostosowujące dokument HTML do mediów (@import i @media).

Przykład rozwiązania zadania z zestawu 2.

Dodatkowe zestawy zadań:

• Zestaw 1. pobierz lub otwórz w nowym oknie.
• Zestaw 2. pobierz lub otwórz w nowym oknie.

Rozwiązania zadania z poprzedniej lekcji: link.

Lekcja 47 – 48.
HTML, CSS i JavaScript – omówienie wyników sprawdzianu.

Pytania ze sprawdzianu do pobrania.

Przykładowe i poprawne odpowiedzi:

HTML

Napisz fragmenty kodu HTML zgodne z podanymi poleceniami.

1. Dwa początkowe wiersze dokumentu HTML strony pisanej w języku polskim i zgodnej ze specyfikacją HTML5.

   <!DOCTYPE html>
   <html lang="pl-PL">
   

2. Komentarz HTML, w którym wpiszesz swoje imię i nazwisko.

   <!-- Wiesław Rychlicki -->
   

3. Włączenie zewnętrznego arkusza stylu z pliku zadania.css z podfolderu style.

   <link rel="stylesheet" href="style/zadanie.css">
   

4. Nagłówek pierwszego stopnia z tekstem: Witryny i aplikacje internetowe.

   <h1>Witryny i aplikacje internetowe</h1>
   

5. Akapit tekstu należący do klasy frame i zawierający tekst: H₂SO₄ - kwas siarkowy.

   <p class="frame">H<sub>2</sub>SO<sub>4</sub> - kwas siarkowy</p>
   

6. Link do strony https://pl.wikipedia.org/wiki/Kwas_siarkowy z tekstem: kwas siarkowy.

   <a href="https://pl.wikipedia.org/wiki/Kwas_siarkowy">kwas siarkowy</a>
   

7. Lista uporządkowana zwierająca nazwy trzech miast: Lesko, Sanok i Ustrzyki Dolne.

   <ol>
     <li>Lesko</li>
     <li>Sanok</li>
     <li>Ustrzyki Dolne</li>
   </ol>
   

8. Formularz z polem tekstowym o nazwie radius i z etykietą Promień koła oraz z przyciskiem OBLICZ, który po kliknięciu wywoła funkcję oblicz().

   <form>
     <label>Promień koła <input type="text" name="radius" id="radius"></label>
     <input type="button" value="OBLICZ" onclick="oblicz()">
   </form>
   

CSS

Napisz fragmenty kodu CSS zgodne z podanymi poleceniami.

1. Styl lokalny w nagłówku <h3> z tekstem Plan lekcji ustawionym centralnie.

   <h3 style="text-align: center;">Plan lekcji</h3>
   

2. Styl wewnętrzny z regułą ustalającą tło w kolorze #F0E68C dla całego dokumentu HTML.

   <style>
     html { background-color: #F0E68C; }
   </style>
   

3. Reguła (w stylu wewnętrznym lub zewnętrznym) dotycząca wszystkich akapitów tekstu: zwiększająca rozmiar znaków o 20%, ustawiająca wyrównanie tekstu do obu marginesów i wcięcie pierwszego wiersza 20px.

   p {
     font-size: 1.2em;
     text-align: justify;
     text-indent: 20px;
   }
   

4. Reguła dotycząca wszystkich elementów klasy frame: szerokość 600px, wewnętrzne marginesy 15px i czerwone obrzeże o grubości 3px.

   .frame {
     width: 600px;
     padding: 15px;
     border: 3px solid red;
   }
   

5. Reguła ustawiająca jasnoniebieskie tło w nieparzystych wierszach tabeli.

   tr:nth-child(2n+1) {
     background-color: lightblue;
   }
   

JavaScript

Napisz fragmenty kodu JavaScript zgodne z podanymi poleceniami.

1. Utwórz zmienną lokalną a i zainicjuj ją wartością 100. Zmiennej b przypisz kwadrat zmiennej a i wyświetl wartość zmiennej b w konsoli przeglądarki.

   let a = 100;
   b = a * a;
   console.log(b);
   

2. Za pomocą pętli for i metody write() obiektu document wpisz do dokumentu HTML liczby od 1 do 10 (każdą liczbę w odrębnym wierszu).

   for(i = 1; i <= 10; i++) {
     document.write(i + "<br>");
   }
   

3. Definicja funkcji oblicz(), która: pobiera dane z pola tekstowego o identyfikatorze radius i przypisuje je do zmiennej r, oblicza pole powierzchni koła (wzór mat. p = πr²) i wstawia odpowiedź do akapitu tekstu o identyfikatorze result.

   function oblicz() {
     let r = document.getElementById("radius").value;
     let p = Math.PI * r * r;
     document.getElementById("result").innerText = "Pole koła P = " + p;
   }

4. Kod skryptu, który na podstawie tablicy
   var owoce = ["jabłko", "banan", "gruszka", "śliwka", "morela"];
   utworzy w bloku <div id="lista"></div> listę uporządkowaną.

   var owoce = ["jabłko", "banan", "gruszka", "śliwka", "morela"];
   let lista = "<ol>";
   for(i = 0; i < owoce.length; i++) {
     lista += `<li>${owoce[i]}</li>`;
   }
   lista += "<ol>";
   document.getElementById("lista").innerText = lista
   

Pytania z tego sprawdzianu zadałem sztucznej inteligencji (Chat GPT 3.5) – oto przebieg rozmowy i dyskusji nad niektórymi odpowiedziami: link. Odpowiedzi były zgodne z moimi oczekiwaniami i preferowanym prostym stylem rozwiązywania problemów na lekcjach.

Połączyłem zadania HTML 8. i JavaScript 3. i zaproponowałem różne warianty rozwiązania tego zadania (link). Zapoznaj się z tymi rozwiązaniami, wybierz i zapamiętaj tę metodę, która w Twojej opinii jest najlepsza.

Podobnie, na podstawie zadania JavaScript 4. proponuję zapoznanie się z różnymi pętlami i sposobami budowania kodu HTML za pomocą skryptów JS (link).

Dodatkowe zestawy zadań:

• Zestaw 1. pobierz lub otwórz w nowym oknie.
• Zestaw 2. pobierz lub otwórz w nowym oknie.

Lekcja 45 – 46.
Obiekt Array – analiza kodu z zadań domowych.
HTML, CSS i JavaScript – sprawdzian wiadomości.

Przykład 1.

const granice = [
  ["Rosja", 210],
  ["Litwa", 104],
  ["Białoruś", 418],
  ["Ukraina", 535],
  ["Słowacja", 541],
  ["Czechy", 796],
  ["Niemcy", 467],
];

document.addEventListener('DOMContentLoaded', function() {
  granice.sort((a, b) => a[0].localeCompare(b[0]));
  const sortedByNameDesc = [...granice].sort((a, b) => b[0].localeCompare(a[0])); 
  const sortedByBorderLength = [...granice].sort((a, b) => a[1] - b[1]);
  const sortedByBorderLengthDesc = [...sortedByBorderLength].reverse();

  const tableBody = document.getElementById('table-body');

  function generateTable(data) {
    data.forEach(([country, length]) => {
      const row = document.createElement('tr');
      row.innerHTML = `<td>${country}</td><td>${length}</td>`;
      tableBody.appendChild(row);
    });
  }

  generateTable(granice);

  const totalBorderLength = granice.reduce((acc, [_, length]) => acc + length, 0);
  document.getElementById('total-border-length').textContent = totalBorderLength + " km";

  const shortestBorder = granice.reduce((min, current) => min[1] < current[1] ? min : current);
  document.getElementById('shortest-border').textContent = shortestBorder[0];

  const longestBorder = granice.reduce((max, current) => max[1] > current[1] ? max : current);
  document.getElementById('longest-border').textContent = longestBorder[0];
});

Przykład 2.

// tablica granice z przykładu 1.
document.addEventListener("DOMContentLoaded", function() {
  const sortedByNameAsc = granice.slice().sort((a, b) => a[0].localeCompare(b[0]));
  const tableBody = document.getElementById("tableBody");

  function populateTable(data) {
    tableBody.innerHTML = "";
    data.forEach(row => {
      const tr = document.createElement("tr");
      tr.innerHTML = `<td>${row[0]}</td><td>${row[1]}</td>`;
      tableBody.appendChild(tr);
    });
  }

  populateTable(sortedByNameAsc);

  const additionalInfo = document.getElementById("additionalInfo");

  const totalLength = granice.reduce((acc, curr) => acc + curr[1], 0);
  additionalInfo.innerHTML = `<p>Długość wszystkich granic lądowych: ${totalLength} km</p>`;
});

Przykład 3.

Lekcja 43 – 44.
HTML, CSS i JavaScript – powtórzenie i uzupełnienie wiadomości.

Zakres materiału do powtórzenia

• Deklaracja typu dokumentu w języku HTML5: <!DOCTYPE html>
• Znaczniki HTML
  1. Struktura dokumentu – znaczniki: <html>, <head> i <body> oraz atrybut lang w znaczniku <html>.
  2. Sekcja head – znaczniki: <title>, <meta>, <link> i <style> oraz odpowiednie atrybuty w tych znacznikach.
  3. Sekcja body – znaczniki do prezentacji tekstu: nagłówki (sześć stopni) i akapity tekstu.
  4. Znaczniki formatujące tekst...
  5. Znaczniki budujące listy...
  6. Znaczniki budujące tabele...
  7. Tworzenie hiperłączy...
  8. Osadzanie elementów graficznych w dokumencie i atrybuty formatujące obraz.
  9. Kodowanie znaków niedostępnych na klawiaturze – encje HTML.
  10. Znacznik (blok uniwersalny) <div> i znaczniki semantyczne (bloki) w HTML5.
  11. Znaczniki budujące formularze...
  12. ...
• Styl CSS
  1. Styl domyślny przeglądarki.
  2. Atrybut style w znaczniku i styl lokalny.
  3. Znacznik <style> – wewnętrzny arkusz stylu.
  4. Zewnętrzny arkusz stylu – włączanie pliku tekstowego z rozszerzeniem css.
  5. Reguły CSS – pojęcia: selektor, właściwość i wartość.
  6. Kolory w CSS (tło, tekst, linie).
  7. Formatowanie tekstu (wybór kroju i rozmiaru pisma, wyrównanie tekstu, położenie tekstu).
  8. Obramowanie, marginesy wewwntrzne i zewnętrzne.
  9. Styl list i tabel. Pseudoklasy.
  10. Styl linków. Pseudoklasy.
  11. ...
• JavaScript
  1. Znacznik <script> – wpisywanie kodu w dokumencie HTML.
  2. Atrybut src w znaczniku <script> – włączanie kodu z zewnętrznego pliku o rozszerzeniu js.
  3. Definiowanie stałych i zmiennych. Typy danych.
  4. Instrukcje i wyrażenia warunkowe.
  5. Definiowanie funkcji nazwanych bez parametrów i z parametrami. Wywoływanie funkcji.
  6. Obiekt document – właściwości i metody umożliwiających manipulację elementami strony.
  7. Zdarzenia i ich obsługa.
  8. Obiekt Array (tablica) i metody przetwarzania danych zapisanych w tablicy.
  9. Instrukcje iteracyjne (pętle) i działania na tablicach.
  10. ...

---

Materiały do pobrania

Wykaz znaczników HTML: pobierz lub otwórz w nowym oknie.

Znaczniki semantyczne HTML5: pobierz lub otwórz w nowym oknie.

Właściwości CSS: pobierz lub otwórz w nowym oknie.



Grupa 1. i 2. 11.03.2024

Lekcja 41 – 42.
Budowanie elementów strony WWW za pomocą skryptów - ćwiczenia.
Modyfikacja elementów HTML za pomocą skryptów - ćwiczenia.

Przykłady omówione na lekcji:

Sortowanie tablicy numerycznej

Tablica do sortowania:

Tablica posortowana (alfabetycznie):

Tablica posortowana (numerycznie):

Sortowanie tablicy

Tablica granice przed sortowaniem (kod i wybrany sposób prezentacji danych):

Tablica po sortowaniu granice.sort()

Tablica po sortowaniu z zastosowaniem funkcji sortującej function(a, b){ return a[1]-b[1] }, która porównuje długości granic (elementy o indeksie 1).

Uporządkowanie tablicy w kolejności odwrotnej (malejącej) można wykonać za pomocą kodu:

• granice.sort(function(a, b){ return b[1] - a[1] });
• granice.sort(function(a, b){ return a[1] - b[1] }).reverse();

Sumowanie liczb w tablicy granice

Przedstawione rozwiązania wykorzystują podstawowe metody - proste skuteczne i łatwe do zapamiętania. Oto przykład rozwiązania zadania domowego "autorstwa" niektórych uczniów (w ich mniemaniu), pobrane z sieci (ciekawe czy za zgodą ich legalnych autorów) i niestety bez zrozumienia... Podaję tylko kod skryptu.

Lekcja 39 – 40.
DOM i skrypty JS budujące elementy strony WWW.
Zastosowanie funkcji nazwanych i anonimowych do obsługi zdarzeń.

Można sprawdzić w wyszukiwarce Google, że:

Na podstawie tych danych można budować tabelę lub strukturę danych (tablicę JS, obiekt typu Array):

Tablica zawiera 7 elementów (własność obiektu granica.length). Dostęp do elementów jest możliwy za pomocą indeksów granica[i] (dla 0 ⩽ i ⩽ 6). Te elementy są z kolei dwuelementowymi tablicami zawierającymi nazwę państwa (tekst) granica[i][0] i długość granicy (liczbę) granica[i][1].

Po tym akapicie, w dokumencie HTML, umieszczony jest blok <div id="demo"></div>, który będzie wypełniony treścią za pomocą skryptu JS.

Kliknięcie w przycisk Zmiana listy (kod HTML przycisku: <button onclick="zmiana()">Zmiana listy</button>) wywoła bezparametrową funkcję zmiana() (z obsługą zdarzenia onclick dla przycisku), która utworzy i wpisze listę uporządkowaną bloku o identyfikatorze demo.

Powrót do poprzeniej postaci listy nastąpi po odświeżeniu strony w przeglądarce – kliknij Odśwież stronę (kod HTML przycisku: <button onclick="location.reload()">Odśwież stronę</button>).

Budowanie całej tabeli za pomocą poleceń JavaScript działających na obiektowym modelu dokumentu (DOM) można zobaczyć tutaj.

Lekcja 35 – 36.
Instrukcje iteracji (pętle) w języku JavaScript.
Definiowanie i stosowanie funkcji nazwanych w JavaScript.

Proste przykłady opisujące podstawowe pętle w języku JavaScript (podobne konstrukcje występują w wielu innych językach programowania, np. C, C++, C#, Java i PHP) znajdziesz tutaj (pętle: for, while i do...while).

Pętle for...of oraz for...in w JS są używane do iterowania po różnych typach danych. Opisy i przykłady znajdziesz tutaj

Do operacji na tablicy można wykorzystać metodę forEach. Ta metoda służy do iterowania (czyli przeglądania) po każdym elemencie tablicy i wykonania na nim określonej operacji (link).

Przykłady zastosowania pętli do przeglądania danych zapisanych w tablicy możesz zobaczyć tutaj.

Przykład "kredyt" – dokończenie z poprzedniej lekcji.

Pożyczono kwotę 12000 zł na okres 6 miesięcy. Stopa procentowa w skali roku wynosi 9%. Co miesiąc spłacamy ratę kapitałową (12000 : 6 = 2000 zł i odsetki (1/12 odstetk rocznych za miesiąc) od pożyczonego kapitału. Po spłacie każdej raty, zmniejsza się kwota zadłużenia i odsetki w kolejnej racie będą mniejsze.

Algorytm obliczeń przedstawia następujący skrypt (wynik obliczeń zobacz w konsoli):

<script>
  kwota = 12000;  // kwota kredytu
  stopa = 0.09;   // stopa procentowa - 9% w skali roku
  raty = 6;       // liczba miesięcznych rat  
  rata_k = kwota / raty; // rata kapitałowa
  for(i = 1; i <= 6; i++) {
    odsetki = stopa * kwota / 12;  // odsetki za miniony miesiąc
    rata = rata_k + odsetki;       // miesięczna rata - spłata kapitału i odsetek
    kwota = kwota - rata_k;        // kwota zadłużenia po spłacie raty
    console.log(i + ". " + rata_k + " + " + odsetki + " = " + rata);
  }
</script>

Lekcja 33 – 34.
Obliczenia w JavaScript i prezentowanie wyników w postaci tabeli HTML.
Obliczenia w JavaScript i wpisywanie wyników do tabeli HTML.

Ćwiczenia

Rozwiązania podanych ćwiczeń zapisz w plikach zawierających kod HTML, styl wewnętrzny CSS i skrypt JS budujący odpowiednią tabelę.

1. Tablica wartości funkcji trygonometrycznych (sinus, kosinus i tangens) dla kątów o mierze od 0° do 15° z krokiem 1°. Dokładność obliczeń do 6 miejsc po przecinku. Plik: tablica_1.html.
2. Tablica pierwiastków kwadratowych i sześciennych dla argumentów naturalnych od 2 do 16. Dokładność obliczeń do 8 miejsc po przecinku. Plik: tablica_2.html.
3. Tablica kwadratów i sześcianów liczb naturalnych od 1 do 15. Plik: tablica_3.html.

Wszystkie pliki wykonywane podczas lekcji wyślij do oceny.

Cwiczenie 1. Przykładowe rozwiązanie.

Kod skryptu JS:

<script>
  /* Funkcja zamienia miarę kąta podaną w stopniach na miarę kąta
   * wyrażoną w radianach wykorzystywaną przez funkcje trygonometryczne
   * z modułu Math w języku JavaScript.
  */
   
  function  deg2rad(deg) { // zamiana stopni na radiany
    return deg * Math.PI / 180;
  }
  
  /* Budowanie kodu HTML tablicy funkcji trygonometrycznych w zmiennej 
   * o identyfikatorze tablica.
  */
  
  tablica = "<table>";
  
  // wiersz nagłówkowy tabeli
  tablica += "<tr><th>n</th><th>sin(n)</th><th>cos(n)</th><th>tg(n)</th></tr>";
  
  // wiersze z danymi budowane za pomocą pętli
  for(n = 0; n <= 15; n++) {
    wiersz = "<tr><td>" + n + "&deg;</td>";
    wiersz += "<td>" + Math.sin(deg2rad(n)).toFixed(6) + "</td>";
    wiersz += "<td>" + Math.cos(deg2rad(n)).toFixed(6) + "</td>";
    wiersz += "<td>" + Math.tan(deg2rad(n)).toFixed(6) + "</td>";
    wiersz += "</tr>";
    tablica += wiersz;
  }
  
  tablica += "</table>";
  
  // wpisanie kodu tabeli do dokumentu HTML
  document.write(tablica);
</script>

Metoda write() obiektu document wstawia kod HTML w miejscu umieszczenia skryptu, który tę metodę wykorzystuje.

Można przygotować kontener na budowaną tabelę

  <h1>Tablica funkcji trygonometrycznych</h1>
  <div id="wynik"></div>

i wstawić kod HTML tablicy do tego kontenera za pomoą instrukcji

  document.getElementById("wynik").innerHTML = tablica;

Jeśli kontener nie jest pusty (zawiera tekst lub kod HTML)

  <div id="wynik">
    <h1>Tablica funkcji trygonometrycznych</h1>
  </div>

to można dopisać kod HTML tablicy do zawartości tego kontenera za pomoą instrukcji

  document.getElementById("wynik").innerHTML += tablica;

Metoda toFixed() służy do formatowania liczby w notacji stałoprzecinkowej z określoną liczbą cyfr po przecinku.

Cwiczenie 2. Fragment kodu skryptu budującego tabelę.

  tablica = "<table>";
  tablica += "<tr><th>n</th><th>Pierwiastek 2 st.</th>";
  tablica += "<th>Pierwiastek 3 st.</th><th>Pierwiastek 4 st.</th></tr>";
  for(n = 2; n <= 16; n++) {
    wiersz = "<tr>";
    wiersz += "<td>" + n + "</td>";
    wiersz += "<td>" + Math.sqrt(n).toFixed(8) + "</td>";
    wiersz += "<td>" + Math.cbrt(n).toFixed(8) + "</td>";
    wiersz += "<td>" + Math.pow(n, 1/4).toFixed(8) + "</td>";
    wiersz += "</tr>";
    tablica += wiersz;
  }
  tablica += "</table>";

Do obliczeń wykorzystano funkcje z modułu Math:

• sqrt(x) – pierwiastek kwadratowy z x
• qbrt(x) – pierwiastek sześcienny z x
• pow(x, y) – x do potęgi y (dla y = ¼ otrzymujemy pierwiastek czwartego stopnia z x).

Lekcja 31 – 32.
Przykłady różnych typów pól w formularzach.
Formularze HTML i programowanie obliczeń w JavaScript.

Wykaz i krótki opis elementów formularza znajdziesz na stronie Formularze w dokumencie HTML. Są tam również przykładowe formularze i skrypty JS wykonujące obliczenia na danych pobranych z pól formularza.

W zasobach MDN Web Docs znajdziesz opisy elementów HTML:

• <form> – sekcja dokumentu z interaktywnymi elementami sterującymi umożliwiającymi przesyłanie informacji.
• <input> – element wejściowy do wprowadania danych przez użytkownika. Dosiada dużą liczbę kombinacji typów danych wejściowych i atrybutów.
• <label> – opis elementu w interfejsie użytkownika.
• <textarea> – wieloliniowy (wielowierszowy) element do edycji zwykłego tekstu
• <fieldset> – element do grupowania kilku kontrolek oraz etykiet w formularzu HTML.
• <legend> – podpis zawartości swojego elementu nadrzędnego <fieldset>.
• <button> – przycisk, element interaktywny aktywowany przez użytkownika za pomocą myszy, klawiatury lub dotknięcia (na ekranach dotykowych).
• <select> – kontrolka udostępniającą menu (wybór opcji), lista rozwijalna.
• <option> – definiowanie elementu zawartego w <select>, <optgroup> lub <datalist>.
• <optgroup> – grupa opcji w elemencie <select>.
• <datalist> – zestaw elementów <option>, które reprezentują dozwolone lub zalecane opcje dostępne do wyboru w innych kontrolkach.
• <output> – element, do którego aplikacja może wstawić wyniki obliczeń lub wynik działania użytkownika.

Obliczenia z wykorzystaniem danych z formularza omówimy na ww. przykładach (linki w pierwszym akapicie) oraz rozwiązując zadanie sformułowane na poprzedniej lekcji (obliczanie przekątnej prostopadłościanu) i częściowe rozwiązanie tego zadania. Pobierz przykładowe rozwiązanie, uzupełnij kod w tym pliku (wg wskazówek podanych podczas lekcji) i wyślij plik do oceny.

Lekcja 29 – 30.
DOM - podstawowe operacje na obiekcie dokumentu HTML w JS.
Stałe i funkcje w obiekcie Math JavaScript - przykłady obliczeń.

DOM (Document Object Model) HTML – strukturalna reprezentacja dokumentu HTML w formie drzewa. Każdy element dokumentu HTML (nagłówek, paragraf, obraz, link, formularz ...) jest reprezentowany jako obiekt w drzewie DOM. Elementy, ich właściwości i treści są reprezentowane jako węzły w tym drzewie.

Przykładowe drzewo DOM i kod HTML:

Wierzchołkiem drzewa jest korzeń (root). Każdy węzeł (node) posiada swojego rodzica (parent) i może mieć nieograniczoną liczbę dzieci (child). Węzeł bez dzieci to liść (leaf). Węzły posiadające tego samego rodzica nazywamy rodzeństwem (sibling).

Nawigowanie po modelu obiektowym dokumentu (DOM):

Ćwiczenie 1.

Naciskając klawisz F12 (w większości przeglądarek internetowych) otworzysz tzw. Inspektora obiektów, który wyświetla strukturę drzewa DOM, style CSS oraz umożliwia wykonywanie i debugowanie kodu JavaScript na stronie internetowej. Zobacz DOM tej strony.

DOM i JavaScript umożliwiają dodawanie nowych elementów do strony i zmianę ich stylu, przechwytywanie zdarzeń wywoływanych przez użytkownika i dynamiczne reagowanie na te zdarzenia (strony stają się interaktywne).

Podstawowe metody dostępu do obiektów (elementów) dokumentu:

• element = document.getElementById('elementId') – pobiera element o podanym atrybucie.
• element = document.getElementsByClassName('className') – pobiera kolekcję elementów o podanej nazwie klasy.
• element = document.getElementsByTagName('tag') – pobiera kolekcję elementów o podanej nazwie znacznika.
• element = document.getElementsByName('name') – pobiera kolekcję elementów o podanej wartości atrybutu name.
• element = document.querySelector('selektor') – pobiera pierwszy element pasujący do podanego selektora CSS.
• element = document.querySelectorAll('selektor') – pobiera listę wszystkich elementów pasujących do podanego selektora CSS.

Właściwości elementu i przechodzenie przez drzewo DOM – dostęp do węzłów (nadrzędnych, podrzędnych i rodzeństwa):

• element.parentNode – dostęp do węzła elementu nadrzędnego.
• element.childNodes – pobierz kolekcję węzłów podrzędnych.
• element.firstChild – pobierz pierwszy węzeł podrzędny.
• element.lastChild – pobierz ostatni węzeł podrzędny.
• element.nextSibling – pobierz następny węzeł rodzeństwa.
• element.previousSibling – pobierz poprzedni węzeł rodzeństwa.

Przejście do określonych elementów:

• element.firstElementChild – pobierz pierwszy element potomny.
• element.lastElementChild – pobierz ostatni element potomny.
• element.nextElementSibling – pobierz następny element rodzeństwa.
• element.previousElementSibling – pobierz poprzedni element rodzeństwa.

Metody i właściwości obiektu matematycznego Math

Wybrane wzory matematyczne

Lekcja 27 – 28.
Encje HTML – kodowanie znaków specjalnych.
JavaScript – tablice, pętle i budowanie kodu HTML za pomocą skryptów.

Przykład 1.

Znaki ważne dla języka HTML, służą do kodowania znaczników (< i >), zapisywania wartości atrybutów w znacznikach (cudzysłowy pojedyncze ' i podwójne ") oraz znak ampersand (&) do kodowania encji. Umieszczenie tych znaków w tekście wymaga zastosowanie zastosowania encji HTML.

Encja nazwana określa wybrany znak za pomocą zdefiniowanej nazwy i rozpoczyna się znakiem ampersand oraz kończy średnikiem.

&nazwa_encji;

Encje HTML5 uporządkowane alfabetycznie znajdziesz tutaj. Inne przykłady możesz zobaczyć na tej stronie: 1, 2 i 3 oraz w wielu innych miejscach.

Oficjalny i aktualny (HTML Living Standard — Last Updated 24 December 2023) wykaz nazw encji HTML: § 13.5 Named character references.

Przykład 2. Kilka przydatnych encji HTML

Przykład 3. Encje kodowane – kod dziesiętny (utf-8)

Za pomocą kodu dziesiętnego można uzyskać dowolny znak z zestawu UTF-8:

&#kod_dziesiętny;

Przykład 4. Encje kodowane – kod szesnastkowy (utf-8)

Za pomocą kodu szesnastkowego można uzyskać dowolny znak z zestawu UTF-8:

&#xkod_szesnastkowy;

Przykład 5. Symbole bierek szachowych

Jak zakodować bierki szchowe i zbudować z nich diagram pozycji szachowej możesz zobaczyć tutaj.

Przykład 5. Struktury danych – tablica JavaScript

  // nazwy liter greckiego alfabetu
  greckie = ["alpha", "beta", "gamma", "delta"];
  // nazwy bierek szachowych, 9812 - kod pierwszego znaku
  bierki = [9812, "Król", "Hetman", "Wieża", "Goniec", "Skoczek", "Pionek"];
  // kody i nazwy wybranych encji HTML (strzałki)
  arrows = [
    ["olarr", "Strzałka okrągła otwarta, skierowana przeciwnie do ruchu wskazówek zegara."],
    ["orarr", "Strzałka okrągła otwarta, skierowana zgodnie z ruchem wskazówek zegara."],
    ["lArr", "Podwójna strzałka skierowana w lewo."],
    ["rArr", "Podwójna strzałka skierowana w prawo."],
    ["uArr", "Podwójna strzałka skierowana w górę."],
    ["dArr", "Podwójna strzałka skierowana w dół."]
  ];

Przykład 6. Pętla typu for i budowanie listy greckich liter

Przykład 7. Pętla typu while i bierki szachowe

Przykład 8. Strzałki - tabela z wybranymi encjami HTML

W przykładzie wykorzystano metodę forEach() dla obiektów typu Array i kolekcji (obiektów NodeList).

Budowanie tabeli – kod HTML generowany przez skrypt JS:

Styl tabeli – zmiana CSS za pomocą JavaScript:

Ćwiczenia z lekcji:

Grupa 1. Ćwiczenie 1. Polskie znaki diakrytyczne.

Grupa 1. Ćwiczenie 2. Budowanie tabeli w JS.

Grupa 2. Ćwiczenie 1. Litery greckiego alfabetu.

Grupa 2. Ćwiczenie 2. Budowanie tabeli w JS.

Lekcja 25 – 26.
Formularze HTML – pobieranie danych z pól formularza w JavaScript.
Formularze, zdarzenia i proste obliczenia w JavaScript.

Przykład 1. (grupa 1.)

Przykład 2. (grupa 2.)

Lekcja 23 – 24.
Osadzanie skryptów JS w dokumencie HTML – przykłady gotowych skryptów.
Omówienie zadań domowych – analiza kodu i poprawianie błędów.

Skrypty zapisane w języku JavaScript umieszczamy w kodzie HTML za pomocą znacznika <script></script> w sekcji <head></head> lub <body></body> dokumentu.

Kod skryptu może być zapisany w treści znacznika, np.

    <script>
        // alert("Komunikat wysłany przez skrypt. Kliknij przycisk [OK]!");
        console.log("Komunikat wysłany przez skrypt.");
    </script>

albo (te dwa sposoby wzajemnie się wykluczają) w zewnętrznym pliku tekstowym, np. today.js

    <script src="today.js"></script>

Oto kod skryptu zapisany w tym pliku:

    var data = new Date();
    document.write("<h4>" + data + "</h4>");

W podanym przykładzie, plik today.js znajduje się w tym samym folderze co bieżący dokument HTML. Użyta metoda document.write() wpisuje tekst w miejscu wpisania (uruchomienia) skryptu.

Często w skrypcie definiuje się funkcje, które następnie można wykorzystać w tym samym skrypcie lub innych skryptach (przykład schematyczny).

    <script>
        // definicja funkcji nazwanej
	function nazwa_funkcji(lista_argumentów) {
	    /* kod funkcji, przetwarzanie danych */
	    return wynik; // opcjonalnie
	}

        // wywołanie funkcji zwracającej wynik
        wynik = nazwa_funkcji(lista_wartości_argumentów);

        // wywołanie funkcji niezwracającej wyniku
        nazwa_funkcji(lista_wartości_argumentów);
    </script>

Przykład 1. JavaScript color picker.

Pobierz przykład do analizy.

Więcej informacji znajdziesz na stronie https://jscolor.com/.

Przykład 2. MathJax i wzory matematyczne.

Pobierz przykład do analizy, uzupełnij niedokończone wzory i wyślij plik do oceny.

Więcej informacji znajdziesz na stronie Wyrażenia matematyczne w dokumencie HTML.

Rozwiązania wybranych zadań domowych

Przykłady podam na lekcji.

Pobierz plik do zadań z SVG (link).

Lekcja 21 – 22.
Szablon prostej witryny internetowej.
Skrypt menu i wspólny styl dla stron witryny.

Zastosowano szablon prostej strony z podziałem sekcji body na cztery bloki: nagłówek, menu witryny, główny blok i stopkę, zrealizowanym za pomocą znacznika <div>oraz stylu CSS. Identyfikatory bloków pozwalają na ustalenie dla nich indywidualnych właściwości stylu CSS.

Bloki menu witryny i główny blok zajmują odpowiednio 25% i 75% szerokości strony i są położone obok siebie, pomiędzy nagłówkiem i stopką. Reguła CSS div { outline: solid 1px red; } pozwala na zobaczenie układu bloków, a pozostałe reguły są niezbędne do realizacji tego układu bloków.

Skrypt menu.js, osadzony za pomocą znacznika <script src="menu.js"></script>, wpisuje do dokumentu HTML kod menu strony (plik menu.js należy uzupełnić) w miejscu jego wystąpienia.

<!DOCTYPE html>
<html lang='pl-PL'>
<head>
  <title>Szablon</title>
  <meta charset='utf-8'>
  <link rel="stylesheet" href="styl.css">
</head>
<body>
  <div id="baner">Nagłówek (baner)</div>
  <div id="menu">
    <script src="menu.js"></script>
  </div>
  <div id="main">Główny blok</div>
  <div id="stopka">Stopka</div>
</body>
</html>

  document.write("Menu strony");

div { outline: solid 1px red; }
#menu {
  width: 25%;
  float: left;
}
#main {
  width: 75%;
  float: left;
}
#stopka {
  clear: left;
}

Widok dokumentu w przeglądarce

Przykłady do analizy

• Witryna   LaTeX i MathJax
• Elementy graficzne i styl CSS
• Wpływ stylu CSS na wzajemne położenie bloków (animacja)

Przykłady menu witryny internetowej

Przykładowa witryna składa się z czterech plików: index.html, strona1.html, strona2.html, strona3.html. Pliki witryny zbudowane są według wcześniej przedstawionego szablonu.

Kod HTML wpisany w odpowiednim miejscu każdej strony (kłopotliwe w przypadku zmian):

<a href="index.html">Strona główna</a>
<a href="strona1.html">Strona 1.</a>
<a href="strona2.html">Strona 2.</a>
<a href="strona3.html">Strona 3.</a>

Kod <script src="menu.js"></script> wpisany w odpowiednim miejscu każdej strony i plik menu.js wspólny dla tych stron. Wykorzystanie (obecnie niezalecanej) metody document.write():

document.write("<a href=\"index.html\">Strona główna</a>");
document.write("<a href=\"strona1.html\">Strona 1.</a>");
document.write("<a href=\"strona2.html\">Strona 2.</a>");
document.write("<a href=\"strona3.html\">Strona 3.</a>");

lub wykorzystanie zmiennej JS do budowania kodu HTML:

let menu = "";
menu += "<a href=\"index.html\">Strona główna</a>";
menu += "<a href=\"strona1.html\">Strona 1.</a>";
menu += "<a href=\"strona2.html\">Strona 2.</a>";
menu += "<a href=\"strona3.html\">Strona 3.</a>";
document.write(menu);

Element (obiekt) HTML <div id="menu"></div> nie zawiera żadnego kodu lub tekstu, natomiast kod skryptu <script src="menu.js"></script> jest wpisany za tym obiektem w kodzie każdej strony (np. przed znacznikiem </body>), plik menu.js jest wspólny dla tych stron i wykonuje operacje na obiekcie DOM przeglądarki internetowej:

let menu = "";
menu += "<a href=\"index.html\">Strona główna</a>";
menu += "<a href=\"strona1.html\">Strona 1.</a>";
menu += "<a href=\"strona2.html\">Strona 2.</a>";
menu += "<a href=\"strona3.html\">Strona 3.</a>";
document.getElementById("menu").innerHTML = menu;

Ćwiczenie. Na podstawie powyższego materiału, zbuduj witrynę złożoną: z czterech stron (index.html, strona1.html, strona2.html, strona3.html), wspólnego pliku stylu i wybranego skryptu menu. W bloku głównym każdej strony umieść nagłówek drugiego stopnia o treści identyfikującej tę stronę. Wszystkie pliki spakuj do archiwum szablon.zip.

Wynik pracy (plik szablon.zip) prześlij do oceny.

Rozwiązanie ćwiczenia: do pobrania.

Lekcja 19 – 20.
Znacznik <div> - podział strony na bloki.
Menu witryny internetowej i wspólny styl dla stron witryny.

Szablon prostej strony z podziałem sekcji body na trzy bloki: nagłówek, główny blok i stopkę, zrealizowanym za pomocą znacznika <div>. Identyfikatory bloków pozwalają na ustalenie dla nich indywidualnych właściwości stylu CSS.

Nagłówek i stopka mają wysokość po 100px, a wysokość głównego bloku jest obliczana przy pomocy funkcji calc(). Elementy strony wypełniają całe okno przeglądarki, niezależnie od jego wymiaru.

<!DOCTYPE html>
<html lang='pl-PL'>
<head>
<title>11 XI</title>
<meta charset='utf-8'>
<meta name="author" content="...">
<style>
  * { margin: 0; }
  #baner, #stopka { height: 100px; background-color: lightgray; }
  #main { height: calc(100vh - 200px); }
</style>
</head>
<body>
  <div id="baner">Nagłówek (baner)</div>
  <div id="main">Główny blok</div>
  <div id="stopka">Stopka</div>
</body>
</html>

Podział strony na bloki jest widoczny, ponieważ szary kolor nagłówka i stopki jest inny od koloru głównego bloku,

Ćwiczenie

Skorzystaj z podanego szablonu i utwórz stronę podobną do przedstawionej na rysunku.

Wykonana strona powinna spełniać następujące warunki:

• Dokument jest zapisany w pliku 11XI.html, który zawiera wewnętrzny arkusz stylu CSS.
• Nagłówek (baner) i stopka mają wysokość 100px, zajmują całą szerokość okna i ich zawartość jest ustawiona centralnie między marginesami.
• Baner zawiera dwa nagłówki (pierwszego i drugiego stopnia) o treści i kolorach widocznych na rysunku oraz wysokości 50px (razem tworzą flagę biało-czerwoną).
• Stopka zawiera dwa akapity o wysokości 50px (również tworzące flagę). Tekst w akapitach ustawiony jest centralnie.
• Pierwszy akapit stopki (z białym tłem) zawiera trzy linki do stron w sieci, związnych tematycznie z Narodowym Świętem Niepodległości.
• Drugi akapit stopki zawiera znak ©, datę oraz imię i nazwisko autora pracy (białe litery na czerwonym tle). Rozmiar fontu 1.2em.
• Główny blok ma jasne tło (inne niż białe) i ciemne (czarne) litery.
• Dla głównego bloku zastosowano wewnętrzny margines: górny i dolny 10px, prawy i lewy 10% szerokości okna.
• Treść głownego bloku opracuj samodzielnie na podstawie informacji wyszukanych w sieci.
• Nie pobieraj zdjęć z Internetu. Wstaw je do dokumentu podając w atrybucie src znacznika img ich adres URI.

Wynik pracy (plik 11XI.html) prześlij do oceny.

Lekcja 17 – 18.
Hipertext – linki w dokumentach HTML.
Formatowanie linków za pomocą stylu CSS.

Linki do stron umieszczonych na tym samym serwerze

Linki do stron umieszczonych na tym innym serwerze

Uwaga! Wszystkie pliki otwierają się w nowym oknie (atrybut target="_blank")

Linki w postaci przycisków - elementy graficzne i CSS

Kod HTML	Widok w przeglądarce
<a href="strona.html"><img src="images/przycisk.png" alt="przycisk"></a>
<a href="https://buttonoptimizer.com/" target="_blank">Generator przycisków online</a>	Generator przycisków online
<a href="strona.html" class="mybutton">Strona</a>	Strona

Definicja stylu klasy mybutton w CSS:

.mybutton {
  border: 1px solid darkgreen;
  border-radius: 10px 0;
  background-color: lightgreen;
  color: darkgreen;
  padding: 5px;
  text-decoration: none;
  font-family: verdana;
}
.mybutton:hover {
  background-color: green;
  color: yellow;
}
.mybutton:active {
  border-radius: 0 10px;
  color: white;
}

Lekcja 15 – 16.
Grafika wektorowa SVG w dokumencie HTML..
Rysowanie za pomocą znaczników grafiki SVG.

SVG (ang. Scalable Vector Graphics)

– format dwuwymiarowej grafiki wektorowej stworzony w 1999 przez konsorcjum W3C.

Obrazy SVG można tworzyć za pomocą dowolnego edytora tekstu. Wygodniej jest tworzyć obrazy SVG za pomocą programu do Inkscape.

Omówienie znaczników rysujących i przykłady znajdziesz w tutorialu online.

Kilka przykładów do analizy.

Przykład 1. Symbol Yin Yang

  <svg height="400" width="400">
    <circle cx="200" cy="200" r="199" fill="black" />
    <rect x="200" y="0" width="200" height="400" fill="white" />
    <circle cx="200" cy="100" r="100" fill="white" />
    <circle cx="200" cy="100" r="25"  fill="black" />
    <circle cx="200" cy="300" r="100" fill="black" />
    <circle cx="200" cy="300" r="25"  fill="white" />
    <circle cx="200" cy="200" r="199" stroke="black" stroke-width="2" fill="none" />
  </svg>

Analiza kodu – zobacz etapy rysowania lub wykorzystanie ścieżek w SVG.

Przykład 2. Znak drogowy C-5

  <svg height="400" width="400">
    <circle cx="200" cy="200" r="199" fill="blue" />
    <polygon points="200,50 275,135 235,135 235,325 160,325 160,135 125,135" style="fill:white;" />
  </svg>

Przykład 3. Prostokąt z przekątnymi

  <svg height="400" width="600" style="background-color: lightgray;">
    <rect x="50" y="50" width="500" height="300" style="fill:white;stroke:black;stroke-width:2;" />
    <line x1="50" y1="50" x2="550" y2="350" stroke-dasharray="8,8" style="stroke:rgb(255,0,0);stroke-width:2" />
    <line x1="50" y1="350" x2="550" y2="50" stroke-dasharray="8,8" style="stroke:rgb(255,0,0);stroke-width:2" />
    <text x="25" y="375" fill="black">A</text>
    <text x="560" y="375" fill="black">B</text>
    <text x="560" y="40" fill="black">C</text>
    <text x="25" y="40" fill="black">D</text>
    <text x="295" y="190" fill="black">O</text>
  </svg>

Lekcja 13 – 14.
Przygotowanie zdjęć i rysunków do publikowania w dokumencie HTML.
Paint 3D – tworzenie grafiki z przeźroczystym tłem.

Kilka porad do tematu z lekcji 13.:

• Przygotowanie zdjęć do publikacji na stronie WWW
• Jak przygotować zdjęcia na stronę www? Kluczowe porady
• Jak przygotować zdjęcia na stronę internetową. Rozmiar i waga robią różnicę.
• Jak przygotować zdjęcia na stronę internetową?
• Zdjęcia i grafiki na stronę internetową – jak je przygotować?
• JAK PRZYGOTOWAĆ ZDJĘCIA NA STRONĘ INTERNETOWĄ
• Rekomendowane wymiary zdjęć na stronę internetową UpMenu

Aplikacje do obróbki grafiki:

• Smart WebP, PNG and JPEG compression (online)
• Paint.net (download)
• Photopea (online)
• GIMP - GNU IMAGE MANIPULATION PROGRAM

Przeglądarki plików graficznych:

• Image Viewer - Image resizer, batch image converter and more
• 8 najlepszych darmowych przeglądarek zdjęć dla Windowsa

Aplikacje w systemie Windows:

• Paint – ...
• Paint 3D – ... Zadanie do wykonania: Pobierz plik avatar.jpg i instrukcję avatar.pdf. Plik graficzny przeskaluj do wymiaru 100px x 100px, utwórz przeźroczyste tło i zapisz w formacie obsługującym przeźroczystość (png lub gif). Utwórz stronę avatar.html prezentującą efekt Twojej pracy. Pliki wchodzące w skład przykładu spakuj do archiwum avatar.zip i wyślij do oceny.
• Zdjęcia – ...

Lekcja 11 – 12.
Elementy graficzne na stonie internetowej. Typy plików graficznych.
Reguły CSS formatujące elementy graficzne w dokumencie HTML.

Znacznik <img src="..." alt="..."> – atrybut src określa nazwę pliku graficznego w bieżącym katalogu lub ścieżkę dostępu (względną albo bezwzględną) i nazwę pliku umieszczonego w innym katalogu. Atrybut alt zawiera tekst alternatywny wyświetlany wtedy, gdy nie można (z różnych powodów) wyświetlić grafiki.

Zobacz przykład – plik 017.html jest poprawny, natomiast plik 017a.html zawiera zbędne i niezalecane w HTML5 zamknięcia tzw. znaczników nieparzystych (pustych). Sprawdź te pliki za pomocą aplikacji validatora.

W znaczniku img można stosować atrybuty width i height. Podanie jednego z nich spowoduje, że drugi wymiar obrazu zostanie obliczony z zachowaniem proporcji wymiarów w oryginalnym pliku. Podanie obu wymiarów może doprowadzić do zniekształcenia obrazu. Zmiast atrybutów można stosować właściwości width i height stylu CSS do ustalenia wymiaru grafik na stronie (zobacz przykład).

Właściwość border stylu CSS (granica obramowanie) może być zastosowana do wyeksponowania obrazu na stronie, a właściwość border-radius pozwala zmienić prostokątny kształt obrazu na zaokrąglony, okrągły lub owalny (zobacz przykłady: 1., 2. i 3..

Otwórz stronę Wiosna w ogrodzie i źródło tej strony. Zwróć uwagę na styl strony (graficzne tło dokumentu) i styl online zastosowany dla w znacznikach img.

Element <figure> w HTML5 służy do oznaczenia zdjęcia (elementu graficznego) w dokumencie, a element <figcaption> definiuje podpis tego zdjęcia (przykład). Inne przykłady zastosowania znacznika <figure> znajdziesz tutaj.

Formaty plików graficznych

JPEG (Joint Photographic Experts Group)

– najpopularniejszy format plików graficznych ze stratną kompresją danych. Format używany w sieci internet i w aparatach cyfrowych. Rozszerzenie nazwy pliku jpg lub jpeg.

PNG (Portable Network Graphics)

– popularny format grafiki internetowej z obsługą kanału alfa (przeźroczystość obrazu).

GIF (Graphics Interchange Format)

– popularny format grafiki internetowej. Posiada możliwość tworzenia animacji (z wielu obrazów przechowywanych w hednym pliku. Obsługuje przeźroczystość monochromatyczną (pełna przeźroczystość określonego koloru).

WebP

– format plików graficznych opracowany przez Google w celu zastąpienia starszych formatów: JPEG, PNG i GIF. Technologia WebP ma za zadanie zmniejszenie rozmiaru obrazów.

Lekcja 9 – 10.
HTML – prezentowanie informacji w postaci tabeli.
Reguły CSS do formatowania tabeli.

Przykłady do analizy:

• Tabela w dokumencie HTML (link).
• Tabela w dokumencie HTML – przykład stylu (link).
• Tabela i styl CSS (link).

Ćwiczenie 1. Zbuduj tabelę z tytułem Mój plan lekcji na poniedziałek zawierającą trzy kolumny wg. schematu przedstawionego na rysunku. Do tabeli zastosuj styl wewnętrzny. Wynik pracy zapisz do pliku plan.html i wyślij do oceny.

W znaczniku otwierającym tabelę <table border> umieszczono jedynie atrybut, który odpowiada za utworzenie obramowania tabeli i wszystkich jej komórek. Domyślnie, pomiędzy komórkami i granicą tabeli, ustawiony jest odstęp 2px i komórki są odseparowane. Nie jest zalecane używanie atrybutu border w znaczniku <table>. Należy stosować styl CSS.

Zastosowano następujący styl CSS (dla elementów tej tabeli):

	caption {
		margin-bottom: 15px;
		font-size: 1.2em;
		font-weight: bold;
	}
	table {
		border-collapse: collapse;
		border: 1px solid #aaa;
		margin: 0 auto;
	}
	th {
		background-color: #ddd;
	}
	th, td {
		padding: 12px;
		border: 1px solid #aaa;
	}

W kodzie HTML tej tabeli, zwóć uwagę na znacznik określający tytuł tabeli i zróżnicowanie znaczników definiujących komórki tabeli.

	<table>
	  <caption>Mój plan lekcji na poniedziałek</caption>
	  <tr>
		<th>Nr lekcji</th>
		<th>Godzina</th>
		<th>Przedmiot</th>
	  </tr>
	  <tr>
		<td>1.</td>
		<td>8:00 - 8:45</td>
		<td>Witryny i aplikacje internetowe</td>
	  </tr>
	  <tr>
		<td>2.</td>
		<td>8:50 - 9:35</td>
		<td>Witryny i aplikacje internetowe</td>
	  </tr>
	  <!-- tu wstaw pozostałe wiersze planu lekcji -->
	</table>

Lekcja 7 – 8.
HTML – prezentowanie informacji w postaci list.
Reguły CSS formatujące listy.

Lista definicyjna (ang. definition list)

Lista jest zbudowana za pomocą znacznika <dl> i jego zamknięcia </dl>. Element listy ujęty w znaczniki <dt> i </dt> (ang. definition term) zawiera definiowane pojęcie, natomiast elementy w znacznikach <dd> i </dd> (ang. definition description) opisują definiowane pojęcie.

Jedna lista definicyjna może zawierać definicje kilku pojęć.

  <dl>
    <dt>Romb</dt>
    <dd>czworokąt o bokach równej długości.</dd>
    <dt>Kwadrat</dt>
    <dd>czworokąt foremny ... </dd>
  </dl>

Lista nieuporządkowana (ang. unordering list)

Lista jest zbudowana za pomocą znacznika <ul> i jego zamknięcia </ul>. Elementy listy są ujęte w znaczniki <li> i </li> (ang. list item).

  <ul>
    <li>Bieszczady</li>
    <li>Beskid Niski</li>
    <li>Beskid Żywiecki</li>
  </ul>

Lista uporządkowana (ang. ordering list)

Lista jest zbudowana za pomocą znacznika <ol> i jego zamknięcia </ol>. Elementy listy są ujęte w znaczniki <li> i </li> (ang. list item).

  <ol>
    <li>Bieszczady</li>
    <li>Beskid Niski</li>
    <li>Beskid Żywiecki</li>
  </ol>

Zagnieżdżanie list

Podczas budowania listy możemy w elemencie <li> ... </li> (lub <dd> ... </dd>) umieścić definicję innej listy. Powstają w ten sposób listy wielopoziomowe. Można łączyć w ten sposób różne rodzaje list.

<ul>
  <li>Bieszczady
    <ul>
      <li>Tarnica 1346 m</li>
      <li>Halicz 1333 m</li>
    </ul>
  </li>
  <li>Beskid Niski
    <ul>
      <li>Lackowa 997 m</li>
      <li>Jaworzynka 869 m</li>
      <li>Chełm 780 m</li>
    </ul>
  </li>
  <li>Beskid Żywiecki</li>
</ul>

CSS – formatowanie list

Właściwość stylu CSS: list-style.

Składnia CSS

list-style: list-style-type list-style-position list-style-image|initial|inherit;
initial – stosuje do elementu początkową (lub domyślną) wartość właściwości
inherit – określa, że właściwość powinna dziedziczyć swoją wartość z elementu nadrzędnego
Wartość domyślna: list-style: disc outside none;

Określenie typu listy: list-style-type: value; – zobacz i zanotuj najważniejsze wartości.

Pozycja punktora w liście: list-style-position: value; – zobacz i zanotuj najważniejsze wartości.

Własny punktor w liście: list-style-image: value; – zobacz i zanotuj jak to zrobić.

Przykład 1. Lista nieuporządkowana i styl CSS

Przykład 2. Lista uporządkowana i styl CSS

Przykład 3. Lista definicyjna i styl CSS

Lekcja 5.
CSS - kaskadowe arkusze stylów. Styl lokalny i wewnętrzy w dokumencie HTML.

HTML (HiperText Marking Language)

– język znaczników stosowany do tworzenia dokumentów hipertekstowych. HTML buduje strukturę dokumentu i wypełnia ją treścią.

CSS (Cascading Style Sheets)

– język używany do stylizacji dokumentu HTML. CSS opisuje sposób wyświetlania elementów (obiektów) HTML.

Style CSS możemy podzielić na:

• Domyślny styl przeglądarki – reguły CSS są zapisane w kodzie aplikacji przeglądarki internetowej.
• Styl liniowy (ang. inline style) – reguły dodawane za pomocą atrybutu style wewnątrz znacznika otwierającego i dotyczące wyłącznie tego znacznika i znaczniów w nim zagnieżdżonych:
  
  • <body style="background-color: lightgreen;"> ... <body> – kolor tła całej strony
  • <h1 style="color: red; text-align: center;">Nagłówek<h1> – czerwony i wyśrodkowany nagłówek.
• Styl wewnętrzny – wewnętrzny arkusz stylów (ang. document style sheet) wstawiamy zawsze w części nagłówkowej dokumentu (pomiędzy znacznikami <head> a </head>) w znacznikach <style> ... </style>:

    <style>
      body {
        background-color: lightgreen;
      }
      h1 {
        color: red; 
        text-align: center;
      }
    </style>
  

• Styl zewnętrzny – zewnętrzny arkusz stylów (ang. external style sheets) zapisujemy w pkiku tekstowym z rozszerzeniem .css i włączmy w części nagłówkowej dokumentu, w znaczniku:

    <link rel="stylesheet" href="nazwa_pliku.css">
  

  Reguły CSS zapisujemy tak samo jak w stylu wewnętrznym. Styl zewnętrzny CSS (plik) można wykorzystać (linkować) do wielu dokumentów (plików) HTML.

Przykład 1. CSS – elementy arkusza stylu (pliki od 001.html do 009.html).

Przykład 2. CSS – elementy arkusza stylu (2) (pliki od 001.html do 005.html).

Link do kursu CSS lub przewodnika konsorcjum W3C.

Lekcja 6.
Reguły CSS zmieniające kolory i format tekstu.

Przykład 1. Zmiana kolorów tła i pierwszego planu (tekstu).

Przykład 2. Wyrównanie tekstu w nagłówkach i akapitach.

Przykład 3. Transformacje tekstu w nagłówkach i akapitach.

Lekcja 3.
Podstawowe znaczniki języka HTML i szablon prostego dokumentu.

Materiał do lekcji (pliki od 001.html do 008.html). Minimalny, poprawny kod dokumentu HTML to 007.html – pusta strona. Komentarze w pliku 008.html sugerują jak wypełniać ten szablon.

Deklaracja typu dokumentu

Deklaracja typu dokumentu HTML (doctype) jest specjalnym elementem w kodzie HTML (nie jest znacznikiem!), który informuje przeglądarkę internetową o wersji języka HTML użytej w dokumencie. Deklaracja doctype pomaga prawidłowo interpretować i renderować stronę internetową zgodnie z odpowiednimi standardami HTML.

Deklaracja doctype jest umieszczana na początku dokumentu HTML (w pierwszym wierszu) i dla najnowszej wesji języka HTML5 ma postać <!DOCTYPE html>.

Znacznik

Znacznik w języku HTML jest ustalonym słowem zapisanym pomiędzy znakami < i >. To słowo nie jest wyświetlane w przeglądarce internetowej, lecz interpretowane jako polecenie decydujące o sposobie wyświetlania treści dokumentu.

Znacznik podwójny składa się ze znacznika otwierającego <znacznik> i znacznika zamykającego </znacznik> oraz tekstu lub kodu HTML zawartego między nimi. Tylko znacznik otwierający może zawierać dodatkowe informacje, tzw. atrybuty:

<title>Tytuł strony</title>

<html lang="pl-PL">
	... ten znacznik obejmuje całą treść dokumentu HTML, atrybut lang 
	informuje o języku, w którym zapisana jest treść strony ...
</html>

<a href="strona.html">opis linku</a>

Znacznik podjedynczy nie posiada odpowiadającego mu znacznika zamykającego, więc nie zawiera w sobie tekstu (kodu). Jego obecność wywołuje w przeglądarce określony efekt lub za pomocą atrybutów przekazuje do przeglądarki dodatkowe informacje:

... informacje dla przeglądarki w sekcji <head> ... </head>
<meta charset="utf-8">
<meta name="author" content="Adam Adamski">

... treść dokumentu (strony) w sekcji <body> ... </body>
<img src="obraz.jpg" alt="opis grafiki">
<br>
<hr>

Komentarz w HTML

Komentarze są używane głównie w celu dokumentowania kodu, wyjaśniania pewnych elementów strony lub do tymczasowego wyłączania pewnych części kodu bez ich usuwania.

Komentarz (nie jest znacznikiem języka HTML) zaczyna się od znaku <!-- i jest zakończony znakiem -->. Przykład komentarza:

<!-- To jest przykład komentarza w HTML. -->

Minimalny, poprawny szablon dokumentu HTML

<!DOCTYPE html>
<html lang='pl-PL'>
  <head>
    <title>Tytuł</title>
    <meta charset='utf-8'>
  </head>
  <body>
  </body>
</html>

Lekcja 4.
Publikowanie tekstu na stronie WWW (w dokumencie HTML).

Materiał do lekcji (pliki od 009.html do 011.html). Omówione sa tam elementy blokowe: nagłówki od 1. do 6. stopnia i akapity tekstu (paragrafy).

Znaczniki formatujące tekst:

Lekcja 1.
Informacje o przedmiocie, regulamin pracowni i zasady oceniania.

Materiał do lekcji.

Lekcja 2.
Jak powstaje strona internetowa - podstawowe pojęcia.

Pojęcia do zapamiętania:

• WWW - World Wide Web (Wikipedia)
• HTTP - Hypertext Transfer Protocol (Wikipedia)
• HTTPS - Hypertext Transfer Protocol Secure (Wikipedia)
• FTP - File Transfer Protocol (Wikipedia)
• FTPS - FTP Secure(Wikipedia)
• HTML - HyperText Markup Language (Wikipedia)
• XHTML - Extensible HyperText Markup Language Wikipedia)
• HTML5 Wikipedia)
• CSS - Cascading Style Sheets (Wikipedia)
• JavaScript, JS (Wikipedia)
• PHP Hypertext Preprocessor (Wikipedia)
• MySQL (Wikipedia)
• MariaDB (Wikipedia)
• SQL - Structured Query Language (Wikipedia)