Podstawowe znaczniki HTML

Podstawowe znaczniki HTML

Właśnie napisaliście swój pierwszy kod HTML, gratulacje! Kiedy jednak spojrzycie na niego, poza podstawowym szkieletem zawiera on jednolity blok tekstu. Brakuje nam wyróżnienia nagłówków, hiperłączy, obrazka i formularzy. Pora na zapoznanie Was z różnymi znacznikami HTML.

Wiemy już, że aby uzyskać HTML-owy element należy "owinąć" go w tagi (znaczniki). Nie poznaliśmy jednak jak dotąd żadnych nazw znaczników, których moglibyśmy użyć na rzeczywistym przykładzie strony.

Komentarze

Często bywa tak, że kod jednej strony edytuje przynajmniej kilku programistów. Zdarza się też, że trzeba wrócić do kodu, który został napisany dość dawno temu. W takich przypadkach bywa, że pojawiają się niejasności i pytania "Co autor miał na myśli?".

Pomocne dla nas bywają wtedy komentarze. Są one ignorowane przez przeglądarkę podczas wyświetlania strony i widoczne tylko podczas podglądania jej kodu źródłowego. Komentarze są bardzo użyteczne przy opisie kodu i umożliwiają jego dokumentowanie.

<!-- To jest komentarz do naszego kodu -->

Nagłówki i akapity

Tak samo, jak w dokumentach tekstowych, w HTML-u możemy zdefiniować nagłówki dla naszego tekstu:

<h1>Nagłówek 1</h1>
<h2>Nagłówek 2</h2>
<h3>Nagłówek 3</h3>
<h4>Nagłówek 4</h4>
<h5>Nagłówek 5</h5>
<h6>Nagłówek 6</h6>

Co zostanie zinterpretowane przez przeglądarkę jako:

Nagłówek 1

Nagłówek 2

Nagłówek 3

Nagłówek 4

Nagłówek 5

Nagłówek 6

Important::Ważne

Pamiętajcie, że numery nagłówków nie odnoszą się do rozmiaru wyrenderowanego tekstu, ale oznaczają hierarchię zawartości.

Przy okazji omawiania składni CSS napomknęliśmy o znaczniku <p>. Jego nazwa pochodzi od słowa paragraph, a on sam służy do definiowania akapitów w tekście.

<p>To jest akapit tekstu. Możesz w nim umieścić tekst dowolnej długości.</p>

To jest akapit tekstu. Możesz w nim umieścić tekst dowolnej długości.

Akapity zwykle prezentowane są w przeglądarce jako bloki tekstu, wizualnie odseparowane od siebie pionowym odstępem.

Kiedy kodujesz akapity, czasem zachodzi potrzeba złamania linii w określonym miejscu. Warto wiedzieć, że nie wystarczy tam wcisnąć Enter w edytorze tekstu – do łamania linii w HTML-u służy specjalny znacznik <br>:

<p>Jestem bardzo długim tekstem, który nie mieści się w jednej linii, <br> zatem muszę zostać złamany.</p>

Jestem bardzo długim tekstem, który nie mieści się w jednej linii, zatem muszę zostać złamany.

Important::Ważne

Nie stosuj znacznika <br>, aby wizualnie odseparować od siebie elementy w pionie! HTML powinien być używany wyłącznie do definiowania treści. W tym przypadku należy nadać elementom pionowe marginesy za pomocą CSS (już niedługo dowiecie się dokładnie, jak to zrobić).

Hiperłącza

Dzięki hiperłączom (czyli po prostu linkom) możemy przenieść się w niemal dowolne inne miejsce w sieci. Link możecie umieścić na stronie używając znacznika <a> (od angielskiego słowa anchor) i podając adres linkowanej strony jako wartość atrybutu href.

Można powiedzieć, że hiperłącza są solą internetu!

<a href="http://theawwwesomes.org" target="_blank">
  Przeniosę Cię na stronę The Awwwesomes otwierając ją w osobnej karcie przeglądarki!
</a>

Przeniosę Cię na stronę The Awwwesomes!

