¿Cómo incrustar un archivo PDF usando HTML?
Nosotros aprenderemos cómo incrustar archivos PDF en documentos HTML , además de conocer su implementación a través de ejemplos. A veces, es posible que desees insertar un archivo PDF en un documento o código HTML para que el contenido sea más interactivo. Debido a que los formatos son tan diferentes, no es fácil realizar la tarea.
Estos son los siguientes métodos para hacer esto:
Tabla de contenidos
Método 1: usar Etiqueta de objeto
- La etiqueta de objeto HTML es la primera forma de incrustar archivos PDF. En el siguiente ejemplo, el archivo pdf se mostrará en una página web, que es un objeto.
- Además de incrustar un archivo PDF en una página web, la etiqueta de objeto puede incrustar subprogramas ActiveX, Flash, video, audio y Java.
- Se pueden adjuntar documentos interactivos a un objeto incrustado con una etiqueta HTML.
- Se puede mostrar según sus necesidades en la pantalla utilizando los atributos de alto y ancho del objeto.
Ejemplo 1 : Este ejemplo describe la incrustación de un archivo PDF en HTML usando la etiqueta de objeto.
HTML PDF en HTMLtítulo>cabeza> <style>.pdf { ancho: 100%; relación de aspecto: 4/3; } .pdf, html, cuerpo { altura: 100%; margen: 0; relleno: 0; } h1, h3 { alineación de texto: centro; } h1 { color: verde; } estilo> <body> <h1>Portaltecnico.proh1> <h3>Incrustar el archivo PDF usando Object Tagh3> <object>objeto> cuerpo> html> </pre> </code> <p dir='ltr'> <b> <strong>Producción: </strong> </b> </p> <img src='//techcodeview.com/img/geeks-premier-league-2022/50/how-embed-pdf-file-using-html.webp' alt=''> <h2 id='method-2-using-an-iframe'> <b> <strong>Método 2: usar un </strong> </b> <a href='/html-iframes' rel=''> <b> <strong>marco flotante </strong> </b> </a> </h2> <ul> <li value='1'> <span>Usar una etiqueta iframe es la segunda forma de incrustar un archivo pdf en una página web HTML. En el desarrollo web, los desarrolladores web utilizan la etiqueta iframe para incrustar archivos en varios formatos e incluso otros sitios web dentro de una página web. </span> </li> <li value='2'> <span>Debido a su amplia compatibilidad, la etiqueta iframe se usa ampliamente para incrustar PDF. </span> </li> <li value='3'> <span>Un navegador que no admite documentos PDF o la etiqueta de objeto también puede usar esta etiqueta para incrustar un código HTML en PDF. </span> </li> </ul> <p dir='ltr'> <b> <strong>Ejemplo 2 </strong> </b> <span>: Este ejemplo describe la incrustación de un archivo PDF en HTML usando un iframe. </span> </p>HTML <code> <pre> <html> <head> <title>PDF en HTMLtítulo>cabeza> <style>.pdf { ancho: 100%; relación de aspecto: 4/3; } .pdf, html, cuerpo { altura: 100%; margen: 0; relleno: 0; } h1, h3 { alineación de texto: centro; } h1 { color: verde; } estilo> <body> <h1>Portaltecnico.proh1> <h3>Incrustar el archivo PDF usando Iframe Tagh3> <iframe>iframe> cuerpo> html> </pre> </code> <p dir='ltr'> <b> <strong>Producción: </strong> </b> </p> <img src='//techcodeview.com/img/geeks-premier-league-2022/50/how-embed-pdf-file-using-html.webp' alt=''> <h2 id='method-3-using-embed-tag'> <b> <strong>Método 3: uso </strong> </b> <b> <strong>insertar etiqueta </strong> </b> </h2> <ul> <li value='1'> <span>Al incrustar un código HTML pdf en un sitio web, la etiqueta de inserción no se usa con tanta frecuencia como las etiquetas anteriores porque si el navegador del usuario no puede manejar archivos PDF, la pantalla estará en blanco. </span> </li> <li value='2'> <span>El método de incrustar un código HTML en formato pdf se utiliza cuando no es necesario proporcionar contenido alternativo. </span> </li> </ul> <p dir='ltr'> <b> <strong>Ejemplo </strong> </b> <span>: Este ejemplo describe la incrustación de un archivo PDF en HTML usando la etiqueta incrustar. </span> </p>HTML <code> <pre> <html> <head> <title>PDF en HTMLtítulo>cabeza> <style>.pdf { ancho: 100%; relación de aspecto: 4/3; } .pdf, html, cuerpo { altura: 100%; margen: 0; relleno: 0; } h1, h3 { alineación de texto: centro; } h1 { color: verde; } estilo> <body> <h1>Portaltecnico.proh1> <h3>Incrustar el archivo PDF usando embed Tagh3> <embed>cuerpo> html> </pre> </code> <p dir='ltr'> <b> <strong>Producción: </strong> </b> </p> <img src='//techcodeview.com/img/geeks-premier-league-2022/50/how-embed-pdf-file-using-html.webp' alt=''> <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=¿Cómo incrustar un archivo PDF usando HTML?&url=https://www.techcodeview.com/es/how-embed-pdf-file-using-html"
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/how-embed-pdf-file-using-html"
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/how-embed-pdf-file-using-html&title=¿Cómo incrustar un archivo PDF usando HTML?"
target="_blank" rel="noopener noreferrer"
class="flex items-center gap-2 px-6 py-3 rounded-xl bg-[#0077b5]/10 text-[#0077b5] hover:bg-[#0077b5] hover:text-white transition-all duration-300 font-bold text-sm">
<i class="fa fa-linkedin text-lg"> </i>
<span class="hidden sm:inline">LinkedIn </span>
</a>
</div>
</div>
</div>
</article>
<!-- Comments Placeholder / Random Articles -->
<div class="mt-8 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl p-6 md:p-8 shadow-sm">
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-6 uppercase tracking-wide border-b border-slate-200 dark:border-slate-700 pb-2">
Te Puede Gustar </h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="group">
<a href="/es/types-statements-java" 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/java-tutorial/35/types-statements-java.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Tipos de declaraciones en Java" 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/types-statements-java">Tipos de declaraciones en Java </a>
</h4>
</div> <div class="group">
<a href="/es/are-there-any-all-male-colleges-left-131322" 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/86/are-there-any-all-male-colleges-left.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="¿Quedan universidades exclusivamente para hombres?" 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/are-there-any-all-male-colleges-left-131322">¿Quedan universidades exclusivamente para hombres? </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/every-ap-statistics-practice-test-available-131690">
<img src="https://techcodeview.com/img/blog/47/every-ap-statistics-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 de estadística AP disponibles: gratuitos y oficiales" 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/every-ap-statistics-practice-test-available-131690" class="hover:text-tech-500 transition-colors line-clamp-3">Todos los exámenes de práctica de estadística AP disponibles: gratuitos y oficiales </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/complete-list-ap-courses-1311440">
<img src="https://techcodeview.com/img/blog/63/complete-list-ap-courses.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Lista completa de cursos y exámenes AP" 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/complete-list-ap-courses-1311440" class="hover:text-tech-500 transition-colors line-clamp-3">Lista completa de cursos y exámenes AP </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/like-unlike-algebraic-terms">
<img src="https://techcodeview.com/img/algebra/70/like-unlike-algebraic-terms.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Términos algebraicos similares y diferentes: definición y ejemplos" 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/like-unlike-algebraic-terms" class="hover:text-tech-500 transition-colors line-clamp-3">Términos algebraicos similares y diferentes: definición y ejemplos </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/subsets-maths">
<img src="https://techcodeview.com/img/maths-class-11/56/subsets-maths.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Subconjuntos en matemáticas" 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/subsets-maths" class="hover:text-tech-500 transition-colors line-clamp-3">Subconjuntos en matemáticas </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/adjacency-list-meaning-definition-dsa">
<img src="https://techcodeview.com/img/definitions-meanings/21/adjacency-list-meaning-definition-dsa.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Significado y definición de la lista de adyacencia en DSA" 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/adjacency-list-meaning-definition-dsa" class="hover:text-tech-500 transition-colors line-clamp-3">Significado y definición de la lista de adyacencia en DSA </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/netstat-command-linux">
<img src="https://techcodeview.com/img/linux-command/70/netstat-command-linux.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Comando netstat en Linux" 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/netstat-command-linux" class="hover:text-tech-500 transition-colors line-clamp-3">Comando netstat en Linux </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/difference-between-supervised">
<img src="https://techcodeview.com/img/machine-learning/41/difference-between-supervised.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Diferencia entre aprendizaje supervisado y no supervisado" 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/difference-between-supervised" class="hover:text-tech-500 transition-colors line-clamp-3">Diferencia entre aprendizaje supervisado y no supervisado </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/how-find-downloads-android">
<img src="https://techcodeview.com/img/android-tutorial/69/how-find-downloads-android.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Cómo encontrar descargas en 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/how-find-downloads-android" class="hover:text-tech-500 transition-colors line-clamp-3">Cómo encontrar descargas en 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/download-install-sts-ide">
<img src="https://techcodeview.com/img/spring-boot-tutorial/53/download-install-sts-ide.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Descargar e instalar STS IDE" 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/download-install-sts-ide" class="hover:text-tech-500 transition-colors line-clamp-3">Descargar e instalar STS IDE </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/html-iframes">
<img src="https://techcodeview.com/img/html-tags/97/html-iframes.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Marcos flotantes HTML" 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/html-iframes" class="hover:text-tech-500 transition-colors line-clamp-3">Marcos flotantes HTML </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/english-word-play/41/list-body-parts-names-english.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Lista de nombres de partes del cuerpo en inglés e hindi (imágenes)" 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/english-word-play/">Juego De Palabras En Ingles </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/es/list-body-parts-names-english">Lista de nombres de partes del cuerpo en inglés e hindi (imágenes) </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/linux-tutorial/95/putty-command-linux.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Comando de masilla en Linux" 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/linux-tutorial/">Tutorial De Linux </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/es/putty-command-linux">Comando de masilla en Linux </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/android-tutorial/70/how-access-icloud-photos-android.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Cómo acceder a fotos de iCloud en Android" 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/android-tutorial/">Tutorial De Android </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/es/how-access-icloud-photos-android">Cómo acceder a fotos de iCloud en Android </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/linux-command/01/how-copy-files-directories-linux-cp-command.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Cómo copiar archivos y directorios en Linux | comando cp" 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/linux-command/">Comando-Linux </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/es/how-copy-files-directories-linux-cp-command">Cómo copiar archivos y directorios en Linux | comando cp </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/picked/37/boolean-algebra.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Álgebra de Boole" 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/picked/">Escogido </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/es/boolean-algebra">Álgebra de Boole </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-questions/98/how-add-color-html-without-css.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="¿Cómo agregar color en HTML sin 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/html-questions/">Preguntas Html </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/es/how-add-color-html-without-css">¿Cómo agregar color en HTML sin CSS? </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/lv/">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>