Proyecto Guia

MATERIAL DE APOYO CODIFICACIONES HTML , CSS, PHP
INTRODUCCION AL DESARROLLO DE APLICACIONES WEB Y ORIENTADAS A SERVICIOS
CODIGO HTML SIRVE PARA

<!DOCTYPE html> Crea una etiqueta para un formulario
<html lang="es"> contiene el encabezado de inicio (head) en
<head> apertura para con el código Title Agregar
Etiqueta , seguido de la configuración mas
<title> ETIQUETA DE TITULO </title> común de la red caracteres de 8 bits, asi
como la apertura y cierre de las sentencias
<meta charset="utf-8"> body e inicio de Html
<meta name="viewport"content="width=device-witdth, user-scalable=no, initial-scale=1,
maximum-scale=1,minimum-scale=1">
<link rel="stylesheet" href="estilos.css">

</head>
<body>
</body>
</html>
<!DOCTYPE html> Trabajando con el body , se agregan las cajas

<html lang="es"> de texto con input type , aisgnando la
<head> etiqueta de Usuario y Contraseña en el
evento name – se implementa
<title> ETIQUETA DE TITULO (LOGIN) </title> placeholder="&#1974454” como carácter
Unicode en el campo de Usuario y
<meta charset="utf-8"> contraseña , se consulta UNICODE-
<meta name="viewport"content="width=device-witdth, user-scalable=no, initial-scale=1, TABLE.COM para poder hacer referencia de
maximum-scale=1,minimum-scale=1"> la letra Unicode, se crea un evento submit
que corresponde a un botón de acción
<link rel="stylesheet" href="estilos.css"> llamado INGRESAR
</head>
<body> Se agrega al final el método form action
<form action="bd.php" method="post"> db.php para enlace a php
<h2> LOGIN DE INGRESO </h2>
<input type="text" placeholder=" ⌨ Usuario" name=Usuario">
<input type="password" placeholder=" ⌨ Contraseña " name="Contraseña">
<input type="submit" value="INGRESAR">

</form>
</body>
</html>
<!DOCTYPE html> Alineación de elementos desde html

<html lang="es"> utilizando la función de Center para los
<head> elementos input type
<title> ETIQUETA DE TITULO </title>
<meta charset="utf-8">
<meta name="viewport"content="width=device-witdth, user-scalable=no, initial-scale=1,
maximum-scale=1,minimum-scale=1">
<center ><h1> ALINEACION DE ELEMENTOS DEL FORMULARIO EN HTML </h1>

<br>
<br>
<input type="text" placeholder="&#1974454; Usuario" name=Usuario"/><br>
<input type="password" placeholder="򡈑 Contraseña "
name="Contraseña"/><br>
</center>
</body>
</html>
CODIGO CSS PROPIEDADES DE LAS TAG DE HTML BASICOS SIRVE PARA
{
margin: 0;
Input [type="submit"]
padding: 0;
{
font-family: sans-serif; Aplicamos los estilos a la ventana de
background: linear-gradient(#d4e4ef, #86aecc);
box-sizing: border-box; formulario tomando en cuenta el ancho , los
border :0;
} px ( Pixels ) definen el tamaño de la ventana
color:beige; en conjunto con padding y la función max
opacity: 0.8;
body width con un borde semi transparente.
cursor: pointer;
{ con margin: 0 auto; se centran las cajas de
border-radius: 10px;
background: #DEDEDE; texto y botón submit
margin-bottom: 0;
display: flex;
text-align: center;
min-height: 100vh; Se agrega estilo a un elemento input Type
}
} que es el botón código submit con las
propiedades de color o forma de manera
Input [type="submit"]:hover
form orgánica, sin acentuar colores .
{
{ background: linear-
margin: auto; opacity: 1; gradient(#FFDA64,#FFB940); color azul
}
width: 20%; gradient , se recomienda generar el color
max-width: 500px; desde www.cssmatic.com/es/gradient-
Input [type="submit"]:active
background: #F3F3F3; generator#'\
{
padding: 30px;
transform: scale(0.95);
border-radius: 20px;
}
border: 1px solid rgba(0,0,0,0.2) Las líneas de input type te permiten asignar
} @media(max-width:760px) un evento al objeto submit utilizando la
{ propiedad opacity como un efecto de
Input form { transparencia asi como la propiedad
{ width: 75%; transfom :scale para acentuar el tamaño del
text-align: left; } objeto submit
display: block; } margin: 0 auto;
padding: 10px ; margin-bottom: 20px;
Width: 60%; @media(max-width:490px) Para centrar y espaciado de los objetos
margin: 0 auto; {
margin-bottom: 20px; form {
border-radius: 10px; width: 95%;
font-size:15px; }
} }
<!DOCTYPE html> Una pantalla debe realizarse de modo
<html> ADAPTATIVO O RESPONSIVE como parte del
<head> diseño web y esta pueda consultarse desde
<style> cualquier dispositivo y tenga una correcta
body { visualización para ellos podemos utilizar el
background-color: tan; código :
color: black;
}
@media(max-width:760px)
{
@media screen and (max-width: 992px) {
form {
body {
width: 75%;
background-color: blue;
}
color: white;
}
}
}
@media(max-width:490px)
{
@media screen and (max-width: 600px) {
form {
body {
width: 95%;
background-color: olive;
}
color: white;
}
}
}
</style>
</head>
<body>
<h1>compila el código y observa que los tamaños al ser responsivos cambian de color<h1>
<p>”los cambios se dan en 3 colores , arena , azul y verde".</p>
</body>
</html>
CODIGO PHP PARA VALIDACION DEL FORMULARIO Y LEVANTAMIENTO DE LA BASE DE DATOS
<?php
$USUARIO=$_POST['USUARIO']; SE PROPORCIONA CODIGO DE PRUEBA DE
$PASS=$_POST['PASS']; CONECTIVIDAD :
$conexion=mysqli_connect("localhost","root","","bdlogin"); <?php
$consulta="SELECT * FROM usuarios WHERE USUARIO='$USUARIO'and PASS='$PASS'"; $conexion =mysqli_connect
$resultado=mysqli_query($conexion, $consulta); ("localhost","root","","bdlogin");
if (!$conexion){
echo 'no conectado a BD';
$filas=mysqli_num_rows($resultado); }
else {
if ($filas>0) { echo 'conectado a BD';
header("location:acceso.html"); }
}
else
{
echo"Usuario no valido"; NOTA: SI EJECUTA ERROR DESDE BRAKETS ,
} VISTA DINAMICA , COPIAR LA CARPETA DE
mysqli_free_result($resultado); PROYECTO HASTA LA RUTA DE
mysqli_close($conexion); C:/XAMM/HTDOCS/ Y REDIRECCIONAR
MEDIANTE EL NAVEGADOR .

Proyecto Guia

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Proyecto Guia

Загружено:

Авторское право:

Доступные форматы

MATERIAL DE APOYO CODIFICACIONES HTML , CSS, PHP

INTRODUCCION AL DESARROLLO DE APLICACIONES WEB Y ORIENTADAS A SERVICIOS

CODIGO HTML SIRVE PARA

<link rel="stylesheet" href="estilos.css">

<!DOCTYPE html> Trabajando con el body , se agregan las cajas

<input type="submit" value="INGRESAR">

<!DOCTYPE html> Alineación de elementos desde html

<title> ETIQUETA DE TITULO </title>

<center ><h1> ALINEACION DE ELEMENTOS DEL FORMULARIO EN HTML </h1>

Вам также может понравиться