Nagłówki

Na swojej stronie możesz używać stopniowalnych nagłówków.

Nagłówek pierwszego stopnia

Linia 1. otwórz nawias ostrokątny h1 zamknij nawias ostrokątny tekst otwórz nawias ostrokątny prawy ukośnik h1 zamknij nawias ostrokątny.

Znaczniki dla kolejnych poziomów wyglądają bardzo podobnie, zmienia się wyłącznie cyfra.

Jak jednak wyglądają jeden pod drugim? Sprawdźmy.

Nagłówek drugiego stopnia

Nagłówek trzeciego stopnia

Nagłówek czwartego stopnia

Nagłówek piątego stopnia
Nagłówek szóstego stopnia
Ważne!

Korzystając z witryny ZPE, nowe nagłówki w markdownie możesz wprowadzać za pomocą #. Jeden # to jeden poziom nagłówka.

Nagłówek piątego stopnia:

Linia 1. kratka kratka kratka kratka kratka Nagłówek piątego stopnia.

Nagłówki możemy również wyrównywać.

Linia 1. otwórz nawias ostrokątny hx align znak równości cudzysłów kierunek wyrównania cudzysłów zamknij nawias ostrokątny tekst otwórz nawias ostrokątny prawy ukośnik hx zamknij nawias ostrokątny.

Do wyboru mamy kierunki: left, right, center.

Akapity

Przejście do nowego akapitu sygnalizujemy znacznikiem:

Linia 1. otwórz nawias ostrokątny p zamknij nawias ostrokątny.

Akapity, podobnie jak nagłówki, możemy wyrównywać.

Linia 1. otwórz nawias ostrokątny p align znak równości cudzysłów kierunek wyrównania cudzysłów zamknij nawias ostrokątny tekst otwórz nawias ostrokątny prawy ukośnik p zamknij nawias ostrokątny.

Do wyboru mamy kierunki: left, right, center.

Jeśli w danym miejscu chcemy zaznaczyć koniec wiersza, ale nie akapitu, posłużymy się znacznikiem:

Linia 1. otwórz nawias ostrokątny br prawy ukośnik zamknij nawias ostrokątny.

Blokadę łamania wprowadzimy natomiast następującym znacznikiem:

Linia 1. otwórz nawias ostrokątny nobr zamknij nawias ostrokątny tekst otwórz nawias ostrokątny prawy ukośnik nobr zamknij nawias ostrokątny.

Listy

Na budowanej stronie możemy chcieć zamieścić listę. Jak to zrobić?

Najpierw zdecydujmy, czy chcemy stworzyć listę numerowaną czy nienumerowaną.

Lista nienumerowana (nieuporządkowana)

Wprowadzamy ją następującymi znacznikami:

Linia 1. otwórz nawias ostrokątny ul zamknij nawias ostrokątny lista otwórz nawias ostrokątny prawy ukośnik ul zamknij nawias ostrokątny.

To jednak nie wszystko, ponieważ oznaczyć powinniśmy również jej kolejne elementy. Jak to zrobić?

Linia 1. otwórz nawias ostrokątny ul zamknij nawias ostrokątny. Linia 2. otwórz nawias ostrokątny li zamknij nawias ostrokątny pierwszy element listy otwórz nawias ostrokątny prawy ukośnik li zamknij nawias ostrokątny. Linia 3. otwórz nawias ostrokątny li zamknij nawias ostrokątny drugi element listy otwórz nawias ostrokątny prawy ukośnik li zamknij nawias ostrokątny. Linia 4. otwórz nawias ostrokątny li zamknij nawias ostrokątny trzeci element listy otwórz nawias ostrokątny prawy ukośnik li zamknij nawias ostrokątny. Linia 5. otwórz nawias ostrokątny prawy ukośnik ul zamknij nawias ostrokątny.

Lista numerowana (uporządkowana)

Wprowadzamy ją następującymi znacznikami:

Linia 1. otwórz nawias ostrokątny ol zamknij nawias ostrokątny lista otwórz nawias ostrokątny prawy ukośnik ol zamknij nawias ostrokątny.

Lista wraz z elementami wygląda podobnie jak lista nieuporządkowana:

Linia 1. otwórz nawias ostrokątny ol zamknij nawias ostrokątny. Linia 2. otwórz nawias ostrokątny li zamknij nawias ostrokątny pierwszy element listy otwórz nawias ostrokątny prawy ukośnik li zamknij nawias ostrokątny. Linia 3. otwórz nawias ostrokątny li zamknij nawias ostrokątny drugi element listy otwórz nawias ostrokątny prawy ukośnik li zamknij nawias ostrokątny. Linia 4. otwórz nawias ostrokątny li zamknij nawias ostrokątny trzeci element listy otwórz nawias ostrokątny prawy ukośnik li zamknij nawias ostrokątny. Linia 5. otwórz nawias ostrokątny prawy ukośnik ol zamknij nawias ostrokątny.

