Comienzo una serie de pequeñas guías en Diarios de la nube que te van a ayudar a comprender el código utilizado en Blogger para que seas capaz de saber "dónde estás tocando" y "cómo lo estás tocando", de manera que te sirva para subir de nivel en el conocimiento de esta herramienta y te ayude a configurarte la plantilla a tu gusto.
NOTA IMPORTANTE: Se evita utilizar terminología compleja o excesivamente técnica en esta guía para acercar con la mayor simplificación posible el código a todas las personas que deseen conocerlo. No se va a utilizar en ningún momento palabras o nomenclatura de programación convencional, esta guía va dirigida a aquellos que no tienen ninguna o poca experiencia en programación de páginas web.
Es preciso aprender primero lo básico que compone una página HTML para después poder entender el funcionamiento de una página XHTML de una plantilla de Blogger. Veamos un ejemplo que puedes poner en práctica si lo deseas:
Aprendiendo a hacer tu primer HTML, Básico para aprender después el XHTML de Blogger.
¿Cómo se programa en XHTML ó HTML?, el nivel más mínimo de la estructura, la etiqueta:
Una página HTML posee una estructura clara que le indica al navegador dónde está la "cabecera" de la página, el cuerpo de la página y su final. En XHTML sucede igual, escribes una "estructura" formada con etiquetas.
La programación en XHTML o HTML, simplificando al máximo técnicamente se "reduce" al uso de etiquetas:
<etiqueta> </etiqueta>
El cuerpo de la plantilla se compone de un conjunto de "etiquetas" cuyo comienzo y final se acompañan del símbolo "menor que" < y el símbolo "mayor que" >. Ambos caracteres delimitan el cuerpo de la etiqueta. Dentro de ella se escriben "palabras clave" que el navegador interpreta como "normas" para montar una página.
Normalmente, en HTML las etiquetas llevan una etiqueta de apertura <etiqueta> y otra de cierre </etiqueta> que suele llevar una / para indicar que la etiqueta se está cerrando.
Un ejemplo práctico. Comprendiendo primero el HTML para luego dar el salto en Blogger al XHTML:
Si lo deseas puedes abrir un editor de textos, por ejemplo el Notepad y escribir el ejemplo que te pongo a continuación con un HTML básico, luego podrás probarlo en tu navegador:
1) En windows abre un editor de textos, preferentemente Notepad. En la imagen lo puedes ver abajo a la izquierda. (Puedes abrirlo pulsando Inicio y después ejecutar para por último escribir Notepad y pulsar enter).
2) Copia el código que después te explicaré
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><title> título </title></head><body>¡Hola mundo!</body></html>
Explicación detallada de cada parte del código:
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">: Esta etiqueta le informa al navegador de que se está trabajando con una página HTML. Esta información la pasamos por alto para no añadir complejidad a la guía. Simplemente debes saber que le indica al navegador con que tipo de código va a trabajar.
- <html>: Esta etiqueta informa de que en su interior y hasta donde llegue su cierre </html> lo que hay dentro es el código HTML que conforma la página que estamos construyendo.
- <head>: Esta etiqueta le informa al navegador de que dentro de ella se compondrá el apartado "head", cabeza en inglés. Dentro de él está la cabecera de la página HTML que estamos formando. La parte de código <title> título </title> expresa que en el interior de la etiqueta <title> hasta que se cierre con </title> tendremos en el interior el título que queramos ponerle a la página. Como cualquier otra etiqueta el <head> debe cerrarse con su etiqueta con / indicando que se cierra la etiqueta: </head>.
- <body>: Es el cuerpo de toda la página HTML que estamos creando. Va desde donde ponemos la etiqueta <body> hasta donde ponemos la de cierre </body> con su correspondiente /. En su interior hemos escrito "¡Hola mundo!", que es justo el texto que os saldrá en el navegador cuando hagáis doble "clic" sobre vuestra página HTML después de que la grabemos.
3) Ve al menú "Archivo" y despues "guardar como", almacena el archivo como "prueba.html".
4) Si haces doble "clic" en el archivo que antes hemos creado "prueba.html", tendrás tu primer "¡Hola mundo!" realizado en HTML en tu navegador:
En la próxima entrega continuamos con la plantilla Blogger, haremos nuestro primer ¡Hola mundo! en Blogger.
Hola Miguel, muy interesante esta entrada, me gusta y me tomaré mi tiempo para asimilarla porque es muy práctica, te familiariza con términos incomprensibles para quienes no sabemos nada de informática o programación Saludos
ResponderEliminarGracias Conchi, así es, va para todos los que necesitan ayuda para familiarizarse con el código Blogger y aprender a utilizarlo desde 0. Me alegro que pueda servirte, me motiva para hacer más entradas de este tipo porque tenía que no tuvieran aceptación. ¡Un saludo amiga!
EliminarMe parece muy útil para los que como yo tenemos un blog y no sabemos del tema, lo iré mirando poco a poco para enterarme bien y estaré pendiente de lo que vayas poniendo. Gracias!!
ResponderEliminarGracias Noemí, me motiva para continuar con éstas entradas, con que sólo sirvieran a los que habéis escrito, ya me sentiría satisfecho. A ver si saco tiempo que estos días ando liado.
EliminarLo dicho, muchas gracias Noemí y estás guapísima en tu nueva foto!. Un abrazo y cuídate.
Voy a seguirte en esta, Miguel, a ver si aprendo de una buena vez. Te agradezco toda la ayuda que nos acercas a quienes no sabemos nada del tema, y te saludo con cariño y gratitud.
ResponderEliminarFer
Y yo te agradezco a ti el apoyo. A ver si consigo hacer unas buenas guías en esta línea, que ayuden a todos a comprender mejor como funciona Blogger y un poco su programación.
ResponderEliminarComo siempre un placer leerte Fer.
Excelente para no dejar perder. Gracias desde Mallorca con INNEMPRE
ResponderEliminarGracias Ave Fer, un placer poder ayudar. Cualquier cosa aquí me tienes. Gracias por participar.
EliminarMuchas gracias Miguel por tu aportación. Veo que pones el logo de html5. ¿Utilizas este lenguaje para explicar la programación de blogger?
ResponderEliminarSaludos.
Uys... perdón. HTML4.... debo leer mejor. :-)
ResponderEliminarHola Libertad!, no te preocupes por ello. En realidad HTML5 es un estándar o una manera de programar y hacer las cosas con el HTML. En Blogger como habrás visto en el cursillo se trabaja en XHTML que luego pasa a HTML. Pero no te preocupes por ese punto, lo fundamental es que aprendas cómo se maneja el código de Blogger y que no sea tan "opaco".
EliminarUn saludo y muchas gracias por participar.
Gracias miguel por todos tus consejos. A ver si por fin pongo alguno en marcaba q soy negada para la informática jiji.
ResponderEliminarA tu servicio, cualquier duda pregunta lo que necesites. Un abrazo!!!
EliminarMe encanta toquetear mi plantilla y mas o menos domino los terminos del leguaje. Pero uba guia como la tuya me vendra genial mejorar y ganar seguridad. Mil gracias.un saludo.
ResponderEliminarMe alegro que te guste Ana María. Al final realizar modificaciones en la plantilla te ayuda a personalizar el máximo tu web, es entretenido pero cuidado que engancha ;)
EliminarUn saludo!
Ufff vaya tela cd leo estas cosas me doy cuenta de lo verde que estoy y lo mucho q puedo aprender y mejorar. Lo leere con calma, muchas gracias por la entrada . Bss
ResponderEliminarBueno, no es imprescindible saber cómo tocar el código de Blogger pero si te ayudará a comprender todo lo que haces en la plantilla mucho mejor.
EliminarUn saludo!