HTML - Podstawowe informacje i wprowadzenie

1. Czym jest HTML?

HTML (HyperText Markup Language) to język znaczników używany do tworzenia i strukturyzacji treści na stronach internetowych. Jest podstawowym budulcem stron WWW, który definiuje ich strukturę poprzez system znaczników (tagów).

Kluczowe cechy HTML:

  • Nie jest językiem programowania - to język znaczników
  • Opisuje strukturę dokumentu, a nie jego wygląd (za wygląd odpowiada CSS)
  • Umożliwia osadzanie multimediów (obrazy, filmy, dźwięki)
  • Tworzy hiperłącza (linki) między dokumentami

2. Historia HTML

  • 1989 - Tim Berners-Lee tworzy koncepcję HTML w CERN
  • 1991 - Pierwsza publiczna specyfikacja HTML
  • 1995 - HTML 2.0 jako pierwszy oficjalny standard
  • 1997 - HTML 3.2, następnie HTML 4.01 (1999)
  • 2000 - XHTML 1.0 jako bardziej restrykcyjna wersja HTML
  • 2014 - HTML5 jako obecny standard

3. Podstawowa struktura dokumentu HTML

Elementy struktury:

  • <!DOCTYPE html> - deklaracja typu dokumentu
  • <html> - główny element dokumentu
  • <head> - nagłówek z metadanymi
  • <body> - zawartość widoczna dla użytkownika

4. Podstawowe znaczniki HTML

Znacznik Opis
<h1>-<h6> Nagłówki różnych poziomów
<p> Akapit tekstu
<a> Hiperłącze (link)
<img> Obraz
<ul>, <ol>, <li> Listy (nieuporządkowane, uporządkowane, elementy listy)
<div> Blokowa sekcja dokumentu
<span> Sekcja liniowa dokumentu
<table>, <tr>, <td> Tabele

5. XML - Extensible Markup Language

XML to uniwersalny język znaczników służący do przechowywania i przesyłania danych.

Różnice między HTML a XML:

  • HTML ma ustalone znaczniki, XML pozwala na definiowanie własnych
  • HTML skupia się na prezentacji, XML na strukturze danych
  • HTML jest bardziej tolerancyjny dla błędów

Przykład XML:

<ksiazka>
    <tytul>Władca Pierścieni</tytul>
    <autor>J.R.R. Tolkien</autor>
    <rok_wydania>1954</rok_wydania>
</ksiazka>

6. XHTML - XML + HTML

XHTML (Extensible HyperText Markup Language) to połączenie HTML i XML, będące bardziej restrykcyjną wersją HTML.

Cechy XHTML:

  • Wymaga poprawnej składni XML
  • Wszystkie znaczniki muszą być zamknięte
  • Atrybuty muszą być w cudzysłowach
  • Nazwy znaczników i atrybutów muszą być małymi literami

Przykład XHTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="pl" xml:lang="pl">
<head>
    <title>Przykład XHTML</title>
</head>
<body>
    <p>To jest dokument XHTML.</p>
</body>
</html>

7. HTML5 - współczesny standard

HTML5 wprowadził wiele nowych funkcji:

  • Nowe znaczniki semantyczne (<header>, <footer>, <article>, <section>)
  • Obsługa multimediów (<video>, <audio>)
  • Elementy graficzne (<canvas>, <svg>)
  • API dla aplikacji internetowych
  • Lepsza obsługa urządzeń mobilnych

8. Przyszłość HTML

HTML ciągle się rozwija, a W3C i WHATWG pracują nad nowymi funkcjami. Obecny focus to:

  • Lepsza integracja z technologiami web components
  • Rozwój API przeglądarkowych
  • Usprawnienia w zakresie dostępności
  • Optymalizacja pod kątem urządzeń mobilnych

9. Kto rozwija HTML?

Rozwój języka HTML jest nadzorowany i koordynowany przez dwie główne organizacje:

a) W3C (World Wide Web Consortium)

  • Główna organizacja standaryzacyjna dla technologii webowych
  • Założona w 1994 roku przez Tima Bernersa-Lee
  • Publikuje oficjalne rekomendacje (specyfikacje) HTML
  • Strona: https://www.w3.org

b) WHATWG (Web Hypertext Application Technology Working Group)

  • Niezależna organizacja założona w 2004 roku przez producentów przeglądarek
  • Pracuje nad "Living Standard" HTML - ciągle aktualizowaną wersją
  • Współpracuje z W3C, ale ma różne podejście do rozwoju standardu
  • Strona: https://whatwg.org

c) Wkład producentów przeglądarek

Główni producenci przeglądarek (Google, Mozilla, Apple, Microsoft) aktywnie uczestniczą w rozwoju HTML poprzez: - Implementację nowych funkcji w swoich przeglądarkach - Proponowanie i testowanie nowych rozwiązań - Udział w grupach roboczych W3C i WHATWG

d) Społeczność developerska

Programiści i projektanci na całym świecie wpływają na rozwój HTML poprzez: - Zgłaszanie błędów i sugestii ulepszeń - Tworzenie dokumentacji i tutoriali - Testowanie nowych funkcji w projektach open source

10. Proces standaryzacji HTML

Nowe funkcje w HTML przechodzą przez kilka etapów:

  • Propozycja - zgłoszona przez społeczność lub producentów przeglądarek
  • Dyskusja - w grupach roboczych W3C/WHATWG
  • Implementacja eksperymentalna - w przeglądarkach
  • Testy - przez developerów i użytkowników
  • Standaryzacja - włączenie do oficjalnej specyfikacji

11. Edytory kodu do pracy z HTML

a) Podstawowe rodzaje edytorów

1. Proste edytory tekstowe:

  • Notatnik (Windows) - najbardziej podstawowa opcja
  • TextEdit (Mac) - wymaga przełączenia w tryb czystego tekstu
  • Notepad++ - darmowy, z podświetlaniem składni

2. Wyspecjalizowane edytory kodu:

  • Visual Studio Code (VS Code) - najpopularniejszy obecnie, darmowy
  • Sublime Text - lekki i szybki, z wieloma wtyczkami
  • Atom - tworzony przez GitHub, zintegrowany z Git

3. Środowiska IDE (Integrated Development Environment):

  • WebStorm - płatne, bardzo rozbudowane
  • Brackets - specjalizowane pod web development

b) Najważniejsze funkcje edytorów HTML

Funkcja Opis Przykładowe zastosowanie
Podświetlanie składni Kolorowanie znaczników i atrybutów Łatwiejsze odnajdywanie elementów
Autouzupełnianie Automatyczne domykanie znaczników Szybsze pisanie kodu
Podgląd na żywo Natychmiastowy podgląd zmian Testowanie bez przeładowywania
Wtyczki Rozszerzenia funkcjonalności Np. emmet do szybkiego pisania kodu
Debugowanie Znajdowanie błędów w kodzie Walidacja składni HTML
Wersjonowanie Integracja z Git Śledzenie zmian w projekcie

12. Podsumowanie

HTML pozostaje fundamentem sieci WWW, ewoluując od prostego języka znaczników do kompleksowego systemu budowania aplikacji internetowych. Zrozumienie HTML jest kluczowe dla każdego, kto chce tworzyć treści internetowe.

Wróć do spisu lekcji Zadanie praktyczne Rozwiąż quiz