Revista Cultura y Ocio

Crear un blog en Blogger para Dummies: La plantilla HTML, conceptos.

Publicado el 30 marzo 2016 por Aprende&comparte Roinmar Durán @roinmardc

plantilla html para blogger conceptos basicos

La Plantilla HTML, esa parte de tu blog que tanto te asusta toquetear pero que es necesario conocer para realizar pequeños y grandes cambios, que pueden cambiar del todo la imagen de tu blog para convertirlo en un blog más profesional y personal.

Esta serie de post va dirigido a bloggers principiantes, desde que comenzamos hemos aprendido mucho y si en el camino se te ha quedado pendiente algún hueco que rellenar sólo has de ponerte en contacto conmigo y lo solucionaremos.
Hasta ahora hemos visto:
  • Tu idea.
  • Conceptos básicos.
  • Header y Fondo.
  • Configuración básica.
  • Configuración básica II.
  • Configuración básica III.
  • Las apariencias.
  • La Sidebar.

A estas alturas debes tener claro que imagen es la que deseas transmitir y exactamente como deseas que se vea tu blog, va tomando forma y es hora de dar un paso más y pasar al diseño de la plantilla, es decir, pasamos a tocar el código HTML.
En el punto de inicio que te encuentras, me encontraba yo hace un par de años (¿cómo pasa el tiempo, eh?) y me pasaba lo mismo que seguro te pasa a ti ahora "¿tocar esta plantilla? no ni hablar!! ¿ y si desbarato lo que he conseguido hasta ahora y si me cargo el blog y si y si....?" todo eran miedos, pero como en todo, si no te lanzas a probar nunca aprenderás.
Así que aquí vengo yo, desde mi más humilde posición a enseñarte un poco sobre la famosa plantilla HTML.
Pero no quiero empezar a saco, si no despacio y para ello lo primero es saber un poco los conceptos básicos que te vas a encontrar en mucho de los tutoriales que hay en la red, y que te ayudarán a modificar tu blog mediante toqueteo en la plantilla.

Conceptos básicos sobre la plantilla HTML y diseño gráfico.


Son muchos los tutoriales que hay en blogs de Blogging, muchos a los cuales yo recurrí en su momento para modificar el aspecto de mi blog y hoy en día siguen ayudando a muchos bloggers que comienzan.
Sin embargo, es cierto que al entrar, si eres novato 100%, te encuentras con palabras y tecnicismos que asustan mas ya que te suenan a chino.... y una de dos, o sales corriendo o te sientas con un café y diccionario en mano, con mucha paciencia y te pones a ello.
Para evitar esos sustos,  hoy quiero desglosar un poco estos conceptos y crear una base, para después adentrarnos mas de lleno en lo que es la plantilla en si y su modificación para conseguir el blog de tus sueños.
Empecemos.


# HTML 


"¿A que te refieres cuando hablas de plantilla HTML?", es lo primero por lo que debemos empezar o no?.
Hyper Text Markup Language, esto vendría a ser las siglas y su traducción "Lenguaje de marcado de Hiper Texto" ¿te has quedado igual, verdad?, no me extraña.
El HTML es un lenguaje estándar que se utiliza en el mundo de Internet para crear paginas web y blogs, determinan básicamente su estructura mediante un código que recibe este nombre y que puede ser modificado para darle estilo.

Se crea para ser interpretado por cualquier navegador de la misma forma, de modo que se mantenga el mismo diseño en un numero x de páginas dentro de un sitio web; sin cargar a esta de elementos externos, solo texto, para que posteriormente el navegador web lo descifre y muestre la imagen visual, vista igual desde cualquier dispositivo.
El código HTML básico vendría a ser el siguiente:
<! DOCTYPE html> 
<Html> 
<Head> <Title> Ejemplo de la página </ title> </ Head> 
<Body> <H1> Página de ejemplo </ h1> 
<P> Esta es una sencilla muestra de <a href="demo.html"> </a>. </ P> 
<! - Esto es un comentario -> 
</ Body></ Html> 
Fuente: W3C 

# Navegador


Este termino creo que todos lo conocemos, pero como se habla de él arriba vamos a definirlo.
Navegador es el programa que nos permite acceder a Internet y visualizar las paginas web, acceder a los correos electrónicos y toda actividad en la red.

Ejemplo: Google Chrome, Moxila, Firefox....
Estos son los encargados de descifrar el código HTML y mostrarlo de forma visual en la pantalla de nuestro dispositivo.

# Etiquetas.


El código HTML esta formado de etiquetas de apertura y de cierre que permite incorporar a la página elementos como texto, imágenes, scripts, tablas, vídeos y todo lo que se te ocurra.
En el código de arriba se pueden apreciar claramente, vienen definidas con los símbolos < > para etiquetas de apertura y  < />  para las de cierre...por ejemplo: la etiqueta principal que engloba todo el código <Html> .....</Html>.
Estas etiquetas son las que marcan al navegador como debe verse la pagina (la estructura de la misma) el texto, la imagen o el resto de elementos incorporados, en la pantalla del dispositivo.
Entre la etiqueta de apertura y de cierre, suele incorporarse el texto que debe aparecer en la pagina, y las etiquetas marcan el formato en que debe verse.

