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 • La estructura básica de un documento HTML incluye etiquetas, que rodean el contenido y le aplican formato.

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

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

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)

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.

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

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.

Aplicación Lista de Prductos html> <head > <title> Mi primera pagina </title>   </head> <body > <tableborder ="1" align="center" > <caption><b>Mis Productos</b></caption> <thead>  <tr>  <th>item</th>  <th>producto</th> <th>precio</th> <th>foto</th> <th>opcion</th> </tr> </thead>

<tbody>  <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>  </table>

<divalign="center"> Escribeme <a href="mailto:kcquispe@pucp.edu.pe">kcquispe@pucp.edu.pe</a><br/> <a href="http://www.google.com.pe" ><img ID = "imagen" src="GOO.jpg"/></a> </div> </body>  </html>

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}

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

Ejemplo script Poner este script en el código listaproducto.hml dentro del cuerpo de head <script languaje="Javascript">  </script>

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>

HTML y JAVASCRIPT