Jak wstawić znak wodny w HTML na stronie?

Wstawianie znaku wodnego najczęściej praktykuje się w różnego rodzaju grafikach i zdjęciach, gdzie trzeba oznaczyć obraz nazwą autora lub logo firmy, która wykonała dane dzieło. Ale co jeśli chce ktoś umieścić taki znak wodny, pod tekstem na swojej stronie www? Można to w prosty zrobić za pomocą tandemu HTML+CSS.

Na początek potrzebny Ci będzie plik graficzny, który chcesz wrzucić pod tekst. Ważne żeby to był plik z przezroczystością (png lub gif). Jeśli będzie na białym tle, to również może być, ale tylko pod warunkiem że tło na stronie również jest białe. W innym przypadku będzie to źle wyglądało.

W naszym przypadku użyjemy tej grafiki:

przykładowa grafika pod znak wodny

Następnie trzeba zdefiniować w CSS tak, aby powyższy obrazek stworzył tło pod blokiem tekstowym. Do tego wystarczy użyć reguły background-image. Poniżej pełen listing HTML+CSS w którym pomocniczo, dodane jest jeszcze kilka innych reguł:

<html>
<head>
<style type="text/css">
p {
	border: medium solid back;
	font-size: 30px;
	background-color: #F5F5F5;
	background-image: url(znak-wodny.png);
	background-size: contain;
	background-repeat: round;
}
</style>
</head>
<body>
<p>
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.
</p>
</body>
</html>

Pogrubioną czcionką zaznaczyłem fragment kodu, odpowiedzialnego za działanie skryptu. W efekcie uzyskasz takie coś:

przykład wstawiania znaku wodnego w html i css

Jak widać trochę obrazek gryzie się z tekstem, bo powinien być trochę bladszy i najlepiej w jasnoszarym kolorze. Ale tutaj bardziej chodzi o pokazanie na przykładzie.

Teraz wyjaśnię poszczególne linijki:

background-color: #F5F5F5; – ustalanie koloru tła akapitu, w przykładzie lekko szary
background-image: url(znak-wodny.png); – tutaj najważniejsza linijka w której wstawiasz lokalizację pliku graficznego na serwerze, który posłuży jako tło czyli znak wodny
background-size: contain; – tutaj ustala się wielkość obrazu, można ustawić ręcznie w jakim rozmiarze ma się wyświetlać, albo wybrać jedne z gotowych przełączników:
contain – skalowanie do największego rozmiaru, który zmieści się w obrębie pola tekstowego (z zachowaniem proporcji)
cover – skalowanie do najmniejszego rozmiaru
auto – wyświetlanie w pełnym rozmiarze
background-repeat: round; – ustawianie powtórzeń obrazka oraz jego orientacja:
repeat-x – powtarzanie, orientacja w poziomie, może być urwany
repeat-y – powtarzanie, orientacja w pionie, może być urwany
repeat – powtarzanie w obu kierunkach, urwany
space – dostosowanie aż do wypełnienia obszaru, bez urywania, rozłożenie równomierne
round – skalowanie w taki sposób żeby nie urywać
no-repeat – bez powtarzania

Oczywiście opcji jest jeszcze więcej, można je znaleźć w oficjalnej dokumentacji CSS. Chociaż użycie powyższych instrukcji w zupełności wystarczy, aby umieścić dowolny plik graficzny na stronę w postaci znaku wodnego.


Jak zrobić rozwijany tekst w HTML

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?

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.