Post Actualizado en enero 14, 2014
Tutorial Como Crear un Index.html con hojas de estilo integradas y un diseño unico, basandote en tu personalidad
Hola amigos, soy Jesús Uzcátegui y hoy les enseñare a crear un index de una posible web aplicando HTML 5 y CSS 3 para que el diseño nos quede de tal manera unico, le resalto que esto lo que quiero que en realidad aprendar son las diferentes tecnicas que pudiesen usarse para crear un sitio […]
Hola amigos, soy Jesús Uzcátegui y hoy les enseñare a crear un index de una posible web aplicando HTML 5 y CSS 3 para que el diseño nos quede de tal manera unico, le resalto que esto lo que quiero que en realidad aprendar son las diferentes tecnicas que pudiesen usarse para crear un sitio web, para empezar a trabajar necesitamos un editor de texto, podemos usar el blog de notas que por default nos proporciona windows pero, en realidad les recomiendo usar el SUBLIME TEXT 2, para descargarlo da click aquí.
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title>Mi Primer Index</title>
<link rel="stylesheet" type="text/css" href="css/stylesheet.css">
<link rel="stylesheet" type="text/css" href="css/reseter.css" />
</head>
<body>
<header>
<section id="subheader">
<div id="logo">
<a class="nombre" href="">OK Hosting TUTO</a>
</div>
<nav><ul>
<li><a href="#">Home</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contacto</a></li>
<li><a href="#">About</a></li>
</ul></nav>
</section>
</header>
<section id="wrap">
<section id="main">
<div id="post">
<article>
<hgroup>
<img class="thumb"src="images/thumbnail1.jpg" alt="">
<h1 class="title-post-index">Titulo de Publicación</h1>
<p id="text-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="ver-mas-post-index"><a href="">Ver +</a></p>
</hgroup>
</article>
</div>
<div id="post">
<article>
<hgroup>
<img class="thumb"src="images/thumbnail1.jpg" alt="">
<h1 class="title-post-index">Titulo de Publicación</h1>
<p id="text-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="ver-mas-post-index"><a href="">Ver +</a></p>
</hgroup>
</article>
</div>
<div id="post">
<article>
<hgroup>
<img class="thumb"src="images/thumbnail1.jpg" alt="">
<h1 class="title-post-index">Titulo de Publicación</h1>
<p id="text-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="ver-mas-post-index"><a href="">Ver +</a></p>
</hgroup>
</article>
</div><aside>
<section id="widget">
<div class="title-widget-aside">
<h3 class="H-del-widget">Titulo del Wiget</h3>
</div>
<ul>
<li><a class="iten-link-aside-post" href="#">Post Name Title 1</a></li>
<li><a class="iten-link-aside-post" href="#">Post Name Title 2</a></li>
<li><a class="iten-link-aside-post" href="#">Post Name Title 3</a></li>
<li><a class="iten-link-aside-post" href="#">Post Name Title 4</a></li>
<li><a class="iten-link-aside-post" href="#">Post Name Title 5</a></li>
</ul>
</section>
</aside>
</section>
<footer>
<section id="copyright">
<p class="text-footer-copyright">
Derechos Reservados <a href="URL de tu Perfil de Twitter o Red Social" target="_blank">Tú Nombre Aquí</a>
</p>
</section>
</footer>
</body>
</html>Este es el codigo html y en el navegador se nos tiene que mostrar de esta manera ( se ve así de pequeño ya que el zoon lo minimize a 67% para poder mostrarles).
Como pueden visualizar, les he enmarcado en la captura las secciones creadas con el codigo HTML. Si te gusta sigue viendo este tutorial, de igual manera todo se basa en parte del css. A continuación les enseñare a como darle vida a nuestro index.
Primero tenemos que ir al siguiente sitio web el cual sera un recurso para diseñar, se los recomiendo mucho de verdad, es u creador de degradados el cual nos proporciona el codigo css del mismo, ingresamos a Ultimate CSS Gradient Generator.
Creamos un degrado de la misma forma como lo hacemos en Adobe Photoshop, y copiamos el codigo que nos proporciona en la parte derecha de la web, de esta manera.
Aqui les muestro como deben de ser los codigos de este pequeño degradado, es simple y de tipo minimalista, espero les guste o si pueden crear el propio suyo, despues de haber creado su degradado en la parte de abajo de la vista previa saldra un codigo de tipo css el cual tendremos que copia y pegar en nuestra hojas de estilo.
Aquí les dejo el codigo Css como lo esta organizado de esa manera es muy factible trabajar comodamente.
body {background-color: #EBEBEB; margin:0 auto; font-family: sans-serif;} a, a:hover {
text-decoration: none;
}header{
float:left;
width: 100%;
background: rgb(255,255,255); /* Old browsers */
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(228,224,224,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(228,224,224,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(228,224,224,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(228,224,224,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(228,224,224,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(228,224,224,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e4e0e0',GradientType=0 ); /* IE6-9 */
box-shadow: 0px 0px 10px #000;
-moz-box-shadow: 0px 0px 10px #000;
-webkit-box-shadow: 0px 0px 10px #000;