Skip to content

Commit

Permalink
Add files via upload
Browse files Browse the repository at this point in the history
  • Loading branch information
@Edga-f-j
Edga-f-j authored Sep 30, 2024
1 parent a1f723c commit af8c719
Show file tree
Hide file tree
Showing 44 changed files with 2,121 additions and 0 deletions.
96 changes: 96 additions & 0 deletions clase1.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,96 @@
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Presentación Historia</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script src="images/https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
<link rel="stylesheet" href="styles/styles1.css">


</head>
<body>




<div class="titulo">
<img src="simagenes/logo-talentotech.png" alt="tech">

<img src="simagenes/programacion.png" alt="programacion">

</div>



<div class="historia">

<h1>Historia y origenes de HTML</h1>
<div class="contenedor">
<div class="imagen">
<img src="simagenes/historiaHTML.jpg" alt="Historia-HTML">
</div>
<div class="texto">
<P>La historia de HTML está estrechamente ligada a los inicios de la Web. Este lenguaje de marcas,
cuyo objetivo principal es crear páginas web, define la estructura y el código que sostienen su contenido.</P>

<p> HTML surgió en los años 80 con el propósito de permitir que científicos de distintas universidades compartieran información fácilmente.
Gracias a HTML, se desarrolló una forma accesible de enlazar documentos,
lo que impulsó el intercambio de conocimiento y dio lugar a una web más colaborativa.</p>
</div>
</div>
</div>




<div class="html1">
<h1>HTML 1</h1>
<div class="contenedor2">
<div class="html1image">
<img src="simagenes/html1.jpg" alt="HTML1">
</div>

<div class="texto1">
<p>En 1991 se publicó formalmente el primer documento que describía HTML, bajo el título de "HTML Tags".
Luego, en 1993, se propuso oficialmente que HTML se convirtiera en un estándar.
La primera versión, HTML 1.0, fue diseñada para ser muy básica, permitiendo
el uso de un conjunto limitado de etiquetas y comandos. Entre ellas se incluían:
</p>
<ul>
<li>Encabezados (h1 a h6)</li>
<li>Párrafos (p)</li>
<li>Enlaces (a)</li>
<li>Listas (ul, ol, li)</li>
<li>Imágenes (img)</li>
</ul>
</div>
</div>
</div>





<div class="htmls">
<img src="simagenes/htmlss.png" alt="html234">
</div>




<div class="html5">
<img src="simagenes/html5definitiva.png" alt="html5">
</div>


<div class="estructurahml">
<img src="simagenes/estructurahml.png" alt="estructurahml">
</div>

<div class="basicahtml">
<img src="simagenes/basicahtml.png" alt="basicahtml">
</div>
</body>
</html>
96 changes: 96 additions & 0 deletions clase2.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,96 @@
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Presentación Historia</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script src="images/https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
<link rel="stylesheet" href="styles/styles1.css">


</head>
<body>




<div class="titulo">
<img src="simagenes/logo-talentotech.png" alt="tech">

<img src="simagenes/programacion.png" alt="programacion">

</div>



<div class="historia">

<h1>Historia y origenes de HTML</h1>
<div class="contenedor">
<div class="imagen">
<img src="simagenes/historiaHTML.jpg" alt="Historia-HTML">
</div>
<div class="texto">
<P>La historia de HTML está estrechamente ligada a los inicios de la Web. Este lenguaje de marcas,
cuyo objetivo principal es crear páginas web, define la estructura y el código que sostienen su contenido.</P>

<p> HTML surgió en los años 80 con el propósito de permitir que científicos de distintas universidades compartieran información fácilmente.
Gracias a HTML, se desarrolló una forma accesible de enlazar documentos,
lo que impulsó el intercambio de conocimiento y dio lugar a una web más colaborativa.</p>
</div>
</div>
</div>




