Como se los había comentado en el tutorial anterior, vamos a crear nuestro primer layout xhtml strict , este layout que haremos será de 2 columnas y lo que haremos en este primer tutorial, será definir todo nuestro xhtml para después aplicarle por medio de CSS todo el formato.
Comenzamos, espero ser lo bastante claro en esta primera parte, sino ya saben que cualquier duda aquí estamos.
Abrimos nuestro editor de html el que más les acomode, en mi caso Dreamweaver y ponemos el siguiente código:
HTML:
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-
<html xmlns="http://www.w3.org/1999/xhtml">
-
<head profile="http://gmpg.org/xfn/11">
-
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
-
<title>Infected-FX - Standards layouts</title>
-
<meta name="description" content="Infected-FX" />
-
<link href="style.css" rel="stylesheet" type="text/css" media="screen" title="default" />
-
</head>
-
<body>
-
<!-- INICIA SITIO -->
-
<div id="wrapper">
-
<!-- INICIA HEADER -->
-
<div id="header">
-
<!-- INICIA MENU -->
-
<div id="menu">
-
<ul id="menuList">
-
<li id="active"><a href="#">Home</a></li>
-
<li><a href="#">Foros </a></li>
-
<li><a href="#">Archivos</a></li>
-
<li><a href="#">Contacto</a></li>
-
<li><a href="#">Login</a></li>
-
</ul>
-
</div>
-
<!-- TERMINA MENU -->
-
<h1><a href="#">Infected-FX </a></h1>
-
</div>
-
<!-- TERMINA HEADER -->
-
<!-- INICIA CONTENIDO -->
-
<div id="container">
-
<div class="post">
-
<h2><a href="#">Contenido & links </a></h2>
-
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque vitae orci. Mauris malesuada, orci non convallis malesuada, risus purus tempus mauris, sed placerat justo tortor non nibh. Integer commodo nibh non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Suspendisse aliquam, erat sit amet mattis consequat, erat nulla bibendum metus, id ullamcorper ipsum lorem<a href="#"> rhoncus</a> erat. Nunc a nulla at mauris dictum dapibus. Suspendisse potenti. Nunc laoreet accumsan urna. Quisque non velit. Cras eleifend commodo felis. Nullam sem. Pellentesque molestie. Mauris congue. Nulla aliquam. Cras ut ipsum nec risus tincidunt ornare.<a href="#"> Morbi hendrerit</a>, pede a gravida facilisis, ligula sapien sodales nulla, quis congue dui odio vel dolor. Vivamus rhoncus, nulla a porttitor hendrerit, metus velit adipiscing purus, sed aliquam lectus enim id purus. Nunc pede enim, eleifend at, pulvinar eu, pulvinar eget, metus. Donec felis pede, tincidunt quis, pellentesque vel, malesuada at, pede. Pellentesque aliquam risus eu turpis.
-
<p>Quisque mauris. Ut nulla neque, tincidunt ac, sagittis eu, rutrum eget, lectus. Vivamus et felis.<a href="#"> Mauris vel elit eget augue condimentum nonummy</a>. In hac habitasse platea dictumst. Nullam viverra. Maecenas massa dolor, lobortis ut, gravida vitae, viverra et, diam. Maecenas mi. Pellentesque orci nisi, tincidunt quis, semper eget, blandit id, diam. Curabitur sit amet enim. Phasellus congue orci ac nisl. Pellentesque eu magna. Praesent gravida. Suspendisse erat felis, tincidunt vitae, facilisis nec, tincidunt malesuada, diam.
-
</div>
-
<div class="post">
-
<h2><a href="#">Blockquote</a></h2>
-
<blockquote>
-
<p>Etiam suscipit consectetuer mi. Aliquam pede felis, egestas molestie, fermentum at, scelerisque eu, neque. Aenean aliquet aliquam lacus. Vivamus gravida leo quis neque. Cras semper, pede nec venenatis condimentum, mi diam pulvinar tellus, vestibulum bibendum nibh nisi fringilla pede. Vivamus molestie pharetra sem. Cras ac leo. Suspendisse nunc justo, pulvinar pharetra, faucibus ac, aliquet et, quam. Etiam posuere metus non arcu. Donec quis odio eget erat porta convallis.
-
</blockquote>
-
<p>Phasellus pellentesque justo. Mauris et nibh. Aliquam dictum enim vestibulum elit. Ut dui velit, fermentum a, pulvinar quis, vestibulum pharetra, quam. Aenean faucibus. Pellentesque at ante et sapien sollicitudin imperdiet. Ut rutrum fringilla elit. Proin nec turpis. Aliquam aliquet ullamcorper orci. Aenean tincidunt sem at nisl. Nulla placerat tempor sem. In nec nisl at lectus euismod convallis. In euismod, nunc sit amet dictum accumsan, est mauris tempus ante, eget varius ante sem dapibus lacus. Vivamus ac ipsum at felis porttitor mollis. Fusce ac nibh rhoncus libero imperdiet viverra. Vestibulum tincidunt gravida dui. Nulla tellus nibh, ullamcorper vel, congue sit amet, sollicitudin a, justo. Praesent euismod auctor sem. Vestibulum consequat, quam a pellentesque varius, diam diam faucibus urna, porta imperdiet mauris massa nec arcu.
-
</div>
-
<div class="post">
-
<h2><a href="#">Lista ordenada y desordenada </a></h2>
-
<ul>
-
<li>Pink Floyd</li>
-
<li>Placebo</li>
-
<li>Radiohead</li>
-
<li>Depeche Mode</li>
-
<li>A Perfect Circle</li>
-
</ul>
-
<ol>
-
<li>Uno</li>
-
<li>Dos</li>
-
<li>Tres</li>
-
<li>Cuatro</li>
-
<li>Cinco</li>
-
</ol>
-
</div>
-
</div>
-
<!-- TERMINA CONTENIDO -->
-
<div class="clearfix"></div>
-
<!-- INICIA SIDEBAR -->
-
<div id="sidebar">
-
<h2>Tutoriales</h2>
-
<ul>
-
<li> <a href="http://infectedfx.net/2006/06/26/contenido-centrado/" rel="bookmark"> Contenido Centrado</a></li>
-
<li> <a href="http://infectedfx.net/2006/06/18/valid-flash-object/" rel="bookmark"> Valid Flash Object</a></li>
-
<li> <a href="http://infectedfx.net/2006/06/16/zebratables/" rel="bookmark"> ZebraTables</a></li>
-
<li> <a href="http://infectedfx.net/2006/06/12/illustrator-pentool/" rel="bookmark"> Illustrator - PenTool</a></li>
-
<li> <a href="http://infectedfx.net/2006/06/02/crea-tu-theme-para-wordpress/" rel="bookmark"> Crea tu theme WP </a></li>
-
<li> <a href="http://infectedfx.net/2006/04/12/disenando-tablas/" rel="bookmark"> Diseñando tablas</a></li>
-
<li> <a href="http://infectedfx.net/2006/04/07/disenando-formularios/" rel="bookmark"> Diseñando formularios</a></li>
-
</ul>
-
<h2>Weblinks</h2>
-
<ul>
-
<li><a href="http://localhost/wp/ifx/new">Infected-FX</a></li>
-
<li><a href="http://www.lyricsfx.com">LyricsFX</a></li>
-
<li><a href="http://www.blogaritmo.com">Blogaritmo</a></li>
-
<li><a href="http://www.konceptoradio.com">KonceptoRadio</a></li>
-
<li><a href="http://www.zetaweb.net">ZetaWeb</a></li>
-
<li><a href="http://www.lamagiadepotter.com">La magia de Potter </a></li>
-
</ul>
-
<h2>BUSCADORES</h2>
-
<ul>
-
<li> <a href="http://www.google.com" rel="bookmark"> Google </a></li>
-
<li> <a href="http://mx.yahoo.com" rel="bookmark"> Yahoo </a></li>
-
<li> <a href="http://www.t1msn.com" rel="bookmark"> T1MSN </a></li>
-
</ul>
-
</div>
-
<!-- TERMINA SIDEBAR -->
-
<div class="clear"></div>
-
<!-- INICIA FOOTER -->
-
<div id="footer">
-
<div id="searchForm">
-
<fieldset>
-
<form id="buscaForm" method="post" action="">
-
<p>
-
<input type="text" name="textfield" />
-
<input type="submit" name="Submit" value="Buscar" />
-
-
</form>
-
</fieldset>
-
</div>
-
<ul>
-
<li><a href="#">CC</a></li>
-
<li><a href="#">Copy</a></li>
-
<li><a href="#">Home</a></li>
-
<li><a href="#">Contacto</a></li>
-
<li><a href="#">About</a></li>
-
</ul>
-
</div>
-
<!-- TERMINA FOOTER -->
-
</div>
-
<!--TERMINA SITIO -->
-
</body>
-
</html>
Le puse comentarios a cada parte para que más o menos se identifiquen con cada parte.
Desde este paso ya podemos checar que nuestro xhtml strict es totalmente válido, para comprobarlo pueden checarlo aquí Validator W3
Lo que hicimos primero fué definir nuestro DOCTYPE para que se interprete como xhtml strict.
Después definimos lo que es nuestro charset si tienen duda sobre esto les dejo esta liga sobre los tipos de charset
Noten que en justo arriba de la etiqueta head estamos mandando llamar nuestra CSS que se llama style.css pueden cambiarlo si gustan.
Ahora si comienza nuestra estructura:
- wrapper esta será la que controle el ancho del layout.
- header dentro de este irá el título y meteremos el menú.
- menu , menuList el menú por eso la existencia del tutorial anterior
- container aquí pondremos todo nuestro contenido principal
- post cada una de nuestras entradas será dividida por la clase post
- sidebar la barra lateral de nuestro layout
- footer el pie de nuestro layout
Hemos terminado con la primera parte, la siguiente será darle formato a nuestro header y menú.
7 comentarios para Layout XHTML y CSS I
Sin ganas de querer darte la contraria, creo que estas usando demasiados (e inútiles) divs. Igual y es para explicar mejor, pero muchas de las cosas que piensas hacer son fácilmente logradas sin necesidad de usar tanto div (como el div wrapper). ¡Espero ver el CSS pronto!
Que onda MeTal_oRgY, me parece interesante tu idea de que se usen menos divs, ¿cómo crees que podrían disminuirse? el wrapper es por que el layout que haremos en el tutorial puede ser tanto fijo como líquido para quienes gustan de tenerlo a un tamaño ó que se adapte a la resolución de su pantalla solo con cambiar un valor. ^^
Me alegra que no lo tomaras a mal. El wrapper, por ejemplo, puede ser eliminado completamente y aún así tener la posibilidad de hacer el diseño líquido o fijo; solo hay que asignarle el width (y margin, si es necesario) al body.
body {
margin: 0px auto;
width: 730px;
}
Ya sé lo que pensarás ¿Y si tengo que poner un fondo que se repita en X? ¡No hay problema! Esto lo puedes aplicar a la tag html.
html {
background: url(imagenes/imagen.jpg) repeat-x;
}
Otro div que a primera vista creo se puede eliminar es el div “menu”. La tag “ul” ya es considerada un elemento de bloque, y cualquier valor que quieras aplicar al div menu se puede aplicar a la tag ul, por ejemplo:
#header ul {
background-color: #444;
}
#header ul li {
display: inline;
float: left;
text-align: center;
}
Estoy seguro que la cantidad de divs puede disminuir todavía más, es solo cuestión de analizar bien. Solo te doy la idea, seguramente encontrarás la manera de disminuir los divs.
me parece ke metal_orgy está en lo cierto pero aun asi te la curraste hongo. tal como lo tienes es muy bonito de ver y esta muy organizado, pero si lo ke keremos es optimizar codigo y kitar lo maximo posible es mejor reducirlo, aunke daria el mismo resultado y solo cambiarian unas milesimas de segundo mas en cargar la web jijijiji
espero el css pronto carnal ^^! gracias!
MeTaL_oRgY: Realmente muy interesante, para nada lo tomo a mal, todo lo contrario siempre he dicho que uno nunca acaba de aprender y ni de broma me consideraría medianamente experto en algún tema y está genial la propuesta tal vez podríamos seguir con el tutorial a partir de ahí.
Eden: Muchas gracias brother hace tiempo que no te veía por estos lados y totalmente deacuerdo con la optimización del código pero en realidad creo que si es importante tratar de hacer el sitio mucho más liviano por si en algún momento llegaras a tener muchísimas páginas seguro adorarías esas milésimas de segundo.
Ya no tarda mucho en venir la segunda parte ^^
w0w, felicidades por el layout
y por los comentarios que han surgido a raíz, ya agregué a mi lector de RSS la web jeje 
Muy muy interesante, expectante de la hoja de estilos, que seguro que no defrauda!
QUe onda amigos, estoy de los Layouts me interesa muchisimo ya que yo todavia programo con mis tablitas antiguas. alguien tiene mas info sobre esto.