Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
14 views

Reporte Práctica HTML, PHP. CSS

Uploaded by

clovergp1417
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
14 views

Reporte Práctica HTML, PHP. CSS

Uploaded by

clovergp1417
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 16

Colegio Nacional de Educación Profesional Técnica

Plantel Veracruz II

Reporte Práctica HTML, PHP, CSS

Alumno: Jorge enrique mariscal luengas

Modulo: Análisis y Diseño de Sistemas de Información (ADSI)

Docente: Judith Araminta Cruz Nieto

Grupo: 502-Info18
Código de la Práctica (index.php)
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Página Ejemplo</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/6.4.0/css/all.min.css" integrity="sha512-
iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel = "stylesheet" href = "style.css">
</head>
<body>
<header class ="header">
<div class= "menu conteiner">
<a href = "#" class="logo">logo</a>
<input type = "checkbox" id="menu" />
<label for= "menu">
<img src = "imagenes/59165.png" class="menu-icono" alt="menu">
</label>

<nav class = "navbar">


<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#1">Nosotros</a></li>
<li><a href="#2">Servicio</a></li>
<li><a href="#3">Contacto</a></li>
</ul>
</nav>
</div>

<div class="header-content container">


<div class ="header-txt">
<h1>Conalep</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Assumenda animi rerum corporis eius eveniet incidunt non
earum modi. Officia corrupti porro alias inventore atque
consequuntur ipsa quis a, deleniti mollitia?
</p>
<a href ="#" class="btn-1">informacion</a>
</div>
<div class="header-img">
<img src="imagenes/alumno.jpg" alt="Alumno">
</div>
</div>
</header>

<section class = "about countainer">


<div class="about-img">
<img src ="imagenes/conalep2.png" alt="Foto Escuela">
</div>
<div class="about-txt">
Jorge enrique mariscal luengas 502-Info18
<h2 id="1">Nosotros</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Officia facilis dignissimos odio placeat incidunt et eum
distinctio consequuntur ipsam omnis sint quos dolorum soluta
reiciendis, eaque esse minus magnam. Deserunt!
</p>
<br>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Quia dolores recusandae expedita ad eligendi. Corporis eius,
hic repellendus atque eos fugit nam impedit quia pariatur
mollitia voluptatem delectus velit voluptatibus.
</p>
</div>
</section>

<main class ="servicios">


<h2 id="2">Servicios</h2>
<div class ="servicios-content container">
<div class = "servicio-1">
<i class="fa-solid fa-user"></i>
<h3>Alumnos</h3>
</div>
<div class = "servicio-1">
<i class="fa-solid fa-person-chalkboard"></i>
<h3>Clases</h3>
</div>
<div class = "servicio-1">
<i class="fa-solid fa-building-columns"></i>
<h3>Materias</h3>
</div>
<div class = "servicio-1">
<i class="fa-solid fa-check"></i>
<h3>Evaluacion</h3>
</div>
</div>
</main>

<section class = "formulario container">


<form method="post" autocomplete="off">
<h2 id="3">Contacto</h2>
<div class="input-group">
<div class="input-container">
<input type ="text" name ="name" placeholder="Nombre y Apellido">
<i class="fa-solid fa-user"></i>
</div>
<div class="input-container">
<input type ="tel" name ="phone" placeholder="Telefono">
<i class="fa-solid fa-phone"></i>
</div>
<div class="input-container">
<input type ="email" name ="email" placeholder="Correo">
<i class="fa-solid fa-envelope"></i>

Jorge enrique mariscal luengas 502-Info18


</div>
<div class="input-container">
<textarea name ="message" placeholder="¿Cuál es tu duda?"></textarea>
<i class="fa-solid fa-comment"></i>
</div>
<input type="submit" name="send" class="btn" value="Guardar y Enviar">
</div>
</form>
</section>

<footer class="footer">
<div class ="footer-content container">
<div class ="link">
<a href="#" class="logo">logo</a>
</div>
<div class="link">
<ul>
<li><a href = "#">Inicio</a></li>
<li><a href = "#1">Nosotros</a></li>
<li><a href = "#2">Servicios</a></li>
<li><a href = "#3">Contacto</a></li>
</ul>
</div>
</div>
</footer>

<?php
include("send.php");
?>

</body>
</html>

Código de la Práctica (conexion.php)


<?php
$conex=mysqli_connect("localhost","root", "", "escuela_practica");
?>

Código de la Práctica (send.php)


<?php

include ("conexion.php");

