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 much...

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.

Votar en los Premios Bitacoras.com

¿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.

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

21 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