Nadszedł czas na pierwszy dzień wyzwania! Przez najbliższe dni poznacie podstawy HTML i CSS. Zaczynamy od HTML! Uzbrójcie się w kubek herbaty i chwilkę wolnego czasu. Ruszamy!
Instrukcja 
obsługi wyzwania
Ten wpis jest pierwszym z trzech, które ukażą się na blogu przez najbliższe dni. Każdego dnia 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 codziennie w tej grupie na FB 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. Zaczynamy!
EDIT: video możecie już obejrzeć tutaj
Cel wyzwania
Celem tego wyzwania jest poznanie podstaw technologii, które umożliwiają tworzenie stron internetowych i aplikacji. Dzięki HTML i CSS można stworzyć ich wizualną część. Oczywiście trzy dni to bardzo mało i informacje, które w tym czasie przyswoicie, nie pozwolą Wam od razu stworzyć strony internetowej od zera, ale na pewno pokażą, na czym polega kodowanie i dadzą Wam bazę do dalszej nauki. Wyzwanie ma być swojego rodzaju demo, czymś, co pozwoli Wam zobaczyć, czy choć troszkę kodowanie Was wciągnie. Żeby było łatwo i bez zbędnego przygotowania, będziemy działać tylko w przeglądarce. Nie musicie niczego instalować, ani specjalnie przygotowywać środowiska do pracy. Wystarczy Wam tylko komputer z dostępem do internetu. Ćwiczenia będziemy wykonywać przez Codepen. Jest to strona, która umożliwia pisanie kodu i od razu oglądanie rezultatów tego, co napiszemy. Najlepiej od razu stwórzcie konto w serwisie, żeby móc pracować nad zadaniami, które znajdziecie na końcu artykułu. Powodzenia!
Czym jest HTML?
Pytanie numer jeden, czyli tym tak w ogóle jest ten cały HTML? Otóż HTML, to skrót od HyperText Markup Language, co oznacza, iż jest on hipertekstowym językiem znaczników. HTML opisuje strukturę strony internetowej, a jego elementami składowymi są znaczniki. Pamiętajcie, iż HTML nie jest językiem programowania, bo nie można w nim wykonywać np. obliczeń. Bardzo fajną i jasną definicję HTML podaje Wikipedia, dlatego pozwolę sobie ją tutaj przytoczyć:
HTML pozwala opisać strukturę informacji zawartych wewnątrz strony internetowej, nadając znaczenie poszczególnym fragmentom tekstu – formując hiperłącza, akapity, nagłówki, listy – oraz osadza w tekście dokumentu obiekty plikowe np. multimedia bądź elementy baz danych np. interaktywne formularze danych.
HTML umożliwia określenie wyglądu dokumentu w przeglądarce internetowej. Do szczegółowego opisu formatowania akapitów, nagłówków, użytych czcionek i kolorów, zalecane jest wykorzystywanie kaskadowych arkuszy stylów.
Link do źródła cytatu
Jak widzicie, HTML pozwala nam zbudować strukturę, czyli szkielet np. naszej strony internetowej. To dzięki HTML teraz czytasz ten wpis. Akurat jesteś na akapicie zapisanym mniejszym fontem, co oznacza, iż ten fragment jest prawdopodobnie paragrafem. Tytuły poszczególnych sekcji w tym wpisie to nagłówki. I właśnie to wszystko zapisane jest w HTML. Do stylowania, czyli określania wyglądu (np. koloru czy rodzaju fontu) będą nam służyć kaskadowe arkusze stylów, czyli CSS, ale to dokładniej omówimy jutro. Teraz powróćmy do HTML.
Jak wygląda HTML?
Fajnie jest sobie napisać, iż HTML określa strukturę, ale wiem, iż prawdopodobnie za bardzo Wam to nic nie mówi. Oczywiście, wiecie, co to struktura, ale pewnie znaczniki już Wam kilka mówią, jeżeli nie mieliście wcześniej do czynienia z HTML. Także czas na mały eksperyment! W dowolnym miejscu tej strony naciśnijcie prawy przycisk myszy, zobaczycie menu i teraz (w zależności od języka) kliknijcie na opcję Zbadaj albo Inspect. Waszym oczom powinno ukazać się coś takiego:
To narzędzia deweloperskie przeglądarki, dzięki którym możecie obejrzeć strukturę dowolnej strony. W pierwszej zakładce, czyli Elements lub Elementy widzicie strukturę HTML. Spójrzcie dokładnie, a zobaczycie wspomniane wyżej znaczniki. Spróbujcie odszukać znacznik, to on właśnie okala całą strukturę dokumentu. Spójrzcie dalej, powinniście móc zidentyfikować takie znaczniki jak np. <head> czy <body>. Jak pewnie się domyślacie, w <head> umieścimy informacje dotyczące samej strony (np. w jakim języku jest pisana), tutaj też będzie podłączać różne zewnętrzne pliki. Z kolei w <body> umieścimy kolejne znaczniki, które będą już stanowiły faktyczną strukturę naszej strony. Czyli będą tam sekcje, nagłówki, paragrafy, obrazki i tak dalej. Na razie nie musicie martwić się o to, co umieścić w head, a co w body, ponieważ na Codepen, mamy tylko body dokumentu, więc od razu wpisujecie tam to, co chcecie mieć pokazane na Waszej stronie. Na razie nie będziemy sami tworzyć dokumentu HTML od zera, ale wykorzystamy możliwości, jakie daje nam Codepen. Gotowi?
Twoja pierwsza linijka kodu
Wiem, iż zadania miały być na końcu (i będą), ale nie mogę się oprzeć, by pokazać Wam jak najszybciej, jak napisać swoją pierwszą linijkę kodu! Czego nam potrzeba? Odrobinki wiedzy na początek. Popatrzcie raz jeszcze na strukturę dokumentu w narzędziach deweloperskich. Widać tam znaczniki. Zwróćcie uwagę, iż znacznik trzeba otworzyć i potem zamknąć. Przeglądarka musi wiedzieć, kiedy nasz znaczniki się kończy i kiedy zaczyna, aby odpowiednio pokazać jego zawartość. Naszym pierwszym znacznikiem będzie nagłówek, czyli header opisywany znacznikiem <h1></h1>. W HTML mamy kilka rozmiarów nagłówków, od h1 do h6, gdzie h1 jest największy, a h6 najmniejszy. My zaczniemy od największego!
Po założeniu konta na Codepen kliknijcie w prawym górnym roku na Create, a następnie wybierzcie New pen. Pokaże Wam się ekran z nowym projektem, zobaczycie, iż widok jest podzielony na cztery części. Trzy górne sekcje to kod, sekcja pod spodem to efekt Waszej pracy. My dzisiaj będziemy pracować w pierwszym oknie, tym z napisem HTML. To tam umieścimy nasz pierwszy znacznik. Śmiało, wpiszcie poniższy kod do okienka z HTML następującą treść <h1>Dzień dobry!</h1>. I co się stało? Widzicie Wasz napis w dolnej sekcji projektu? Powinniście widzieć coś takiego:
Zwróćcie uwagę, iż Codepen inaczej koloruje znacznik, a inaczej jego treść. Dzięki temu łatwo zauważyć, co jest znacznikiem, czyli tego nie będzie widać na stronie – to znaczy nie zobaczymy nigdzie na stronie napisu o treści h1, ale zobaczymy to, co znacznik h1 ma w sobie, czyli nasz napis Dzień dobry!
Podstawowe znaczniki
Mamy już nagłówek, ale fajnie byłoby też dodać trochę treści do naszej strony. Do tego służą nam np. paragrafy. Ale to nie wszystko! Przecież super byłoby też umieścić na stronie jakieś zdjęcia czy linki. Jak to zrobić? Zaraz się dowiecie! Wejdźcie tutaj i zobaczcie, jakie znaczniki umieściłam w tym prostym projekcie na Codepen. Spróbujcie zidentyfikować je wszystkie i zobaczcie, jak wyglądają. Widzicie coś ciekawego?
Co wyróżnia znaczniki <a> oraz <img>? Zauważcie, iż oba mają tzw. atrybuty. To oznacza, iż w znaczniku podajemy dodatkowe parametry. Dla <a> jest to na przykład adres strony do której przekierowujemy użytkownika. Atrybuty zapisujemy w pierwszej części znacznika, każdy atrybut ma określoną nazwę (tutaj w <a> widzisz href), z kolei parametr atrybutu zawsze podajemy w cudzysłowiu i po znaku równa się. Pamiętajmy, by nie zrobić przypadkiem przerwy między nazwą atrybutu a znakiem równa się, bo przeglądarka nas nie zrozumie!
W taki sam sposób podajemy źródło obrazka w znaczniku <img>, z tym, iż używamy tutaj atrybutu src, który wskazuje na source, czyli źródło. jeżeli tworzylibyśmy projekt lokalnie, moglibyśmy tutaj podać ścieżkę do konkretnego pliku. Jako iż my teraz działamy na Codepen, musimy podać link do danego obrazka. Taki link zyskujemy klikając prawy przyciskiem myszy na obrazek i wybierając opcję Kopiuj adres obrazka. Pamiętajcie, iż bezkarnie można kopiować takie adresy i umieszczać obrazki na stronach tylko w ramach ćwiczeń! Przy faktycznych projektach musimy wziąć pod uwagę prawa autorskie i używać tylko zdjęć, które mają wyraźne wskazane, iż można ich używać
Jeszcze jedna ważna rzecz – zwróćcie uwagę, iż znacznik obrazka składa się tylko z jednej części. Od razu zamykamy znacznik w pierwszej części. Dlaczego tak się dzieje? Otóż wewnątrz znacznika umieszczamy tekst, który ma być widoczny na stronie. W przypadku obrazka to nie ma oczywiście sensu, bo chcemy, by na stronie było widac obrazek, a nie jakiś napis. Dlatego właśnie ten znacznik jest dość specyficzny. Jednak wszyscy chyba znamy sytuację, gdy na jakiejś stronie nie załadowały nam się obrazki. Jako twórca strony internetowej, powinniśmy się przygotować na taką ewentualność i koniecznie zadbać o wskazanie alternatywnego tekstu. W atrybucie alt obrazka podajemy tekst, który ma się pojawić w razie gdyby obrazek nie wyświetlił się na stronie. Alt pomaga także w pozycjonowaniu, a więcej o tym poczytacie tutaj (dla chętnych!).
Zadania na dziś
Koniec teorii! Czas na zadania. Do ich wykonania potrzebne będzie konto na Codepen i dobre chęci Jak pisałam wyżej, rozwiązania zadań pokażę dzisiaj o 21:00 w grupie dedykowanej dla wyzwania.
- Stwórz swój pierwszy projekt na Codepen. W sekcji HTML wypisz swoje imię we wszystkich możliwych rozmiarach nagłówków, czyli od h1 do h6.
- Wstaw do projektu trzy paragrafy i wypełnij je tekstem. jeżeli nie masz pomysłu na treść, użyj generatora tekstu Lorem Ipsum, znajdziesz go na przykład tu albo tu.
- Pod paragrafami umieść linki do czterech wybranych stron internetowych. Wyszukaj, jakiego atrybutu użyć, by sprawić, aby dany link otwierał się w nowym oknie przeglądarki. jeżeli nie idzie Ci szukanie, użyj tej dokumentacji.
- Pod linkami wstaw dwa obrazki. Każdemu z nich ustaw odpowiedni tekst alternatywny.
- Poszukaj, w jaki sposób umieścić w HTML listę. Powinno Ci się udać znaleźć znaczniki odpowiadające za dwa różne typy list. Wypróbuj je w swoim projekcie. Uwaga: wewnątrz znacznika listy będzie trzeba umieścić znaczniki określające jej poszczególne elementy.
Powodzenia!
Zadanie bonusowe (oryginalnie podane podczas live w pierwszej edycji wyzwania)
- Stwórz listę numerowaną z trzema Twoimi ulubionymi filmami.
- Pod tytułem każdego filmu stwórz sublistę (nienumerowaną), w której podasz 3 aktorów/aktorki grające w tym filmie.
- Pod imieniem i nazwiskiem aktora/aktorki umieść jego/jej zdjęcie.
- Zdjęcie ma być jednocześnie linkiem do strony aktora/aktorki na Wikipedii.
Koniecznie podziel się swoimi projektem w grupie na Facebooku. Tam też możesz zadawać pytania w razie problemów A jutro zajmiemy się stylowaniem naszego dokumenty HTML. Dodamy mu trochę kolorów i innych fajnych rzeczy! Widzimy się na blogu z samego rana!
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.