if(isset($_POST['send'])){
if(strlen($_POST['name'])>=1 &&
strlen($_POST['phone'])>=1 &&
strlen($_POST['email'])>=1 &&
strlen($_POST['message'])>=1

Jorge enrique mariscal luengas 502-Info18


){
$name=trim($_POST['name']);
$phone=trim($_POST['phone']);
$email=trim($_POST['email']);
$message=trim($_POST['message']);
$consulta="INSERT INTO datos(nombre, telefono, email, mensaje)
VALUES ('$name', '$phone', '$email', '$message')";
$resultado=mysqli_query($conex, $consulta);
if($resultado){
?>
<h3 class="sucess">Tu registro se inserto correctamente</h3>
<?php
} else {
?>
<h3 class="error">Ocurrio un error!!!!</h3>
<?php
}
} else {
?>
<h3 class="error">Llenar todos los campos</h3>
<?php
}
}
?>

Código de la Práctica (style.css)


@import
url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&displa
y=swap');

*{
margin:0;
padding:0;
box-sizing: border-box;
text-decoration: none;
list-style: none;
}

body{
font-family: "Poppins", sans-serif;
}

img{
max-width: 100%;
}

.container{
max-width: 1100px;
Jorge enrique mariscal luengas 502-Info18
margin: 0 auto;
}

.header{
background-color: #FAFAFA;
padding: 150px 0 100px 0;
min-height: 70vh;
display: flex;
align-items: center;
}

.menu{
position: absolute;
top: 0;
left: 0;
right: 0;
display: flex;
align-items: center;
justify-content: space-between;
}

.menu .navbar ul li{


position: relative;
float: left;
}

.menu .navbar ul li a{
font-size: 18px;
padding: 20px;
color: #323232;
display: block;
}

.menu .navbar ul li a:hover{


color: seagreen;
}

.logo{
font-size: 25px;
font-weight: 800;
color: seagreen;
text-transform: uppercase;
}

#menu{
display: none;
}

.menu-icono {
Jorge enrique mariscal luengas 502-Info18
width: 25px;
}

.menu label{
cursor: pointer;
display:none ;
}

.header-content{
display: flex;
}

.header-txt{
width: 50%;
}

.header-txt h1{
line-height: 1;
color: #323232;
text-transform: uppercase;
font-size: 75px;
margin-bottom: 10px;
}

.header-txt p{
font-size: 16px;
text-align: justify;
padding: 0 30px 0 0;
color: #323232;
margin-bottom: 45px;
}

.header-img{
width: 50%;
}

.btn-1{
display: inline-block;
padding: 11px 25px;
background-color: seagreen;
color: #ffffff;
border-radius: 15px;
}

.about{
padding: 100px 0;
display: flex;
}

Jorge enrique mariscal luengas 502-Info18


.about-img{
width: 50%;
}

.about-img img{
width: 500px;
border-radius: 15px;
}

.about-txt{
width: 50%;
text-align: justify;
padding: 0 30px 0 0;
margin-left: 25px;
}

.about-txt h2{
color: #323232;
font-size: 50px;
margin-bottom: 15px;
}

.about-txt p{
font-size: 16px;
color:#323232;
}

.servicios{
padding: 50px 0 100px 0;
text-align: center;
background-color: #FAFAFA;
}

.servicios h2{
color: #323232;
font-size: 50px;
margin-bottom: 15px;
}

.servicios-content{
margin-top: 55px;
display: flex;
justify-content: space-between;
}

.servicio-1{
padding: 25px;
box-shadow: 0 0 20px rgba(0,0,0,0.1);
flex-basis: calc(25% - 20px);
Jorge enrique mariscal luengas 502-Info18
}

.servicio-1 i{
font-size: 30px;
color: seagreen;
margin-bottom: 15px;
}

.servicio-1 h3{
font-size: 20px;
color: #323232;
text-transform: capitalize;
}

.formulario{
margin-top: 100px;
margin-bottom: 100px;
display: flex;
justify-content: center;
align-items: center;
}

form{
padding: 50px;
width: 500px;
text-align: center;
box-shadow: 0 0 20px rgba(0,0,0,0.2);
}

form h2{
font-size: 25px;
color: #323232;
text-transform: uppercase;
margin-bottom: 35px;
}

.input-container{
position: relative;
}

.input-container>i{
padding: 14px;
border-radius: 50%;
background-color: seagreen;
color: #FAFAFA;
position: absolute;
font-size: 20px;
top: 4px;
left: 5px;
Jorge enrique mariscal luengas 502-Info18
}

.input-container>input, textarea{
padding: 17px 15px 17px 65px;
width: 100%;
margin-bottom: 25px;
border-radius: 35px;
background-color: transparent;
border: 2px solid #323232;
font-size: 16px;
outline:none;
color: #323232;
}

textarea{
font-family: "Poppins", sans-serif;
height: 150px;
}

::placeholder{
color: #323232;
font-size: 16px;
}

.btn{
background-color:seagreen;
padding: 17px 30px;
width: 100%;
border: 0;
box-shadow: 0 0 20px rgb(0,0,0,0.2);
border-radius: 25px;
color: #FAFAFA;
font-size: 15px;
cursor: pointer;
}

