A więc chcesz nauczyć się HTML.
Świetnie.
To znaczy, że jesteś gotowy odkryć, jak buduje się strony internetowe, dlaczego przeglądarki pokazują rzeczy właśnie tak, a nie inaczej, i dlaczego każdy web developer przynajmniej raz w życiu napisał:
<h1>Cześć, świecie!</h1>
i poczuł się dziwnie potężny.
HTML to fundament internetu.
Bez HTML strony byłyby jak domy bez ścian, książki bez stron albo kawa bez kofeiny.
Technicznie możliwe.
Emocjonalnie nie do zaakceptowania.
Czym jest HTML?
HTML oznacza HyperText Markup Language.
Brzmi skomplikowanie.
Ale spokojnie.
HTML to po prostu język używany do strukturyzowania stron internetowych.
Mówi przeglądarce, czym jest każda część strony:
- to jest nagłówek,
- to jest akapit,
- to jest link,
- to jest obrazek,
- to jest lista,
- to jest formularz,
- to jest przycisk,
- a to prawdopodobnie miejsce, w którym ktoś zapomniał zamknąć tag.
HTML tak naprawdę nie “programuje” zachowania.
On opisuje treść.
Pomyśl o HTML jak o szkielecie strony internetowej.
CSS sprawia, że wygląda ładnie.
JavaScript sprawia, że staje się interaktywna.
Ale HTML mówi:
“Oto treść. Proszę pokazać ją jak porządną stronę internetową.”
Bardzo spokojnie.
Bardzo ważnie.
Bardzo niedoceniane.
Dlaczego warto uczyć się HTML?
Bo web development zaczyna się od HTML.
Zanim zaczniesz budować eleganckie layouty, animacje, dashboardy, aplikacje webowe, API i przyciski robiące podejrzanie sprytne rzeczy, musisz zrozumieć strukturę strony.
HTML to pierwszy klocek.
I tak, może wyglądać prosto.
Ale proste nie znaczy bezużyteczne.
Dom też zaczyna się od cegieł.
Chyba że budujesz go wyłącznie z pewności siebie, czego zdecydowanie nie polecam.
HTML pomaga zrozumieć, jak naprawdę działają strony internetowe.
Daje ci kontrolę nad treścią.
Pozwala tworzyć prawdziwe strony.
I daje ci cudowną możliwość powiedzenia:
“Sam zbudowałem tę stronę.”
To piękne zdanie.
Nawet jeśli pierwsza wersja wygląda, jakby zaprojektowała ją zaspana drukarka.
HTML jest przyjazny dla początkujących
Dobra wiadomość: HTML to jedna z najłatwiejszych technologii na start.
Nie potrzebujesz zaawansowanej matematyki.
Nie potrzebujesz bardzo mocnego komputera.
Nie musisz rozumieć algorytmów, baz danych ani tego, dlaczego JavaScript czasami zachowuje się jak szop wciśnięty do klawiatury.
Możesz zacząć od zwykłego edytora tekstu i przeglądarki.
To wszystko.
Na przykład:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Moja pierwsza strona</title>
</head>
<body>
<h1>Cześć, web!</h1>
<p>To moja pierwsza strona HTML.</p>
</body>
</html>
Zapisz plik.
Otwórz go w przeglądarce.
Boom.
Masz stronę internetową.
Małą?
Tak.
Piękną?
Może jeszcze nie.
Twoją?
Absolutnie.
I to się liczy.
HTML nadaje treści znaczenie
HTML nie służy tylko do wrzucania tekstu na stronę.
Nadaje też znaczenie.
Na przykład nagłówek to nie tylko duży tekst.
To nagłówek.
Akapit to nie przypadkowa grupa słów.
To akapit.
Link to nie tylko niebieski podkreślony tekst ze starożytnego internetu.
To połączenie z inną stroną.
HTML nadaje treści strukturę i znaczenie.
To ważne dla:
- przeglądarek,
- wyszukiwarek,
- narzędzi dostępności,
- czytników ekranu,
- użytkowników,
- i przyszłego ciebie, który otworzy plik za trzy miesiące i zapyta, co przeszły ty miał na myśli.
Dobry HTML sprawia, że strona jest łatwiejsza do czytania, rozumienia, stylowania i utrzymania.
Zły HTML czasami też działa.
Ale trzymanie laptopa na jednym kolanie podczas picia kawy też czasami działa.
To nie znaczy, że to dobry pomysł.
Tagi HTML: klocki strony
HTML jest zbudowany z tagów.
Tagi zwykle występują parami:
<p>To jest akapit.</p>
Pierwszy tag otwiera element.
Drugi tag go zamyka.
Bardzo uprzejmie.
Bardzo porządnie.
Przeważnie.
Niektóre tagi nie potrzebują zamknięcia, na przykład obrazki:
<img src="kot.jpg" alt="Bardzo poważny kot">
Przeglądarka czyta te tagi i buduje stronę.
Ty piszesz instrukcje.
Przeglądarka je wykonuje.
Zazwyczaj.
Jeśli coś wygląda dziwnie, istnieje duża szansa, że zapomniałeś zamknąć tag i przeglądarka teraz grzecznie improwizuje.
Przeglądarki dużo wybaczają.
Czasami za dużo.
Jak nauczyciel, który przepuszcza cię dalej, ale patrzy z rozczarowaniem.
Co możesz stworzyć z HTML?
Z HTML możesz stworzyć strukturę prawie każdej strony internetowej.
Możesz budować:
- strony osobiste,
- posty na blogu,
- landing page,
- strony kursów,
- portfolio,
- dokumentację,
- proste strony internetowe,
- formularze,
- menu nawigacyjne,
- galerie obrazków,
- i pierwszą wersję praktycznie każdego projektu webowego.
Sam HTML nie sprawi, że twoja strona będzie wyglądać elegancko.
To teren CSS.
Sam HTML nie sprawi, że twoja strona będzie interaktywna.
To teren JavaScript.
Ale bez HTML nie ma czego stylować i nie ma z czym wchodzić w interakcję.
HTML to scena.
Cała reszta na niej występuje.
O czym jest ten kurs?
Ten kurs HTML jest przygotowany dla prawdziwych początkujących.
Nie dla “początkujących”, którzy znają już pięć frameworków i od niechcenia mówią rzeczy typu:
“Potrzebuję tylko strategii semantycznego markupu dla tego komponentu.”
Nie.
Dla prawdziwych początkujących.
Dla osób, które chcą zrozumieć, jak działają strony internetowe od podstaw.
W tym kursie nauczysz się:
- czym jest HTML,
- jak zbudowany jest dokument HTML,
- jak działają nagłówki i akapity,
- jak tworzyć linki,
- jak dodawać obrazki,
- jak budować listy,
- jak tworzyć tabele,
- jak działają formularze,
- jak inputy zbierają informacje,
- jak semantyczny HTML ulepsza strony,
- i jak budować proste strony bez poczucia, że internet atakuje cię personalnie.
Będzie praktycznie.
Będzie jasno.
I tak, będzie trochę humoru, bo nauka HTML nie powinna przypominać czytania instrukcji pralki w piwnicy.
HTML i przeglądarka
Jedną z pięknych rzeczy w HTML jest to, że bardzo szybko widać efekty.
Piszesz coś.
Zapisujesz plik.
Odświeżasz przeglądarkę.
Coś się pojawia.
Czasami dokładnie tak, jak się spodziewałeś.
Czasami w sposób, który sprawia, że szepczesz:
“To nie jest to, co zamawiałem.”
To część nauki.
Przeglądarka to twoje pole testowe.
Możesz eksperymentować.
Zmienić nagłówek.
Dodać akapit.
Wstawić link.
Coś zepsuć.
Naprawić.
Zepsuć znowu.
Naprawić lepiej.
To nie porażka.
To web development robi rozgrzewkę.
Twoja pierwsza strona HTML
Podstawowa strona HTML zwykle wygląda tak:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Moja strona</title>
</head>
<body>
<h1>Witaj na mojej stronie</h1>
<p>Tutaj zaczyna się moja przygoda z web developmentem.</p>
<a href="https://example.com">Odwiedź inną stronę</a>
</body>
</html>
Może wyglądać skromnie, ale zawiera już ważne elementy:
<!DOCTYPE html>mówi przeglądarce, że używasz nowoczesnego HTML.<html>obejmuje całą stronę.<head>zawiera informacje o stronie.<body>zawiera to, co ludzie naprawdę widzą.<h1>tworzy główny nagłówek.<p>tworzy akapit.<a>tworzy link.
To początek.
Jeszcze nie glamour.
Ale bardzo potężny.
Jak mały traktor.
Dlaczego HTML nadal jest ważny
Niektórzy myślą, że HTML jest “zbyt podstawowy”.
Ci ludzie się mylą.
Uprzejmie, ale się mylą.
Nowoczesny web development nadal zależy od HTML.
React używa JSX, który bardzo przypomina HTML.
Next.js renderuje HTML.
Astro generuje HTML.
Przeglądarki rozumieją HTML.
Wyszukiwarki czytają HTML.
Czytniki ekranu zależą od dobrze napisanego HTML.
Każda strona, którą odwiedzasz, jest w jakiejś formie zbudowana na HTML.
Więc tak, HTML jest podstawą.
Ale podstawą jak fundament domu.
Zignoruj go, a prędzej czy później coś się zawali.
Może layout.
Może twoja pewność siebie.
Typowe błędy początkujących
Podczas nauki HTML prawdopodobnie popełnisz kilka klasycznych błędów.
Możesz zapomnieć zamknąć tag.
Możesz umieścić elementy w dziwnych miejscach.
Możesz użyć sześciu tagów <br> zamiast porządnych odstępów.
Możesz dodać obrazek i zastanawiać się, dlaczego się nie pokazuje.
Możesz stworzyć link, który nie prowadzi absolutnie nigdzie.
To normalne.
Każdy developer kiedyś napisał bałaganiarski HTML.
Niektórzy nadal to robią.
Ale z praktyką zaczniesz pisać czystszą i bardziej znaczącą strukturę.
Twoje strony będą łatwiejsze do stylowania.
Treść będzie miała więcej sensu.
A przeglądarka będzie miała mniej powodów, żeby improwizować jak jazzman w panice.
Dla kogo jest ten kurs?
Ten kurs jest dla ciebie, jeśli:
- jesteś zupełnie nowy w web developmencie,
- chcesz zbudować swoją pierwszą stronę,
- chcesz zrozumieć, jak zbudowane są strony internetowe,
- próbowałeś już HTML, ale chcesz jaśniejszego wyjaśnienia,
- chcesz nauczyć się podstaw przed przejściem do CSS i JavaScript,
- chcesz kurs dla początkujących, który nie traktuje prostych pytań jak przestępstw.
Proste pytania są dobre.
Proste pytania to sposób, w jaki się uczymy.
Każdy ekspert kiedyś zapytał:
“Dlaczego tego nie widać w przeglądarce?”
Potem odświeżył stronę 17 razy i odkrył, że plik nie został zapisany.
Tradycja.
Dlaczego zacząć od HTML?
Bo HTML szybko daje pewność siebie.
Możesz stworzyć coś widocznego w kilka minut.
To potężne dla początkującego.
Nie uczysz się tylko teorii.
Budujesz.
Nawet mała strona daje satysfakcję, kiedy zrobiłeś ją sam.
A kiedy rozumiesz HTML, CSS staje się łatwiejszy.
JavaScript staje się jaśniejszy.
Frameworki mają więcej sensu.
Cały web zaczyna wyglądać mniej tajemniczo.
Nadal chaotycznie.
Ale mniej tajemniczo.
To postęp.
Gotowy, żeby zacząć?
HTML to pierwszy prawdziwy krok w web development.
Jest wystarczająco prosty, żeby zacząć.
Wystarczająco ważny, żeby traktować go poważnie.
I wystarczająco użyteczny, żeby towarzyszyć ci przez cały czas, kiedy będziesz budować strony.
Na końcu tego kursu zrozumiesz, jak zbudowane są strony internetowe i jak tworzyć własne strony od zera.
Może nie zostaniesz webowym czarodziejem w jedną noc.
Ale przestaniesz widzieć strony internetowe jako magię.
A to już bardzo dobry początek.
Zacznij kurs HTML
Gotowy zbudować swoje pierwsze prawdziwe strony internetowe?
Możesz rozpocząć pełny kurs HTML tutaj:
Weź laptopa.
Weź ciekawość.
Weź cierpliwość.
I tak, przygotuj się mimo wszystko pomagać babci z Wi-Fi.