Creando el home.php para nuestra aplicacion

Bueno como en la entrada anterior les explique detalladamente como maquetamos el index.php ahora en esta parte solo pondré el código html del home.php y el código CSS 3 para darle estilos.

Si ya tienen el documento home.php creado ábranlo y borren todo lo que tenga y copien el siguiente código tal cual está más abajo.
Home.php
 <!DOCTYPE html>
<html lang=”es”>
<head>
    <meta charset=”utf-8″ />
        <title>Hola </title>
        <link rel=”stylesheet” href=”stylehome.css” />
    </head>
<body>
    <header>
         <div id=”titulo”> <h1>Bienvenidos a mi sitio web</h1> </div>
         <div id=”usuario”> Erick Rodriguez || Mi cuenta || Serrar Sesion</div>
    </header>
    <section id=”cuerpo”>
        <section id=”contenido”>
        <fieldset>
        <legend><div>
        <h3>Deja tu comentarios</h3>
        </div></legend>
        <form action=”comentar.php” method=”post” >
        <textarea placeholder=”Escribe tu comentario…” rows=”4″ cols=”50″ name=”coment”></textarea>
              <div id=”enviar”>
            <input type=”submit” value=”PUBLICAR” id=”publicar” />
            <input type=”reset” value=”BORRAR TODO” id=”publicar”/>
            </div>
        </form>
        </fieldset>
        </section>
        <article>
        <div id=”mensaje”>No hay comentarios</div>
        </article>
    </section>
    <footer>
    Sitio web creado en www.crearmi.blogspot.com
    </footer>
</body>
</html>
Ahora el código css para el home lo primero que tienen que hacer es crear una hoja de estilo y les ponen como nombre stylehome.css y copian el siguiente código.
Stylehome.css
         *{
            margin:0px;
            padding:0px;
            }  
        header{
            background:#F9F9F9;
            margin:0em;
            min-height:70px;
            border-bottom:solid 1px #F1F1F1;      
            max-width:100%;
            text-align:right;
            }
        #titulo{
            color:#F90;
            font-size:12px;
            max-width:500px;
            margin:20px;
            float:left;
            min-height:2em;
            }
        #usuario{
            color:blue;
            text-align:right;
            padding-top:20px;
            margin-right:20px;
            }
        #cuerpo{
            width:100%;
            margin-top:20px;
            border-top:solid 1px #F1F1F1;
            border-bottom:solid 1px #F1F1F1;
            }
        #contenido{
            border:solid 1px #F1F1F1;
            max-width:600px;
            margin:20px;
            min-height:100px;
            padding:10px;
            }
        fieldset{
            padding:20px;
            border:solid 1px #F90;
            }
        textarea:focus{
            border:solid 1px #3CF;
            -webkit-border:solid 1px #3CF;
            }
        #enviar{
            width:350px;
            margin:10px;
            }
        #publicar{
            background:#F9F9F9;
            width:120px;
            color:blue;
            height:25px;
            border:solid 1px #f1f1f1;
            }
        #publicar:hover{
            background:#F1F1F1;
            border:solid 1px #f9f9f9;
            }
        article{
            border:solid 1px #F1F1F1;
            background:#f9F9F9;
            max-width:600px;
            margin:20px;
            min-height:10px;
            padding:10px;
            }
        #mensaje{
            color:red;
            }
        footer{
            text-align:center;
            color:#666;
            width:100%;
            font-size:12px;
            min-height:50px;
            border-top:solid 1px #dadada;
            background:#F7F7F7;
            position:fixed;
            bottom:0px;
            }

Si todo va bien y has copiado los codigo correctamente, nuestra pagina tendria que tener la siguiente apariencia clic para verla en tamano completo

Bueno nos vemos en la proxima entrada. Me gustaria verlos que comenten para ver como lo estoy haciendo y asi tambien me motivan a seguir ensenado.

Gracias y hasta la proxima…

Comments

  1. By Anónimo

Deja un comentario

Tu dirección de correo electrónico no será publicada.