Odsyłacze

Nie bez powodu internet nazywamy siecią. Wszechobecne hiperłącza nie są już dla nikogo zaskoczeniem. Twoja strona internetowa zapewne będzie zawierać przynajmniej kilka odsyłaczy prowadzących do dokumentów, innych witryn, etc. Jak zatem przygotować taki odsyłacz?

Linia 1. otwórz nawias ostrokątny a href znak równości cudzysłów miejsce docelowe cudzysłów zamknij nawias ostrokątny tekst hiperłącza otwórz nawias ostrokątny prawy ukośnik a zamknij nawias ostrokątny.

Hiperłącza mogą prowadzić nie tylko do innych witryn, ale też otwierać klienta poczty, by wysłać maila na podany adres. Wymagają wtedy niewielkiej modyfikacji:

Linia 1. otwórz nawias ostrokątny a href znak równości cudzysłów mailto dwukropek adres email cudzysłów zamknij nawias ostrokątny tekst hiperłącza otwórz nawias ostrokątny prawy ukośnik a zamknij nawias ostrokątny.

Jeśli utworzysz odnośnik, tekst hiperłącza domyślnie będzie miał kolor niebieski oraz będzie podkreślony.

Komentarze

Linia 1. otwórz nawias ostrokątny wykrzyknik minus minus treść komentarza minus minus zamknij nawias ostrokątny.

Cokolwiek umieścisz w znaczniku komentarza zostanie zignorowane przez przeglądarkę. Tag ten jest niezmiernie użyteczny z punktu widzenia programisty. Umożliwia dokumentację kodu - wyjaśnienie jego działania, dzięki czemu, kiedy w przyszłości wrócisz do swojego kodu, będziesz wiedzieć, za co odpowiadał dany element.

Ciekawostka

Większość współczesnych przeglądarek stron WWW ma wbudowane narzędzia ułatwiające programistom tworzenie stron internetowych. Jeśli korzystasz z systemu Windows, otworzysz je przyciskiem F12.

Funkcje, jakie udostępniają, mogą ułatwić naprawianie błędów na stronie. Dostępna jest inspekcja kodu źródłowego, analiza ruchu sieciowego pomiędzy przeglądarką a serweremserwer internetowyserwerem, analiza wydajności strony i wiele innych.

Polecenie 1

Wejdź na dowolną stronę WWW i uruchom narzędzia programistyczne. Przejrzyj dostępne funkcje, sprawdź co się dzieje, kiedy przeglądasz stronę i wchodzisz z nią w interakcję.

Słownik

adres URL
adres URL

usługa pozwalająca publikowanie treści (stron, witryn, serwisów) w sieci internetowej

certyfikat SSL
certyfikat SSL

szyfrowanie, które zabezpiecza dane pozostawiane na stronie WWW, np. w formularzach kontaktowych, podczas logowania; certyfikat ten podnosi pozycję strony w wyszukiwarkach oraz zwiększa jej wiarygodność

CMS
CMS

oprogramowanie do zarządzania treścią strony (ang. Content Management System)

dokument HTML
dokument HTML

dokument (strona WWW) czytany przez przeglądarki internetowe, widoczny pod konkretnym adresem URL; zawiera tekst, odnośniki (linki), informacje o multimediach i zdjęciach

domena
domena

adres strony internetowej, np. www.zlompol.pl

home page (strona główna)
home page (strona główna)

strona, na którą kieruje domyślnie adres witryny internetowej

hosting
hosting

przestrzeń na zdalnym serwerze, gdzie przechowywana jest zawartość strony

kreator stron WWW
kreator stron WWW

narzędzie to tworzenia stron internetowych; znajdują się tam gotowe szablony

link
link

zwany także odnośnikiem, jest aktywnym fragmentem tekstu albo obrazkiem; pozwala przejść na inny adres URL albo wykonać inną czynność, np. przesłać zapytanie przez formularz kontaktowy

post
post

wpis na stronie

responsywność
responsywność

automatyczne dostosowanie rozmiaru strony do urządzeń, na których będzie wyświetlana; responsywna strona to taka, która poprawnie wyświetla się na wszystkich monitorach i wyświetlaczach

serwer internetowy
serwer internetowy

urządzenia do obsługi technicznej stron WWW (przechowywanie plików strony WWW, poczty, multimediów itp.)

single page (podstrona lub pojedyncza strona)
single page (podstrona lub pojedyncza strona)

unikalna strona internetowa, stanowiąca odrębny dokument zawierający treść

strona internetowa
strona internetowa

zbiór dokumentów HTML; połączone są ze sobą linkami URL (odnośnikami); dokumenty te znajdują się w obrębie jednej domeny internetowej (serwisu internetowego albo witryny internetowej)

witryna internetowa/serwis internetowy
witryna internetowa/serwis internetowy

zbiór połączonych ze sobą pojedynczych stron internetowych