Hoy en día emprender en la creación de páginas web es bastante sencillo, gracias a la facilidad que proporcionan los CMS como WordPress; los cuales cuentan con plantillas y elementos predeterminados para administrar de forma visual los contenidos del sitio web.
Muchas de estas plantillas permiten hacer una serie de cambios, para que puedas personalizar tu web según tu estilo. Pero especialmente las plantillas gratuitas tienen ciertas limitantes a la hora de querer cambiar estilos, colores, fuentes, entre otros aspectos; los cuales podrían ser modificados accediendo al código fuente.
Aprender sobre programación web requiere de mucho más que un día de dedicación. Pero adquirir los conocimientos básicos para configurar ciertos aspectos de tu sitio web es posible por medio de la aplicación de códigos HTML básicos.
Conocer ciertos aspectos de éstos, junto a un manejo básico del código CSS, puede ser la clave para dominar todos los aspectos de tu página web, que el CMS que usas no te deja personalizar.
Así que si acabas de terminar nuestro curso de WordPress y te interesa aprender a manejar con un poco más de profundidad tu website, en este post te enseñamos las nociones básicas de HTML y CSS que te permitan conquistar tu página web.
¿Qué son los códigos HTML?
Se trata de una serie de codificaciones que permiten estructurar una página web, los cuales actúan como un lenguaje universal para la programación web. Sus siglas provienen del inglés “HyperText Markup Language”, que se traduce como Lenguaje de marcado de hipertexto.
Estos códigos le dan el formato al sitio web, por medio del uso de etiquetas que permiten identificar los distintos componentes de la estructura de la página, como el encabezado, barras laterales, pie de página, entre otros segmentos.
¿Qué es el código CSS?
CSS es el conjunto de códigos que te permite modificar las propiedades del HTML. Por lo tanto, se puede decir que estos códigos funcionan en conjunto para darle la estructura visual a la página y permitir la personalización de la misma.
Por medio del uso del código CSS se pueden cambiar características como colores, tamaños de letra, fuentes, espaciado, márgenes, entre muchas otras propiedades.
Estructura básica que debes conocer sobre los códigos HTML y CSS
Conocer cómo se estructuran los distintos elementos es importante para poder hacer cualquier modificación en la página web.
HTML
Este lenguaje universal emplea una serie de símbolos para identificar cada etiqueta. A su vez, estas etiquetas permiten identificar cada elemento, como el encabezado, las imágenes, el texto, las tablas, los hipervínculos, y demás elementos que conforman la diagramación de la web.
Lo primero que debes conocer sobre el código HTML para web es que para identificar una etiqueta, se usan los símbolos “menor que” (<) y “mayor que” (>), de la siguiente manera: <tag>
Este código se emplea de esta manera para dar inicio al segmento que abarca dicha etiqueta. Pero para indicar dónde termina, se emplea de la siguiente manera:
<tag/>
En cada caso, la palabra “tag” se sustituye por el nombre que define cada segmento.
Algunos ejemplos básicos de etiquetas en el código HTML son:
<html> = Indica que la página está desarrollada en código HTML
<header> = Identifica el inicio del encabezado
<title> = Se usa para mostrar el título
<body> = Indica el segmento del cuerpo o contenido de la web
<h1> <h2> = H1 indica título 1, H2 indica título 2, y así sucesivamente
<p> = Se usa para decir dónde van los párrafos
<img> = Identifica las imágenes
Existen muchas otras etiquetas, de acuerdo a los elementos que se usen en la web, pero éstos son de los más básicos.
CSS
En el caso del CSS, la estructura del código se define por medio de selectores, los cuales se dividen en identificadores y clases.
El identificador es un elemento único, que no se repite más de una vez en la web. Este se identifica mediante el símbolo #, que se coloca antes de la palabra que define el elemento.
Ejemplo:
#boton
En este ejemplo vemos como este código identifica un botón único y si se modifican sus características, no cambiará la estructura del resto de elementos.
Por su parte, una clase define una serie de elementos que guardan las mismas características; y al momento de realizar alguna personalización, todos los componentes que se incluyan en dicha clase serán alterados. Las clases se identifican por medio de un punto que se coloca antes del elemento.
Ejemplo:
.separador
Cuando hacemos cambios en la página por medio de CSS, estas modificaciones se reflejan en el código HTML por medio de estructuras que se adaptan a las características de este último.
Por tanto, los identificadores en lugar de verse con el símbolo # se denotarán por medio del código id=‘nombre del identificador’. Y en el caso de las clases, se verán de la siguiente manera class=‘nombre de la clase’
Los demás elementos conocidos se identifican con sus nombres respectivos, como header, title, p…
La estructura para identificar la apertura y cierre de cada segmento es por medio de llaves. Cuando queremos modificar una característica de un elemento, veremos que luego del nombre del identificador o de la clase se coloca una llave abierta y se termina cuando se coloca la llave cerrada.
Cada característica del elemento se coloca en una línea separada, identificada por su nombre y dos puntos, seguido del parámetro. Para separar las distintas propiedades se usa un punto y coma (;) al final de cada línea. Por tanto, un código en CSS se vería de la siguiente manera:
p {
font-family: ‘arial, verdana, sans-serif’;
font-size: 12px;
color: #808080;
}
Usualmente las propiedades se expresan en píxeles, con la abreviatura px. Entre estos se incluyen los valores como tamaños de letras, espesores de líneas, separaciones o márgenes, entre otros.
Algunas de las propiedades que usualmente se modifican por medio del código CSS son:
font-family = Familia de fuentes usada
font-size = Tamaño de la letra utilizada
color = Color del elemento. Se expresa en formato hexadecimal (#FFFFFF)
background-color = Color del fondo. Se expresa en formato hexadecimal (#FFFFFF)
width = Ancho. Se expresa en px o píxeles
padding = Separación interna o área de relleno de un elemento.
margin = Indica el margen o separación externa del elemento.
border = Determina las características del borde de un elemento en específico
Existen muchas otras características que se pueden modificar mediante los códigos HTML y CSS, pero básicamente guardan la misma relación. Así que entendiendo estos parámetros podrás personalizar distintos elementos de tu página web, como cambiar tamaños de fuentes, estilos de letras, colores y muchos otros aspectos más, aun cuando la plantilla del CMS que usas no te lo permita.
