¡Yaaaaaayy! ¡Estoy de vuelta! Disculpa mi abandono… ¿Cuántas veces no has visto ese idioma extraterrestre en tu blog sin comprender qué es? Yo igual que tu, cuando comencé mi carrera universitaria: en las materias de programación que cursaba pensaba, este montón de código en inglés me va a comer, ahora yo lo devoro jejeje 😀 y quiero explicarte a ti para que lo domines. 😀

Al empezar tu blog, quieres hacer cosas divertidas como escribir, subir fotografías y compartir cosas, definitivamente es muy divertido, pero también tienes que prepararte para aprender un poco de código y programación básica, que es súper fácil.

Con este post aprenderás HTML básico para bloggers y verás que no es taaaan complicado como creías. Te servirá para entender un poco mejor el código de tu sitio y podrás saber cómo personalizar tu blog.

HTML BÁSICO PARA BLOGGERS

Antes de comenzar, te preguntarás: Ajá, pero ¿Qué es el código y que hace en mi blog? Para entender lo que es el código, veamos primero cómo funcionan los sitios webs.

Todas las páginas web y los blogs están compuestos por una serie de archivos, los cuales contienen texto, imágenes, vídeos y más. La lectura de estos archivos es lo que nosotros vemos en Firefox, Chrome y demás navegadores.

Básicamente, el código son un conjunto de líneas de texto con los pasos que debe seguir la computadora para ejecutar dicho programa. En el caso de tu blog, serían indicaciones escritas en los archivos de tu blog para que los navegadores muestren el resultado final a tus visitantes.

El código le indica a los navegadores que información debe mostrar y de qué forma desplegarla. Cuando hacemos uso de una plataforma como WordPress, no tenemos que escribir el código de nuestro sitio, ya que esta plataforma incluye los documentos con el código listo para que el navegador interprete y muestre el resultado final.

Aprender un poco de código te ayuda a personalizar tu blog, agregar ciertos elementos en algunas partes. Es súper divertido y muy interesante.

¿QUÉ ES EL CÓDIGO HTML?

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

Si utilizas WordPress, te habrás fijado que cuando escribes una nueva entrada o creas una nueva página puedes visualizar dos formas: HTML y el visual. En el modo “Visual”, ves el texto con el formato que le vas dando, similar a cuando escribes en Word, en cambio, en HTML ves el código que le explica al navegador con que formato mostrará ese contenido.

¿Quieres aprender y practicar HTML? Si tu respuesta es si, crear nuevas páginas o entradas es la mejor forma de aprender lo básico dentro de tu blog, ya que no va a pasar nada si haces algo mal. Por nada del mundo intentes modificar los archivos “padres” de tu tema si no eres experto. Cualquier cambio en estos archivos que permiten la correcta visualización de tu blog puede modificarlo e incluso no podrías visualizarlo correctamente:

Podemos aprender HTML en:

• 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

¡Llegó la hora de aprender! Veamos cuales son algunos de los elementos básicos de HTML. Vamos a practicar de manera segura creando una nueva entrada en tu blog (puede ser WordPress o cualquier otro que estés usando).

• NEGRITA

¿Te gustan las negritas? Para colocar el texto en negritas sólo debes agregar la etiqueta en <strong>

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

• CURSIVA

Si quieres poner el texto en cursiva, sólo debes poner la etiqueta <em>

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

• TÍTULOS Y SUBTITULOS

Para agregar un título a la publicación del blog solo es necesario usar la etiqueta <h1>

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

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

<h2>Hola soy el tamaño para títulos 2</h2>

<h3>Yo soy el estándar de titulos 3</h3>

<h4>Estándar de títulos 4</h4>

• PÁRRAFOS

¿Quieres mostrar tu texto en bloques? Sólo usa la etiqueta <p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent in ipsum at est dictum tempus. Quisque eros est, dignissim ut porta rhoncus, fermentum et magna. Vestibulum ante dui, euismod at dapibus in, tristique vitae urna.</p>

<p>El veloz murciélago hindú comía feliz cardillo y kiwi. La cigüeña tocaba el saxofón detrás del palenque de paja.</p>

• ENLACES

Los enlaces son textos “clickeables” dónde el usuario hace clic para ir a otra dirección web. Para añadirlos, usa la etiqueta <a> y para indicar cuál es la dirección web que quieres enlazar usa el atributo href= y entre comillas escribes la página. Ejemplo

<a href=”http://www.lapaginaweb.com”>Voy a redireccionar</a>

<a href=”http://www.saray-dellan.com.ve”>Visita saray-dellan.com.ve</a>

• LISTAS

¿Te gustan los datos ordenados? Necesitas 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 y sin orden.

• LISTA ORDENADA

 Utiliza la etiqueta <ol> y para definir cada elemento la etiqueta <li> y  quedaría así:

<ol>

<li> Muestra 1</li>

<li> Item 2</li>

<li> Clase 3</li>

</ol>

• LISTA SIN ORDEN

Se utiliza la etiqueta <ul> y para definir cada elemento usamos de nuevo la etiqueta <li> y quedaría así:

<ul>

<li> Clasificación 1</li>

<li> Item 2</li>

<li> Elemento 3</li>

</ul>

• IMÁGENES

Los post se ven más lindos cuando usamos imágenes, ¿Verdad? Si quieres colocar una imagen, necesitas subirla primero a internet y después copiar la dirección de la imagen.

Por ejemplo:

https://saraydellan.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 usael atributo src= y colocas la dirección entre comillas.

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

<img src=” https://saraydellan.com/imagen.png”>

 

¿Viste? HTML no es difícil, con mucha práctica y paciencia podrás dominarlo por completo en sus aspectos básicos. ¡Anímate!. Espero que este post te sirva como guía para aprender a cómo usar código HTML en tu blog… ¡No te olvides de compartir!