kodujemywbiurze.pl
1️⃣ js 2️⃣ storage 3️⃣ html 4️⃣ html + js

Plik HTML, nagłówek <h1>, tagi, znaczniki

Stwórzmy nasz pierwszy plik z kodem HTML! Niestety, zakładka snippets w przeglądarce jest dostosowana tylko do plików zawierających kod JavaScript, dlatego nie możemy tam zapisać pliku z kodem HTML.

W prawdziwym programistycznym świecie używamy w tym celu edytorów kodu (pobranych na komputer lub w wersji online), natomiast my na razie nie chcemy bawić się w te rzeczy, żeby nic dodatkowo nie rozpraszało naszej uwagi (później będziemy z tego korzystać, nie martw się), dlatego użyjemy najprostszego narzędzia: wbudowanej aplikacji Windows pt. Notatnik.

Wyszukaj aplikację Notatnik na swoim komputerze i uruchom ją. Zobaczysz totalnie minimalistyczne okno aplikacji.

Teoretycznie powinniśmy w tej chwili zainicjować plik HTML poniższym kodem (nie rób tego na razie), który jest w pewnym sensie "kontenerem" dla kodu naszej aplikacji:

<!DOCTYPE html>
<html>
  <head>
  </head>

  <body>
  </body>
</html>

Ale... możemy na razie zrobić coś innego, co również zadziała, a jednocześnie nie przeciąży naszej percepcji 😜 Stwórzmy nasz pierwszy nagłówek w HTML, który de facto jest tytułem naszej aplikacji, wpisując poniższy kod w pliku:

<h1>Twoje zadania</h1>

<h1> jest znacznikiem lub inaczej tagiem HTML, który mówi przeglądarce: wyświetl nagłówek o poziomie 1 (czyli ten największy).

Tagi są podstawowym budulcem strony internetowej. Są jak klocki lego, z których układamy wieżę - dosłownie, ponieważ kod HTML, podobnie jak JavaScript, jest uruchamiany przez przeglądarkę od góry do dołu.

Jak widzisz, tagi są ujęte w < >, przy czym najpierw używamy tagu otwarcia, czyli < >, potem wpisujemy treść, którą chcemy pokazać na ekranie, a potem używamy tagu zamknięcia </>.

Sprawdźmy, co w ogóle robi ten kod! Kliknij w zakładkę Plik aplikacji Notatnik i z rozwijanego menu wybierz opcję Zapisz jako, po czym wpisz następującą nazwę pliku: todo-app.html (.html jest rozszerzeniem pliku, które oznacza, że plik zawiera kod HTML), natomiast w rozwijanym polu Zapisz jako typ wybierz Wszystkie pliki, by można było zapisać plik w dowolnym formacie. Po czym sprawdź, w jakiej lokalizacji zostanie zapisany plik (sugeruję wybrać pulpit, ponieważ tak będzie łatwiej zapamiętać) i kliknij Zapisz.

Teraz zajrzyj na pulpit swojego urządzenia i powinieneś/aś szukać ikonki Twojej domyślnej przeglądarki (np. Chrome), ale z nazwą todo-app. To jest właśnie nasz plik! Dlaczego ma ikonkę przeglądarki? A no właśnie dlatego, że zapisaliśmy go z rozszerzeniem .html, co jest sygnałem dla komputera, że jest to... strona internetowa!

Kliknij w plik dwa razy myszką i zobaczysz, że otworzy Ci się okno Twojej domyślnej przeglądarki, a na ekranie zobaczysz nagłówek Twoje zadania!

Mam nadzieję, że Twoją domyślną przeglądarką jest Chrome, jeśli nie, to możesz kilknąć w plik prawym przyciskiem myszki i wybrać opcję Otwórz za pomocą, po czym wybrać Chrome. Dlaczego? Dlatego, że za chwilę "podepniemy" plik JavaScript z zakładki snippets, który jest dostępny tylko w Chromie i Edge.

Gratuluję! Właśnie odpaliłeś/aś własną lokalną (ponieważ dostępną tylko na Twoim komputerze) stronę internetową (dokładniej mówiąc plik w przeglądarce, ale nie wchodźmy w szczegóły).

Jeszcze raz zaznaczę, że tę jedyną linijkę kodu powinniśmy zawrzeć w środku większego kodu, który napisałem powyżej, ale na razie nasze rozwiązanie również działa, więc skupmy się na samym HTMLu.

Wiemy już, co to są znaczniki oraz jak utworzyć nagłówek. Jest 6 poziomów nagłówków, których możemy używać w HTMLu:

<h1>Twoje zadania</h1>
<h2>Twoje zadania</h2>
<h3>Twoje zadania</h3>
<h4>Twoje zadania</h4>
<h5>Twoje zadania</h5>
<h6>Twoje zadania</h6>

Wpisz powyższy kod do pliku HTML, zapisz go (Ctrl+S) i odśwież okno przeglądarki, w której działa nasz plik - zobaczysz, że zmiany w kodzie zostały wygenerowane.

Łatwizna, co? Po JavaScripcie na pewno!

Istnieje mnóstwo tagów HTML i nie znam ich wszystkich na pamięć, mimo że koduję od 3 lat. Ty również nie musisz, będziemy zatem poznawać tylko te tagi które są potrzebne nam do stworzenia naszej aplikacji jak najszybciej!

Żeby ładnie oddzielić tytuł aplikacji od zadań, które będziemy wyświetlać pod spodem, dodajmy poziomę linię:

<h1>Twoje zadania</h1>

<hr>

Wpisz powyższy kod do pliku HTML, zapisz go (Ctrl+S) i odśwież okno przeglądarki. Zobaczysz, że pod tytułem pojawiła się linia. Zwróć uwagę na to, że tag <hr> nie ma tagu zamykającego, ponieważ... nie jest potrzebny - nie przechowuje żadnej treści, jak np. nagłówek.