Autor Tema: Esqueleto base de código HTML5 header nav section article footer ejemplo (Leído 3919 veces)

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

Código: [Seleccionar]

<!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>

Ogramar · « **Respuesta #1 en:** 27 de Diciembre 2015, 22:56 »

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:

Código: [Seleccionar]

<!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>

anarubia · « **Respuesta #2 en:** 28 de Diciembre 2015, 15:44 »

Gracias ogramar, excelente explicación. Saludos

Foros aprenderaprogramar.com
Didáctica y divulgación de la programación

Noticias: