Każdy znacznik HTML jest rozpoczynany znakiem "<", a kończony znakiem ">". O jego dokładnym przeznaczeniu decyduje to, co się znajduje w jego środku. Można to określić za pomocą tzw. "identyfikatora" obiektu poszczególnego typu (nie myl tego z parametrem "id"). Na JetPunku najczęściej spotkasz znaczniki: <a>, <b> oraz <i>.

Oprócz tego, ważna jest pozycja znaku "/" wewnątrz takiego znacznika. Jeśli nie występuje on wewnątrz znacznika, oznacza to, że znacznik definiuje początek zawartości danego obiektu. Jeśli występuje on zaraz po znaku "<", oznacza jego koniec, natomiast zaraz przed znakiem ">" umieszcza się go w znacznikach, które nie posiadają zawartości.

Część obiektów posiada dodatkowe parametry, które definiowane są zwykle w znaczniku rozpoczynającym. Mają one postać: nazwa_parametru="wartość". Za chwilę poznamy kilka ich przykładów.

Ten znacznik nie zmienia nic w tekście, ale umożliwia nadanie klasy za pomocą parametru <div class="nazwa klasy"></div>, który będzie potem potrzebny przy okazji znacznika <style>, który zostanie omówiony w późniejszej części tego bloga.

Oba znaczniki służą do pogrubiania tekstu. Tekst w HTML napisany w następującej formie: <b>Przykład</b> (lub <strong>Przykład</strong>), będzie wyglądał tak:

Znaczniki <i>, <em> i <cite> służą do pochylania tekstu. W tym przypadku, używając <i>Przykład</i> lub któregoś z pozostałych znaczników, uzyskamy taki efekt:

Kolejna para znaczników, która tym razem umożliwia podkreślenie tekstu:

Te znaczniki umożliwiają skreślenie napisu, co wygląda tak:

Znacznik <sup> służy natomiast do zapisywania tekstu w indeksie górnym:

A znacznik <sub> - w indeksie dolnym

Ten znacznik pomniejsza tekst, tak samo jak dwa poprzednie, ale umiejscawia go pośrodku:

Dzięki temu znacznikowi można wyróżnić tekst tak, jakby był on zaznaczony podkreślaczem:

Ten znacznik zamyka całą zawartość w cudzysłowie. Ale nie jest to "tego typu cudzysłów", a ten, jaki znamy z lekcji języka polskiego:

Ten znacznik rozpoczyna nową linijkę tekstu, zapisaną w całości kursywą. Zaraz po jego zakończeniu, kolejny tekst również jest zapisywany od nowej linijki:

Istnieje 6 tego typu znaczników. Służą one do tworzenia nagłówków różnej wielkości. Poniżej pokazane są przykłady użycia wszystkich typów nagłówków:

Wewnątrz znacznika <p> umieszcza się pojedynczy akapit tekstu. Napiszmy więc taki kod: <p>Pierwszy akapit</p><p>Drugi akapit</p>

Zarówno znaczniki akapitu, jak i wszystkie do tej pory wymienione, używa się tak samo - <nazwa>zawartość</nazwa> i można je łączyć ze sobą.

Ten znacznik odpowiada za zakończenie linijki tekstu i przejście do kolejnej. Oto przykład tekstu z linijkami rozdzielonymi za pomocą <br/>:

Zwróć uwagę, że interlinia pomiędzy linijkami rozdzielonymi znacznikiem <br/> oraz tekstem zawartym w znaczniku <p> znacząco się różni.

Znacznik <a> odpowiada za hiperłącze. Posiada on parametr "href", którym jest adres, do którego hiperłącze ma prowadzić. A zatem żeby utworzyć link do strony głównej JetPunk, należy użyć następującej składni: <a href="https://jetpunk.com/pl">LINK</a>

A tak prezentuje się efekt:

Kolejnym wartym wspomnienia parametrem tego znacznika jest "target". Określa on miejsce otwarcia linku. Domyślnie strona otworzy się w aktualnie przeglądanej karcie, jednak możemy to zmienić. Są 4 możliwe wartości parametru target, jednak w praktyce używa się tylko dwóch, a mianowicie:

- self (strona otwiera się w bieżącej karcie)

- blank (strona otwiera się w nowej karcie)

Przetestuj teraz różne linki na stronę główną JetPunk w zależności od ustawionego parametru target:

Jego zadaniem jest przechowywanie informacji dotyczących wyglądu elementów o poszczególnych identyfikatorach lub poszczególnego rodzaju (klasy). Informacje te są zapisywane w formie CSS. Istnieją dwa sposoby, aby użyć styli.

Stwórzmy zatem element tekstu do pokolorowania za pomocą znacznika <div>:

Pierwszy ze sposobów polega na użyciu znacznika <style> przed znacznikiem <div>. Jednak wcześniej wypadałoby nadać klasę divovi (JetPunk niestety nie pozwala na dodanie identyfikatora), aby przeglądarka wiedziała, o który element nam chodzi. Dopiszmy więc:

<style>

.kolorki {

color: blue;

}

</style>

<div class="kolorki">Przykład</div>

Pamiętaj, żeby każdą cechę zakończyć średnikiem, a przed nazwą klasy musi znajdować się kropka - inaczej przeglądarka pomyśli, że chodzi o rodzaj identyfikatora, typu <table>, <a> itp. Swoją drogą, je też można modyfikować dzięki stylom. Napiszmy więc coś takiego:

<style>

i {

color: red;

background-color: green; (to odpowiada za kolor tła tekstu)

}

</style>

<i>Przykład</i>

I mamy zmodyfikowany znacznik <i>! O to nam chodziło - mamy czerwony tekst zapisany kursywą na zielonym tle. Parametrów, które można edytować, jest wiele, a należą do nich m.in.:

color - do modyfikacji koloru

background-color - do modyfikacji koloru tła

text-align - do modyfikacji położenia tekstu (left, center, right, justify)

vertical-align - do modyfikacji położenia tekstu w pionie (baseline, middle, top, bottom

font-size - do modyfikacji rozmiaru czczionki

font-weight - do modyfikacji tłustości czcionki

width - do modyfikacji szerokości

height - do modyfikacji wysokości

opacity - do modyfikacji przezroczystości tekstu (wartość od 0 do 1)

Jeszcze taka ciekawostka - symbole znajdujące się w stopce strony, a także na górze strony, również zmieniły swój wygląd, ponieważ także są okodowane w znaczniku <i>, a przeglądarka interpretuje style zawarte w blogu w taki sposób, że dotyczą wszystkiego, co znajduje się po nich, nawet jeśli nie jest to już element bloga. Na stronie głównej JetPunk już będą normalne.

Zawartością tego znacznika jest cała tabela, której poszczególne elementy (wiersze, komórki) są definiowane poprzez używanie innych znaczników w zawartości tabeli.

Ten znacznik określa poszczególne wiersze tabeli.

Ten znacznik określa zawartość komórki nagłówkowej.

Ten znacznik określa zawartość zwykłej komórki.

Jednak jeśli spodziewasz się fajnej tabeli po zbudowaniu jej ze znaczników, które zaprezentowałem, nie spodziewaj się niczego takiego, ponieważ zwykła tabela utworzona w ten sposób (bez żadnych styli, ani klas) będzie wyglądała następująco:

Do znacznika <table> dodaj parametr "class", a jego wartość ustaw na "standard-table" - wówczas tabela będzie dopasowana do większości, jakie możesz znaleźć poza quizami na JetPunku. Taka tabela będzie się prezentować w ten sposób:

Jest to dość specyficzny znacznik, który pozwala dodać komentarz widoczny tylko podczas edycji kodu. W zwykłej przeglądarce nie jest on wyświetlany. Aby go użyć, należy wpisać: <!-- komentarz -->