Uvod v XHTML

Uvod v XHTML

XHTML oz Razširljivi označevalni jezik hiperbesedila je mešanica HTML in XML, zelo podobna HTML ampak strožje. Je kot pravilnik za ustvarjanje spletnih strani, ki jih brskalniki zlahka razumejo. Za razliko od HTML-ja morate biti previdni in natančno upoštevati pravila. Večina brskalnikov ga podpira. Zamislite si to kot bolj natančen način pisanja spletne kode.

Kazalo

Zgodovina

Razvil ga je World Wide Web Consortium (W3C) in spletnim razvijalcem pomaga pri prehodu s HTML na XML. Z XHTML lahko razvijalci vstopijo v svet XML z vsemi njegovimi funkcijami, medtem ko še vedno zagotavljajo združljivost vsebine za nazaj in v prihodnosti. Družina XHTML vključuje tri vrste dokumentov; prvi je XHTML 1.0, ki ga je W3C priporočil 26. januarja 2000. Drugi je XHTML 1.1, ki ga je W3C priporočil 31. maja 2001.

Tretji je XHTML5, standard, ki se uporablja za razvoj prilagoditve XML specifikacije HTML5. Dokument XHTML mora imeti deklaracijo XHTML.

Elementi XHTML:

Element XHTML Opis
> Uporablja se za razglasitev definicije tipa dokumenta (DTD), ki določa pravila za označevalni jezik in zagotavlja pravilno upodabljanje v brskalnikih.
> Obdaja celoten dokument HTML ali XHTML in služi kot korenski element.
> Vsebuje metainformacije o dokumentu, kot so naslov, nabor znakov, povezane tabele slogov in drugi bistveni elementi.
> Ugnezdeno v razdelku glave določa naslov dokumenta, ki je prikazan v naslovni vrstici ali zavihku brskalnika.
> Obdaja vsebino spletne strani, vključno z besedilom, slikami, povezavami in drugimi elementi HTML. Predstavlja vidni del dokumenta, ki je prikazan v brskalniku.

Pri izdelavi spletne strani XHTML je potrebno vključiti deklaracijo DTD (Document Type Definition). Obstajajo tri vrste DTD, ki so obravnavane spodaj:

Prehodni DTD:

Podpirajo ga starejši brskalniki, ki nimajo vgrajene podpore za kaskadne slogovne liste. V oznaki telesa je priloženih več atributov, ki niso dovoljeni v strogem DTD.

Sintaksa:

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

primer: V tem primeru bomo videli kodo za pisanje dokumenta XHTML s primerom.

html




