[4] Como crear tu pagina web HTML5/CSS3 desde cero - El contenido

04 junio 2014

[4] Como crear tu pagina web HTML5/CSS3 desde cero - El contenido

    1 comentario

Publicaciones relacionadas: 
¡Enhorabuena! Hasta donde hemos llegado, es tiempo de una de las partes mas importantes dentro de un blog o pagina web, el contenido, la razón y el por que de que todos los usuarios visiten tu portal, es por esto que en esta parte tenemos que ser creativos, llamar la atención, jugar con colores, mostrar al usuario lo que quiere ver sin recargas ni rodeos. Para empezar, copia y pega el siguiente trozo de código dentro de las etiquetas 



              <div id="atitulo"><a href="#">Aqui debe ir el titulo de contenido a mostrar</a></div>
                    <div id="ainfo">Publicado el dia <div class="fecha"><a href="#">20/10/2011</a></div> por <div class="autor"><a href="#">Anthony Medina</a></div> en <div class="ubicacion"><a href="#">San Felipe, Venezuela</a></div>
                    </div>
                    <img src="imagenes/Moviles_Doolphy_6151.png"/>
          <div id="acontenido">
                    <!-- Empieza publicacion -->
                    Aqui ira el contenido el cual contendrá sus estilos propios, esto es un ejemplo de como se verá el <span>texto resaltado</span> y este es el ejemplo de como se verá un <a href="#">link</a>.
                    <h1>Header 1</h1>
                    <h2>Header 2</h2>
                    <h3>Header 3</h3>
                    <h4>Header 4</h4>
                    <h5>Header 5</h5>
                    <h6>Header 6</h6>
                    <pre>Esto es un mensaje con pre</pre>
                    <code>Esto es un mensaje con code</code>
                    <pre contenteditable="true"><code>esto es un mensaje pre-code, mientras mas largo se hace menos cabe en la seccion por lo tanto debo darle estilos, ademas, esta caja contiene un atributo el cual permite editar su contenido a tu gusto</code></pre>
                    <blockquote>Esta en una cita</blockquote>
                    
                    <table>
                     <th>Titulo 1</th>
                       <th>Titulo 2</th>
                     <tr>
                      <td>Dato 1</td>
                            <td>Dato 2</td>
                     </tr>
                     <tr>
                      <td>Dato 3</td>
                            <td>Dato 4</td>
                     </tr>
                    </table>
                    <!-- Termina Publicación -->
                    </div>

Hasta ahora, que llevamos



Podemos observar que dentro del código anterior se encuentran etiquetas fundamentales que tienen la necesidad de obtener estilos que se adapten al diseño del blog, entre ellas h1, h2, h3, h4, h5, h6, pre, code, blockquote, table, th, td, tr, entre otras; son etiquetas que a menudo se usan al momento de escribir un post en un blog, incluso se pueden usar para paginas web en todas las secciones, no precisamente tienen que ser usadas en el contenido.

Ahora, necesitamos los estilos para estas etiquetas, los cuales, los colocaremos en el principio pues estas no son etiquetas hijas, si no que seran universales.


   h1 {
    font-family:'Raleway',sans-serif;
    font-size:24pxpx;
   }
   h2 {
    background:#EEE;
    border:1px #333333 solid;
    font-family:'Raleway',sans-serif;
    font-size:30px;
    color:#333;
    font-weight:bold;
    margin-top:14px;
    margin-left:-31px;
    padding-left:48px;
    padding-right:9px;
    margin-right:-9px;
    box-shadow:#333 2px 2px 8px;
   }
   h3 {
    font-family:'Raleway',sans-serif;
    font-size:18px;
   }
   h4 {
    font-family:'Raleway',sans-serif;
    font-size:16px;
   }
   h5 {
    font-family:'Raleway',sans-serif;
    font-size:14px;
   }
   h6 {
    font-family:'Raleway',sans-serif;
    font-size:12px;
   }
   blockquote {
    width:61%;
    background:url(imagenes/iconos/1401872257_left_quote.png) no-repeat;
    font-style:italic;
    border:1px #CCC dashed;
    padding:7px 7px 7px 133px;
    }
   span {
    background:#CCC;
    color:#333;
    padding-left:3px;
    padding-right:3px;
   }
   pre {
    width:98%;
    border:1px #CCC dashed;
    background:#EEE;
    color:#333;
    font-size:14px;
    white-space: pre-wrap;
     white-space: -moz-pre-wrap;
     white-space: -o-pre-wrap;
    padding:7px 7px 7px 7px;
    box-shadow:#333 2px 2px 4px;
    overflow:auto;
    max-height:110px;
   }
   code {
    width:100%;
    font-family:"Lucida Console", Monaco, monospace;
   }
   table {
    width:70%;
   }
   th {
    text-align:center;
    background:#CCC;
    color:#333;
    border:1px #333 solid;
    text-transform:capitalize;
    padding:2px 2px 2px 2px;
    box-shadow:#333 2px 2px 4px;

   }
   td {
    background:#FFF;
    color:#333;
    padding:2px 2px 2px 2px;
    border:1px #333 solid;
    box-shadow:#333 2px 2px 4px;
   }

