Kako ustvariti datoteko index.html?

Ustvarjanje datoteke index.html je temeljni korak pri programiranju HTML in razvoju spletnega mesta. Ta datoteka služi kot hrbtenica osnovne spletne strani HTML. V tem priročniku bomo raziskali štiri enostavne metode za ustvarjanje datoteke index.html, ki je pomembna za ustvarjanje in streženje spletne vsebine.

Datoteka index.html je zelo pomembna, saj je znana kot privzeta datoteka, kar pomeni, da vsakič, ko spletni strežnik išče datoteke, ki bi služile obiskovalcu, ne da bi določil določeno datoteko, išče datoteko index.html.

Kaj je index.html in zakaj se uporablja?

Datoteka index.html deluje kot ciljna stran spletnega mesta. Zagotavlja začetno strukturo in zagotavlja, da so uporabniki samodejno preusmerjeni na to stran, razen če je zahtevana določena datoteka. Poleg tega, ko se učite HTML programiranje , boste ugotovili, da je ustvarjanje datotek index.html običajna praksa v številnih vadnicah. Oglejmo si postopek ustvarjanja datoteke index.html.



Koraki za ustvarjanje datoteke index.html v VScode

Za ustvarjanje datoteke index.html lahko uporabite kateri koli urejevalnik kode, za to metodo, ki jo bomo uporabili mi VScode Ker gre za pogosto uporabljen urejevalnik kode, sledimo spodaj navedenim korakom:

1. korak: Odprite VScode

Najprej odprite Koda Visual Studio , lahko vidite na spodnji sliki, ki sem jo odprl VScode vendar lahko odprete kateri koli urejevalnik kode po vaši izbiri in nato pojdite na Datoteka>Nova datoteka za ustvarjanje nove datoteke:

Odprite VScode.


2. korak: Poimenujte datoteko

Ko izvedete zgornje potrebne korake, boste zdaj videli okno, ki prikazuje, kako želite poimenovati datoteko, za to se boste morali prepričati, da Shrani kot vrsto do Vse datoteke in sledite naslednjemu dogovoru o poimenovanju datoteke:

index.html 

Poimenujte datoteko.

3. korak: Napišite predlogo HTML

Ko uspešno ustvarite datoteko index.html, boste morali ustvariti kodo HTML, saj se morda zavedate, da datoteka HTML sledi ustrezni predlogi za pisanje kode. Spodaj je sintaksa za preprosto datoteko HTML:

V HTML-ju imajo oznake , in različne namene:

  • Oznaka : Znano je, da je to korenski element strani HTML. to je obvezna oznaka, ki pove, kdaj se koda HTML začne in konča.
  • Oznaka : Ta razdelek vsebuje metainformacije o dokumentu, kot so – naslov, kodiranje znakov, povezave do zunanjih virov itd.
  • Oznaka : Ta razdelek vsebuje glavno vsebino dokumenta ali spletne strani, vključno z besedilom, slikami, multimedijskimi elementi in strukturnimi elementi, kot so naslovi, odstavki, seznami itd.

4. korak: Natisnite Hello Word na zaslon

Oglejmo si primer datoteke HTML, ki na zaslon natisne hello world. Za to bomo morali napisati naslednjo kodo v datoteko index.html:

Koraki za zagon datoteke

Zdaj pa poglejmo korake, ki so potrebni za zagon datoteke index.html:

1. korak: Shranite datoteko

Ko napišete zgornjo kodo v VScode, preprosto kliknite na Datoteka>Shrani , sicer pa lahko datoteko shranite tudi z bližnjico CTRL+S.

2. korak: Odprite datoteko

Zdaj, ko ste shranili datoteko, preprosto odprite imenik, v katerem je shranjena datoteka, in jo dvokliknite, da jo odprete, samodejno se bo odprla prek privzetega brskalnika.

Izhod:

Pozdravljen, svet!

primer: Oglejmo si primer, kjer tiskamo Kishan iz techcodeview.com! v zeleni barvi, medtem ko uporablja tudi a tudi oznako.

