Podstawy języka HTML. Od czego zacząć naukę HTML?
0
Najczęściej czytane
Podstawy języka HTML
HTML to skrót od angielskiego HyperText Markup Language, co po polsku oznacza HiperTekstowy Język Znaczników (HTJZ, HTJĘZ?). Otóż, jest to język znaczników używany do tworzenia stron internetowych i aplikacji webowych, przynajmniej tej ich części, widocznej w przeglądarce czyli FrontEnd (tu pisałem o FrontEnd i BackEnd). HTML Jest fundamentem sieci WWW, umożliwiając tworzenie struktury i organizację treści, które są wyświetlane w przeglądarkach internetowych. Inaczej mówiąc, HTML to surowa forma strony internetowej. Przeglądarka pobiera z sieci HTML i wyświetla go w postaci wizualizacji strony internetowej. Oficjalnie uważa się, że HTML został wymyślony przez brytyjskiego fizyka Tima Bernersa-Lee w 1991 roku.
Nawiasem mówiąc, jeśli chodzi o skrót HTJZ albo HTJĘZ, jest to, oczywiście, żart (wymyśliłem te skróty, bo po polsku też mówi się HTML, żadnych HTJZ), ale przytoczyłem go tu z dwóch powodów. Po pierwsze, współpracując z wieloma polskimi firmami, widzę że, niestety, w Polsce prawie standardem jest pisanie kodu programistycznego (nazw funkcji, zmiennych, tabel i pól w bazach danych itd) po polsku lub używając absolutnie dzikiej mieszanki języków polskiego i angielskiego (ponglish?) i to w jednej nazwie. Przykład z życia wzięty:
bool user = create_uzytkownik();
Widziałem nawet kod w języku C# z polskimi znakami. A komentarz programisty, o ogromnym doświadczeniu (!), który to napisał, po prostu obezwładnia: "No a co, przecież to UTF8, da się tak pisać". Przypominam że jest to nieprofesjonalne i niebezpieczne. W informatyce podstawowym językiem jest angielski, żaden polski ani ponglish. Dlatego wszystkie tagi (znaczniki) w HTML też pochodzą od słów w języku angielskim. Na przykład, pogrubiona czcionka w HTML jest oznaczana w sposób następujący:
<strong>Tekst pogrubiony</strong>
Strong po angielsku to mocny, silny, co mniej-więcej odzwierciedla znaczenie znacznika (bo pogrubioną czcionką najczęstszej chcemy coś uwypuklić, nadać wyrazu większej mocy).
Treść w HTML'u oczywiście, może (i na polskich stronach WWW musi) być po polsku. Ale nie kod. Drugi powód dlaczego przytoczyłem powyższy absurdalny przykład: w HTML5 można wymyślać własne znaczniki (tagi), których nie ma w standardzie. I tu ludzie mogą mieć różne pomysły...
Budowa języka HTML
Podstawowym elementem języka HTML są tagi (znaczniki), które są umieszczane w kodzie źródłowym strony internetowej. Te znaczniki określają, gdzie i jak różne elementy strony (takie jak tekst, obrazy, odnosniki, tabele, formularze itd) mają być wyświetlane przez przeglądarkę. Każdy element w HTML ma swój własny znacznik, który zazwyczaj składa się z otwierającego i zamykającego tagu. Na przykład, <p> jest otwierającym tagiem dla akapitu, a </p> zamykającym.
HTML jest oparty o język XML, dlatego znaczniki w HTML piszemy w ostrych nawiasach: < oraz >, a wszystko co pomiędzy tagami przeglądarka interpretuje w określony (mniej-więcej) w standardzie sposób, w zależności od tego który to jest tag, czyli co dokładnie jest w tych ostrych nawiasach. Samego tagu, oczywiście, przeglądarka nie wyświetla (chyba że sa błędy w kodzie, wtedy sie zdarza). Tag tylko mówi przeglądarce co ma zrobić z treścią zwartą pomiędzy otwierającym a zamykającym tagiem.
Podstawowa struktura HTML
HTML ma zdefiniowaną strukturę, którą każda strona musi przestrzegać. Oto podstawowy szkielet dokumentu HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Najlepsza Strona WWW</title>
</head>
<body>
<h1>Witaj wszechświecie!</h1>
<p>To jest przykładowy akapit.</p>
</body>
</html>
<!DOCTYPE html> - to deklaracja typu dokumentu, która informuje przeglądarkę, że dokument jest w HTML5.
<html> - główna część dokumentu HTML, w której zawarte są wszystkie inne elementy.
<head> - nagłówek techniczny, sekcja zawierająca informacje techniczne o stronie, takie jak tytuł (<title>) i ustawienia kodowania tekstu (<meta charset="UTF-8">).
<body> - sekcja, w której znajduje się treść wyświetlana na stronie.
<h1> - nagłówek, tytuł, z reguły pisany dużą czcionką.
<p> - akapit.
Wiekszość (ale są wyjątki) tagów skladają się z dwóch cześci: tagu otwierającego i tagu zamykającego. Tag zamykający zaczyna się od ostrego nawiasa i ukosnika: </
Gdyby chcielibyśmy wyświetlić obrazek na naszej stronie WWW, to trzeba użyć tagu <img src="..."/> który nie ma tagu zamykającego, dlatego przed ostrym nawiasem zamykającym umieszczamy ukośnik. Toczą się spory czy dla tagów nieparzystych poprawna jest forma <img src="..."/> czy <img src="...">, ale dzisiejsze przeglądarki prawidłowo traktują obie formy zapisu.
Historia HTML
Historia języka HTML zaczyna sie od roku 1989, kiedy to Tim Berners-Lee, brytyjski fizyk, pracujący dla CERN'u, wpadł na pomysł stworzyć sieciowy system dla publikowania i wyszukiwania dokumentacji. Przynajmniej tak mówi oficjalna historia. W miarę wykrysztalizowana forma HTML powstała dopiero w roku 1993. To była wersja HTML 1.0, która obsługiwała jedynie najprostsze elementy, takie jak nagłówki, akapity, listy, hiperłącza i obrazki. Brak wsparcia dla tabel, skryptów i styli, czyli HTML 1.0 miał ograniczone możliwości i nie obsługiwał wielu elementów, które są teraz standardem w budowaniu stron internetowych.
HTML 2.0 (rok 1995) został opublikowany przez IETF (Internet Engineering Task Force) jako pierwsza oficjalna specyfikacja HTML. Zawierał funkcje z HTML 1.0 oraz dodatkowe elementy, takie jak formularze. HTML 2.0 zdefiniował wiele podstawowych elementów i struktur, które są używane do dziś.
HTML 3.2 (1997) został opublikowany przez W3C (World Wide Web Consortium) i wprowadził nowe elementy, takie jak tabele, rozszerzone możliwości formatowania tekstu (np. czcionki), oraz dodanie elementów do osadzania obiektów multimedialnych (np. <applet> dla apletów Java). HTML 3.2 umożliwił twórcom stron lepszą kontrolę nad wyglądem i układem stron.
HTML 4.01 (1999) był znaczącą aktualizacją, która przyniosła wsparcie dla kaskadowych arkuszy stylów (CSS), usprawniła formularze, i dodała elementy dostosowane do potrzeb osób niepełnosprawnych (poprzez atrybuty takie jak alt dla obrazków). To od tej wersji ja zacząłem swoją przygodę z HTML. Pamiętam moją pierwszą książkę w zielonej miękkiej okładce z dumnym napisem HTML 4.01.
XHTML 1.0 (2000) - nieudana próba rozszerzyć język HTML. XHTML 1.0 był próbą rozszerzenia HTML, aby stworzyć bardziej ścisłą i dobrze ustrukturyzowaną wersję HTML, ale to się nie prejęło. XHTML wymagał bardziej rygorystycznego przestrzegania składni, np. zamykania wszystkich tagów.
HTML5 (2014) HTML5 znacząco rozszerzył możliwości twórców stron WWW i jest stosowany do dziś. HTML5 jest obecnie najbardziej powszechną i używaną wersją HTML. Wprowadził wiele nowych elementów i API, które umożliwiły tworzenie bardziej zaawansowanych, interaktywnych aplikacji webowych bez potrzeby korzystania z dodatkowych wtyczek (np. Flash). W standardzie HTML5 pojawiły się nowe elementy semantyczne, takie jak <header>, <footer>, <article>, <section>, które pomagają w lepszej organizacji i strukturze dokumentów. Doszło też wsparcie dla multimediów, bo w HTML5 pojawiły się natywne elementy <video>, <audio> i <canvas> bez potrzeby korzystania z zewnętrznych wtyczek.
W latach 2016 i 2017 był mały lifting: HTML5.1 i HTML5.2, to są drobne aktualizacje, bo wprowadzono poprawki i rozszerzenia, takie jak nowe atrybuty oraz zadeklarowano lepszą integrację z API przeglądarek.
Obecnie się używa pojecia HTML Living Standard. W3C oraz WHATWG (Web Hypertext Application Technology Working Group) utrzymują HTML jako "żywy standard", co oznacza, że jest on ciągle aktualizowany i rozwijany bez potrzeby publikacji nowych wersji. Zmiany są wprowadzane na bieżąco w odpowiedzi na potrzeby rynku i rozwój technologii.
HTML5 a poprzednie wersję języka HTML
Jak wspominałem wyżej, w standardzie HTML5 doszło wiele nowych elementów, które mają na celu poprawienie struktury i czytelności kodu, a także ułatwienie dostępności stron internetowych:
- <header> - rprezentuje nagłówek sekcji lub całego dokumentu. Może zawierać tytuły, logo, nawigację itp.
- <nav> - onacza sekcję z linkami nawigacyjnymi.
- <article> - uywane do oznaczenia samodzielnego elementu treści, np. artykułu w blogu.
- <section> - suży do grupowania powiązanych tematycznie elementów, takich jak sekcje tekstu lub multimediów.
- <aside> - rprezentuje dodatkową treść, często w formie bocznej kolumny, np. reklamy, linki pomocnicze.
- <footer> - oreśla stopkę sekcji lub dokumentu, która może zawierać informacje kontaktowe, prawa autorskie, linki itp.
- <main> - onacza główną treść dokumentu, pomijając elementy takie jak nagłówki, stopki i paski nawigacji.
W końcu HTML5 zintegrował natywną obsługę multimediów bez potrzeby korzystania z dodatkowych wtyczek, bo to był prawdziwy problem. Pojawiły się nowe tagi:
- <video> - umożliwia osadzanie i odtwarzanie filmów w formatach takich jak MP4, WebM i Ogg. Można także dodawać atrybuty, takie jak controls (kontrolki), autoplay (autoodtwarzanie), czy loop (pętla).
- <audio> - pozwala na osadzanie i odtwarzanie plików dźwiękowych, np. MP3, Ogg, WAV, z podobnymi atrybutami jak w <video>.
- <source> - umożliwia określenie wielu źródeł multimediów, aby przeglądarka mogła wybrać najlepszy format do odtworzenia.
- <canvas> - umożliwia dynamiczne rysowanie grafiki (z poziomu kodu JavaScript) w przeglądarce.
HTML5 wprowadził nowe typy pół w formularzach (input) i atrybuty, które znacznie ułatwiają tworzenie i walidację formularzy: date (data), email (adres e-mail), url (adres URL), range (zakres), color (kolor) itd. Pojawił się atrybut placeholder (tekst podpowiedzi w polu), required (wymaga wypełnienia pola), pattern (walidacja z użyciem wyrażenia regularnego), min i max (określanie zakresu wartości), step (krok dla liczbowych inputów).
Pojawiła sie obsługa SVG (Scalable Vector Graphics). To umożliwiają osadzanie grafiki wektorowej, która jest skalowalna i interaktywna.
Doszła obsługa WebGL, czyli możliwość renderowania grafiki 3D bezpośrednio w przeglądarce, z użyciem technologii OpenGL.
Standard HTML5 wprowadził funkcje ułatwiające tworzenie responsywnych stron, dostosowanych do urządzeń mobilnych. doszedł tag <meta name="viewport" ... > który pozwala na kontrolowanie widocznego obszaru strony na urządzeniach mobilnych, co ułatwia tworzenie responsywnych układów. A Media Queries w CSS3 umożliwia stosowanie różnych stylów CSS w zależności od urządzenia i szerokości ekranu, na którym strona jest wyświetlana.
Powiem tak, teraz w HTML'u to sie dzieje. Dzieki HTML5 możemy tworzyć niesamowicie rozbudowane (i zawierające miliardy błędów) strony.
Własne tagi w HTML5
Nie wiem czy to dobrze czy nie koniecznie. Tak, w HTML5 jest możliwe dodanie własnych tagów. Kod
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Najlepsza Strona WWW</title>
</head>
<body>
<h1>Oto strona</h1>
<japiernicze>To jest przykładowy akapit.</japiernicze>
</body>
</html>
jest poprawnym kodem HTML5.
Dodatkowo HTML5 pozwala na dodawanie niestandardowych atrybutów do istniejących elementów, które zaczynają się od data-. Na przykład:
<h1 data-japiernicze-byle-co="byle co">Oto strona</h1>
Szczerze, wołałbym żeby tego nie było. To rodzi więcej problemów niż korzyści, bo nigdy nie wiesz co autor miał na myśli, nie wiemy czy któraś przeglądarka się nie wywali na takim czymś, nie wiadomo jak to wpłynie na pozycjonowanie w wyszukiwarkach. A HTML5 i bez tego daje nam naprawdę ogromne możliwości.
Czy pisanie kodu HTML to programowanie?
Pisanie kodu HTML nie jest uznawane za programowanie. HTML (HyperText Markup Language) jest językiem znaczników, a nie językiem programowania. Jest to język służący do strukturyzowania i prezentacji treści na stronach internetowych. HTML jest deklaratywny, co oznacza, że opisuje strukturę dokumentu (co ma być wyświetlane), ale nie definiuje zachowania ani logiki (jak to ma być zrobione). HTML nie pozwala na definiowanie zmiennych, funkcji czy obiektów, co jest kluczowym elementem programowania. Programowanie zwykle wiąże się z manipulacją danymi, przetwarzaniem ich, a następnie podejmowaniem decyzji na podstawie tych danych. HTML tego nie robi - jedynie prezentuje treść.
Jeśli chodzi o strony internetowe, to programowanie whodzi z uzyciem języka JavaScript. JavaScript jest językiem programowania, który dodaje interaktywność do stron internetowych. Używany razem z HTML i CSS, JavaScript pozwala na tworzenie dynamicznych treści, kontrolowanie zdarzeń, manipulację DOM (Document Object Model) i wiele innych działań typowych dla programowania. Jeśli chcesz więcej dowiedzieć się o programowaniu, zapraszam do lektury tego artykułu.
Od czego zacząć naukę HTML?
Przynajmniej na poziomie idei, już wiesz o co chodzi w HTML, można powiedzieć że znasz z czym to się je. Teraz czas na poznanie jak najwięcej tagów i ćwiczenia. Ćwiczenie czyni mistrza. Kiedy po raz pierwszy wziąłem do ręki podręcznik z HTML'a (w tamtych czasach ludzie się uczyli z papierowych podręczników), to długo sobie myślałem co to w ogóle jest i z której strony podejść do tego HTML'a. Mam nadzieję że po przeczytaniu tej publikacji owy etap masz już za sobą, teraz kwestia ćwiczeń. Najtrudniejsza jest pierwsza strona internetowa. Polecam otworzyć kilka stron internetowych, chociażby mojego bloga informatycznego, w przeglądarce po prawym kliknięciu wybrać "Inspect" albo "Zbadaj", w zależności od tego jaką przeglądarkę i w jakim języku masz poustawianą, przeglądarka pokaże Ci kod HTML wybranej strony. Po najechaniu myszką w kodzie HTML przeglądarka podświetli wybrany element na stronie.
Pierwsze czego warto się nauczyć to typowa struktura strony (tagi <HTML>, <HEAD>, <TITLE>, <BODY>), ustawianie sposobu kodowania (na przykład UTF-8) i podstawowe tagi dzielenia i formatowania treści (<DIV>, <SPAN>, <P>, <BR>, <UL>, <OL>, <LI>, <STRONG> itd) oraz podstawowe tagi struktury treści (<FOTER>, <HEADER>, <SECTION> itd). Warto też opanować tabelki w HTML'u, mianowicie tagi <TABLE>, <TR>, <TH>, <TD>. Na kolejnym etapie przydadzą się tagi do pracy z materiałami medialnymi: <IMG>, <AUDIO>, <VIDEO>, <SOURCE>. Warto szczególnie zapoznać się z wektorowym formatem obrazów SVG. Na kolejnym etapie warto opanować tagi <META> i ich odmiany oraz dołączenie do strony skryptów JavaScript oraz plików CSS i ikonki strony.
Do pracy z HTML przyda się edytor z podświetleniem składni. Do całkowicie ręcznego edytowania plików HTML polecam NotepadQQ (wersja dla Linux), albo Notepad++ (wersja dla Windows). Można też użyć Geany. Oczywiście, tych edytorów jest znacznie więcej (Sublime, Atom, CoffeeCup). A możesz też użyć online edytora, na przykład https://codepen.io/pen - tutaj możesz odrazu pisać kod HTML, ewentualnie też CSS i JavaScript i odrazu sprawdzać wynik. To jest bardzo wygodne, szczególnie na początku. Wrzuć tam chociażby przykłady które podałem wyżej i zobacz jak to wygląda i jak działa.
Po opanowaniu podstaw HTML warto zająć się CSS'em (czyli style, to jak wyglądają poszczególne elementy na stronie). A po CSS'ie warto przejść do JavaScript. Tu pisałem o JavaScript'ie i spróbowałem przybliżyć pojęcie programowania dla totalnie zielonych.
Jeśli znalazłe[-a]ś w tekście, literówkę, błąd stylistyczny albo inny błąd językowy - bardzo proszę o napisanie poprawki w komentarzu pod artykułem albo przez formularz kontaktowy. Dziękuję!
Wesprzyj wolne media - udostępnij tę publikację!
Jeśli ta publikacja jest dla Ciebie wartościowa - proszę udostępnij ją w social media. To pomaga promować nieocenzurowaną wiedzę.
Publikuję tutaj wiele materiałów nieocenzurowanych przez producentów propagandy i twórców opinii społecznej. Dlatego wyszukiwarki boja się że niektóre publikacje dotrą do szerokiej publiczności i na potęgę tną mi zasięgi.
Jeśli słowo Wolność nie jest Ci obce - pomóż mi w rozpowszechnianiu nieocenzurowanej wiedzy, czyli udostępnij tę publikację w social media.
Dziękuję!
Witajcie na blogu informatycznym!