Aplikacje internetowe 1 (AI1) – laboratorium nr 1

Bootstrap v5.3

Początek laboratorium:

• pobrać oraz uruchomić skrypt Instalacja rozszerzeń VSCode.bat,

• pobrać na pulpit archiwum Lab001_AI1_start.zip w którym umieszczone są pliki potrzebne do wykonania zadań oraz rozpakować to archiwum,

• przejść do rozpakowanego folderu oraz otworzyć folder lab1 w VSCode,

Zadania (Bootstrap):

Zadanie 1.1:

W VSCode przejść do pliku index.html, do którego wkleić „Starter template” (szablon startowy). Wyświetlić stronę poprzez „Live Server” klikając Go Live (na dolnym pasku). link

Zadanie 1.2:

W Starter template zawarte są znaczniki <link href=… oraz <script src=… z adresami CDN (Content Delivery Network), dostarczającymi potrzebne składniki (kod) Bootstrap’a. Zmienić je na użycie lokalnych plików już umieszczonych w folderach css i js.

<link href="css/bootstrap.css" rel="stylesheet">
...
<script src="js/bootstrap.bundle.js"></script>

Zadanie 1.3:

Na podstawie obrazka poniżej (przestawiającego stronę internetową w całości) rozpoznać poszczególne komponenty Bootstrap’a oraz zastosować je, żeby utworzyć identycznie wyglądającą stronę – uzupełnienie pliku index.html:

• tytuł strony to „Wycieczki górskie”,

• kliknięcie w link w navbarze przenosi do danej sekcji, pozostałe linki/przyciski bez akcji,

• sekcja Start: do przewijanej galerii (karuzeli) wykorzystać obrazki: carousel1.jpg – carousel3.jpg, podpisy w karuzeli: „Niesamowite przeżycia!”, „Niesamowite widoki!”, „Piękno natury!”,

• sekcja Wycieczki: do kart wykorzystać pozostałe obrazki,

• sekcja Cennik: tabela w pasy, przyciemnienie wiersza po najechaniu kursorem,

• sekcja Inne: adres filmu do osadzenia: link (proporcje 16x9),

• sekcja Inne: formularz *, rodzaje oferty do wyboru: indywidualna/grupowa/specjalna.

link
link
link
link
link
link
link

Nie należy w ogóle używać własnych styli CSS! (np. width 25% itp.)

link
link
link

<div class="ratio ratio-16x9">
<iframe src="https://www.youtube.com/embed/t7ZpJ7wWlZI"></iframe>
</div>
<footer class="container-fluid bg-body-tertiary">
<div class="row text-center pt-2">
<p>&copy; Wycieczki górskie &ndash; 2024</p>
</div>
</footer>

Zadanie 1.4:

Na podstawie plików:

• 0-576px.png,

• 576-768px.png,

• 768-992px.png,

• 992px-.png,

rozpoznać jak dla danych szerokości ekranu zostało ustalone ułożenie wybranych elementów strony oraz uzupełnić plik index.html w odpowiednich miejscach o klasy wykorzystujące „punkty przerwania” w celu dodania responsywnego zachowania strony (w postaci jak we wcześniej wspomnianych plikach).

Ponadto ustawić, aby możliwe było przewijanie poziome tabeli, gdy jej zawartość nie mieści się na ekranie. link
link

Zadanie 1.5: *

Zastosować „ciemny tryb” dla całej strony. Ustawić na stałe biały tekst podpisów karuzeli. link
link

• – zadania/podpunkty do samodzielnego dokończenia/wykonania,

• – zadania/podpunkty dla zainteresowanych.

Informacja do zadania 1.4: przykładowo, jeżeli w systemie Windows na laptopie z ekranem Full HD ustawione jest np. skalowanie x1.25, to „punkty przerwania” będą się zachowywać z uwzględnieniem tego mnożnika.

Po zakończonym laboratorium należy skasować wszystkie pobrane oraz utworzone przez siebie pliki z komputera w sali laboratoryjnej.

Wersja pliku: v1.0