Użycie target="_blank" spowoduje, że strona, do której prowadzi Wasz link, zostanie otwarta w nowej karcie przeglądarki.

Important::Ważne

W Sieci trwa nieustanna debata nad tym, czy atrybut target i wymuszanie otwierania strony w nowej karcie powinny być używane. Bardzo wiele osób wskazuje na fakt, że jest to odbieranie kontroli użytkownikowi.

Obrazki

Obrazki w kodzie wstawiamy za pomocą znacznika <img>. Jest on pustym elementem i nie posiada znacznika zamykającego. Dwa najważniejsze atrybuty, jakie może przyjmować <img> to:

• src, który zawiera ścieżkę do obrazka na dysku serwera lub w sieci. Jeśli wskazuje on na ścieżkę na dysku, zwykle jest to ścieżka względna – względem pliku HTML w którym znajduje się konkretny element <img>.

Important::Ważne

W tym momencie chcemy zwrócić Waszą uwagę na ścieżki do zasobów (nie tylko obrazków, niedługo zaczniemy dołączać do naszej strony arkusze stylów). Ścieżka bezwzględna to taka, która zawiera pełny adres internetowy do zasobu, wraz z domeną.

 <img src="http://theawwwesomes.org/images/example.png" alt="Jestem obrazkiem ze ścieżką bezwzględną">

W zasadzie moglibyśmy w tym momencie zakończyć temat ścieżek i przestać zawracać sobie tym głowę. Jednak co się stanie, kiedy adres strony ulegnie zmianie? Musielibyśmy wtedy pozmieniać adresy do wszystkich obrazków na naszej stronie – bardzo dużo roboty! Z pomocą przychodzi nam linkowanie za pomocą ścieżek względnych, czyli wskazywanie na położenie zasobu w systemie plików względem miejsca, w którym przechowujemy plik html z naszą stroną. Najprostszym przykładem jest ten, w którym plik grafiki oraz plik ze stroną znajdują się w tym samym miejscu (folderze):

 <img src="example.png" alt="Jestem w tym samym folderze, co strona">

Jednak wrzucanie plików z różnymi zasobami do tego samego folderu mogłoby spowodować w krótkim czasie spory bałagan. Zwykle tworzymy specjalne podfoldery – osobny dla obrazków (możemy go nazwać np. images), dla plików ze stylami, dla skryptów JavaScript itp.. Spróbujmy w prosty sposób zobrazować strukturę katalogu plików (dla uproszczenia uwzględnimy tylko obrazki):

 /my-website
  |
  |-- index.html
  |-- /images
       |
       |--apples.png
       |--cherries.jpg
       |--bananas.svg

W takim wypadku, chcąc wyświetlić na stronie obrazek przedstawiający jabłka, odwołamy się do niego w ten sposób:

 <img src="images/apples.png" alt="Tu widzimy jabłka">

Możemy się również odwoływać do zasobów znajdujących się w strukturze folderów "wyżej". Używamy wtedy w ścieżce charakterystycznych dwóch kropek ../.

Przykładowo: plik index.html, w którym piszemy kod html, znajduje się folderze /html umieszczonym w /my-website, a /images stanowi podfolder /my-website.

 /my-website
  |-- /html
       |--index.html
  |-- /images
    |-- apples.png
    |-- cherries.jpg
    |-- bananas.svg

Musimy wtedy wyjść z folderu /html o poziom wyżej, stosując "magiczne" dwie kropki, a następnie wejść do folderu z obrazkami. Być może brzmi to zawile, ale wszystko wyjaśni się jak zaczniecie testować ścieżki względne w praktyce.

 <img src="../images/apples.png" alt="Tu widzimy jabłka">

Natomiast jeśli chcemy cofnąć się jeszcze bardziej w głąb struktury katalogów stosujemy zapis:

 <img src="../../images/apples.png" alt="Tu widzimy jabłka">

i tak dalej. Ścieżki bezwględne będą bardzo przydatne np. przy podłączniu pliku, zawierającego style. Przetestujemy to już niebawem podczas nauki o CSS.

