jueves, 19 de mayo de 2016

PAGINA DOS

<html>
<head>
<title>pagina heber</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/estilos.css">
</head>
<body>
<table align="center" border="0" width="900" bgcolor="gray" class="table1">
<tr>
<td>
<img src="imagenes/encabezado.jpg" align="center">
</td>
</tr>
<tr>
<td>
<div id="menu">
<a href="mision.html" target="marco"><img src="imagenes/mision.png"></a>
<a href="vision.html" target="marco"><img src="imagenes/vision.png"></a>
<a href="contacto.html" target="marco"><img src="imagenes/contacto.png"></a>
</div>
</td>
</tr>
<tr>
<td>
<iframe name=marco width=100%
height=500 frameborder=0 src="mision.html">
</iframe>
</td>
</tr>
<tr>
<td>
pie de página: Autor Heber Rodriguez
</td>
</tr>
</table>
</body>
</html>
_________________________________________________________________________________
APLICANDO CSS
body {
background-color:#4682B4;
}
/* este es para darle color a toda el cuerpo de la pagina*/

.table1 {
margin-top: 100px;
box-shadow: 5px 5px 15px #000;
}
/* con esta opcion el margen de la tabla de arriba*/
#menu {
height: 100px;
text-align:center;
width: 900px;
}
/*desde aqui el menu le damos un alto un ancho y alineamos el texto al centro del menu*/
#menu a {
display: inline-block;
width: 150px;
}
/*esta opcion es para colocar el menu en linea y tener una separción de 150px por cada uno*/
#menu a img {
height: 75px;
width: 75px;
}
/* con esta opcion le estoy diciendo  a la imagen del menu el tamaño y ancho que tendra*/

#menu a:hover img {
height: 100px;
width: 100px;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
/* efecto al menu cuando pasamos el mouse*/
.titulo {
font-family: "Arial";
font-size: 40px;
text-align: center;
width: 100%;
}

.texto {
font-family: "Arial";
font-size: 20px;
line-height: 35px;
text-align: center;
}

.campo {
background: blue;
color: #FFF;
font-family: "Tahoma";
}

.campo:hover {
background: #f60;
box-shadow: 5px 5px 15px #000;
}

lunes, 9 de mayo de 2016

formulario sencillo

<!DOCTYPE html>
<html>
<head>
<title>

</title>
<meta charset="utf-8">
</head>
<body>
<form action="guardar.php" method=POST>
<table border=2 width=400 align=center>
<tr>
<td>nombre</td>
<td> <input type="text" required name="nombre" size=44px placeholder="ingresa tu primer nombre">  </td>
</tr>
<tr>
<td>grado</td>
<td> <input type="text" required name="grado" placeholder="ingrese el grado academico" > </td>
</tr>
<tr>
<td>edad</td>
<td> <input type="text" required name="edad" placeholder="ingrese la edad de la persona"></td>
</tr>
<tr>
<td colspan=2 align="center">
<button type="submit">GUARDAR</button>
</td>
</tr>
</table>
</form>
</body>
</html>

viernes, 6 de mayo de 2016

insertar datos

<?php
include("conexion.php")
$nombre= $_POST['nombre'];
$grado= $_POST['grado'];
$edad= $_POST['edad'];
$query="INSERT INTO alumnos(nombre,grado,edad)VALUES('$nombre','$grado','$edad')";
$resultado= $conexion->query($query);

if($resultado){
echo "<script>alert('los datos fueron enviados exitosamente'); location.href='index.html'</script>";

}
else
{
 echo"error al insertar dato";
}

?>