ÚVOD DO XHTML - TECHCODEVIEW.COM

XHTML alebo EXtensible HyperText Markup Language je mix HTML a XML, veľmi podobný HTML ale prísnejšie. Je to ako kniha pravidiel na vytváranie webových stránok, ktorým prehliadače ľahko porozumejú. Na rozdiel od HTML musíte byť opatrní a presne dodržiavať pravidlá. Väčšina prehliadačov to podporuje. Predstavte si to ako presnejší spôsob písania webového kódu.

Obsah

História
Prechodné DTD
Prísne DTD
Sada rámov DTD
Prečo používať XHTML?
Výhody XHTML
Rozdiel medzi HTML a XHTML

História

Bol vyvinutý konzorciom World Wide Web Consortium (W3C) a pomáha webovým vývojárom pri prechode z HTML na XML. Pomocou XHTML môžu vývojári vstúpiť do sveta XML so všetkými jeho funkciami a zároveň zabezpečiť spätnú a budúcu kompatibilitu obsahu. Rodina XHTML zahŕňa tri typy dokumentov; prvou je XHTML 1.0, ktorá bola odporúčaná W3C 26. januára 2000. Druhá je XHTML 1.1, ktorú W3C odporučila 31. mája 2001.

Tretím je XHTML5, štandard používaný na vývoj prispôsobenia XML špecifikácie HTML5. Dokument XHTML musí mať deklaráciu XHTML.

Prvky XHTML:

Prvok XHTML	Popis
`>`	Používa sa na deklarovanie definície typu dokumentu (DTD), ktorá určuje pravidlá pre značkovací jazyk a zabezpečuje správne vykresľovanie v prehliadačoch.
`>`	Uzatvára celý dokument HTML alebo XHTML, ktorý slúži ako koreňový prvok.
`>`	Obsahuje metainformácie o dokumente, ako je názov, znaková sada, prepojené šablóny so štýlmi a ďalšie dôležité prvky.
`>`	Vnorený do sekcie head určuje názov dokumentu, ktorý sa zobrazuje v záhlaví alebo na karte prehliadača.
`>`	Uzatvára obsah webovej stránky vrátane textu, obrázkov, odkazov a iných prvkov HTML. Predstavuje viditeľnú časť dokumentu zobrazenú v prehliadači.

Pri vytváraní XHTML webovej stránky je potrebné zahrnúť deklaráciu DTD (Document Type Definition). Existujú tri typy DTD, o ktorých sa hovorí nižšie:

Prechodné DTD:

Podporujú ho staršie prehliadače, ktoré nemajú vstavanú podporu kaskádových štýlov. V značke tela je uzavretých niekoľko atribútov, ktoré nie sú povolené v striktnej DTD.

Syntax:

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

Príklad: V tomto príklade uvidíme kód na písanie XHTML dokumentu s príkladom.

html

