Foros aprenderaprogramar.com
Aprender a programar => C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más => Mensaje iniciado por: anarubia en 22 de Diciembre 2015, 20:15
-
Hola, feliz navidad. Tengo un archivo.php que quiero maquetar en html5, pero no tengo muy claro donde cerrar el header dentro del body y abrir un section. He puesto un par de divs para darle css al archivo, y ahora solo me falta maquetarlo en html5. ¿ Me podeis decir donde sería lo correcto cerrar el header dentro del body y abrir section?. Gracias de antemano
<!DOCTYPE html>
<html lang="en">
<title>PROCESAR</title>
<head>
<style type="text/css">
body{
background-image:url("imagenes/tecnologia.jpg");
}
#ok,#ko,#alert{background:black;
height:200px;
color:red;
margin:100px 400px 100px;
height:150px;
width:35%;
font-size:20px;
padding-top:15px;
}
</style>
</head>
<body>
<?php
include("conexion.php");
if(isset($_POST['usuario']) && preg_match("/^[a-z]{3,10}$/",($_POST['usuario']))&&
isset($_POST['email'])&& $email=filter_input(INPUT_POST, 'email', FILTER_VALIDATE_EMAIL)){
$usuario=$_POST['usuario'];
$email=$_POST['email'];
$conexion=conectarse();
$sql='SELECT * FROM inscripcion WHERE email="'.$email.'"';
$resultado=$conexion->query($sql);
if($resultado->num_rows>0){
echo'<div id="ko">El Email ya existe,introduce otro</div>';
echo '<div id="ok" style=display:none>';
echo'<meta http-equiv="Refresh" content="5; URL=http://localhost:8888/prueba/porculo.html">';
}else{
$sql='INSERT INTO inscripcion(usuario, email,estado)values ("'.$usuario.'","'.$email.'","desactivado")';
$resultado=$conexion->query($sql);
if($resultado){
echo'<div id="alert">Usuario Registrado. Recibiras un email de verificacion en tu correo</div>';
echo'<div id="ko,ok" style=display:none>';
echo'<meta http-equiv="Refresh" content="7;URL=http://localhost:8888/prueba/porculo.html">';
$para=$_POST['email'];
$asunto="Confirmación de Subscripción al Blog de Ana Castro López";
$mensaje="<html lang='es'>
<head>
<title>Link de Activación de subscripción al Blog de Ana Castro López</title>
<meta charset='UTF-8'/>
</head>
<body>
Gracias por subscribirte a mi Blog. Haz click en el siguiente enlace para confirmar la subscripción
<a href='http://anacastrolopez.es/verificar.php?email=$email'>Activar</a>
</body>
</html>";
$cabeceras="MIME-Version: 1.0" . "\r\n";
$cabeceras.= "Content-type:text/html;charset=UTF-8" . "\r\n";
$cabeceras.=" From: <anachanelblanc@gmail.com" ."\r\n";
mail($para,$asunto,$mensaje,$cabeceras);
}
}
}
?>
<div id="ok">
<?php
$errores=array();
if(!preg_match("/^[a-z]{3,10}$/",$_POST['usuario'])){
echo $errores[]= "Tu nombre, debe contener como mínimo 3 letras"."<br><br/>";
}
if($email=!filter_input(INPUT_POST, 'email', FILTER_VALIDATE_EMAIL)){
echo $errores[]="Email incorrecto";
echo'<meta http-equiv="Refresh" content="7;URL=http://localhost:8888/prueba/porculo.html">';
}
?>
</div>
</body>
</html>
-
Buenas ana, para decidir dónde cierras o abres elementos html 5 tienes que pensar en dónde terminan las partes de tu página, por ejemplo el header lo tienes que cerrar donde consideres tú que termina la cabecera de tu página web y así con el resto de elementos ya que cada elemento tiene un significado
Este es un ejemplo de código esqueleto de HTML5:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Esqueleto HTML5 en aprenderaprogramar.com</title>
<meta charset="utf-8">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
<style>
body {font-family: Verdana, sans-serif; font-size:0.8em;}
header,nav, section,article,footer
{border:1px solid grey; margin:5px; padding:8px;}
nav ul {margin:0; padding:0;}
nav ul li {display:inline; margin:5px;}
</style>
</head>
<body>
<header>
<h1>Esqueleto HTML5</h1>
</header>
<nav>
<ul>
<li><a href="http://aprenderaprogramar.com">HTML5 más semántica</a></li>
<li><a href="http://aprenderaprogramar.com">HTML5 más geolocalización</a></li>
<li><a href="http://aprenderaprogramar.com">HTML5 más gráficos</a></li>
</ul>
</nav>
<section>
<h1>Cidudades del mundo</h1>
<article>
<h2>Londres</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
</article>
<article>
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</article>
<article>
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</article>
</section>
<footer>
<p>Esto es un ejemplo de HTML5!!!</p>
</footer>
</body>
</html>
-
Gracias ogramar, excelente explicación. Saludos