x

Einloggen

Hast du noch keinen Account? Jetzt registrieren!

Падрыхтоўка да HTML5 з семантычнымі назвы класаў

Original on jontangerine.com
Пераклад на беларускую мову Patricia Clausnitzer


HTML 5 DOCTYPE

НЕКАТОРЫЯ час назад я спытаў у інтэрв'ю ці я аддаваў перавагу HTML і CSS. Гэта было трохі падобна просяць, калі я аддаю перавагу ручкі ці алоўкі. Я зрабіў інстыктыўнае выбар. Я абраў HTML. Гэта друкарні дадзеных; перагіну ў нашы галасы; сеткі сэнс, на якіх уяўленне можа квітнець. Я лічу, гэта выдатна, калі зрабілі добра, і таму глядзяць HTML 5 разгарнуць новыя і вытанчаныя элементы займальная для мяне.

Гэтыя кароткія ўводзіны ў новыя структурныя элементы у HTML 5 Працоўны праект, і як выкарыстоўваць семантычныя імёны класаў у HTML ці XHTML 4,01 1,0 разметкі, якія адпавядаюць імёны тых структурных элементаў. Паступаючы такім чынам, вы атрымаеце значную перавагу ў разуменні таго, як выкарыстоўваць новыя элементы, а таксама нейкім чынам да выкарыстання стары добры семантычны HTML, калі вы гэтага не зрабілі.

Часткі:

  1. Уводзіны
  2. header
  3. nav
  4. section
  5. article
  6. figure
  7. dialog
  8. aside
  9. footer
  10. Клас Некалькі імёнаў
  11. Канец Нататкі
  12. Спасылкі


i. Уводзіны



HTML 5 будзе першая буйная змена ў нашай лінгва-франка з XHTML 1.0 у 2000 году, некаторыя могуць сказаць, HTML 4,01 у 1999 году. Напэўна, вы ўжо бачылі HTML 5 Працоўны праект на 22-м студзеня гэтага года. W3C HTML Working Group і WHATWG былі прышчэпкі ад нашага імя, імкнучыся задаволіць усё ў адкрыты працэс. Не лёгкая задача. Часам, сярод праблем і пытанняў, лёгка забыцца, што я вязу кароткае другім паміж глоткамі кава адзначыць напружаную працу. Дзякуй, дзеці.

Давайце ведаць пра гэтых новых структурных элементаў трохі лепш. Калі вы не жадаеце ісці прама да каня рот, перш чым працягнуць Я рэкамендую зручнае крэсла, і чытанні HTML 5 адрозненняў ад HTML 4, пад рэдакцыяй Ганны ван Кестерен. W3C дакументаў, падобна, становіцца лягчэй чытаць, і гэта не выключэнне. Калі вы які тырчыць у мяне нейкі час, давайце да яго:


II. элемент <header>



header элемента для старонкі ці section рубрыкі. Не варта блытаць з традыцыйным топавы, што часта мае месца толькі лагатып маркі, ён павінен таксама ўтрымоўваць адзін з <h1> - <h6> у іерархічным рангу. Яна таксама можа ўтрымоўваць метададзеныя для гэтай старонкі ці часці старонкі, як "Апошняе абнаўленне", нумар версіі, ці запіс у блогу інфармацыю, як даты апублікавання, аўтар і г.д.

Просты прыклад для старонкі з дапамогай семантычных імя класа, што адпавядае HTML 5 header можа быць такім:


<div class="header">
<h1>Page Title</h1>
</div>


Вы можаце ўключаць лагатыпа і іншай інфармацыі, мета ўсярэдзіне пласта. Наступны прыклад для блога артыкулаў уключае аўтара і даты апублікавання інфармацыі (а таксама ў якасці прыкладу высылаецца на section і article элементаў семантычнай імёны клас):


<div class="section">
<div class="article">
<div class="header">
<h1>Page Title</h1>
<p>By <a href="*">Author</a> on [date]</p>
</div>
[Article content…]
</div>
<div class="article">
[Repeat as required…]
</div>
</div>


