2.2 Składnia HTML

HTML to nic innego jak HyperText Markup Language:

• HyperText oznacza użycie protokołu HTTP
• Markup oznacza, że kod, który napisałeś został zawarty w słowach kluczowych (czyli tagach)
• Language oznacza, że Twój kod może zostać poprawnie zinterpretowany zarówno przez człowieka jak i komputer

Tak jak każdy język, HTML posiada zestaw reguł. Zasady te są relatywnie proste. Wyznaczają dolne granice, które mówią, gdzie coś się zaczyna, a gdzie kończy.

Spójrzmy na prosty paragraf, napisany w języku HTML:

<p>Jeśli Tetris mnie czegoś nauczył, to tego, że problemy się piętrzą, a osiągnięcia znikają.</p>

To, co widzisz w nawiasach strzałkowych < i > to tagi HTML. Definiują one początek i koniec elementu HTML.

Każdy z nich posiada swoją specyficzną funkcję w dokumencie HTML. W tym przypadku, p oznacza paragraf.

Tagi HTML zazwyczaj występują w parach:

• tag otwierający <p> mówi przeglądarce, że w tym miejscu zaczyna się paragraf
• tag zamykający </p> oznacza koniec paragrafu

Jedyną różnicą, pomiędzy tagiem otwierającym i zamykającym jest slash / poprzedzający nazwę znacznika.

Kombinacja tagu otwierającego i zamykającego wraz z zawartością pomiędzy nimi tworzy element HTML. Cała powyższa linijka kodu jest elementem HTML, wykorzystującym tagi HTML <p> i </p>.

Spójrz na ten prosty przykład, aby przekonać się, że tagi HTML nie są wyświetlane przez przegladarkę. Twoja przeglądarka internetowa czyta je. Dzięki temu wie, jakiego rodzaju treść chcesz wyświetlić.

Gdzie pisać HTML

Prawdopodobnie natknąłeś się na proste edytory plików, które posiadają rozszerzenie .txt.

Aby wspomniany plik tekstowy był intepretowany jako dokument HTML (zamiast dokumentu tekstowego), należy zmienić jego rozszerzenie z .txt na .html.

Otwórz swój edytor tekstu, a następnie skopiuj i wklej poniższy kod:

<p>To moja pierwsza strona internetowa!</p>

Zapisz plik jako moja-pierwsza-strona.html a następnie otwórz go w swojej przeglądarce. Możesz to zrobić dwukrotnie klikając powstały plik lub przeciągając plik do pustej karty przeglądarki. Rezultat jaki zobaczysz to:

Zapamiętaj:

• używaj edytorów tekstu takich jak Notepad++ do tworzenia dokumentów HTML
• używaj przeglądarek internetowych, takich jak Google Chrome czy Mozilla Firefox do przeglądania dokumentów HTML

Atrybuty

Atrybuty działają jak ekstra informacje zawarte w elementach HTML. Zawarte są wewnątrz tagu HTML. Podobnie jak tagi, atrybuty nie sa wyświetlane przez przeglądarkę, a jedynie interpretowane.

Dla przykładu, atrybut href jest używany do definiowania elementu docelowego linku (atrybut ten używany jest z anchorem):

<a href="http://www.mozilla.com/firefox">Pobierz Mozille!</a>

Istnieje 16 atrybutów HTML, które można zastosować z każdym elementem HTML. Każdy z tych atrybutów jest opcjonalny.

You’ll mostly use class (which is used for CSS), and title (which is the tooltip that appears when hovering an item like this one).

Some HTML elements have obligatory attributes. For example, when inserting an image, you have to provide the location of the image, using the src (source) attribute:

<img src="#" alt="Description of the image">

Considering that the purpose of the <img> element is to display an image, it makes sense for the path to the image to be required.

Comments

If you write something in your code without disrupting how the browser will display your page, you can write comments. They will be ignored by the browser, and are only useful for us humans who write the code.

A comment starts with <!-- and ends with -->.

<!-- This sentence will be ignored by the browser -->
<p>Hello World!</p>

Self-enclosing elements

Some HTML elements only have an opening tag:

<br> <!-- line-break -->
<img src="http://placehold.it/50x50" alt="Description"> <!-- image -->
<input type="text"> <!-- text input -->

Because they don’t have a closing tag and consequently can’t contain anything inside them, self-enclosing elements usually carry a few attributes, to provide them with additional information.