lunes, julio 16, 2007

Mi nuevo esquema básico de html

En los ultimos meses he desarrollado sitios web, basados en un sistema basico de divs en combinacion con CSS, esto no me ha facilitado el diseño, pues despues de años de usar tablas y formas mas rudimentarias por asi decirlo, el uso de CSS para el diseño se torna laborioso, pero al mismo tiempo se logra tener un mejor diseño y la semantica del html tiene sentido.

Lo cierto tambien es que tenia que renovar mis practicas de construccion de paginas y he terminado por convercerme en usar divs. No se si en las escuelas actualmente enseñan estas practicas. Veo que por lo menos en México y en particular el diseño que reviso en Veracruz, sigue usando las clasicas tablas y paginas hechas con imagenes divididas.

Ademas, he reducido mi uso de etiquetas a unas cuantas, recuerdo que solia utilizar dl, blockquote, hasta el famoso marquee de ie4 lo llegue a usar, pero en realidad pierden el sentido cuando aplicamos solo las etiquetas div, span, ul, li con el uso apropiado de css.

Por otra parte en el ultimo proyecto me obligué a crear una unica plantilla de html y los diseños estan por completo realizados con css, los ejemplos estaran disponible proximamente.

Sin mas que decir, aqui mi esquema basico:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" http://www.w3.org/TR/html4/strict.dtd">

<head>

<title>Titulo del Sitio Web</title>

<link rel="stylesheet" type="text/css" href="estilo.css" />

<meta name="keywords" content="HTML, DHTML, CSS, XML, XHTML, JavaScript, VBScript" />

<meta name="description" content="Free Web tutorials on HTML, CSS, XML, and XHTML" />

</head>

<body>

<div id="cuerpo">

<div id="encabezado">

<div id="logo"></div><div id="eslogan"></div>

</div>

<div id="menu">

<ul>

<li><a href="index.html">Inicio</a></li>

<li><a href="empres.html">Nuestra empresa</a></li>

<li><a href="productos.html">Productos</a></li>

<li><a href="servicios.html">Servicios</a></li>

<li><a href="clientes.html">Portafolio clientes</a></li>

<li><a href="contacto.html">Contacto</a></li>

</ul>

</div>

<div id="contenido">

<h1 id="titulo">Bienvenido a nuestro sitio</h1>

<h2 id="subtitlo">por webmaster@llanura.com</h2>

<p id="parrafo">Hola mundo</p>

</div>

<div id="piedepagina">

<address id="direccion">Veracruz, Ver.</address>

</div>

</div>

</body>

</html>

La estructura anterior permite crear cualquier diseño:



Listo!

No hay comentarios.: