Las etiquetas HTML son la base de este lenguaje de programación ya casi “ancestral”, pero que sigue siendo el trasfondo de muchos otros más avanzados.
HTML significa HyperText Mark Language, pero no he venido hoy a dar una clase de programación, sino a que conozcas lo mínimo imprescindible sobre este lenguaje de programación para aprovecharlo dentro de tu blog WordPress.
NO TE ASUSTES por el inicio del post más técnico y general, sigue que al final tienes un ejercico práctico donde verás a lo que voy con todo esto 
Etiquetas HTML, lo que necesitas saber sobre ellas
Una etiqueta HTML es (para los más novatos en esto) aquello que vemos entre corchetes angulares en el código de nuestra web, por ejemplo: <H1> (Encabezado principal)
Casi todas las etiquetas deben “encerrar” el contenido al que afecta, aunque no son el 100% de los casos, como por ejemplo: <br /> (Salto de línea)
Estructura básica de un documento HTML
Lo vemos por encima, porque lo importante en este post son las utilidades concretas de algunas etiquetas HTML para tu WordPress, pero básicamente esto es:
<html> (Abrimos el documento)
<head> (Abrimos el head)
En la cabecera o “head” se inserta todo lo referente al title, styles vinculados, scripts, etc.
</head> (Cerramos el head)
<body> (Abrimos el body)
En el cuerpo del documento o “body”, es donde va el contenido general, el grueso de la página.
</body> (Cerramos el body)
</html> (Cerramos el documento)
Vale, esto es “el árbol” o estructura básica. Qué ocurre, que si vamos a la práctica nuestro WordPress está basado en lenguaje PHP, el cual aunque a su vez está basado y utiliza HTML, nos complica un poco las cosas.
Nuestro WordPress no son una serie de páginas HTML estáticas, sino que utilizan PHP precisamente para cargar de forma dinámica distintos contenidos dentro de ella, basándose en archivos PHP del tipo index.php, header.php, page.php, footer.php,… y muchos otros.
El funcionamiento de todo eso lo explicaré al detalle en el curso de WordPress.org que estoy preparando desde hace un tiempo, pero como decía hoy sólo quiero centrarme en el uso práctico de algunas etiquetas HTML en concreto.
Las etiquetas HTML más relevantes
<title>: para definir el titulo de una página. Importantisimo para el SEO.
<link> y <style>: ambas van dentro del <head>, y sirven para aplicar estilos CSS a nuestro documento. Con <link> vinculamos de forma externa un archivo.css, y con <style> podemos escribir directamente código CSS dentro del head.
<h1>, <h2>, <h3>….<h6>: encabezados, numerados del 1 al 6 por orden de RELEVANCIA. El uso de estos encabezados es determinante para el SEO, porque es la mejor forma que tienen Google de entender la estructura de nuestro contenido y poder saber qué es lo relevante.
Un pequeño tip: no se te ocurra, meter dos o más encabezados <h1>. Lo mejor, es poner sólo uno y que contenta tu keyword, y luego estructurar el contenido de forma coherente con <h2> y <h3>, incluyendo en ello la keyword y variantes, no siempre la misma exactamente.
<table>, <tr> y <td>: son las tablas, las filas y las celdas. Están un poco obsoletas aunque a veces me han sacado de un apuro.
<div>: es un elemento “contendedor” de otras cosas. Realmente es lo que más se usa. Sabiendo manejar un <div style=”loquenecesites”>contenido</div> puedes hacer casi todo. Podrás ver un ejemplo práctico al final del post.
<a>: para añadir enlaces. Dentro de ella tendremos dos atributos importantes, que son: href=”indica_la_URL_o_RUTA” y target=”self o _blank”, según quieras que el enlace se abra en la misma página o en una pestaña nueva.
<img> es la etiqueta con la que se insertan las imágenes. Este es uno de los pocos casos que no necesita etiqueta de cierre, sino que vale con: <img src=”rutadelaimagen” alt=”textoalternativo” />, sin poner </img>
<li>, <ol>, <ul>: son las etiquetas que controlan las listas ordenadas y desordenadas. Ejemplo:
- Estos circulos son de listas desordenadas, usando la etiqueta <ul>
- Este número sale porque utilizo una lista ordenada, con <ol>
- Cada elemento o item de una u otra lista, se controla medianta <li>
<b>: convierte el texto a negrita. Tambien os podéis encontrar con el antiguo <strong> que hace lo mismo.
<i>: lo mismo pero para aplicar cursiva al formato de un texto. Ejemplos: esto irá en <b>negrita</b> y este otro texto en <i>cursiva</i>
<p>: con esta etiqueta determinamos un texto de párrafo. Se le aplican estilos como a todas, el dato relevante de esta etiqueta sería explicar el hecho de que añade un salto de línea y otro más al cerrarla con </p>, como si diéramos dos veces al “intro”, para que me entiendas.
<br />: esta otra etiqueta sin embargo, hace un salto de línea simple. Es decir, lo que venga después de esto irá justo en la linea siguiente, pero sin dar otro espacio más. Mira la diferencia:
“Escribo un texto normal y la siguiente linea la escribo después del cierre de un </p>
Esta es la siguiente linea cerrando con esa etiqueta <p>.”
“Ahora escribo una linea pero hago un salto de linea simple con <br />
Esta es la siguiente linea despues de usar el <br />, ¿se nota diferencia del espacio de una y otra?”
Esta es la siguiente linea despues de usar el <br />, ¿se nota diferencia del espacio de una y otra?”
IMPORTANTE: todas estas etiquetas html puedes verlas al esribir un post en la pestaña de “TEXTO”, no es la de “VISUAL”. Si lo haces en visual, se escribe la etiqueta como un texto normal (tal y como estoy haciendo yo en este post), pero si quieres modificarlas debe ser en la pestaña texto, donde luego no aparecen en visual pero sí están cumpliendo su función.
Aplicación de CSS sobre dichas etiquetas
Bien, no será en este post sino en otro que haré pronto, donde te explique los atributos de CSS básico más importantes para aplicar a estas etiquetas html.
Pero quiero hacer un ejemplo práctico, para que veas el verdadero potencial que tiene conocer esto mínimamente y la razón por la cual he escrito este post.
Hace poco escribí sobre un plugin para insertar los famosos widgets de texto html pero con un editor. Esto está genial, porque si no sabes html en dichos widgets poco más que puedes escribir un texto plano y ya está.
Ahora bien, sabiendo un poco de html y css puedes hacer muchas cosas en cualquier parte de tu blog.
Vamos con el ejemplo práctico:
Imagina que quieres poner en tus posts, la típica “frase resaltada”, de esas que son más importantes y quieres que se vea más grande y entre comillas.
Bien, si no se nada de etiquetas html, será complicado, o como mucho puedo optar por poner dicha frase con un <h3>, por ejemplo. Pero no estaríamos haciendo lo correcto, e igualmente solo tendríamos el texto un poco más grande.
¿Solución? Se me ocurre utilizar un <div> (recuerda, un contenedor), al cual mediante CSS básico le voy a aplicar: un color de fondo azul oscuro, un borde, unas esquinas redondeadas, y respecto al texto le voy a decir que sea 1,4 veces más grande que el texto de párrafo normal, centrado y que vaya todo en negrita y en blanco. Vamós allá:
¿Etiqueta THML?, Corrige el titulo y recuerda colocar la información de donde lo tomaste.
ResponderEliminar