# Atributos.


Son elementos que se introducen dentro de las etiquetas para dar forma y estilo o introducir elementos externos dentro de las paginas.
Uno de los atributos más comunes son por un lado el atributo Style para dar el estilo deseado a un determinado elemento o texto de la pagina o href  para introducir elementos externos a través de otros enlaces o urls.

Los atributos de las etiquetas HTML sirven para definir detalles de comportamiento o presentación de la etiqueta a los que se les coloca. Se escriben dentro de la propia etiqueta con su nombre de atributo y el valor del atributo entre comillas. 
Fuente: desarrollo web

Existe una lista de referencia sobre atributos a utilizar dentro de las etiquetas de los códigos HTML, te dejo el enlace al que le puedes ir echando un vistazo. Pero no te agobies, recuerda que lo que estamos es aclarando conceptos y todo será más claro al ponerlo en práctica más adelante.
Voy a adelantarte un ejemplo: 
Supón que quieres dar estilo al titulo del blog. Para ello se usa las etiquetas <tittle>TITULO DEL BLOG</tittle>, de esta forma ya estarías indicando cual es el título del blog. 
Pero lo que tu deseas es darle color, que aparezca en mayúscula y con una tamaño de por ejemplo 60 pixeles....para conseguir este formato pasamos a usar los atributos y quedaría de la siguiente manera:
<tittle style = "color: #70a882; font-size: 60px; text-transform: uppercase"> TITULODELBLOG </tittle> 
Si te fijas, el atributo que le da el estilo que deseas es Style y va introducido dentro de la etiqueta de apertura, va seguida de el símbolo = y entre comillas se indican los valores del estilo que has decidido darle al título, separados por " ; " cada uno de ellos.

# CSS


Cascading Slyle Sheets - Hojas de Estilo en Cascada,  es el complemente perfecto del código HTML y es que así como con las etiquetas del código HTML se le puede dar una estructura determinada al blog o páginas web, con el CSS lo que se consigue es personalizarlo, darle ese toque bonito que estas buscando, la parte de diseño, la vida, la identidad que buscas conseguir mostrar al público.
Imagínate que quisieras dar al título de los post (etiqueta <h1> titulo post</h1>) infinidad de estilos, por ejemplo: colocar un fondo, una imagen, un efecto al situar el ratón encima, un estilo de tipografía muy concreto, bordes, margenes, etc...podríamos llenar el atributo style de valores y ademas tendrías que añadirlo al inicio de cada etiqueta h1.
Esto no es muy bueno para crear una plantilla HTML correcta y práctica. Por ello, para marcar los estilos mejor se utilizan los CSS.
A través de ellos se puede indicar que a todos las etiquetas de h1, de las paginas de tu blog o web, se le de el mismo estilo...sin tener que estar reescribiendo cada vez.
¿Cómo?, esto es algo que haremos más adelante, no quieras correr!!


Estos vendrían a ser los conceptos más utilizados en el momento de modificar una plantilla HTML.
Cómo sabes yo siempre hago referencia a Blogger que es la plataforma por donde me muevo y donde tengo experiencia.
Seguro que si has llevado a cabo tutoriales para dar forma a tu blog, como el que aparece en "Tutoriales Blogger para Dummies: la plantilla HTML" de El Perro de Papel, donde Celia explica como centrar el menú principal, quizás te hayas topado con más conceptos que te gustaría aclarar.
Por tanto, quiero abrir este post para seguir incorporando conceptos relacionados.

Puedes escribirme en los comentarios y hacer referencia al término que deseas que incluya en esta entrada....relacionada con el diseño de la plantilla HTML...¿qué te parece?¿hacemos un diccionario juntas?.

Antes de irme quiero recomendarte unos tutoriales básicos para ir modificando el aspecto de tu blog, en algunos se toca la plantilla HTML de forma simple, puedes ir adquiriendo confianza y generando dudas que pueda resolver en los siguientes post (no olvides comentarlo, si no no sabré de que dudas se trata):
  • Elimina el Navbar o barra de navegación.
  • Coloca tu firma al final de los post de forma automática.
  • Coloca los botones sociales en tu blog.
  • Coloca una imagen en la fecha de los post de blogger
  • Da estilo a las "citas" de tus post.

Estos son algunos de los tutoriales que puedes conseguir en el blog.
No olvides crear una copia de seguridad antes de toquetear la plantilla HTML, por si acaso algo saliese mal, puedas volver a recuperar lo que ya tenias.
Esto es todo por hoy, espero que te haya gustado y que me ayudes a crear un diccionario más extenso.
Estaré pendiente en los comentarios!!
autora roinmar duran

FacebookGoogle plusInstagram¡¡suscribete!!


Volver a la Portada de Logo Paperblog