Przykładowy wpis blogowy do testowania stylów HTML
To jest przykładowy wpis przygotowany po to, aby sprawdzić wygląd najczęściej używanych znaczników HTML w treści blogowej. Zawiera zwykłe akapity, pogrubienia, pochylenia, linki tekstowe, zaznaczenia, listy, cytaty, tabele, obrazki oraz fragmenty kodu.
Drugi akapit pozwala sprawdzić odstępy między blokami tekstu, interlinię oraz czytelność dłuższych fragmentów. W treści mogą pojawić się również skróty, takie jak HTML, elementy klawiaturowe typu Ctrl + S, a także krótkie fragmenty kodu, na przykład wp_head().
Nagłówek drugiego poziomu
Ten fragment pokazuje, jak wygląda typowa sekcja wpisu blogowego. Nagłówki drugiego poziomu są najczęściej używane do dzielenia dłuższej treści na większe części.
Nagłówek trzeciego poziomu
Nagłówki trzeciego poziomu dobrze sprawdzają się przy mniejszych podrozdziałach, instrukcjach albo rozwinięciach konkretnych zagadnień.
Nagłówek czwartego poziomu
Ten poziom nagłówka pojawia się rzadziej, ale nadal warto sprawdzić jego wygląd, odstępy i proporcje względem zwykłego tekstu.
Nagłówek piątego poziomu
Piąty poziom nagłówka może być używany w bardziej rozbudowanych poradnikach technicznych lub dokumentacyjnych.
Nagłówek szóstego poziomu
Najniższy poziom nagłówka powinien być czytelny, ale nie powinien wizualnie dominować nad ważniejszymi elementami wpisu.
W treści wpisu można używać różnych wyróżnień tekstowych. Przykładowo: ważna informacja, delikatne zaakcentowanie, pogrubienie wizualne, pochylenie wizualne, podkreślenie, tekst nieaktualny, tekst usunięty, tekst dodany, tekst pomocniczy lub drobny dopisek.
Można też używać indeksów, na przykład 210 albo H2O. W tekstach technicznych przydają się również znaczniki code, kbd, samp oraz var.
Dobry motyw WordPress powinien być przygotowany nie tylko na idealne demo, ale też na prawdziwe treści, które użytkownicy będą dodawać przez kolejne lata.
Przykładowy autor cytatu
Poniżej znajduje się lista punktowana, czyli jeden z najczęściej używanych elementów we wpisach blogowych.
- Pierwszy element listy punktowanej.
- Drugi element listy z pogrubionym fragmentem.
- Trzeci element listy z linkiem tekstowym.
-
Element z listą zagnieżdżoną:
- Pierwszy podpunkt.
- Drugi podpunkt.
- Trzeci podpunkt.
Lista numerowana przydaje się przy instrukcjach, rankingach i opisach kolejnych kroków.
- Pierwszy krok instrukcji.
- Drugi krok instrukcji.
- Trzeci krok instrukcji.
-
Krok z dodatkowymi podpunktami:
- Pierwszy podkrok.
- Drugi podkrok.
Lista definicji jest mniej popularna, ale bywa przydatna przy słownikach pojęć, dokumentacji albo opisach parametrów.
- Motyw WordPress
- Zestaw plików odpowiadających za wygląd oraz część działania strony internetowej.
- Wtyczka WordPress
- Dodatkowy moduł rozszerzający funkcjonalność strony.
- HTML
- Język znaczników używany do budowania struktury dokumentów internetowych.
Tabele często pojawiają się w porównaniach, zestawieniach cen, parametrach technicznych albo raportach.
| Element | Zastosowanie | Priorytet stylowania |
|---|---|---|
| Nagłówki | Porządkowanie treści | Wysoki |
| Listy | Instrukcje i wypunktowania | Wysoki |
| Tabele | Dane i porównania | Średni |
| Cytaty | Wyróżnione fragmenty tekstu | Średni |
| Stopka tabeli z dodatkową informacją. | ||
W blogach technicznych często pojawiają się krótkie fragmenty kodu osadzone w treści, na przykład add_action(), oraz większe bloki kodu.
function register_custom_post_type() {
register_post_type('example', array(
'label' => 'Examples',
'public' => true,
'has_archive' => true,
'supports' => array('title', 'editor', 'thumbnail')
));
}
add_action('init', 'register_custom_post_type');
To jest tekst preformatowany.
Zachowuje odstępy,
wcięcia
oraz łamanie linii.
Poniżej znajduje się przykład osadzonego materiału wideo, który pozwala sprawdzić responsywność iframe w treści wpisu.
Element details może być używany do prostych sekcji rozwijanych, na przykład w FAQ albo dodatkowych wyjaśnieniach.
Kliknij, aby rozwinąć dodatkowe informacje
To jest ukryta treść widoczna po rozwinięciu elementu. Można tutaj umieścić dodatkowe wyjaśnienia, krótką instrukcję albo mniej istotne informacje pomocnicze.
Dane kontaktowe można oznaczyć znacznikiem address, chociaż we wpisach blogowych pojawia się on raczej sporadycznie.
Przykładowa firma
ul. Testowa 12, 00-000 Miasto
Na końcu wpisu warto dodać jeszcze zwykły akapit zamykający, aby sprawdzić, jak treść wygląda po tabelach, obrazkach, cytatach, listach oraz blokach kodu. Dzięki temu łatwiej dopracować marginesy, odstępy, typografię i ogólną spójność wizualną wpisów blogowych.