Szkoła Sukcesu!

Indocti discant et ament meminisse periti.

Naukę HTML i CSS można porównać do szachów. Dość szybko opanowuje się podstawowe ruchy i podstawowe zasady strategii. Potrzeba jednak dużej praktyki, żeby w trakcie gry rozwiązać problemy, które pojawią się w czasie realizacji naszego planu. Żaden kurs nie jest w stanie podać wszystkich rozwiązań. Na nasze szczęście HTML i CSS nie posiadają aż tylu możliwości i kombinacji co królewska gra, jednakże często autorzy kursów skupiają się na dużej ilości szczegółów, co zaciemnia początkującym obraz całej „szachownicy” i często nie pozwala wyjść poza obszar „wiecznie początkujących”. Tego właśnie chcemy uniknąć na naszych zajęciach. Poruszone zostaną więc jedynie najistotniejsze zagadnienia, które jednak wyposażą Cię w umiejętności do stworzenia własnej, w pełni funkcjonalnej witryny. Ważne jest jednak, żebyś nabyte podczas zajęć kompetencje przekuwał na samodzielną pracę. Zachęca się do rzetelnego wykonywania podanych kursie zadań, a także samodzielnego zdobywania wiedzy, najlepiej poprzez praktykę tworzenia swoich własnych stron o coraz większym stopniu zaawansowania. Jest to jednak kwestia (nieodległej) przyszłości. Teraz jednak zacznijmy od podstaw!

W pierwszej kolejności utwórz na pulpicie (lub w dowolnym folderze) nowy folder, który nazwij Kurs_HTML. To właśnie w nim będzie powstawać Twoja nowa strona! Po wykonaniu rekomendowanej czynności należy ściągnąć na swój komputer program „Brackets”. Zanim jednak będzie miało to miejsce, należy przypomnieć o niebezpieczeństwach, jakie występują w Internecie. Przystępując do pobierania jakiegokolwiek programu należy zawsze odnajdywać go na stronach producenta. Korzystając z „pomocy” pośrednika, który udostępnił go na swojej stronie (często bez zgody producenta) istnieje prawdopodobieństwo, że oprócz spodziewanego produktu, na komputerze zainstaluje się również złośliwe oprogramowanie, które może negatywnie wpłynąć na pracę naszego komputera.

Po zainstalowaniu i uruchomieniu programu „Brackets”, kliknij w lewym górnym rogu „Plik” i z rozwijanego menu wybierz wcześniej utworzony folder.

Kiedy zakończysz powyższą czynność kliknij „Menedżer rozszerzeń” (znaczek „zielonego klocka”) umieszczony na prawym marginesie.

Po ukazaniu się odpowiedniego okna, przejdź do folderu „Dostępne” w lewym górnym rogu, a następnie w wyszukiwarce odnajdź dodatek „Emmet” i zainstaluj go. Dodatek ten odpowiada za obsługę skrótów klawiszowych, z których będziemy często korzystać.

Po zainstalowaniu dodatku „Emmet” (pamiętaj, że cały czas musi być wybrany folder Kurs_HTML. Jeżeli pominąłeś ten krok, przejdź proszę do drugiego slajdu) naciśnij prawy przycisk myszy na lewym marginesie i wybierz sekcję Nowy plik.

Utworzony plik nazwij „index.html”. Potem w części głównej napisz wykrzyknik”!” i szybko przejdź do kolejnego slajdu (pamiętaj, żeby kursor pozostał bezpośrednio za wykrzyknikiem!).

Naciśnij przycisk „Tab” i Twoim oczom powinna ukazać się powyższa struktura (tak szybkie jej utworzenie było możliwe właśnie dzięki zainstalowaniu dodatku „Emmet”). Teraz wyjaśnimy sobie, co oznaczają poszczególne jej części.

Zauważyłeś zapewne angielskie słowo "head" umieszczone w ostrych nawiasach, którego odpowiednik w języku polski oznacza „głowa”. Nazwa ta jest niezwykle trafna i stanowi nawiązanie do tego, co jest nam najbliższe – czyli ludzkiego ciała. Tak jak głowa (a właściwie zamknięty w czaszce mózg) steruje procesami zachodzącymi w organizmie, tak sekcja head steruje strukturą strony znajdującą się w sekcji "body".

