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.
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.
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ść.
Tworzymy nową stronę - podpiętą do listy lotów poprzez linki na liście - z opisem lotu.
Zawartość tej strony to co najmniej:
<ul> albo <ol> i nie przejmując się RODO),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.