Początki z HTML i CSS
1. Jak działa strona internetowa?
Każda strona internetowa składa się z plików o rozszerzeniu HTML. W tych plikach znajduje się struktura i treść danej witryny. Oprócz tego, strony mogą używać plików CSS (odpowiedzialnych za nadawanie wyglądu elementom HTML) i JavaScript (do tworzenia dynamicznych efektów na stronach). W tym Wyzwaniu skupimy się głównie na dwóch pierwszych typach plików (HTML i CSS). Dodamy też krótki kod JavaScirpt, który odpowie za funkcjonowanie aplikacji.
2. Gdzie można tworzyć strony?
Profesjonalni programiści używają w swojej pracy zaawansowanych edytorów kodu. Wielu z nich jednak, gdy chce szybko sprawdzić jakieś rozwiązanie lub przesłać komuś kawałek kodu, używa edytorów dostępnych w internecie. Zaletą tego rozwiązania jest to, że nie trzeba instalować na komputerze żadnych dodatkowych programów (wszystko dzieje się z poziomu przeglądarki) oraz nie ma konieczności żmudnej konfiguracji tzw. środowiska developerskiego.
W czasie całego Wyzwania będziemy używać jednego z takich edytorów: Codepen. Codepen udostępnia "piaskownice" developerskie (ang. pens), czyli gotowe do użytku środowisko, gdzie możemy od razu zacząć pisać nasz kod.
Przygotowanie do kodowania
Aby móc zapisać swoją pracę, będzie Ci potrzebne darmowe konto na Codepen – możesz założyć je tutaj. Dzięki temu w Twoim profilu będą zapisywać się wszystkie stworzone przez Ciebie projekty.
Po założeniu konta i zalogowaniu się do Codepen, stwórz nowy projekt – wystarczy że wejdziesz pod adres https://codepen.io/pen/.
Na razie pen jest pusty, ale nie przejmuj się – tak ma być.
Witaj w edytorze! Co tu widzimy?
- Nazwa Twojego pena – możesz ją zmienić, klikając na ikonkę ołówka tuż obok.
- "Pudełka", w których wpisujesz swój kod. Jak widzisz, mamy osobne "pudełko" na każdy plik: HTML, CSS i JS (JavaScript).
- Podgląd – tu wyświetlają się efekty Twojej pracy. Na razie podgląd jest pusty, ale zaraz to zmienimy :)
Dodatkowo, w górnej belce znajduje się bardzo przydatny przycisk Save, zapisujący aktualny stan projektu. Nie zapomnij korzystać z niego w trakcie pracy :)
W każdej chwili możesz zmienić układ edytora, klikając "Change View" w górnym pasku i wybierając inny:
Zanim przejdziemy dalej, musimy zmienić jedno ustawienie – kliknij ikonę koła zębatego przy nagłówku "pudełka" CSS. Otworzy się okno ustawień, otwarte na zakładce CSS. Zmień następujące ustawienia:
- CSS Preprocessor: SCSS
- CSS Base: Normalize
- Vendor Prefixes: Autoprefixer
To wszystko. Możesz zamknąć ustawienia za pomocą zielonego guzika "Close" u góry. Możemy teraz zacząć pracować nad naszym projektem!
HTML, czyli treść
Kod HTML odpowiada za strukturę i treść strony. Oznacza to, że właśnie za pomocą HTML informujemy przeglądarkę, które elementy na naszej stronie są akapitami tekstu, które nagłówkami, a które na przykład obrazkami. W kodzie HTML znajduje się też sama treść strony, czyli to, co możemy na niej przeczytać.
Zadanie 1
Pierwszym zadaniem będzie wklejenie poniższego kodu do "pudełka" HTML w swoim penie:
Przyjrzyjmy się temu fragmentowi kodu. Elementy otoczone ostrymi nawiasami to tak zwane tagi. Są to podstawowe bloki budujące kod HTML. W naszym kodzie mamy kilka typów tagów: div, h1 czy p. Każdy z nich ma swoje znaczenie i informuje przeglądarkę, jaki typ treści jest w nich zawarty. Przyjrzyj się, jak zbudowany jest tag:
W powyższym przykładzie mamy:
- Tag otwierający
h1, czyli nagłówek (header) stopnia pierwszego (największy). W HTML mamy sześć stopni nagłówków, odh1doh6. Tag otoczony jest ostrymi nawiasami. - Treść elementu – w tym przypadku "Hello World". Treść znajduje się między tagiem otwierającym a zamykającym.
- Tag zamykający
h1. Wygląda tak samo jak tag otwierający, z tą różnicą, że po pierwszym ostrym nawiasie ma znak / (slash).
Ważne: zamykanie tagów
Zdecydowana większość tagów występuje w parach: potrzebny jest tag otwierający i zamykający. Jeżeli tag potrzebuje zamknięcia, nie możesz go pominąć, bo skończy się to błędami na stronie.
Aby nie zapomnieć o zamknięciu tagu w trakcie pisania kodu, dobrze jest umieścić od razu tag otwierający i zamykający, i dopiero potem wpisać między nimi treść.
Dodatkowo, tag może mieć atrybuty. W tym przypadku nadaliśmy tagowi klasę "main-title". Do klas wrócimy już za chwilę.
Spójrz, jak po wklejeniu kodu zmienił się podgląd w edytorze.
Przeglądarka nadaje domyślny wygląd dla elementów kodu HTML, co możesz zobaczyć w podglądzie projektu w moment po wstawieniu kodu HTML. Nie wygląda to może pięknie, ale od razu widzimy, które teksty są nagłówkami i że zadania do zrobienia są na liście wypunktowanej.
Zadanie 2
Zmodyfikujmy teraz nieco nasz HTML. Nie zmieniaj niczego, co znajduje się pomiędzy znakami < oraz >.
Możesz za to zmieniać wszystko, co znajduje się pomiędzy znacznikami. Spójrzmy na przykład na tę linijkę kodu:
<h1> Hangman<</h1>. Nie edytujemy znaczników <h1> oraz </h1>, ale możesz zmienić "Hangman” na dowolny inny tekst np. “Gra w wisielca”. Jeśli chcesz dodać kolejny akapit, najlepiej zrobić to dodając nową linię za znacznikiem
, i wstawiając do niej taki kod:To jest kolejny akapit
Dostosuj teraz całą treść swojej gry (np. dodaj instrukcję, albo wyjaśnienie zasad) jak tylko chcesz!
CSS, czyli wygląd
Teraz kiedy masz już gotową wstępną treść swojej gry, to możemy dodać kod odpowiedzialny za jej wygląd!
W "pudełku" o nazwie CSS wstaw następujący kod::
Jak piszemy CSS?
Podobnie jak elementy HTML, reguły CSS mają własną strukturę, której należy się trzymać, aby kod działał poprawnie. Spójrz na przykład poniżej:
Z czego składa się reguła CSS?
- selektor – element HTML, na który ma działać dany styl. W tym przykładzie są to wszystkie elementy
<p>na stronie. - nawias klamrowy (
{ }) – występuje zaraz po selektorze. Umieszczamy w nim wszystkie właściwości CSS dla danego elementu. - właściwość (ang. property) – określa, co chcemy zmienić w wyglądzie danego elementu HTML. Po właściwości wstawiamy dwukropek. W naszym przykładzie użyliśmy właściwości
color, odpowiedzialnej za kolor czcionki w elemencie. - wartość (ang. value) – określa, w jaki sposób chcemy zmodyfikować daną właściwość. W przykładzie nadaliśmy naszej właściwości wartość
green, co oznacza, że kolor czcionki zmieni się na zielony. Po wartości zawsze stawiamy średnik.
Jeżeli chcemy przypisać więcej niż jedną właściwość do selektora, robimy to w ten sposób:
Mamy już dodane pewne podstawowe style, ale to jeszcze nie wszystko. Pewnie już widzisz, że Twoja gra nabrała kolorów i zyskała nowe fonty, oraz ich wielkości. Tło zostało zmienione na zielony itp.
W następnej lekcji zaczniesz stylować swoją grę, żeby wyglądała tak jak chcesz.