Laboratorium 2 (zadanie 1 lab)

Table of Contents

1 Zajęcia 2

ROBIMY: stronę linii lotniczej; na początek stronę główną z listą lotów, menu, podstronę pilotów z informacjami o pilocie i jego lotach.

1.1 Krok 1: tworzymy stronę z listą lotów

Przygotowujemy sobie katalog na laboratoryjne zabawy, otwieramy go w VS Code (File->Open Folder) i tworzymy plik .html (jest kilka sposobów, niech każdy sobie poszuka).

Gdy się stworzy nowy plik html i wciśnie Ctrl+spacja to można wybrać html z menu i mieć szkielet strony; ale super!

Nie potrzebujemy na razie <script>, ale w niczym nam nie przeszkadza, więc go zostawiamy. Nie mamy jeszcze pliku main.css, do którego odwołuje się <link>, ale gdy trzymając Ctrl klikniemy na nazwie, to plik się automatycznie stworzy.

Ustawiamy właściwy tytuł i dopisujemy w edytorze kilka elementów, żeby mieć na czym używać CSSów. Chcemy mieć nagłówek ze stwierdzeniem, że jest to lista lotów, tabelkę z listą lotów (kolumny: nr lotu, skąd, dokąd, data, godzina; tabelka z nagłówkami), nr lotu niech będzie linkiem do podstrony lotu (zrobimy tylko jedną podstronę, więc niech wszystkie linki prowadzą w jedno miejsce).

W trakcie pisania oglądamy postępy w przeglądarce - znowu Firefox.

Dodajemy jeszcze stopkę z autorem.

Z przykrością konstatujemy, że strona wygląda… niezbyt ładnie.

1.2 Krok 2: upiększamy stronę

Otwieramy zakładkę Inspector w narzędziach. Korzystając ze strzałki wybieramy tekst ze stopki. Spróbujemy nieco zmienić jego wygląd.

Po prawej stronie jest napis element {}, tam powprowadzamy zmiany. Po kliknięciu pomiędzy nawiasy klamrowe można coś wpisywać. Wpiszmy background-color: aliceblue.

To zmieńmy jeszcze color tekstu, i zajmijmy się czcionką. Spróbujmy font-family: sans-serif (tu nie ma podpowiedzi), font-size: 30px (potem wielkość można zmieniać wybierając myszką i używając strzałek w górę i dół).

Zmiana wielkości czcionki powoduje zmianę wielkości tła, a nawet - jeśli czcionka jest wystarczająco duża - łamanie tekstu. Niebieskie tło zajmuje jednak całą szerokość okienka. Z kolei zmiana wielkości okienka też może powodować łamanie tekstu.

Szerokość i wysokość pudełka z tekstem możemy modyfikować: właściwości width i height. Szerokość można podawać w różnych jednostkach, nie tylko px.

[Tu kilka słów o jednostkach i próby ich użycia do różnych elementów strony. px, %, vh/vw]

Chcemy mieć kolorową stopkę na stałe, bo na razie przeładowanie strony powoduje utratę zmian. W pliku main.css zamieszczamy wpis dla selektora footer z tymi informacjami. VS Code też podpowiada! Plik main.css może wyglądać następująco:

footer {
  background-color: aliceblue;
  color: green;
  font-family: sans-serif;
  font-size: 30px;
  width: 50%;
}

[Omówić proste selektory, selektory dla klas i selektory dla id; również selektory złożone z kilku elementów połączonych przez spację i znak ">"; bardziej skomplikowane będą na wykładzie]

Dopiszmy regułki dla tabelki, żeby wyglądała ładniej. Cieńsza czcionka nagłówków (font-weight), obramowanie tabeli (border, border-collapse dla elementów table, td, th).

Warto wszystko umieścić bardziej na środku. Jeśli chodzi o napisy, to można użyć text-align: center, np. dla nagłówka i stopki. Widać, że tekst jest centrowany w ramach swojego pudełka, czyli nagłówek jest po środku strony, a stopka - po środku swojego niebieskiego pudełka, węższego niż strona.

Teraz cofnijmy tę zmianę i spróbujmy użyć text-align: center dla body. Zabawne, wycentrowane jest wszystko, włącznie z tekstami w tabelce, które są wycentrowane w swoich komórkach. Gdy wybierzemy którąś z komórek w Inspector, to okaże się, że wartość text-align została odziedziczona z body. W zakładce Computed po prawej stronie widać, dla własności text-align, wszystkie konkurujące wartości.

Dopiszmy text-align: left do table i zobaczmy jak teraz wygląda komórka w Inspector.

Wszystko na stronie jest bardzo blisko siebie, bez żadnych odstępów. Spróbujmy coś z tym zrobić.

Żeby lepiej to zobaczyć, dopiszmy dwa akapity tekstu przed tabelką, z opisem tego, co jest poniżej. Akapity umieszcza się w znaczniku <p>. Pierwszemu nadajmy id="pierwszy", a drugiemu - drugi. Ustawmy różne kolory tła dla tych akapitów.

Początkowo oba akapity mają szerokość całego okienka, ale nawet gdy ją zmniejszymy, np. ustawiając im width na 25%, to i tak będą umieszczone jeden pod drugim. Zamieńmy na chwilę <p> na <span>. Wówczas akapity są wyświetlane koło siebie. Na czym polega różnica?

