Embed Size (px)
DESCRIPTION
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. - PowerPoint PPT Presentation
Citation preview
HTML y JAVASCRIPT
Karina Quispe
Caracteristicas
Multiplataforma SimpleEsta en todos lados No es mas que simple textoLibre
Elementos del HTML
EstructuraPresentaciónHipertexto
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
<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
<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
<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)
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 ( 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.
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>
<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-->
<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>
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}
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"><!-- 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>
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>
