Temat: Źródła informacji turystycznej - galeria w dokumencie HTML
Strony internetowe tworzymy, korzystając z języka HTML. Do pisania kodu w tym języku nie będzie ci potrzebny dostawca usług internetowych ani nawet podłączenie do Internetu. Aktualnie powszechnie stosowanym standardem jest HTML5.
Dokument HTML to zwykły plik tekstowy, który możesz tworzyć i modyfikować praktycznie w każdym edytorze tekstu. Dla systemów Windows i Linux może to być wspomniany przed chwilą - Notepad++, dla systemu MacOS – Text Edit czy Sublime Text, dla systemu Android – DroidEdit.
JavaScript (w skrócie "JS") jest pełnoprawnym dynamicznym językiem programowania, który po dodaniu
do dokumentu HTML, może dostarczyć dynamiczną zawartość do stron internetowych. Został stworzony przez Brendan'a Eich,
współtwórcę projektu Mozilla, Mozilla Foundation i Mozilla Corporation.
JavaScript jest niezwykle wszechstronny. Możesz zacząć z czymś małym, z karuzelami, galeriami obrazków, zmiennymi układami strony i odpowiedziami na kliknięcia przycisków.
Przykład 1. "hello world"
JavaScript jest jedną z najbardziej żywych technologii internetowych i kiedy zaczniesz się nią dobrze posługiwać to twoje witryny internetowe wejdą w nowy wymiar mocy i kreatywności.
Utwórz nowy pusty plik o nazwie main.js i wklej do niego zawratość.
var myHeading = document.querySelector('h1');
myHeading.textContent = 'Hello world!';
var myHeading = document.querySelector('h1');
myHeading.textContent = 'Hello world!';
<body bgcolor="#99ffcc">
<center>
<h1>Witamy na stronie internetowej!</h1>
<img src="https://jaki-jezyk-programowania.pl/img/technologies/javascript.png" alt="">
</center>
</body>
</html>
i wprowadź następujący element w nowej linii, tuż przed zamknięciem tagu </body>:
<script src="main.js"></script>
W zasadzie, ten kod działa identycznie, jak element w CSS — dodaje JavaScript do strony, więc może mieć wpływ na HTML (wraz z CSS i czymkolwiek innym na stronie).
Na koniec upewnij się, że pliki HTML i JavaScript są zapisane, a następnie załaduj index.html w przeglądarce.
Powinieneś zobaczyć coś takiego:
Przykład 2. "Wyskakujący obrazek popup"
Utwórz nowy pusty plik o nazwie popup.js i wklej do niego zawratość.
Na koniec upewnij się, że pliki HTML i JavaScript są zapisane, a następnie załaduj index2.html w przeglądarce.
Efekt:
Ćwiczenie:
Wykorzystując podstawowe znaczniki HTML stwórz tabelę z grafiką wg wzoru poniżej. Proszę podmienić zdjęcia samochodów na inne oraz dołożyć 4 wiersz w tabeli galerii.
Pamiętaj, aby nazwa strony była zapisana z rozszerzeniem .html tak, aby integrowała się z domyślną przeglądarką.
Linki do zdjęć można pobrać można pobrać ze strony https://www.pexels.com/pl-pl/