.footer{
padding: 50px;
background-color: #FAFAFA;
}

.footer-content{
display: flex;
align-items: center;
justify-content: space-between;
}

.link ul{
display: flex;
Jorge enrique mariscal luengas 502-Info18
align-items: center;
justify-content: space-between;
}

.link ul li{
margin-right: 50px;
}

.link ul li a{
color: #323232;
font-size: 17px;
}

.link ul li a:hover{
color: seagreen;
}

.sucess{
position: absolute;
top: 50px;
color: green;
font-size: 18px;
}

.error{
position: absolute;
top: 50px;
color: red;
font-size: 18px;
}

@media (max-width: 991px){


.menu{
padding: 20px;
}

.menu label{
display: initial;
}

.menu .navbar{
position: absolute;
top: 100%;
left: 0;
right: 0;
background-color: #FAFAFA;
display: none;
}

Jorge enrique mariscal luengas 502-Info18


.menu .navbar ul li{
width: 100%;
}

#menu:checked ~ .navbar{
display: initial;
}

.header{
min-height: 0vh;
padding: 80px 30px 50px;
}

.header-content{
flex-direction: column;
}

.header-txt{
text-align: center;
width: 100%;
margin-bottom: 25px;
}

.header-img{
width: 100%;
}

.header-img img{
width: 100%;
}

.about{
padding: 30px;
flex-direction: column;
}

.about-img{
width: 100%;
order: 2;
}

.about-img img{
width: 100%;
}

.about-txt{
width: 100%;
margin-left: 0;
text-align: center;
Jorge enrique mariscal luengas 502-Info18
margin-bottom: 25px;
}

.servicios{
padding: 30px;
}

.servicios-content{
margin-top: 25px;
flex-direction: column;
}

.servicio-1{
margin-bottom: 20px;
}

.formulario{
padding: 30px;
margin-top: 0;
margin-bottom: 0;
}

form{
width: 100%;
}

.footer{
padding: 30px;
}

.footer-content{
flex-direction: column;
text-align: center;
}

.link ul{
flex-direction: column;
}

.linkul ul li{
margin: 0 0 15px 0;
}
}

Jorge enrique mariscal luengas 502-Info18


5 propiedades del código de CSS, especificar la sintaxis y para qué sirve
1. margin
- Sintaxis: margin: 0 auto;
- Propósito: Ajusta los márgenes de un elemento. En este caso, 0 define márgenes superior e inferior en 0, mientras que auto centra el
elemento horizontalmente dentro de su contenedor al igualar los márgenes izquierdo y derecho.

2. font-family
- Sintaxis: font-family: "Poppins", sans-serif;
- Propósito: Especifica la fuente para el texto de un elemento. Si "Poppins" no está disponible, el navegador usará una fuente genérica sans-
serif.

3. display
- Sintaxis: display: flex;
- Propósito: Cambia la forma en que un elemento se comporta en el flujo del documento. Con flex, el elemento utiliza el modelo de diseño
flexible, permitiendo alinear y distribuir elementos hijos de manera eficiente.

4. box-shadow
- Sintaxis: box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
- Propósito: Agrega una sombra alrededor de un elemento. En este caso, crea una sombra difusa con un efecto translúcido al usar rgba.

5. @media
- Sintaxis: @media (max-width: 991px) { ... }
- *Propósito:* Implementa estilos responsivos según el ancho del dispositivo. Aquí, los estilos definidos se aplican solo si el ancho de la
pantalla es igual o inferior a 991 píxeles.
¿Para qué sirve el archivo “conexion.php”?

El archivo conexion.php tiene como objetivo establecer una conexión entre las páginas PHP y la base de datos escuela_practica mediante la
extensión *MySQLi* de PHP. Este archivo centraliza los parámetros de conexión como el servidor, nombre de usuario, contraseña y nombre
de la base de datos. Esto permite ejecutar consultas SQL, realizar operaciones como inserciones, actualizaciones, eliminaciones y recuperar
datos almacenados en la base de datos.

línea de código donde sr inserta un registro a la BD


Es en el código de “send.php” y es la clave para insertar un registro:
$consulta="INSERT INTO datos(nombre, telefono, email, mensaje)
VALUES ('$name', '$phone', '$email', '$message')";

Esta línea prepara la consulta SQL para insertar los valores capturados del formulario ($name, $phone, $email, $message) en la tabla datos
de la base de datos. Luego, la consulta es ejecutada por:
$resultado=mysqli_query($conex, $consulta);

Jorge enrique mariscal luengas 502-Info18


Capturas de la Ejecución de la Pagina Web

Jorge enrique mariscal luengas 502-Info18


Menú desplegable

Captura de la Base de Datos de “escuela_practica”

Jorge enrique mariscal luengas 502-Info18

You might also like