INTRODUCCIÓ A XHTML - TECHCODEVIEW.COM

XHTML o Llenguatge de marcat d'hipertext extensible és una barreja d'HTML i XML, molt semblant a HTML però més estricte. És com un llibre de regles per crear pàgines web que els navegadors entenguin fàcilment. A diferència d'HTML, cal anar amb compte i seguir les regles exactament. La majoria de navegadors ho admeten. Penseu-hi com una manera més precisa d'escriure codi web.

Taula de contingut

Història
DTD de transició
DTD estricte
Frameset DTD
Per què utilitzar XHTML?
Beneficis de XHTML
Diferència entre HTML i XHTML

Història

Va ser desenvolupat pel World Wide Web Consortium (W3C) i ajuda els desenvolupadors web a passar d'HTML a XML. Amb XHTML, els desenvolupadors poden entrar al món XML amb totes les seves característiques, alhora que garanteixen la compatibilitat enrere i futura del contingut. La família XHTML inclou tres tipus de document; el primer és XHTML 1.0, que va ser recomanat pel W3C el 26 de gener de 2000. El segon és XHTML 1.1, que va ser recomanat pel W3C el 31 de maig de 2001.

El tercer és XHTML5, un estàndard utilitzat per desenvolupar una adaptació XML de l'especificació HTML5. Un document XHTML ha de tenir una declaració XHTML.

Elements de XHTML:

Element XHTML	Descripció
`>`	S'utilitza per declarar la definició del tipus de document (DTD), especificant les regles del llenguatge de marques, garantint la representació correcta als navegadors.
`>`	Inclou tot el document HTML o XHTML, que serveix com a element arrel.
`>`	Conté metainformació sobre el document, com ara el títol, el conjunt de caràcters, els fulls d'estil enllaçats i altres elements essencials.
`>`	Imbricat dins de la secció de capçalera, especifica el títol del document, que es mostra a la barra o pestanya de títol del navegador.
`>`	Inclou el contingut de la pàgina web, incloent text, imatges, enllaços i altres elements HTML. Representa la part visible del document que es mostra al navegador.

Quan es crea una pàgina web XHTML, és necessari incloure una declaració DTD (Document Type Definition). Hi ha tres tipus de DTD que es discuteixen a continuació:

DTD de transició:

És compatible amb els navegadors més antics que no tenen suports integrats per a fulls d'estil en cascada. A l'etiqueta del cos s'inclouen diversos atributs que no es permeten en un DTD estricte.

Sintaxi:

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

Exemple: En aquest exemple veurem el codi per escriure un document XHTML amb un exemple.

html

