Blog

Aprende código HTML básico para bloggers

La primera vez que te encuentras con código en tu sitio, puede parecerte que estás leyendo el texto de un idioma extraterrestre. Créeme, te entiendo.

Cuando empecé con mi blog, quería hacer las cosas divertidas: Escribir y compartir cosas que me gustaban, subir fotos padres al blog. Definitivamente NO estaba preparada mentalmente para aprender código, programación y esas cosas que, según yo, eran demasiado difíciles.

Peeeero, una vez que fui aprendiendo ciertas cositas sobre cómo funciona el código de mi blog, me di cuenta que no es taaaaan complicado como parece a primera vista. Además, entender un poquito mejor el código de mi sitio me ha ayudado a saber cómo personalizar mi blog para dar a conocer mi mensaje de la mejor forma y tener mej0res resultados.

Código HTML básico para bloggers

Así que en esta publicación te quiero dar una guía de código básico para principiantes, para que puedas entender mejor cómo funciona tu blog y modificarlo según tus necesidades de estilo y diseño.

Esta guía incluye solamente aquellos elementos básicos que debes dominar para personalizar el estilo de tu blog, así que no te preocupes, no nos vamos a abrumar con el código más complicado ni vamos a aprender a programar un cohete que salga a la luna.

Qué es el código y cómo funciona un blog

Antes que nada, seguramente te preguntarás qué es el código y qué es lo que le hace a tu blog. Para entender lo que es el código, primero tenemos que entender cómo funcionan los sitios web.

Todas las páginas web y los blogs están compuestos por varios archivos y documentos; y estos a su vez contienen textos, imágenes, formato, etc. Para que los navegadores como Google Chrome o Safari puedan mostrar las páginas web, necesitan leer estos archivos.

El código son las indicaciones escritas en los archivos de tu blog para que los navegadores muestren el resultado final a los usuarios.

Cada una de las partes del código de tu blog le dice a los navegadores cuál es la información que debe mostrar y de qué manera desplegarla.

Cuando usamos una plataforma de blog (Por ejemplo, si instalamos WordPress en nuestro servidor) nosotros no tenemos que escribir el código de nuestro sitio; ya que la plataforma tiene los documentos con el código que se necesita para que el navegador pueda interpretarlo y mostrarle a los usuarios el resultado final.

Sin embargo, aprender un poquito de código nos puede ayudar a personalizar nuestro blog, agregar ciertos elementos en algunas partes o sencillamente poder leer qué es lo que está mostrando nuestro blog.

Qué es el código HTML

El lenguaje básico en el que están escritas todas las páginas web se llama HTML, por sus siglas que significan “Hypertext Markup Language” o “Lenguaje de marcas de hipertexto”. Este es el lenguaje estándar que todos los navegadores son capaces de interpretar.

Si utilizas WordPress, seguramente habrás notado que cuando escribes una nueva entrada puedes ver dos modos: El visual y HTML.

En el modo “Visual” vas a ver el texto con el formato que le quieres dar (Es como si escribieras un documento de Word o un email) y en “HTML” verás el código que le dice al navegador con qué formato mostrar ese texto.

Si quieres practicar código HTML, esta es una forma sencilla y segura de aprender lo básico de código HTML dentro de tu blog, ya que no pasa nada malo si escribes mal el código.

Por nada del mundo intentes modificar los archivos originales de WordPress de tu blog.

Repito: SI NO LO DOMINAS, NO CAMBIES NADA AL CÓDIGO ORIGINAL DE TU BLOG.

Cualquier cambio a los archivos de WordPress que has instalado en tu sitio pueden modificar tu blog y el contenido de este para siempre. Si te falta un sólo símbolo dentro del código, puede que tu blog ya no funcione.

Es muy importante que sólo cambies el código en lugares en donde no pasa nada si lo escribes mal. Estos lugares pueden ser:

  • Escribiendo una entrada o página
  • Poner un Widget de HTML
  • Copiando y pegando el código exacto de alguna herramienta extra que quieras agregar a tu blog

Básicos en HTML

Ahora que ya sabes cómo funciona el código en tu blog, qué te parece si creas tu propio código HTML.

A continuación vamos a ver cuáles son algunos de los elementos básicos de HTML. Puedes practicarlos de manera segura creando una nueva página o entrada dentro de tu blog en WordPress (O cualquier otra plataforma de blogs que estés usando).

Etiquetas

Todos los elementos de HTML están especificados por etiquetas. Las etiquetas están formadas por los símbolos de “menor que” < y “mayor que” >. Entre estos símbolos escribimos la palabra o palabras de cada función que queremos mostrar en nuestro código.

Así se vería una etiqueta: <Etiqueta>

Etiqueta de apertura y cierre

