Antes que nada, me gustaría comentaros algo sobre mi experiencia con el diseño web. He hecho algunas webs pequeñitas hasta hace unos años, pero claro, en aquella época usaba tablas. Cuando empezó el tema de las capas, no se me dieron muy bien. Durante muchos años he estado sin diseñar nada. Ahora me surge la necesidad de hacer una pequeña web sencilla, y aunque podría haber tirado de plantillas gratuitas, no soy partidario de usarlas. Siempre he preferido hacer el diseño por mi mismo. Se algo de hojas de estilo, como utilizarlas usando #nombredelacapa, .nombredelaclase, #nombre > p... Es más, hace poco estuve siguiendo un pequeño videotutorial para refrescarme un poco los escasos conocimientos. Se controlar un poco las capas con el padding, margin, entiendo un poco el uso de float, no tengo ni idea de cuando usar clear: both :D pero más o menos me defiendo. Cuando encuentro dudas recurro a Google y me ayuda bastante.
Como decía, estaba acostumbrado a usar tablas. Ahora se usa CSS, el cual más o menos puedo manejar, pero en cambio, veo que también se usan unas etiquetas que no he visto en mi vida, como Aside, Article, Hgroup, Footer, Nav, Section. Supongo que cada vez que escribo una de estas etiquetas, estoy creando realmente una capa, solo que el navegador y los buscadores obtendrán información valiosa al usarlas. Pienso que al escribir la etiqueta Aside, es como si estuviera creando una etiqueta div con id aside o cualquier id descriptivo. Corregirme si me equivoco.
Después de toda esta intro, voy a poneros un código que he escrito muy cortito que sería básicamente la estructura que le quiero dar a mi web. Ajunto también una imágen. Lo único que deseo es que me digáis si he escrito bien las etiquetas dado el diseño que adjunto, si habría que cambiar alguna por otra más recomendable o si estoy totalmente desencaminado jajaja.
El header con el logotipo sería al 100% del ancho del navegador, mientras que el resto del cuerpo, se ajustaría al centro usando margin: auto. El pie me gustaría que quedase ajustado al tamaño del artículo y que no se meta debajo del widget con la publicidad a la derecha. Los bordes en realidad no se verían en la página web final, solo son orientativos. Los enlaces del menú, con un fondo de colores diferentes cada elemento, se ampliarían al pasar el ratón por encima usando a:hover en la hoja de estilo. No se, creo que no os aburro con más detalles. Ahí va el código:
Código:
<!DOCTYPE>
<html lang="es">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="description" content="Aqui toda nuestra descripcion">
<meta name="keywords" content="Aqui, Palabras, Clave">
<link rel="stylesheet" type="text/css" href="estilos.css"/>
</head>
<body>
<header id="Logotipo">
Logotipo
</header>
<section id="Cuerpo">
<nav>
<div id="Enlace1"></div>
<div id="Enlace2"></div>
<div id="Enlace3"></div>
<div id="Enlace4"></div>
</nav>
<aside id="PublicidadTop">Publicidad 1</aside>
<section id="Articulo">
<article>
<hgroup><h2 class="Titulo">Titulo del articulo</h2></hgroup>
<aside id="PublicidadIn">Publicidad 3</aside>
<p>Texto Bla Bla Bla...</p>
</article>
</section>
<div id="PublicidadDown">Publicidad 4</div>
<footer>Pie de página</footer>
</section>
<aside id="PublicidadRight">Publicidad 2</aside>
</body>
</html>
Esta es una imagen del diseño que estoy intentando hacer. Está hecha con el fantástico paint de Windows. Adoro este programita
Es todo por el momento. Espero vuestras respuestas y cosquis jajajaja