Tag: css

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 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.

Jak sprawdzić kolor na stronie www?

hostingi

Na stronach internetowych poza gotowymi grafikami, często używane są różnego rodzaju elementy graficzne, belki menu, sekcje, tła itp. Mają one określone kolory, które najczęściej ustawia się w kaskadowych arkuszach stylu CSS. Czasami jako webmasterowi spodoba Ci się dany kolor z konkretnego elementu na innej stronie i chciałbyś się dowiedzieć jaki to jest kolor. A konkretniej przydałby się kod koloru w HTML, który można by użyć u siebie przy tworzeniu strony www.

Jaki kolor został użyty na stronie internetowej można sprawdzić w każdej chwili, sprawdzając w przeglądarce internetowej. Na poniższym przykładzie została użyta przeglądarka Opera, aczkolwiek nic nie stoi na przeszkodzie, żeby to była inna np. Firefox czy Chrome, jedynie opis funkcji w menu może się nieznacznie różnić.

Najeżdżasz kursorem na dany element strony, którego kolor chcesz sprawdzić i klikasz prawym przyciskiem myszy, następnie z menu kontekstowego wybierasz Zbadaj element.

zbadaj element

Wyświetli się specjalna konsola dla developerów, w której można sprawdzić wiele aspektów technicznych strony, którą badamy. Jeśli wybrałeś opcję na konkretnym elemencie, to wyświetli się jego fragment kodu źródłowego (w HTML), a poniżej w sekcji Style znajdziesz jaki kolor został użyty w CSS.

sprawdzanie koloru na stronie

W przykładzie na powyższych screenach, badany był kolor belki menu na tej stronie (rankhost.pl), dzięki czemu dowiedzieliśmy się, jaki to jest kolor zapisany w kodzie HTML – #54397E, czyli ciemnofioletowy.

Jak widać, w konsoli sprawdzisz wiele innych kolorów z danej strony np. kolor tła. Jeśli natomiast dany element strony jest grafiką (np. w formacie JPEG), to musisz użyć zewnętrznego programu np. Peacock Color Picker, do którego link umieściliśmy w dodatkach dla webmasterów na naszej stronie.