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

anarubia

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 36
    • Ver Perfil
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>
« Última modificación: 27 de Diciembre 2015, 22:54 por Ogramar »

Ogramar

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2662
    • Ver Perfil
Re:Esqueleto base de código HTML5 header nav section article footer ejemplo
« 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

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 36
    • Ver Perfil
Re:Esqueleto base de código HTML5 header nav section article footer ejemplo
« Respuesta #2 en: 28 de Diciembre 2015, 15:44 »
Gracias ogramar, excelente explicación. Saludos

 

Sobre la educación, sólo puedo decir que es el tema más importante en el que nosotros, como pueblo, debemos involucrarnos.

Abraham Lincoln (1808-1865) Presidente estadounidense.

aprenderaprogramar.com: Desde 2006 comprometidos con la didáctica y divulgación de la programación

Preguntas y respuestas

¿Cómo establecer o cambiar la imagen asociada (avatar) de usuario?
  1. Inicia sesión con tu nombre de usuario y contraseña.
  2. Pulsa en perfil --> perfil del foro
  3. Elige la imagen personalizada que quieras usar. Puedes escogerla de una galería de imágenes o subirla desde tu ordenador.
  4. En la parte final de la página pulsa el botón "cambiar perfil".