określa adres URL, do którego ma prowadzić link. Atrybuty mogą również służyć do określania stylów CSS dla danego elementu, np. atrybut "style" w znaczniku pozwala na zdefiniowanie stylu tekstu w akapicie. Atrybuty znaczników HTML są ważnym elementem pozwalającym na precyzyjne określanie wyglądu i funkcjonalności elementów strony internetowej.
Znaczniki HTML w sekcji META
Znaczniki w sekcji META strony HTML służą do przekazywania dodatkowych informacji o stronie internetowej dla przeglądarek internetowych i wyszukiwarek. Te informacje są niewidoczne dla użytkowników, ale mają wpływ na sposób, w jaki strona jest interpretowana i wyświetlana w wyszukiwarkach, a także na interakcje między użytkownikami a stroną.
W sekcji META można umieścić różne atrybuty i wartości, które przekazują informacje o stronie internetowej, takie jak:
-
Opis strony (atrybut "description") - krótki opis strony, który pojawia się w wynikach wyszukiwania.
-
Słowa kluczowe (atrybut "keywords") - słowa kluczowe związane z tematem strony, które pomagają w wyszukiwaniu.
-
Autor (atrybut "author") - nazwa autora lub twórcy strony.
-
Kodowanie znaków (atrybut "charset") - określa, w jakim kodowaniu znaków jest napisana strona.
-
Wygasające (atrybut "expires") - określa datę, po której strona przestaje być aktualna i powinna być odświeżona.
-
Roboty (atrybut "robots") - określa, czy wyszukiwarki mogą indeksować stronę i jakie działania powinny podjąć w odniesieniu do niej.
Wszystkie te informacje pomagają przeglądarce internetowej i wyszukiwarkom w skuteczniejszym analizowaniu i wyświetlaniu strony internetowej, co z kolei może zwiększyć jej widoczność i dostępność dla użytkowników.
Oto lista 30 podstawowych znaczników HTML:
-
- Określa początek i koniec dokumentu HTML.
-
- Określa sekcję nagłówka dokumentu, która zawiera informacje o dokumencie.
-
- Określa tytuł dokumentu, który wyświetla się w pasku tytułu przeglądarki.
</li>
<li>
<body> - Określa sekcję zawartości dokumentu.
</li>
<li>
<h1>, <h2>, <h3>, <h4>, <h5>, <h6> - Określają nagłówek sekcji, gdzie <h1> jest najważniejszy, a <h6> najmniej ważny.
</li>
<li>
<p> - Określa akapit tekstu.
</li>
<li>
<p><a> - Określa link do innej strony lub pliku.</p>
</li>
<li>
<p><img> - Określa obrazek.</p>
</li>
<li>
<ul> - Określa listę punktowaną.
</li>
<li>
<ol> - Określa listę numerowaną.
</li>
<li>
<li> - Określa element listy.
</li>
<li>
<div> - Określa sekcję strony lub kontener dla innych elementów.
</li>
<li>
<p><span> - Określa część tekstu lub kontener dla innych elementów.</p>
</li>
<li>
<form> - Określa formularz, który zbiera dane od użytkownika.
</li>
<li>
<p><input> - Określa element formularza, w którym użytkownik może wprowadzać dane.</p>
</li>
<li>
<label> - Określa etykietę dla elementu formularza.
</li>
<li>
<select> - Określa listę rozwijaną, w której użytkownik może wybierać jedną z kilku opcji.
</li>
<li>
<option> - Określa opcję w elemencie <select>.
</li>
<li>
<textarea> - Określa pole tekstowe, w którym użytkownik może wprowadzać dłuższy tekst.
</li>
<li>
<button> - Określa przycisk, który może być kliknięty przez użytkownika.
</li>
<li>
<table> - Określa tabelę.
</li>
<li>
<tr> - Określa wiersz w tabeli.
</li>
<li>
<th> - Określa nagłówek kolumny lub wiersza w tabeli.
</li>
<li>
<td> - Określa komórkę tabeli.
</li>
<li>
<thead> - Określa sekcję nagłówka w tabeli.
</li>
<li>
<tbody> - Określa sekcję treści w tabeli.
</li>
<li>
<tfoot> - Określa sekcję stopki w tabeli.
</li>
<li>
<style> - Określa styl dla dokumentu HTML.
</li>
<li>
<script> - Określa skrypt JavaScript.
</li>
<li>
<p><meta> - Określa dodatkowe informacje o dokumencie, takie jak opis strony, słowa kluczowe, kodowanie znaków.</p>
</li>
</ol>
<h2>Znaczniki HTML podzielone według działania</h2>
<p>Znaczniki HTML można podzielić na różne grupy w zależności od ich funkcji. Oto kilka przykładowych grup znaczników:</p>
<ol>
<li>
<p>Znaczniki strukturalne:</p>
<ul>
<li>
<html>
</li>
<li>
<head>
</li>
<li>
<title>
</li>
<li>
<body>
</li>
<li>
<div>
</li>
<li>
<p><span></p>
</li>
<li>
<header>
</li>
<li>
<footer>
</li>
<li>
<nav>
</li>
<li>
<section>
</li>
<li>
<article>
</li>
<li>
<aside>
</li>
<li>
<main>
</li>
<li>
<figure>
</li>
<li>
<figcaption>
</li>
</ul>
</li>
<li>
<p>Znaczniki tekstu:</p>
<ul>
<li>
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>
</li>
<li>
<p>
</li>
<li>
<p><b>, <strong></p>
</li>
<li>
<p><i>, <em></p>
</li>
<li>
<p><u>, <ins></p>
</li>
<li>
<p><s>, <del></p>
</li>
<li>
<p><sup>, <sub></p>
</li>
<li>
<p><br></p>
</li>
<li>
<hr>
</li>
<li>
<blockquote>
</li>
<li>
<p><q></p>
</li>
</ul>
</li>
<li>
<p>Znaczniki linków:</p>
<ul>
<li><a></li>
</ul>
</li>
<li>
<p>Znaczniki obrazów i multimediów:</p>
<ul>
<li>
<img>
</li>
<li>
<video>
</li>
<li>
<audio>
</li>
<li>
<source>
</li>
<li>
<track>
</li>
</ul>
</li>
<li>
<p>Znaczniki list:</p>
<ul>
<li>
<ul>
</li>
<li>
<ol>
</li>
<li>
<li>
</li>
</ul>
</li>
<li>
<p>Znaczniki tabel:</p>
<ul>
<li>
<table>
</li>
<li>
<tr>
</li>
<li>
<th>
</li>
<li>
<td>
</li>
<li>
<thead>
</li>
<li>
<tbody>
</li>
<li>
<tfoot>
</li>
</ul>
</li>
<li>
<p>Znaczniki formularzy:</p>
<ul>
<li>
<form>
</li>
<li>
<input>
</li>
<li>
<label>
</li>
<li>
<select>
</li>
<li>
<option>
</li>
<li>
<textarea>
</li>
<li>
<button>
</li>
<li>
<fieldset>
</li>
<li>
<legend>
</li>
<li>
<optgroup>
</li>
</ul>
</li>
</ol>
<p>Znaczniki HTML podzielone ze względu na występowanie w <body> lub </head></p>
<p>Znaczniki HTML można podzielić ze względu na ich występowanie w sekcji <head> lub <body> dokumentu. Oto przykładowe znaczniki z każdej grupy:</p>
<p>Znaczniki występujące w sekcji <head>:</p>
<ul>
<li>
<title>
</li>
<li>
<meta>
</li>
<li>
<link>
</li>
<li>
<style>
</li>
<li>
<script>
</li>
<li>
<base>
</li>
</ul>
<p>Znaczniki występujące w sekcji <body>:</p>
<ul>
<li>
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>
</li>
<li>
<p>
</li>
<li>
<p><a></p>
</li>
<li>
<img>
</li>
<li>
<ul>, <ol>, <li>
</li>
<li>
<table>, <tr>, <th>, <td>
</li>
<li>
<form>, <input>, <label>, <select>, <option>, <textarea>, <button>
</li>
</ul>
<p>W sekcji <head> umieszcza się informacje o dokumencie, takie jak tytuł, opis, słowa kluczowe, a także odwołania do plików stylów CSS i skryptów JavaScript. W sekcji <body> umieszcza się zawartość właściwą dokumentu, taką jak tekst, obrazy, linki, formularze i tabele. Podział na sekcje <head> i <body> umożliwia oddzielenie informacji o dokumencie od jego zawartości, co pozwala na łatwiejsze zarządzanie i modyfikowanie stron internetowych.</p>
<pre><code><body></code></pre>
</article>
<div class="flex-none flex-centered w-full p-6 mx-auto">
<div class="space-x-3 text-center">
<a class="text-sm rounded-md border border-gray-300 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-800 inline-block px-4 py-2"
href="/phishing-co-to-jest-co-to-jest-atak-phishingowy-i-jak-sie-przed-nim-bronic"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chevron-left inline-block w-5" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<path d="M15 6l-6 6l6 6" />
</svg> Poprzedni Post</a>
<a class="text-sm rounded-md border border-gray-300 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-800 inline-block px-4 py-2"
href="/co-to-jest-technika-pomodoro">Następny Post <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chevron-right inline-block w-5" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<path d="M9 6l6 6l-6 6" />
</svg></a>
</div>
</div>
<h4 class="text-xl font-bold mt-4">Other Related Posts:</h4>
<div class="flex flex-wrap -mx-4">
<article class="magic-content w-full sm:w-1/2 px-4 my-4">
<div class="blog-item flex flex-col items-stretch bg-white dark:bg-gray-700/40 h-full shadow-lg rounded-md overflow-hidden">
<a href="/aktualizacja-oprogramowania-dlaczego-warto-o-niej-pamietac" class="">
<img class="block bg-cover bg-center w-full h-40 object-cover" src="/user/pages/01.blog/aktualizacja-oprogramowania-dlaczego-warto-o-niej-pamietac/aktualizacja-oprogramowania-dlaczego-warto-o-niej-pamietac.jpg"
alt="Aktualizacja oprogramowania - dlaczego warto o niej pamiętać?"/>
</a>
<div class=" max-w-none flex-1 p-4">
<div class="prose md:prose-md dark:prose-invert">
<div class="tags text-sm">
<a href="/tag:poradniki#blog_list">
<span class="mr-2">
poradniki
</span>
</a>
<a href="/tag:technologie#blog_list">
<span class="mr-2">
technologie
</span>
</a>
</div>
</div>
<a href="/aktualizacja-oprogramowania-dlaczego-warto-o-niej-pamietac" class="transition">
<h3 class="text-xl mt-6 mb-4 font-semibold text-gray-900 hover:text-black dark:text-gray-100 dark:hover:text-white">
Aktualizacja oprogramowania - dlaczego warto o niej pamiętać?
</h3>
</a>
<div class="prose md:prose-md dark:prose-invert text-base leading-normal"><p>Aktualizowanie oprogramowania jest jednym z najważniejszych kroków w celu utrzymania bezpieczeństwa i poprawnego działania urządzeń. Oto 10 powodów, dla których warto aktualizować oprogramowanie:</p>
<ol>
<li>
<p>Bezpieczeństwo: Aktualizacje oprogramowania zawierają często poprawki bezpieczeństwa, które chroni...</p></li></ol></div>
</div>
<div class="p-4 -mt-4 text-description text-sm text-gray-500">
02-02-23 0:00
</div>
</div>
</article>
<article class="magic-content w-full sm:w-1/2 px-4 my-4">
<div class="blog-item flex flex-col items-stretch bg-white dark:bg-gray-700/40 h-full shadow-lg rounded-md overflow-hidden">
<a href="/jak-usunac-konto-na-twitterze-poradnik-krok-po-kroku-2023" class="">
<img class="block bg-cover bg-center w-full h-40 object-cover" src="/user/pages/01.blog/jak-usunac-konto-na-twitterze-poradnik-krok-po-kroku-2023/jak-usunac-konto-na-twitterze-poradnik-krok-po-kroku-2023.jpg"
alt="Jak usunąć konto na Twitterze - poradnik krok po kroku 2023"/>
</a>
<div class=" max-w-none flex-1 p-4">
<div class="prose md:prose-md dark:prose-invert">
<div class="tags text-sm">
<a href="/tag:poradniki#blog_list">
<span class="mr-2">
poradniki
</span>
</a>
<a href="/tag:technologie#blog_list">
<span class="mr-2">
technologie
</span>
</a>
</div>
</div>
<a href="/jak-usunac-konto-na-twitterze-poradnik-krok-po-kroku-2023" class="transition">
<h3 class="text-xl mt-6 mb-4 font-semibold text-gray-900 hover:text-black dark:text-gray-100 dark:hover:text-white">
Jak usunąć konto na Twitterze - poradnik krok po kroku 2023
</h3>
</a>
<div class="prose md:prose-md dark:prose-invert text-base leading-normal"><p>Chociaż Twitter jest jednym z bardzo chętnie odwiedzanych portali społecznościowych to niektórzy mogą chcieć usunąć konto. Powodów dezaktywacji konta może być wiele: komuś może nie odpowiadać na przykład nowy właściciel, albo zmiany, które są wprowadzane na portalu. Przedstawiamy instrukcję na dezak...</p></div>
</div>
<div class="p-4 -mt-4 text-description text-sm text-gray-500">
23-01-23 0:00
</div>
</div>
</article>
</div>
</div>
<div id="sidebar" class="w-full md:w-3/12 flex flex-wrap text-left flex-col lg:px-4 my-6">
<aside class="prose md:prose-md dark:prose-invert col-count-2 md:col-count-1 max-w-none">
<div class="sidebar-content not-prose">
<div class="search-wrapper relative"
x-data="simpleSearchData({ query: '', autocomplete: 1, url: '/search.json/query', separator: ':' })">
<form name="search" action="/search" data-simplesearch-form>
<input
x-ref="query"
x-model="query"
@focus="search($event, $dispatch)"
@input="search($event, $dispatch)"
name="query"
class="search-input"
type="text"
min="3" required
placeholder="Szukaj…"
value=""
autocomplete="off" data-search-invalid="Fraza musi składać się z minimum 3 znaków."
/>
</form>
<div
x-cloak
x-show="hasResults()"
x-on:click.away="hide"
class="search-results absolute left-0 right-0 bg-white dark:bg-gray-700 shadow-lg border dark:border-gray-600 rounded top-full mt-px z-10 p-2"
>
<ul class="list-none my-3 divide-y divide-gray-300 dark:divide-gray-600">
<template x-for="item in searchResults" :key="item">
<li>
<a class="px-4 py-3 block hover:bg-gray-200 dark:hover:bg-gray-600" :href="item.route"
x-text="item.title"></a>
</li>
</template>
</ul>
</div>
</div>
</div>
<div class="sidebar-content">
<h4 class="text-xl font-bold mt-2 mb-3">Popularne tagi</h4>
<span class="tags text-sm">
<a href="/tag:poradniki">
<span class="mr-2">
poradniki
</span>
</a>
<a href="/tag:czytelnia">
<span class="mr-2">
czytelnia
</span>
</a>
<a href="/tag:gry planszowe">
<span class="mr-2">
gry planszowe
</span>
</a>
<a href="/tag:instagram">
<span class="mr-2">
instagram
</span>
</a>
<a href="/tag:rozwój osobisty">
<span class="mr-2">
rozwój osobisty
</span>
</a>
<a href="/tag:work life balance">
<span class="mr-2">
work life balance
</span>
</a>
<a href="/tag:technologie">
<span class="mr-2">
technologie
</span>
</a>
<a href="/tag:zdrowie">
<span class="mr-2">
zdrowie
</span>
</a>
<a href="/tag:ciekawostki">
<span class="mr-2">
ciekawostki
</span>
</a>
<a href="/tag:recenzje">
<span class="mr-2">
recenzje
</span>
</a>
<a href="/tag:turystyka">
<span class="mr-2">
turystyka
</span>
</a>
<a href="/tag:publicystyka">
<span class="mr-2">
publicystyka
</span>
</a>
<a href="/tag:Instagram">
<span class="mr-2">
Instagram
</span>
</a>
<a href="/tag:phishing">
<span class="mr-2">
phishing
</span>
</a>
<a href="/tag:bezpieczeństwo">
<span class="mr-2">
bezpieczeństwo
</span>
</a>
</span>
</div>
<div class="sidebar-content">
<h4 class="text-xl font-bold mt-2 mb-3">Archiwum</h4>
<ul class="archives">
<li>
<a href="https://dnirozwoju.pl/blog/archives_month:sep_2023">
<span class="label">4</span>
<span class="archive_date">September 2023 </span>
</a>
</li>
<li>
<a href="https://dnirozwoju.pl/blog/archives_month:aug_2023">
<span class="label">2</span>
<span class="archive_date">August 2023 </span>
</a>
</li>
<li>
<a href="https://dnirozwoju.pl/blog/archives_month:jul_2023">
<span class="label">8</span>
<span class="archive_date">July 2023 </span>
</a>
</li>
<li>
<a href="https://dnirozwoju.pl/blog/archives_month:jun_2023">
<span class="label">1</span>
<span class="archive_date">June 2023 </span>
</a>
</li>
<li>
<a href="https://dnirozwoju.pl/blog/archives_month:may_2023">
<span class="label">38</span>
<span class="archive_date">May 2023 </span>
</a>
</li>
<li>
<a href="https://dnirozwoju.pl/blog/archives_month:apr_2023">
<span class="label">1</span>
<span class="archive_date">April 2023 </span>
</a>
</li>
<li>
<a href="https://dnirozwoju.pl/blog/archives_month:mar_2023">
<span class="label">5</span>
<span class="archive_date">March 2023 </span>
</a>
</li>
<li>
<a href="https://dnirozwoju.pl/blog/archives_month:feb_2023">
<span class="label">8</span>
<span class="archive_date">February 2023 </span>
</a>
</li>
<li>
<a href="https://dnirozwoju.pl/blog/archives_month:jan_2023">
<span class="label">28</span>
<span class="archive_date">January 2023 </span>
</a>
</li>
<li>
<a href="https://dnirozwoju.pl/blog/archives_month:dec_2022">
<span class="label">2</span>
<span class="archive_date">December 2022 </span>
</a>
</li>
<li>
<a href="https://dnirozwoju.pl/blog/archives_month:nov_2022">
<span class="label">1</span>
<span class="archive_date">November 2022 </span>
</a>
</li>
<li>
<a href="https://dnirozwoju.pl/blog/archives_month:oct_2022">
<span class="label">1</span>
<span class="archive_date">October 2022 </span>
</a>
</li>
<li>
<a href="https://dnirozwoju.pl/blog/archives_month:sep_2022">
<span class="label">1</span>
<span class="archive_date">September 2022 </span>
</a>
</li>
<li>
<a href="https://dnirozwoju.pl/blog/archives_month:aug_2022">
<span class="label">1</span>
<span class="archive_date">August 2022 </span>
</a>
</li>
<li>
<a href="https://dnirozwoju.pl/blog/archives_month:jul_2022">
<span class="label">17</span>
<span class="archive_date">July 2022 </span>
</a>
</li>
<li>
<a href="https://dnirozwoju.pl/blog/archives_month:jun_2022">
<span class="label">2</span>
<span class="archive_date">June 2022 </span>
</a>
</li>
</ul>
</div>
</aside>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<footer class="bg-gray-100 dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 text-sm">
<div class="xl:container xl:mx-auto md:px-6 px-4 py-8">
<div class="relative flex flex-col md:flex-row justify-between min-h-16 text-gray-600 dark:text-gray-500">
<div class="flex font-medium space-x-6 md:space-x-8 items-center justify-center mb-6 md:mb-0 md:justify-start ">
<a href="/#" class="hover:text-primary transition duration-300" >Terms & Conditions</a>
</div>
<div class="flex social space-x-2 items-center justify-center mb-6 md:mb-0 md:justify-start">
<a href="https://twitter.com/getgrav" aria-label="twitter"
class="text-twitter hover:filter hover:brightness-110 transition duration-300" >
<svg class="inline-block w-8 h-8 fill-current stroke-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960"><path d="M480 0c133.333 0 246.667 46.667 340 140s140 206.667 140 340c0 132-46.667 245-140 339S613.333 960 480 960c-132 0-245-47-339-141S0 612 0 480c0-133.333 47-246.667 141-340S348 0 480 0m196 392c20-14.667 35.333-30.667 46-48-21.333 8-39.333 12.667-54 14 20-12 34-29.333 42-52-20 10.667-40 18-60 22-18.667-18.667-42-28-70-28-26.667 0-49 9.333-67 28s-27 40.667-27 66c0 1.333.333 4.667 1 10s1 9.333 1 12c-80-4-144.667-37.333-194-100-9.333 16-14 32-14 48 0 33.333 14.667 59.333 44 78-17.333 0-32-4-44-12v2c0 22.667 7 42.667 21 60s32.333 28 55 32c-10.667 2.667-18.667 4-24 4-8 0-14-.667-18-2 13.333 44 42.667 66 88 66-33.333 26.667-72.667 40-118 40h-22c45.333 28 93.333 42 144 42 81.333 0 146.667-27.667 196-83s74-117.667 74-187v-12"/></svg>
</a>
</div>
</div>
<div class="relative flex flex-col md:flex-row justify-between mt-0 md:mt-6 text-gray-600 dark:text-gray-500 md:items-center">
<div class="text-center md:text-left mb-6 md:mb-0">
<p><a href="https://getgrav.org" class="hover:text-primary font-bold">Grav</a> was
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-code inline-block text-gray-700 dark:text-gray-400 w-4 h-4" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<path d="M7 8l-4 4l4 4" />
<path d="M17 8l4 4l-4 4" />
<path d="M14 4l-4 16" />
</svg> with
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-heart inline-block text-red-700 w-4 h-4 animate-pulse" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<path d="M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" />
</svg> by
<a href="https://trilby.media" class="hover:text-primary font-bold">Trilby Media, LLC</a></p>
</div>
<div class="max-w-64 mx-auto md:mx-0">
<div class="theme-chooser flex items-center rounded-md border border-gray-300 dark:border-gray-600 pl-2 pr-0">
<span>
<span x-cloak :class="{'inline-block' : appearance === 'system', 'hidden': appearance !== 'system'}">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-device-desktop inline-block w-6 h-6 stroke-current" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<path d="M3 5a1 1 0 0 1 1 -1h16a1 1 0 0 1 1 1v10a1 1 0 0 1 -1 1h-16a1 1 0 0 1 -1 -1v-10z" />
<path d="M7 20h10" />
<path d="M9 16v4" />
<path d="M15 16v4" />
</svg>
</span>
<span x-cloak :class="{'inline-block' : appearance === 'light', 'hidden': appearance !== 'light'}">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-sun inline-block w-6 h-6 stroke-current" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0" />
<path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" />
</svg>
</span>
<span x-cloak :class="{'inline-block' : appearance === 'dark', 'hidden': appearance !== 'dark'}">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-moon inline-block w-6 h-6 stroke-current" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" />
</svg>
</span>
</span>
<select x-model="appearance" @change="typhoonStore({ appearance: $event.target.value });"
class="form-select focus:ring-transparent focus:outline-none focus:shadow-none"
aria-label="Change color theme">
<option value="system" :selected="appearance === 'system'">System</option>
<option value="light" :selected="appearance === 'light'">Light</option>
<option value="dark" :selected="appearance === 'dark'">Dark</option>
</select>
</div>
</div>
</div>
</div>
</footer>
<div :class="{ 'invisible': !show_mobile_nav, 'opacity-100': show_mobile_nav }"
class="mobile-nav invisible z-50 overflow-hidden h-screen w-screen top-0 flex flex-col items-center justify-around fixed opacity-0 bg-gray-800 transition duration-500">
<div class="overflow-y-auto w-full py-12 pl-2 pr-12 sm:p-12">
<ul class='flex flex-col text-gray-300 text-left w-full'>
<li x-data="{ selected: true }"
class="text-lg pl-2 border-t border-gray-700 py-2 active ">
<div class="flex w-full h-full">
<a class="w-full transition duration-300 hover:text-primary" href="/" >Blog</a>
</div> </li>
<li x-data="{ selected: false }"
class="text-lg pl-2 border-t border-gray-700 py-2 ">
<div class="flex w-full h-full">
<a class="w-full transition duration-300 hover:text-primary" href="/kontakt" >Kontakt</a>
</div> </li>
<li x-data="{ selected: false }"
class="text-lg pl-2 border-t border-gray-700 py-2 ">
<div class="flex w-full h-full">
<a class="w-full transition duration-300 hover:text-primary" href="/polityka-prywatnosci" >Polityka prywatności</a>
</div> </li>
</ul>
</div>
<div class="absolute top-2 right-2">
<button @click="show_mobile_nav = false" aria-label="Close button" type="button"
class="inline-flex items-center justify-center p-2 rounded-md text-white hover:text-primary focus:outline-none focus:text-gray-800 transition duration-150 ease-in-out">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-x inline-block h-8 w-8 text-gray-300 hover:text-white" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<path d="M18 6l-12 12" />
<path d="M6 6l12 12" />
</svg>
</button>
</div>
</div>
</div>
<script src="/user/plugins/lightbox-gallery/js/glightbox.min.js"></script>
<script src="/user/plugins/simplesearch/js/simplesearch.js"></script>
<script src="/user/themes/typhoon/js/appearance.js"></script>
<script src="/user/themes/typhoon/js/site.js"></script>
<script src="/user/themes/typhoon/js/simplesearch.js"></script>
<script>
const lightbox = GLightbox({"selector":"[rel=\"lightbox\"], .glightbox","width":"90vw","height":"auto"});
</script>
</body>
</html>
