17 marzo 2009 in XHTML/CSS by dacho

votar
Share

¿Qué es CSS?

CSS, es una tecnología que nos permite crear páginas web de una manera más exacta. Gracias a las CSS somos mucho más dueños de los resultados finales de la página, pudiendo hacer muchas cosas que no se podía hacer utilizando solamente HTML, como incluir márgenes, tipos de letra, fondos, colores…

Trabajar correctamente con HTML y CSS tiene muchos beneficios a la hora de posicionar una pagina en los buscadores y también a la hora de rediseñar o retocar la pagina.

CSS (Cascading Style Sheets), en español Hojas de estilo en Cascada…. Como siempre en este tutor aprenderemos con lo practico, si deseas aprender mas de CSS, puedes buscar en Google ya que existen miles de sitios que explican exactamente que es, aunque próximamente creare un articulo que lo explique.

Creamos nuestro practico6.html, en base a un artículo de mi blog, al cual iremos dando formato. El HTML es este:

<html>
 
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <!-- Por el momento si no sabes que es esta linea simplemente ignorala, ya volveremos sobre el tema-->
  <title>Practico 5</title>
 </head>
 
 <body>
 
<h1>Posicionamiento Web: ¿Que es el PageRank?</h1>
<p>Una de las principales cosas que se debe saber a la hora de posicionar una pagina en los buscadores, es tener en claro que es el PageRank, ya que muchos webmasters lo utilizan para hacer intercambios. Les presento un excelente artículo acerca del tema.</p>
 
<p>PageRankTM (PR) es un valor numérico que representa la importancia que una página web tiene para Google. Google se hace la idea de que cuando una página coloca un enlace (link) a otra, es de hecho un voto para esta última.</p>
 
<p>Cuantos más votos tenga una página, será considerada más importante por Google. Además, la importancia de la página que emite su voto también determina el peso de este voto. De esta manera, Google calcula la importancia de una página gracias a todos los votos que reciba, teniendo en cuenta también la importancia de cada página que emite el voto.</p>
 
<p>PageRankTM (desarrollado por los fundadores Larry Page y Sergey Brin) es la manera que tiene Google de decidir la importancia de una página. Es un dato valioso, porque es uno de los factores que determinan la posición que va a tener una página dentro de los resultados de la búsqueda. No es el único factor que Google utiliza para clasificar las páginas, pero sí es uno de los más importantes.</p>
 
<p>Hay que tener en cuenta que no todos los links son tenidos en cuenta por Google. Por ejemplo, Google filtra y descarta los enlaces de páginas dedicadas exclusivamente a colocar links (llamadas ‘link farms’).</p>
 
<p>Además, Google admite que una página no puede controlar los links que apuntan hacia ella, pero sí que puede controlar los enlaces que esta página coloca hacia otras páginas. Por ello, links hacia una página no pueden perjudicarla, pero sí que enlaces que una página coloque hacia sitios penalizados, pueden ser perjudiciales para su PageRankTM.</p>
 
<p>Una manera de conocer el PageRankTM de una página es decargándose la barra de búsqueda de Google (solamente disponible para MS IExplorer). Aparece una barra en la que se muestra en color verde el valor de PageRankTM en una escala de 0 a 10. Sitios web con PR10 son Yahoo!, Microsoft, Adobe, Macromedia, o la propia Google. Teneis una lista completa con los sitios con PR10.</p>
 
<p>El algoritmo de ‘PageRankTM’ fue patentado en Estados Unidos el día 8 de enero de 1998, por Larry Page. El título original es ‘Method for node ranking in a linked database’, y le fue asignado el número de patente 6,285,999.</p>
 
 
 
 </body>
 
</html>

Ahora que ya tenemos nuestro html listo (Te invito a mirarlo en tu explorador de Internet) procedemos a agregar el código CSS para ir colocándole el formato que deseamos a nuestro practico6.

Existen varias formas de insertar el código CSS, nosotros momentáneamente lo incluiremos dentro del encabezado de la pagina ( es decir entre las etiquetas <head> y </head>)… El código CSS lo pondremos dentro de las etiquetas <style> y </style>. Si no lo comprendes no te preocupes ya veras un ejemplo que te aclarara todo.

Lo que haremos en un principio es cambiar el color de fondo de la pagina y el color de la letra.

practico6b.html:

 
<!-- practico6.html -> Guardarlo con ese nombre y ejecutarlo con un explorador de Internet -->
 
