Kodujemy w biurze | Szablon pliku HTML

Szablon pliku HTML

Kod naszej dotychczasowej strony działa w przeglądarce, jednak jest skrótem myślowym. Poprawniej byłoby go umieścić w poniższym kodzie w tagu <body>, który dostarcza przeglądarce więcej informacji:

<!DOCTYPE html>
<html>
  <head>
    <title>Todo App | kodujemywbiurze.pl</title>
  </head>

  <body>
    <h1>Twoje zadania</h1>

    <hr>

    <button>dodaj zadanie</button>

    <ul>
      <li>zrobić kawę <button>usuń</button></li>
      <li>wypić jogurt <button>usuń</button></li>
      <li>sprawdzić maila <button>usuń</button></li>
    </ul>

    <button>wyczyść listę</button>
  </body>
</html>

Co się dzieje w powyższym kodzie? W gruncie rzeczy, na razie musisz zrozumieć tylko kilka kwestii:

<!DOCTYPE html> mówi przeglądarce, że dany plik jest plikiem HTML, czyli stroną internetową;
całość kodu w pliku HTML musi być osadzona pomiędzy tagami <html></html> - cokolwiek będzie poza nim, nie zadziała, ani nie zostanie wyświetlone;
pomiędzy tagami <head></head> możemy umiejscowić to, co nie jest wyświetlane w przeglądarce, a jednak jest istotne dla funkcjonowania strony www:
- tzw. metadane strony www, tj.:
  - autor,
  - tytuł (<title>, który przy okazji wyświetli się w zakładce przeglądarki),
  - słowa kluczowe,
  - opis,
- ale także możemy tu podpinać różne pliki, w tym CSS i JavaScript,
- oraz pobierać dane;
z kolei to, co zostanie osadzone w tagu <body>, zostanie wyświetlone w przeglądarce, dlatego właśnie tu umieściliśmy kod reprezentujący naszą aplikację; w tagu tym możemy także podpiąć kod JavaScript, ale o tym powiemy później.

Dlaczego nasz kod zadziałał w przeglądarce, mimo że nie umieściliśmy go w tym szablonie (HTML template)? Dlatego że przeglądarka zrobiła to za nas!

Ale... nie znaczy to, że możemy zawsze tak postępować. Tak naprawdę... nigdy nie powinniśmy tak postępować. A zrobiłem wyjątek tylko po to, by pokazać Wam od razu najciekawsze i najbardziej praktyczne rzeczy, które działają natychmiast.

Wiem, że jesteście niecierpliwi i po każdej kolejnej lekcji zastanawiacie się nad tym, czy warto w ogóle dalej brnąć, więc próbuję wszelako Was zachęcić do dalszego kodowania, umożliwiając jak najszybsze rezultaty. Musicie to uwzględniać.

Dlatego, najbezpieczniej jest zawsze swój kod HTML umieścić w poniższym minimalistycznym szablonie w tagu <body> (możecie go zawsze skopiować - nie musicie tego przepisywać za każdym razem w swoich aplikacjach):

<!DOCTYPE html>
<html>
  <head>
    <title>Tutaj wpisz tytuł swojej strony</title>
  </head>

  <body>
    <!-- tutaj pisz swój kod HTML (przy okazji to jest komentarz w HTML) -->
  </body>
</html>