Muchas etiquetas funcionan en pares, así que necesitamos una que indique en dónde queremos que comience esa función y otra que indique en dónde queremos que termine.

Para escribir la etiqueta de apertura agregamos el símbolo de “menor que”, la instrucción y luego el símbolo de “mayor que”.

Así se vería una etiqueta la etiqueta de apertura: <Etiqueta>

Para escribir la etiqueta de cierre, hacemos lo mismo, pero antes de poner el símbolo de “mayor que”, ponemos el símbolo de “barra inclinada” /.

Así se vería una etiqueta de cierre: <Etiqueta/>

Ambas etiquetas marcan el inicio y fin de la indicación que le estamos dando al navegador.

Así se verían ambas etiquetas:

<Etiqueta>Ejemplo de texto</Etiqueta>

Etiquetas sin cierre

Hay algunas etiquetas que no necesitan tener un cierre, ya que funcionan por sí mismas. No te preocupes, ahorita veremos ejemplos de cómo usar las etiquetas básicas para modificar tu texto.

Practiquemos algunas etiquetas HTML

Negrita

Si queremos poner nuestro texto en negrita, tenemos que poner la etiqueta en <strong>

<strong>El texto que queremos en negrita</strong>

Cursiva

Si queremos poner nuestro texto en cursiva, tenemos que poner la etiqueta <em>

<em>El texto que queremos en cursiva</em>

Títulos y subtítulos

Para agregar un título a nuestra publicación del blog necesitamos usar la etiqueta <h1>

<h1>Título de nuestra publicación</h1>

Si queremos agregar subtítulos, añadimos las etiquetas <h2>,<h3>,<h4>, etc.

<h2>Título 2</h2>

<h3>Título 3</h3>

<h4>Título 4</h4>

Párrafos

Para agregar párrafos a nuestro texto usamos la etiqueta <p>

<p>Este es un párrafo de ejemplo.Este es un párrafo de ejemplo.Este es un párrafo de ejemplo.Este es un párrafo de ejemplo.Este es un párrafo de ejemplo.</p>

<p>Este es un párrafo de ejemplo.Este es un párrafo de ejemplo.Este es un párrafo de ejemplo.Este es un párrafo de ejemplo.Este es un párrafo de ejemplo.</p>

Enlaces

Los enlaces son texto en el que el usuario puede hacer clic para ir a otro sitio web. Para añadir un enlace usamos la etiqueta <a> y para indicar cuál es la dirección web que queremos enlazar usamos el atributo href= y entre comillas escribimos la página.

Así quedaría un enlace:

<a href=”http://www.lapaginaweb.com”>Ejemplo de enlace</a>

<a href=”http://www.soniaalicia.com”>Ejemplo de enlace</a>

Listas

Si queremos poner una lista necesitamos poner una etiqueta para establecer que vamos a crear una lista y después añadir una etiqueta a cada uno de los elementos que queremos en la lista.

Existen dos tipos de listas: ordenadas por números y sin orden.

Lista ordenada

Si queremos una lista ordenada usamos la etiqueta <ol> y para definir cada elemento la etiqueta <li>.

Una lista ordenada numéricamente nos quedaría así:

<ol>

<li> Elemento 1</li>

<li> Elemento 2</li>

<li> Elemento 3</li>

</ol>

Lista sin orden

Si queremos una lista sin orden usamos la etiqueta <ul> y para definir cada elemento usamos de nuevo la etiqueta <li>

Una lista sin orden nos quedaría así:

<ul>

<li> Elemento 1</li>

<li> Elemento 2</li>

<li> Elemento 3</li>

</ul>

Imágenes

Si queremos colocar una imagen necesitamos subir esa imagen a internet y después copiar la dirección de la imagen.

Por ejemplo:

http://soniaalicia.com/imagen.png

Una vez que tenemos esa dirección podemos escribir en el código que queremos poner esa imagen. Para eso usamos la etiqueta <img>

Para decirle al navegador en qué dirección está nuestra imagen usamos el atributo src= y ponemos la dirección entre comillas.

La etiqueta para poner la imagen quedaría así:

<img src=”http://soniaalicia.com/imagen.png”>

Si te fijas, esta etiqueta no necesita de una etiqueta de cierre 😉

En el caso de que necesitemos que nuestra imagen además tenga un enlace (Que cuando la gente haga clic sobre la imagen los lleve a otra página) tenemos que agregar las dos etiquetas.

La primera etiqueta sería estableciendo el enlace y la segunda diciendo que queremos mostrar esa imagen. El código quedaría así:

<a href=”http://www.soniaalicia.com”><img src=”http://soniaalicia.com/imagen.png”></a>

 

 

Espero que esta guía te ayude a aprender cómo usar código HTML dentro de tu blog. Si te sirve esta información, ayúdame a compartir este post con otros bloggers 😉