"Body” (czyli kolejna istotna sekcja niezbędna do zaistnienia strony internetowej) w języku polskim oznacza „ciało”. Jak już zostało wspomniane wyżej, jest ono sterowane za pomocą sekcji „head”, czyli „głowy”. Musisz zapamiętać, że w głównej części przeglądarki widoczna jest tylko sekcja „body”. Wróćmy jednak do wygenerowanej wcześniej struktury HTML.

html lang="en" oraz meta charset="UTF-8" odpowiedzialne są za obecność w tekście znaków z odpowiedniej grupy językowej. Fakt, że występuje tutaj „en” zamiast „pl” nie ma dużego znaczenia dla przeglądarki (oczywiście, powinno mieć znaczenie dla nas, dlatego warto to zmienić). Druga z podanych wartości jest jednak niezbędna do wyświetlania polskich znaków (jeżeli będziesz kiedykolwiek tworzył/a stronę za pomocą starszego narzędzia niż „Brackets”, np. „Notatnik” lub „Notepad++” koniecznie musisz ją wpisać ręcznie, jeżeli teksty w aplikacji mają być napisane w języku polskim).

„title” jest to – jak sama nazwa wskazuje – główny tytuł naszej strony, widoczny w pasku przeglądarki. Jego głównym zadaniem jest ułatwienie przeglądarkom odnalezienie strony i uwzględnienie jej w wynikach wyszukiwania treści przez użytkowników (oczywiście czynników, które decydują czy strona znajdzie się w wynikach wyszukiwania danego internaty i na której pozycji zostanie wyświetlona zależy również od wielu innych czynników). Zanim poznamy inne możliwości sekcji „head” przejdźmy chwilowo do sekcji „body”.

W sekcji „body” napisz h1>lorem i wciśnij klawisz „Tab”.

Następnie napisz literę „p” i postępuj analogicznie do poprzedniego zadania, pamiętając, żeby przed naciśnięciem klawisza „Tab” kursor znajdował się tuż za wyrazem „lorem”. Tekst, który nam się ukazał, jest to łaciński traktat, wzorowany na fragmencie pracy Cycerona O granicach dobra i zła (De finibus bonorum et malorum) pochodzącej z 45 p.n.e. Zaczęto go używać niedługo po wynalezieniu i upowszechnieniu druku do testowania czcionek, fontów; sprawdzania kompozycji poszczególnych stron itp. Odpowiedź na pytanie, dlaczego traktat ten jest używany przez twórców stron internetowych wydaje się oczywista. Dzięki niemu autorzy serwisów nie muszą kopiować lub sporządzać żadnych przypadkowych tekstów, żeby zobaczyć, jak wyglądają w strukturze projektowanych przez nich aplikacji, zanim wypełnią je dedykowaną treścią.

W celu sprawdzenia, jak utworzona przez Ciebie struktura HTML wygląda w przeglądarce, naciśnij znaczek „pioruna”, znajdujący się w prawym górnym rogu programu „Brackets”.

Widzimy więc, że znacznik „h1” jest dużo większy od znacznika „p”. Dzieje się tak dlatego, że „h1” używa się jako nagłówka, zaś dzięki "p" tworzy się akapity tekstu. Gdybyśmy więc pisali artykuł, pomiędzy nawiasami h1…/h1 umieścilibyśmy tytuł, a analogicznie w p…/p treść naszej pracy. Musimy pamiętać, że praca w HTML różni się od sposobu działania, do jakiego jesteśmy przyzwyczajeni używając edytorów tekstu (np. WORD). Tworząc stronę internetową nie mamy do dyspozycji panelu, który pomógłby nam zmienić czcionkę, jej wielkość, pochylenie, pogrubienie itp. Wszystko, to możemy osiągnąć za pomocą odpowiednich znaczników lub stylów CSS (o których będzie mowa niżej). Przejdź teraz do menu po prawej stronie i wciśnij link „Zadanie 1”. Po jego wykonaniu przekonasz się, że oprócz „h1” istnieją również inne wielkości nagłówków i będziesz mógł je porównać zarówno ze sobą, jak i z „p”.

Pomiędzy znaczniki od „h1” do „h6” oraz „p” wpisz dowolne teksty, następnie wciśnij przycisk „Run”. Przeanalizuj efekty swojej pracy. Zapisz wygenerowany przez system link. Po wykonaniu tych czynności – żeby móc efektywnie kontynuować naukę dotyczącą formatowania tekstów - przejdź do „Zadania 2” z bocznego menu.

