INTRODUCCIÓN A XHTML - TECHCODEVIEW.COM

XHTML o Lenguaje de marcado de hipertexto extensible es una mezcla de HTML y XML, muy similar a HTML pero más estricto. Es como un libro de reglas para crear páginas web que los navegadores comprendan fácilmente. A diferencia del HTML, debes tener cuidado y seguir las reglas exactamente. La mayoría de los navegadores lo admiten. Piense en ello como una forma más precisa de escribir código web.

Tabla de contenidos

Historia
DTD de transición
DTD estricta
Cuadro DTD
¿Por qué utilizar XHTML?
Beneficios de XHTML
Diferencia entre HTML y XHTML

Historia

Fue desarrollado por el World Wide Web Consortium (W3C) y ayuda a los desarrolladores web a realizar la transición de HTML a XML. Con XHTML, los desarrolladores pueden ingresar al mundo XML con todas sus características y al mismo tiempo garantizar la compatibilidad del contenido con versiones anteriores y futuras. La familia XHTML incluye tres tipos de documentos; el primero es XHTML 1.0, recomendado por el W3C el 26 de enero de 2000. El segundo es XHTML 1.1, recomendado por el W3C el 31 de mayo de 2001.

El tercero es XHTML5, un estándar utilizado para desarrollar una adaptación XML de la especificación HTML5. Un documento XHTML debe tener una declaración XHTML.

Elementos de XHTML:

Elemento XHTML	Descripción
`>`	Se utiliza para declarar la definición de tipo de documento (DTD), especificando las reglas para el lenguaje de marcado y garantizando una representación adecuada en los navegadores.
`>`	Encierra todo el documento HTML o XHTML y actúa como elemento raíz.
`>`	Contiene metainformación sobre el documento, como el título, el juego de caracteres, las hojas de estilo vinculadas y otros elementos esenciales.
`>`	Anidado dentro de la sección de encabezado, especifica el título del documento, que se muestra en la barra o pestaña de título del navegador.
`>`	Incluye el contenido de la página web, incluidos texto, imágenes, enlaces y otros elementos HTML. Representa la parte visible del documento que se muestra en el navegador.

Al crear una página web XHTML, es necesario incluir una declaración DTD (Definición de tipo de documento). Hay tres tipos de DTD que se analizan a continuación:

DTD de transición:

Es compatible con los navegadores más antiguos que no tienen soporte incorporado para hojas de estilos en cascada. En la etiqueta del cuerpo se incluyen varios atributos que no están permitidos en una DTD estricta.

Sintaxis:

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

Ejemplo: En este ejemplo veremos el código para escribir un documento XHTML con un ejemplo.

HTML

