Wikipedia

Wikipedia:HTML5

Prečica

Razvoj HTML standarda je toliko uznapredovao da je inačica 5 ugrađena u MediaWiki softver od rujna 2012. godine.

Ova stranica služi kao pomoć korisnicima pri prilagodbi članaka i drugih stranica na standard HTML5. Uređivanja su različite težine, od nekoliko manjih popravaka koje svatko može ručno napraviti, do nekoliko tisuća za koje je najbolje upotrijebiti alat.

Raspon

uredi

Implementacija novih HTML 5 atributa unutar MediaWiki softvera. To uključuje:

Atribute za formatiranje teksta
Suvišni atributi[1][2] Zamjenski atributi 
{| align="center"
|- align="center"
| align="center" | …

{| class="center"           <!--  jednako kao text-align: center,
                                       i margin: auto na unutarnjim elementima -->
{| class="centered"               <!-- odgovara margin: auto -->
{| style="margin:auto;"
|- style="text-align:center;"
| class="center"

Napomena: novi kod nije ekvivalentan starome. Stari kod se koristio za centriranje svega, dok novi CSS može centrirati ili jednolinijske elemente, ili blokne elemente, ali ne oboje. U nekim slučajevima trebat će raditi dodatne promjene CSS koda kako bi se dobio izgled jednak prijašnjem.

align="right" {| class="float-right"

style="text-align:right;"

Pozicioniranje elemenata na stranici može se ostvariti korištenjem position: , float: ili display: inline-block;, a poravnanja sadržaja korištenjemtext-align: .

valign="top" style="vertical-align:top;"

valign je zamjenjiv sa vertical-align: jedino unutar jedne ćelije ili retka zablice, ali ne može se primijeniti na cijelu tablicu.

<tt>...</tt> <code>...</code>

<kbd>...</kbd>

<samp>...</samp>

<var>...</var>

{{mono|...}} ili <span style="font-family:monospace,monospace;">

Ovisno o semantici, <code> se koristi za dijelove računalnog koda, <kbd> za korisnički unos (npr. tipkovničke prečace), <samp> za računalni ispis, a <var> za računalne varijable.[3]

Napomena: font-family:monospace,monospace je ispravno, i sprječava neočekivano mali font u preglednicima baziranim na Gecko i WebKit kodu (poput Safarija, Firefoxa, SeaMonkeya, iOS preglednika, i ostalih). Za detalje vidi ovdje. (en)

{| bgcolor="gray"

| bgcolor="gray"

{| style="background-color:gray;"

| style="background-color:gray;"

Suvišno od HTML4[1][4] Zamjenski atributi
<center>...</center> <div>...</div>

<div>...</div>

<div>...</div>

<div>...</div>

Napomena: novi kod nije ekvivalentan starome. Stari kod se koristio za centriranje svega, dok novi CSS može centrirati ili jednolinijske elemente, ili blokne elemente, ali ne oboje. U nekim slučajevima trebat će raditi dodatne promjene CSS koda kako bi se dobio izgled jednak prijašnjem.

<strike>...</strike> <s>...</s>

<del>...</del>

<span>...</span>

<font>...</font> <span>...</span>

<small>...</small>

Postotci ovdje imaju smisla. Jednostavna pretvorba nije moguća jer izgled ovisi o samom sadržaju i djelomično o pregledniku koji se koristi. Na korisniku je da odluči koja vrijednost (zaokružena na 10%) je prihvatljiva.

<font>...</font> <span>...</span>

<span>...</span>

<font>...</font> <span>...</span>

<span>...</span>

Određivanje fonta bi uvijek trebalo završiti generičkim fontom, često serif, sans-serif, ili monospace, i rijetko cursive ili fantasy, u slučaju da preglednik ne podržava navedeni font. Generalno bi ovakvo nefleksibilno određivanje fontova trebalo što manje koristiti, ili zamijeniti odgovarajućim semantičkim elementom, poput <code> (vidi niže).

  • Sljedeći su atributi važni za wiki-tablice suvišni u HTML5 standardu: bgcolor, border, bordercolor, cellpadding, cellspacing. Zamijeniti CSS-om po potrebi.
  • Sljedeći su elementi proglašeni suvišnima u HTML4 standardu, ali su vraćeni u HTML 5: u i s[4]

Suvišni elementi i atributi

uredi

center

uredi

Tekst

uredi

U većini tekstova, <center>...</center> se može zamijeniti sa {{centar}}.

Suvišno Zamjena Pretraga
<center>...</center> {{centar|Sadržaj}} insource:center insource:/\<center/

Predlošci

uredi

Za centriranje predložaka molimo provjerite dokumentaciju jer većina ima parametar za stil ili poravnanje. Ako predložak nema takav parametar, razmislite o dodavanju istoga.


Wikisintaksa

uredi

Neki elementi wikisintakse mogu koristiti CSS stilove:

Suvišno Zamjena Pretraga
<center>...</center> <gallery>...</gallery> insource:"center gallery" insource:/\<center\>.?\<gallery/
Uz ove tagove dozvoljeno je koristiti class="center"
  • <categorytree>...</categorytree>
  • <gallery>...</gallery>
  • <poem>...</poem> (centers all lines)
  • <pre>...</pre>
  • <syntaxhighlight>...</syntaxhighlight>
  • <source>...</source>
  • insource:"center categorytree" insource:/\<center\>\<categorytree/
  • insource:"center gallery" insource:/\<center\>\<gallery/
  • insource:"center poem" insource:/\<center\>\<poem/
  • insource:"center pre" insource:/\<center\>\<pre/
  • insource:"center syntaxhighlight" insource:/\<center\>\<syntaxhighlight/
  • insource:"center source" insource:/\<center\>\<source/
Ovi tagovi ne prihvačaju CSS; koristite {{centar}}
  • <hiero>...</hiero>
  • <math>...</math>
  • <score>...</score>
  • <timeline>...</timeline>
Ovi tagovi koriste neki drugi način
  • <imagemap>...</imagemap> koristi parametar center; proučite dokumentaciju

insource:"center imagemap" insource:/\<center\>\<imagemap/

Ovi tagovi su zadano u sredini
  • <inputbox>...</inputbox>

insource:"center inputbox" insource:/\<center\>\<inputbox/

Ovi tagovi ne prihvaćaju CSS i ne treba ih poravnavati
  • <charinsert>...</charinsert>
  • <indicator>...</indicator>
  • <nowiki>...</nowiki>
  • <ref>...</ref>
  • <references>...</references>
  • <section>...</section>
  • <templatedata>...</templatedata>

Tablice

uredi

Kako biste centrirali tablice (en), koristite sljedeću sintaksu:

Suvišno Zamjena Pretraga 
<center>
{|
⋮
|}
</center>

<div align="center">
{|
⋮
|}
</div>
 {| style="margin: 1em auto;" insource:center insource:/\<center\>.\{\|.*\|\}.?\<\/center\>/ prefix::

insource:div insource:"align center" insource:/align=\"?center\"?\>.?\{\|.*\|\}.?\<\/div/ prefix::

Kako biste centrirali ćeliju tablice:

Suvišno Zamjena Pretraga
| <center>Sadržaj</center> |style="text-align: center;" | Sadržaj insource:center insource:/[^{]\| *"<center>"[^|]*\<\/center\>/ -insource:/"[["[Ff]ile:[^\]]*\<center\>/

Ćelije zaglavlja su automatski centrirane.

Datoteke

uredi
Suvišno Zamjena Pretraga
<center>...</center> [[Datoteka:Slika.jpg|center]] -

font

uredi

Tag <font> ima tri atributa s jednakim CSS svojstvima:

Font atribut CSS ekvivalent
color color
face font-family
size font-size
Suvišno Zamjena Pretraga
<font>...</font> <span>...</span> ili {{Boja-|kod boje pozadine|tekst|kod boje teksta}} insource: "font color" insource:/\<font color\=.*\<\/font\>/
Suvišno Zamjena Pretraga
<font>...</font> <span>...</span> insource: "font face" insource:/\<font face\=.*\<\/font\>/

Primijetite da u HTML-u vrijednost atributa size ne odgovara nijednoj CSS vrijednosti; jedino se prihvaćaju vrijednosti od 1 do 7.[5]

Suvišno Zamjena Pretraga
<font>...</font> <span>...</span> insource: "font size" insource:/\<font size\=.*\<\/font\>/
Suvišno Zamjena
<font>...</font> <span>...</span>

strike

uredi

Tag <strike>...</strike> služi za križanje teksta. Pretraga: insource:strike insource:/\<strike/

Umjesto njega koristite:

  • Koristite <s>...</s> za tekst koji više nije točan, ispravan ili relevantan.
  • Koristite <del>...</del> za tekst koji je izbrisan ili je označen za brisanje.

tt

uredi

<tt>...</tt> formatira tekst u fontu fiksne širine. Pretraga: insource:tt insource:/\<tt/

  • Koristite <code> za programski kod.
  • Koristite <kbd> za računalni ili tipkovnički unos
  • Koristite <samp> za računalni ispis programa ili sustava
  • Koristite <var> za imena varijabli (u računalnom kodu, matematici, ili sintaktičkim varijablama unutar običnog teksta).
  • Koristite {{mono|Sadržaj}} za tekst u fontu fiksne širine bez semantičkog značenja opisanog iznad.


Tablični atributi

uredi

Suvišni tablični atributi.[6]

Suvišni atribut CSS stil ćelije CSS stil tablice Pretraga
  • align="left"
  • align="right"
  • align="center"
  • text-align: left
  • text-align: right;
  • text-align: center;
  • margin-left: auto
  • margin-right: auto;
  • margin: 1em auto;
 insource:align insource:/align=/
bgcolor="#ddd" background-color: #ddd; background-color: #ddd; insource:bgcolor insource:/bgcolor=/
border="2" border-width: 2px; border-width: 2px; insource:border insource:/border=/
cellpadding="2" padding: 2px; insource:cellpadding insource:/cellpadding=/
cellspacing="2" border-spacing: 2px; insource:cellspacing insource:/cellspacing=/
cellpadding="0" cellspacing="0" padding: 0; border-collapse: collapse;
  • valign="top"
  • valign="middle"
  • valign="bottom"
  • vertical-align: top;
  • vertical-align: middle;
  • vertical-align: bottom;
 insource:valign insource:/valign=/
width="25%" width: 25%; width: 25%; insource:width insource:/width=/
  • {| summary="foo"
  • <table>...</table>
 Vidi phab:T43917 insource:summary insource:/\{\| summary=/

Suvišni, dozvoljeni ali rijetko korišteni tablični atributi:

  • frame: Koristite CSS za bordere. Pretraga: insource:frame insource:/frame=/
  • rules: Koristite CSS za bordere. Pretraga: insource:rules insource:/rules=/
  • axis: Koristite scope u zaglavlju tablice. Pretraga: insource:axis insource:/axis=/
  • align na <caption>. Pretraga: insource:"caption align" insource:/\<caption align/
  • height: Koristite height ili line-height. Pretraga: insource:height insource:/height=/

Nastavno, ovi su atributi suvišni u ćelijama tablice.[7][8]

  • abbr: Dodatno pojašnjenje sadržaja ćelije
  • scope u ćeliji tablice: scope je ispravno koristiti samo u zaglavlju tablice

Postoje instance gdje se tablica koristi za poravnanje predloška. Takvom predlošku treba dodati parametar za poravnanje.

Neispravno Ispravno 
{|align=right
|{{navbar|Foo}}
|}
 {{navbar|Foo|style=float:right;}}

Ostali suvišni atributi

uredi
  • clear unutar
Suvišno Zamjena Pretraga
<br /> <div>...</div> ILI {{clear}} insource:"br clear" insource:/\<br clear/
<br /> <div>...</div>
<br /> <div>...</div>
  • align unutar <div>
Suvišno Zamjena Pretraga
<div>...</div> <div>...</div> insource:"div align" insource:/\<div align/
<div>...</div> <div>...</div>
<div>...</div> <div>...</div>
<div>...</div> <div>...</div>

Suvišni, dozvoljeni ali rijetko korišteni atributi:

  • width unutar <hr>...</hr> Pretraga: insource:"hr width" insource:/\<hr width/
  • align unutar <h1>...</h1> - <h6>...</h6>
  • type unutar <li>...</li> Pretraga: insource:"li type" insource:/\<li type/
  • align unutar <p>...</p> Pretraga: insource:"p align" insource:/\<p align/
  • width unutar <pre>...</pre> Pretraga: insource:/\<pre width/
  • type unutar <ul>...</ul> Pretraga: insource:"ul type" insource:/\<ul type/

Izvori

uredi
  1. ^ a b "15.2 Non-conforming features". HTML Living Standard.
  2. ^ http://www.w3.org/TR/html5-diff/#obsolete-elements
  3. ^ SELFHTML – List of items for markup
  4. ^ a b SELFHTML – HTML/deprecated
  5. ^ W3C (2018-03-10). "CSS Fonts Module Level 3". Pristupljeno 2018-06-23. CS1 održavanje: nepreporučeni parametar (link)
  6. ^ "Table". W3C.
  7. ^ "Table cell". W3C.
  8. ^ "Table header cell". W3C.
Preuzeto iz "https://bs.wikipedia.org/w/index.php?title=Wikipedia:HTML5&oldid=3389212"