HTML
      Kishan iz techcodeview.com!title> <style>/* CSS za oblikovanje besedila */ body { background-color: #f0f0f0;  /* Barva ozadja */ } .green-text { barva: zelena;  /* Barva besedila */ } style> head> <body>  <h1>Kishan iz techcodeview.com!h1> body> html> </pre>  </code>  <p dir='ltr'>  <b>  <strong>Izhod: </strong>  </b>  </p>  <p>Izhod. </p>  <p dir='ltr'> <span>Skratka, datoteka index.html igra pomembno vlogo pri programiranju HTML in razvoju spletnih mest. Ne služi le kot privzeta datoteka, ki jo iščejo spletni strežniki, ampak zagotavlja tudi osnovno strukturo za vaše spletno mesto. Če sledite korakom, opisanim v tem priročniku, lahko preprosto ustvarite lastno datoteko index.html in začnete svojo pot v svetu spletnega razvoja. </span> </p>  <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=Kako ustvariti datoteko index.html?&url=https://www.techcodeview.com/sl/how-create-an-index" 
                                   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/how-create-an-index" 
                                   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/how-create-an-index&title=Kako ustvariti datoteko index.html?" 
                                   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><div class="rekl_placeholder"><script type="text/javascript">atOptions = {'key' : 'f2b09f3e7178b263531e10998e9a32fa','format' : 'iframe','height' : 250,'width' : 300,'params' : {}};</script><script type="text/javascript" src="//brunetteerdeplete.com/f2b09f3e7178b263531e10998e9a32fa/invoke.js"></script></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/numpy-random-python" 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/numpy-tutorial/36/numpy-random-python.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="numpy.random() v Pythonu" 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/numpy-random-python">numpy.random() v Pythonu </a>
                              </h4>
                         </div> <div class="group">
                              <a href="/sl/best-cars-world" 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/best/04/best-cars-world.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Najboljši avtomobili na svetu" 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/best-cars-world">Najboljši avtomobili na svetu </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/how-fix-vertical-lines-computer-screen">
						 <img src="https://techcodeview.com/img/geeks-premier-league-2023/38/how-fix-vertical-lines-computer-screen.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Kako popraviti navpične črte na računalniškem zaslonu?" 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-fix-vertical-lines-computer-screen" class="hover:text-tech-500 transition-colors line-clamp-3">Kako popraviti navpične črte na računalniškem zaslonu? </a>
                     </h4>
				 </div>
			 </article><div class="rekl_placeholder"><script type="text/javascript">atOptions = {'key' : 'f2b09f3e7178b263531e10998e9a32fa','format' : 'iframe','height' : 250,'width' : 300,'params' : {}};</script><script type="text/javascript" src="//brunetteerdeplete.com/f2b09f3e7178b263531e10998e9a32fa/invoke.js"></script></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/javascript-return">
						 <img src="https://techcodeview.com/img/javascript-tutorial/93/javascript-return.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Vrnitev JavaScripta" 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/javascript-return" class="hover:text-tech-500 transition-colors line-clamp-3">Vrnitev JavaScripta </a>
                     </h4>
				 </div>
			 </article><div class="rekl_placeholder"><script type="text/javascript">atOptions = {'key' : 'f2b09f3e7178b263531e10998e9a32fa','format' : 'iframe','height' : 250,'width' : 300,'params' : {}};</script><script type="text/javascript" src="//brunetteerdeplete.com/f2b09f3e7178b263531e10998e9a32fa/invoke.js"></script></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/difference-between-min-heap">
						 <img src="https://techcodeview.com/img/min-heap/18/difference-between-min-heap.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Razlika med Min Heap in Max Heap" 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-min-heap" class="hover:text-tech-500 transition-colors line-clamp-3">Razlika med Min Heap in Max Heap </a>
                     </h4>
				 </div>
			 </article><div class="rekl_placeholder"><script type="text/javascript">atOptions = {'key' : 'f2b09f3e7178b263531e10998e9a32fa','format' : 'iframe','height' : 250,'width' : 300,'params' : {}};</script><script type="text/javascript" src="//brunetteerdeplete.com/f2b09f3e7178b263531e10998e9a32fa/invoke.js"></script></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/time-space-complexity-analysis-binary-search-algorithm">
						 <img src="https://techcodeview.com/img/picked/27/time-space-complexity-analysis-binary-search-algorithm.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Časovna in prostorska kompleksna analiza binarnega iskalnega algoritma" 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/time-space-complexity-analysis-binary-search-algorithm" class="hover:text-tech-500 transition-colors line-clamp-3">Časovna in prostorska kompleksna analiza binarnega iskalnega algoritma </a>
                     </h4>
				 </div>
			 </article><div class="rekl_placeholder"><script type="text/javascript">atOptions = {'key' : 'f2b09f3e7178b263531e10998e9a32fa','format' : 'iframe','height' : 250,'width' : 300,'params' : {}};</script><script type="text/javascript" src="//brunetteerdeplete.com/f2b09f3e7178b263531e10998e9a32fa/invoke.js"></script></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/uml-use-case-diagram">
						 <img src="https://techcodeview.com/img/uml-tutorial/11/uml-use-case-diagram.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Diagram primerov uporabe UML" 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/uml-use-case-diagram" class="hover:text-tech-500 transition-colors line-clamp-3">Diagram primerov uporabe UML </a>
                     </h4>
				 </div>
			 </article><div class="rekl_placeholder"><script type="text/javascript">atOptions = {'key' : 'f2b09f3e7178b263531e10998e9a32fa','format' : 'iframe','height' : 250,'width' : 300,'params' : {}};</script><script type="text/javascript" src="//brunetteerdeplete.com/f2b09f3e7178b263531e10998e9a32fa/invoke.js"></script></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/what-is-full-form-love">
						 <img src="https://techcodeview.com/img/category/47/what-is-full-form-love.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Kaj je polna oblika Ljubezni" 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/what-is-full-form-love" class="hover:text-tech-500 transition-colors line-clamp-3">Kaj je polna oblika Ljubezni </a>
                     </h4>
				 </div>
			 </article><div class="rekl_placeholder"><script type="text/javascript">atOptions = {'key' : 'f2b09f3e7178b263531e10998e9a32fa','format' : 'iframe','height' : 250,'width' : 300,'params' : {}};</script><script type="text/javascript" src="//brunetteerdeplete.com/f2b09f3e7178b263531e10998e9a32fa/invoke.js"></script></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/software-testing-tutorial">
						 <img src="https://techcodeview.com/img/software-testing/27/software-testing-tutorial.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Vadnica za testiranje programske opreme" 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/software-testing-tutorial" class="hover:text-tech-500 transition-colors line-clamp-3">Vadnica za testiranje programske opreme </a>
                     </h4>
				 </div>
			 </article><div class="rekl_placeholder"><script type="text/javascript">atOptions = {'key' : 'f2b09f3e7178b263531e10998e9a32fa','format' : 'iframe','height' : 250,'width' : 300,'params' : {}};</script><script type="text/javascript" src="//brunetteerdeplete.com/f2b09f3e7178b263531e10998e9a32fa/invoke.js"></script></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/advantages-disadvantages-vibration">
						 <img src="https://techcodeview.com/img/blog/38/advantages-disadvantages-vibration.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Prednosti in slabosti vibracij" 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/advantages-disadvantages-vibration" class="hover:text-tech-500 transition-colors line-clamp-3">Prednosti in slabosti vibracij </a>
                     </h4>
				 </div>
			 </article><div class="rekl_placeholder"><script type="text/javascript">atOptions = {'key' : 'f2b09f3e7178b263531e10998e9a32fa','format' : 'iframe','height' : 250,'width' : 300,'params' : {}};</script><script type="text/javascript" src="//brunetteerdeplete.com/f2b09f3e7178b263531e10998e9a32fa/invoke.js"></script></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/facts-about-null-java">
						 <img src="https://techcodeview.com/img/java-tutorial/19/facts-about-null-java.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Dejstva o null v Javi" 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/facts-about-null-java" class="hover:text-tech-500 transition-colors line-clamp-3">Dejstva o null v Javi </a>
                     </h4>
				 </div>
			 </article><div class="rekl_placeholder"><script type="text/javascript">atOptions = {'key' : 'f2b09f3e7178b263531e10998e9a32fa','format' : 'iframe','height' : 250,'width' : 300,'params' : {}};</script><script type="text/javascript" src="//brunetteerdeplete.com/f2b09f3e7178b263531e10998e9a32fa/invoke.js"></script></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/true-history-3-hole-punch-1311142">
						 <img src="https://techcodeview.com/img/blog/51/true-history-3-hole-punch.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Resnična zgodovina luknjača za 3 luknje in njegovega izumitelja" 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/true-history-3-hole-punch-1311142" class="hover:text-tech-500 transition-colors line-clamp-3">Resnična zgodovina luknjača za 3 luknje in njegovega izumitelja </a>
                     </h4>
				 </div>
			 </article><div class="rekl_placeholder"><script type="text/javascript">atOptions = {'key' : 'f2b09f3e7178b263531e10998e9a32fa','format' : 'iframe','height' : 250,'width' : 300,'params' : {}};</script><script type="text/javascript" src="//brunetteerdeplete.com/f2b09f3e7178b263531e10998e9a32fa/invoke.js"></script></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/amazon/30/prim-s-algorithm-minimum-spanning-tree.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Primov algoritem za minimalno vpeto drevo (MST)" 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/prim-s-algorithm-minimum-spanning-tree">Primov algoritem za minimalno vpeto drevo (MST) </a> </h4>
					 </div>
				 </article><div class="rekl_placeholder"><script type="text/javascript">atOptions = {'key' : 'f2b09f3e7178b263531e10998e9a32fa','format' : 'iframe','height' : 250,'width' : 300,'params' : {}};</script><script type="text/javascript" src="//brunetteerdeplete.com/f2b09f3e7178b263531e10998e9a32fa/invoke.js"></script></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/gblog/69/cartooning-an-image-using-opencv-python.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Risanje slike s pomočjo OpenCV - Python" 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/gblog/">Gblog </a> </div>
						 <h4 class="text-sm font-bold text-white leading-tight"> <a href="/sl/cartooning-an-image-using-opencv-python">Risanje slike s pomočjo OpenCV - Python </a> </h4>
					 </div>
				 </article><div class="rekl_placeholder"><script type="text/javascript">atOptions = {'key' : 'f2b09f3e7178b263531e10998e9a32fa','format' : 'iframe','height' : 250,'width' : 300,'params' : {}};</script><script type="text/javascript" src="//brunetteerdeplete.com/f2b09f3e7178b263531e10998e9a32fa/invoke.js"></script></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/cloud-computing/81/cloud-computing-tutorial.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Vadnica računalništva v oblaku" 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/cloud-computing/">Računalništvo V Oblaku </a> </div>
						 <h4 class="text-sm font-bold text-white leading-tight"> <a href="/sl/cloud-computing-tutorial">Vadnica računalništva v oblaku </a> </h4>
					 </div>
				 </article><div class="rekl_placeholder"><script type="text/javascript">atOptions = {'key' : 'f2b09f3e7178b263531e10998e9a32fa','format' : 'iframe','height' : 250,'width' : 300,'params' : {}};</script><script type="text/javascript" src="//brunetteerdeplete.com/f2b09f3e7178b263531e10998e9a32fa/invoke.js"></script></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/42/how-get-5-ap-biology-exam.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Kako dobiti 5 na izpitu iz biologije AP: 15 nasvetov in strategij" 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/how-get-5-ap-biology-exam-131606">Kako dobiti 5 na izpitu iz biologije AP: 15 nasvetov in strategij </a> </h4>
					 </div>
				 </article><div class="rekl_placeholder"><script type="text/javascript">atOptions = {'key' : 'f2b09f3e7178b263531e10998e9a32fa','format' : 'iframe','height' : 250,'width' : 300,'params' : {}};</script><script type="text/javascript" src="//brunetteerdeplete.com/f2b09f3e7178b263531e10998e9a32fa/invoke.js"></script></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/get-informed/62/explainer-what-is-whatsapp.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Pojasnilo: Kaj je WhatsApp?" 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/get-informed/">Informirajte Se </a> </div>
						 <h4 class="text-sm font-bold text-white leading-tight"> <a href="/sl/explainer-what-is-whatsapp-24210">Pojasnilo: Kaj je WhatsApp? </a> </h4>
					 </div>
				 </article><div class="rekl_placeholder"><script type="text/javascript">atOptions = {'key' : 'f2b09f3e7178b263531e10998e9a32fa','format' : 'iframe','height' : 250,'width' : 300,'params' : {}};</script><script type="text/javascript" src="//brunetteerdeplete.com/f2b09f3e7178b263531e10998e9a32fa/invoke.js"></script></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/78/9-literary-elements-youll-find-every-story.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="9 literarnih elementov, ki jih boste našli v vsaki zgodbi" 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/9-literary-elements-youll-find-every-story-131138">9 literarnih elementov, ki jih boste našli v vsaki zgodbi </a> </h4>
					 </div>
				 </article><div class="rekl_placeholder"><script type="text/javascript">atOptions = {'key' : 'f2b09f3e7178b263531e10998e9a32fa','format' : 'iframe','height' : 250,'width' : 300,'params' : {}};</script><script type="text/javascript" src="//brunetteerdeplete.com/f2b09f3e7178b263531e10998e9a32fa/invoke.js"></script></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/lt/">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>