<html>
 
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <!-- Por el momento si no sabes que es esta linea simplemente ignorala, ya volveremos sobre el tema-->
  <title>Practico 6</title>
  <!--Aquí va lo nuevo-->
   <style>
         body{ background-color: #C29100; color: blue; }
   </style>
 </head>
 
 <body>
 
		<h1>Posicionamiento Web: ¿Que es el PageRank?</h1>
		<p>Una de las principales cosas que se debe saber a la hora de posicionar una pagina en los buscadores, es tener en claro que es el PageRank, ya que muchos webmasters lo utilizan para hacer intercambios. Les presento un excelente artículo acerca del tema.</p>
 
		<p>PageRankTM (PR) es un valor numérico que representa la importancia que una página web tiene para Google. Google se hace la idea de que cuando una página coloca un enlace (link) a otra, es de hecho un voto para esta última.</p>
 
		<p>Cuantos más votos tenga una página, será considerada más importante por Google. Además, la importancia de la página que emite su voto también determina el peso de este voto. De esta manera, Google calcula la importancia de una página gracias a todos los votos que reciba, teniendo en cuenta también la importancia de cada página que emite el voto.</p>
 
		<p>PageRankTM (desarrollado por los fundadores Larry Page y Sergey Brin) es la manera que tiene Google de decidir la importancia de una página. Es un dato valioso, porque es uno de los factores que determinan la posición que va a tener una página dentro de los resultados de la búsqueda. No es el único factor que Google utiliza para clasificar las páginas, pero sí es uno de los más importantes.</p>
 
		<p>Hay que tener en cuenta que no todos los links son tenidos en cuenta por Google. Por ejemplo, Google filtra y descarta los enlaces de páginas dedicadas exclusivamente a colocar links (llamadas ‘link farms’).</p>
 
		<p>Además, Google admite que una página no puede controlar los links que apuntan hacia ella, pero sí que puede controlar los enlaces que esta página coloca hacia otras páginas. Por ello, links hacia una página no pueden perjudicarla, pero sí que enlaces que una página coloque hacia sitios penalizados, pueden ser perjudiciales para su PageRankTM.</p>
 
		<p>Una manera de conocer el PageRankTM de una página es decargándose la barra de búsqueda de Google (solamente disponible para MS IExplorer). Aparece una barra en la que se muestra en color verde el valor de PageRankTM en una escala de 0 a 10. Sitios web con PR10 son Yahoo!, Microsoft, Adobe, Macromedia, o la propia Google. Teneis una lista completa con los sitios con PR10.</p>
 
		<p>El algoritmo de ‘PageRankTM’ fue patentado en Estados Unidos el día 8 de enero de 1998, por Larry Page. El título original es ‘Method for node ranking in a linked database’, y le fue asignado el número de patente 6,285,999.</p>
 
 
 
 </body>
 
</html>

En este caso lo que hemos hecho es por medio del CSS, le decimos al explorador que al elemento <body> le ponga un color de fondo, y también a todos los textos que están dentro del body les coloque un color azul. Por motivos de espacio y facilidad, desde ahora solo incluiré el correspondiente CSS, usted deberá tomar el practico6.html y cambiar lo que esta entre las etiquetas <style> y </style> para que vaya cambiando su diseño.

   <style>
         body{ background-color: #C29100; color: blue; }
   </style>

En este caso ese numero #c29100 es el color de fondo que ve en el practico6b.html, un color mostaza. Para ver mas de los colores en las paginas webs puede ir aquí…

Uno puede instanciar un elemento HTML en CSS colocando su nombre, como en este caso body que es el elemento al que quiero modificar. Luego abre una llave “{” coloca las instrucciones para ese elemento y luego cierra la llave “}”

Dentro de las llaves puede colocar distintas instrucciones que los exploradores de Internet pueden interpretar y les permite dar formatos a los distintos elementos HTML. En este caso utilizamos:

background-color: Esta instrucción nos permite colocar un color de fondo para el elemento.
color: Esta instrucción nos permite cambiar el color del texto.

Ambos tienen las misma sintaxis:

propiedad: valor ;

Las distintas instrucciones CSS que están dentro de un mismo juego de llaves { } se separan por medios de puntos y comas “;”

Con lo que ya vimos podemos realizar muchos cambios en el texto, pero por supuesto hacen falta mas propiedades para poder modificar mejor el texto:

  • Font Family (Familia de fuente): Nos permite elegir el tipo de letras.
    Por ejemplo p{ font-family: Arial; }
  • Font Weight (Peso de fuente): Nos permite colocar distintos pesos de la letra, es decir si esta en normal o en negrita. Por ejemplo p{ font-weight: bold; }
  • Font Size (Tamaño de fuente): Nos permite especificar el tamaño del texto.
    Por Ejemplo p{ font-size: 12px; }
  • Text Align (Alineacion del texto): Nos permite colocar el texto a la izquiera, derecha, centro o justificada. Por ejemplo p{ text-align: center; }

Ahora veremos como con el mismo HTML podemos hacer que la web cambie solo modificando unas pocas instrucciones en el CSS:

   <style>
    body{ background-color: #defcdd; color: #2E2E2E; font-family: arial;}
    h1 { color: #940000; font-size: 20px; }
    p { font-size: 14px; }
   </style>

También Podemos poner los títulos a la derecha

   <style>
    body{ background-color: #defcdd; color: #2E2E2E; font-family: arial;}
    h1 { color: #940000; font-size: 20px; text-align: right; }
    p { font-size: 14px; }
   </style>

Podemos Justificar el texto:

   <style>
    body{ background-color: #defcdd; color: #2E2E2E; font-family: arial;}
    h1 { color: #940000; font-size: 20px; text-align: right; }
    p { font-size: 14px; text-align: justify;  }
   </style>

Podemos poner el texto en negrita:

   <style>
    body{ background-color: #defcdd; color: #2E2E2E; font-family: arial;}
    h1 { color: #940000; font-size: 20px; text-align: right; }
    p { font-size: 14px; text-align: justify;  font-weight: bold; }
   </style>

Bueno, croe que es suficiente por ahora. Pero quedan muchas cosas por ver con respecto al texto que las iremos cubriendo en los ejemplos de las posteriores lecciones, ya que hacen falta algunos conceptos mas para poder entender como dar margen y también faltan elementos HTML importantes para poder maquetar la web.

Por lo pronto si quieres saber mas de CSS estuve viendo esta excelente pagina donde tienen listadas todas las propiedades de CSS con su explicación y su sintaxis. Clic aquí para Ver pagina

Siguiente Lección >>

>> Indice de Contenido <<

Share
Si este post te sirvio/gusto, Entonces considera Enviar un comentario o Suscribirte a nuestro feedRSS para recibir las actualizaciones de nuesdtor sitio.

¿Que Podes seguir leyendo?