Aun faltan los estilos para lo que serian en este caso, secciones dentro de la sección article, como el titulo, los datos o información de la publicación, y los estilos predeterminados para las imágenes que se coloquen dentro de la misma. A continuación, pega los siguientes estilos debajo de las lineas CSS de la etiqueta article
  

   body section article #atitulo {
    background:#EEE;
    border:1px #333333 solid;
    font-family:'Raleway',sans-serif;
    font-size:36px;
    font-weight:bold;
    text-align:left;
    margin-top:14px;
    margin-left:-44px;
    padding-left:48px;
    padding-right:9px;
    margin-right:-9px;
    box-shadow:#333 2px 2px 8px;
   }
   body section article #atitulo a {
    text-decoration:none;
    color:#333; 
    transition:all ease-in-out .3s;
   }
   body section article #atitulo a:hover {
    color:#CCC; 
   }
   body section article #ainfo {
    padding:10px 10px 10px 10px;
    font-family:'Raleway',sans-serif;
    font-size:12px;
   }
   body section article #ainfo a {
    text-decoration:none;
    color:#FFF;
    padding-left:21px;
    font-weight:bold;
    transition:all ease-in-out .3s;
   }
   body section article #ainfo a:hover {
    color:#333;
   }
   body section article #ainfo .fecha {
    display:inline;
    background:url(imagenes/iconos/1401857434_calendar_alt_fill.png) no-repeat;
    width:auto;
   }
   body section article #ainfo .autor {
    display:inline;
    background:url(imagenes/iconos/1401857300_user.png) no-repeat;
    width:auto;
   } 
   body section article #ainfo .ubicacion {
    display:inline;
    background:url(imagenes/iconos/1401857387_map_pin_fill.png) no-repeat;
    width:auto;
   } 
   body section article img {
    width:98%;
    border:#FFF 4px solid;
    box-shadow:3px 3px 7px #333333;
    margin-top:2%;
    transition:all ease-in .4s;
    }
   body section article img:hover {
    opacity:.8;
    }
   body section article #acontenido {
    padding-top:8px;
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size:17px;
    }
   body section article #acontenido a {
    text-decoration:none;
    color:#EEE;
    transition:all ease-out .3s;
    }
   body section article #acontenido a:hover {
    color:#FFF;
    }
Pero espera, aun falta. Toma el las lineas de CSS pertenecientes a la etiqueta article y sustitúyelo por este



    display:block;
    width:95%;
    height:auto;
    margin:0 auto;
    margin-top:5px;
    margin-bottom:5px;
    padding-left:5px;
    padding-right:5px;
    font-size:19px;
    color:#CCC;
    text-align:justify;

Para cuando haya hecho lo anterior, tu sección deberá lucir de esta manera


Mucho mejor ¿No crees?. Esto ha sido todo por este tutorial, nos vemos en el siguiente, en el cual estaremos hablando un poco sobre la barra lateral.

Siguiente parte: La barra lateral

Enlaces para compartir en tu blog o pagina web.




Widget por Friki Bloggeo


1 comentario :

  1. Unknownabril 28, 2016 8:10 p. m.

    Hola, muy excelente su página tutorial, he aprendido muchísimo. Solo tengo un pequeño problema, al posicionar el puntero sobre la barra de menú, al pasar el hover, si me aparecen los sub menús, pero cuando quiero seleccionarlos, me desaparecen, ya que como los submenus aparecen abajo del menú, al quitar el puntero (manita) de la opción de menú para seleccionar un submenú, me desaparece. ¿Podría darme una ayuda por favor?

    ResponderEliminar

Suscribirse a: Enviar comentarios ( Atom )