A més de l’editor visual, disposem d’un editor de text amb menys opcions, però que ens permet escriure les entrades directament en llenguatge HTML. Aquest editor serà l’utilitzat per persones amb coneixement d’aquest llenguatge.
El llenguatge HTML és un llenguatge de marques que descriu el contingut dels documents del web perquè sigui interpretat pel navegador. Aquest llenguatge utilitza etiquetes que marquen els diversos elements d’un document web. Així el text d’un paràgraf serà marcat amb l’etiqueta <p> al principi i </p> al final.
<p>Aquest seria el paràgraf marcat per les
etiquetes d'obertura i tancament.</p>
WordPress ens permet utilitzar les etiquetes següents:
address, a, abbr, acronym, area, article, aside, b, big, blockquote, br, caption, cite, class, code, col, del, details, dd, div, dl, dt, em, figure, figcaption, footer, font, h1, h2, h3, h4, h5, h6, header, hgroup, hr, i, img, ins, kbd, li, map, ol, p, pre, q, s, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, tr, tt, u, ul, var
Per saber quin és el valor d’aquestes etiquetes recomanem la consulta d’aquest recurs:
http://dochub.io/#html
En accedir a l’editor de text, la barra d’eines ens ajudarà a inserir algunes de les etiquetes més habituals del llenguatge HTML.
b
: insereix l’etiqueta <strong> que enfasitza el text i que el navegador representa visualment en negreta. Exemple:
<strong>Text emfasitzat. Visualment
representat en negreta</strong>.
El resultat visual del codi anterior seria:
Text emfasitzat. Visualment representat en negreta
.
i
: insereix l’etiqueta <em> que enfasitza el text i que el navegador representa visualment en cursiva. Exemple:
<em>Text emfasitzat. Visualment
representat en cursiva</em>.
El resultat visual del codi anterior seria:
Text emfasitzat. Visualment representat en cursiva
.
link
: insereix l’enllaç al recurs web indicat amb l’etiqueta <a> i el seu atribut “href”. Exemple:
<a href="canaldebits.wordpress.com">Canal de Bits</a>
b-quote
: insereix l’etiqueta <blockquote> que marca cites textuals d’un autor. Exemple:
<p>Salvador Espriu va dir:</p>
<blockquote>I com m’agradaria
d’allunyar-me’n, nord enllà</blockquote>
El resultat visual del codi anterior, que variarà en funció del tema en què es basi el nostre blog, seria:
Salvador Espriu va dir:
I com m’agradaria d’allunyar-me’n, nord enllà
del
: insereix l’etiqueta <del>, text ratllat, amb l’atribut “datetime” que contindrà informació sobre el dia i l’hora en què s’ha produït la rectificació del text. Exemple:
<p>El dia 14 de juny de 2012
<del datetime="2013-05-20T10:33:31+00:00">, és
a dir avui, </del> tindrà lloc la
inauguració del nou local de l'associació.</p>
El resultat visual serà el següent: El dia 14 de juny de 2012 ,
és a dir avui
, tindrà lloc la inauguració del nou local de l’associació.
ins
:insereix l’etiqueta <ins>, text afegit, amb l’atribut “datetime” que contindrà informació sobre el dia i l’hora en què s’ha produït la seva introducció. Exemple:
<p>El dia 14 de juny de 2012
<ins datetime="2013-05-20T10:33:31+00:00">, dijous,</ins>
tindrà lloc la inauguració del nou local
de l'associació.</p>
img
: insereix l’etiqueta <img> que indicarà al navegador que ha de presentar en la finestra la imatge referenciada en l’atribut “src”. Dues finestres emergents ens demanaran la URL de la imatge (atribut “src”) i el text alternatiu (atribut “alt”). Exemple:
<img src="http://canaldebits.files.fotoescola"
alt="Fotografia del patí d'una escola on es
veu tres nenes jugant a la pilota" />
ul / ol / li
: aquests tres botons ens permeten introduir llistes. El llenguatge HTML té dos tipus bàsics de llistes: les llistes no ordenades (amb pics) i les llistes ordenades (amb nombres). Per introduir una llista no ordenada, utilitzem l’etiqueta <ul>, les llistes ordenades es marquen amb <ol>, i cada element de la llista, indistintament en les llistes no ordenades i en les ordenades es marca amb l’etiqueta <li>. Exemple:
<ul>
<li>primer element de la llista,</li>
<li>segon element de la llista.</li>
</ul>
El resultat visual del codi anterior seria:
-
primer element de la llista,
-
segon element de la llista.
<ol>
<li>primer element de la llista,</li>
<li>segon element de la llista.</li>
</ol>
El resultat visual del codi anterior seria:
-
primer element de la llista,
-
segon element de la llista.
code
: amb aquest botó podrem representar un fragment de codi informàtic. Per defecte, és mostrat pel navegador amb un tipus de font monoespaiada. Exemple:
<code>var a = new String( "0123")</code>
El resultat visual del codi anterior seria:
var a = new String( "0123")
more
: si l’entrada és molt llarga, afegirem aquest comentari <!–more –> que farà que el text quedi tallat en la posició on l’haurem inserit quan l’entrada es mostri a la pàgina d’inici. Els lectors del blog trobaran un enllaç que els permetrà accedir a l’entrada completa. El text per defecte serà el de l’idioma del nostre blog; així en català el text que es llegeix en aquesta posició és “Llegeix més…”. Aquest text pot personalitzar-se afegint al comentari el text que ens interessi. Per exemple
<!--more Llegiu-ne l'entrada completa... -->
El text que veurem serà “Llegiu-ne l’entrada completa…”.
Si enganxem codi des d’una font externa (Youtube, Instagram, Twitter…) o quan ens calgui utilitzar codi abreujat, en anglès,
shortcode
, també utilitzarem l’editor de text en comptes de l’editor visual.
A l’entrada “
Què són
Shortcodes
?” trobareu més informació sobre aquest tipus especial de codi que WordPress.com permet utilitzar en les nostres entrades.