Wprowadzenie do HTML5
HTML (ang. HyperText Markup Language, hipertekstowy język znaczników) jest używany do tworzenia stron internetowych i innych typów dokumentów przeznaczonych dla przeglądarek Internetowych. Standardem HTML zarządza World Wide Web Consortium (W3C).
W chwili otwierania dokumentu HTML przeglądarka renderuje (parsuje) dokument, tzn. odpowiednio interpretuje zawarte w jej treści znaczniki (tagi) HTML. W wyniku czego zostaje odpowiednio sformatowana i wyświetlona strona Internetowa.
Szczegółowy opis specyfikacji języka HTML oraz CSS znajdziesz na stronie Konsorcjum W3C:
https://www.w3.org/standards/webdesign/htmlcss oraz na stronie WHATWG:
Tak naprawdę w/w specyfikacje są bardziej przeznaczone dla twórców przeglądarek Internetowych niż dla programistów (zwłaszcza początkujących), ale warto te miejsca również odwiedzić aby monitorować najbardziej aktualną specyfikację języka.
Na początku można odwiedzić witryny: https://developer.mozilla.org/pl/ lub http://docs.webplatform.org/html/ na których znajdziesz prosty opis składników HTML oraz CSS.
Szczególnie polecam zaglądnąć w to konkretne miejsce: https://developer.mozilla.org/pl/docs/HTML/HTML5
Znacznik (tag).
W języku HTML wszystkich znaczników jest ponad 100, natomiast do efektywnego budowania stron internetowych nie musisz się ich wszystkich uczyć. Pełen wykaz znaczników z dokładnym wyjaśnieniem i co ważne z odpowiednim grupowaniem znajdziesz na stronie https://developer.mozilla.org/en-US/docs/Web/HTML/Element
Ogólny schemat zapisu znacznika HTML:
<znacznik właściwość=”wartość_właściwości”>
Właściwość znacznika często nazywamy atrybutem.
Rozróżniamy znaczniki otwierające i zamykające np.:
<a href=”#”>Link 1</a>
oraz znaczniki z grupy tzw. samozamykających np.:
<br>, <hr>, <img>, <meta>.
Te drugie możemy zapisywać na trzy sposoby:
<br>
<br/>
<br />
Wszystkie w/w sposoby zapisu są poprawne.
Wszystkie białe znaki (white space) czyli np. spacje, tabulatory czy entery nie są uwzględniane przez przeglądarkę podczas renderowania kodu.
Kodując znaczniki HTML warto trzymać się tzw. struktury drzewa. Chodzi o to, aby znaczniki zagnieżdżone poprzedzać znakiem tabulacji (wcięcie). Z taką strukturą drzewiastą znacznie lepiej i czytelniej się pracuje.
Podstawowy szkielet strony / aplikacji HTML5.
Ogólna struktura dokumentu została znacznie uproszczona w stosunku do poprzednich specyfikacji języka.
<!DOCTYPE html>
<html>
<head>
<title>Tytuł dokumentu</title>
<meta charset="UTF-8">
</head>
<body>
Treść dokumentu.
</body>
</html>