W miejsce kropek wpisz dowolne teksty, następnie wciśnij przycisk „Run”. Przeanalizuj efekty swojej pracy. Zapisz wygenerowany przez system link. Dzięki wykonanemu ćwiczeniu nauczyłeś się najprostszych sposobów formatowania tekstów. Żeby jednak dokonać bardziej skomplikowanych działań należy używać kaskadowych arkuszy stylów, o czym niżej.

Kaskadowymi arkuszami stylów (ang. Cascading Style Sheets) nazywamy listę reguł wskazujących, w jaki sposób mają zostać wyświetlone przez przeglądarkę poszczególne elementy struktury HTML. Na obecnym etapie zajmować się będziemy jedynie czcionkami, jednakże w niedługim czasie nauczymy się, w jaki sposób za pomocą CSS pozycjonować poszczególne ogniwa strony zarówno względem siebie, jaki i przeglądarki. Tak to jak już zostało wcześniej podkreślone to właśnie sekcja „head” odpowiada za sterowanie wyglądem sekcji „body”. Żeby móc dodawać style CSS w sekcji „head” napisz słowo „style” (bez cudzysłowu) i naciśnij doskonale Ci już znany klawisz „Tab”. Teraz już, pomiędzy nawiasami ostrymi (w miejscu trzech kropek na powyższym zdjęciu) można wpisywać odpowiednie komendy sterujące wyglądem strony (o czym niżej). W trakcie pisania kodu program „Brackets” będzie starał się pomagać poprzez „podpowiedzi” generowane w postaci listy możliwych opcji.

W pierwszej kolejności musimy określić, jakie elementy z sekcji „body” pragniemy modyfikować. Odnosimy się więc do znaczników „h1” oraz „p”. W sekcji „head” zapisujemy je bez nawiasów. Tutaj „h1” i „p” nie są już znacznikami, lecz selektorami (czyli punktami odniesienia do konkretnych elementów w sekcji „body”). Informacje zawarte w nawiasach klamrowych nazywamy „deklaracjami” (tutaj określamy sposób, w jaki należy modyfikować elementy wybrane za pomocą selektora).

„Deklaracje” składają się z dwóch elementów: „właściwości” – określającej, co chcielibyśmy, aby uległo zmianie w wybranym za pomocą selektora elemencie (czyli – jak na powyższym zdjęciu - położenie tekstu, kolor itp.) oraz „wartości” – wskazującej, w jaki sposób ten element powinien się zmienić. Pamiętaj, że „właściwość” i „wartość” zawsze rozdziela dwukropek, nie należy też nigdy zapominać o średniku, którym kończymy deklarację. Teraz naciśnij proszę znany Ci już symbol „pioruna” i zobacz efekty swojej pracy.

Jak widzimy przeglądarka posłusznie wykonała nasze polecenia. Oczywiście, podany przykład nie wyczerpuje zakresu możliwości modyfikacji tekstu, jakich możemy dokonać za pomocą CSS. Teraz przejdź do Ćwiczenia 3 w prawym menu, aby poszerzyć zdobywaną wiedzę.

W zadaniu trzecim w miejsce kropek wpisz dowolne teksty, następnie wciśnij przycisk Run. Spróbuj wydedukować znaczenie poszczególnych „deklaracji” analizując efekty swojej pracy. Zapisz wygenerowany przez system link. Po skończonym zadaniu będziesz przygotowany/a żeby poznawać coraz bardziej skomplikowane kwestie.

Chciałbym teraz żebyśmy zastanowili się czym właściwie jest strona internetowa? W dużym uproszczeniu można powiedzieć, że jest to zbiór pudełek różnej wielkości, odpowiednio poukładanych i reagujących na okno przeglądarki oraz na siebie nawzajem.

