Startujemy z materiałem ❗
Wszystkie strony internetowe są trzymane w plikach o rozszerzeniach .html. Zawartość plików napisanej w języku HTML – to zwykły tekst. Jednak, aby nadać temu tekstowi strukturę lub inny wygląd wprowadza się, tzn. znaczniki dokumentu HTML (elementy < > – znak mniejszości i większości).
– zawartość znacznika wskazuję przeglądarce co ma się stać z treścią, którą zawiera.
Za chwilę zobrazujemy sobie teorię na przykładzie, ale przed tym, przygotujmy edytor online, na którym w najbliższym czasie, będziemy wykonywać ćwiczenia.
Codepen – edytor online 📝💻
Od początku bootcampa w którym uczestniczyłem używaliśmy Codepena do przykładów, ćwiczeń a nawet wysyłaliśmy mentorom zadania do sprawdzenia w nim napisane. Uważam, że Codepen spełnia swoją rolę w 100%. Przede wszystkim edytor jest intuicyjny, dzięki temu łatwo w nim pisać kod.
Na moim blogu, również będę go stosować. Oczywiście w dalszej części nauki wprowadzę lokalny edytor aby móc tworzyć bardziej zaawansowane projekty, ale o tym później 🙂
Przejdźmy zatem do edytora klikając w link – Codepena. Następnie możemy od razu kodować, klikając na przycisk pod logiem “Start coding”. Wiąże się to z niezapisaniem projektu, aby móc w przyszłości wrócić do kodu. Zatem polecam utworzyć konto (Sign Up), bądź zalogować się za pomocą facebooka.
Finalnie po kliknięciu na “Pen”, ukazuje się nam edytor. Składa się on z trzech części. Od lewej zaczynając mamy edytor HTML, w środku CSS a po prawej JS. Tak więc, mamy gotowe narzędzie do prawdziwego kodowania 💻💪
Wróćmy do przykładu…
Możemy napisać pierwszy przykład kodu HTML. Jak przystało na każdy początek kodowania, stwórzmy sobie napis “Hello World!”
See the Pen Przykład pierwszego kodu by Daniel Minschinski (@daniel-minschinski) on CodePen 1
W edytorze przykładowy napis otoczyłem znacznikiem tzn. pochylenie tekstu, kursywa.
Poznajmy działanie znacznika
Przeglądarka przetwarzając kod i treść (tekst) naszej strony, trafia na swej drodze znaczniki. Przykładowy nasz znacznik (znacznik otwierający pochylenie tekstu, kursywe) informuje przeglądarkę o tekście pochylonym. Znaczniki które poznamy bądź utrwalimy, działają na tej samej zasadzie.
Odczytując kod, przeglądarka trafi na znacznik zamykający pochylenie tekstu , oznaczający o zakończenie kursywy.
Fakt jest jeden – prawie każdy znacznik HTML, wymaga użycia znacznika zamykającego. O wyjątkach napiszę później.
Podsumowując, aby np. słowo “blog” było “pochylone” należy napisać kod: blog. Znaczniki piszemy wyłącznie małymi literami.
Ćwiczenie
- Stwórz nowego “pena”, wklej do edytora HTML zdanie – “Dzisiaj rozpoczynam przygodę z HTML”.
- W edytorze na słowo “HTML” dodaj znaczniki pochylenia tekstu.
- Następnie chcielibyśmy pogrubić słowo “Dzisiaj”. W tym celu mamy do tego polecenia znaczniki . Użyj ich, do wykonania tego ćwiczenia.
Zagnieżdzanie znaczników, akapity…
Następnym znacznikiem, którym się zajmiemy to
, który tworzy akapity tekstu. Używamy go tak samo, jak poznane dwa wcześniej –
przykład akapitu
.
Zagnieżdżać znaczniki można jeden w drugi. Przykładowo jakbyśmy, mniejszą szklankę włożyli do większej.
A tak jakby zobrazować to na przykładzie kodu:
See the Pen CodePen Home Zagnieżdżanie znaczników by Daniel Minschinski (@daniel-minschinski) on CodePen 1
Ćwiczenie
- Skopiuj do nowego “pena” następujące zdania, oraz wykonaj polecenia z nawiasów:
“Zdanie pierwsze z grubym tekstem.”
(zdanie oznacz znacznikami akapitu oraz słowo “grubym” znacznikami, aby pogrubić),
“Zdanie drugie z pochylonym tekstem.”
(zdanie oznacz znacznikami akapitu oraz słowo “pochylonym” znacznikami, aby pochylić),
Dodajemy “enter” do kodu
Poznaliśmy już znaczniki dla akapitu, pogrubienia oraz pochylenia tekstu. Jednak, co jeśli chcielibyśmy przenieść tekst do nowej linii w ramach jednego akapitu?
W HTML, aby przenieść tekst do kolejnego wiersza, należy zastosować znacznik
. Jest to znacznik o którym wspomniałem, którego nie zamykamy.
Ćwiczenie
- Skopiuj do nowego “pena” następujące zdania, oraz wykonaj polecenia z nawiasów:
“To jest zdanie pierwsze, podzielone na pół za pomocą znacznika”
(wstaw znaczniki akapitu zdania oraz umieść znacznik
po przecinku),
“To jest drugie zdanie, nad którym wstawiliśmy znacznik oddzielający”
(wstaw znacznik
nad zdaniem)
Zapewne zauważyliście, że gdy mamy dodane dwa zdania w znacznikach
, to przeglądarka automatycznie dodaję nam wiersz odstępu. Dodając między akapitami znacznik
dodaje nam kolejną linie przerwy.
Nagłówki na stronie WWW
Myślę, że rzucające się w oczy na moim blogu są właśnie nagłówki. Nadają się do tytułowania tekstów. W sześciu rozmiarach występują w HTML.
Znacznik nagłówka ma postać
do
. Rozmiar nagłówka będzie największy dla wartości 1, a najmniejszy dla wartości 6. Wartość dla znacznika otwierającego i zamykającego musi być taki sam.
Ćwiczenie
- Skopiuj do nowego “pena” następujące zdania, oraz wykonaj polecenia z nawiasów:
“Największy nagłówek”
(wstaw znacznik otwierający i zamykający h1)
“Mniejszy nagłówek od h1”
(wstaw znacznik otwierający i zamykający h2)
“Mniejszy nagłówek od h2”
(wstaw znacznik otwierający i zamykający h3)
“Mniejszy nagłówek od h3”
(wstaw znacznik otwierający i zamykający h4)
“Mniejszy nagłówek od h4”
(wstaw znacznik otwierający i zamykający h5)
“Mniejszy nagłówek od h5”
(wstaw znacznik otwierający i zamykający h6)
Deklaracja strony www
Każdy dokument HTML w wersji 5 musi zawsze zawierać na samym początku kodu deklarację tej wersji, poprzez zapis:. Jest to znacznik samo zamykający się. W dokumencie występuję tylko raz!.
Następnie umieszczamy znacznik , oraz w nowej linii jego zamknięcie . Ten znacznik również występuję tylko raz na każdej stronie. Między tymi znacznikami, umieszczamy całą zawartość dokumentu HTML. Poniżej dodaję deklarację dokumentu html.
See the Pen Deklaracja strony www by Daniel Minschinski (@daniel-minschinski) on CodePen 1
Nagłówek strony
Znacznik generuje nagłówek strony. Umieszczamy go zawsze w środku znaczników. Występuje tylko raz w danym dokumencie.
Nagłówek strony zawiera informację dla przeglądarki w postaci zagnieżdżonych w nim innych znaczników.
Jednym z podstawowych znaczników, który możemy umieścić w jest tytuł strony, czyli .
Ćwiczenie
- Uruchom nowego “pena”.
- Dodaj deklarację strony.
- W znacznikach dodaj znaczniki nagłówka strony.
- W nagłówku dodaj tytuł strony. Między znacznikami tytułu wpisz przykładowy tekst.
Zawartość strony, tzn. ciało…
Kolejną strategiczną sekcją w strukturze HTML jest znacznik (ciało, zawartość).
Między znacznikami “ciała”, umieszcza się całą zawartość strony, którą będziemy widzieć w przeglądarce, np. teksty, tabele czy grafiki.
Tak jak powyższe znaczniki, znacznik występuję tylko raz w dokumencie HTML. Zawsze go dodajemy po znaczniku zamykającym .
Ćwiczenie
- Uruchom nowego “pena”.
- Wykonaj deklarację strony z nagłówkiem (tak jak w ostatnim ćwiczeniu).
- Dodaj ciało strony, a w nim przykładowy akapit.
Formatowanie
Zapewne już zdążyliście zauważyć w moich ćwiczeniach, książkach, blogach o programowaniu, pisząc znaczniki, stosujemy tzw. wcięcia (przesunięcia tekstu w prawo). Wcięcia w kodzie, przedstawiają poziom zagnieżdżeń jednego znacznika w innym.
Każde wcięcie należy wykonywać, za pomocą klawisza “Tab”.
Formatowanie kodu za pomocą wcięć, nie wpływa finalnie na wygląd strony, ale poprawia czytelność dla nas, programistów 💻🙂
Codepen oraz lokalne edytory kodu pomagają formatować kod. Same dodają tabulatory, zamykają automatycznie znaczniki, itp. Sami zobaczycie, ile edytory potrafią za nas wykonać czynności 👍
Ćwiczenie
- Uruchom nowego “pena”.
- Wykonaj deklarację strony (deklaracja HTML5, znaczniki html, head, title, body.
- W ciele strony dodaj największy nagłówek. Pod nim przykładowy akapit.
- Następnie dodaj drugi nagłówek – stopień mniejszy. Pod nim przykładowy akapit.
- Pamiętaj o prawidłowym formatowaniu kodu.
Jeżeli chciałbyś/chciałabyś wesprzeć mój blog to zapraszam -> WSPARCIE DLA BLOGA