Szkoła Sukcesu!

Disce libens: quid dulcius est quam discere multa?

Gratulacje! Znasz już podstawy HTML i CSS, czas więc zabrać się za tworzenie własnej strony internetowej. Nie będzie to zadanie łatwe, jednakże rozwijające i – przynajmniej taka mamy nadzieję – inspirujące do dalszych poszukiwań. Żeby nauka była efektywna nie pomijaj zadań, które – tak jak wcześniej znajdziesz w lewym menu. W pierwszej kolejności skonstruujemy górne menu.

W pierwszej kolejności postaramy utworzyć ozdobny pasek, który będzie wyświetlał się na górze naszej strony. W tym celu w sekcji „Body” napisz następujący kod: div class="margines" /div (uwzględniając przy tym nawiasy ostre, jak na grafice powyżej). Po wykonaniu tej czynności przejdź do sekcji „Head”.

W stylach ustawiamy nasz pasek na „1vw” (czyli 1% okna przeglądarki) a kolor na royalblue. Po wykonaniu tej czynności sprawdź efekty swojej pracy (przypominamy: znakiem pioruna w programie „Brackets”).

Jak widać na grafice powyżej, nasz pasek nie sąsiaduje bezpośrednio z górną częścią przeglądarki, lecz wyświetlony został wraz z marginesem, automatycznie wygenerowanym przez przeglądarkę. Na kolejnym slajdzie dowiesz się jak go usunąć.

Żeby wykasować generowane automatycznie przez przeglądarkę właściwości margin oraz padding, należy wpisać znaczek gwiazdki (co oznacza, że właściwość i wartość ma dotyczyć wszystkichb> elementów na stronie), a następnie ustawić ich wartości na „0”. Teraz już nasz ozdobny pasek będzie wyświetlał się zgodnie z naszymi oczekiwaniami. Możemy więc przejść do kolejnego kroku, w którym zaczniemy konstruować główne menu naszej strony.

W celu utworzenia zaczątku menu, które będzie funkcjonować na naszej stronie napisz komendę: nav>ul>li>a*4 i naciśnij znany Ci już doskonale przycisk Tab.

Jeżeli kod został zapisany prawidłowo powinna pojawić się struktura analogiczna do struktury widocznej na grafice powyżej. Podczas tworzenia nawigacji zawsze powinniśmy ją umieszczać w sekcji nazwanej „nav”, tak jak ma to miejsce w naszym przykładzie. Struktura wygenerowana w jej wnętrzu to tzw. Lista Nieuporządkowana (możemy jej używać nie tylko do budowy menu ale również do wyszczególniania wybranych informacji, o czym niżej). W następnej kolejności pomiędzy nawiasy ostre wprowadź dowolne teksty i wyświetl stronę w przeglądarce.

Biorąc pod uwagę fakt, że nie dodaliśmy jeszcze żadnych stylów, przeglądarka wygenerowała jedynie tzw. Listę Nieuporządkowaną. Żeby dowiedzieć się więcej na temat tego czym ona jest wykonaj ćwiczenia nr. 1 z bocznego menu - Twoim zadaniem będzie wygenerowanie kolejnych pozycji na liście. Na obecnym etapie powinieneś /nnaś również wiedzieć, że istnieją także Listy Uporządkowane. Żeby zrozumieć różnice pomiędzy nimi przejdź do ćwiczenia nr. 2.

Jak widać na powyższej grafice Lista Nieuporządkowana wygenerowana została z użyciem punktorów, zaś elementy Listy Uporządkowanej zostały ponumerowane (na tworzonej przez nas naszej stronie nie widać punktorów, co spowodowane jest wyzerowanymi marginesami). Wróćmy jednak do naszego menu.

Żeby dokończyć tworzenie menu w sekcji „Body”, pomiędzy nawiasami ostrymi w sekcji „li” (przed zawartymi w nich tekstami) napisz literę „a” i wciśnij klawisz „Tab”. Po wykonaniu tej czynności program wygenerował linki, które w założeniu mają prowadzić do innych podstron (w cudzysłowie powinny zostać wpisane ich adresy). Aby dowiedzieć się więcej na temat linków wykonaj zadanie nr 3.

Po naciśnięciu przycisku „Run” wygenerowane zostały linki do materiałów edukacyjnych W3School. W ramach zadania wygeneruj kolejne linki do wybranych polskich portali. Zapisz wyniki swojej pracy. Przejdźmy teraz do CSS.

W pierwszej kolejności utwórz klasę FirstNav obejmującą całą napisaną dotychczas nawigację.

Jak widać ustawiliśmy wielkość czcionki na 2,4% okna przeglądarki, tekst został przesunięty na prawo, marginesy górny i dolny margines otrzymały 20px, zaś lewy i prawy zostały wyśrodkowane. Dodatkowo wybraliśmy również czcionkę „Oswald” dla całego dokumentu. Zobacz teraz wyniki swojej dotychczasowej pracy.

Jak widać powyżej – zanim zbudujemy nasze menu czeka nas jeszcze sporo działań. W pierwszej kolejności pozbędziemy się punktorów.

