1 / 18

HTML y JAVASCRIPT

Karina Quispe. HTML y JAVASCRIPT. Caracteristicas. Multiplataforma Simple Esta en todos lados No es mas que simple texto Libre. Elementos del HTML. Estructura Presentación Hipertexto. Etiquetas.

evers
Télécharger la présentation

HTML y JAVASCRIPT

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Karina Quispe HTML y JAVASCRIPT

  2. Caracteristicas • Multiplataforma • Simple • Esta en todos lados • No es mas que simple texto • Libre

  3. Elementos del HTML • Estructura • Presentación • Hipertexto

  4. Etiquetas • La estructura básica de un documento HTML incluye etiquetas, que rodean el contenido y le aplican formato.

  5. Agregamos el titulo con este comando • <bodybgcolor=# 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

  6. <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.

  7. Imagenes • <imgsrc="$$" > Estecomando inserta imágenes dentro del documento html, y “$$ ” especifica la ruta de la imagen. • <imgsrc="$$" align=" " > align Detalla el alineamiento que tendría la imagen (derecho=right, izquierdo=left y centrado=center)

  8. 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.

  9. Tablas • <table> define la tabla • <tr></tr> Define una fila de la tabla • <td></td> Define una columna de la tabla

  10. Repaso de css • CSS ( cascadingstylesheet ) 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.

  11. Aplicación Lista de Prductos html> <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 > <tableborder ="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>

  12. <tbody> <!-- cuerpo de la tabla--> <tr> <td>1</td> <td >jabon</td> <td>$1.00</td> <td><imgsrc="jabon.jpg" /></td> <td>comprar</td> </tr> <tr> <td>2</td> <td>champo</td> <td>$2.00</td> <td><imgsrc="champo.jpg" /></td> <td><comprar></td> </tr> <tr> <td>3</td> <td>crema</td> <td>$4.00</td> <td><imgsrc="crema.jpg"/></td> <td>comprar</td> </tr> </tbody> <!-- fin del cuerpo de la tabla--> </table> <!-- fin de la tabla-->

  13. <divalign="center"><!-- etiqueta de contenido Div para el centrado--> Escribeme <a href="mailto:kcquispe@pucp.edu.pe">kcquispe@pucp.edu.pe</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>

  14. 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} tdimg {height:25px;width:50px} #imagen {height:25px;width:50px} body {background-color:#F3A645}

  15. Javascript • Javascript diferente Java • Desarrollado por Netscape • Su propósito es crear paginas web dinámicas. • Ampliamente usado

  16. 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>

  17. 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>

More Related