xml version='1.0' encoding='UTF-8'?>        DTD de transició XHTMLtitle> cap> <body bgcolor='#dae1ed'>   <div>font-weight:bold;text-align:center;  margin-bottom:-25px;'>techcodeview.comdiv> <p style='text-align:center;font-size:20px;'>Un portal informàtic p> <p style='text-align:center;font-size:20px;'>Opció per triar mes: <select name='month'>   <option selected='selected'>Opció de gener> <option>opció febrer> <option>opció de març> <option>Opció d'abril> <option>Opció de maig> <option>Opció de juny> <option>opció de juliol> <option>Augusyoption> <option>Opció setembre> <option>Opció d'octubre> <option>Opció de novembre> <option>Opció de desembre> seleccionar> p> cos> 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>Sortida: </strong>  </b>  </p>  <p> <img src='//techcodeview.com/img/html-xml/79/xhtml-introduction.webp' alt='transició dtd xhtml'> <span>  </span> </p>  <h2 id='strict-dtd'>  <b>  <strong>DTD estricte: </strong>  </b>  <span>  </span> </h2>  <p dir='ltr'> <span>El DTD estricte s'utilitza quan la pàgina XHTML només conté llenguatge de marques. El DTD estricte s'utilitza juntament amb els fulls d'estil en cascada, perquè aquest atribut no permet la propietat CSS a l'etiqueta del cos. </span> </p>  <h3>  <b>  <strong>Sintaxi: </strong>  </b>  </h3>  <pre> PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 'DTD/xhtml1-strict.dtd'> </pre>  <p dir='ltr'>  <b>  <strong>Exemple 2: </strong>  </b>  <span>En aquest exemple veurem el codi per escriure un document XHTML amb un exemple de DTD estricte. </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>Estricte DTD XHTMLtitle> cap> <body>   <div>font-weight:bold;text-align:center;  margin-bottom:-25px;'>techcodeview.comdiv> <p style='text-align:center;font-size:20px;'>Un portal informàtic p> <p style='text-align:center;font-size:20px;'>Opció per triar mes: <select name='month'>   <option selected='selected'>Opció de gener> <option>opció febrer> <option>opció de març> <option>Opció d'abril> <option>Opció de maig> <option>Opció de juny> <option>opció de juliol> <option>Augusyoption> <option>Opció setembre> <option>Opció d'octubre> <option>Opció de novembre> <option>Opció de desembre> seleccionar> p> cos> 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>Sortida: </strong>  </b>  </p>  <p> <span>  </span> <img src='//techcodeview.com/img/html-xml/79/xhtml-introduction-2.webp' alt='estricte dtd xhtml'> <span>  </span> </p>  <h2 id='frameset-dtd'>  <b>  <strong>Frameset DTD: </strong>  </b>  <span>  </span> </h2>  <p dir='ltr'> <span>El conjunt de marcs DTD s'utilitza quan la pàgina XHTML conté marcs. Aquesta DTD és idèntica a la DTD de transició HTML 4.01 excepte pel model de contingut de l'element HTML. </span> </p>  <h3>  <b>  <strong>Sintaxi: </strong>  </b>  </h3>  <pre> PUBLIC '-//W3C//DTD XHTML 1.0 Frameset//EN' 'DTD/xhtml1-frameset.dtd'> </pre>  <p dir='ltr'>  <b>  <strong>Exemple 2: </strong>  </b>  <span>En aquest exemple veurem el codi per escriure un document XHTML amb un exemple per a DTD de frameset. </span> </p>  <h2>html </h2>  <i id='copy-code-button' title='Copy Code'> </i>  <p> </p>  <p>  <i id='run-and-edit-button' title='Edit Code' lang='xml'> </i>  <br>   </p>  <p>  <i id='run-code-button' lang='xml' title='Run Code and See Output'> </i>  </p>  <p>  <i id='generate-url-and-run-button' title='Run Code and Generate IDE URL' lang='xml'> </i>  <br>  <i title='Dark Mode'> </i>  <br>  <i id='edit-on-ide-button' title='Edit on IDE' lang='xml'> </i>  </p>  <p> </p>  <table class="table">  <tbody>  <tr>  <td>  <code>xml version='1.0' encoding='UTF-8'?>http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd '> <html xmlns=' http://www.w3.org/1999/xhtml '  xml:lang='en' lang='en'>  <head>   <title>Frameset DTD XHTMLtitle> cap> <frameset cols='30%, 20%, *'>   <frameset rows='40%, 30%, *'>   <frame src='gfg.html' />   <frame src='gfg1.html' />   <frame src='geeks.html' />conjunt de marcs> <frameset rows='40%, 60%'>   <frame src='g4g.html' />   <frame src='g4g1.html' />conjunt de marcs> <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>Sortida: </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>Per què utilitzar XHTML? </strong>  </b>  </h2>  <ul>  <li value='1'> <span>Els documents XHTML es validen amb eines XML estàndard. </span> </li>  <li value='2'> <span>És fàcil de mantenir, convertir i editar un document a llarg termini. </span> </li>  <li value='3'> <span>S'utilitza per definir l'estàndard de qualitat de les pàgines web. </span> </li>  <li value='4'> <span>XHTML és un estàndard oficial del W3C, el vostre lloc web es fa més compatible i precís amb molts navegadors. </span> </li>  </ul>  <h2 id='benefits-of-xhtml'>  <b>  <strong>Beneficis de XHTML: </strong>  </b>  </h2>  <ul>  <li value='1'> <span>Totes les etiquetes XHTML han de tenir etiquetes de tancament i estan imbricades correctament. Això genera un codi més net. </span> </li>  <li value='2'> <span>Els documents XHTML són lleugers, la qual cosa significa que utilitzen menys amplada de banda. Això redueix el cost, sobretot si el vostre lloc web té mil pàgines. </span> </li>  <li value='3'> <span>Els documents XHTML estan ben formatats, ben formats i es poden transportar fàcilment a dispositius sense fil, lectors Braille i altres entorns web especialitzats. </span> </li>  <li value='4'> <span>Tots els nous desenvolupaments seran en XML (del qual XHTML és una aplicació). </span> </li>  <li value='5'> <span>XHTML treballa en associació amb CSS per crear pàgines web que es poden actualitzar fàcilment. </span> </li>  </ul>  <h2 id='difference-between-html-and-xhtml'>  <b>  <strong>Diferència entre HTML i 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 o HyperText Markup Language és el principal llenguatge de marcat per crear pàgines web </span> </td>  <td> <span>XHTML (Extensible HyperText Markup Language) és una família de llenguatges de marcat XML que reflecteixen o amplien versions del llenguatge de marcat d'hipertext (HTML) molt utilitzat. </span> </td>  </tr>  <tr>  <td> <span>Marc flexible que requereix un analitzador específic d'HTML </span> </td>  <td> <span>Subconjunt restrictiu d'XML que s'ha d'analitzar amb analitzadors XML estàndard </span> </td>  </tr>  <tr>  <td> <span>Proposat per Tim Berners-Lee el 1987 </span> </td>  <td> <span>Recomanació del World Wide Web Consortium l'any 2000. </span> </td>  </tr>  <tr>  <td> <span>Aplicació del llenguatge de marcat generalitzat estàndard (SGML). </span> </td>  <td> <span>Aplicació de XML </span> </td>  </tr>  <tr>  <td> <span>Ampliat des de SGML. </span> </td>  <td> <span>Ampliat des de 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>
                                Comparteix                              </h4>
                             
                              <div class="flex flex-wrap justify-center gap-3">
                                 <!-- Twitter -->
                                 <a href="https://twitter.com/intent/tweet?text=Introducció a XHTML&url=https://www.techcodeview.com/ca/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/ca/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/ca/xhtml-introduction&title=Introducció a 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">
                        Potser T'Agradarà                     </h3>
                     <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                         <div class="group">
                              <a href="/ca/how-install-tkinter-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/python-tutorial/87/how-install-tkinter-python.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Com instal·lar Tkinter a 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="/ca/how-install-tkinter-python">Com instal·lar Tkinter a Python </a>
                              </h4>
                         </div> <div class="group">
                              <a href="/ca/what-is-minimum-spanning-tree" 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/mst/91/what-is-minimum-spanning-tree.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Què és el Minimum Spanning Tree (MST)" 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="/ca/what-is-minimum-spanning-tree">Què és el Minimum Spanning Tree (MST) </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>
                Articles Més Populars             </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="/ca/decimal-binary-converter">
						 <img src="https://techcodeview.com/img/math-concepts/43/decimal-binary-converter.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Convertidor decimal a binari" 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="/ca/decimal-binary-converter" class="hover:text-tech-500 transition-colors line-clamp-3">Convertidor decimal a binari </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="/ca/a2-b2-formula">
						 <img src="https://techcodeview.com/img/maths-class-9/13/a2-b2-formula.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="a2 – b2 Fórmula" 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="/ca/a2-b2-formula" class="hover:text-tech-500 transition-colors line-clamp-3">a2 – b2 Fórmula </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="/ca/how-reverse-number-java">
						 <img src="https://techcodeview.com/img/java-tutorial/65/how-reverse-number-java.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Com invertir un nombre a 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="/ca/how-reverse-number-java" class="hover:text-tech-500 transition-colors line-clamp-3">Com invertir un nombre a 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="/ca/line-symmetry">
						 <img src="https://techcodeview.com/img/geeks-premier-league-2023/64/line-symmetry.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Línia de simetria" 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="/ca/line-symmetry" class="hover:text-tech-500 transition-colors line-clamp-3">Línia de simetria </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="/ca/maximum-element-between-two-nodes-of-bst">
						 <img src="https://techcodeview.com/img/misc/66/maximum-element-between-two-nodes-of-bst.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Element màxim entre dos nodes de BST" 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="/ca/maximum-element-between-two-nodes-of-bst" class="hover:text-tech-500 transition-colors line-clamp-3">Element màxim entre dos nodes de BST </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="/ca/best-ap-chemistry-notes-study-with-1311558">
						 <img src="https://techcodeview.com/img/blog/59/best-ap-chemistry-notes-study-with.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Les millors notes de química AP per estudiar" 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="/ca/best-ap-chemistry-notes-study-with-1311558" class="hover:text-tech-500 transition-colors line-clamp-3">Les millors notes de química AP per estudiar </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="/ca/spring-boot-customize-whitelabel-error-page">
						 <img src="https://techcodeview.com/img/geeks-premier-league-2023/24/spring-boot-customize-whitelabel-error-page.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Spring Boot: personalitza la pàgina d'error de l'etiqueta blanca" 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="/ca/spring-boot-customize-whitelabel-error-page" class="hover:text-tech-500 transition-colors line-clamp-3">Spring Boot: personalitza la pàgina d'error de l'etiqueta blanca </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="/ca/why-index-match-is-better-than-vlookup-excel">
						 <img src="https://techcodeview.com/img/excel-advanced/40/why-index-match-is-better-than-vlookup-excel.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Per què INDEX MATCH és millor que VLOOKUP a Excel" 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="/ca/why-index-match-is-better-than-vlookup-excel" class="hover:text-tech-500 transition-colors line-clamp-3">Per què INDEX MATCH és millor que VLOOKUP a Excel </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="/ca/tension-formula">
						 <img src="https://techcodeview.com/img/mechanics/70/tension-formula.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Fórmula de tensió" 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="/ca/tension-formula" class="hover:text-tech-500 transition-colors line-clamp-3">Fórmula de tensió </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="/ca/2d-array">
						 <img src="https://techcodeview.com/img/ds-tutorial/80/2d-array.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Matriu 2D" 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="/ca/2d-array" class="hover:text-tech-500 transition-colors line-clamp-3">Matriu 2D </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">Categoria </h2>
		 </div>
		 <div class="flex flex-wrap gap-2">
             <a href="/ca/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">
                Bloc
             </a> <a href="/ca/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">
                Conversió De Java
             </a> <a href="/ca/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">
                Matemàtiques
             </a> <a href="/ca/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">
                Col·leccions Java
             </a> <a href="/ca/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">
                Diferències
             </a> <a href="/ca/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">
                Cadena De Java
             </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">Articles D'Interès </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-network/53/udp-protocol.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Protocol UDP" 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="/ca/computer-network/">Xarxa D'ordinadors </a> </div>
						 <h4 class="text-sm font-bold text-white leading-tight"> <a href="/ca/udp-protocol">Protocol UDP </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/geeks-premier-league-2023/67/range-statistics.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Interval en estadístiques" 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="/ca/geeks-premier-league-2023-cat/">Geeks Premier League 2023 </a> </div>
						 <h4 class="text-sm font-bold text-white leading-tight"> <a href="/ca/range-statistics">Interval en estadístiques </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/bash-tutorial/69/bash-check-if-variable-is-set.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Bash Comproveu si la variable està establerta" 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="/ca/bash-tutorial/">Bash Tutorial </a> </div>
						 <h4 class="text-sm font-bold text-white leading-tight"> <a href="/ca/bash-check-if-variable-is-set">Bash Comproveu si la variable està establerta </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/29/whats-good-sat-score.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Quina és una bona puntuació SAT per al 2023?" 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="/ca/blog/">Bloc </a> </div>
						 <h4 class="text-sm font-bold text-white leading-tight"> <a href="/ca/whats-good-sat-score-1311060">Quina és una bona puntuació SAT per al 2023? </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/html-tutorial/33/how-align-image-html.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Com alinear la imatge en HTML" 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="/ca/html-tutorial/">Tutorial Html </a> </div>
						 <h4 class="text-sm font-bold text-white leading-tight"> <a href="/ca/how-align-image-html">Com alinear la imatge en HTML </a> </h4>
					 </div>
				 </article>
				 <!-- /ARTICLE --> <!-- ARTICLE -->
				 <article class="relative aspect-video rounded-lg overflow-hidden group mb-2">
					 <div class="absolute inset-0">
						 <img src="https://techcodeview.com/img/python-requests/61/response-json-python-requests.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="response.json() – Sol·licituds de 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="/ca/python-requests/">Sol·licituds De Python </a> </div>
						 <h4 class="text-sm font-bold text-white leading-tight"> <a href="/ca/response-json-python-requests">response.json() – Sol·licituds de Python </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 Tots Els Drets Reservats | 
                 <a href="//www.techcodeview.com/iw/">techcodeview.com </a> | 
                 <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Exempció De Responsabilitat </a> | 
                 <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Sobre Nosaltres </a> | 
                 <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Política De Privadesa </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>