<div class="html1">
<h1>HTML 1</h1>
<div class="contenedor2">
<div class="html1image">
<img src="simagenes/html1.jpg" alt="HTML1">
</div>

<div class="texto1">
<p>En 1991 se publicó formalmente el primer documento que describía HTML, bajo el título de "HTML Tags".
Luego, en 1993, se propuso oficialmente que HTML se convirtiera en un estándar.
La primera versión, HTML 1.0, fue diseñada para ser muy básica, permitiendo
el uso de un conjunto limitado de etiquetas y comandos. Entre ellas se incluían:
</p>
<ul>
<li>Encabezados (h1 a h6)</li>
<li>Párrafos (p)</li>
<li>Enlaces (a)</li>
<li>Listas (ul, ol, li)</li>
<li>Imágenes (img)</li>
</ul>
</div>
</div>
</div>





<div class="htmls">
<img src="simagenes/htmlss.png" alt="html234">
</div>




<div class="html5">
<img src="simagenes/html5definitiva.png" alt="html5">
</div>


<div class="estructurahml">
<img src="simagenes/estructurahml.png" alt="estructurahml">
</div>

<div class="basicahtml">
<img src="simagenes/basicahtml.png" alt="basicahtml">
</div>
</body>
</html>
200 changes: 200 additions & 0 deletions clase3.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,200 @@
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Presentación CSS</title>
<!-- Importa Bootstrap -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<style>
body{
background-image: url(simagenes/fondotecno.jpg);
background-size: cover; /* Para que la imagen cubra toda la pantalla */
background-attachment: fixed; /* Hace que el fondo permanezca fijo al desplazarse */
background-position: center; /* Centra la imagen */
background-repeat: no-repeat; /* Evita que la imagen se repita */
}

/* Estilos adicionales si los necesitas */
.section-title {
margin-top: 20px;
margin-bottom: 10px;
}

.custom-section {
padding: 20px;
background-color: rgba(255, 255, 255, 0.9);
border-radius: 5px;
}

.code-example {
background-color: #e9ecef;
padding: 10px;
border-radius: 10px;
}

.text-center{
color: rgb(202, 41, 41);
}



.imagenes-selectores {
display: flex;
gap: 15px; /* Espacio entre las imágenes */
justify-content: center; /* Centra las imágenes horizontalmente */
margin-top: 10px; /* Espacio por encima de las imágenes */
}

.img-selector {
width: 45%; /* Ajusta el ancho de las imágenes */
height: auto; /* Mantén la proporción de la imagen */
border-radius: 5%;
}

.imagen-jerarquia{
display: flex;
gap: 15px; /* Espacio entre las imágenes */
justify-content: center; /* Centra las imágenes horizontalmente */
margin-top: 10px; /* Espacio por encima de las imágenes */
}

.jerarquia-css{
justify-content: center;
width: 45%; /* Ajusta el ancho de las imágenes */
height: auto; /* Mantén la proporción de la imagen */
border-radius: 5%;
}

.containerIMG{
display: flex;
gap: 15px; /* Espacio entre las imágenes */
justify-content: center; /* Centra las imágenes horizontalmente */
margin-top: 10px; /* Espacio por encima de las imágenes */
}

.contenedorIMG{
justify-content: center;
width: 45%; /* Ajusta el ancho de las imágenes */
height: auto; /* Mantén la proporción de la imagen */
border-radius: 5%;
}

.imagenesCaja{
display: flex;
gap: 15px; /* Espacio entre las imágenes */
justify-content: center; /* Centra las imágenes horizontalmente */
margin-top: 10px; /* Espacio por encima de las imágenes */
}

.cajacodigo {
width: 45%; /* Ajusta el ancho de las imágenes */
height: auto; /* Mantén la proporción de la imagen */
border-radius: 5%;
}


</style>
</head>
<body>

<div class="container">
<header class="text-center mt-4 p-4 bg-primary text-white rounded shadow-lg">


<h1>Presentación de CSS</h1>