xml version='1.0' encoding='UTF-8'?>        DTD transicional XHTMLtitle>head> <body bgcolor='#dae1ed'>   <div>peso de fuente: negrita; alineación de texto: centro;  margen inferior:-25px;'>techcodeview.comdiv> <p style='text-align:center;font-size:20px;'>Un portal de informáticap> <p style='text-align:center;font-size:20px;'>Opción de elegir mes: <select name='month'>   <option selected='selected'>opción enero> <option>opción febrero> <option>Opción de marcha> <option>opción abril> <option>Opción de mayo> <option>Opción junio> <option>opción julio> <option>Opción de agosto> <option>Opción septiembre> <option>Opción Octubre> <option>opción noviembre> <option>Opción de diciembre> seleccionar> p> cuerpo> 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>Producción: </strong>  </b>  </p>  <p> <img src='//techcodeview.com/img/html-xml/79/xhtml-introduction.webp' alt='dtd transicional xhtml'> <span>  </span> </p>  <h2 id='strict-dtd'>  <b>  <strong>DTD estricta: </strong>  </b>  <span>  </span> </h2>  <p dir='ltr'> <span>Se utiliza DTD estricto cuando la página XHTML contiene solo lenguaje de marcado. La DTD estricta se utiliza junto con hojas de estilo en cascada, porque este atributo no permite la propiedad CSS en la etiqueta del cuerpo. </span> </p>  <h3>  <b>  <strong>Sintaxis: </strong>  </b>  </h3>  <pre> PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 'DTD/xhtml1-strict.dtd'> </pre>  <p dir='ltr'>  <b>  <strong>Ejemplo 2: </strong>  </b>  <span>En este ejemplo veremos el código para escribir un documento XHTML con un ejemplo para DTD estricto. </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>Estricto DTD XHTMLtitle>head> <body>   <div>peso de fuente: negrita; alineación de texto: centro;  margen inferior:-25px;'>techcodeview.comdiv> <p style='text-align:center;font-size:20px;'>Un portal de informáticap> <p style='text-align:center;font-size:20px;'>Opción de elegir mes: <select name='month'>   <option selected='selected'>opción enero> <option>opción febrero> <option>Opción de marcha> <option>opción abril> <option>Opción de mayo> <option>Opción junio> <option>opción julio> <option>Opción de agosto> <option>Opción septiembre> <option>Opción Octubre> <option>opción noviembre> <option>Opción de diciembre> seleccionar> p> cuerpo> 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>Producción: </strong>  </b>  </p>  <p> <span>  </span> <img src='//techcodeview.com/img/html-xml/79/xhtml-introduction-2.webp' alt='estricto dtd xhtml'> <span>  </span> </p>  <h2 id='frameset-dtd'>  <b>  <strong>DTD del conjunto de cuadros: </strong>  </b>  <span>  </span> </h2>  <p dir='ltr'> <span>El DTD del conjunto de marcos se utiliza cuando la página XHTML contiene marcos. Esta DTD es idéntica a la DTD transicional de HTML 4.01 excepto por el modelo de contenido del elemento HTML. </span> </p>  <h3>  <b>  <strong>Sintaxis: </strong>  </b>  </h3>  <pre> PUBLIC '-//W3C//DTD XHTML 1.0 Frameset//EN' 'DTD/xhtml1-frameset.dtd'> </pre>  <p dir='ltr'>  <b>  <strong>Ejemplo 2: </strong>  </b>  <span>En este ejemplo veremos el código para escribir un documento XHTML con un ejemplo para el conjunto de marcos 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>Conjunto de marcos DTD XHTMLtítulo> encabezado> <frameset cols='30%, 20%, *'>   <frameset rows='40%, 30%, *'>   <frame src='gfg.html' />   <frame src='gfg1.html' />   <frame src='geeks.html' />conjunto de cuadros> <frameset rows='40%, 60%'>   <frame src='g4g.html' />   <frame src='g4g1.html' />conjunto de cuadros> <frameset rows='20%, 20%, 30%, *'>   <frame src='geeksforgeeks.html' />   <frame src='geeksforgeeks1.html' />   <frame src='geeksforgeeks2.html' />   <frame src='geeksforgeeks3.html' />conjunto de marcos> conjunto de marcos> 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>Producción: </strong>  </b>  </p>  <h2 id='why-use-xhtml'> <img src='//techcodeview.com/img/html-xml/79/xhtml-introduction-3.webp' alt='conjunto de marcos dtd xhtml'>  <b>  <strong>¿Por qué utilizar XHTML? </strong>  </b>  </h2>  <ul>  <li value='1'> <span>Los documentos XHTML se validan con herramientas XML estándar. </span> </li>  <li value='2'> <span>Es fácil mantener, convertir y editar documentos a largo plazo. </span> </li>  <li value='3'> <span>Se utiliza para definir el estándar de calidad de las páginas web. </span> </li>  <li value='4'> <span>XHTML es un estándar oficial del W3C, tu sitio web se vuelve más compatible y preciso con muchos navegadores. </span> </li>  </ul>  <h2 id='benefits-of-xhtml'>  <b>  <strong>Beneficios de XHTML: </strong>  </b>  </h2>  <ul>  <li value='1'> <span>Todas las etiquetas XHTML deben tener etiquetas de cierre y estar anidadas correctamente. Esto genera un código más limpio. </span> </li>  <li value='2'> <span>Los documentos XHTML son sencillos, lo que significa que utilizan menos ancho de banda. Esto reduce el costo, especialmente si su sitio web tiene miles de páginas. </span> </li>  <li value='3'> <span>Los documentos XHTML están bien formateados y pueden transportarse fácilmente a dispositivos inalámbricos, lectores Braille y otros entornos web especializados. </span> </li>  <li value='4'> <span>Todos los nuevos desarrollos serán en XML (del cual XHTML es una aplicación). </span> </li>  <li value='5'> <span>XHTML trabaja en asociación con CSS para crear páginas web que se pueden actualizar fácilmente. </span> </li>  </ul>  <h2 id='difference-between-html-and-xhtml'>  <b>  <strong>Diferencia entre HTML y XHTML: </strong>  </b>  </h2>  <table class="table">  <tbody> <tr>  <th> <span>HTML </span> </th>  <th> <span>HTML </span> </th>  </tr>  </tbody> <tbody>  <tr>  <td> <span>HTML o lenguaje de marcado de hipertexto es el principal lenguaje de marcado para crear páginas web. </span> </td>  <td> <span>XHTML (Lenguaje de marcado de hipertexto extensible) es una familia de lenguajes de marcado XML que reflejan o amplían versiones del lenguaje de marcado de hipertexto (HTML) ampliamente utilizado. </span> </td>  </tr>  <tr>  <td> <span>Marco flexible que requiere un analizador HTML específico y indulgente </span> </td>  <td> <span>Subconjunto restrictivo de XML que debe analizarse con analizadores XML estándar </span> </td>  </tr>  <tr>  <td> <span>Propuesto por Tim Berners-Lee en 1987 </span> </td>  <td> <span>Recomendación del World Wide Web Consortium en 2000. </span> </td>  </tr>  <tr>  <td> <span>Aplicación del Lenguaje de Marcado Generalizado Estándar (SGML). </span> </td>  <td> <span>Aplicación de XML </span> </td>  </tr>  <tr>  <td> <span>Ampliado desde SGML. </span> </td>  <td> <span>Extendido desde 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>
                                Compartir                              </h4>
                             
                              <div class="flex flex-wrap justify-center gap-3">
                                 <!-- Twitter -->
                                 <a href="https://twitter.com/intent/tweet?text=Introducción a XHTML&url=https://www.techcodeview.com/es/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/es/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/es/xhtml-introduction&title=Introducción 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">
                        Te Puede Gustar                     </h3>
                     <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                         <div class="group">
                              <a href="/es/every-ap-calculus-ab-practice-test-available-1311320" 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/87/every-ap-calculus-ab-practice-test-available.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Todos los exámenes de práctica AP Cálculo AB disponibles: gratuitos y oficiales" 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="/es/every-ap-calculus-ab-practice-test-available-1311320">Todos los exámenes de práctica AP Cálculo AB disponibles: gratuitos y oficiales </a>
                              </h4>
                         </div> <div class="group">
                              <a href="/es/javascript-tutorial" 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/tutorials/85/javascript-tutorial.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Tutorial de JavaScript" 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="/es/javascript-tutorial">Tutorial de JavaScript </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>
                Artículos Más Populares             </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="/es/what-is-thrash">
						 <img src="https://techcodeview.com/img/blog/98/what-is-thrash.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="¿Qué es el Thrash?" 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="/es/what-is-thrash" class="hover:text-tech-500 transition-colors line-clamp-3">¿Qué es el Thrash? </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="/es/convert-string-int-c">
						 <img src="https://techcodeview.com/img/it-problems-solutions/74/convert-string-int-c.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Convertir cadena a int en 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="/es/convert-string-int-c" class="hover:text-tech-500 transition-colors line-clamp-3">Convertir cadena a int en 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="/es/what-is-an-expert-system">
						 <img src="https://techcodeview.com/img/artificial-intelligence/04/what-is-an-expert-system.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="¿Qué es un sistema experto?" 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="/es/what-is-an-expert-system" class="hover:text-tech-500 transition-colors line-clamp-3">¿Qué es un sistema experto? </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="/es/reference-data-types-java">
						 <img src="https://techcodeview.com/img/java-tutorial/32/reference-data-types-java.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Tipos de datos de referencia en 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="/es/reference-data-types-java" class="hover:text-tech-500 transition-colors line-clamp-3">Tipos de datos de referencia en 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="/es/android-emulator">
						 <img src="https://techcodeview.com/img/android-tutorial/82/android-emulator.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Emulador de Android" 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="/es/android-emulator" class="hover:text-tech-500 transition-colors line-clamp-3">Emulador de Android </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="/es/what-is-full-form-xd">
						 <img src="https://techcodeview.com/img/category/40/what-is-full-form-xd.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="¿Cuál es la forma completa de XD?" 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="/es/what-is-full-form-xd" class="hover:text-tech-500 transition-colors line-clamp-3">¿Cuál es la forma completa de XD? </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="/es/objective-function">
						 <img src="https://techcodeview.com/img/maths-class-11/78/objective-function.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Función objetiva" 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="/es/objective-function" class="hover:text-tech-500 transition-colors line-clamp-3">Función objetiva </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="/es/linear-time-sorting">
						 <img src="https://techcodeview.com/img/daa-tutorial/72/linear-time-sorting.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Clasificación de tiempo lineal" 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="/es/linear-time-sorting" class="hover:text-tech-500 transition-colors line-clamp-3">Clasificación de tiempo lineal </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="/es/open-source-operating-system">
						 <img src="https://techcodeview.com/img/operating-system/35/open-source-operating-system.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Sistema operativo de código abierto" 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="/es/open-source-operating-system" class="hover:text-tech-500 transition-colors line-clamp-3">Sistema operativo de código abierto </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="/es/phpmyadmin-login">
						 <img src="https://techcodeview.com/img/php-tutorial/34/phpmyadmin-login.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="PHPMyAdmin Iniciar sesión" 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="/es/phpmyadmin-login" class="hover:text-tech-500 transition-colors line-clamp-3">PHPMyAdmin Iniciar sesión </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">Categoría </h2>
		 </div>
		 <div class="flex flex-wrap gap-2">
             <a href="/es/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="/es/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ón De Java
             </a> <a href="/es/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áticas
             </a> <a href="/es/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">
                Colecciones Java
             </a> <a href="/es/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">
                Diferencias
             </a> <a href="/es/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">Artículos De 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/java-tutorial/85/remove-an-element-from-arraylist-java.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Eliminar un elemento de ArrayList en Java" 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="/es/java-tutorial/">Tutorial De Java </a> </div>
						 <h4 class="text-sm font-bold text-white leading-tight"> <a href="/es/remove-an-element-from-arraylist-java">Eliminar un elemento de ArrayList en Java </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/25/how-jvm-works-jvm-architecture.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Cómo funciona JVM - Arquitectura JVM" 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="/es/java/">Java </a> </div>
						 <h4 class="text-sm font-bold text-white leading-tight"> <a href="/es/how-jvm-works-jvm-architecture">Cómo funciona JVM - Arquitectura JVM </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/67/numpy-in-python-set-2-advanced.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="NumPy en Python | Conjunto 2 (avanzado)" 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="/es/python/">Pitón </a> </div>
						 <h4 class="text-sm font-bold text-white leading-tight"> <a href="/es/numpy-in-python-set-2-advanced">NumPy en Python | Conjunto 2 (avanzado) </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/24/css-navigation-bar.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Barra de navegación CSS" 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="/es/css-tutorial/">Tutorial Css </a> </div>
						 <h4 class="text-sm font-bold text-white leading-tight"> <a href="/es/css-navigation-bar">Barra de navegación CSS </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/operating-system/04/difference-between-cui.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Diferencia entre CUI y GUI" 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="/es/operating-system/">Sistema Operativo </a> </div>
						 <h4 class="text-sm font-bold text-white leading-tight"> <a href="/es/difference-between-cui">Diferencia entre CUI y GUI </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-swing/00/java-jlist.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Lista J de Java" 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="/es/java-swing/">Columpio Java </a> </div>
						 <h4 class="text-sm font-bold text-white leading-tight"> <a href="/es/java-jlist">Lista J de Java </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 Todos Los Derechos Reservados | 
                 <a href="//www.techcodeview.com/tr/">techcodeview.com </a> | 
                 <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Descargo De Responsabilidad </a> | 
                 <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Acerca De Nosotros </a> | 
                 <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Política De Privacidad </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>