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.

 

 

Podobał Ci się ten artykuł?

Jeśli tak, to zarejestruj się aby otrzymywać powiadomienia o nowych artykułach poszerzających perspektywę. A mając szerszą perspektywę, możesz podjmować lepsze decyzje! (a to Twój czas, pieniądze, zdrowie, ..)


Dobre? - polub i poleć innym
Polub StartHerePL: Zdrowie
Polub StartHerePL: Biznes
Polub StartHerePL: InfoTechnologia

Newsletter?

Najpierw jakoś potem jakość. Prawie wszystkie artykuły cały czas aktualizuję :) Możesz spotkać: literówki, niedokończone zdania itp. Wszelkie uwagi są mile widziane! michal @ starthere.pl