2. Зміст доповіді 1. Семантична верстка 1.1 Що таке семантика і семантична верстка 1.2 Логіка документу 1.3 Елементи, які використовуються у семантичній верстці 1.4 Коротко про HTML 5 1.5 Приклад верстки 1.6 Переваги семантичної верстки 2. Мікроформати. 2.1 Що таке мікроформати 2.2 Які існують мікроформати 2.3 Приклади використання мікроформатів 2.4 Плон і мікроформати

3. Семантика - значення мовних одиниць - окремих слів, фразеологізмів, складових частин слова тощо. Значення слова, виразу. Семантична верстка – це використання html елементів за їх призначенням. Що таке семантика

4. Логіка документу 2.4.1 Розділення структури і представлення HTML має коріння в SGML, який завжди був мовою специфікації структурної розмітки. Оскільки HTML вже достатньо розвинувся, все більше його елементів представлення і атрибутів замінюються іншими механізмами, особливо - таблицями стилів. Досвід показує, що відділення структури документа від його представлення зменшує вартість обслуговування на основі широкого спектру платформ, носіїв і т.д. і полегшує оновлення документів. HTML на первинному етапі свого розвитку містив в собі тільки елементи логічної структуризації контента.

5. 9.2.1 Елементи абзацу: EM , STRONG , DFN , CODE , SAMP , KBD , VAR , CITE , ABBR и ACRONYM Елементи абзацу додають структурну інформацію до фрагментів тексту. Звичайне значення елементів абзацу таке: EM : Вказує акцент. Використовується для виділення тексту. Зазвичай відображається ПА курсивом. STRONG : Вказує сильніший акцент.. Використовується для виділення тексту. Зазвичай відображається ПА як напівжирний. CITE : Містить цитату або посилання на інші джерела. DFN : Указує, що це визначальний зразок терміну, що додається. CODE : Позначає фрагмент комп'ютерного коду. 9.2 Структурований текст

6. SAMP: Позначає типовий вивід програм, сценаріїв, і т.п. KBD : Позначає текст, введений користувачем. VAR : Позначає зразок змінної або програмного аргументу. ABBR : Позначає абревіатуру (напр., WWW, HTTP, URI, Mass. і т.п.). ACRONYM : Позначає акронім (напр., WAC, radar і т.п.). Продовження

