Tworzenie prostej strony internetowej w notatniku: przewodnik krok po kroku

Czasami może zaskakiwać, jak wiele rzeczy można zrobić za pomocą prostego narzędzia, takiego jak notatnik. Tworzenie strony internetowej to jedna z nich! Może się wydawać, że do tego celu trzeba korzystać z zaawansowanego oprogramowania lub komplikowanych systemów zarządzania treścią, ale na początek wystarczy dosłownie kilka podstawowych znaczników HTML. W końcu wszyscy musieliśmy zacząć od czegoś, prawda? W tym artykule opowiemy Ci krok po kroku, jak stworzyć prostą stronę internetową przy użyciu notatnika, który jest dostępny we wszystkich wersjach systemu Windows. Zapraszamy do lektury i odkrywania fascynującego świata tworzenia stron internetowych!

Prosty przepis na stronę internetową – czyli jak zrobić stronę internetową w notatniku

Chociaż dzisiaj branża webdesignu oferuje szeroką gamę narzędzi, czasami korzystanie z prostego notatnika przynosi o wiele większą satysfakcję. Właśnie dlatego chcę Ci pokazać, jak zrobić stronę internetową notatnik oraz dowiedz się, jak założyć stronę internetową w notatniku. Zapewne może Ci się wydawać, że jest to trudne i skomplikowane zadanie, ale uwierz mi – jest naprawdę proste i przyjemne!

Krok pierwszy: Otworzysz notatnik

Zacznijmy od początku. Otóż, jak robić strony internetowe w notatniku? Przede wszystkim otwórz notatnik. Aby to zrobić, kliknij prawym przyciskiem myszy na pulpicie, przejdź do “Nowy” i wybierz “Notatnik”. Teraz, gdy masz otwarty notatnik, zaczynamy tworzyć naszą stronę.

Zakładka struktury: Tworzymy strukturę naszej strony

Każda strona internetowa opiera się na kodzie HTML, który służy do ustrukturyzowania zawartości. Dlatego na samym początku musisz wprowadzić podstawowe znaczniki HTML. Oto jak zrobić stronę internetową html w notatniku, wklej do niego następujące fragmenty:

“`

Moja pierwsza strona w notatniku

To jest moja pierwsza strona internetowa!

“`

