Ajuda:HTML en text wiki

De Viquipèdia
Dreceres ràpides: navegació, cerca


HTML permès[modifica | modifica el codi]

Estan permesos actualment els següents elements HTML:

Per a molts elements HTML hi ha disponible un codi wiki més convenient, vegeu Ajuda:Editar. D'altra banda, les etiquetes HTML permeten un id al que es pot fer referència en les pròpies css d'estil personalitzat, i permet que l'etiqueta s'utilitzi per enllaçar-hi.

Per exemple, l'element d'àncora <a> no està permès, així el codi

<a href="http://ca.wikipedia.org/">Portada</a>

es tractarà com a text wiki

&lt;a href="http://ca.wikipedia.org/"&gt;Portada&lt;/a&gt;

i per tant es mostrarà com

<a href="http://ca.wikipedia.org/">Portada</a>

que probablement no és el que pretenia l'editor. En comptes d'utilitzar l'element d'àncora (<a>) es recomana el codi wiki per a enllaços externs (tancat amb claudàtors amb l'URL separada del contingut per un espai en blanc):

[http://ca.wikipedia.org/ Portada]

que es mostra com:

Portada

El següent extracte de Sanitizer.php mostra addicionalment quins atributs estan permesos.

$htmlpairs = array( # Etiquetes que han d'estar tancades
 'b', 'del', 'i', 'ins', 'u', 'font', 'big', 'small', 'sub', 'sup', 'h1',
 'h2', 'h3', 'h4', 'h5', 'h6', 'cite', 'code', 'em', 's',
 'strike', 'strong', 'tt', 'var', 'div', 'center',
 'blockquote', 'ol', 'ul', 'dl', 'table', 'caption', 'pre',
 'ruby', 'rt' , 'rb' , 'rp', 'p', 'span' );
$htmlsingle = array(
 'br', 'hr', 'li', 'dt', 'dd' );
$htmlsingleonly = array( # Elements que no poden tenir etiquetes de tancament
 'br', 'hr' );
$htmlnest = array( # Etiquetes que es poden niar --??
 'table', 'tr', 'td', 'th', 'div', 'blockquote', 'ol', 'ul',
 'dl', 'font', 'big', 'small', 'sub', 'sup', 'span' );
$tabletags = array( # Només poden aparèixer dins una taula
 'td', 'th', 'tr' );

Etiquetes[modifica | modifica el codi]

<span> és un contenidor genèric de text.

<font> és una etiqueta similar que està desfasada (no s'hauria d'utilitzar) en favor de <span>.

Per example

una paraula <font color="red">vermella</font>.

produeix el mateix resultat que

una paraula <span style="color:red">vermella</span>.

Vegeu també meta:Template:Font size demo i meta:Help:Text color.

És inútil combinar l'etiqueta heretada <font> amb CSS; els navegadors amb llegat ignorarien la CSS, mentre que els navegadors moderns suporten <span> (vegeu més amunt).

Fixeu-vos que en la majoria dels casos, un pot utilitzar una etiqueta més descriptiva, per exemple <strong> per marcar una part important del text, o <em> per emfatitzar una part del text.

Això no tant sols crida l'atenció de l'usuari sobre el text, sinó que també pot alertar els que estan utilitzant navegadors no visuals o tenen deficiències visuals, etc., del fet que allò és un text emfatitzat.

Utilitzar <span> com a enllaç[modifica | modifica el codi]

La manera estàndard de proporcionar un nom d'àncora com a enllaç invisible (p.ex. <a name="Daixonses">) no funciona (ja que totes les etiquetes <a> es converteixen), i una alternativa suggerida pel W3C, <hN id="Foo"></hN>, produeix un enllaç "[modifica]".

Tanmateix, <span id="Daixonses"> produeix una marca on s'hi pot enllaçar. Fixeu-vos que no funciona pertot arreu; per exemple, en una taula ha de ser dins d'una cel·la per a que alguns navegadors hi saltin correctament.

<div>[modifica | modifica el codi]

<div> és un contenidor genèric de bloc de text. Regles:

  • <div> hauria d'estar seguit d'una nova línia
  • </div> hauria d'estar precedit d'una nova línia
  • </div> seguit de text en la mateixa línia, hauria d'evitar dues línies noves i text abans del <div> en la mateixa línia (dues línies noves només produeixen un espai)

Example:

"----
o
p<div>q</div>r
s<div>t
u
v
x</div>y
s<div>t
u
v
x</div>y
z
----

produeix:


o

p

q

r s

t

u v

x

y s

t

u v

x

y

z


Comentaris HTML[modifica | modifica el codi]

L'opció "Eliminar els comentaris" de la funció Expansió de plantilles selecció si els comentaris es treuen, no només en el resultat final sinó durant el procés d'expansió. Això afecta el resultat de les funcions parser: un comentari en l'expressió de #expr o en la condició de #ifexpr dóna un missatge d'error llevat que es maqui "Eliminar els comentaris", i els comentaris afecten #if i #ifeq.

Exemple:

Wikitext:


{{#expr:<!--p-->3}}

{{#ifeq:<!--p-->3|3|1|0}}

{{#if:<!--p-->|1|0}}

Resultat d'expansió normal i d'Expansió de plantilles amb "Eliminar els comentaris" marcat:


3

1

0


Resultat en substitució i d'Expansió de plantilles amb "Eliminar els comentaris" desmarcat:


Expression error: Unrecognised punctuation character ""

0

1


Per això normalment és millor evitar comentaris en aquests llocs, i posar el comentari abans o després de la funció parser.

En el cas de funcions parser niades, per evitar haver de posar els comentaris a fora de tot, una alternativa és {{void|comentari}}. En cas de substitució de la funció parser, "void" s'ha de substituir també, p. ex. en una plantilla que permet substitucions múltiples podem posar {{{{{subst1|}}}#expr:3*{{{1}}} {{{{{subst1|}}}void| multiplicar per 3 }}}}.

Atributs[modifica | modifica el codi]

La majoria d'etiquets poden tenir un atribut style. Per exemple

<div style="font-size:80%">
Això és text en <span style="color:red">vermell</span>.
</div>

produeix:

Això és text en vermell.

La majoria d'etiquetes poden tenir class i id. Es poden utilitzar conjuntament amb fulles d'estil per donar una classe descriptiva (o identificador únic) a un troç de text i per referir-s'hi en una fulla d'estil. Per exemple

<div class="infobox">Exemple infotaula</div>
Exemple infotaula

Produeix la taula flotant de la dreta ja que la classe infobox està definida en el Mediawiki:Common.css local.

Les classes i id també es poden utilitzar en el codi Javascript code, per exemple vegeu how {Link FA} works a enwiki.

Un altre exemple d'atribut és title, per exemple utilitzat a la plantilla title: fixeu-vos en el text emergent posant el cursor sobre "20.000 ft"

"una altura de 20.000 ft sobre el nivell de mar"


Etiquetes amb efecte especial[modifica | modifica el codi]

pre[modifica | modifica el codi]

Les etiquetes <pre> funcionen com a combinació de <nowiki> i la funció estàndard HTML estàndard <pre>: s'encaixa el contingut en un format i no es processa sinó que es mostra com a font de text wiki. Si voleu encaixar-lo i processar-lo, utilitzeu en el seu lloc un espai al començament. Per exemple,

<pre>Paraula en <b>negreta</b>.</pre>
  Paraula en <b>negreta</b>.

es mostrarà

Paraula en <b>negreta</b>.
Paraula en negreta.</nowiki>

Comentaris[modifica | modifica el codi]

El comentaris HTML en el text wiki (<!-- ... -->) no apareixeran en el codi HTML de la pàgina.

Encapçalaments[modifica | modifica el codi]

Els encapçalaments (<h1>...<h6>) es tractaran de forma similar als encapçalaments wiki:

encapçalament d'exemple

Fixeu-vos que apareix a la taula de continguts amb el seu corresponent enllaç. Hi ha, però, algunes diferències menors: editant aquesta secció no s'omplirà per defecte el resum de l'edició, i el navegador no saltarà al començament de la secció quan deseu la pàgina. Per tant, hauríeu d'utilitzar els equivalents en codi wiki.

Excepcions[modifica | modifica el codi]

En algunes pàgines de l'espai MediaWiki (típicament els missatges curts com les etiquetes dels botons) no funciona l'HTML, i per exemple <span id=abc> produeix l'HTML &lt;span id=abc&gt; mostrat pel navegador com <span id=abc>. En algunes altres s'interpreta com HTML pur (així qualsevol etiqueta es pot utilitzar, però el codi wiki no es transformarà a HTML).

Les CSS d'usuari i pàgines de JS (vegeu Ajuda:Estil personalitzat) s'interpreten igual que dins un bloc <pre>. Des de MW 1.11 això també va per CSS i JS del projecte; en versions anteriors s'ha d'afegir manualment /*<pre>*/ al començament i /*</pre>*/ al final d'aquestes pàgines per evitar processaments estranys.

Enllaços externs[modifica | modifica el codi]


[modifica] Ajuda específica de la Viquipèdia


Sempre que sigui possible, en lloc d'utilitzar el codi HTML és preferible utilitzar el codi wiki o si no l'equivalent CSS, per exemple en el format <span style="CSS;">. Les etiquetes HTML desfasades s'haurien d'evitar.

HTML Codi wiki Equivalent CSS Notes
Format de paràgrafs
<blockquote>…</blockquote>

citació de paràgrafs amb sagnat

<br> o millor <br /> línia en blanc
salt de línia
<center>…</center> text-align: center desfasada per <div>
<cite>…</cite> citació literal d'un text
(no confondre amb citació bibliogràfica)
<h1>…</h1>
<h6>…</h6>
=…=
======…======
Encapçalaments
<hr> ---- línia horitzontal
<p>…</p> crea un paràgraf
<!-- … -->
<!-- comentari ocult -->
Format de text
<b>…</b>
<strong>…</strong>
'''…''' font-weight: bold text en negreta
<i>…</i>
<em>…</em>
''…'' font-weight: italics text en cursiva
<big>…</big> font-size: larger text gran
<big> és desfasada
<small>…</small> font-size: smaller text petit
<del>…</del>
<s>…</s>
<strike>…</strike>
text-decoration: line-through text suprimit
text ratllat
(la majoria de navegadors ho mostren igual)
<strike> és desfasada
<ins>…</ins>
<u>…</u>
text-decoration: underline text afegit
text subratllat
(la majoria de navegadors ho mostren igual)
<sub>…</sub> vertical-align: sub;
font-size: smaller
text en subíndex i petit
<sup>…</sup> vertical-align: super;
font-size: smaller
text en superíndex i petit
<code>…</code>
<tt>…</tt>
font-family: monospace codi font amb espaiat uniforme
<tt> és desfasada
<font>…</font>
<font size="N">
<font color="red">
<font face="Courier">

font-size: Yunitat
color: red
font-family: Courier
desfasada per <span>
text de mida 1.3 em
text vermell
text en font Courier
Llistes
<dl>
<dt>…</dt>
<dd>…</dd>
</dl>
;:
llista de definicions
definició
<ol>
<li>…</li>
</ol>
#
#
list-style-type: decimal
  1. llista
  2. ordenada
<ul>
<li>…</li>
</ul>
*
*
list-style-type: square
  • llista
  • puntejada
Taules
<table>
<caption>…</caption>
<th>…</th>
<tr>…</tr>
<td>…</td>
</table>
{|
|+
!
|-
|
|}
taules
Vegeu
Ajuda:Taula