Miesiąc: wrzesień 2023

Jak zrobić rozwijany tekst w HTML

hostingi

Ten artykuł początkuje cykl porad na naszym blogu, odnośnie ciekawych rozwiązań programistycznych. Mogą się one przydać każdemu webmasterowi, podczas tworzenia stron internetowych. W końcu nie każdy z nas żyje tylko hostingiem.

Dziś problem, którego rozwiązania szuka wielu początkowych projektantów stron www. A mianowicie jak zrobić element strony, który po kliknięciu będzie rozwijał więcej tekstu. Najprościej zrobić to w HTML (+ CSS), więc tym językiem posłużę się w przykładzie.

Rozwijany tekst najprościej zrobić, za pomocą znaczników HTML <details> i <summary>. Pierwszy znacznik odpowiedzialny jest za stworzenie w dokumencie odpowiedniej sekcji, którą użytkownik strony może rozwijać, aby zobaczyć większą ilość tekstu domyślnie niewidoczną. Znacznik <summary> jest uzupełnieniem tego głównego i odpowiada za tytuł sekcji, czyli to co jest widoczne. Po kliknięciu w ten tytuł, rozwija się reszta. Tyle teorii. A teraz jak to wygląda w praktyce.

Poniżej przykładowy listing rozwijanego tekstu w ramce:

<html>
<head>
<style>
details {border: solid thin green; padding: 10px; width: 500px}
details > summary { font-weight: bold}
</style>
</head>
<body>
<details>
<summary>Tytuł rozwijanego tekstu w HTML</summary><br>
Dalsza treść rozwiniętego opsu.<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br>
</details>
</body>
</html>

Specjalnie dałem kod w pełnej strukturze HTML, aby było dobrze widoczne w jakiej sekcji dodać style, które będą definiować wygląd rozwijanego tekstu. Natomiast pogrubioną czcionką, zaznaczone są konkretne znaczniki, które za to odpowiadają.


Wynik powyższego kodu:

Tytuł rozwijanego tekstu w HTML
Dalsza treść rozwiniętego opsu.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Jak widać domyślnie widoczny jest tylko tekst z zawartości elementu <summary>, który po kliknięciu otwiera resztę treści umieszczonej w elemencie <details>. Oczywiście wygląd i wymiary, można dowolnie modyfikować pod swoje potrzeby w sekcji <style></style>.

Warto też dodać że w znaczniku <details> można dodać atrybut open.

<details open>

Dzięki temu tekst od razu będzie domyślnie rozwinięty, dopiero kliknięcie w tytuł, będzie go zamykało.

Jak dodać favicon w WordPress?

hostingi

System zarządzania treścią WordPress domyślnie nie posiada ustawionej tzw. favicon. We wcześniejszych wersjach tego CMS, była po to prostu graficzna literka W w kółeczku. Czasami można ją jeszcze zauważyć w różnych stronach postawionych na WordPressie, nawet firmowych. Wygląda to co najmniej nieprofesjonalnie i warto ją zmienić, na swoją unikalną faviconę. Będzie ona ładnie wyróżniała Twoją stronę w zakładkach przeglądarki internetowej, sekcji ulubionych czy w aplikacjach mobilnych.

Aby dodać ikonę favicon do swojej strony na WordPressie musisz mieć przygotowaną kwadratową grafikę o rozmiarach co najmniej 512 x 512 pikseli. Może to być jeszcze większy plik graficzny (np. 1500 x 1500 px) w postaci .jpg czy .png, ważne żeby miał takie same proporcje, czyli miał taką samą wysokość i szerokość. To jest znaczne ułatwienie, bo dodając w standardowy sposób ikonę favicon, trzeba mieć specjalnie przygotowany plik o rozmiarach 16×16 lub 32×32 pikseli w formacie .ico. Tutaj skrypt WP wszystko sam przekształci i zainstaluje.

Aby dodać favicon zaloguj się panelu administracyjnego WP. Następnie wejdź z menu w opcję Wygląd -> Dostosuj i wybierz Tożsamość witryny. W tym miejscu ustawiasz ikonę witryny czyli Twój favicon.

ustawianie ikony witryny w wordpressie

Po kliknięciu przycisku Wybierz ikonę witryny, wyświetli się standardowe okienko multimediów z którego możesz wybrać już istniejącą grafikę lub załadować ją z Twojego komputera. Po wgraniu grafiki pojawi się jeszcze okno, gdzie będziesz miał możliwość przyciąć grafikę, dzięki czemu można usunąć puste przestrzenie wokół grafiki, jeśli takie istnieją. Po przycięciu grafika zostanie ustawiona jako favicon Twojej witryny.

favicon w wordpress

Oczywiście zawsze istnieje możliwość jej usunięcia lub zmiany na inny obrazek. Ważne że teraz Twoja strona, będzie ładnie wyglądała wśród zakładek przeglądającego ją internauty.

Tak to będzie wyglądało w widoku przeglądarki internetowej:

widok favicony na tle zakładek przeglądarki

Warto tutaj dodać, że lokalizacja favicony jest zaszyta gdzieś w bazie WordPressa, więc nie znajdziesz jej w katalogu głównym, jak to wygląda w standardowej metodzie instalacji tego typu ikonki.

Jak sprawdzić czcionkę na stronie internetowej?

hostingi

Podczas tworzenia strony internetowej, podobnie jak podczas tworzenia dokumentu tekstowego, istnieje możliwość zdefiniowania czcionki tekstu. Oczywiście nic nie stoi na przeszkodzie, żeby rodzaj czcionki jednego tekstu, różnił się od drugiego w innej części witryny. Rodzaj czcionki definiuje się kaskadowych arkuszach stylów, czyli CSS.

Ma to najczęściej tego typu formę:

body {
  font-family: sans-serif;
}

Powyższy listing definiuje czcionkę sans-serif dla wszystkich tekstów w sekcji <body…</body>.

I teraz może się zdarzyć, że spodobała Ci się czcionka na jakieś stronie i chciałbyś użyć takiej samej na swojej. Niestety jako zwykły użytkownik, podglądu w pliki źródłowe serwisu nie masz, więc w celu sprawdzenia czcionki możesz posłużyć się narzędziem, które jest wbudowane w każdą popularną przeglądarkę internetową.

Poniżej pokażę na przykładzie tej strony (rankhost.pl) i przeglądarki Opera jak to zrobić. Wchodzisz na stronę internetową, zaznaczasz tekst którego czcionka Cię interesuje i prawym przyciskiem myszy wybierasz opcję Zbadaj element (lub korzystasz ze skrótu klawiatury Ctrl+Shift+C)

W Mozilla Firefox będzie to PPM i Zbadaj, natomiast w Microsoft Edge – Wykonaj inspekcję.

Z boku lub poniżej (w zależności od przeglądarki) wyświetli się konsola dla webmasterów DevTools, która oczywiście posiada więcej ciekawych informacji (np. możesz sprawdzić kolor na stronie) i funkcji programistycznych. Następnie niżej w zakładce Style wyszukujesz własność font-family. Z reguły będzie ona w sekcji body, ale równie dobrze może to być jakiś inny znacznik CSS, który ustawia rodzaj czcionki w wybranym akapicie tekstu na stronie.

Będzie znajdować się tam szukana przez Ciebie nazwa czcionki, która została użyta podczas tworzenia strony. To jest ta, która występuje na pierwszym miejscu. W powyższym obrazku jest to czcionka Helverica Neue i z reguły jest to ta której szukasz. Z reguły, bo jak widać praktyka pokazuje, może być więcej nazw czcionek po przecinku. Taki zapis stosuje się dlatego, gdyby Twoja przeglądarka nie obsługiwała tej pierwszej właściwej czcionki, wtedy użyje kolejnych zapasowych i z reguły tych bardziej popularnych, które są powszechne w różnych systemach operacyjnych.