xml version='1.0' encoding='UTF-8'?> Prehodni DTD XHTMLtitle> head> <body bgcolor='#dae1ed'> <div>font-weight:bold;text-align:center; margin-bottom:-25px;'>techcodeview.comdiv> <p style='text-align:center;font-size:20px;'>Portal za računalništvo> <p style='text-align:center;font-size:20px;'>Možnost izbire meseca: <select name='month'> <option selected='selected'>januarska možnost> <option>Februarska možnost> <option>Marchoption> <option>Apriloption> <option>Možnost> <option>junijska možnost> <option>Julijska možnost> <option>Avgusyoption> <option>September možnost> <option>oktobrska možnost> <option>novembrska možnost> <option>Decemberoption> select> p> body> 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>Izhod: </strong> </b> </p> <p> <img src='//techcodeview.com/img/html-xml/79/xhtml-introduction.webp' alt='prehodni dtd xhtml'> <span> </span> </p> <h2 id='strict-dtd'> <b> <strong>Strogi DTD: </strong> </b> <span> </span> </h2> <p dir='ltr'> <span>Strogi DTD se uporablja, ko stran XHTML vsebuje samo označevalni jezik. Strogi DTD se uporablja skupaj s kaskadnimi slogovnimi listami, ker ta atribut ne dovoljuje lastnosti CSS v oznaki telesa. </span> </p> <h3> <b> <strong>Sintaksa: </strong> </b> </h3> <pre> PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 'DTD/xhtml1-strict.dtd'> </pre> <p dir='ltr'> <b> <strong>Primer 2: </strong> </b> <span>V tem primeru bomo videli kodo za pisanje dokumenta XHTML s primerom za strogi 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>Strogi DTD XHTMLtitle> head> <body> <div>font-weight:bold;text-align:center; margin-bottom:-25px;'>techcodeview.comdiv> <p style='text-align:center;font-size:20px;'>Portal za računalništvo <p style='text-align:center;font-size:20px;'>Možnost izbire meseca: <select name='month'> <option selected='selected'>januarska možnost> <option>Februarska možnost> <option>Marchoption> <option>Apriloption> <option>Možnost> <option>junijska možnost> <option>Julijska možnost> <option>Avgusyoption> <option>September možnost> <option>oktobrska možnost> <option>novembrska možnost> <option>Decemberoption> select> p> body> 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>Izhod: </strong> </b> </p> <p> <span> </span> <img src='//techcodeview.com/img/html-xml/79/xhtml-introduction-2.webp' alt='strog dtd xhtml'> <span> </span> </p> <h2 id='frameset-dtd'> <b> <strong>Frameset DTD: </strong> </b> <span> </span> </h2> <p dir='ltr'> <span>DTD nabora okvirjev se uporablja, kadar stran XHTML vsebuje okvirje. Ta DTD je enak prehodnemu DTD HTML 4.01, razen vsebinskega modela elementa HTML. </span> </p> <h3> <b> <strong>Sintaksa: </strong> </b> </h3> <pre> PUBLIC '-//W3C//DTD XHTML 1.0 Frameset//EN' 'DTD/xhtml1-frameset.dtd'> </pre> <p dir='ltr'> <b> <strong>Primer 2: </strong> </b> <span>V tem primeru bomo videli kodo za pisanje dokumenta XHTML s primerom za okvirni niz 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'?>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>Frameset DTD XHTMLtitle> head> <frameset cols='30%, 20%, *'> <frameset rows='40%, 30%, *'> <frame src='gfg.html' /> <frame src='gfg1.html' /> <frame src='geeks.html' />frameset> <frameset rows='40%, 60%'> <frame src='g4g.html' /> <frame src='g4g1.html' />frameset> <frameset rows='20%, 20%, 30%, *'> <frame src='geeksforgeeks.html' /> <frame src='geeksforgeeks1.html' /> <frame src='geeksforgeeks2.html' /> <frame src='geeksforgeeks3.html' />frameset> frameset> 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>Izhod: </strong> </b> </p> <h2 id='why-use-xhtml'> <img src='//techcodeview.com/img/html-xml/79/xhtml-introduction-3.webp' alt='frameset dtd xhtml'> <b> <strong>Zakaj uporabljati XHTML? </strong> </b> </h2> <ul> <li value='1'> <span>Dokumenti XHTML so potrjeni s standardnimi orodji XML. </span> </li> <li value='2'> <span>Dolgoročno je enostavno vzdrževati, pretvarjati, urejati dokument. </span> </li> <li value='3'> <span>Uporablja se za določanje standarda kakovosti spletnih strani. </span> </li> <li value='4'> <span>XHTML je uradni standard W3C, vaše spletno mesto postane bolj združljivo in natančno z mnogimi brskalniki. </span> </li> </ul> <h2 id='benefits-of-xhtml'> <b> <strong>Prednosti XHTML: </strong> </b> </h2> <ul> <li value='1'> <span>Vse oznake XHTML morajo imeti zaključne oznake in so pravilno ugnezdene. To ustvari čistejšo kodo. </span> </li> <li value='2'> <span>Dokumenti XHTML so vitki, kar pomeni, da uporabljajo manj pasovne širine. To zmanjša stroške, zlasti če ima vaše spletno mesto 1000 strani. </span> </li> <li value='3'> <span>Dokumenti XHTML so dobro oblikovani in jih je mogoče preprosto prenesti v brezžične naprave, braillove pisave in druga specializirana spletna okolja. </span> </li> <li value='4'> <span>Vse novosti bodo v XML (katerega XHTML je aplikacija). </span> </li> <li value='5'> <span>XHTML deluje v povezavi s CSS za ustvarjanje spletnih strani, ki jih je mogoče enostavno posodobiti. </span> </li> </ul> <h2 id='difference-between-html-and-xhtml'> <b> <strong>Razlika med HTML in 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 ali HyperText Markup Language je glavni označevalni jezik za ustvarjanje spletnih strani </span> </td> <td> <span>XHTML (Extensible HyperText Markup Language) je družina označevalnih jezikov XML, ki zrcalijo ali razširjajo različice splošno uporabljenega HTML jezika. </span> </td> </tr> <tr> <td> <span>Prilagodljivo ogrodje, ki zahteva popustljiv specifični razčlenjevalec HTML </span> </td> <td> <span>Omejevalna podmnožica XML, ki jo je treba razčleniti s standardnimi razčlenjevalniki XML </span> </td> </tr> <tr> <td> <span>Predlagal Tim Berners-Lee leta 1987 </span> </td> <td> <span>Priporočilo konzorcija svetovnega spleta iz leta 2000. </span> </td> </tr> <tr> <td> <span>Uporaba standardnega generaliziranega označevalnega jezika (SGML). </span> </td> <td> <span>Uporaba XML </span> </td> </tr> <tr> <td> <span>Razširjeno iz SGML. </span> </td> <td> <span>Razširjeno iz 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> Deli </h4> <div class="flex flex-wrap justify-center gap-3"> <!-- Twitter --> <a href="https://twitter.com/intent/tweet?text=Uvod v XHTML&url=https://www.techcodeview.com/sl/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/sl/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/sl/xhtml-introduction&title=Uvod v XHTML" 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"> Morda Vam Bo Všeč </h3> <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> <div class="group"> <a href="/sl/t-flip-flop" 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/it-problems-solutions/72/t-flip-flop.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="T japonka" 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="/sl/t-flip-flop">T japonka </a> </h4> </div> <div class="group"> <a href="/sl/linux-tree-command" 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/linux-tutorial/72/linux-tree-command.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Ukaz drevesa Linux" 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="/sl/linux-tree-command">Ukaz drevesa Linux </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> Top Članki </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="/sl/difference-between-cc"> <img src="https://techcodeview.com/img/computer-gk/71/difference-between-cc.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Razlika med CC in BCC" 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="/sl/difference-between-cc" class="hover:text-tech-500 transition-colors line-clamp-3">Razlika med CC in BCC </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="/sl/hierarchical-clustering-data-mining"> <img src="https://techcodeview.com/img/data-mining/68/hierarchical-clustering-data-mining.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Hierarhično združevanje v podatkovno rudarjenje" 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="/sl/hierarchical-clustering-data-mining" class="hover:text-tech-500 transition-colors line-clamp-3">Hierarhično združevanje v podatkovno rudarjenje </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="/sl/split-command-linux-with-examples"> <img src="https://techcodeview.com/img/linux-command/49/split-command-linux-with-examples.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Ukaz Split v Linuxu s primeri" 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="/sl/split-command-linux-with-examples" class="hover:text-tech-500 transition-colors line-clamp-3">Ukaz Split v Linuxu s primeri </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="/sl/hotspot-apps-android"> <img src="https://techcodeview.com/img/android-tutorial/11/hotspot-apps-android.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Aplikacije Hotspot za Android" 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="/sl/hotspot-apps-android" class="hover:text-tech-500 transition-colors line-clamp-3">Aplikacije Hotspot za Android </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="/sl/27-best-liberal-arts-colleges-country-1311610"> <img src="https://techcodeview.com/img/blog/10/27-best-liberal-arts-colleges-country.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="27 najboljših univerz za liberalno umetnost v državi" 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="/sl/27-best-liberal-arts-colleges-country-1311610" class="hover:text-tech-500 transition-colors line-clamp-3">27 najboljših univerz za liberalno umetnost v državi </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="/sl/types-cyber-attackers"> <img src="https://techcodeview.com/img/cyber-security-tutorial/75/types-cyber-attackers.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Vrste kibernetskih napadalcev" 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="/sl/types-cyber-attackers" class="hover:text-tech-500 transition-colors line-clamp-3">Vrste kibernetskih napadalcev </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="/sl/java-linkedlist-class"> <img src="https://techcodeview.com/img/java-collections/61/java-linkedlist-class.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Razred Java LinkedList" 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="/sl/java-linkedlist-class" class="hover:text-tech-500 transition-colors line-clamp-3">Razred Java LinkedList </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="/sl/minimum-distance-to-travel-to-cover-all-intervals"> <img src="https://techcodeview.com/img/mathematical/26/minimum-distance-to-travel-to-cover-all-intervals.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Najmanjša potovalna razdalja za pokrivanje vseh intervalov" 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="/sl/minimum-distance-to-travel-to-cover-all-intervals" class="hover:text-tech-500 transition-colors line-clamp-3">Najmanjša potovalna razdalja za pokrivanje vseh intervalov </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="/sl/java-constant"> <img src="https://techcodeview.com/img/java-tutorial/86/java-constant.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Javna konstanta" 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="/sl/java-constant" class="hover:text-tech-500 transition-colors line-clamp-3">Javna konstanta </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="/sl/cobol-tutorial"> <img src="https://techcodeview.com/img/cobol-tutorial/88/cobol-tutorial.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Vadnica COBOL" 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="/sl/cobol-tutorial" class="hover:text-tech-500 transition-colors line-clamp-3">Vadnica COBOL </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">Kategorija </h2> </div> <div class="flex flex-wrap gap-2"> <a href="/sl/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="/sl/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"> Java Conversion </a> <a href="/sl/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"> Matematika </a> <a href="/sl/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"> Zbirke Java </a> <a href="/sl/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"> Razlike </a> <a href="/sl/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"> Java String </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">Zanimivi Članki </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/linux-tutorial/85/restart-apache-ubuntu.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Znova zaženite Apache Ubuntu" 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="/sl/linux-tutorial/">Vadnica Za Linux </a> </div> <h4 class="text-sm font-bold text-white leading-tight"> <a href="/sl/restart-apache-ubuntu">Znova zaženite Apache Ubuntu </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/dsa/61/hierholzer-s-algorithm-for-directed-graph.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Hierholzerjev algoritem za usmerjeni graf" 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="/sl/dsa/">DSA </a> </div> <h4 class="text-sm font-bold text-white leading-tight"> <a href="/sl/hierholzer-s-algorithm-for-directed-graph">Hierholzerjev algoritem za usmerjeni graf </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/mathematical/72/find-the-largest-number-with-given-number-of-digits-and-sum-of-digits.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Poiščite največje število z določenim številom številk in vsoto številk" 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="/sl/mathematical/">Matematično </a> </div> <h4 class="text-sm font-bold text-white leading-tight"> <a href="/sl/find-the-largest-number-with-given-number-of-digits-and-sum-of-digits">Poiščite največje število z določenim številom številk in vsoto številk </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/picked/63/ip-command-linux-with-examples.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Ukaz ip v Linuxu s primeri" 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="/sl/picked/">Izbrano </a> </div> <h4 class="text-sm font-bold text-white leading-tight"> <a href="/sl/ip-command-linux-with-examples">Ukaz ip v Linuxu s primeri </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/ms-excel-tutorial/43/how-change-data-range-pivot-table.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Kako spremeniti obseg podatkov v vrtilni tabeli" 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="/sl/ms-excel-tutorial/">Vadnica Za Ms Excel </a> </div> <h4 class="text-sm font-bold text-white leading-tight"> <a href="/sl/how-change-data-range-pivot-table">Kako spremeniti obseg podatkov v vrtilni tabeli </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/c-tutorial/65/how-run-c-program-visual-studio-code.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Kako zagnati program C v Visual Studio Code?" 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="/sl/c-tutorial/">C Vadnica </a> </div> <h4 class="text-sm font-bold text-white leading-tight"> <a href="/sl/how-run-c-program-visual-studio-code">Kako zagnati program C v Visual Studio Code? </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 Vse Pravice Pridržane | <a href="//www.techcodeview.com/ca/">techcodeview.com </a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Zavrnitev Odgovornosti </a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">O Podjetju </a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Politika Zasebnosti </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>