Gdzie szukać informacji o HTML?

Za tydzień zapomnisz, jak nazywał się atrybut, który otwiera link w nowej karcie - i to zupełnie normalne. Nawet doświadczeni programiści nie pamiętają wszystkich znaczników. Różnią się od początkujących tym, że wiedzą, gdzie i jak szybko to sprawdzić.

Nauka HTML jest procesem, który wymaga nie tylko zdobycia wiedzy, ale także rozwinięcia umiejętności poszukiwania informacji. W dobie internetu mamy dostęp do ogromnej liczby źródeł, które mogą pomóc nam w tym procesie. Oto kilka rekomendowanych miejsc, gdzie warto szukać informacji o HTML.

MDN Web Docs - biblioteka dokumentacji

MDN Web Docs (Mozilla Developer Network) to jedno z najbardziej kompleksowych źródeł wiedzy na temat technologii internetowych, w tym HTML, CSS, JavaScript i innych. Zawiera przewodniki, tutoriale, przykłady kodu i wiele więcej. To miejsce, które z pewnością warto odwiedzić, jeśli chcesz pogłębić swoją wiedzę o HTML - taka Biblioteka Aleksandryjska sieci.

Każda strona o znaczniku ma na MDN podobny układ: opis, lista atrybutów, przykłady, a na końcu tabela zgodności z przeglądarkami (Browser compatibility). Najszybciej trafisz na właściwą stronę, wpisując w wyszukiwarkę słowo mdn i nazwę elementu, np. mdn img.

W3Schools - pierwsze kroki

W3Schools to strona edukacyjna oferująca kursy i poradniki dla początkujących i zaawansowanych programistów webowych. Zasób ten jest powszechnie uznawany za bardzo przyjazny dla początkujących, z łatwo zrozumiałymi przewodnikami i przykładami, które uruchomisz przyciskiem "Try it Yourself". Traktuj go jak szybką ściągę, a gdy potrzebujesz szczegółów, sprawdzaj je w MDN.

HTMLreference.io - przykłady znaczników

HTMLreference.io to zasób, który skupia się na dostarczaniu konkretnych przykładów użycia wszystkich dostępnych znaczników HTML. To doskonałe miejsce, gdy szukasz informacji o konkretnym elemencie HTML.

YouTube - wiedza w formie wideo

YouTube jest skarbnicą wiedzy w formie wideo, które mogą pomóc Ci zrozumieć i nauczyć się HTML. Można tam znaleźć wiele kanałów edukacyjnych oferujących tutoriale dotyczące HTML. Przykładowe kanały to: Traversy Media, The Net Ninja, Academind czy Google Chrome Developers. Zwracaj uwagę na datę nagrania - HTML zmienia się powoli, ale film sprzed dziesięciu lat może pokazywać praktyki, z których dziś się rezygnuje.

Jak szukać skutecznie?

Zamiast pytać ogólnie, opisz problem kilkoma słowami, najlepiej po angielsku, bo w tym języku powstaje najwięcej materiałów. Pytanie "jak otworzyć link w nowej karcie" zamień na html link new tab, otwórz wynik z MDN i przetestuj znalezione rozwiązanie:

1<a href="https://developer.mozilla.org" target="_blank">Dokumentacja MDN</a>

Atrybut target="_blank" otwiera link w nowej karcie - dokładnie to znajdziesz na stronie MDN o elemencie <a>. Adres i tekst linku zostały bez zmian, zmieniło się tylko miejsce, w którym link się otworzy. Gdy utkniesz na komunikacie o błędzie, wklej jego treść do wyszukiwarki - na forach takich jak Stack Overflow ktoś zwykle miał już ten sam problem. Możesz też zapytać asystenta AI w prawym dolnym rogu ekranu. Moja rada: każdą odpowiedź, także od AI, sprawdź w dokumentacji i w edytorze, zanim uznasz ją za pewną.

Ćwiczenie: audio i wideo w dokumentacji

Wypróbuj te umiejętności od razu. W lekcji o plikach wideo i audio poznałeś elementy <video> i <audio>. Znajdź w MDN stronę elementu <video> i odszukaj odpowiedzi na dwa pytania: co robi atrybut muted i dlaczego przeglądarki często blokują automatyczne odtwarzanie filmu z dźwiękiem? To dokładnie ten rodzaj szukania, który przyda Ci się w każdym kolejnym module.

Co dalej z HTML?

Pamiętaj, że nauka programowania to ciągły proces. Nie bój się zadawać pytań, eksperymentować z kodem i robić błędy - to wszystko jest częścią ścieżki nauki. Kluczem do sukcesu jest cierpliwość, praktyka i chęć do nauki.

HTML na pewno będzie pojawiał się jeszcze w kolejnych modułach tego szkolenia, więc nie martw się, jeśli nie wszystko jest dla Ciebie jasne. Wszystko stanie się jasne w swoim czasie - już w następnym module zaczniesz nadawać swoim stronom wygląd za pomocą CSS.

W edytorze poniżej znajdziesz listę źródeł z linkami i wskazówkami. Dopisz do niej własne ulubione strony i sprawdź, czy każdy link działa:

1<!DOCTYPE html>
2<html lang="pl">
3<head>
4    <meta charset="UTF-8">
5    <title>Źródła wiedzy o HTML</title>
6</head>
7<body>
8    <h1>Gdzie szukać informacji o HTML?</h1>
9
10    <h2>Najlepsze źródła wiedzy</h2>
11    <ol>
12        <li>
13            <strong>MDN Web Docs</strong>
14            <p>Najlepsze kompendium wiedzy o HTML, CSS i JS.</p>
15            <a href="https://developer.mozilla.org" target="_blank">developer.mozilla.org</a>
16        </li>
17        <li>
18            <strong>W3Schools</strong>
19            <p>Tutoriale z interaktywnymi przykładami.</p>
20            <a href="https://www.w3schools.com" target="_blank">w3schools.com</a>
21        </li>
22        <li>
23            <strong>Stack Overflow</strong>
24            <p>Pytania i odpowiedzi społeczności programistów.</p>
25            <a href="https://stackoverflow.com" target="_blank">stackoverflow.com</a>
26        </li>
27        <li>
28            <strong>CSS-Tricks</strong>
29            <p>Artykuły i poradniki o CSS i HTML.</p>
30            <a href="https://css-tricks.com" target="_blank">css-tricks.com</a>
31        </li>
32    </ol>
33
34    <h2>Wskazówki</h2>
35    <ul>
36        <li>Ćwicz regularnie - pisz kod codziennie</li>
37        <li>Czytaj dokumentację MDN</li>
38        <li>Buduj własne projekty</li>
39        <li>Korzystaj z DevTools w przeglądarce (F12)</li>
40    </ul>
41</body>
42</html>

Pamiętaj: skryba nie nosił całej wiedzy Egiptu w głowie - wiedział, w którym zwoju Biblioteki Aleksandryjskiej jej szukać, i tego samego uczysz się teraz Ty.