xml version='1.0' encoding='UTF-8'?>        Prechodné DTD XHTMLtitle> hlava> <body bgcolor='#dae1ed'>   <div>font-weight:bold;text-align:center;  margin-bottom:-25px;'>techcodeview.comdiv> <p style='text-align:center;font-size:20px;'>Portál počítačovej vedy <p style='text-align:center;font-size:20px;'>Možnosť výberu mesiaca: <select name='month'>   <option selected='selected'>Možnosť januára> <option>Februárová možnosť> <option>Marchoption> <option>Apriloption> <option>Mayoption> <option>Možnosť júna> <option>júlová možnosť> <option>Augusyopcia> <option>Možnosť septembra> <option>Októbrová možnosť> <option>Novembrová možnosť> <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>Výkon: </strong>  </b>  </p>  <p> <img src='//techcodeview.com/img/html-xml/79/xhtml-introduction.webp' alt='prechodné dtd xhtml'> <span>  </span> </p>  <h2 id='strict-dtd'>  <b>  <strong>Prísne DTD: </strong>  </b>  <span>  </span> </h2>  <p dir='ltr'> <span>Striktné DTD sa používa, keď stránka XHTML obsahuje iba značkovací jazyk. Strict DTD sa používa spolu s kaskádovými štýlmi, pretože tento atribút neumožňuje vlastnosť CSS v značke body. </span> </p>  <h3>  <b>  <strong>Syntax: </strong>  </b>  </h3>  <pre> PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 'DTD/xhtml1-strict.dtd'> </pre>  <p dir='ltr'>  <b>  <strong>Príklad 2: </strong>  </b>  <span>V tomto príklade uvidíme kód na písanie XHTML dokumentu s príkladom pre striktné 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>Prísne DTD XHTMLtitle> head> <body>   <div>font-weight:bold;text-align:center;  margin-bottom:-25px;'>techcodeview.comdiv> <p style='text-align:center;font-size:20px;'>Portál počítačovej vedy <p style='text-align:center;font-size:20px;'>Možnosť výberu mesiaca: <select name='month'>   <option selected='selected'>Možnosť januára> <option>Februárová možnosť> <option>Marchoption> <option>Apriloption> <option>Mayoption> <option>Možnosť júna> <option>júlová možnosť> <option>Augusyopcia> <option>Možnosť septembra> <option>Októbrová možnosť> <option>Novembrová možnosť> <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>Výkon: </strong>  </b>  </p>  <p> <span>  </span> <img src='//techcodeview.com/img/html-xml/79/xhtml-introduction-2.webp' alt='prísne dtd xhtml'> <span>  </span> </p>  <h2 id='frameset-dtd'>  <b>  <strong>Sada rámov DTD: </strong>  </b>  <span>  </span> </h2>  <p dir='ltr'> <span>Sada rámcov DTD sa používa, keď stránka XHTML obsahuje snímky. Toto DTD je identické s HTML 4.01 Transitional DTD s výnimkou modelu obsahu prvku HTML. </span> </p>  <h3>  <b>  <strong>Syntax: </strong>  </b>  </h3>  <pre> PUBLIC '-//W3C//DTD XHTML 1.0 Frameset//EN' 'DTD/xhtml1-frameset.dtd'> </pre>  <p dir='ltr'>  <b>  <strong>Príklad 2: </strong>  </b>  <span>V tomto príklade uvidíme kód na písanie XHTML dokumentu s príkladom pre frameset 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>Sada rámov DTD XHTMLtitle> head> <frameset cols='30%, 20%, *'>   <frameset rows='40%, 30%, *'>   <frame src='gfg.html' />   <frame src='gfg1.html' />   <frame src='geeks.html' />sada rámov> <frameset rows='40%, 60%'>   <frame src='g4g.html' />   <frame src='g4g1.html' />sada rámov> <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>Výkon: </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>Prečo používať XHTML? </strong>  </b>  </h2>  <ul>  <li value='1'> <span>Dokumenty XHTML sú overené štandardnými nástrojmi XML. </span> </li>  <li value='2'> <span>Je ľahké udržiavať, konvertovať a upravovať dokument z dlhodobého hľadiska. </span> </li>  <li value='3'> <span>Používa sa na definovanie štandardu kvality webových stránok. </span> </li>  <li value='4'> <span>XHTML je oficiálny štandard W3C, vaša webová stránka sa stáva kompatibilnejšou a presnejšou s mnohými prehliadačmi. </span> </li>  </ul>  <h2 id='benefits-of-xhtml'>  <b>  <strong>Výhody XHTML: </strong>  </b>  </h2>  <ul>  <li value='1'> <span>Všetky značky XHTML musia mať uzatváracie značky a sú správne vnorené. Tým sa vygeneruje čistejší kód. </span> </li>  <li value='2'> <span>Dokumenty XHTML sú štíhle, čo znamená, že využívajú menšiu šírku pásma. To znižuje náklady, najmä ak má váš web 1000 stránok. </span> </li>  <li value='3'> <span>Dokumenty XHTML sú dobre naformátované a dobre tvarované a možno ich jednoducho preniesť do bezdrôtových zariadení, čítačiek Braillovho písma a iných špecializovaných webových prostredí. </span> </li>  <li value='4'> <span>Všetky novinky budú v XML (ktorého XHTML je aplikácia). </span> </li>  <li value='5'> <span>XHTML spolupracuje s CSS na vytváraní webových stránok, ktoré možno ľahko aktualizovať. </span> </li>  </ul>  <h2 id='difference-between-html-and-xhtml'>  <b>  <strong>Rozdiel medzi HTML a 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 alebo HyperText Markup Language je hlavný značkovací jazyk na vytváranie webových stránok </span> </td>  <td> <span>XHTML (Extensible HyperText Markup Language) je rodina značkovacích jazykov XML, ktoré odrážajú alebo rozširujú verzie široko používaného jazyka HTML (Hypertext Markup Language) </span> </td>  </tr>  <tr>  <td> <span>Flexibilný rámec vyžadujúci zhovievavý analyzátor špecifický pre HTML </span> </td>  <td> <span>Reštriktívna podmnožina XML, ktorú je potrebné analyzovať pomocou štandardných analyzátorov XML </span> </td>  </tr>  <tr>  <td> <span>Navrhol Tim Berners-Lee v roku 1987 </span> </td>  <td> <span>Odporúčanie konzorcia World Wide Web z roku 2000. </span> </td>  </tr>  <tr>  <td> <span>Aplikácia štandardného zovšeobecneného značkovacieho jazyka (SGML). </span> </td>  <td> <span>Aplikácia XML </span> </td>  </tr>  <tr>  <td> <span>Rozšírené z SGML. </span> </td>  <td> <span>Rozšírené z 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>
                                Zdieľať                              </h4>
                             
                              <div class="flex flex-wrap justify-center gap-3">
                                 <!-- Twitter -->
                                 <a href="https://twitter.com/intent/tweet?text=Úvod do XHTML&url=https://www.techcodeview.com/sk/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/sk/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/sk/xhtml-introduction&title=Úvod do 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">
                        Mohlo By Sa Vám Páčiť                     </h3>
                     <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                         <div class="group">
                              <a href="/sk/gabapentin-alternatives" 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/alternatives/15/gabapentin-alternatives.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Gabapentínové alternatívy" 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="/sk/gabapentin-alternatives">Gabapentínové alternatívy </a>
                              </h4>
                         </div> <div class="group">
                              <a href="/sk/what-does-dragonfly-symbolize-131732" 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/69/what-does-dragonfly-symbolize.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Čo symbolizuje vážka? Význam rozbalenia vážky" 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="/sk/what-does-dragonfly-symbolize-131732">Čo symbolizuje vážka? Význam rozbalenia vážky </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>
                Najlepšie Články             </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="/sk/latex-matrix">
						 <img src="https://techcodeview.com/img/latex-tutorial/79/latex-matrix.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Latexová matrica" 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="/sk/latex-matrix" class="hover:text-tech-500 transition-colors line-clamp-3">Latexová matrica </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="/sk/7-best-sites-free-web-hosting">
						 <img src="https://techcodeview.com/img/listicles/95/7-best-sites-free-web-hosting.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="7 najlepších stránok pre bezplatný webhosting" 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="/sk/7-best-sites-free-web-hosting" class="hover:text-tech-500 transition-colors line-clamp-3">7 najlepších stránok pre bezplatný webhosting </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="/sk/system-design-tutorial">
						 <img src="https://techcodeview.com/img/tutorials/72/system-design-tutorial.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Návod na návrh systému" 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="/sk/system-design-tutorial" class="hover:text-tech-500 transition-colors line-clamp-3">Návod na návrh systému </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="/sk/how-wrap-text-around-an-image-using-html">
						 <img src="https://techcodeview.com/img/css-misc/48/how-wrap-text-around-an-image-using-html.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Ako zabaliť text okolo obrázka pomocou HTML a 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="/sk/how-wrap-text-around-an-image-using-html" class="hover:text-tech-500 transition-colors line-clamp-3">Ako zabaliť text okolo obrázka pomocou HTML a 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="/sk/advantages-disadvantages-bluetooth">
						 <img src="https://techcodeview.com/img/blog/15/advantages-disadvantages-bluetooth.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Výhody a nevýhody Bluetooth" 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="/sk/advantages-disadvantages-bluetooth" class="hover:text-tech-500 transition-colors line-clamp-3">Výhody a nevýhody Bluetooth </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="/sk/javascript-create-element">
						 <img src="https://techcodeview.com/img/javascript-tutorial/22/javascript-create-element.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Vytvorenie prvku JavaScript" 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="/sk/javascript-create-element" class="hover:text-tech-500 transition-colors line-clamp-3">Vytvorenie prvku JavaScript </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="/sk/python-exercise-with-practice-questions">
						 <img src="https://techcodeview.com/img/it-problems-solutions/71/python-exercise-with-practice-questions.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Cvičenie Python s praktickými otázkami a riešeniami" 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="/sk/python-exercise-with-practice-questions" class="hover:text-tech-500 transition-colors line-clamp-3">Cvičenie Python s praktickými otázkami a riešeniami </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="/sk/defect-bug-tracking-tool">
						 <img src="https://techcodeview.com/img/software-testing/08/defect-bug-tracking-tool.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Nástroj na sledovanie defektov/chyb" 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="/sk/defect-bug-tracking-tool" class="hover:text-tech-500 transition-colors line-clamp-3">Nástroj na sledovanie defektov/chyb </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="/sk/similar-triangles">
						 <img src="https://techcodeview.com/img/maths-class-10/11/similar-triangles.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Podobné trojuholníky" 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="/sk/similar-triangles" class="hover:text-tech-500 transition-colors line-clamp-3">Podobné trojuholníky </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="/sk/net-framework">
						 <img src="https://techcodeview.com/img/net-framework/56/net-framework.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt=".Internetová sieť" 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="/sk/net-framework" class="hover:text-tech-500 transition-colors line-clamp-3">.Internetová sieť </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">Kategórie </h2>
		 </div>
		 <div class="flex flex-wrap gap-2">
             <a href="/sk/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="/sk/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">
                Konverzia Java
             </a> <a href="/sk/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="/sk/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">
                Kolekcie Java
             </a> <a href="/sk/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">
                Rozdiely
             </a> <a href="/sk/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 Reťazec
             </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">Zaujímavé Články </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/blog/33/these-are-hardest-ap-classes.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Toto sú pre vás najťažšie AP triedy a testy" 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="/sk/blog/">Blog </a> </div>
						 <h4 class="text-sm font-bold text-white leading-tight"> <a href="/sk/these-are-hardest-ap-classes-131246">Toto sú pre vás najťažšie AP triedy a testy </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/89/15-best-merit-scholarships.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="15 najlepších štipendií za zásluhy pre vysokoškolákov" 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="/sk/blog/">Blog </a> </div>
						 <h4 class="text-sm font-bold text-white leading-tight"> <a href="/sk/15-best-merit-scholarships-131416">15 najlepších štipendií za zásluhy pre vysokoškolákov </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/tree/91/largest-number-in-bst-which-is-less-than-or-equal-to-k.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Najväčšie číslo v BST, ktoré je menšie alebo rovné k" 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="/sk/tree/">Strom </a> </div>
						 <h4 class="text-sm font-bold text-white leading-tight"> <a href="/sk/largest-number-in-bst-which-is-less-than-or-equal-to-k">Najväčšie číslo v BST, ktoré je menšie alebo rovné k </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/45/7-aquarius-traits-you-need-know.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="7 znakov Vodnára, ktoré potrebujete vedieť" 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="/sk/blog/">Blog </a> </div>
						 <h4 class="text-sm font-bold text-white leading-tight"> <a href="/sk/7-aquarius-traits-you-need-know-131196">7 znakov Vodnára, ktoré potrebujete vedieť </a> </h4>
					 </div>
				 </article>
				 <!-- /ARTICLE --> <!-- ARTICLE -->
				 <article class="relative aspect-video rounded-lg overflow-hidden group mb-2">
					 <div class="absolute inset-0">
						 <img src="https://techcodeview.com/img/c-language/53/socket-programming-in-c.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Programovanie soketov v C" 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="/sk/c-language/">Jazyk C </a> </div>
						 <h4 class="text-sm font-bold text-white leading-tight"> <a href="/sk/socket-programming-in-c">Programovanie soketov v C </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/java-object-class/27/java-static-keyword.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Java statické kľúčové slovo" 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="/sk/java-object-class/">Trieda Objektov Java </a> </div>
						 <h4 class="text-sm font-bold text-white leading-tight"> <a href="/sk/java-static-keyword">Java statické kľúčové slovo </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 Všetky Práva Vyhradené | 
                 <a href="//www.techcodeview.com/sr/">techcodeview.com </a> | 
                 <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Odmietnutie Zodpovednosti </a> | 
                 <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">O Nás </a> | 
                 <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Zásady Ochrany Osobných Údajov </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>