Blogger para torpes. HTML y CSS | Oloblogger Me hablan en muchos sitios de HTML, de CSS... y no tengo ni pajolera de a que se refieren. Como mucho llego a copiar y pegar y... ¡a veces m...

14 de mayo de 2008

Blogger para torpes. HTML y CSS

Me hablan en muchos sitios de HTML, de CSS... y no tengo ni pajolera de a que se refieren. Como mucho llego a copiar y pegar y... ¡a veces me funciona!"

Si estás en esa situación, bienvenido a esta clase nivel BPT para intentar aclararte que es cada cosa, para qué sirve y como distinguirlas.


En Blogger, básicamente encontrarás dos tipos de código: HTML y CSS. Ambos son "lenguajes" que vuestro navegador interpretará de determinada manera para que una página se muestre tal y como tú la ves.

HTML
HyperText Markup Language = Lenguaje de Marcado de HiperTexto. Con él se diseña la estructura de la página: Cabecera, cuerpo/s, pie, barra lateral... También mediante HTML introducimos nuestro texto, imágenes, enlaces, etc.

Por ejemplo, si tecleamos

<div width="400px" height="200px">HOLA QUE TAL</div>

estamos diciéndole al navegador que nos reserve un espacio (DIV - /DIV) de 400x200 pixels (WIDTH + HEIGHT) y que dentro de él nos escriba HOLA QUE TAL.

Siendo muy puristas, Blogger funciona con XHTML que es una versión avanzada de XML y una evolución de HTML. Pero para nuestro fin, podemos considerar perfectamente que hablamos del mismo lenguaje.

CSS
Cascading Style Sheets = Hojas de Estilo en Cascada. Este es un código complementario del HTML que sirve para separar el contenido del formato. La hoja de estilo controlará precisamente el formato, la apariencia de la página.

Si en una página hago una referencia a un CSS, ésta se mostrará con el formato preestablecido. Si en todas mis páginas escribo una línea que "llama" a mi hoja de estilo, todas las páginas tendrán el mismo formato y no tendré que teclear todo el código correspondiente al formato en todas y cada una de ellas.

Si además un buen día, pretendo cambiar alguna cosa, como por ejemplo el tamaño de la letra, sólo tendré que cambiar ese parámetro en el archivo CSS y se cambiará en todas a la vez. Si no existiera, tendría que modificar una a una todas las páginas. Realmente es una gran ventaja.

Un ejemplo de instrucción CSS sería

background: #000000;



Se deduce pues, que el HTML es imprescindible para crear una página o una web entera, pero que las Hojas de Estilo no son absolutamente necesarias, pero sí muy recomendables.

Habreis visto ya que hay diferencias en la formulación de ambos códigos. HTML funciona con TAGS (etiquetas) que van entre los símbolos < ... >. Un tag de apertura y otro de cierre que tiene el símbolo /. Entre ambos irá texto u otros elementos HTML.



Ejemplo de HTML


En CSS se declara una etiqueta y entre corchetes {...} se ponen las intrucciones,

Ejemplo de CSS



Cuando se crea una web, cada página será un fichero distinto terminado en .htm o .html y la hoja de estilo será otro fichero también distinto, con extensión .css. En cada página .htm se invocará con una instrucción (una línea de código), al fichero de la hoja de estilo. Así, el navegador cargará los datos, pero con ese formato que nosotros hemos diseñado para nuestro espacio.

Se pueden crear distintos estilos para distintas páginas dentro de la misma web. Sólo hay que llamar desde cada página al estilo que se quiera poner, aunque lo cómodo y lo estético, como se ha comentado, es que haya una hoja de estilo común.
.../...

Dentro de ciertas etiquetas de HTML, se pueden incorporar instrucciones de CSS, mediante el tag STYLE.

<div style="border:1px solid #000000; text-align:center;background:url(http://www.web.com/imagen.jpg);">HOLA QUE TAL</div>

No sé si exclusiva o principalmente, pero ésto se usa normalmente dentro de un DIV o un SPAN, de la forma que se ve en el ejemplo superior: dentro de la etiqueta, se añade un parámetro STYLE y entrecomillado, código CSS. Todo seguido y con los puntos y coma correspondientes.

Saber más en Wikipedia: HTML y CSS.

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

