Czym jest html?

HTML (ang. HyperText Markup Language) – hipertekstowy język znaczników, wykorzystywany do tworzenia dokumentów hipertekstowych.

HTML pozwala opisać strukturę informacji zawartych wewnątrz strony internetowej, nadając znaczenie poszczególnym fragmentom tekstu – formując hiperłącza, akapity, nagłówki, listy – oraz osadza w tekście dokumentu obiekty plikowe np. multimedia bądź elementy baz danych np. interaktywne formularze danych.

HTML umożliwia określenie wyglądu dokumentu w przeglądarce internetowej. Do szczegółowego opisu formatowania akapitów, nagłówków, użytych czcionek i kolorów, zalecane jest wykorzystywanie kaskadowych arkuszy stylów.

https://pl.wikipedia.org/wiki/HTML

HTML to tekst, w którym znajdują się specyficzne dla języka HTML znaczniki.

W tym przypadku znacznik to również tekst w ostrych nawiasach – np. <b> – to znacznik który odpowiada za pogrubienie tekstu.

Wyróżniamy znaczniki otwierające i zamykające. Dla przykładu, znacznikiem otwierającym jest <b>, zamykającym zaś </b> – zwróć uwagę na znak „/” zaraz po znaku „<„.

jeśli utworzysz plik o treści:

to jest zwykły tekst, <b>a to jest tekst pogrubiony</b> i znów normalny

Przeglądarka w czasie odczytu pliku, zauważy, że tekst pomiędzy <b> a </b> należy pogrubić.
W efekcie otrzymasz:

to jest zwykły tekst, a to jest tekst pogrubiony i znów normalny

Niektóre znaczniki nie wymagają 'nic pomiędzy’.
Dlatego zamiast pisać <nazwaZnacznika></nazwaZnacznika>, można napisać <nazwa znacznika /> zwróć uwagę, na znak „/” tuż przed końcem znacznika – przed znakiem „>”.

Oczywiście w przypadku znacznika pogrubienia <b /> – nie miało by sensu ponieważ nic byśmy nie pogrubili.
W przypadku znacznika nowej linii <br /> – znacznik samo-zamykający się ma już sens.

Przykład

Poniżej mamy przykładowy (uproszczony szablon) strony

<!DOCTYPE html>
<html>
  <head>
    <title>Moje wakacje</title>
  </head>
  <body>

    <h1>Tajlandia</h1>
    <h2>Bangkok</h2>
    <p>
      Bangkok to stolica Tajlandii.<br />
W Bangkoku mieszka 10mln ludzi (to więcej niż 1/4 ludności Polski)<br />
      <img src=”bangkok.jpg” alt=”Bangkok nocą”/><br />
      Zobacz <a href=”bangkok.jpg”>fotorelację</a>.
    </p>
  </body>
</html>

Tak prosta strona w przeglądarce wygląda tak:

Szybka analiza przykładu

Sekcja „head„

Wszystko w znaczniku „head” to informacje o stronie.
W tej sekcji pojawił się znacznik „title” – oznaczający tytuł strony.

Tytuł strony widoczny jest w nazwie zakładki.

Sekcja „body„

Wszystko w znaczniku „body” to zawartość strony.

Mamy tu nagłówek najwyższego poziomu h1, podnagłówek h2, paragraf p.

W paragrafie znajduje się zdjęcie (znacznik: img). Zdjęcie znajduje się w osobnym pliku „bangkok.jpg” (stąd: dodatkowy atrybut: src=”bangkok.jpg” („src”, to skrót z angielskiego słowa source – czyli źródło). Dodałem również atrybut alt=”Bangkok nocą”. Atrybut alt to alternatywna treść. W przypadku gdy przeglądarka nie będzie w stanie pobrać zdjęcia to wyświetli tekst „Bangkok nocą”.

Gdy przeglądarka nie jest w stanie pobrać zdjęcia, to wyświetla alternatywną treść (atrybut alt).

najpierw musi zobaczyć plik html
Dopiero po przeczytaniu wie, że musi pobrać / Istotne przy optymalizacji strony /

Dopiero po pobraniu i przeczytaniu pliku strony, przegladara wie, że musi pobrać jeszcze zdjęcie.

W praktyce strony są dużo bardziej skomplikowane

Przykład fragmentu strony YouTube.com.
Podświetlony fragment odpowiada treści html widocznej poniżej.