Czym jest html?

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).

Zwróć uwagę, że przeglądarka najpierw musi zobaczyć plik html.
Dopiero po przeczytaniu wie, że musi pobrać powiązane pliki

/ 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.

 

 

Uwaga: Prawie wszystkie artykuły cały czas aktualizuję :) Możesz spotkać: literówki, niedokończone zdania itp. Najpierw jakoś potem jakość. Wszelkie uwagi są mile widziane!
Pomóż innym - Podziel się - Udostępnij, to takie proste.

Ciekawe?
Bądź na bierząco!
Polub StartHerePL: InfoTechnologia
Dodatkowo zobacz inne kategorie
Polub StartHerePL: Zdrowie
Polub StartHerePL: Biznes

Nie masz konta na FB?
Pomóż - Wsparcie - Darowizna?

Przygotowanie artykułów zajmuje dużo czasu, do tego dochodzą koszty m.in. serwera.
Dlatego wszelkie darowizny są mile widziane - każda złotówka się liczy!

PayPal (możliwość płatności kartą):
Konto

mBank: 81 1140 2004 0000 3902 7604 5817

Krypto

LTC: LZqTnSMxjEtJpT5VttKg8339gWJvig9rVE

ETH: 0x725F98e3eB04fbaC171410160F22a6cB95e26151 (duże prowizje)

BTC: 1E5Nk23zb7kohtX1tPNLiVyiRAjZxbuXr7 (bardzo duże prowizje)

Inne formy pomocy:

Kupując książki za pomocą porównywarki cen ksiązek (otrzymam 3-4% od ceny książki czyli ~1 zł).

Polub / Udostępnij