Scribd
Cargar
3 vistas21 páginas

Index HTML

El documento describe una aplicación web para gestionar contactos personales, permitiendo agregar, mostrar, buscar y eliminar contactos. Incluye secciones para la funcionalidad del programa y tablas de multiplicar. Cada página está estructurada con HTML, CSS y enlaces de navegación para facilitar el acceso a diferentes funciones.

Cargado por

Rebels
Derechos de autor
© All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
3 vistas21 páginas

Index HTML

El documento describe una aplicación web para gestionar contactos personales, permitiendo agregar, mostrar, buscar y eliminar contactos. Incluye secciones para la funcionalidad del programa y tablas de multiplicar. Cada página está estructurada con HTML, CSS y enlaces de navegación para facilitar el acceso a diferentes funciones.

Cargado por

Rebels
Derechos de autor
© All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd

Index html:

<!DOCTYPE html><!--Esto es el tipo de documento-->


<html lang="en"><!--Esto indica el idioma con el que estamos tranajando-->
<head><!--Aca empieza la cabecera de la pagina web-->
<meta charset="UTF-8"><!--Con esto se pueden utilizar caracteres
especiales-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pagina de Matematicas</title>

<!--Aca usamos esto para un nuevo tipo de letra-->


<link rel="preconnect" href="[Link]
<link rel="preconnect" href="[Link] crossorigin>
<link
href="[Link]
0..700&family=UnifrakturMaguntia&display=swap" rel="stylesheet">

<link
href="[Link]
css"rel="stylesheet">

<link rel="stylesheet" href="[Link]"><!--Conecxion con css y html-->


</head>

<body><!--Emepezamos con el cuerpo de la pagina, lo que si ve el usuario-->

<header>

<h2>Agenda de Contactos Personal</h2>


<nav>

<a href="#inicio">Inicio</a><!--Esto sirve para hacer un enlace-->


<a href="#funcionalidaddelprograma">Funcionalidad del
programa</a><!--Esto sirve para hacer un enlace-->
<a href="#Empezar">Empezar</a><!--Esto sirve para hacer un enlace-->

</nav>

</header>
<section class="inicio" id="inicio">
<h2>Agenda de Contactos Personales</h2>
<p>Programación web</p>
<a href="#funcionalidaddelprograma">

<button >Empieza</button>

</a>

<img src="[Link]" alt="Imagen de inicio" class="imageninicio">


</section>

<section class="funcionalidaddelprograma" id="funcionalidaddelprograma">

<div class="card">

<header>
<h1>Funcionalidad del programa</h1>
</header>
<p>Esta pagina esta diseñada ára gestionar los datos de manera
sencilla. En el cual se le preguntaran nombre, telefono y su email. Al final
se le mostraran sus datos a tra vez de una tarjeta. En donde tendra la
opción de buscar contactor por el nombre, y si desea eliminar contacto.</p>

</div>

</section>

<section class="Empezar" id="Empezar"><!--con el id podemos hacer lo de el


link-->
<ul class="menu">
<!--DESPLEGABLE DE ARITMETICAAA-->

<h1>Selección Contactos</h1>
<li><a href="#">Elegir</a>

<ul>
<li><a href="[Link]">Agregar Contactos</a></li>
<li><a href="[Link]">Mostrar Contactos</a></li>
<li><a href="[Link]">Buscar Contactos</a></li>
<li><a href="[Link]">Eliminar Contactos</a></li>

</ul>
</li>
<!--DESPLEGABLE DE GEOMÉTRICA-->

<!--**********************************+-->

</ul>

</section>

<!--ESTO ES PARA LOS DERECHOS DE AUTOR CREO-->


<footer>
<p>© 2026 Startup Tech</p>
</footer>
<!--////////-->
</body>
</html>

Agregar contactos:

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="[Link]"><!--Conecxion con css y html-->
<link rel="preconnect" href="[Link]
<link rel="preconnect" href="[Link] crossorigin>
<link
href="[Link]
0..700&family=UnifrakturMaguntia&display=swap" rel="stylesheet">

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Agregar Contactos</title>
<link
href="[Link]
css"rel="stylesheet">

</head>
<body class="agregarcontactos">
<header>

<h2>Agregar Contactos</h2>
<nav>

<a href="[Link]#inicio">Inicio</a><!--Esto sirve para hacer un


enlace-->
<a href="[Link]#funcionalidaddelprograma">Funcionalidad del
programa</a><!--Esto sirve para hacer un enlace-->
<a href="[Link]#empezar">Empezar</a><!--Esto sirve para hacer un
enlace-->

