Llenguatge HTML
LLENGUATGE HTML
per què ens serveix l'HTML en el cas concret de wordpress.com? la interfície visual de wordpress.com no ens mostra realment on acaba i comença cada etiqueta; això genera problemes quan seleccionant el text, es posa en negreta només una part, o un enllaç no acaba de funcionar, o un tros de text sembla resistir-se a alinear-se com volem. Això es deu a que el que veiem en pantalla per defecte -a l'escriure una entrada- és una representació del codi HTML. Quan seleccionem un tros de text i fem clic a "negreta", en realitat estem afegint una etiqueta <strong>el nostre text</strong> en el codi HTML que hi ha "al darrera del nostre text".
La sintaxis és la següent:
<indentificador d'etiqueta> el nostre text </identificador d'etiqueta>
Les etiquetes més utilitzades en entrades de blogs són:
- <strong>el nostre text</strong> per a inserir text en negreta.
- <em>el nostre text</em> per a inserir text en cursiva.
- <u>el nostre text</u> per a inserir text subratllat.
- <a href="http://www.google.com">text de l'enllaç</a> per a inserir enllaços.
- <img src="http://www.exemple.com/fotografia.jpg" /> per a inserir imatges (fixem-nos que l'estructura és diferent, ja que no afegim text entre les etiquetes, així que "obrim" i "tanquem" l'etiqueta sense text.
- <p style="text-align:right">el nostre text</p> per a centrar el text a la dreta.
- <h1>títol de la secció</h1> per inserir una capçalera (de gran a petit, h1 a h6).
Per exemple, el codi:
Hola, <em>món!</em> Avui fa un <a href="https://ca.wikipedia.org/wiki/Dia">dia</a> molt <strong>bonic</strong>.
Produïria:
Hola, món! Avui fa un dia molt bonic.
Algunes etiquetes són ben simples (negreta, cursiva i subratllat) mentre que altres accepten atributs o paràmetres, que ajuden a configurar l'element.
Exemples
1) Exemple 1: per a escriure aquest curs, faig servir una interfície amb opcions limitades, que només m'ofereixen la possibilitat d'alinear el text a l'esquerra, centre o dreta. Com que m'agrada el text justificat, un cop he acabat de redactar l'entrada accedeixo al codi HTML i canvio:
<p style="text-align: left">.......</p>
Per:
<p style="text-align: justify">.....</p>
2) Exemple 2: si enlloc de:
<a href="http://ca.wikipedia.org">Viquipèdia</a>
escrivim
<a href="http://ca.wikipedia.org" target="_blank">Viquipèdia</a>
aconseguim que l'enllaç s'obri en una nova pestanya del navegador, enlloc de la pestanya actual. El paràmetre "target" decideix com s'obre l'enllaç, i el valor "_blank" és un dels varis valors que podem donar al paràmetre.
3) Exemple 3: Afegir enllaç anclat a un punt de la mateixa pàgina
Si utilitzem l'opció de codi (la pestanya «HTML»), només hem de fer dues coses:
- Afegir el link així: <a href="#mi-ancla"> Paraules enllaçades </a> (on "mi-ancla pot ser qualsevol text que vulguis per identificar l'enllaç)
- En el punt de destinació, afegir l'àncora, així: <a name="mi-ancla"> </a> (no cal que hi hagi res dins de les etiquetes, pot estar buit)
En aquest curs, no entrarem en més detall en l'HTML. És important saber que existeix, saber-lo identificar i conèixer les etiquetes més bàsiques. Si més endavant volem crear pàgines webs més complexes, ens serà molt útil, ja que sovint les webs inclouen com a mínim una estructura bàsica en HTML, dins de la qual s'afegeixen funcions redactades en altres llenguatges (javascript, PHP, CSS, etc).
Opcionalment, podeu consultar aquest enllaç a Viquillibres per aprendre a inserir taules i llistes mitjançant HTML, i d'altres funcions més avançades