Aquellos que desean personalizar sus plantillas del blog, necesariamente deben de tener un mínimo de conocimiento en HTML y CSS.
Al instalar un gadget, o hacer alguna personalización estética en el blog, seguramente algunos se enfrentan a ciertos códigos de los cuales a menudo ni siquiera saben el significado o no entienden para qué sirven concretamente, por eso es fundamental conocer aunque sea lo básico para entenderlo, aprender de qué se trata cada parte del código y saber reconocerlos en la planilla.
Este artículo no intenta dar clases sobres HTML y CSS, sólo intentaremos enseñar algún conocimiento básico de la manera más simple y accesible posible, por lo menos para que puedan entender un poquito mejor sobre el asunto, facilitando la aplicación de códigos y para aprender poder modificar el diseño de tu blog, o quizás hasta empezar a crear plantillas personalizadas.
Para aquellos que pretenden profundizar más en el asunto, recomiendo indagar en estas páginas webs en HTML y CSS listas para descargar que tienen una calidad impresionante y en las cuales se explican notablemente los conceptos que aquí solo mencionaremos brevemente.
Para comenzar, vamos a identificar algunos elementos en la plantilla.
Cuando hacemos clic en la opción "Editar HTML" en Blogger, nos encontramos con varias etiquetas.
El inicio de nuestro documento es HTML iniciado por la etiqueta <html>, y si se desplaza la página hasta el final, verán que hay una etiqueta de cierre que es </ html>.
Al entrar en la edición HTML en Blogger, visualizamos cuál es el lenguaje que está siendo utilizado en la página (XHTML), representadas por estas etiquetas (es importante no mover ni modificar nada en esta sección):
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
1. Estructura Básica del HTML:
En Blogger, el documento HTML se compone de la siguiente estructura básica:
<html>
<head>
Dentro de estos tags está contenido el estilo de página (CSS).
Aquí podemos determinar la apariencia de los elementos que aparecen en nuestro blog.
<head/>
<body>
Entre estas etiquetas está contenida la estructura de la página, sus elementos (HTML). Es el cuerpo del documento. Aquí creamos los bloques que serán mostrados en la página como las columnas, menús, etc.
</body>
</html>
2. HTML y CSS:
Seguramente ya habrás sentido hablar de CSS y HTML, pero quizás no sabías que significa exactamente.
CSS son las siglas de Cascading Style Sheets = Hoja de estilos en cascada. Es un lenguaje para estilos que define el layout de documentos HTML.
El CSS es un mecanismo para agregar estilos, donde controlas la apariencia de las fuentes, colores, margenes, lineas, medidas, imágenes de fondo, posicionamiento de los elementos, etc.
HTML son las siglas de HyperText Markup Language, es un lenguaje que posibilita presentar la información de una página y todo aquello que esté contenido en ella.
Resumiento, HTML es utilizado para estructurar contenidos, mientras que CSS es utilizado para dar forma a contenidos estructurados.
3. CSS en Blogger:
Ya vimos que el código CSS que da el estilo a la página es donde determinamos la apariencia de de los elementos. En Blogger, comienza con :
<b:skin><![CDATA[/*
Y su etiqueta de cierre es :
]]></b:skin>.Y siempre que quieramos agregar estilos a los elementos, debemos insertar los códigos referentes antes de la etiqueta de cierre. ]]></b:skin> .
CSS tiene un lenguaje propio, que forma una hoja de estilos y se compone de tres partes:
a) Selector
b) Propiedad
c) Valor
Siguiendo las reglas de este lenguaje, se escribe el selector y después la propiedad y el valor, separados por dos puntos y entre llaves {}.
Cuando tengamos que definir más de una propiedad, por regla general, se debe usar punto y coma para separarlas.
Ejemplo:
body{
background-color: $bgcolor;
}
Estas son las explicaciones básicas iniciales como para hacer una brave introducción al HTML y CSS.
Próximamente traeremos más tutoriales explicativos sobre CSS y HTML.
Mientras tanto, te invitamos a explorar más códigos CSS para potenciar tu sitio web y personalizar de la mejor manera tu blog.
0 comments:
Publicar un comentario