Scribd
Upload
14 views

Reporte Práctica HTML, PHP. CSS

Uploaded by

clovergp1417
Copyright
© © All Rights Reserved
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
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