Wprowadzenie do XHTML-a

Wprowadzenie do XHTML-a

XHTML lub Rozszerzalny język znaczników HyperText jest mieszanką HTML i XML, bardzo podobną do HTML ale bardziej rygorystyczne. To jak zbiór zasad tworzenia stron internetowych zrozumiałych dla przeglądarek. W przeciwieństwie do HTML, musisz zachować ostrożność i dokładnie przestrzegać zasad. Większość przeglądarek to obsługuje. Pomyśl o tym jako o bardziej precyzyjnym sposobie pisania kodu internetowego.

Spis treści

Historia

Został opracowany przez konsorcjum World Wide Web Consortium (W3C) i pomaga twórcom stron internetowych przejść z HTML na XML. Dzięki XHTML programiści mogą wejść do świata XML ze wszystkimi jego funkcjami, zapewniając jednocześnie wsteczną i przyszłą kompatybilność treści. Rodzina XHTML obejmuje trzy typy dokumentów; pierwszy to XHTML 1.0, który został zalecony przez W3C 26 stycznia 2000 r. Drugi to XHTML 1.1, który został zalecony przez W3C 31 maja 2001 r.

Trzeci to XHTML5, standard używany do opracowywania adaptacji XML specyfikacji HTML5. Dokument XHTML musi mieć deklarację XHTML.

Elementy XHTML:

Element XHTML Opis
> Służy do deklarowania definicji typu dokumentu (DTD), określającej zasady języka znaczników, zapewniającej prawidłowe renderowanie w przeglądarkach.
> Zawiera cały dokument HTML lub XHTML, służąc jako element główny.
> Zawiera metainformacje o dokumencie, takie jak tytuł, zestaw znaków, połączone arkusze stylów i inne istotne elementy.
> Zagnieżdżony w sekcji nagłówka, określa tytuł dokumentu wyświetlany na pasku tytułu lub karcie przeglądarki.
> Zawiera zawartość strony internetowej, w tym tekst, obrazy, łącza i inne elementy HTML. Reprezentuje widoczną część dokumentu wyświetlaną w przeglądarce.

Tworząc stronę WWW w formacie XHTML konieczne jest załączenie deklaracji DTD (ang. Document Type Definition). Istnieją trzy typy DTD, które omówiono poniżej:

Przejściowy DTD:

Jest obsługiwany przez starsze przeglądarki, które nie mają wbudowanej obsługi kaskadowych arkuszy stylów. W znaczniku treści znajduje się kilka atrybutów, które nie są dozwolone w ścisłym DTD.

Składnia:

 PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'DTD/xhtml1-transitional.dtd'> 

Przykład: W tym przykładzie zobaczymy kod do napisania dokumentu XHTML z przykładem.

HTML




