HTML y JAVASCRIPT
description
Transcript of HTML y JAVASCRIPT
![Page 1: HTML y JAVASCRIPT](https://reader036.fdocuments.fr/reader036/viewer/2022083006/56813bee550346895da51d3d/html5/thumbnails/1.jpg)
HTML y JAVASCRIPT
Karina Quispe
![Page 2: HTML y JAVASCRIPT](https://reader036.fdocuments.fr/reader036/viewer/2022083006/56813bee550346895da51d3d/html5/thumbnails/2.jpg)
Caracteristicas
Multiplataforma SimpleEsta en todos lados No es mas que simple textoLibre
![Page 3: HTML y JAVASCRIPT](https://reader036.fdocuments.fr/reader036/viewer/2022083006/56813bee550346895da51d3d/html5/thumbnails/3.jpg)
Elementos del HTML
EstructuraPresentaciónHipertexto
![Page 4: HTML y JAVASCRIPT](https://reader036.fdocuments.fr/reader036/viewer/2022083006/56813bee550346895da51d3d/html5/thumbnails/4.jpg)
Etiquetas
La estructura básica de un documento HTML incluye etiquetas, que rodean el contenido y le aplican formato.
![Page 5: HTML y JAVASCRIPT](https://reader036.fdocuments.fr/reader036/viewer/2022083006/56813bee550346895da51d3d/html5/thumbnails/5.jpg)
Agregamos el titulo con este comando
<body bgcolor=# text=# link=# vlink=# alink=# background=""> </body>
Entre estos parámetros se escribe todo el texto de la página, el cuerpo del documento (BODY). Con estos comandos se define el color general de: bgcolor=# color del fondo de la página, este color puede ser cambiado
por un fondo, (background) text=# es el color del texto general de la página link=# color del texto con link
![Page 6: HTML y JAVASCRIPT](https://reader036.fdocuments.fr/reader036/viewer/2022083006/56813bee550346895da51d3d/html5/thumbnails/6.jpg)
<br> Este comando sirve para insertar un salto de línea dentro de la página.
<p> </p> Con este comando agregamos un salto de párrafo dentro del contenido.
<h!!> </h!!> Encabezados que especifica el tipo de título con un número del 1 al 6 en vez
de !!, especificando la importancia del título.
![Page 7: HTML y JAVASCRIPT](https://reader036.fdocuments.fr/reader036/viewer/2022083006/56813bee550346895da51d3d/html5/thumbnails/7.jpg)
Imagenes
<img src="$$" >
Este comando inserta imágenes dentro del documento html, y “$$ ” especifica la ruta de la imagen.
<img src="$$" align=" " >
align Detalla el alineamiento que tendría la imagen (derecho=right, izquierdo=left y centrado=center)
![Page 8: HTML y JAVASCRIPT](https://reader036.fdocuments.fr/reader036/viewer/2022083006/56813bee550346895da51d3d/html5/thumbnails/8.jpg)
Enlaces (Links)
<a href="$$"> </a> Sirve para realizar direccionamiento a nuevas páginas webs, LINKS, y “$$ ” especifica la dirección a donde conducirá el enlace.
![Page 9: HTML y JAVASCRIPT](https://reader036.fdocuments.fr/reader036/viewer/2022083006/56813bee550346895da51d3d/html5/thumbnails/9.jpg)
Tablas
<table> define la tabla <tr></tr> Define una fila de la tabla <td></td> Define una columna
de la tabla
![Page 10: HTML y JAVASCRIPT](https://reader036.fdocuments.fr/reader036/viewer/2022083006/56813bee550346895da51d3d/html5/thumbnails/10.jpg)
Repaso de css
CSS ( cascading style sheet )Las hojas de estilo consisten en la
creación de estilos propios dentro de las páginas web, o en un archivo separado que será invocado.
![Page 11: HTML y JAVASCRIPT](https://reader036.fdocuments.fr/reader036/viewer/2022083006/56813bee550346895da51d3d/html5/thumbnails/11.jpg)
Aplicación Lista de Prductoshtml><head ><title> Mi primera pagina </title>
<!-- <LINK href="miestilo.css" rel="stylesheet" type="text/css"> --><!-- referencia hoja de estilo externo para este html --></head><body ><table border ="1" align="center" ><caption><b>Mis Productos</b></caption><thead> <!-- cabecera de la tabla--><tr> <!-- fila de la tabla-->
<th>item</th> <!-- titulo de la cabecera de la celda--><th>producto</th><th>precio</th><th>foto</th><th>opcion</th>
</tr></thead>
![Page 12: HTML y JAVASCRIPT](https://reader036.fdocuments.fr/reader036/viewer/2022083006/56813bee550346895da51d3d/html5/thumbnails/12.jpg)
<tbody> <!-- cuerpo de la tabla--><tr>
<td>1</td><td >jabon</td><td>$1.00</td><td><img src="jabon.jpg" /></td><td>comprar</td>
</tr><tr>
<td>2</td><td>champo</td><td>$2.00</td><td><img src="champo.jpg" /></td><td><comprar></td>
</tr><tr>
<td>3</td><td>crema</td><td>$4.00</td><td><img src="crema.jpg"/></td><td>comprar</td>
</tr></tbody> <!-- fin del cuerpo de la tabla--></table> <!-- fin de la tabla-->
![Page 13: HTML y JAVASCRIPT](https://reader036.fdocuments.fr/reader036/viewer/2022083006/56813bee550346895da51d3d/html5/thumbnails/13.jpg)
<div align="center"><!-- etiqueta de contenido Div para el centrado-->
Escribeme <a
href="mailto:[email protected]">[email protected]</a><br/><!-- Link a correo electronico -->
<a href="http://www.google.com.pe" ><img ID = "imagen" src="GOO.jpg"/></a><!-- Link a google con imagen -->
</div></body> <!-- fin del cuerpo del html--></html>
![Page 14: HTML y JAVASCRIPT](https://reader036.fdocuments.fr/reader036/viewer/2022083006/56813bee550346895da51d3d/html5/thumbnails/14.jpg)
miestilo.css
table {width:500px} thead {background-
color:black;color:white;height:25px;width:1000px}
tbody {color:blue;height:50px;text-align:center;width:1000px}
td img {height:25px;width:50px}#imagen {height:25px;width:50px}body {background-color:#F3A645}
![Page 15: HTML y JAVASCRIPT](https://reader036.fdocuments.fr/reader036/viewer/2022083006/56813bee550346895da51d3d/html5/thumbnails/15.jpg)
Javascript Javascript diferente Java
Desarrollado por Netscape
Su propósito es crear paginas web dinámicas.
Ampliamente usado
![Page 16: HTML y JAVASCRIPT](https://reader036.fdocuments.fr/reader036/viewer/2022083006/56813bee550346895da51d3d/html5/thumbnails/16.jpg)
Ejemplo script
Poner este script en el código listaproducto.hml dentro del cuerpo de head
<script languaje="Javascript"><!-- oculta el script a los browsers no compatible
function comprar(){
cantidad=prompt("Introdusca la cantidad a comprar", 0);alert("Se agrego "+cantidad);
}
//fin del script--></script>
![Page 17: HTML y JAVASCRIPT](https://reader036.fdocuments.fr/reader036/viewer/2022083006/56813bee550346895da51d3d/html5/thumbnails/17.jpg)
Agregar este código después de la columna imagen para cada producto de la tabla.
<td><input type="button" value="comprar" onclick ="comprar()"/></td>
![Page 18: HTML y JAVASCRIPT](https://reader036.fdocuments.fr/reader036/viewer/2022083006/56813bee550346895da51d3d/html5/thumbnails/18.jpg)