Prijeđi na sadržaj

Wikipedija:HTML5

Izvor: Wikipedija
↱
  • 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 kôd]

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 kôd]

center

[uredi kôd]

Tekst

[uredi kôd]

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 kôd]

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 kôd]

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 kôd]

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 kôd]
Suvišno Zamjena Pretraga
<center>[[Datoteka:Slika.jpg]]</center> [[Datoteka:Slika.jpg|center]] -

font

[uredi kôd]

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 kôd]

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 kôd]

<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 kôd]

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 kôd]
  • 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 kôd]
  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"