7. Абревіатура (лат. abbrevio — скорочую) — складноскорочені слова, утворені з перших літер або з інших частин слів, що входять до складу назви чи поняття. Вживаються в усній та писемній мові. Абревіатури називають також акронімами (від грец. άκρος — «найвищий, крайній» та όνυμος — «ім'я»). (Щодо застосування терміну «акронім» існують різні думки: за однією, акронімами називають будь-які слова, складені з перших літер чи частин слів у скорочуваному словосполученні, за іншою — тільки такі, що вимовляються як цілісні слова, а не як послідовність назв літер). Wikipedia Продовження

8. The BLOCKQUOTE and Q elements Attribute definitions cite = uri [CT] The value of this attribute is a URI that designates a source document or message. This attribute is intended to give information about the source from which the quotation was borrowed. These two elements designate quoted text. BLOCKQUOTE is for long quotations (block-level content) and Q is intended for short quotations (inline content) that don't require paragraph breaks. 9.2.2 Quotations:

9. The SUB and SUP elements Many scripts (e.g., French) require superscripts or subscripts for proper rendering. The SUB and SUP elements should be used to markup text in these cases. З версткою даних елементів є нюнси, по замовчування вони роздувають рядок в якому вони є. 9.2.3 Subscripts and superscripts:

10. The P element The P element represents a paragraph. It cannot contain block-level elements (including P itself). We discourage authors from using empty P elements. User agents should ignore empty P elements. 9.3.1 Paragraphs:

11. The BR element forcibly breaks (ends) the current line of text. 9.3.2 Controlling line breaks

12. In HTML, there are two types of hyphens: the plain hyphen and the soft hyphen. The plain hyphen should be interpreted by a user agent as just another character. The soft hyphen tells the user agent where a line break can occur. Those browsers that interpret soft hyphens must observe the following semantics: If a line is broken at a soft hyphen, a hyphen character must be displayed at the end of the first line. If a line is not broken at a soft hyphen, the user agent must not display a hyphen character. For operations such as searching and sorting, the soft hyphen should always be ignored. In HTML, the plain hyphen is represented by the "-" character (- or -). The soft hyphen is represented by the character entity reference ­ (­ or ­) 9.3.3 Hyphenation

13. The INS and DEL elements Attribute definitions cite = uri [CT] The value of this attribute is a URI that designates a source document or message. This attribute is intended to point to information explaining why a document was changed. datetime = datetime [CS] The value of this attribute specifies the date and time when the change was made. INS and DEL are used to markup sections of the document that have been inserted or deleted with respect to a different version of a document (e.g., in draft legislation where lawmakers need to view the changes). These two elements are unusual for HTML in that they may serve as either block-level or inline elements (but not both). They may contain one or more words within a paragraph or contain one or more block-level elements such as paragraphs, lists and tables. 9.4 Marking document changes:

14. 10.2 Unordered lists (UL), ordered lists (OL), and list items (LI) Ordered and unordered lists are rendered in an identical manner except that visual user agents number ordered list items. User agents may present those numbers in a variety of ways. Unordered list items are not numbered. Both types of lists are made up of sequences of list items defined by the LI element (whose end tag may be omitted). Definition lists vary only slightly from other types of lists in that list items consist of two parts: a term and a description. The term is given by the DT element and is restricted to inline content. The description is given with a DD element that contains block-level content. Another application of DL, for example, is for marking up dialogues, with each DT naming a speaker, and each DD containing his or her words.

15. Елементи DIV & SPAN div – блочний елемент span – строковий елемент 7.5.4 Групування елементів: елементи DIV і SPAN Елементи DIV і SPAN в комбінації з атрибутами id і class надають загальний механізм для додавання структури для документу. Дані елементи визначають вміст як строковий (SPAN) чи рівня блоку (DIV), але не нав'язують інших ідіом представлення вмісту. Таким чином, автори можуть використовувати дані елементи в комбінації з таблицями стилів, атрибутом lang і т. д. і пристосувати HTML до виконання потрібних завдань.

16. HTML 5 Приклади нових елементів HTML 5 3.8 Sections 3.8.1 The body element 3.8.2 The section element 3.8.3 The nav element 3.8.4 The article element 3.8.5 The aside element 3.8.6 The h1 , h2 , h3 , h4 , h5 , and h6 elements 3.8.7 The header element 3.8.8 The footer element 3.8.9 The address element WHATWG - "Web Hypertext Application Technology Working Group" ( www.whatwg.org ) The WHATWG was founded by individuals of Apple, the Mozilla Foundation, and Opera Software in 2004,

17. Код: <div class=&quot;heading1&quot;> Я текст схожий візуально на заголовок першого рівня </div> <div class=&quot;paragraph&quot;> Я текст схожий на параграф </div> <h1&quot;> Я справжній заголовок першого рівня </h1> <p> Я справжній параграф </p> Стилі : .heading1 { font-size:32px; font-weight:bold; margin:22px 0; } Приклад верстки

18. Переваги семантики 1. Підвищення доступності сайту для альтернативних пристроїв перегляду - мобильні переглядачі - голосові переглядачі - версія сайту для друку - пошукові боти 2. Зрозуміла структура коду. 3. Зменшення кількості коду. 4. Позитивна оцінка колег.

19. Microformats are small bits of HTML that represent things like people, events, tags, etc. in web pages. Microformats enable the publishing of higher fidelity information on the Web, providing the fastest and simplest way to support feeds and APIs for your website. See more explanations of what are microformats, and what you can do with them. Мікроформати

24. Використання мікроформатів Новини Feedburner, news.google.com hAtom Адресна книга plaxo, linkedin, facebook hCard + XFN Календарі upcoming, ckopo.in.ua hCalendar

25. upcoming.yahoo.com - hCalendar Tails Export Firefox Add-ons

26. Operator by Michael Kaply Operator leverages microformats and other semantic data that are already available on many web pages to provide new ways to interact with web services. Tails Export by Robert de Bruin An extension for Showing and Exporting Microformats. Currently it supports the following formats... Firefox Add-ons

27. Плон і мікроформати

28. Посилання HTML 4.01 Specification - http://www.w3.org/TR/html401 Семантическая вёрстка - http://pepelsbey.net/2008/04/semantic-coding-1/ Семантическая верстка — советы и решения - http://flack.ru/2007/11/29/semantic-coding-howto-1/ Microformats - http://microformats.org

29. Дякую Дякую за увагу!