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>

                <!-- 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/inheritance-in-c" 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/misc/45/inheritance-in-c.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Dedovanje v C++" 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/inheritance-in-c">Dedovanje v C++ </a>
                              </h4>
                         </div> <div class="group">
                              <a href="/sl/linear-regression" 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/ai-ml-ds-with-python/30/linear-regression.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Linearna regresija (implementacija Python)" 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/linear-regression">Linearna regresija (implementacija Python) </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/java-socket-programming">
						 <img src="https://techcodeview.com/img/java-networking/83/java-socket-programming.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Programiranje Java Socket" 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-socket-programming" class="hover:text-tech-500 transition-colors line-clamp-3">Programiranje Java Socket </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/cloud-computing-architecture">
						 <img src="https://techcodeview.com/img/cloud-computing/28/cloud-computing-architecture.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Arhitektura računalništva v oblaku" 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/cloud-computing-architecture" class="hover:text-tech-500 transition-colors line-clamp-3">Arhitektura računalništva v oblaku </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/what-is-core-java">
						 <img src="https://techcodeview.com/img/java-tutorial/13/what-is-core-java.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Kaj je Core 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/what-is-core-java" class="hover:text-tech-500 transition-colors line-clamp-3">Kaj je Core 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/basic-shell-commands-linux">
						 <img src="https://techcodeview.com/img/it-problems-solutions/49/basic-shell-commands-linux.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Osnovni ukazi lupine v Linuxu" 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/basic-shell-commands-linux" class="hover:text-tech-500 transition-colors line-clamp-3">Osnovni ukazi lupine v Linuxu </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/context-switching-os">
						 <img src="https://techcodeview.com/img/operating-system/89/context-switching-os.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Preklapljanje konteksta v OS (operacijski sistem)" 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/context-switching-os" class="hover:text-tech-500 transition-colors line-clamp-3">Preklapljanje konteksta v OS (operacijski sistem) </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-split-strings-c">
						 <img src="https://techcodeview.com/img/c-tutorial/97/how-split-strings-c.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Kako razdeliti nize 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/how-split-strings-c" class="hover:text-tech-500 transition-colors line-clamp-3">Kako razdeliti nize 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/xhtml-introduction">
						 <img src="https://techcodeview.com/img/html-xml/79/xhtml-introduction.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Uvod v XHTML" 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/xhtml-introduction" class="hover:text-tech-500 transition-colors line-clamp-3">Uvod v XHTML </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/60-easy-oxymoron-examples-analysis-131154">
						 <img src="https://techcodeview.com/img/blog/80/60-easy-oxymoron-examples-analysis.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="60 preprostih primerov oksimorona + analiza" 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/60-easy-oxymoron-examples-analysis-131154" class="hover:text-tech-500 transition-colors line-clamp-3">60 preprostih primerov oksimorona + analiza </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/complex-numbers">
						 <img src="https://techcodeview.com/img/maths-class-11/16/complex-numbers.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Kompleksna števila" 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/complex-numbers" class="hover:text-tech-500 transition-colors line-clamp-3">Kompleksna števila </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/what-is-10-11th-power">
						 <img src="https://techcodeview.com/img/maths/75/what-is-10-11th-power.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Koliko je 10 na 11. potenco?" 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-10-11th-power" class="hover:text-tech-500 transition-colors line-clamp-3">Koliko je 10 na 11. potenco? </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/computer/33/how-go-browser-settings.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Kako priti do nastavitev brskalnika?" 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/computer/">Računalnik </a> </div>
						 <h4 class="text-sm font-bold text-white leading-tight"> <a href="/sl/how-go-browser-settings">Kako priti do nastavitev brskalnika? </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/differences/03/difference-between-mean.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Razlika med povprečjem in povprečjem" 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/differences/">Razlike </a> </div>
						 <h4 class="text-sm font-bold text-white leading-tight"> <a href="/sl/difference-between-mean">Razlika med povprečjem in povprečjem </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/artificial-intelligence/84/forward-chaining-backward-chaining-ai.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Veriženje naprej in veriženje nazaj v AI" 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/artificial-intelligence/">Umetna Inteligenca </a> </div>
						 <h4 class="text-sm font-bold text-white leading-tight"> <a href="/sl/forward-chaining-backward-chaining-ai">Veriženje naprej in veriženje nazaj v AI </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/get-informed/68/explained-what-is-chatstep.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Pojasnjeno: Kaj je ChatStep?" 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/explained-what-is-chatstep-24274">Pojasnjeno: Kaj je ChatStep? </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/ai-ml-ds-with-python/80/precision-recall-curve-ml.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Krivulja natančnosti priklica | ML" 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/ai-ml-ds-with-python/">Ai-Ml-Ds S Pythonom </a> </div>
						 <h4 class="text-sm font-bold text-white leading-tight"> <a href="/sl/precision-recall-curve-ml">Krivulja natančnosti priklica | ML </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/css-tutorial/61/css-tricks-flexbox.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Triki CSS za Flexbox" 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/css-tutorial/">Vadnica Za Css </a> </div>
						 <h4 class="text-sm font-bold text-white leading-tight"> <a href="/sl/css-tricks-flexbox">Triki CSS za Flexbox </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>