III. <nav> элемент



nav элемент павінен утрымоўваць набор навігацыйных спасылак, або на іншыя старонкі ці ідэнтыфікатары фрагмента на бягучай старонцы. Спасылкі на яго семантычныя імёны класаў просты:


<div class="nav">
<ul>
<li><a href="*">Menu item 1</a></li>
<li><a href="*">Menu item 2</a></li>
[Repeat as required…]
</ul>
</div>


IV. <section> элемент



section элемент вызначае частку старонкі ці асобныя часткі ўтрымання. Яна звычайна маюць header і, магчыма, footer . Такім чынам, мы маглі б уяўляць яго з дапамогай семантычных імёнаў класаў:


<div class="section">
<div class="header">
<h2>Section Title</h2>
</div>
[Section content…]
</div>


Я таксама выкарыстоўваю <div class="section">, каб вызначыць групу пластоў, якія маюць дачыненне (напрыклад, навін і падзей). У такіх, напрыклад, тых, падпадзелы б быць укладзенымі, кожны са сваім <h1> - <h6> у рангу для падтрымання іерархіі. Напрыклад:


<div class="section">
<div class="header">
<h2>News and Events</h2>
<p>The latest announcements and upcoming conferences</p>
</div>
<div class="section">
<h3>News</h3>
[Section content…]
</div>
<div class="section">
<h3>Events</h3>
[Section content…]
</div>
</div>


Each section could also have a layer with a semantic class name of header if the content made it necessary.



V. <article> элемент



Вось як HTML 5 працоўны праект тлумачыць article элемента:

"article элемент уяўляе частку старонкі, які складаецца са складу, які фармуе незалежную частку дакумента, старонкі ці сайта. Гэта можа быць пасце форума, часопіса ці газетны артыкул, запіс вэб-часопіс, карыстацкія каментары, ці любыя іншыя незалежныя элементы ўтрымання".

Некалькі article элементы могуць быць укладзенымі. Мы глядзелі на прыкладзе серыі блогу выкарыстаннем семантычнага класа імёнаў у header распранула. Гэта прыклад выкарыстання семантычнага класа імёнаў ва ўнікальнай article старонцы header і footer :


<body>
<div class="article">
<div class="header">
<h1>Title</h1>
</div>
[Article content…]
<div class="footer">
[Footer content…]
</div>
</div>
</body>


VI. <figure> элемент



figure элемент утрымоўвае ўбудаваныя сродкі, такія як <img> і новыя элементы <audio> і <video> . Ён таксама ўтрымоўвае неабавязковы <legend> элемент выконвае функцыі подпісу. Наша версія семантычнага імя класа можа быць вось так:


<div class="figure">
<img src="*" alt="*">
<p class="legend">[…]</p>
</div>


VII. <dialog> элемент



dialog элемент замяняе <dl> утрымоўваць converations як стэнаграм. Выкарыстоўваючы яго ў якасці семантычнай імя класа просты:


<dl class="dialog">
<dt>Speaker 1</dt>
<dd>So I said to him, I said…</dd>
<dt>Speaker 2</dt>
<dd>You never. You did? Oh my…</dd>
</dl>


VIII. <aside> элемент



Па словах працоўнага праекта:

"У бок элемент уяўляе частку старонкі, які складаецца з кантэнту, ускоснае стаўленне да ўтрымання вакол бок элемента, і якія могуць быць разгледжаны асобна ад утрымання. Такія ўчасткі часта прадстаўлены ў выглядзе бакавой панэлі ў друкаванай друкарні".

Я выкарыстоўваю "ў бок", як імя класа для бакавых панэляў са змяшаным утрыманнем, але маё чытанне праекта таксама паказвае, што гэта можа быць таксама прыдатныя для выцягнуць двукоссі і ўсё, што часткова злучана з асноўным утрыманнем, але не пра яго. Гл. часткі, якія тычацца ins і img элементаў прыкладаў. Гэта woud уяўляецца мэтазгодным выкарыстоўваць яго з семантычнай імя класа наступным чынам:


<body>
<div class="section">
[Section content…]
</div>
[Repeat sections as required for main content…]
<div class="aside">
[Aside content…]
</div>
<div class="footer">
[Footer content…]
</div>
</body>




Гэта тое, што працоўны праект павінен сказаць:

footer элемент уяўляе калантытуле для section яна ўжываецца. footer звычайна ўтрымоўвае інфармацыю пра яго section , такіх як, хто што напісаў, спасылкі на адпаведныя дакументы сайта дадзеных і таму падобнае.

У змянілі элементаў частцы HTML 5 адрозненняў ад HTML 4, але і тлумачыць, што address элемента ў наш час вобласцю дзеяння па новай канцэпцыі секцыі. Гэта важна, таму што зараз, калі ў вас ёсць некалькі section на старонцы, кожны з іх можа мець як header і footer з адпаведным address у footer для кожнага, калі злічаць гэта неабходным. Разам з тым, што, здавалася б, рэдкіх прэцэдэнтаў. Хай у палку з больш агульнай адзін: аднаго калантытула для кожнай старонкі з аднаго address элемента, вось як гэта можна зрабіць з дапамогай семантычнага імя класа:


<div class="footer">
<address>[…]</address>
[Other footer content …]
</div>


X. Некалькі імёнаў класаў



Давайце паўтор мала: З дапамогай семантычных імёнаў класаў, мы даём інфармацыю семантычнай імпульс, і кожны фрагмент дадзеных, якія тычацца з'яўляецца аўтаномным. Аднак, магчыма, сталі відавочныя некаторыя дызайнеры, якія чытаюць гэту пабочны эфект выкарыстання гэтага метаду, і ў канчатковым выніку выкарыстанне HTML 5 саміх элементаў, будзе шмат рознага ўтрымання ў кантэйнерах аднаго і таго ж імя. <div class="section"> , напрыклад. Магчыма, вы захочаце публікуйце рознае ўтрыманне вельмі па-рознаму ў браўзары. Некалькі імёнаў класа дазволіць Вам зрабіць гэта. class="section" можа становіцца class="section news" ці class="section services" . "section" імя класа дазваляе стандартызаваць некаторыя ўяўленні, скажам, тыпаграфіка, напрыклад. "news" імя класа дазволіць нам прадставіць яе інакш, як частка варыянт.

Так што зараз у нас ёсць лепшае з абодвух светаў, найважных структурных элементаў уключаны па змаўчанні з больш семантычных імёнаў класаў, падаванне гаплікі ўжыць нашы творчыя здольнасці.


XI. Канец Нататкі



Майце на ўвазе HTML 5 з'яўляецца працоўным праектам, так што, верагодна, будзе некалькі змен, перш чым ён стане рэкамендацыяй. Здавалася б, малаверагодна, што любыя новыя структурныя элементы будуць выдалены, але вострае вока на праект абнаўлення можа быць вельмі добры ход.

Любыя памылкі ў гэтым артыкуле, з'яўляюцца маімі ўласнымі. Калі вам па якой-небудзь, калі ласка, дайце мне ведаць, і я буду рабіць карэктоўкі.



XII. Дадатковая літаратура



  1. Спіс літаратуры:

    1. HTML 5 Working Draft
    2. HTML 5 differences from HTML 4 и, в частности, new structural elements
    3. Semantic class names
    4. Plain old semantic HTML (POSH)
    5. <header>
    6. <nav>
    7. <section>
    8. <article>
    9. <figure>
    10. <dialog>
    11. <aside>
    12. <footer>

  2. Дадатковая літаратура:
    1. A Preview of HTML 5 on A List Apart by Lachlan Hunt
    2. HTML 5 Latest Working Draft at WHATWG
    3. WHATWG on Twitter
    4. W3C HTML Working Group