Żeby pozbyć się punktorów wpisujemy komendę: list-style: none;.

Punktory zostały już zlikwidowane. Teraz postarajmy się umieścić linki obok siebie.

Odnosząc się do listy w klasie FirstNav ustaw właściwość i wartość display: inline-block; wyśrodkuj test i sprawdź wynik swoich działań w wyszukiwarce. (wyjaśnienie czym jest inline-block znajdziesz niżej).

Jak widać na powyższej grafice, elementy naszego menu ustawiły się obok siebie. Wciąż jednak nie wiemy, dlaczego tak się stało. Żeby dowiedzieć się szczegółowo w jaki sposób działa „magiczny” inline-block przejdź do zadania nr 4, naciśnij przycisk „Run”; zapoznaj się z wyświetlonymi w wyszukiwarce wynikami, a następnie przejdź do kolejnego slajdu.

Dzięki analizie treści zadania dowiedziałeś/łaś się, że elementy liniowe ustawiają się obok siebie (chyba, że mamy do czynienia z listą, tak jak w naszym wcześniejszym przykładzie) i nie reagują na próby implementowania niektórych wartości np. wysokości. Elementy blokowe można dowolnie kształtować, lecz są to „pudełka”, które układają się pionowo („jedno pod drugim”). Elementy inline-block są hybrydą tych wyżej wymienionych, mają więc cechy zarówno jednych, jak i drugich. Układają się obok siebie i jednocześnie można je kształtować. Postaramy się poćwiczyć nowopoznane umiejętności. W omawianym przez nas zadaniu 4., pierwszy przykład dotyczy elementów liniowych, drugi elementów liniowo-blokowych, trzeci elementów blokowych. Postaraj się teraz utworzyć kolejne, analogiczne przykłady elementów (czyli kolejny elementy: blokowy, liniowy i liniowo-blokowy). Zapisz efekty swojej pracy. Postaraj się zdobyć więcej informacji na temat trzech nowopoznanych elementów.

Dodajmy teraz kolejne właściwości i wartości odnosząc się selektorem „a”, czyli już bezpośrednio do linku. Poniżej wyjaśnione zostanie kolejno, co one oznaczają (część oczywiście tylko dla przypomnienia):
- font-size: 2.4vw - wielkość czcionki zostanie ustawiona na 2,4% okna przeglądarki.
- text-transform: uppercase – w menu pojawią się wyłącznie duże litery.
- text-decoration: none – zlikwidowane zostanie, charakterystyczne dla linków podkreślenie dolne.
- color: #555 zostanie zmieniony na Davy's Grey.
- padding: 10px 10px 15px 10px – padding górny, lewy i prawy zostaną zmienione na 10 px, zaś dolny na 15px.
- margin: 0 15px – margines górny i dolny zostały ustawione na „0” zaś lewy i prawy na 15px.
- letter-spacing: 1px – odległości pomiędzy literami wynosić mają 1px.
- font-weight: bold – czcionka zostanie pogrubiona.
- transition: .4s – właściwość ta używana jest w przypadku, gdy wykonamy odpowiednie działanie (już niedługo dowiesz się jakie), którego celem jest zmiana wyglądu linku po najechaniu na niego myszką (w celu odróżnienia od innych elementów). Dzięki „trasition”, w naszym przykładzie nie stanie się to od razu, lecz dopiero po 1/4 sekundy, co da wrażenie animacji. Żeby to w ogóle mogło mieć miejsce, należy dodatkowo wprowadzić psudoklasę hover , o której będzie mowa na kolejnym slajdzie.

Jak już zostało wspomniane na poprzednim slajdzie, żeby link zmienił swój wygląd należy użyć pseudoklasy hover. Po wstawieniu powyższego kodu i ustawieniu myszki na linku, kolor tła powinien zmienić się na „royalblue” (czyli odcień niebieskiego) z opóźnieniem ¼ sekundy, zaś kolor liter na biały (dla lepszej przejrzystości). Aby w praktyce przećwiczyć nowopoznaną wiedzę, wykonaj zadanie nr 5 wpisując w miejsce kropek wybrane przez siebie teksty. Przeanalizuj efekty swojej pracy. Zapisz wygenerowany przez system link. Po wykonaniu zadania przejdź do sekcji „Body”.

Po przejściu do sekcji „Body” w pierwszej kolejności dodaj „#” w miejsce pustych cudzysłowów (przypominamy: w cudzysłowach tych docelowo powinny znajdować się adresy podstrony, postaraj się sam/a wydedukować, dlaczego „#” powinien zostać w tym miejscu wstawiony). Zmień dotychczasowe nazwy linków na takie jak powyżej lub inne, wybrane samodzielnie. W następnej kolejności ściągnij logo XLII L.O. i umieść obrazek w folderze Kurs_HTML (może być to inny wybrany przez Ciebie obrazek, pamiętaj jednak, że musi posiadać rozszerzenie .jpg). Kolejnym krokiem będzie utworzenie ścieżki do niego w sekcji „Body”. W tym celu wpisz następujący kod img src="logo.jpg" alt="logo"(z uwzględnieniem nawiasów ostrych na początku i końcu linku) pomiędzy klasy „margines” i „FirstNav”.
Uwaga: jeżeli wybrałeś inny obrazek, w miejsce „logo.jpg” wpisz jego nazwę wraz z rozszerzeniem „wybrana_nazwa.jpg”. Tekst w drugim cudzysłowie nie jest konieczny, jednakże warto go dodać, ponieważ pojawi się, jeżeli w wyniku błędu ikona miałaby nie wyświetlić się w przeglądarce. W następnej kolejności sprawdź, jak wyświetla się w przeglądarce.

Jak widać obrazek „rozsadził” strukturę strony. Żeby to naprawić wróćmy do stylów, w których umieścimy go w tej samej linii, co „menu” i zmienimy jego wielkość.

Na grafice powyżej, po odniesieniu się do obrazku za pomocą selektora img, oprócz znanych nam właściwości i wartości obserwujemy niestosowaną wcześniej deklarację float:left. Oznacza ona, że elementy znajdujące się poniżej elementu oznaczonego niniejszą deklaracją, zaczną go „opływać”, tzn. ustawią się obok jego granic, po stronie, którą wybierzemy – w tym przypadku lewej (wyobraź sobie, że wstawiasz element jedną stroną do akwarium – woda automatycznie zacznie go „opływać”). Po wpisaniu powyższych deklaracji sprawdź w wyszukiwarce wyniki swoich działań.

Jak widać, dzięki wpisanej deklaracji, element „logo” ustawił się w odpowiednim miejscu. Właściwość „float” jest powszechnie stosowana do układania „pudełek”, z których – jak wielokrotnie mówiliśmy – składa się strona, dlatego też będziemy jej jeszcze używać w naszym projekcie (i jeszcze musimy się kliku rzeczy na jej temat dowiedzieć). Wprowadźmy teraz jednak nowe elementy do naszej strony.

W sekcji „Body” pod skończonym – „menu” utwórzmy nową sekcję, jaką jest „header”, czyli „nagłówek” - stadium przejściowe pomiędzy nawigacją a częścią główną strony. Najczęściej umieszczane są w tym miejscu grafika/i, ale my to uczynimy dopiero w stylach jako „obraz tła”. Takie rozwiązanie zostało wybrane, żeby pod naszym logo umieścić dodatkowo adekwatny napis (dla którego obrazek będzie tłem). W wybranym przykładzie był to symbol XLII L.O., więc najbardziej pasującym napisem jest oczywiście – jak widać na grafice powyżej - „Szkoła Sukcesu”. Jak zapewne zauważyłeś/łaś został on oznaczony jako nagłówek „h1”, który dodatkowo umieszczony został w klasie nazwanej „pudelkonapisu”. Było to istotne, ponieważ samo”h1”, jako element liniowy byłby trudny do „obróbki”, czyli nadaniu mu odpowiednich stylów.

Jak widać na powyższej grafice, elementom nagłówka nadane zostały deklaracje, które w przeważającej większości powinny być dla Ciebie zrozumiałe. Dla przypomnienia omówimy jednak je wszystkie.
W pierwszej kolejności widzimy, że nagłówkowi nadano (całemu, niezależnie, co umieścilibyśmy w środku) wysokość 60% okna przeglądarki – „height:60vw”. Poniżej umieszczono, zapowiadany na poprzednim slajdzie „obraz tła”. W tym celu wpisano kod: background-image: url(“nazwaobrazka.jpg”);
Uwaga: gdy będziesz wpisywał (jak widać na powyższej grafice) nazwę wybranego obrazu tła, program „Brackets” zacznie Ci pomagać w wybraniu odpowiedniej grafiki. Pamiętaj jednak, żeby prawidłowo zapisać jej rozszerzenie (w tym przypadku „jpg”). Przejdźmy teraz do kolejnych deklaracji. W selektorze: header div.pudelkonapisu ustawiono display: inline-block; co – jak zapewne doskonale pamiętasz – zmienia nam element z blokowego na blokowo – liniowy. Dzięki tej zamianie, napis został umieszczony w odpowiednim miejscu, przy zachowaniu możliwości jego modyfikacji.
Przejdźmy teraz do selektora odnoszącego się do bezpośrednio do napisu „h1”. Jak już zostało napisane wyżej, wszystkie elementy powinny być Ci znane, jednakże krótko je przypomnimy: - font-size: 4vw; - wielkość czcionki została ustawiona na 4% okna przeglądarki. - color: white; - kolor tekstu został ustawiony na biały. - text-align: center; - tekst został wycentrowany. - background-color: rgba(0, 0, 0, 0.5); - kolor tła – postaraj się sprawdzić w Internecie, jakie są właściwości tego koloru. Wyświetl stronę w przeglądarce i sprawdź w efekty swojej dotychczasowej pracy.

Gratulacje! Wykonałeś ogromną pracę i masz prawo być z siebie dumny! Zapraszamy do kolejnej zakładki, w której wspólnie zrobimy główną część strony.