xml version='1.0' encoding='UTF-8'?> Przejściowe DTD XHTMLtitle>głowa> <body bgcolor='#dae1ed'> <div>grubość czcionki: pogrubiona; wyrównanie tekstu: do środka; margines-dolny:-25px;'>techcodeview.comdiv> <p style='text-align:center;font-size:20px;'>Portal informatyczny> <p style='text-align:center;font-size:20px;'>Możliwość wyboru miesiąca: <select name='month'> <option selected='selected'>Opcja stycznia> <option>opcja lutego> <option>Opcja marca> <option>Opcja kwietnia> <option>Opcja majowa> <option>Opcja czerwca> <option>Opcja lipcowa> <option>Opcja Augus> <option>Opcja wrześniowa> <option>Opcja października> <option>Opcja listopadowa> <option>Opcja grudniowa> wybierz> p> treść> html>> </code> </td> </tr> </tbody> </table> <p> </p> <i id='output-icon' title='Output'> </i> <p> </p> <p> </p> <i id='copy-url-button' title='Copy Generated Ide URL'> </i> <p> </p> <p> </p> <p dir='ltr'> <b> <strong>Wyjście: </strong> </b> </p> <p> <img src='//techcodeview.com/img/html-xml/79/xhtml-introduction.webp' alt='przejściowy dtd xhtml'> <span> </span> </p> <h2 id='strict-dtd'> <b> <strong>Ścisłe DTD: </strong> </b> <span> </span> </h2> <p dir='ltr'> <span>Ścisłe DTD jest używane, gdy strona XHTML zawiera tylko język znaczników. Ścisłe DTD jest używane razem z kaskadowymi arkuszami stylów, ponieważ ten atrybut nie pozwala na użycie właściwości CSS w tagu body. </span> </p> <h3> <b> <strong>Składnia: </strong> </b> </h3> <pre> PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 'DTD/xhtml1-strict.dtd'> </pre> <p dir='ltr'> <b> <strong>Przykład 2: </strong> </b> <span>W tym przykładzie zobaczymy kod do napisania dokumentu XHTML z przykładem ścisłego DTD. </span> </p> <h2>HTML </h2> <i id='copy-code-button' title='Copy Code'> </i> <p> </p> <p> <i id='run-and-edit-button' title='Edit Code' lang='xml'> </i> <br> </p> <p> <i id='run-code-button' lang='xml' title='Run Code and See Output'> </i> </p> <p> <i id='generate-url-and-run-button' title='Run Code and Generate IDE URL' lang='xml'> </i> <br> <i title='Dark Mode'> </i> <br> <i id='edit-on-ide-button' title='Edit on IDE' lang='xml'> </i> </p> <p> </p> <table class="table"> <tbody> <tr> <td> <code>xml version='1.0' encoding='UTF-8'?> <html xmlns=' http://www.w3.org/1999/xhtml ' xml:lang='en' lang='en'> <head> <title>Ścisłe DTD XHTMLtitle>głowa> <body> <div>grubość czcionki: pogrubiona; wyrównanie tekstu: do środka; margines-dolny:-25px;'>techcodeview.comdiv> <p style='text-align:center;font-size:20px;'>Portal informatyczny> <p style='text-align:center;font-size:20px;'>Możliwość wyboru miesiąca: <select name='month'> <option selected='selected'>Opcja stycznia> <option>opcja lutego> <option>Opcja marca> <option>Opcja kwietnia> <option>Opcja majowa> <option>Opcja czerwca> <option>Opcja lipcowa> <option>Opcja Augus> <option>Opcja wrześniowa> <option>Opcja października> <option>Opcja listopadowa> <option>Opcja grudniowa> wybierz> p> treść> html>> </code> </td> </tr> </tbody> </table> <p> </p> <i id='output-icon' title='Output'> </i> <p> </p> <p> </p> <i id='copy-url-button' title='Copy Generated Ide URL'> </i> <p> </p> <p> </p> <p dir='ltr'> <b> <strong>Wyjście: </strong> </b> </p> <p> <span> </span> <img src='//techcodeview.com/img/html-xml/79/xhtml-introduction-2.webp' alt='ścisłe dtd xhtml'> <span> </span> </p> <h2 id='frameset-dtd'> <b> <strong>Zestaw ramek DTD: </strong> </b> <span> </span> </h2> <p dir='ltr'> <span>Zestaw ramek DTD jest używany, gdy strona XHTML zawiera ramki. Ten DTD jest identyczny z przejściowym DTD HTML 4.01, z wyjątkiem modelu treści elementu HTML. </span> </p> <h3> <b> <strong>Składnia: </strong> </b> </h3> <pre> PUBLIC '-//W3C//DTD XHTML 1.0 Frameset//EN' 'DTD/xhtml1-frameset.dtd'> </pre> <p dir='ltr'> <b> <strong>Przykład 2: </strong> </b> <span>W tym przykładzie zobaczymy kod do napisania dokumentu XHTML z przykładem DTD zestawu ramek. </span> </p> <h2>HTML </h2> <i id='copy-code-button' title='Copy Code'> </i> <p> </p> <p> <i id='run-and-edit-button' title='Edit Code' lang='xml'> </i> <br> </p> <p> <i id='run-code-button' lang='xml' title='Run Code and See Output'> </i> </p> <p> <i id='generate-url-and-run-button' title='Run Code and Generate IDE URL' lang='xml'> </i> <br> <i title='Dark Mode'> </i> <br> <i id='edit-on-ide-button' title='Edit on IDE' lang='xml'> </i> </p> <p> </p> <table class="table"> <tbody> <tr> <td> <code>xml version='1.0' encoding='UTF-8'?>http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd '> <html xmlns=' http://www.w3.org/1999/xhtml ' xml:lang='en' lang='en'> <head> <title>Zestaw ramek DTD XHTMLtitle>głowa> <frameset cols='30%, 20%, *'> <frameset rows='40%, 30%, *'> <frame src='gfg.html' /> <frame src='gfg1.html' /> <frame src='geeks.html' />zestaw ramek> <frameset rows='40%, 60%'> <frame src='g4g.html' /> <frame src='g4g1.html' />zestaw ramek> <frameset rows='20%, 20%, 30%, *'> <frame src='geeksforgeeks.html' /> <frame src='geeksforgeeks1.html' /> <frame src='geeksforgeeks2.html' /> <frame src='geeksforgeeks3.html' />zestaw ramek> zestaw ramek> html>> </code> </td> </tr> </tbody> </table> <p> </p> <i id='output-icon' title='Output'> </i> <p> </p> <p> </p> <i id='copy-url-button' title='Copy Generated Ide URL'> </i> <p> </p> <p> </p> <p dir='ltr'> <b> <strong>Wyjście: </strong> </b> </p> <h2 id='why-use-xhtml'> <img src='//techcodeview.com/img/html-xml/79/xhtml-introduction-3.webp' alt='zestaw ramek dtd xhtml'> <b> <strong>Dlaczego warto używać XHTML-a? </strong> </b> </h2> <ul> <li value='1'> <span>Dokumenty XHTML są sprawdzane za pomocą standardowych narzędzi XML. </span> </li> <li value='2'> <span>Łatwo jest utrzymywać, konwertować i edytować dokument w dłuższej perspektywie. </span> </li> <li value='3'> <span>Służy do określenia standardu jakości stron internetowych. </span> </li> <li value='4'> <span>XHTML to oficjalny standard W3C, Twoja witryna staje się bardziej kompatybilna i dokładna z wieloma przeglądarkami. </span> </li> </ul> <h2 id='benefits-of-xhtml'> <b> <strong>Korzyści z XHTML: </strong> </b> </h2> <ul> <li value='1'> <span>Wszystkie znaczniki XHTML muszą mieć znaczniki zamykające i są prawidłowo zagnieżdżone. Generuje to czystszy kod. </span> </li> <li value='2'> <span>Dokumenty XHTML są oszczędne, co oznacza, że ​​zużywają mniej przepustowości. Zmniejsza to koszty, szczególnie jeśli Twoja witryna internetowa ma tysiące stron. </span> </li> <li value='3'> <span>Dokumenty XHTML są dobrze sformatowane i dobrze uformowane i można je łatwo przenosić do urządzeń bezprzewodowych, czytników brajlowskich i innych specjalistycznych środowisk internetowych. </span> </li> <li value='4'> <span>Wszystkie nowe rozwiązania będą w formacie XML (którego aplikacją jest XHTML). </span> </li> <li value='5'> <span>XHTML współpracuje z CSS, tworząc strony internetowe, które można łatwo aktualizować. </span> </li> </ul> <h2 id='difference-between-html-and-xhtml'> <b> <strong>Różnica między HTML i XHTML: </strong> </b> </h2> <table class="table"> <tbody> <tr> <th> <span>HTML </span> </th> <th> <span>XHTML </span> </th> </tr> </tbody> <tbody> <tr> <td> <span>HTML lub HyperText Markup Language to główny język znaczników używany do tworzenia stron internetowych </span> </td> <td> <span>XHTML (Extensible HyperText Markup Language) to rodzina języków znaczników XML, które odzwierciedlają lub rozszerzają wersje powszechnie używanego języka Hypertext Markup Language (HTML) </span> </td> </tr> <tr> <td> <span>Elastyczne środowisko wymagające łagodnego analizatora składni HTML </span> </td> <td> <span>Restrykcyjny podzbiór XML, który należy przeanalizować za pomocą standardowych parserów XML </span> </td> </tr> <tr> <td> <span>Zaproponowany przez Tima Bernersa-Lee w 1987 roku </span> </td> <td> <span>Zalecenie konsorcjum World Wide Web z 2000 r. </span> </td> </tr> <tr> <td> <span>Zastosowanie standardowego uogólnionego języka znaczników (SGML). </span> </td> <td> <span>Zastosowanie XML-a </span> </td> </tr> <tr> <td> <span>Rozszerzone z SGML. </span> </td> <td> <span>Rozszerzone z XML, HTML </span> </td> </tr> </tbody> </table> <br> <br> </div> <!-- Article Footer with Prominent Share Buttons --> <div class="px-6 md:px-8 py-8 bg-slate-50 dark:bg-slate-900/50 border-t border-slate-200 dark:border-slate-700/50"> <div class="flex flex-col sm:flex-row items-center justify-between gap-6"> <h4 class="text-base font-bold text-slate-700 dark:text-slate-300 uppercase tracking-wide flex items-center gap-2"> <i class="fa fa-share-alt text-tech-500"> </i> Udział </h4> <div class="flex flex-wrap justify-center gap-3"> <!-- Twitter --> <a href="https://twitter.com/intent/tweet?text=Wprowadzenie do XHTML-a&url=https://www.techcodeview.com/pl/xhtml-introduction" target="_blank" rel="noopener noreferrer" class="flex items-center gap-2 px-6 py-3 rounded-xl bg-[#1DA1F2]/10 text-[#1DA1F2] hover:bg-[#1DA1F2] hover:text-white transition-all duration-300 font-bold text-sm"> <i class="fa fa-twitter text-lg"> </i> <span class="hidden sm:inline">Twitter </span> </a> <!-- Facebook --> <a href="https://www.facebook.com/sharer/sharer.php?u=https://www.techcodeview.com/pl/xhtml-introduction" target="_blank" rel="noopener noreferrer" class="flex items-center gap-2 px-6 py-3 rounded-xl bg-[#4267B2]/10 text-[#4267B2] hover:bg-[#4267B2] hover:text-white transition-all duration-300 font-bold text-sm"> <i class="fa fa-facebook text-lg"> </i> <span class="hidden sm:inline">Facebook </span> </a> <!-- LinkedIn --> <a href="https://www.linkedin.com/shareArticle?mini=true&url=https://www.techcodeview.com/pl/xhtml-introduction&title=Wprowadzenie do XHTML-a" target="_blank" rel="noopener noreferrer" class="flex items-center gap-2 px-6 py-3 rounded-xl bg-[#0077b5]/10 text-[#0077b5] hover:bg-[#0077b5] hover:text-white transition-all duration-300 font-bold text-sm"> <i class="fa fa-linkedin text-lg"> </i> <span class="hidden sm:inline">LinkedIn </span> </a> </div> </div> </div> </article> <!-- Comments Placeholder / Random Articles --> <div class="mt-8 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl p-6 md:p-8 shadow-sm"> <h3 class="text-xl font-bold text-slate-900 dark:text-white mb-6 uppercase tracking-wide border-b border-slate-200 dark:border-slate-700 pb-2"> Może Ci Się Spodobać </h3> <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> <div class="group"> <a href="/pl/what-is-0-05-fraction" class="block aspect-video rounded-lg overflow-hidden bg-slate-200 dark:bg-slate-700 mb-3"> <img loading="lazy" src="https://techcodeview.com/img/maths/31/what-is-0-05-fraction.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Co to jest 0,05 jako ułamek?" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"> </a> <h4 class="font-bold text-slate-900 dark:text-white leading-tight group-hover:text-tech-500 transition-colors"> <a href="/pl/what-is-0-05-fraction">Co to jest 0,05 jako ułamek? </a> </h4> </div> <div class="group"> <a href="/pl/difference-between-coat" class="block aspect-video rounded-lg overflow-hidden bg-slate-200 dark:bg-slate-700 mb-3"> <img loading="lazy" src="https://techcodeview.com/img/differences/30/difference-between-coat.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Różnica między płaszczem a marynarką" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"> </a> <h4 class="font-bold text-slate-900 dark:text-white leading-tight group-hover:text-tech-500 transition-colors"> <a href="/pl/difference-between-coat">Różnica między płaszczem a marynarką </a> </h4> </div> </div> </div> </div> <!-- SECONDARY COLUMN (SIDEBAR) --> <!-- Aside Column --> <div class="lg:col-span-4 space-y-8"> <!-- Best Articles Widget --> <div class="rounded-xl bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 p-6 shadow-sm"> <div class="mb-4 border-b border-slate-100 dark:border-slate-700 pb-2"> <h2 class="text-lg font-bold text-slate-900 dark:text-white uppercase tracking-wide flex items-center"> <span class="mr-2 h-2 w-2 rounded-full bg-tech-500"> </span> Najpopularniejsze Artykuły </h2> </div> <!-- Owl Carousel Preserved Container --> <div id="owl-carousel-3" class="owl-carousel owl-theme center-owl-nav"> <!-- ARTICLE --> <article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors"> <div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700"> <a href="/pl/how-index-slice-strings-python"> <img src="https://techcodeview.com/img/python-string/64/how-index-slice-strings-python.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Jak indeksować i dzielić ciągi znaków w Pythonie?" class="w-full h-full object-cover"> </a> </div> <div class="flex-1 min-w-0"> <h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug"> <a href="/pl/how-index-slice-strings-python" class="hover:text-tech-500 transition-colors line-clamp-3">Jak indeksować i dzielić ciągi znaków w Pythonie? </a> </h4> </div> </article> <!-- /ARTICLE --> <!-- ARTICLE --> <article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors"> <div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700"> <a href="/pl/these-are-hardest-ap-classes-131246"> <img src="https://techcodeview.com/img/blog/33/these-are-hardest-ap-classes.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Oto najtrudniejsze zajęcia i testy AP dla Ciebie" class="w-full h-full object-cover"> </a> </div> <div class="flex-1 min-w-0"> <h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug"> <a href="/pl/these-are-hardest-ap-classes-131246" class="hover:text-tech-500 transition-colors line-clamp-3">Oto najtrudniejsze zajęcia i testy AP dla Ciebie </a> </h4> </div> </article> <!-- /ARTICLE --> <!-- ARTICLE --> <article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors"> <div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700"> <a href="/pl/difference-between-quad-core"> <img src="https://techcodeview.com/img/it-problems-solutions/66/difference-between-quad-core.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Różnica między procesorami czterordzeniowymi i ośmiordzeniowymi" class="w-full h-full object-cover"> </a> </div> <div class="flex-1 min-w-0"> <h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug"> <a href="/pl/difference-between-quad-core" class="hover:text-tech-500 transition-colors line-clamp-3">Różnica między procesorami czterordzeniowymi i ośmiordzeniowymi </a> </h4> </div> </article> <!-- /ARTICLE --> <!-- ARTICLE --> <article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors"> <div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700"> <a href="/pl/expression-tree-data-structure"> <img src="https://techcodeview.com/img/ds-tutorial/60/expression-tree-data-structure.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Drzewo wyrażeń w strukturze danych" class="w-full h-full object-cover"> </a> </div> <div class="flex-1 min-w-0"> <h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug"> <a href="/pl/expression-tree-data-structure" class="hover:text-tech-500 transition-colors line-clamp-3">Drzewo wyrażeń w strukturze danych </a> </h4> </div> </article> <!-- /ARTICLE --> <!-- ARTICLE --> <article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors"> <div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700"> <a href="/pl/best-pilots-world"> <img src="https://techcodeview.com/img/best/01/best-pilots-world.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Najlepsi piloci na świecie" class="w-full h-full object-cover"> </a> </div> <div class="flex-1 min-w-0"> <h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug"> <a href="/pl/best-pilots-world" class="hover:text-tech-500 transition-colors line-clamp-3">Najlepsi piloci na świecie </a> </h4> </div> </article> <!-- /ARTICLE --> <!-- ARTICLE --> <article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors"> <div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700"> <a href="/pl/scroll-lock-excel-how-turn-off"> <img src="https://techcodeview.com/img/excel-how/58/scroll-lock-excel-how-turn-off.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Scroll Lock w Excelu – jak włączyć/wyłączyć (włączyć/wyłączyć)" class="w-full h-full object-cover"> </a> </div> <div class="flex-1 min-w-0"> <h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug"> <a href="/pl/scroll-lock-excel-how-turn-off" class="hover:text-tech-500 transition-colors line-clamp-3">Scroll Lock w Excelu – jak włączyć/wyłączyć (włączyć/wyłączyć) </a> </h4> </div> </article> <!-- /ARTICLE --> <!-- ARTICLE --> <article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors"> <div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700"> <a href="/pl/differentiation-trigonometric-functions"> <img src="https://techcodeview.com/img/calculus/08/differentiation-trigonometric-functions.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Różniczkowanie funkcji trygonometrycznych" class="w-full h-full object-cover"> </a> </div> <div class="flex-1 min-w-0"> <h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug"> <a href="/pl/differentiation-trigonometric-functions" class="hover:text-tech-500 transition-colors line-clamp-3">Różniczkowanie funkcji trygonometrycznych </a> </h4> </div> </article> <!-- /ARTICLE --> <!-- ARTICLE --> <article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors"> <div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700"> <a href="/pl/ping-command-linux"> <img src="https://techcodeview.com/img/linux-tutorial/58/ping-command-linux.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Polecenie ping w systemie Linux" class="w-full h-full object-cover"> </a> </div> <div class="flex-1 min-w-0"> <h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug"> <a href="/pl/ping-command-linux" class="hover:text-tech-500 transition-colors line-clamp-3">Polecenie ping w systemie Linux </a> </h4> </div> </article> <!-- /ARTICLE --> <!-- ARTICLE --> <article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors"> <div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700"> <a href="/pl/strings-c"> <img src="https://techcodeview.com/img/it-problems-solutions/31/strings-c.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Stringi w C++" class="w-full h-full object-cover"> </a> </div> <div class="flex-1 min-w-0"> <h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug"> <a href="/pl/strings-c" class="hover:text-tech-500 transition-colors line-clamp-3">Stringi w C++ </a> </h4> </div> </article> <!-- /ARTICLE --> <!-- ARTICLE --> <article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors"> <div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700"> <a href="/pl/how-write-square-root-python"> <img src="https://techcodeview.com/img/python-tutorial/47/how-write-square-root-python.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Jak napisać pierwiastek kwadratowy w Pythonie?" class="w-full h-full object-cover"> </a> </div> <div class="flex-1 min-w-0"> <h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug"> <a href="/pl/how-write-square-root-python" class="hover:text-tech-500 transition-colors line-clamp-3">Jak napisać pierwiastek kwadratowy w Pythonie? </a> </h4> </div> </article> <!-- /ARTICLE --> </div> <!-- Categories --> <div class="mt-8 mb-4 border-b border-slate-100 dark:border-slate-700 pb-2"> <h2 class="text-lg font-bold text-slate-900 dark:text-white uppercase tracking-wide">Kategoria </h2> </div> <div class="flex flex-wrap gap-2"> <a href="/pl/blog/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors"> Blog </a> <a href="/pl/java-conversion/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors"> Konwersja Javy </a> <a href="/pl/maths/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors"> Matematyka </a> <a href="/pl/java-collections/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors"> Kolekcje Javy </a> <a href="/pl/differences/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors"> Różnice </a> <a href="/pl/java-string/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors"> Ciąg Java </a> </div> <!-- Interesting Articles Widget --> <div class="mt-8"> <div class="mb-4 border-b border-slate-100 dark:border-slate-700 pb-2"> <h2 class="text-lg font-bold text-slate-900 dark:text-white uppercase tracking-wide">Ciekawe Artykuły </h2> </div> <div id="owl-carousel-4" class="owl-carousel owl-theme"> <!-- ARTICLE --> <article class="relative aspect-video rounded-lg overflow-hidden group mb-2"> <div class="absolute inset-0"> <img src="https://techcodeview.com/img/latex-tutorial/21/latex-partial-derivative.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Częściowa pochodna lateksu" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"> <div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div> </div> <div class="absolute bottom-0 left-0 p-4"> <div class="text-xs text-tech-400 font-bold mb-1"> <a href="/pl/latex-tutorial/">Poradnik Dotyczący Lateksu </a> </div> <h4 class="text-sm font-bold text-white leading-tight"> <a href="/pl/latex-partial-derivative">Częściowa pochodna lateksu </a> </h4> </div> </article> <!-- /ARTICLE --> <!-- ARTICLE --> <article class="relative aspect-video rounded-lg overflow-hidden group mb-2"> <div class="absolute inset-0"> <img src="https://techcodeview.com/img/blog/64/how-saywhere-is-bathroom.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Jak powiedzieć „Gdzie jest łazienka?” po hiszpańsku" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"> <div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div> </div> <div class="absolute bottom-0 left-0 p-4"> <div class="text-xs text-tech-400 font-bold mb-1"> <a href="/pl/blog/">Bloga </a> </div> <h4 class="text-sm font-bold text-white leading-tight"> <a href="/pl/how-saywhere-is-bathroom-131330">Jak powiedzieć „Gdzie jest łazienka?” po hiszpańsku </a> </h4> </div> </article> <!-- /ARTICLE --> <!-- ARTICLE --> <article class="relative aspect-video rounded-lg overflow-hidden group mb-2"> <div class="absolute inset-0"> <img src="https://techcodeview.com/img/geeks-premier-league-2022/28/three-tier-client-server-architecture-distributed-system.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Trójwarstwowa architektura kliencko-serwerowa w systemie rozproszonym" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"> <div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div> </div> <div class="absolute bottom-0 left-0 p-4"> <div class="text-xs text-tech-400 font-bold mb-1"> <a href="/pl/geeks-premier-league-2022-cat/">Geeks-Premier-League-2022 </a> </div> <h4 class="text-sm font-bold text-white leading-tight"> <a href="/pl/three-tier-client-server-architecture-distributed-system">Trójwarstwowa architektura kliencko-serwerowa w systemie rozproszonym </a> </h4> </div> </article> <!-- /ARTICLE --> <!-- ARTICLE --> <article class="relative aspect-video rounded-lg overflow-hidden group mb-2"> <div class="absolute inset-0"> <img src="https://techcodeview.com/img/dog-names-by-breed/82/border-terrier-dog-names.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Imiona psów rasy Border Terrier" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"> <div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div> </div> <div class="absolute bottom-0 left-0 p-4"> <div class="text-xs text-tech-400 font-bold mb-1"> <a href="/pl/dog-names-by-breed/">Imiona psów według rasy </a> </div> <h4 class="text-sm font-bold text-white leading-tight"> <a href="/pl/border-terrier-dog-names">Imiona psów rasy Border Terrier </a> </h4> </div> </article> <!-- /ARTICLE --> <!-- ARTICLE --> <article class="relative aspect-video rounded-lg overflow-hidden group mb-2"> <div class="absolute inset-0"> <img src="https://techcodeview.com/img/listicles/95/7-best-sites-free-web-hosting.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="7 najlepszych witryn z bezpłatnym hostingiem" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"> <div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div> </div> <div class="absolute bottom-0 left-0 p-4"> <div class="text-xs text-tech-400 font-bold mb-1"> <a href="/pl/listicles/">Listy </a> </div> <h4 class="text-sm font-bold text-white leading-tight"> <a href="/pl/7-best-sites-free-web-hosting">7 najlepszych witryn z bezpłatnym hostingiem </a> </h4> </div> </article> <!-- /ARTICLE --> <!-- ARTICLE --> <article class="relative aspect-video rounded-lg overflow-hidden group mb-2"> <div class="absolute inset-0"> <img src="https://techcodeview.com/img/physics-concepts/78/gravitational-force.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Siła grawitacji" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"> <div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div> </div> <div class="absolute bottom-0 left-0 p-4"> <div class="text-xs text-tech-400 font-bold mb-1"> <a href="/pl/physics-concepts/">Pojęcia Fizyczne </a> </div> <h4 class="text-sm font-bold text-white leading-tight"> <a href="/pl/gravitational-force">Siła grawitacji </a> </h4> </div> </article> <!-- /ARTICLE --> </div> </div> </div> </div> <!-- /Aside Column --> </div> </div> </div> <footer class="site-footer"> <div class="container"> <span class="footer-links"> Copyright ©2026 Wszelkie Prawa Zastrzeżone | <a href="//www.techcodeview.com/lv/">techcodeview.com </a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Zastrzeżenie </a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">O Nas </a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Polityka Prywatności </a> </span> </div> </footer> <script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/jquery-1.11.3.min.js"> </script> <script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/bootstrap/js/bootstrap.min.js"> </script> <script type="text/javascript" src="https://techcodeview.com/template/assets/js/main.js"> </script> <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"> </script> <script> !function(){"use strict";let t=document.createElement("button");t.id="toTopBtn",t.innerHTML="↑";let e=` #toTopBtn { position: fixed; bottom: 25px; right: 25px; z-index: 9999; opacity: 0; visibility: hidden; background-color: #0ea5e9; color: white; border: none; border-radius: 8px; width: 50px; height: 50px; font-size: 24px; cursor: pointer; transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out; } #toTopBtn:hover { background-color: #0284c7; } `,i=document.createElement("style");i.type="text/css",i.innerText=e,document.head.appendChild(i),document.body.appendChild(t),window.addEventListener("scroll",()=>{let e=window.scrollY||document.documentElement.scrollTop;e>300?(t.style.opacity="1",t.style.visibility="visible"):(t.style.opacity="0",t.style.visibility="hidden")}),t.addEventListener("click",()=>{window.scrollTo({top:0,behavior:"smooth"})})}(); </script> </body> </html>