Archivos para Junio, 2008

Creando nuestro primer archivo css… uta al fin

Publicado en XHTML y CSS el Junio 26, 2008 por kradssen

Debido a lo extenso del post lo migre como página, lo podrán encontrar aquí

XHTML y DHTML con CSS … comenzando por lo mas básico

Publicado en XHTML y CSS el Junio 11, 2008 por kradssen

A darle vida a este blog…
Antes de comenzar sobre PHP hablaré un poco de XHTML y CSS, aunque esto no será un tutorial, ni tampoco muy extenso.

Primero es de decir que XHTML no es nada mas que HTML pero de forma estandarizada y aprobada por la W3C asumiendo que ya tienen ciertos conocimientos sobre HTML, XHTML seria el HTML que conocen, pero con la forma estandarizada de que toda etiqueta que se abre se debe cerrar, ¿Como? de esta forma:
*Para aquellas etiquetas que tenemos tanto de apertura y cierre: <etiqueta_html>contenido</etiqueta_html>
Ejemplo: el párrafo <p>Mi parrafito</p>
*Para aquellas de las cuales solo tenemos apertura, la forma será está: <etiqueta_html />
Ejemplo: el salto de linea <br />

Otra observación es que todas estas deben escribirse en minúsculas, eso es lo básico, lo demás pueden encontrar buenos tutoriales de ello.

Ahora, está bien, ya se HTML y XHTML, pero ¿Qué diablos es CSS?
Bueno, es de saber que CSS que no es nada mas una forma de darle estilo y diseño a lo que ponemos en el documento HTML o XHTML.

¿Pero y esto por que? ¿No basta con darle estilo a las etiquetas en el archivo HTML?
Cierto podría bastar con ello, pero si queremos tener una página web presentable, y que a la hora de realizar modificaciones sea entendible (Para nosotros o quien modifique la página) es mucho mas facil dividir el trabajo así, un archivo HTML o XHTML en donde solo se encontrará el muy cuerpo y estructura de la página web, sin nada de ocupar el estilo entre etiquetas, con sus margenes y etiquetas bien detallados, que verse una pagina con etiquetas como esta: <p align=”center” font…..

Es decir, si el cambio es por ejemplo el tipo de las letras, tendríamos que modificar cada párrafo incluyendo el tipo de letra que queremos, lo cual no seria mas fácil, si tuviésemos un archivo aparte en el cual coloquemos todos los estilos, así solo cambiaríamos algo muy pequeño en el archivo y tendríamos muchos mas en la presentación final,.

Además esto es lo sugerido por la W3C para estandarizar, pero no lo veas como solo por estandarizar, esto te ahorrara mucho trabajo ya que te será mucho mas fácil el mantenimiento, por que recuerda tendrás muchas paginas web, no solo una, y un único archivo te puede dar el estilo de todas.

¿Qué como es posible eso?
Ok, vamos por parte, ya sabiendo eso, primero es de saber que el archivo de estilo lleva extensión .css y esté lo debemos llamar en nuestro documento HTML o XHTML (De aquí en adelante solo diré XHTML)

¿Cómo lo haremos? sencillo usando esta etiqueta:

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

Suponiendo que tu hoja de estilo se llama mi_hoja.css y esta en el directorio “estilos”

y ¿Si el archivo está en el mismo directorio de la página?, si es así solo basta:

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

Lo único que debemos recordar es que esta etiqueta debe encontrarse entre las etiquetas “head”, entonces por ejemplo nuestro documento XHTML quedaría algo así:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <title>Mi web</title>
  <link rel="stylesheet" type="text/css" href="estilos/mi_hoja.css" />
 </head>
 <body>
  Aquí todo el contenido de la web
 </body>
</html>

OK, está bien, ya me dijiste como meterlo, pero y ahora, ¿Cómo lo hago?
Bueno eso lo dejo para el siguiente post. :)