Przed nami ostatni dzień wyzwania, czyli dalsza część przygody pt. podstawy HTML i CSS. Gotowi? Zaczynamy!
Małe ogłoszenie
Na sam początek informacja – wczoraj ruszyły zapisy na moje warsztaty online! Jestem ogromnie podekscytowana tym projektem To 2-godzinne sesje, podczas których poznacie HTML i CSS i nauczycie się jak zakodować pierwszą stronę internetową. Do wyboru pakiet 4 spotkań albo pojedyncza sesja. Więcej szczegółów znajdziecie pod tym linkiem, tam też możecie się zapisać. A teraz zaczynamy dzień 3 wyzwania!
Instrukcja 
obsługi wyzwania
Ten wpis jest ostatnim z trzech, które ukazują się na blogu w ramach wyzwania. W artykule znajdziecie omówienie podstawowych zagadnień z HTML i CSS oraz zadania do zrobienia. Przejście przez treść wpisu i wykonanie zadań nie powinno zająć Wam więcej niż godzinę. Dodatkowo w grupie wyzwania odbędzie się wystąpienie live, w którym pokażę na żywo omówione we wpisie zagadnienia i odpowiem na Wasze pytania. jeżeli chcecie więc mnie posłuchać, koniecznie śledźcie dedykowaną dla wyzwania grupę na Facebooku dziś o 21:00. Live będzie zapisany w grupie oraz podlinkowany w tym wpisie (wieczorem), także będzie można go też obejrzeć później. W razie jakichkolwiek pytań czy problemów, śmiało piszcie do mnie pod tym postem albo przez Facebooka. Ruszamy!
EDIT: ze względu na problemy techniczne, video z trzeciego dnia ma dwie części. Możecie je obejrzeć tutaj i tutaj
Co dalej?
Zastanawiacie się pewnie, czym zajmiemy się dzisiaj. Wiemy już, co to HTML i znamy podstawowe znaczniki. Wiemy też, czym jest CSS i jak można ostylować elementy HTML. Jednak pewnie domyślacie się, iż zmiana koloru czy fontu, to nie wszystko, czego trzeba na stronie internetowej czy w aplikacji. Dzisiaj zajmiemy się układem elementów na stronie!
Żeby zająć się układem elementów, musimy poznać jeszcze jeden bardzo istotny znacznik HTML, a mianowicie <div>. Div pochodzi od angielskiego division oznaczającego podział. I jak sama nazwa wskazuje, umożliwia on nam tworzenie sekcji na stronie. Możecie teraz, tak dla przećwiczenia, wejść sobie w narzędzia deweloperskie przeglądarki i poszukać w kodzie html jakichś divów. Powinno ich być tam sporo, bo to właśnie one pozwalają nam budować całą strukturę. Dla przykładu – jeżeli chcemy mieć na stronie sekcję ze zdjęciami, najwygodniej jest stworzyć div, nadać mu odpowiednią klasę i zająć się układaniem elementów wewnątrz diva.
Aby dobrze zrozumieć zasady, jakie rządzą układem elementów w dokumencie HTML, musicie najpierw zapoznać się z takimi pojęciami jak elementy liniowe i elementy blokowe. Każdy element HTML jest albo liniowy albo blokowy. Co to oznacza w praktyce? Elementy HTML z automatu mają przypisane pewne adekwatności. Elementy liniowe to takie, które nie zajmują całej linii, tzn. można ułożyć kilka takich znaczników obok siebie. Zajmują one tylko tyle miejsca, ile potrzebują, nie mają przypisanych z automatu żadnych marginesów. Przykładem takiego znacznika jest np. span. Spójrzcie na pierwsze trzy linijki kodu HTML w tym projekcie. Mamy tutaj trzy spany, a tekst każdego z nich umieszczony jest obok poprzedniego. Spany zajmują dokładnie tyle miejsca, ile zapisany w nich tekst. Umożliwiają nam na przykład stylowanie jakiejś części tekstu bez konieczności tworzenia nowego paragrafu.
Skoro już o paragrafie mowa, to jest on przykładem elementu blokowego. Oznacza to, iż zajmuje całą szerokość strony i każdy następny paragraf automatycznie dodawany jest “od nowego linijki”, tzn. nie pojawia się obok poprzedniego paragrafu. Możecie to zobaczyć w dalszych linijkach podlinkowanego wyżej projektu. Są tu trzy paragrafy i każdy z nich zaczyna się od nowej linijki, mimo iż tekst nie zajmuje całej szerokości. Bardzo fajnie elementy blokowe i liniowe opisuje ten artykuł, polecam przejrzeć
Margines i padding
Zanim przejdziemy do tworzenia prostego układu elementów na stronie, musicie wiedzieć, iż w CSS mamy również możliwość ustawiać margines oraz padding dla elementu. Margines określa odstęp między elementem (od jego granicy) do kolejnego elementu. Z kolei padding to przestrzeń między zawartością elementu, a jego ramką. Żeby dobrze to zrozumieć popatrzcie na poniższy obrazek:
Źródło obrazka
Oprócz możliwości ustawiania odstępów między elementami oraz między zawartością elementu, a jego obramownaniem, możemy też oczywiście ustawić wielkość elementów. Tzn. ich wysokość i szerokość. W moim projekcie znajdziecie pomarańczowy kwadrat. To div o klasie orange-square, który ma wysokość 200 pikseli oraz szerokość 200 pikseli, na czerwono zaznaczono jego ramkę, czyli border. Zwróćcie uwagę, iż własność border jest opisana skrótowo. Tzn. nie zapisujemy osobno w regułach CSS, jaki ma kolor, jaką grubość i jaki styl, tylko korzystamy z ustalonego zapisu skrótowego. Według tego zapisu jako pierwszą podajemy szerokość ramki, jako drugi jej styl, natomiast jako trzeci – kolor.
Jednak teraz skupcie się na marginesach. Zobaczcie, iż możemy dokładnie wskazać, jaki margines chcemy zmienić podając odpowiednie sufiksy. Dla marginesu górnego margin-top, dla dolnej margin-bottom i tak dalej. Jednak nie zawsze musimy wypisywać te wszystkie reguły osobno. Tu również możemy skorzystać z zapisu skrótowego, w naszym przypadku zapis skrótowy wyglądałby tak margin: 10px 10px 20px 20px. Jako pierwszy podajemy margines górny, jako drugi prawy, jako trzeci dolny i jako czwarty lewy, czyli idziemy zgodnie z ruchem wskazówek zegara. Te sposoby przypisana wartości nie są od siebie lepsze czy gorsze. Czasem potrzebujemy zmienić np. tylko prawy margines, więc nie ma sensu korzystać ze skrótowego zapisu. Zapis skrótowy przede wszystkim zaoszczędza czas, gdy musimy stylować wszystkie marginesy.
Dodatkowo w pomarańczowym kwadracie wskazano wartości górnego paddingu. Dzięki temu napis wewnątrz diva nie jest od razu przy górnej granicy elementu, ale jest przesunięty w dół o 10 pikseli. Spróbujcie pobawić się trochę w swoim projekcie na Codepen i popróbujcie zmieniać wartości marginesów i paddingów i zobaczcie, co się dzieje.
Jak wykorzystać własność display?
To nie jest tak, iż jeżeli elementy jest blokowy, jak na przykład div czy paragraf, już na zawsze jesteśmy skazani na umieszczanie go od nowej linii. Z pomocą przychodzi nam CSS, gdzie możemy ustawić własność display elementu. To sprawi, iż element zachowa się dokładnie tak jak chcemy. Spójrzcie na kod, który zaczyna się od linijki 13 w moim projekcie. Mamy tutaj dwa divy, w rozmiarze 200 na 200 pikseli, każdy z nich ma kolor zielony oraz przypisaną klasę green-square. Ustawiłam im również lewy margines o wartości 20 pikseli. Z automatu nasze divy pojawiają się w nowych linijkach, a my chcemy je mieć koło siebie. Dlatego ustawiamy własność display na inline-block. Sprawi to, iż elementy ustawią się w linii, czyli tak jak elementy liniowe, natomiast zachowają prawo do posiadania swojej wysokości i szerokości, tak jak elementy blokowe. Dzięki takiemu zabiegowi zyskaliśmy dwa kontenery umieszczone koło siebie. Możemy w nich umieścić tekst, obrazki, listy i będą one pojawiały się koło siebie.
Analogicznie, możemy zmienić własność display dla elementów, które z natury są liniowe. O tym, jakie wartości możemy ustawić dla display poczytajcie koniecznie tutaj.
Zadania na dziś
Czas na zadania! Wiem, iż dzisiaj jest sporo materiału, bo podałam także dodatkowe źródła, ale mam nadzieję, iż to Was nie zniechęci do dalszej pracy Śmiało otwórzcie swoje projekty na Codepen i zróbcie poniższe zadania. jeżeli cokolwiek jest niejasne, wszystko rozjaśnię na live już dziś o 21:00.
- Stwórz w swoim projekcie dodatkowy paragraf. Wewnątrz paragrafu umieść element span, w którym znajdzie się jakiś fragment tekstu. Następnie nadaj klasę elementowi span i spraw, by tylko ten fragment miał kolor żółty.
- Dodaj do projektu element div. Ustaw mu wysokość i szerokość na 200 pikseli. Spraw, by miał czerwone tło i zieloną ramkę. Następnie ustaw mu górny margines na 30 pikseli, a dolny na 50 pikseli.
- Stwórz kolejny div i ustaw mu ramkę na grubość 5 pikseli. Niech będzie niebieską, ciągłą linią. Wewnątrz diva umieść paragraf, który wypełnij tekstem. Ustaw paddingi dla diva, tak, by paragraf był na samym dole diva (u góry ma zostać dużo wolnej przestrzeni).
- Stwórz dwa paragrafy i w każdym z nich umieść fragment tekstu. Nadaj im jedną klasę i ustaw szerokość każdego z paragrafów na 100 pikseli, a kolor tła na żółty. Następnie, korzystając z własności display spraw, by paragrafy były ustawione obok siebie, a nie jeden pod drugim.
Powodzenia!
Zadanie bonusowe (oryginalnie podane podczas live w pierwszej edycji wyzwania)
Stwórz 3 divy, ostyluj je tak, by były czerwonymi kołami (tylko dzięki CSS), a następnie ustaw je w jednym rzędzie.
Koniecznie podziel się swoimi projektem w grupie na Facebooku. Tam też możesz zadawać pytania w razie problemów I tam również widzimy się dzisiaj na ostatnim live w ramach wyzwania
Chcesz się czymś podzielić? O coś zapytać? Napisz komentarz pod tym postem, maila do mnie na joanna@wakeupandcode.pl albo wiadomość na fanpage Wake up and Code.
