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.