<img src="simagenes/Css.png" alt="Imagen CSS" style="height: 100%; margin-left: 15px; margin-top: 2%;
margin-bottom: 3%;">
</header>

<!-- Sección de Selectores CSS -->
<section id="selectores" class="custom-section">
<h2 class="section-title">Selectores CSS</h2>
<p>En CSS, los selectores son patrones que se utilizan para seleccionar los elementos que desea diseñar como por ejemplo:</p>

<div class="imagenes-selectores">
<img src="simagenes/selector1.png" alt="Imagen Selector 1" class="img-selector">
<img src="simagenes/selector2.png" alt="Imagen Selector 2" class="img-selector">
</div>

</section>

<!-- ===================== Sección de Jerarquía CSS ====================-->
<section id="jerarquia-css" class="custom-section">
<h2 class="section-title">Jerarquía en CSS</h2>
<ul>
<li>CSS en línea (aplicado directamente en la etiqueta)</li>
<li>CSS interno (aplicado entre etiquetas <code>&lt;style&gt;</code> en la misma página)</li>
<li>CSS externo (aplicado externamente con la etiqueta <code>&lt;link&gt;</code>)</li>
<li>Clases y IDs</li>
<li><code>!important</code></li>
</ul>
<div class="imagen-jerarquia">
<img src="simagenes/jerarquiacss.png" alt="Imagen Css" class="jerarquia-css">
</div>
</section>



<!--=========================== Sección de Etiqueta Div==================-->
<section id="div" class="custom-section">
<h2 class="section-title">Etiqueta <code>&lt;div&gt;</code></h2>
<p>El elemento <code>&lt;div&gt;</code> es el contenedor genérico para el contenido, sin efecto en el diseño hasta que se le aplica un estilo usando CSS.</p>

<div class="containerIMG">
<img src="simagenes/container.png" alt="imagen contenedor" class="contenedorIMG">
</div>
</section>




<!--=========================== Sección de Modelo de Caja ===============================-->
<section id="modelo-caja" class="custom-section">
<h2 class="section-title">Modelo de Caja</h2>
<p>El modelo de caja define cómo se verá un sitio web a través de propiedades como <code>box-sizing</code>, <code>border</code>, <code>padding</code> y <code>margin</code>.</p>
<div class="code-example">
<code>box-sizing: border-box;</code><br>
<code>border: 1px solid black;</code><br>
<code>padding: 10px;</code><br>
<code>margin: 20px;</code>
</div>

<div class="imagenesCaja">
<img src="simagenes/cajacodigo.png" alt="Codigo de caja" class="cajacodigo">
<img src="simagenes/cajaa.png" alt="Caja" class="cajacodigo">
</div>
</section>

<!-- Sección de Display Flex -->
<section id="display-flex" class="custom-section">
<h2 class="section-title">Display Flex</h2>
<p>El módulo de caja flexible permite crear diseños flexibles y responsivos sin flotación ni posicionamiento. Para empezar, definimos un contenedor flexible.</p>

<div class="displayfleximg" style="display: flex; justify-content: center;">
<img src="simagenes/displayflex.png" alt="display-flex" style="height: 100%; margin-top: 2%; border-radius: 3%;
margin-bottom: 3%">
</div>
</section>

<!-- Sección de Display Grid -->
<section id="display-grid" class="custom-section">
<h2 class="section-title">Display Grid</h2>
<p>El diseño de cuadrícula en CSS permite un sistema de diseño basado en filas y columnas, facilitando el diseño de páginas web.</p>


<div class="displayfleximg" style="display: flex; justify-content: center;">
<img src="simagenes/displaygrid.png" alt="display-flex" style="height: 100%; margin-top: 2%; border-radius: 3%;
margin-bottom: 3%">
</div>
</section>

</div>

<!-- Script Bootstrap -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Loading

0 comments on commit af8c719

Please sign in to comment.