• alt służy do definiowania pomocniczego tekstu, który zostanie wyświetlony w przypadku, kiedy obrazek z różnych powodów nie zostanie poprawnie załadowany. Jest też używany przez czytniki ekranowe do informowania osób niewidomych lub niedowidzących o zawartości konkretnej ilustracji. Tym samym alt jest jednym z podstawowych elementów [dostępności stron WWW](https://pl.wikipedia.org/wiki/Dost%C4%99pno%C5%9B%C4%87_(WWW)).

<img src="images/example-img.jpg" alt="Uczymy się kodować">

<img src="images/example-img-broken.jpg" alt="Ten obrazek nie został poprawnie załadowany">

Listy

Za pomocą znacznika <ul> definiujemy listy nieuporządkowanych elementów, natomiast listy uporządkowane zamykamy wewnątrz znaczników <ol>:

<ul>
  <li>Jestem elementem listy</li>
  <li>Jestem elementem listy</li>
  <li>Jestem elementem listy</li>
</ul>

<ol>
  <li>Jestem pierwszym elementem listy</li>
  <li>Jestem drugim elementem listy</li>
  <li>Jestem trzecim elementem listy</li>
</ol>

• Jestem elementem listy

• Jestem elementem listy

• Jestem elementem listy

1. Jestem pierwszym elementem listy

2. Jestem drugim elementem listy

3. Jestem trzecim elementem listy

Pomimo, że najbardziej intuicyjnym (i oczywiście poprawnym) przypadkiem użycia list jest wyliczenie w tekście, znaczników listy możemy używać na przykład do definiowania elementów menu strony.

Powyżej przedstawiliśmy Wam najczęściej używane znaczniki – a to zdecydowanie nie wszystkie! W kolejnych rozdziałach dowiecie się natomiast, jak kodować proste formularze oraz określać strukturę dokumentu.

Elementy generyczne (ogólne)

"Pomocy! Muszę zakodować element na stronie, jednak nie jestem w stanie dopasować jego znaczenia do żadnego z powyższych tagów!"

Właśnie w takich przypadkach na ratunek spieszą nam elementy generyczne.

<div>Jestem generycznym elementem blokowym</div>

<span>Jestem generycznym elementem liniowym</span>

Z pewnością niejednokrotnie znajdziecie się w sytuacji, kiedy zajdzie potrzeba zakodowania jakiegoś elementu, jednak w morzu tagów HTML nie znajdzie się żaden pasujący do roli. Wtedy użycie elementów generycznych nie będzie błędem.

W przykładzie powyżej widzicie aż dwa ich rodzaje: blokowy oraz liniowy. Skąd w ogóle podział na elementy blokowe i liniowe i co on oznacza?

W wielkim skrócie: elementy liniowe to takie, które zachowują się tak, jak linie tekstu. Naszego powyższego znacznika <span> możemy z powodzeniem użyć, aby "owinąć" nim fragment akapitu i nie spowoduje to złamania linii.

<p>Jestem paragrafem tekstu, który zawiera domyślny <span>element liniowy.</span> Tutaj jest kontynuacja tekstu.</p>

Jestem paragrafem tekstu, który zawiera domyślny element liniowy. Tutaj jest kontynuacja tekstu.

Jeśli umieścimy w naszym kodznie element blokowy, spowoduje on złamanie linii – zawartość elementu blokowego zostanie wyświetlona w nowej linii.

<p>Jestem paragrafem tekstu, który zawiera domyślny <div>element blokowy.</div> Tutaj jest kontynuacja tekstu.</p>

Jestem paragrafem tekstu, który zawiera domyślnyelement blokowy. Tutaj jest kontynuacja tekstu.

Dobrą praktyką jest, aby nie umieszczać elementów blokowych wewnątrz liniowych.

Temat "czym różnią się elementy liniowe od blokowych" jest związany z prezentacją elementów na stronie i rozwiniemy go w odpowiednim rozdziale poświęconym stylom CSS.