</nav>
</header>

<p>A continucación, digite los datos del contacto que sea agregar </p>
<label>Nombre</label>
<input type="text" id="nombre"><!--num1suma solo acepta datos de tipo numero
y el id se coloca para que en script lo pueda bsucar-->
<label>Telefono</label>
<input type="number" id="telefono"> <!--num2suma-->
<label>Email</label>
<input type="email" id="email">

<button onclick="agregar()">Guardar</button><!--onlick="sumar()" esto llama


la funcion de javascript-->
<p id="resultado"></p><!--esto muestra el resultado-->
<script src="[Link]"></script>
</body>
</html>

Eliminar

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="[Link]"><!--Conecxion con css y html-->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Eliminar Contactos</title>
<link rel="preconnect" href="[Link]
<link rel="preconnect" href="[Link] crossorigin>
<link
href="[Link]
0..700&family=UnifrakturMaguntia&display=swap" rel="stylesheet">
<link
href="[Link]
css"rel="stylesheet">

</head>
<body class="sumapagina">

<header>

<h2>Eliminar contactos</h2>
<nav>
<a href="[Link]#inicio">Inicio</a><!--Esto sirve para hacer un
enlace-->
<a href="[Link]#funcionalidaddelprograma">Funcionalidad del
programa</a><!--Esto sirve para hacer un enlace-->
<a href="[Link]#empezar">Empezar</a><!--Esto sirve para hacer un
enlace-->

</nav>
</header>

<section class="tablamultiplicar" id="tablamultiplicar"><!--con el id


podemos hacer lo de el link-->
<ul class="menutabla">
<!--DESPLEGABLE DE ARITMETICAAA-->
<li><a href="#">Tabla de Multiplicar</a>
<ul>
<li><a href="#" onclick="mostrarTabla(1)">Tabla del uno</a></li>
<li><a href="#" onclick="mostrarTabla(2)">Tabla del dos</a></li>
<li><a href="#" onclick="mostrarTabla(3)">Tabla del tres</a></li>
<li><a href="#" onclick="mostrarTabla(4)">Tabla del cuatro</a></li>
<li><a href="#" onclick="mostrarTabla(5)">Tabla del cinco</a></li>
<li><a href="#" onclick="mostrarTabla(6)">Tabla del seis</a></li>
<li><a href="#" onclick="mostrarTabla(7)">Tabla del siete</a></li>
<li><a href="#" onclick="mostrarTabla(8)">Tabla del ocho</a></li>
<li><a href="#" onclick="mostrarTabla(9)">Tabla del nueve</a></li>
<li><a href="#" onclick="mostrarTabla(10)">Tabla del uno diez</a></li>

</ul>
</li>
</ul>
</section>

<table border="1" id="tableuno" class="table">

<tr><!--crea una fila-->


<th>Tabla del uno</th><!--encabezado de una columna-->
<th>Resultado</th>
</tr>
<!--*********************************+-->

<tr><!--crea una fila-->


<td>1x1</td><!--crea una celda-->
<td>1</td>
</tr>

<tr>
<td>1x2</td>
<td>2</td>
</tr>

<tr>
<td>1x3</td>
<td>3</td>
</tr>

<tr>
<td>1x4</td>
<td>4</td>
</tr>
<tr>
<td>1x5</td>
<td>5</td>
</tr>

<tr>
<td>1x6</td>
<td>6</td>
</tr>

<tr>
<td>1x7</td>
<td>7</td>
</tr>

<tr>
<td>1x8</td>
<td>8</td>
</tr>

<tr>
<td>1x9</td>
<td>9</td>
</tr>

<tr>
<td>1x10</td>
<td>10</td>
</tr>
</table>

<table border="1" id="tabledos" class="table">

<tr><!--crea una fila-->


<th>Tabla del dos</th><!--encabezado de una columna-->
<th>Resultado</th>
</tr>
<!--*********************************+-->

<tr><!--crea una fila-->


<td>2x1</td><!--crea una celda-->
<td>2</td>
</tr>
<tr>
<td>2x2</td>
<td>4</td>
</tr>

<tr>
<td>2x3</td>
<td>6</td>
</tr>

<tr>
<td>2x4</td>
<td>8</td>
</tr>

<tr>
<td>2x5</td>
<td>10</td>
</tr>

<tr>
<td>2x6</td>
<td>12</td>
</tr>

<tr>
<td>2x7</td>
<td>14</td>
</tr>

<tr>
<td>2x8</td>
<td>16</td>
</tr>

<tr>
<td>2x9</td>
<td>18</td>
</tr>

