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/how-ace-ap-psychology-frqs-131622" 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/blog/17/how-ace-ap-psychology-frqs.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Kako doseči Ace AP Psychology FRQ" 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/how-ace-ap-psychology-frqs-131622">Kako doseči Ace AP Psychology FRQ </a> </h4> </div> <div class="group"> <a href="/sl/user-defined-exceptions-in-python-with-examples" 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/python/55/user-defined-exceptions-in-python-with-examples.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Uporabniško določene izjeme v Pythonu s primeri" 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/user-defined-exceptions-in-python-with-examples">Uporabniško določene izjeme v Pythonu s primeri </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/who-invented-fan"> <img src="https://techcodeview.com/img/blog/76/who-invented-fan.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Kdo je izumil ventilator" 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/who-invented-fan" class="hover:text-tech-500 transition-colors line-clamp-3">Kdo je izumil ventilator </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/typescript-switch-statement"> <img src="https://techcodeview.com/img/typescript-tutorial/79/typescript-switch-statement.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Stavek TypeScript Switch" 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/typescript-switch-statement" class="hover:text-tech-500 transition-colors line-clamp-3">Stavek TypeScript Switch </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/return-an-array-c"> <img src="https://techcodeview.com/img/c-tutorial/16/return-an-array-c.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Vrni matriko v 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="/sl/return-an-array-c" class="hover:text-tech-500 transition-colors line-clamp-3">Vrni matriko v 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="/sl/how-underline-text-css"> <img src="https://techcodeview.com/img/css-tutorial/98/how-underline-text-css.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Kako podčrtati besedilo v CSS?" 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/how-underline-text-css" class="hover:text-tech-500 transition-colors line-clamp-3">Kako podčrtati besedilo v CSS? </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-island"> <img src="https://techcodeview.com/img/blog/05/java-island.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="otok Java" 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-island" class="hover:text-tech-500 transition-colors line-clamp-3">otok Java </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/python-opencv-cv2-imread-method"> <img src="https://techcodeview.com/img/opencv/99/python-opencv-cv2-imread-method.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Python OpenCV | metoda cv2.imread()." 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/python-opencv-cv2-imread-method" class="hover:text-tech-500 transition-colors line-clamp-3">Python OpenCV | metoda cv2.imread(). </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/explained-what-are-loot-boxes-24256"> <img src="https://techcodeview.com/img/get-informed/66/explained-what-are-loot-boxes.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Pojasnilo: kaj so škatle za plen?" 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/explained-what-are-loot-boxes-24256" class="hover:text-tech-500 transition-colors line-clamp-3">Pojasnilo: kaj so škatle za plen? </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/how-get-36-act-math-1311462"> <img src="https://techcodeview.com/img/blog/74/how-get-36-act-math.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Kako doseči 36 pri matematiki ACT: 8 strategij popolnega strelca" 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/how-get-36-act-math-1311462" class="hover:text-tech-500 transition-colors line-clamp-3">Kako doseči 36 pri matematiki ACT: 8 strategij popolnega strelca </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/whole-numbers-definition"> <img src="https://techcodeview.com/img/math-concepts/91/whole-numbers-definition.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Cela števila – definicija, lastnosti in 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/whole-numbers-definition" class="hover:text-tech-500 transition-colors line-clamp-3">Cela števila – definicija, lastnosti in 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/how-update-multiple-columns-single-update-statement-sql"> <img src="https://techcodeview.com/img/picked/20/how-update-multiple-columns-single-update-statement-sql.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Kako posodobiti več stolpcev v enem stavku posodobitve v SQL?" 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/how-update-multiple-columns-single-update-statement-sql" class="hover:text-tech-500 transition-colors line-clamp-3">Kako posodobiti več stolpcev v enem stavku posodobitve v SQL? </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/history-gk/24/ad-vs-bc.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="AD vs BC" 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/history-gk/">Zgodovina Gk </a> </div> <h4 class="text-sm font-bold text-white leading-tight"> <a href="/sl/ad-vs-bc">AD vs BC </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/misc/33/java-io-pipedoutputstream-class-in-java.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Razred Java.io.PipedOutputStream v Javi" 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/misc/">razno </a> </div> <h4 class="text-sm font-bold text-white leading-tight"> <a href="/sl/java-io-pipedoutputstream-class-in-java">Razred Java.io.PipedOutputStream v Javi </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/python-basics/42/how-install-python-linux.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Kako namestiti Python na Linux?" 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/python-basics/">Python-Osnove </a> </div> <h4 class="text-sm font-bold text-white leading-tight"> <a href="/sl/how-install-python-linux">Kako namestiti Python na Linux? </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/amazon/68/trie-data-structure-insert.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Preizkusite strukturo podatkov | Vstavi in ​​poišči" 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/amazon/">Amazon </a> </div> <h4 class="text-sm font-bold text-white leading-tight"> <a href="/sl/trie-data-structure-insert">Preizkusite strukturo podatkov | Vstavi in ​​poišči </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/87/what-is-sociological-imagination.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Kaj je sociološka domišljija? Kako ga lahko uporabite?" 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/blog/">Blog </a> </div> <h4 class="text-sm font-bold text-white leading-tight"> <a href="/sl/what-is-sociological-imagination-1311206">Kaj je sociološka domišljija? Kako ga lahko uporabite? </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/maven-tutorial/49/how-install-maven-windows.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Kako namestiti Maven na Windows" 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/maven-tutorial/">Vadnica Maven </a> </div> <h4 class="text-sm font-bold text-white leading-tight"> <a href="/sl/how-install-maven-windows">Kako namestiti Maven na Windows </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/iw/">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>