Jak więc utworzyć takie pudełko wewnątrz struktury HTML? Sposobów jest wiele i będziemy je poznawać (w każdym razie niektóre z nich) w dalszej części kursu. Na razie jednak użyjemy dość powszechnego połączenia elementu blokowego (co to dokładnie oznacza dowiesz się w dalszej części kursu) „div” (nazwa ta stanowi skrót od „division”, co w języku polskim oznacza oddział, wydział, sekcja) oraz atrybutu „class”, dzięki któremu można tworzonemu „pudełku” nadać dowolną nazwę. Teraz zgodnie z powyższym zdjęciem w sekcji „Head” zresetuj zawartość „style” a w sekcji „Body” przed „h1” napisz kropkę, a po niej – bez spacji - nazwę klasy „pudelko1” (.pudelko1) i naciśnij klawisz „Tab”. Powinna pojawić się teraz następująca struktura: div class="pudelko1" /div (oczywiście z uwzględnieniem nawiasów ostrych. Ostatni element, czyli –„/div” umieść teraz za znacznikiem „h1”. Analogiczne czynności wykonaj w sekcji „p” zmieniając nazwę klasy na „pudelko2”.

Dwa „pudełka” zostały już utworzone. Żeby jednak były widoczne w przeglądarce musimy zmodyfikować ich wygląd. W pierwszej kolejności należy utworzyć prawidłowe selektory. Żeby to uczynić powinno się napisać odniesienie do klasy w postaci kropki a następnie – bez spacji – wybraną nazwę.

Po napisaniu prawidłowych selektorów, można przystąpić do modyfikowania wyglądu pudełek. Po zmianie koloru tła (background-color), koloru tekstu (color) oraz jego położenia względem pudełka, naciśnij symbol błyskawicy i zobacz efekt swojej pracy.

Wygląd nagłówka oraz tekstu został zmodyfikowany. W następnych krokach nauczysz się, w jaki sposób kształtować wielkość pudełek i jak mogą na siebie wzajemnie wpływać.

Na powyższym zdjęciu widać, że do każdego z pudełek dołożone zostały dwa dodatkowe elementy: „width: 50vw;” - co oznacza, że szerokość ma od tej pory stanowić 50% okna przeglądarki oraz „margin: 0 auto” co jest jednym ze sposobów na wyśrodkowanie elementu.Uwaga: podana jako pierwsza wartość „0” odpowiada za margines górny i dolny, zaś wartość kolejna za ułożenie elementu z prawej i lewej strony.

Widzimy, że obydwa pudełka są do siebie pozornie „przyklejone”. Wróćmy więc do kodu i postarajmy się je rozdzielić.

W „pudełku” nr 2 wprowadzono komendę „margin-top: 70px” – co oznacza utworzenie górnego marginesu wielkości 70px (samodzielnie sprawdź, co oznacza ta jednostka). Zwróciłeś/łaś zapewne uwagę, że zniknęła instrukcja „margin: 0 auto” i w zamian pojawiło się dwie inne: „margin-left: auto;” oraz „margin-right: auto;”, co stanowi alternatywny sposób na wyśrodkowanie tekstu.

Obydwa „pudełka” są już od siebie odsunięte. W następnej kolejności zajmiemy się położeniem tekstów wobec krawędzi każdego z „pojemników”.

Zauważyłeś/łaś zapewne, że na powyższym zdjęciu, w każdym z „pudełek” pojawiła się nowa właściwość (razem z wartościami) o nazwie „padding”. Nazwa ta określa przestrzeń pomiędzy „contentem” czyli treścią strony (mówiąc najprościej – tekstem) a jej granicami. Każda z wyświetlonych na zdjęciu wartości, w każdym z „pudełek” oznacza odległość tekstu od każdego z boków „pojemnika”, zaczynając od góry (analogicznie wartości wpisuje się we właściwości „margin”).

Ostatnią właściwością, która zostanie zaprezentowana w tym dziale jest „border” czyli „ramka”. Wyświetl stronę w przeglądarce i postaraj się samodzielnie wydedukować co oznaczają przypisane wartości (możesz oczywiście posłużyć się Internetem).

Efekty naszej pracy są gotowe. Większość przeglądarek oferuje możliwość wglądu do wszystkich elementów strony. W tym celu najedź kursorem na „pudelko1” i z rozwijanego menu wybierz link „Zbadaj element”.

W miejsce kropek wpisz dowolne wartości i naciśnij przycisk Run. Przeanalizuj efekty swojej pracy. Zapisz wygenerowany przez system link.

Gratulacje! Twoja wiedza jest już wystarczająca, żeby móc rozpocząć prace nad pełnoprawną stroną internetową.