Wikipedija

Wikipedija:HTML5

↱
  • WP:HTML5

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ć suradnicima 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. (engl.)

{| bgcolor="gray"

| bgcolor="gray"

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

| style="background-color:gray;"

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

<div style="text-align:center;">...</div>

<div class="centered">...</div>

<div style="margin:auto;">...</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 style="text-decoration:line-through;">...</span>

<font size="3">...</font> <span style="font-size:125%;">...</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 suradniku je da odluči koja vrijednost (zaokružena na 10%) je prihvatljiva.

<font color="red">...</font> <span style="color:red;">...</span>

<span class="error">...</span>

<font face="Courier">...</font> <span style="font-family:Courier, monospace;">...</span>

<span style="font:125% Courier, monospace;">...</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>Content</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><gallery>...</gallery></center> <gallery class="center">...</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 (engl.), 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>[[Datoteka:Slika.jpg]]</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 color="red">Sadržaj</font> <span style="color: red;">Sadržaj</span> ili {{Boja-|kod boje pozadine|tekst|kod boje teksta}} insource: "font color" insource:/\<font color\=.*\<\/font\>/
Suvišno Zamjena Pretraga
<font face="Times, serif">Sadržaj</font> <span style="font-family: Times, serif;">sadržaj</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 size="3">Sadržaj</font> <span style="font-size: medium;">Sadržaj</span> insource: "font size" insource:/\<font size\=.*\<\/font\>/
Suvišno Zamjena
<font size="3" color="red" face="times, serif">Sadržaj</font> <span style="font-size: medium; color: red; font-family: Times, serif;">Sadržaj</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 summary="foo">...</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 <br />
Suvišno Zamjena Pretraga
<div style="clear: both;"></div> ILI {{clear}} insource:"br clear" insource:/\<br clear/
<div style="clear: left;"></div>
<div style="clear: right;"></div>
  • align unutar <div>
Suvišno Zamjena Pretraga
<div align=center>...</div> <div style="text-align:center;">...</div> insource:"div align" insource:/\<div align/
<div align=left>...</div> <div style="text-align:left;">...</div>
<div align=right>...</div> <div style="text-align:right;">...</div>
<div align=justify>...</div> <div style="text-align:justify;">...</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. 10. ožujka 2018. CSS Fonts Module Level 3. Pristupljeno 23. lipnja 2018.
  6. ↑ Table. W3C
  7. ↑ Table cell. W3C
  8. ↑ Table header cell. W3C
Dobavljeno iz "https://hr.wikipedia.org/w/index.php?title=Wikipedija:HTML5&oldid=5696356"