<tr>
<td>2x10</td>
<td>20</td>
</tr>
</table>

<table border="1" id="tabletres" class="table">

<tr><!--crea una fila-->


<th>Tabla del tres</th><!--encabezado de una columna-->
<th>Resultado</th>
</tr>
<!--*********************************+-->

<tr><!--crea una fila-->


<td>3x1</td><!--crea una celda-->
<td>3</td>
</tr>

<tr>
<td>3x2</td>
<td>6</td>
</tr>

<tr>
<td>3x3</td>
<td>9</td>
</tr>

<tr>
<td>3x4</td>
<td>12</td>
</tr>

<tr>
<td>3x5</td>
<td>15</td>
</tr>

<tr>
<td>3x6</td>
<td>18</td>
</tr>

<tr>
<td>3x7</td>
<td>21</td>
</tr>
<tr>
<td>3x8</td>
<td>24</td>
</tr>

<tr>
<td>3x9</td>
<td>27</td>
</tr>

<tr>
<td>3x10</td>
<td>30</td>
</tr>
</table>

<table border="1" id="tablecuatro" class="table">

<tr><!--crea una fila-->


<th>Tabla del cuatro</th><!--encabezado de una columna-->
<th>Resultado</th>
</tr>
<!--*********************************+-->

<tr><!--crea una fila-->


<td>4x1</td><!--crea una celda-->
<td>4</td>
</tr>

<tr>
<td>4x2</td>
<td>8</td>
</tr>

<tr>
<td>4x3</td>
<td>12</td>
</tr>

<tr>
<td>4x4</td>
<td>16</td>
</tr>

<tr>
<td>4x5</td>
<td>20</td>
</tr>

<tr>
<td>4x6</td>
<td>24</td>
</tr>

<tr>
<td>4x7</td>
<td>28</td>
</tr>

<tr>
<td>4x8</td>
<td>32</td>
</tr>

<tr>
<td>4x9</td>
<td>36</td>
</tr>

<tr>
<td>4x10</td>
<td>40</td>
</tr>
</table>

<table border="1" id="tablecinco" class="table">

<tr><!--crea una fila-->


<th>Tabla del cinco</th><!--encabezado de una columna-->
<th>Resultado</th>
</tr>
<!--*********************************+-->

<tr><!--crea una fila-->


<td>5x1</td><!--crea una celda-->
<td>5</td>
</tr>

<tr>
<td>5x2</td>
<td>10</td>
</tr>

<tr>
<td>5x3</td>
<td>15</td>
</tr>

<tr>
<td>5x4</td>
<td>20</td>
</tr>

<tr>
<td>5x5</td>
<td>25</td>
</tr>

<tr>
<td>5x6</td>
<td>30</td>
</tr>

<tr>
<td>5x7</td>
<td>35</td>
</tr>

<tr>
<td>5x8</td>
<td>40</td>
</tr>

<tr>
<td>5x9</td>
<td>45</td>
</tr>

<tr>
<td>5x10</td>
<td>50</td>
</tr>
</table>

<table border="1" id="tableseis" class="table">

<tr><!--crea una fila-->


<th>Tabla del seis</th><!--encabezado de una columna-->
<th>Resultado</th>
</tr>
<!--*********************************+-->

<tr><!--crea una fila-->


<td>6x1</td><!--crea una celda-->
<td>6</td>
</tr>

<tr>
<td>6x2</td>
<td>12</td>
</tr>

<tr>
<td>6x3</td>
<td>18</td>
</tr>

<tr>
<td>6x4</td>
<td>24</td>
</tr>

<tr>
<td>6x5</td>
<td>30</td>
</tr>

<tr>
<td>6x6</td>
<td>36</td>
</tr>
<tr>
<td>6x7</td>
<td>42</td>
</tr>

<tr>
<td>6x8</td>
<td>48</td>
</tr>

<tr>
<td>6x9</td>
<td>54</td>
</tr>

<tr>
<td>6x10</td>
<td>60</td>
</tr>
</table>

<table border="1" id="tablesiete" class="table">

<tr><!--crea una fila-->


<th>Tabla del siete</th><!--encabezado de una columna-->
<th>Resultado</th>
</tr>
<!--*********************************+-->

<tr><!--crea una fila-->


<td>7x1</td><!--crea una celda-->
<td>7</td>
</tr>

<tr>
<td>7x2</td>
<td>14</td>
</tr>

<tr>
<td>7x3</td>
<td>21</td>
</tr>

<tr>
<td>7x4</td>
<td>28</td>
</tr>

<tr>
<td>7x5</td>
<td>35</td>
</tr>

