Si quieres hacer una pagina gueb con intros flash, animaciones, musica de fondo y muchos efectos….. este documento te va a valer M!3RD4 porque aqui voy a intentar sintetizar como hacer una pagina web usando estandares, sencilla, con CSS y XHTML y con contenido dinamico, es decir, con las cosas almacenadas en una Base de Datos…..si, se oye titanico y lo sera, pero vamos que es divertido y ademas no estoy cobrando XD y cualquier duda pues la pones en los comentarios y intentamos resolverla!

Requisitos

Tienes que tener las ganas de hacer que esto te funcione, ademas de las ganas de leer mucho, porque este documento solo puede ayudarte pero no te hara c00l, y ademas tienes que tener…….err no eso es todo lo que necesitas, aunque si quieres donarme algo, un chicle(que no este usado), un caramelo, una casa, una isla, una casa en una isla, pues yo lo acepto ya que no me gusta rechazar regalos XDXD

Ahora comencemos

Construyendo la Pagina

Lo primero que tienes que saber es que HTML es un lenguaje interpretado y que las paginas web estan hechas en este lenguaje, ahora XHTML es una vertiente que ha sido impulsada por aquellos que buscan que las cosas se hagan de la mejor manera, asi que XHTML es HTML bien hecho! como la idea es no corromper mentes no vamos a hablar de HTML sino de XHTML de una vez, asi que pendiente con esto.

XHTML

Varias cosas muy importantes:

• TODAS las etiquetas van en minusculas!
• Si abres una etiqueta debes cerrarla, incluso el “br” y debes hacerlo en el orden que las abriste, es decir, ultima que abriste primera que cierras, asi, ” blabla “

Estructura de un Documento XHTML

La estructura de un documento XHTML deberia ser la siguiente(aunque a veces se omiten algunas cosas)

El < !DOCTYPE> es la declaración del tipo de documento, siempre es lo primero que debe ir en el documento y su función es decir al navegador que especificación usar por ejemplo: HTML, XHTML estricto, transicional, etc. En nuestro caso usamos un documento XHTML 1.0 transicional

El “html” marca el comienzo de el documento HTML, el xmlns es requerido para documentos XHTML, pero igual sino lo colocan se añade solo. (incluyanlo!)

El “head” contiene información acerca de la pagina como el titulo y otras cosas asi como los meta, estilos y scripts.

“meta” define información meta, como descripción del sitio, palabras claves y en este caso que codificación debe usar el navegador para la información, esto es para no tener problemas con los acentos y demas, ese que esta ahi es el recomendado para el español. Es importante que sepan que la indexación de google poco tiene que ver con los meta datos, pero eso es otro tema.

“body” define el cuerpo del documento, el contenido, aqui es donde esta TODO, texto, imagenes, graficos, colores, TODO eso ocurre dentro de esta etiqueta.

Esa es a lineas generales la estructura de un documento XHTML, igual les recomiendo estos enlaces

Referencia de XHTML aqui tienen todas las etiquetas de XHTML explicadas, en ingles pero con ejemplos

Tutorial Basico de XHTML Tutorial un poco mas amplio pero aun basico de XHTML, en español.

Aplicando Hojas de Estilos

Ahora viene la parte de como se vera la pagina, asi que veamos que son Hojas de Estilo. Las hojas de estilos son la manera de definir la presentación de un documento XHTML y/o para separar su presentación de su estructura.

Lo que se hace es definir reglas de estilo para las etiquetas XHTML, reglas como colores, tamaño, fuente, etc. La gran ventaja de las Hojas de Estilo es que al estar totalmente separadas se pueden hacer cambios significativos a la presentación de la pagina modificando unicamente un archivo o incluso una sola linea, ahora veamos un ejemplo de como maquetar una web con 4 elementos basicos, Encabezado, Contenido, Barra lateral y Pie.

Lo primero es saber que a cualquier etiqueta se le puede asignar un estilo y ademas podemos crear clases para aplicar distintos estilos a la misma etiqueta.

Aqui pueden ver un tutorial basico de CSS, Aqui pueden ver como centrar una pagina en CSS, y aqui como hacer Menus con CSS. Si les recomiendo que SIEMPRE incluyan esto en sus estilos:

*{
/*este estilo se define para todas las etiquetas por eso el "*", siempre incluyan esto, ahorra muchos problemas*/
border: 0;/*sin bordes, ni margenes, ni padding*/
margin: 0;
padding: 0;
}
Si les recomiendo, mas no les exijo que sigan revisando tutoriales, y articulos, para aprender un poco mas de XHTML y sobre todo de CSS, aqui tienen una guia de referencia de CSS 2

Tambien les recomiendo prueben en varios navegadores(Opera, Firefox, y el Maligno) ademas de tener a la mano herramientas muy utiles a la hora de hacer este tipo de trabajos.

Aqui un tuto en español de XHTML y CSS, esta bastante detallado

Ahora que ya sabemos un poco manejarnos con XHTML y CSS

Conclusión

Espero que esto les sea de ayuda a todos, y ya saben cualquier duda la ponen en los comentarios, y no crean que con esto ya tienen todo dominado, hay que leer y practicar bastante pero la verdad no es del otro mundo si yo pude uds claro que pueden!

Y a quien sienta que puede aportarle a esta mega-guia-rapida que lo haga por favor XD!

Esta entrada fue publicada el Martes, Junio 20th, 2006 a las 10:17 pm y esta bajo las categorias General, Internet, Programacion, Prozac. Puedes seguir las respuestas de esta entrada a traves del RSS 2.0 feed. You can leave a response, or trackback from your own site.