Viquipèdia

Ajuda:HTML en text wiki


HTML permès modifica

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

<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

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

<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

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

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

pre modifica

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

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

Encapçalaments modifica

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

encapçalament d'exemple modifica

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

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] 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 (vegeu Plantilla:Mono)
<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
Obtingut de «https://ca.wikipedia.org/w/index.php?title=Ajuda:HTML_en_text_wiki&oldid=25431800»