[display: block/inline/inline block; o bardziej skomplikowanych metodach ustawiania pudełek typu block, takich jak float, flex czy grid będzie za tydzień]

Wróćmy do <p>, ale zmniejszmy obu szerokość, np. do 75%. Jak już widzieliśmy w footer, tekst jest wycentrowany, ale całe pudełko trzyma się lewej strony okienka. Spróbujmy to zmienić. Wybierzmy pierwszy akapit w Inspector, po prawej stronie zakładkę Layout.

Dookoła pudełka są marginesy, ustawione na 0. Zmieńmy lewy i prawy margines na 12.5%. Klikając w marginesy możemy zmienić wartość, jest ona ustawiana jako margin-left i margin-right, co widać na liście właściwości elementu. Pudełko wycentrowało się, ale było nam łatwo, bo wiedzieliśmy, że jego szerokość to 75%. Gdy nie wiemy jak szerokie jest pudełko w stosunku do strony - np. gdy ma szerokość ustawioną w px - możemy użyć wartości auto.

Modyfikując pionowe marginesy różnych elementów możemy nieco oddalić od siebie elementy na stronie.

Warto zauważyć, że marginesy są na zewnątrz naszych kolorowych akapitów i miejsce pomiędzy nimi jest ciągle białe. Pudełka mają też padding, który jest w środku pudełka i przyjmuje kolor tła. Skorzystajmy z padding żeby dodać trochę więcej światła do tabelki, kilka pikseli pod i nad każdym napisem, oraz kilkanaście po lewej i prawej stronie.

Zobaczmy jeszcze, że można dodać obramowanie pudełka (border).

Powiedzmy, że drugi z lotów w naszej tabeli wyjątkowo nam się podoba i chcielibyśmy podkreślić to specjalnym tekstem "Ale super lot!", który umieścimy nad tym wierszem tabeli. Zacznijmy od dodania trzeciego akapitu o szerokości 200px i z ulubionym kolorem tła pomiędzy wcześniej wpisanymi akapitami. Napis jest, ale w zupełnie złym miejscu. Przesuńmy go trochę.

Przeglądając podpowiadane przez Firefoksa albo VS Code właściwości widzimy, że jest coś takiego jak left i top. Spróbujmy je ustawić. Nic się nie zmieniło. Dopiszmy magiczną właściwość position: relative. Hurra, napis się przesunął! Zostało po nim puste miejsce między starymi akapitami, a napis pokazał się na wierzchu czegoś na czym się znalazł. Spróbujmy dobrać tak wartości top i left by umieścić go na wierzchu drugiego akapitu. A potem w drugim akapicie dopiszmy position: relative. Co będzie na wierzchu?

Samo dopisanie position: relative bez przesuwania elementów zmieniło sposób wyświetlania.

Jeśli jednak chcemy, by nowy akapit był na wierzchu, mimo, że w tekście jest przed drugim, musimy zmienić ustawienie pionowe. Albo w akapicie drugim zmniejszyć (z-index: -1), albo w nowym zwiększyć (z-index: 1). Więcej o z-index będzie na wykładzie.

Dobierając odpowiednie wartości top i left możemy teraz przesunąć nasz napis nad ulubiony lot, ale zostanie po nim brzydkie puste miejsce. Usuńmy to miejsce, zmieniając position: relative na absolute. Teraz ustawienie top i left na 0 spowodują, że napis pojawi się w lewym górnym rogu strony. W Layout jest napisane, że position jest absolute, ale jest też napis offset body.

Zmodyfikujmy nieco naszą stronę, umieśćmy akapit z napisem o super locie i tabelkę ze spisem lotów w oddzielnym pudełku <div>. Niestety nic się nie zmieniło, położenie ciągle jest liczone względem początku strony. Ale gdy <div> będzie miał ustawione position: relative, to pokazywany w Layout offset się zmieni. Teraz już łatwo ustawić pozycję taką, żeby napis był nad ulubionym lotem.

Dodajemy jeszcze logo naszej linii lotniczej. Użyjemy do tego znacznika <img src="plik.jpg" alt="logo firmy">. Musimy mieć obrazek, więc ściągamy go z internetu (albo sami rysujemy). Wstawiamy go pod nagłówkiem, zmieniamy wartość display na block, bo domyślnie jest inline, ustawiamy właściwą szerokość i wysokość.

1.3 Krok 3: opis pojedynczego lotu

Tworzymy nową stronę - podpiętą do listy lotów poprzez linki na liście - z opisem lotu.

Zawartość tej strony to co najmniej:

  • jakiś odpowiedni nagłówek,
  • nazwy miast pomiędzy którymi odbywa się lot, jako linki do Wikipedii,
  • zdjęcia tych miast,
  • przewidywana pogoda w miastach,
  • czas lotu,
  • opis samolotu: typ, liczba miejsc, zdjęcie,
  • lista pasażerów (używając <ul> albo <ol> i nie przejmując się RODO),
  • link do powrotu na stronę listy lotów.

Plik .css ma być wspólny dla tej strony i strony z listą lotów. Strona ma być czytelna i w miarę możliwości estetyczna.

Te strony powinna zostać pokazane prowadzącemu zajęcia, bo to zadanie laboratoryjne numer 1.