30 comentarios :

  1. Muy bueno, me hace acordar a los cursos para dummies que tantas veces he bajado cuando estaba aprendiendo jejeje. Avisame si quieres intercambiar enlaces con mi web que tiene una temática similar.
    http://www.comohacerunaweb.com

    ResponderEliminar
  2. jaja esta bueno tu blog.... aonq la verdad de a poco se empieza jaja

    ResponderEliminar
  3. Me Gusta tu página, la he puesto en favoritos.

    ResponderEliminar
  4. Gracias por la explicación.....osea puedo cambiar "solo" el CSS de una plantilla, modificando y/o reemplazando desde el body hasta el footer y con eso mantener el HTML original pero con una apariencia nueva en lo anterior.....osea, entendí bien...??? o estoy para plantar cabezas (entre esas la mía).

    ResponderEliminar
  5. Es así sólo que las referencias para Blogger no son esas. La parte CSS está entre
    <b:skin><![CDATA[/*
    y
    ]]></b:skin>
    y todo lo demás es HTML.

    Hay una excepción y es que fuera del SKIN, puedes meter estilo (CSS) si lo encierras entre las etiquetas
    <style type='text/css'>
    y
    </style>

    ResponderEliminar
  6. Okis, entendí....por fin, gracias por la pronta respuesta, me ha ayudado un montón, le agradezco la voluntad y el espíritu desinteresado que muestra al compartir sus conocimientos con personas ignotas, como yo.

    Saludos y queda entre mis favoritos de todas maneras.

    ResponderEliminar
  7. grcais se aprende con usted xD
    s asu explicran todo el mundo caray

    ResponderEliminar
  8. Hola oloman, realmente tu blog me ha servido mucho, pero necesito saber como darle estilo al menú principal de mi blog, me gustaria que me colaboraras con algunas css's que indiquen el tamaño de letra y depronto la forma solo para ese menú, please ayudame...
    (comercializadoramyc.blogspot.com)

    ResponderEliminar
  9. Hola.
    No conozco esa plantilla, pero parece que desde edición de fuentes y colores, debes acceder al aspecto de esas pestañas, ya que tienes una variable definida para la clase SELECTED que es la que controla su aspecto:
    Variable name="tab.selected.background.gradient" description="Selected Tab Background" type="url"
    default="url(http://www.blogblog.com/1kt/transparent/white80.png)"

    Por otro lado, tienes varias clases, incluida esa misma, que también controla el aspecto del enlace y del HOVER:
    .tabs-inner .widget li.selected a,
    .tabs-inner .widget li a:hover {
    ...

    En esos dos sitios es dónde tendrás que modificar atributos para modificar el aspecto del menú.

    Si prefieres reconstruirlo por completo, echa un vistazo a esta entrada.

    ResponderEliminar
  10. HOla men, lo unico q no entiendo es como subir plantillas a blogger q tengan archivos CCS, PHP e imagenes como las de tu blog, ya que dentro de la imagen se encuentra el vinculo HREF como por ejemplo las etiquetas de tu blog, si me pudieras colarborar te agradecería, conozco como manejar el codigo HTML pero no PHP ni las CCS styles.

    Gracias aquí esta mi blog por si le quieres echar un vistazo.

    proyectoquimicasena.blogspot.com

    ResponderEliminar
  11. Blogger no permite PHP. Para meter algo en ese lenguaje tienes que usar alojamientos externos.

    Pero para el resto no deberías tener problemas. El CSS va en la plantilla directamente, entre las etiquetas SKIN. Las imágenes se suben directamente desde el editor de entradas y desde ahí mismo, se pueden incorporar los enlaces (a href).

    ResponderEliminar
  12. Buenas noches. Ya que usted tiene experiencia con los torpes :), ya se la diferencia entre HTML y CSS y quizas entiendo que para instalar en mi blog un menu desplegable seria necesario acudir al codigo CSS. Ahora gran pregunta - partiendo de que uno es ignorante total, dedonde consigo la info para poder crear estos codigos o donde quizas conseguirlos ya creados??? Gracias

    ResponderEliminar
  13. Pues los puedes conseguir más o menos por aquí... ;)

    ResponderEliminar
  14. Estimado, muy buen blog. Lo encontré buscando ayuda.
    Te cuento: hace poco quise empezar un blog, pero me pille con un problemilla. He usado de base una planilla simple, sin embargo, al cambiar el background a una imagen mia, esta me queda oscura. Según lo que busqué, es porque la imagen tiene un código que la hace transparente, y eso opaca las fotos posteriores que puedan ponerse. ¿Como puedo sacar la transparencia?, este es el código:


    Según una amiga, es ahí donde debo cambiarlo, pero no me funciona. Espero me ayudes.

    ResponderEliminar
    Respuestas
    1. No sé, porque yo aprecio el mismo tono. Esta es la imagen que usas para tu fondo
      http://4.bp.blogspot.com/-WYYsoqyz3HQ/UkyJsrP7ulI/AAAAAAAAAKA/UBkWQ94klug/s0/4bd5293a219ef-2.jpg y para mí que es lo mismo que se ve en tu blog.

      Eliminar
  15. Oloman, tengo una pregunta, he creado una página web con wix, con un diseño que me gusta mucho y una bonita plantilla. ¿Cabría la posibilidad de trasladar esa plantilla a Blogger? Un saludo y gracias de antemano

    ResponderEliminar
    Respuestas
    1. La respuesta es sí, Alicia, pero no hay un sistema automático. Habría que reconstruir eso mismo en Blogger y para ello hacen falta conocimientos profundos de HTML y CSS.

      Eliminar
  16. Hola , acabo de descubrir tu blog y me ha gustado mucho .
    Yo tengo problemas con el código CSS , lo intento aplicar a mi plantilla simple de blogger y no me funcionan ( son códigos que veo ya hechos )
    Los he colocado en el "añadir CSS" y en el HTML de mi plantilla entre los y nada . No creo que los códigos estén equivocados porque leo en los comentarios lo bien que les va a todos los demás , la verdad es estoy un poco decepcionada .

    Espero que me puedas ayudar , gracias de antemano .

    Saludos

    ResponderEliminar
    Respuestas
    1. Hola.

      Me resulta difícil imaginar qué te pasa, pues como dices, los códigos son los que son y funcionan. Como dices hay un par de sitios en Blogger desde el que se puede añadir CSS, desde Personalizar y desde Edición HTML.

      En el primero tengo mis dudas, pero en el segundo caso -directamente en la plantilla- no te deberían fallar si lo pones justo al final del CSS, es decir, justo antes del cierre del SKIN.

      Si te pasa con todo resulta muy extraño y no voy a poder adivinar cual es el problema, pero si tienes una cosa concreta y me indicas lo que intentas hacer y dónde, quizás sí te pueda ayudar.

      Eliminar
    2. Muchas gracias por contestarme , es que lo que quiero hacer es que los cuadraditos de los post relacionados que hay debajo de cada post se unan en una sola linea y si pueden ser también quisiera redondearlos .... Si quieres para verlo te dejo mi blog ...

      www.decoraydiviertete.net

      Muchas gracias .

      Saludos

      Eliminar
    3. Bien. Eso es cuestión de que el CSS no está bien
      Añade a tus reglas estas dos:
      #related-posts div a {
      width: 72px;
      float: none !important;
      display: inline-block;
      vertical-align: top;
      }

      Eliminar
    4. Gracias por responder , acabo de probar lo que me has comentado pero no funciona .. Te dejo todo el código original a ver si puedes ver alguna cosa que esté mal .
      Gracias de nuevo por todo

      /* Post Relacionados
      ----------------------------------------------- */
      #related-posts {
      width:650px; /*Ancho del cuerpo de nuestras entradas*/
      float:left;
      height:100%;
      min-height:100%;
      padding-top:5px;
      margin-left:20px; /*Variar si queréis que quede centrado o si lo necesitáis, sino borradlo*/
      }
      #related-posts h2 {
      color:#555555; /*Color del título*/
      padding:5px;
      margin:0 0 10px;
      text-align:center; /*Para que esté centrado*/
      background:transparent;
      font:normal normal 13px Arial; /*Tamaño y tipografía del título*/
      text-transform:uppercase; /*Para que esté en mayúsculas, sino borradlo*/
      }
      #related-posts a {
      color:#888888; /*Color de los títulos de cada enlace*/
      overflow:hidden;
      display:block;
      width:80px;
      height:155px;
      }
      #related-posts a:hover {
      background:#fbfbfb; /*Color de fondo al pasar el ratón por encima*/
      color:#000000; /*Color de las letras al pasar el ratón por encima*/
      overflow:hidden;
      }
      #related-posts a img {
      box-shadow:none;
      padding:4px;
      padding-top:7px;
      }

      #rptxt{
      font:300 9px Muli;
      letter-spacing:0px;
      color:#333;
      text-transform:uppercase;
      }


      #rptxt{
      width:0px;
      height:0px;
      margin:0px;
      font:normal normal 10px Arial; /*Tamaño y tipografía del título de las entradas*/
      color:#333333; /*Color del título de las entradas*/
      }


      Saludos

      Montse

      Eliminar
    5. Con eso no tengo suficiente porque además hay un JavaScript que es el que hace la mayoría del "trabajo", pero si añades lo que te puse justo al final de lo que tú me pegaste en tu anterior comentario, me apuesto un desayuno a que funciona como me pediste ;)

      Eliminar
  17. Hola Oloman, fijte que tengo un problema, no se que le toque a mi blog sin darme cuenta y ahora no puedo ver las imagenes en la misma pagina sin necesidad de salir del blog o de abrir en una pestaña nueva, creo que era como el estilo que tu tienes aqui que si toco una imagen, puedo verla si necesidad de salir del post, sera que me puedes ayudar con ese problema, muchas gracias de antemano ;)

    ResponderEliminar
    Respuestas
    1. Eso de la imagen en la misma página se llama "Lightbox". Mira en esta entrada por si la solución que ofrezco te sirve a tí. Está casi al final del post.

      Eliminar
  18. Hola soy novata.
    tengo un problema con mi bloguer.
    no consigo que me funcione Analitic.
    inserte en bloguer mi Id pero no se si con esto basta.
    Analitic me dio un código para pegar despues de Head pero no he sido capaz.
    Cuando lo intento es como si no me dejase rscribir detras de head

    ResponderEliminar