Warto wyjaśnić, że znacznik `` informuje przeglądarkę, że strona jest napisana w języku HTML5. Następnie mamy otwarcie i zamknięcie znacznika `` oraz ``. W nagłówkach strony umieszczamy metadane, takie jak kodowanie znaków (UTF-8), język strony oraz zawartość tagu ``, którym jest tytuł naszej strony.</p> <h3 id="tworzenie-zawartosci-czyli-jak-zalozyc-strone-internetowa-w-notatniku">Tworzenie zawartości – czyli jak założyć stronę internetową w notatniku</h3> <p>Skoro nasza struktura jest już gotowa i mamy odpowiednie znaczniki HTML, możemy zabrać się za tworzenie zawartości na naszej stronie. W sekcji `<body>` umieścimy tekst, grafikę, a nawet multimedia. Tutaj możesz wpisać zawartość swojej strony. Przykład:</p> <p>“`html</p> <h2 id="witaj-swiecie">Witaj Świecie!</h2> <p>To jest moja pierwsza strona internetowa, która stworzyłem w notatniku. Oto kilka informacji o mnie, które chcę się podzielić z Wami:</p> <ul> <li>Mam na imię Jacek</li> <li>Jestem pasjonatem programowania</li> <li>Uwielbiam tworzyć strony internetowe</li> </ul> <p>Mam nadzieję, że spodoba się Wam moja strona.</p> <p>“`<br /> <b>Pamiętaj, że treść może być dowolna</b>, zgodnie z Twoimi potrzebami i wyobraźnią. Możesz też dodać grafikę, linki czy elementy multimedialne.</p> <h3 id="nadszedl-czas-na-zapisanie-i-otwarcie-naszej-strony-internetowej">Nadszedł czas na zapisanie i otwarcie naszej strony internetowej</h3> <p>Kiedy już skończymy wpisywanie zawartości strony, będziemy chcieli ją zapisać i zobaczyć, jak prezentuje się w przeglądarce. Aby zapisać plik, otwórz zakładkę “Plik” w notatniku i wybierz “Zapisz jako”. Następnie przyśpieszone wystukaj “`nazwa_pliku.html`” i upewnij się, że wybrano rodzaj pliku “Wszystkie pliki”. Teraz możemy otworzyć ten plik w naszej ulubionej przeglądarce i cieszyć się naszą własnoręcznie wykonaną stroną internetową!</p> <p>W niesamowicie prosty sposób przedstawiłem Ci <b>jak zrobić stronę internetową w notatniku</b>. Teraz już wiesz, jak robić strony internetowe w notatniku, jak założyć stronę internetową w notatniku oraz jak zrobić stronę internetową HTML w notatniku. Pamiętaj, że ten przewodnik był tylko początkiem i od teraz możesz sięgnąć po bardziej zaawansowane metody i narzędzia do tworzenia stron. Ale pamiętaj, że wszystko zaczyna się od prostego notatnika – tak dojść możesz do profesjonalnych stron!</p> <h3 id="tworczosc-w-notatniku-od-prostych-stron-do-profesjonalizmu">Twórczość w notatniku – od prostych stron do profesjonalizmu</h3> <p>W artykule zrozumieliśmy, jak fascynujące może być tworzenie stron internetowych w tak prostym narzędziu, jakim jest notatnik. Poznaliśmy podstawowe kroki prowadzące do sukcesu: otwarcie notatnika, tworzenie struktury HTML z niezbędnymi znacznikami oraz dodawanie zawartości tekstowej, graficznej czy multimedialnej. Wykorzystując te proste techniki, jesteśmy w stanie stworzyć własną stronę internetową, która może być punktem wyjścia w naszej przygodzie z webdesignem.</p> <p>Należy pamiętać, że nasza podróż po świecie twórczości stron rozpoczyna się właśnie tutaj, a wiedza zdobyta w artykule stanowi niezwykle solidne fundamenty dla naszych przyszłych projektów. Otóż to – od pierwszej, prostej strony internetowej w notatniku, przez zaawansowane techniki programowania, do profesjonalnych rozwiązań dla szerokiego rynku. To wszystko jest osiągalne, wystarczy mieć świadomość możliwości oraz determinację w dążeniu do celu.</p> <p>Jak więc widać, nie trzeba wiele, by rozpocząć przygodę z tworzeniem stron internetowych. Nawiasem mówiąc, okazuje się, że notatnik może być narzędziem o potencjale rzadko docenianym przez wielu początkujących. Przekonanie się o tym na własnej skórze może być nie tylko satysfakcjonujące, ale także stanowić pierwszy krok na drodze rozwoju zawodowego. W związku z tym, nie ma co czekać, otwórz notatnik i zacznij pracować nad swoją pierwszą stroną internetową!</p> <h3 id="polecane-atrakcje-dla-ciebie">Polecane atrakcje dla Ciebie:</h3> <div data-gyg-widget="auto" data-gyg-partner-id="AUZTKCV"></div> <p></p> <div data-gyg-href="https://widget.getyourguide.com/default/activities.frame" data-gyg-locale-code="pl-PL" data-gyg-widget="activities" data-gyg-number-of-items="6" data-gyg-partner-id="AUZTKCV"></div> </div> <div class="cs-entry__after-share-buttons"> <div class="pk-share-buttons-wrap pk-share-buttons-layout-default pk-share-buttons-scheme-bold-light pk-share-buttons-has-counts pk-share-buttons-has-total-counts pk-share-buttons-after-post pk-share-buttons-mode-rest" data-post-id="2542" data-share-url="https://softwaredevelopment.pl/tworzenie-prostej-strony-internetowej-w-notatniku-przewodnik-krok-po-kroku/" > <div class="pk-share-buttons-total pk-share-buttons-total-no-count"> <div class="pk-share-buttons-title pk-font-primary">Total</div> <div class="pk-share-buttons-count pk-font-heading">0</div> <div class="pk-share-buttons-label pk-font-secondary">Shares</div> </div> <div class="pk-share-buttons-items"> <div class="pk-share-buttons-item pk-share-buttons-facebook pk-share-buttons-no-count" data-id="facebook"> <a href="https://www.facebook.com/sharer.php?u=https://softwaredevelopment.pl/tworzenie-prostej-strony-internetowej-w-notatniku-przewodnik-krok-po-kroku/" class="pk-share-buttons-link" target="_blank"> <i class="pk-share-buttons-icon pk-icon pk-icon-facebook"></i> <span class="pk-share-buttons-label pk-font-primary">Share</span> <span class="pk-share-buttons-count pk-font-secondary">0</span> </a> </div> <div class="pk-share-buttons-item pk-share-buttons-twitter pk-share-buttons-no-count" data-id="twitter"> <a href="https://twitter.com/share?&text=Tworzenie%20prostej%20strony%20internetowej%20w%20notatniku%3A%20przewodnik%20krok%20po%20kroku&url=https://softwaredevelopment.pl/tworzenie-prostej-strony-internetowej-w-notatniku-przewodnik-krok-po-kroku/" class="pk-share-buttons-link" target="_blank"> <i class="pk-share-buttons-icon pk-icon pk-icon-twitter"></i> <span class="pk-share-buttons-label pk-font-primary">Tweet</span> <span class="pk-share-buttons-count pk-font-secondary">0</span> </a> </div> <div class="pk-share-buttons-item pk-share-buttons-pinterest pk-share-buttons-no-count" data-id="pinterest"> <a href="https://pinterest.com/pin/create/bookmarklet/?url=https://softwaredevelopment.pl/tworzenie-prostej-strony-internetowej-w-notatniku-przewodnik-krok-po-kroku/&media=https://softwaredevelopment.pl/wp-content/uploads/2023/11/coding-laptop.jpg" class="pk-share-buttons-link" target="_blank"> <i class="pk-share-buttons-icon pk-icon pk-icon-pinterest"></i> <span class="pk-share-buttons-label pk-font-primary">Pin it</span> <span class="pk-share-buttons-count pk-font-secondary">0</span> </a> </div> </div> </div> </div> <div class="cs-entry__comments cs-entry__comments-collapse" id="comments-hidden"> <div id="respond" class="comment-respond"> <h5 class="cs-section-heading cnvs-block-section-heading is-style-cnvs-block-section-heading-default halignleft title-comment-reply "><span class="cnvs-section-title"><span>Dodaj komentarz <small><a rel="nofollow" id="cancel-comment-reply-link" href="/tworzenie-prostej-strony-internetowej-w-notatniku-przewodnik-krok-po-kroku/#respond" style="display:none;">Anuluj pisanie odpowiedzi</a></small></span></span></h5><form action="https://softwaredevelopment.pl/wp-comments-post.php" method="post" id="commentform" class="comment-form" novalidate><p class="comment-notes"><span id="email-notes">Twój adres e-mail nie zostanie opublikowany.</span> <span class="required-field-message">Wymagane pola są oznaczone <span class="required">*</span></span></p><p class="comment-form-comment"><label for="comment">Komentarz <span class="required">*</span></label> <textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required></textarea></p><p class="comment-form-author"><label for="author">Nazwa <span class="required">*</span></label> <input id="author" name="author" type="text" value="" size="30" maxlength="245" autocomplete="name" required /></p> <p class="comment-form-email"><label for="email">E-mail <span class="required">*</span></label> <input id="email" name="email" type="email" value="" size="30" maxlength="100" aria-describedby="email-notes" autocomplete="email" required /></p> <p class="comment-form-url"><label for="url">Witryna internetowa</label> <input id="url" name="url" type="url" value="" size="30" maxlength="200" autocomplete="url" /></p> <p class="comment-form-cookies-consent"><input id="wp-comment-cookies-consent" name="wp-comment-cookies-consent" type="checkbox" value="yes" /> <label for="wp-comment-cookies-consent">Zapamiętaj moje dane w tej przeglądarce podczas pisania kolejnych komentarzy.</label></p> <p class="form-submit"><input name="submit" type="submit" id="submit" class="submit" value="Opublikuj komentarz" /> <input type='hidden' name='comment_post_ID' value='2542' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /> </p></form> </div> </div> <div class="cs-entry__comments-show" id="comments"> <button>View Comments (0)</button> </div> <div class="cs-entry__prev-next"> <div class="cs-entry__prev-next-item cs-entry__prev"> <a href="https://softwaredevelopment.pl/czym-jest-scrum-i-inne-kluczowe-terminy-zwiazane-z-technologia-takie-jak-docker-agile-sql-czy-react/" class="cs-entry__prev-next-link"> <div class="cs-entry__prev-next-label">Prev</div> <div class="cs-entry__prev-next-title-wrapper"> <span class="cs-entry__prev-next-title">Czym jest Scrum i inne kluczowe terminy związane z technologią, takie jak Docker, Agile, SQL czy React</span> </div> </a> <article class="cs-entry"> <div class="cs-entry__outer cs-entry__overlay cs-overlay-ratio cs-ratio-square" data-scheme="inverse"> <div class="cs-entry__inner cs-entry__thumbnail"> <div class="cs-overlay-background"> <img width="110" height="110" src="https://softwaredevelopment.pl/wp-content/uploads/2023/11/scrum-meeting-1-110x110.jpg" class="attachment-csco-small size-csco-small wp-post-image" alt="" decoding="async" loading="lazy" srcset="https://softwaredevelopment.pl/wp-content/uploads/2023/11/scrum-meeting-1-110x110.jpg 110w, https://softwaredevelopment.pl/wp-content/uploads/2023/11/scrum-meeting-1-150x150.jpg 150w, https://softwaredevelopment.pl/wp-content/uploads/2023/11/scrum-meeting-1-80x80.jpg 80w" sizes="(max-width: 110px) 100vw, 110px" /> </div> </div> <div class="cs-entry__inner cs-overlay-content cs-entry__content"> <div class="cs-entry__content-inner"> <span class="cs-entry__title-wrapper"> <h2 class="cs-entry__title">Czym jest Scrum i inne kluczowe terminy związane z technologią, takie jak Docker, Agile, SQL czy React</h2> <p class="cs-entry__excerpt">Technologia stale się rozwija, wprowadza nowe koncepty i narzędzia, które mają</p> </span> </div> </div> <a href="https://softwaredevelopment.pl/czym-jest-scrum-i-inne-kluczowe-terminy-zwiazane-z-technologia-takie-jak-docker-agile-sql-czy-react/" class="cs-overlay-link"></a> </div> </article> </div> <div class="cs-entry__prev-next-item cs-entry__next"> <a href="https://softwaredevelopment.pl/jak-zrobic-strone-html-praktyczny-przewodnik-dla-poczatkujacych/" class="cs-entry__prev-next-link"> <div class="cs-entry__prev-next-label">Next</div> <div class="cs-entry__prev-next-title-wrapper"> <span class="cs-entry__prev-next-title">Jak zrobić stronę HTML: Praktyczny przewodnik dla początkujących</span> </div> </a> <article class="cs-entry"> <div class="cs-entry__outer cs-entry__overlay cs-overlay-ratio cs-ratio-square" data-scheme="inverse"> <div class="cs-entry__inner cs-entry__thumbnail"> <div class="cs-overlay-background"> <img width="110" height="110" src="https://softwaredevelopment.pl/wp-content/uploads/2023/11/coding-laptop-1-110x110.jpg" class="attachment-csco-small size-csco-small wp-post-image" alt="" decoding="async" loading="lazy" srcset="https://softwaredevelopment.pl/wp-content/uploads/2023/11/coding-laptop-1-110x110.jpg 110w, https://softwaredevelopment.pl/wp-content/uploads/2023/11/coding-laptop-1-150x150.jpg 150w, https://softwaredevelopment.pl/wp-content/uploads/2023/11/coding-laptop-1-80x80.jpg 80w" sizes="(max-width: 110px) 100vw, 110px" /> </div> </div> <div class="cs-entry__inner cs-overlay-content cs-entry__content"> <div class="cs-entry__content-inner"> <span class="cs-entry__title-wrapper"> <h2 class="cs-entry__title">Jak zrobić stronę HTML: Praktyczny przewodnik dla początkujących</h2> <p class="cs-entry__excerpt">Chcesz stworzyć własną stronę internetową, ale nie wiesz, od czego zacząć?</p> </span> </div> </div> <a href="https://softwaredevelopment.pl/jak-zrobic-strone-html-praktyczny-przewodnik-dla-poczatkujacych/" class="cs-overlay-link"></a> </div> </article> </div> </div> </div> </div> <div class="cs-entry__subscribe"> <div class="cs-site-subscribe__item"> <div class="cs-site-subscribe__form"> <div class="cs-site-subscribe__info"> <div class="cs-site-subscribe__title-wrapper"> <h4 class="cs-site-subscribe__title">Subscribe to Our Newsletter</h4> <p class="cs-site-subscribe__excerpt">Get notified of the best deals on our WordPress themes.</p> </div> </div> </div> </div> </div> </div> </div> <aside id="secondary" class="cs-sidebar__area cs-widget-area"> <div class="cs-sidebar__inner"> <div class="widget powerkit_widget_posts-1 powerkit_widget_posts"><h5 class="cs-section-heading cnvs-block-section-heading is-style-cnvs-block-section-heading-default halignleft "><span class="cnvs-section-title"><span>Polecane artykuły</span></span></h5> <div class="widget-body pk-widget-posts pk-widget-posts-template-default pk-widget-posts-template-numbered posts-per-page-5"> <ul> <li class="pk-post-item"> <article class="post-2660 post type-post status-publish format-standard has-post-thumbnail category-programowanie category-technologie category-web-development category-webdesign cs-entry cs-video-wrap" style="--cs-widget-heading-font-size: 0.875rem;"> <div class="pk-post-outer"> <div class="pk-post-inner pk-post-data"> <a href="https://softwaredevelopment.pl/c-co-oznacza-ten-jezyk-programowania-i-jak-sie-wpisuje-w-kontekscie-html-nfc-sql-i-array/" class="cs-entry__title-wrapper"> <span class="cs-entry__title-effect"> <h6 class="cs-entry__title">C++: Co oznacza ten język programowania i jak się wpisuje w kontekście HTML, NFC, SQL i array</h6> <p class="cs-entry__excerpt">C++ jest potężnym i wszechstronnym językiem programowania, który zdobył</p> </span> </a> <div class="cs-entry__post-meta" ><div class="cs-meta-date">23 listopada, 2023</div></div> </div> </div> </article> </li> <li class="pk-post-item"> <article class="post-2658 post type-post status-publish format-standard has-post-thumbnail category-jezyki-programowania category-porownanie category-programowanie cs-entry cs-video-wrap" style="--cs-widget-heading-font-size: 0.875rem;"> <div class="pk-post-outer"> <div class="pk-post-inner pk-post-data"> <a href="https://softwaredevelopment.pl/w-czym-programowac-porownanie-popularnych-srodowisk-dla-c-java-i-innych-jezykow-programowania/" class="cs-entry__title-wrapper"> <span class="cs-entry__title-effect"> <h6 class="cs-entry__title">W czym programować: Porównanie popularnych środowisk dla C++, Java i innych języków programowania</h6> <p class="cs-entry__excerpt">Dobór odpowiedniego środowiska programistycznego to kluczowy krok dla każdego,</p> </span> </a> <div class="cs-entry__post-meta" ><div class="cs-meta-date">23 listopada, 2023</div></div> </div> </div> </article> </li> <li class="pk-post-item"> <article class="post-2656 post type-post status-publish format-standard has-post-thumbnail category-cnc category-java category-programowanie cs-entry cs-video-wrap" style="--cs-widget-heading-font-size: 0.875rem;"> <div class="pk-post-outer"> <div class="pk-post-inner pk-post-data"> <a href="https://softwaredevelopment.pl/programowanie-na-czym-polega-i-jak-roznia-sie-jezyki-java-oraz-programowanie-cnc/" class="cs-entry__title-wrapper"> <span class="cs-entry__title-effect"> <h6 class="cs-entry__title">Programowanie: na czym polega i jak różnią się języki Java oraz programowanie CNC</h6> <p class="cs-entry__excerpt">Programowanie to nieodłączny element współczesnego świata technologii, służący</p> </span> </a> <div class="cs-entry__post-meta" ><div class="cs-meta-date">23 listopada, 2023</div></div> </div> </div> </article> </li> <li class="pk-post-item"> <article class="post-2654 post type-post status-publish format-standard has-post-thumbnail category-poradniki category-strony-www category-tworzenie-witryn cs-entry cs-video-wrap" style="--cs-widget-heading-font-size: 0.875rem;"> <div class="pk-post-outer"> <div class="pk-post-inner pk-post-data"> <a href="https://softwaredevelopment.pl/poradnik-krok-po-kroku-jak-robic-strony-www-czyli-tajniki-pisania-i-tworzenia-profesjonalnych-witryn/" class="cs-entry__title-wrapper"> <span class="cs-entry__title-effect"> <h6 class="cs-entry__title">Poradnik krok po kroku: jak robić strony www, czyli tajniki pisania i tworzenia profesjonalnych witryn</h6> <p class="cs-entry__excerpt">Chcesz stworzyć własną stronę internetową, ale nie wiesz, od czego zacząć?</p> </span> </a> <div class="cs-entry__post-meta" ><div class="cs-meta-date">23 listopada, 2023</div></div> </div> </div> </article> </li> <li class="pk-post-item"> <article class="post-2652 post type-post status-publish format-standard has-post-thumbnail category-android category-poradniki category-programowanie cs-entry cs-video-wrap" style="--cs-widget-heading-font-size: 0.875rem;"> <div class="pk-post-outer"> <div class="pk-post-inner pk-post-data"> <a href="https://softwaredevelopment.pl/praktyczny-poradnik-jak-stworzyc-aplikacje-na-androida-krok-po-kroku/" class="cs-entry__title-wrapper"> <span class="cs-entry__title-effect"> <h6 class="cs-entry__title">Praktyczny poradnik: Jak stworzyć aplikację na Androida krok po kroku</h6> <p class="cs-entry__excerpt">Tworzenie własnej aplikacji na Androida może wydawać się skomplikowane, ale z</p> </span> </a> <div class="cs-entry__post-meta" ><div class="cs-meta-date">23 listopada, 2023</div></div> </div> </div> </article> </li> </ul> </div> </div><div class="widget powerkit_widget_posts-2 powerkit_widget_posts"><h5 class="cs-section-heading cnvs-block-section-heading is-style-cnvs-block-section-heading-default halignleft "><span class="cnvs-section-title"><span>Ostatnio dodane</span></span></h5> <div class="widget-body pk-widget-posts pk-widget-posts-template-default pk-widget-posts-template-large posts-per-page-3"> <ul> <li class="pk-post-item"> <article class="post-2650 post type-post status-publish format-standard has-post-thumbnail category-aktualnosci category-aplikacje category-atrakcje category-atrakcje-turystyczne category-bezpieczenstwo category-ciekawostki category-cnc category-dzieci category-dziecko category-edukacja category-java category-programowanie cs-entry cs-video-wrap" style="--cs-widget-heading-font-size: 0.875rem;"> <div class="pk-post-outer"> <div class="pk-post-inner pk-post-data"> <a href="https://softwaredevelopment.pl/praca-programisty-roznorodnosc-obowiazkow-na-przykladzie-c-i-java/" class="cs-entry__title-wrapper"> <span class="cs-entry__title-effect"> <h5 class="cs-entry__title">Praca programisty: Różnorodność obowiązków na przykładzie C++ i Java</h5> <p class="cs-entry__excerpt">Praca programisty to idealna ścieżka kariery dla osób pasjonujących się</p> </span> </a> <div class="cs-entry__post-meta" ><div class="cs-meta-date">23 listopada, 2023</div></div> </div> </div> </article> </li> <li class="pk-post-item"> <article class="post-2648 post type-post status-publish format-standard has-post-thumbnail category-gamedev category-programowanie category-technologie cs-entry cs-video-wrap" style="--cs-widget-heading-font-size: 0.875rem;"> <div class="pk-post-outer"> <div class="pk-post-inner pk-post-data"> <a href="https://softwaredevelopment.pl/tworzenie-gier-krok-po-kroku-poradnik-dla-poczatkujacych-z-wykorzystaniem-html-java-i-innych-technologii/" class="cs-entry__title-wrapper"> <span class="cs-entry__title-effect"> <h5 class="cs-entry__title">Tworzenie gier krok po kroku: poradnik dla początkujących z wykorzystaniem HTML, Java i innych technologii</h5> <p class="cs-entry__excerpt">W dobie ekspansji technologicznej twórcy gier mają niemal nieograniczone</p> </span> </a> <div class="cs-entry__post-meta" ><div class="cs-meta-date">23 listopada, 2023</div></div> </div> </div> </article> </li> <li class="pk-post-item"> <article class="post-2646 post type-post status-publish format-standard has-post-thumbnail category-git category-github category-python cs-entry cs-video-wrap" style="--cs-widget-heading-font-size: 0.875rem;"> <div class="pk-post-outer"> <div class="pk-post-inner pk-post-data"> <a href="https://softwaredevelopment.pl/python-jak-zaczac-przewodnik-dla-poczatkujacych-z-wskazowkami-dotyczacymi-git-html-i-github/" class="cs-entry__title-wrapper"> <span class="cs-entry__title-effect"> <h5 class="cs-entry__title">Python jak zacząć: Przewodnik dla początkujących z wskazówkami dotyczącymi Git, HTML i GitHub</h5> <p class="cs-entry__excerpt">W dzisiejszych czasach programowanie stało się nie tylko dobrze opłacalnym</p> </span> </a> <div class="cs-entry__post-meta" ><div class="cs-meta-date">23 listopada, 2023</div></div> </div> </div> </article> </li> </ul> </div> </div> </div> </aside> </div> <div class="cs-entry__post-related"> <h5 class="cs-section-heading cnvs-block-section-heading is-style-cnvs-block-section-heading-default halignleft "><span class="cnvs-section-title"><span>You May Also Like</span></span></h5> <div class="cs-entry__post-wrap" style="--cs-font-headings-size: 1.125rem; --cs-font-headings-excerpt-size: 1.125rem;"> <article class="post-2544 post type-post status-publish format-standard has-post-thumbnail category-html category-poczatkujacy category-webdesign cs-entry cs-video-wrap"> <div class="cs-entry__outer"> <div class="cs-entry__inner cs-entry__thumbnail cs-entry__overlay cs-overlay-ratio cs-ratio-original" data-scheme="inverse"> <div class="cs-overlay-background cs-overlay-transparent"> <img width="260" height="195" src="https://softwaredevelopment.pl/wp-content/uploads/2023/11/coding-laptop-1-260x195.jpg" class="attachment-csco-thumbnail-small size-csco-thumbnail-small wp-post-image" alt="" decoding="async" loading="lazy" srcset="https://softwaredevelopment.pl/wp-content/uploads/2023/11/coding-laptop-1-260x195.jpg 260w, https://softwaredevelopment.pl/wp-content/uploads/2023/11/coding-laptop-1-300x225.jpg 300w, https://softwaredevelopment.pl/wp-content/uploads/2023/11/coding-laptop-1-200x150.jpg 200w" sizes="(max-width: 260px) 100vw, 260px" /> </div> <a href="https://softwaredevelopment.pl/jak-zrobic-strone-html-praktyczny-przewodnik-dla-poczatkujacych/" class="cs-overlay-link"></a> </div> <div class="cs-entry__inner cs-entry__content"> <a href="https://softwaredevelopment.pl/jak-zrobic-strone-html-praktyczny-przewodnik-dla-poczatkujacych/" class="cs-entry__title-wrapper"> <span class="cs-entry__title-effect"> <h2 class="cs-entry__title">Jak zrobić stronę HTML: Praktyczny przewodnik dla początkujących</h2> <p class="cs-entry__excerpt">Chcesz stworzyć własną stronę internetową, ale nie wiesz, od czego zacząć?</p> </span> </a> <div class="cs-entry__post-meta" ><div class="cs-meta-author"><span class="cs-by">by</span><a class="cs-meta-author-inner url fn n" href="https://softwaredevelopment.pl/author/admin/" title="View all posts by softwaredevelopment.pl"><span class="cs-author">softwaredevelopment.pl</span></a></div><div class="cs-meta-date">23 listopada, 2023</div></div> </div> </div> </article> <article class="post-2558 post type-post status-publish format-standard has-post-thumbnail category-html category-poczatkujacy category-poradniki cs-entry cs-video-wrap"> <div class="cs-entry__outer"> <div class="cs-entry__inner cs-entry__thumbnail cs-entry__overlay cs-overlay-ratio cs-ratio-original" data-scheme="inverse"> <div class="cs-overlay-background cs-overlay-transparent"> <img width="260" height="195" src="https://softwaredevelopment.pl/wp-content/uploads/2023/11/coding-laptop-2-260x195.jpg" class="attachment-csco-thumbnail-small size-csco-thumbnail-small wp-post-image" alt="" decoding="async" loading="lazy" srcset="https://softwaredevelopment.pl/wp-content/uploads/2023/11/coding-laptop-2-260x195.jpg 260w, https://softwaredevelopment.pl/wp-content/uploads/2023/11/coding-laptop-2-300x225.jpg 300w, https://softwaredevelopment.pl/wp-content/uploads/2023/11/coding-laptop-2-200x150.jpg 200w" sizes="(max-width: 260px) 100vw, 260px" /> </div> <a href="https://softwaredevelopment.pl/poradnik-krok-po-kroku-jak-utworzyc-strone-html-dla-poczatkujacych/" class="cs-overlay-link"></a> </div> <div class="cs-entry__inner cs-entry__content"> <a href="https://softwaredevelopment.pl/poradnik-krok-po-kroku-jak-utworzyc-strone-html-dla-poczatkujacych/" class="cs-entry__title-wrapper"> <span class="cs-entry__title-effect"> <h2 class="cs-entry__title">Poradnik krok po kroku: Jak utworzyć stronę HTML dla początkujących</h2> <p class="cs-entry__excerpt">Chcesz stworzyć własną stronę internetową, ale nie wiesz, jak się za to zabrać?</p> </span> </a> <div class="cs-entry__post-meta" ><div class="cs-meta-author"><span class="cs-by">by</span><a class="cs-meta-author-inner url fn n" href="https://softwaredevelopment.pl/author/admin/" title="View all posts by softwaredevelopment.pl"><span class="cs-author">softwaredevelopment.pl</span></a></div><div class="cs-meta-date">23 listopada, 2023</div></div> </div> </div> </article> <article class="post-2532 post type-post status-publish format-standard has-post-thumbnail category-poradniki category-webdesign category-wordpress cs-entry cs-video-wrap"> <div class="cs-entry__outer"> <div class="cs-entry__inner cs-entry__thumbnail cs-entry__overlay cs-overlay-ratio cs-ratio-original" data-scheme="inverse"> <div class="cs-overlay-background cs-overlay-transparent"> <img width="260" height="195" src="https://softwaredevelopment.pl/wp-content/uploads/2023/11/web-designer-260x195.jpg" class="attachment-csco-thumbnail-small size-csco-thumbnail-small wp-post-image" alt="" decoding="async" loading="lazy" srcset="https://softwaredevelopment.pl/wp-content/uploads/2023/11/web-designer-260x195.jpg 260w, https://softwaredevelopment.pl/wp-content/uploads/2023/11/web-designer-300x225.jpg 300w, https://softwaredevelopment.pl/wp-content/uploads/2023/11/web-designer-200x150.jpg 200w" sizes="(max-width: 260px) 100vw, 260px" /> </div> <a href="https://softwaredevelopment.pl/stworzenie-strony-internetowej-przewodnik-krok-po-kroku/" class="cs-overlay-link"></a> </div> <div class="cs-entry__inner cs-entry__content"> <a href="https://softwaredevelopment.pl/stworzenie-strony-internetowej-przewodnik-krok-po-kroku/" class="cs-entry__title-wrapper"> <span class="cs-entry__title-effect"> <h2 class="cs-entry__title">Stworzenie strony internetowej: przewodnik krok po kroku</h2> <p class="cs-entry__excerpt">Stworzenie własnej strony internetowej może wydawać się skomplikowane, ale krok</p> </span> </a> <div class="cs-entry__post-meta" ><div class="cs-meta-author"><span class="cs-by">by</span><a class="cs-meta-author-inner url fn n" href="https://softwaredevelopment.pl/author/admin/" title="View all posts by softwaredevelopment.pl"><span class="cs-author">softwaredevelopment.pl</span></a></div><div class="cs-meta-date">23 listopada, 2023</div></div> </div> </div> </article> <article class="post-2660 post type-post status-publish format-standard has-post-thumbnail category-programowanie category-technologie category-web-development category-webdesign cs-entry cs-video-wrap"> <div class="cs-entry__outer"> <div class="cs-entry__inner cs-entry__thumbnail cs-entry__overlay cs-overlay-ratio cs-ratio-original" data-scheme="inverse"> <div class="cs-overlay-background cs-overlay-transparent"> <img width="260" height="195" src="https://softwaredevelopment.pl/wp-content/uploads/2023/11/C-code-260x195.jpg" class="attachment-csco-thumbnail-small size-csco-thumbnail-small wp-post-image" alt="" decoding="async" loading="lazy" srcset="https://softwaredevelopment.pl/wp-content/uploads/2023/11/C-code-260x195.jpg 260w, https://softwaredevelopment.pl/wp-content/uploads/2023/11/C-code-300x225.jpg 300w, https://softwaredevelopment.pl/wp-content/uploads/2023/11/C-code-200x150.jpg 200w" sizes="(max-width: 260px) 100vw, 260px" /> </div> <a href="https://softwaredevelopment.pl/c-co-oznacza-ten-jezyk-programowania-i-jak-sie-wpisuje-w-kontekscie-html-nfc-sql-i-array/" class="cs-overlay-link"></a> </div> <div class="cs-entry__inner cs-entry__content"> <a href="https://softwaredevelopment.pl/c-co-oznacza-ten-jezyk-programowania-i-jak-sie-wpisuje-w-kontekscie-html-nfc-sql-i-array/" class="cs-entry__title-wrapper"> <span class="cs-entry__title-effect"> <h2 class="cs-entry__title">C++: Co oznacza ten język programowania i jak się wpisuje w kontekście HTML, NFC, SQL i array</h2> <p class="cs-entry__excerpt">C++ jest potężnym i wszechstronnym językiem programowania, który zdobył</p> </span> </a> <div class="cs-entry__post-meta" ><div class="cs-meta-author"><span class="cs-by">by</span><a class="cs-meta-author-inner url fn n" href="https://softwaredevelopment.pl/author/admin/" title="View all posts by softwaredevelopment.pl"><span class="cs-author">softwaredevelopment.pl</span></a></div><div class="cs-meta-date">23 listopada, 2023</div></div> </div> </div> </article> </div> </div> </div> </div> </main> <footer class="cs-footer"> <div class="cs-footer__top" data-scheme="default"> <div class="cs-container"> <div class="cs-footer__item"> <div class="cs-footer__col cs-col-left"> <div class="cs-footer__inner"> <div class="cs-logo"> <a class="cs-footer__logo cs-logo-default" href="https://softwaredevelopment.pl/"> <img src="https://softwaredevelopment.pl/wp-content/uploads/2023/11/soft.png" alt="softwaredevelopment.pl" > </a> <a class="cs-footer__logo cs-logo-dark" href="https://softwaredevelopment.pl/"> <img src="https://softwaredevelopment.pl/wp-content/uploads/2023/11/soft.png" alt="softwaredevelopment.pl" > </a> </div> </div> </div> <div class="cs-footer__col cs-col-center"> <div class="cs-footer__inner"> <nav class="cs-footer__nav"> </nav> </div> </div> <div class="cs-footer__col cs-col-right"> <div class="cs-footer__inner"> <div class="cs-footer-social-links"> <div class="pk-social-links-wrap pk-social-links-template-nav pk-social-links-align-default pk-social-links-scheme-default pk-social-links-titles-disabled pk-social-links-counts-enabled pk-social-links-labels-disabled pk-social-links-mode-php pk-social-links-mode-rest"> <div class="pk-social-links-items"> </div> </div> </div> </div> </div> </div> </div> </div> <div class="cs-footer__bottom" data-scheme="default"> <div class="cs-container"> <div class="cs-footer__item"> <div class="cs-footer__col cs-col-left"> <div class="cs-footer__inner"> <div class="cs-footer__copyright"> <br><br> Portal należy do grupy MediaLink. Współpraca? Napisz na <a href="mailto:redakcja@medialink.pl" target="_blank">redakcja@medialink.pl</a> </div> </div> </div> <div class="cs-footer__col cs-col-right"> <div class="cs-footer__inner"> <nav class="cs-footer__nav cs-footer__nav-horizontal"> <div class="cs-footer__nav-item"><ul id="menu-glowne-2" class="cs-footer__nav-inner "><li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2619"><a href="https://softwaredevelopment.pl/kategoria/programowanie/">Programowanie</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2620"><a href="https://softwaredevelopment.pl/kategoria/poradniki/">Poradniki</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2621"><a href="https://softwaredevelopment.pl/kategoria/jezyki-programowania/">Języki programowania</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category current-post-ancestor current-menu-parent current-post-parent menu-item-2622"><a href="https://softwaredevelopment.pl/kategoria/webdesign/">Webdesign</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category current-post-ancestor current-menu-parent current-post-parent menu-item-2623"><a href="https://softwaredevelopment.pl/kategoria/html/">Html</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2624"><a href="https://softwaredevelopment.pl/kategoria/wordpress/">WordPress</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2625"><a href="https://softwaredevelopment.pl/kategoria/tworzenie-stron/">Tworzenie stron</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2626"><a href="https://softwaredevelopment.pl/kategoria/nauka/">Nauka</a></li> </ul></div> </nav> </div> </div> </div> </div> </div> </footer> </div> </div> <a href="#top" class="pk-scroll-to-top"> <i class="pk-icon pk-icon-up"></i> </a> <div class="pk-mobile-share-overlay"> </div> <div id="fb-root"></div> <script async defer crossorigin="anonymous" src="https://connect.facebook.net/pl_PL/sdk.js#xfbml=1&version=v17.0&appId=&autoLogAppEvents=1" nonce="Ci8te34e"></script> <script src="https://softwaredevelopment.pl/wp-content/plugins/canvas/components/basic-elements/block-alert/public-block-alert.js?ver=2.4.2" id="canvas-block-alert-script-js"></script> <script src="https://softwaredevelopment.pl/wp-content/plugins/canvas/components/basic-elements/block-collapsibles/public-block-collapsibles.js?ver=2.4.2" id="canvas-block-collapsibles-script-js"></script> <script src="https://softwaredevelopment.pl/wp-content/plugins/canvas/components/basic-elements/block-tabs/public-block-tabs.js?ver=2.4.2" id="canvas-block-tabs-script-js"></script> <script src="https://softwaredevelopment.pl/wp-content/plugins/canvas/components/justified-gallery/block/jquery.justifiedGallery.min.js?ver=2.4.2" id="justifiedgallery-js"></script> <script id="canvas-justified-gallery-js-extra"> var canvasJG = {"rtl":""}; </script> <script src="https://softwaredevelopment.pl/wp-content/plugins/canvas/components/justified-gallery/block/public-block-justified-gallery.js?ver=2.4.2" id="canvas-justified-gallery-js"></script> <script src="https://softwaredevelopment.pl/wp-includes/js/imagesloaded.min.js?ver=5.0.0" id="imagesloaded-js"></script> <script src="https://softwaredevelopment.pl/wp-content/plugins/canvas/components/slider-gallery/block/flickity.pkgd.min.js?ver=2.4.2" id="flickity-js"></script> <script id="canvas-slider-gallery-js-extra"> var canvas_sg_flickity = {"page_info_sep":" of "}; </script> <script src="https://softwaredevelopment.pl/wp-content/plugins/canvas/components/slider-gallery/block/public-block-slider-gallery.js?ver=2.4.2" id="canvas-slider-gallery-js"></script> <script src="https://softwaredevelopment.pl/wp-includes/js/dist/vendor/wp-polyfill-inert.min.js?ver=3.1.2" id="wp-polyfill-inert-js"></script> <script src="https://softwaredevelopment.pl/wp-includes/js/dist/vendor/regenerator-runtime.min.js?ver=0.14.0" id="regenerator-runtime-js"></script> <script src="https://softwaredevelopment.pl/wp-includes/js/dist/vendor/wp-polyfill.min.js?ver=3.15.0" id="wp-polyfill-js"></script> <script id="contact-form-7-js-extra"> var wpcf7 = {"api":{"root":"https:\/\/softwaredevelopment.pl\/wp-json\/","namespace":"contact-form-7\/v1"},"cached":"1"}; </script> <script src="https://softwaredevelopment.pl/wp-content/plugins/contact-form-7/includes/js/index.js?ver=5.5.4" id="contact-form-7-js"></script> <script src="https://softwaredevelopment.pl/wp-content/plugins/powerkit/modules/basic-elements/public/js/public-powerkit-basic-elements.js?ver=4.0.0" id="powerkit-basic-elements-js"></script> <script id="powerkit-justified-gallery-js-extra"> var powerkitJG = {"rtl":""}; </script> <script src="https://softwaredevelopment.pl/wp-content/plugins/powerkit/modules/justified-gallery/public/js/public-powerkit-justified-gallery.js?ver=2.9.0" id="powerkit-justified-gallery-js"></script> <script src="https://softwaredevelopment.pl/wp-content/plugins/powerkit/modules/lightbox/public/js/glightbox.min.js?ver=2.9.0" id="glightbox-js"></script> <script id="powerkit-lightbox-js-extra"> var powerkit_lightbox_localize = {"text_previous":"Previous","text_next":"Next","text_close":"Close","text_loading":"Loading","text_counter":"of","single_image_selectors":".entry-content img","gallery_selectors":".wp-block-gallery,.gallery","exclude_selectors":".sight-portfolio-area","zoom_icon":"1"}; </script> <script src="https://softwaredevelopment.pl/wp-content/plugins/powerkit/modules/lightbox/public/js/public-powerkit-lightbox.js?ver=2.9.0" id="powerkit-lightbox-js"></script> <script id="powerkit-opt-in-forms-js-extra"> var opt_in = {"ajax_url":"https:\/\/softwaredevelopment.pl\/wp-admin\/admin-ajax.php","warning_privacy":"Please confirm that you agree with our policies."}; </script> <script src="https://softwaredevelopment.pl/wp-content/plugins/powerkit/modules/opt-in-forms/public/js/public-powerkit-opt-in-forms.js?ver=2.9.0" id="powerkit-opt-in-forms-js"></script> <script async="async" defer="defer" src="//assets.pinterest.com/js/pinit.js?ver=6.5.2" id="powerkit-pinterest-js"></script> <script id="powerkit-pin-it-js-extra"> var powerkit_pinit_localize = {"image_selectors":".entry-content img","exclude_selectors":".cnvs-block-row,.cnvs-block-section,.cnvs-block-posts .entry-thumbnail,.cnvs-post-thumbnail,.pk-block-author,.pk-featured-categories img,.pk-inline-posts-container img,.pk-instagram-image,.pk-subscribe-image,.wp-block-cover,.pk-block-posts,.sight-portfolio-entry-link-page,.cs-posts-area__main,.cs-entry,.pk-widget-author img","only_hover":"1"}; </script> <script src="https://softwaredevelopment.pl/wp-content/plugins/powerkit/modules/pinterest/public/js/public-powerkit-pin-it.js?ver=2.9.0" id="powerkit-pin-it-js"></script> <script src="https://softwaredevelopment.pl/wp-content/plugins/powerkit/modules/scroll-to-top/public/js/public-powerkit-scroll-to-top.js?ver=2.9.0" id="powerkit-scroll-to-top-js"></script> <script src="https://softwaredevelopment.pl/wp-content/plugins/powerkit/modules/share-buttons/public/js/public-powerkit-share-buttons.js?ver=2.9.0" id="powerkit-share-buttons-js"></script> <script id="powerkit-slider-gallery-js-extra"> var powerkit_sg_flickity = {"page_info_sep":" of "}; </script> <script src="https://softwaredevelopment.pl/wp-content/plugins/powerkit/modules/slider-gallery/public/js/public-powerkit-slider-gallery.js?ver=2.9.0" id="powerkit-slider-gallery-js"></script> <script id="powerkit-table-of-contents-js-extra"> var powerkit_toc_config = {"label_show":"Show","label_hide":"Hide"}; </script> <script src="https://softwaredevelopment.pl/wp-content/plugins/powerkit/modules/table-of-contents/public/js/public-powerkit-table-of-contents.js?ver=2.9.0" id="powerkit-table-of-contents-js"></script> <script src="https://softwaredevelopment.pl/wp-content/plugins/sight/render/js/jquery.magnific-popup.min.js?ver=1700183823" id="magnific-popup-js"></script> <script id="sight-block-script-js-extra"> var sight_lightbox_localize = {"text_previous":"Previous","text_next":"Next","text_close":"Close","text_loading":"Loading","text_counter":"of"}; </script> <script src="https://softwaredevelopment.pl/wp-content/plugins/sight/render/js/sight.js?ver=1700183823" id="sight-block-script-js"></script> <script id="csco-scripts-js-extra"> var csLocalize = {"siteSchemeMode":"system","siteSchemeToogle":"1"}; var csco_mega_menu = {"rest_url":"https:\/\/softwaredevelopment.pl\/wp-json\/csco\/v1\/menu-posts"}; </script> <script src="https://softwaredevelopment.pl/wp-content/themes/blueprint/assets/js/scripts.js?ver=1.1.0" id="csco-scripts-js"></script> <script src="https://softwaredevelopment.pl/wp-includes/js/comment-reply.min.js?ver=6.5.2" id="comment-reply-js" async data-wp-strategy="async"></script> <script type="text/javascript"> "use strict"; (function($) { $( window ).on( 'load', function() { // Each All Share boxes. $( '.pk-share-buttons-mode-rest' ).each( function() { var powerkitButtonsIds = [], powerkitButtonsBox = $( this ); // Check Counts. if ( ! powerkitButtonsBox.hasClass( 'pk-share-buttons-has-counts' ) && ! powerkitButtonsBox.hasClass( 'pk-share-buttons-has-total-counts' ) ) { return; } powerkitButtonsBox.find( '.pk-share-buttons-item' ).each( function() { if ( $( this ).attr( 'data-id' ).length > 0 ) { powerkitButtonsIds.push( $( this ).attr( 'data-id' ) ); } }); // Generate accounts data. var powerkitButtonsData = {}; if( powerkitButtonsIds.length > 0 ) { powerkitButtonsData = { 'ids' : powerkitButtonsIds.join(), 'post_id' : powerkitButtonsBox.attr( 'data-post-id' ), 'url' : powerkitButtonsBox.attr( 'data-share-url' ), }; } // Get results by REST API. $.ajax({ type: 'GET', url: 'https://softwaredevelopment.pl/wp-json/social-share/v1/get-shares', data: powerkitButtonsData, beforeSend: function(){ // Add Loading Class. powerkitButtonsBox.addClass( 'pk-share-buttons-loading' ); }, success: function( response ) { if ( ! $.isEmptyObject( response ) && ! response.hasOwnProperty( 'code' ) ) { // Accounts loop. $.each( response, function( index, data ) { if ( index !== 'total_count' ) { // Find Bsa Item. var powerkitButtonsItem = powerkitButtonsBox.find( '.pk-share-buttons-item[data-id="' + index + '"]'); // Set Count. if ( data.hasOwnProperty( 'count' ) && data.count ) { powerkitButtonsItem.removeClass( 'pk-share-buttons-no-count' ).addClass( 'pk-share-buttons-item-count' ); powerkitButtonsItem.find( '.pk-share-buttons-count' ).html( data.count ); } else { powerkitButtonsItem.addClass( 'pk-share-buttons-no-count' ); } } }); if ( powerkitButtonsBox.hasClass( 'pk-share-buttons-has-total-counts' ) && response.hasOwnProperty( 'total_count' ) ) { var powerkitButtonsTotalBox = powerkitButtonsBox.find( '.pk-share-buttons-total' ); if ( response.total_count ) { powerkitButtonsTotalBox.find( '.pk-share-buttons-count' ).html( response.total_count ); powerkitButtonsTotalBox.show().removeClass( 'pk-share-buttons-total-no-count' ); } } } // Remove Loading Class. powerkitButtonsBox.removeClass( 'pk-share-buttons-loading' ); }, error: function() { // Remove Loading Class. powerkitButtonsBox.removeClass( 'pk-share-buttons-loading' ); } }); }); }); })(jQuery); </script> <script type="text/javascript"> "use strict"; (function($) { $( window ).on( 'load', function() { // Get all links. var powerkitSLinksIds = []; var powerkitSLinksRestBox = $( '.pk-social-links-mode-rest' ); // Generate links Ids. $( powerkitSLinksRestBox ).each( function( index, wrap ) { if ( ! $( wrap ).hasClass( 'pk-social-links-counts-disabled' ) ) { $( wrap ).find( '.pk-social-links-item' ).each( function() { if ( $( this ).attr( 'data-id' ).length > 0 ) { powerkitSLinksIds.push( $( this ).attr( 'data-id' ) ); } }); } }); // Generate links data. var powerkitSLinksData = {}; if( powerkitSLinksIds.length > 0 ) { powerkitSLinksData = { 'ids' : powerkitSLinksIds.join() }; } // Check data. if ( ! Object.entries( powerkitSLinksData ).length ) { return; } // Get results by REST API. $.ajax({ type: 'GET', url: 'https://softwaredevelopment.pl/wp-json/social-counts/v1/get-counts', data: powerkitSLinksData, beforeSend: function(){ // Add Loading Class. powerkitSLinksRestBox.addClass( 'pk-social-links-loading' ); }, success: function( response ) { if ( ! $.isEmptyObject( response ) && ! response.hasOwnProperty( 'code' ) ) { // SLinks loop. $.each( response, function( index, data ) { // Find Bsa Item. var powerkitSLinksItem = powerkitSLinksRestBox.find( '.pk-social-links-item[data-id="' + index + '"]'); // Set Class. if ( data.hasOwnProperty( 'class' ) ) { powerkitSLinksItem.addClass( data.class ); } // Set Count. if ( data.hasOwnProperty( 'result' ) && data.result !== null && data.result.hasOwnProperty( 'count' ) ) { if ( data.result.count ) { // Class Item. powerkitSLinksItem.removeClass( 'pk-social-links-no-count' ).addClass( 'pk-social-links-item-count' ); // Count item. powerkitSLinksItem.find( '.pk-social-links-count' ).not( '.pk-tippy' ).html( data.result.count ); } } else { powerkitSLinksItem.addClass( 'pk-social-links-no-count' ); } }); } // Remove Loading Class. powerkitSLinksRestBox.removeClass( 'pk-social-links-loading' ); }, error: function() { // Remove Loading Class. powerkitSLinksRestBox.removeClass( 'pk-social-links-loading' ); } }); }); })(jQuery); </script> </body> </html>