<tr>
<td>7x6</td>
<td>42</td>
</tr>

<tr>
<td>7x7</td>
<td>49</td>
</tr>

<tr>
<td>7x8</td>
<td>56</td>
</tr>

<tr>
<td>7x9</td>
<td>63</td>
</tr>

<tr>
<td>7x10</td>
<td>70</td>
</tr>
</table>

<table border="1" id="tableocho" class="table">

<tr><!--crea una fila-->


<th>Tabla del ocho</th><!--encabezado de una columna-->
<th>Resultado</th>
</tr>
<!--*********************************+-->

<tr><!--crea una fila-->


<td>8x1</td><!--crea una celda-->
<td>8</td>
</tr>

<tr>
<td>8x2</td>
<td>16</td>
</tr>

<tr>
<td>8x3</td>
<td>24</td>
</tr>

<tr>
<td>8x4</td>
<td>32</td>
</tr>

<tr>
<td>8x5</td>
<td>40</td>
</tr>

<tr>
<td>8x6</td>
<td>48</td>
</tr>

<tr>
<td>8x7</td>
<td>56</td>
</tr>

<tr>
<td>8x8</td>
<td>64</td>
</tr>

<tr>
<td>8x9</td>
<td>72</td>
</tr>

<tr>
<td>8x10</td>
<td>80</td>
</tr>
</table>

<table border="1" id="tablenueve" class="table">

<tr><!--crea una fila-->


<th>Tabla del nueve</th><!--encabezado de una columna-->
<th>Resultado</th>
</tr>
<!--*********************************+-->

<tr><!--crea una fila-->


<td>9x1</td><!--crea una celda-->
<td>9</td>
</tr>

<tr>
<td>9x2</td>
<td>18</td>
</tr>

<tr>
<td>9x3</td>
<td>27</td>
</tr>

<tr>
<td>9x4</td>
<td>36</td>
</tr>

<tr>
<td>9x5</td>
<td>45</td>
</tr>
<tr>
<td>9x6</td>
<td>54</td>
</tr>

<tr>
<td>9x7</td>
<td>63</td>
</tr>

<tr>
<td>9x8</td>
<td>72</td>
</tr>

<tr>
<td>9x9</td>
<td>81</td>
</tr>

<tr>
<td>9x10</td>
<td>90</td>
</tr>
</table>

<table border="1" id="tablediez" class="table">

<tr><!--crea una fila-->


<th>Tabla del diez</th><!--encabezado de una columna-->
<th>Resultado</th>
</tr>
<!--*********************************+-->

<tr><!--crea una fila-->


<td>10x1</td><!--crea una celda-->
<td>10</td>
</tr>

<tr>
<td>10x2</td>
<td>20</td>
</tr>
<tr>
<td>10x3</td>
<td>30</td>
</tr>

<tr>
<td>10x4</td>
<td>40</td>
</tr>

<tr>
<td>10x5</td>
<td>50</td>
</tr>

<tr>
<td>10x6</td>
<td>60</td>
</tr>

<tr>
<td>10x7</td>
<td>70</td>
</tr>

<tr>
<td>10x8</td>
<td>80</td>
</tr>

<tr>
<td>10x9</td>
<td>90</td>
</tr>

<tr>
<td>1x10</td>
<td>100</td>
</tr>
</table>

<script src="[Link]"></script>

</body>
</html>
Buscar

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="[Link]"><!--Conecxion con css y html-->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Buscar Contactos</title>
<link rel="preconnect" href="[Link]
<link rel="preconnect" href="[Link] crossorigin>
<link
href="[Link]
0..700&family=UnifrakturMaguntia&display=swap" rel="stylesheet">
<link
href="[Link]
css"rel="stylesheet">

</head>
<body class="sumapagina">
<header>

<h2>Buscar Contactos</h2>
<nav>

<a href="[Link]#inicio">Inicio</a><!--Esto sirve para hacer un


enlace-->
<a href="[Link]#funcionalidaddelprograma">Funcionalidad del
programa</a><!--Esto sirve para hacer un enlace-->
<a href="[Link]#empezar">Empezar</a><!--Esto sirve para hacer un
enlace-->

</nav>
</header>

<p>Digite el nombre de el contacto que desea buscar</p>


<label>Nombre</label>
<input type="text" id="nombrebuscar"><!--num1division-->
<button onclick="division()">Buscar</button><!--buscaronlick="sumar()" esto
llama la funcion de javascript-->
<p id="resultado"></p><!--esto muestra el resultado-->
<script src="[Link]"></script>
</body>
</html>

También podría gustarte