X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость ( Вход | Регистрация )

Открыть тему
Тема закрыта
> html5, Правильно ли я понял
KRoN
KRoN
Topic Starter сообщение 10.5.2012, 23:50; Ответить: KRoN
Сообщение #1


Бывалый
****


Группа: User
Сообщений: 475
Регистрация: 10.8.2010
Из: __Санкт-Петербург__ kronolius@gmail.com
Поблагодарили: 72 раза
Репутация:   17  


Добрый вечер, пару дней назад решил вникнуть в html5.
Хочу спросить правильно ли я понял предназначение тэгов header,footer,article,time,figure,aside и т.д.
Вот сверстал за полчасика:
link
<!DOCTYPE html>
<html lang=en>
<head>
    <title>HTML5 Test</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8">
</head >
<body>

<section id="header-wrap">
  <header id="logo"><a href="#">HELLO Lorem Ipsum</a></header>
  <div id="social-icon">
          <a href="#"><img src="images/rss.png" alt="RSS" height="30"></a>
          <a href="#"><img src="images/facebook.png" alt="Facebook" height="30"></a>
          <a href="#"><img src="images/livejournal.png" alt="Live Journal" height="30"></a>
  </div>
  <div id="search"><input type="search" id="search-form"/><input type="submit" id="submit-form" value="Find"/></div>
</section>


<section id="content-wrap">
  <article>
    <header>
      <h1>Lorem Ipsum <span>by Admin</span></h1>
      <time>2012-05-23 17:52</time>
    </header>
    <p class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
    <figure class="images">
        <img src="images/li.jpg" alt="Lorem Ipsum" height="130">
        <img src="images/li2.jpg" alt="Lorem Ipsum" height="130">
        <img src="images/li3.jpg" alt="Lorem Ipsum" height="130">
        <figcaption>Lorem Ipsum Images</figcaption>
    </figure>
    <footer class="comments">120 comments</footer>
   </article>    
</section>


<section id="sidebar-wrap">
    <nav class="menu">
        <header class="title">Menu</header>
        <ul>
            <li><a href="#">Lorem Ipsum</a>
            <li><a href="#">Lorem Ipsum</a>
            <li><a href="#">Lorem Ipsum</a>
            <li><a href="#">Lorem Ipsum</a>
        </ul>
    </nav>
    <aside class="articles">
        <header class="title">Article</header>
        <ul>
            <li><a href="#">Lorem Ipsum</a>
            <li><a href="#">Lorem Ipsum</a>
            <li><a href="#">Lorem Ipsum</a>
            <li><a href="#">Lorem Ipsum</a>
        </ul>        
    </aside>    
</section>

<section id="footer-wrap">
    <div id="copy" class="title">(c) Lorem Ipsum copyright</div>
    <nav class="sitemap"><a href="#">SITEMAP</a></nav>
</section>

</body>    
</html>

Буду очень благодарен, если укажите на ошибки, и посоветуете что-нибудь)


--------------------
Я спасу этот мир (с)
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
4enki
4enki
сообщение 11.5.2012, 2:06; Ответить: 4enki
Сообщение #2


Частый гость
**

Группа: User
Сообщений: 85
Регистрация: 4.5.2012
Поблагодарили: 17 раз
Репутация:   3  


правильно ли я понял

нет. не верно.

header,footer, к примеру. это отдельные(!) элементы.
заголовок и шапка сайта. на сайте они будут использованы только по 1 разу.
section - это элемент подразумевает блок с основным содержимым. а вот внутри него уже и будут article. (статья, анонс и т.п.).
nav - элемент навигации.
aside - боковая колонка. используется не для основного содержания, а для вывода всевозможных элементов сайта. поиск, соц.кнопки, навигация, список тегов и категорий и т.п.

вот по этой ссылке всё довольно подробно: http://htmlbook.ru/html5. там же есть и пример сайта, сверстанного на html5.

да и вообще, лучший способ что-то понять: посмотрите исходники уже существующего простого сайт на html5.


Поблагодарили: (2)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
x64
x64
сообщение 11.5.2012, 8:26; Ответить: x64
Сообщение #3


F.A.L.L.O.U.T.
*******

Группа: Super Moderator
Сообщений: 3426
Регистрация: 30.6.2011
Из: Железнодорожный (Балашиха)
Поблагодарили: 2749 раз
Репутация:   289  


header — шапка, то, что раньше задавалось как:
<div id="header">содержимое шапки</div>

сейчас делается так:
<header>содержимое шапки</header>



footer — повал соответственно:
<div id="footer">содержимое подвала</div>

сейчас ввели отдельный элемент для этого:
<footer>содержимое шапки</footer>


aside — боковое меню, ранее было примерно так:
<div id="aside">содержимое боковичка</div>


ну и в таком духе.
года 4 назад на рите говорили, что проанализировали код тысяч страниц, нашли самые часто встречающие обозначения и «затегили» их. в общем, на http://htmlbook.ru/ есть кое-чего, посмотрите smile.gif

Сообщение отредактировал x64 - 11.5.2012, 8:27


--------------------


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
KRoN
KRoN
Topic Starter сообщение 11.5.2012, 20:09; Ответить: KRoN
Сообщение #4


Бывалый
****


Группа: User
Сообщений: 475
Регистрация: 10.8.2010
Из: __Санкт-Петербург__ kronolius@gmail.com
Поблагодарили: 72 раза
Репутация:   17  


Хм, но один из веб-разработчиков Oper'ы говорит что header, footer, aside не именно div id="..."
http://pepelsbey.net/2011/07/sense-coding/
Вотс...
(4enki @ 11.5.2012, 1:06) *
да и вообще, лучший способ что-то понять: посмотрите исходники уже существующего простого сайт на html5.

Каждый все понимает по своему
На htmlbook говорится, что "Тег <header> задает «шапку» сайта или раздела, в которой обычно располагается заголовок." Раздела те любой шапки важной части...
И тем более htmlbook сугубо чье-то мнение...

Вот даже если взглянуть на верстку Пепелсбея можно увидеть что в каждом wrap'e почти везде есть header и footer...

Так что лучше читать оф документацию на буржуйском... Тяжко придется)


--------------------
Я спасу этот мир (с)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
x64
x64
сообщение 11.5.2012, 20:21; Ответить: x64
Сообщение #5


F.A.L.L.O.U.T.
*******

Группа: Super Moderator
Сообщений: 3426
Регистрация: 30.6.2011
Из: Железнодорожный (Балашиха)
Поблагодарили: 2749 раз
Репутация:   289  


ну раз есть сомнения относительно вопросов мироздания, надо смотреть в библии header и footer, не так ли? smile.gif
в общем-то, исходя из примеров элементы используются чуть ли не как угодно)


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
KRoN
KRoN
Topic Starter сообщение 11.5.2012, 22:08; Ответить: KRoN
Сообщение #6


Бывалый
****


Группа: User
Сообщений: 475
Регистрация: 10.8.2010
Из: __Санкт-Петербург__ kronolius@gmail.com
Поблагодарили: 72 раза
Репутация:   17  


(x64 @ 11.5.2012, 19:21) *
ну раз есть сомнения относительно вопросов мироздания, надо смотреть в библии header и footer, не так ли?
в общем-то, исходя из примеров элементы используются чуть ли не как угодно)

В принципе вы правы, вот уже 3-ий день покоряю Библию) Но с трудом дается на англ языке... вот и спрашиваю правильно я все понял, и хотя сейчас мне кажется можно верстать как угодно, ПС не учитывают семантику, для них это обычные дивы)


--------------------
Я спасу этот мир (с)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
x64
x64
сообщение 12.5.2012, 12:32; Ответить: x64
Сообщение #7


F.A.L.L.O.U.T.
*******

Группа: Super Moderator
Сообщений: 3426
Регистрация: 30.6.2011
Из: Железнодорожный (Балашиха)
Поблагодарили: 2749 раз
Репутация:   289  


во времена бурной разработки html3/4 основная ставка была на оформительские теги: s, strike, u, acronym, font и ещё некоторые (причём, некоторая часть из которых поддерживается браузерами но не входит в спецификацию, например, nobr). примечательно, что многие браузеры выделяли содержимое тегов наклонным или жирным начертанием (т. е. конечному пользователю было никак от этих излишеств).
теперь все ударились в семантику. семантика — это круто! и появляется куча семантических тегов, в то время, как оформительские начинают порицаться. а по сути получаются теже яицы, только в профиль. браузеры давно научились html любой корявости отображать хоть как-нибудь. поисковики, соответственно, тоже.
сеошникам вроде бы дают инструменты для более логичного представления документов, но при этом нет чётких инструкций, как ими пользоваться (иначе html превратился бы в xhtml со всей строгостью). тот же header: можно обрамить как часть, относящуюся к заголовку, а можно использовать как шапку.
походу надо плюнуть на всё это и верстать, как верстали. а как только поисковики начнут давать повышенный вес страницам с использованием каких-нибудь новых тегов, так можно и будет и поменять. благо, <div id="header">...</div> несложно заменить на <header>...</header>, ну и в стилях убрать решётку: #header {...} заменить на header {...}


--------------------


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
boombeerman
boombeerman
сообщение 12.5.2012, 12:57; Ответить: boombeerman
Сообщение #8


Участник
***

Группа: User
Сообщений: 113
Регистрация: 29.3.2012
Из: Москва
Поблагодарили: 29 раз
Репутация:   3  


Получается чисто для структуризации CSS сделали.

Вместо кучи однотипных айдишников дивов, решили раскидать все по полкам, тобишь все раздельно, айдишники хедеров, футеров, дивов и т.д

А зачем не понятно, единственное что это дает так это более удобную читаемость чужой верстки, и нахождение определенных элементов.

Сообщение отредактировал boombeerman - 12.5.2012, 13:01
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
lejos
lejos
сообщение 30.5.2012, 12:29; Ответить: lejos
Сообщение #9


Новичок
*

Группа: User
Сообщений: 21
Регистрация: 29.5.2012
Из: Новосибирск
Поблагодарили: 13 раз
Репутация:   1  


Из книг на русском языке могу посоветовать П. Лабберс - HTML 5 для профессионалов. Мощные инструменты для разработки современных веб-приложений - 2011.
Книга хороша тем, что все достаточно хорошо и понятно расписано. Много внимания семантике и основным плюшкам HTML5. На основе этой книги сделал спецкурс, апробировал в школе с детьми, усвоение материала проходило очень быстро и легко.

Еще есть книга - Б. Лоусон, Р. Шарп - Изучаем HTML 5 (Библиотека специалиста) - 2011, но мне она не очень понравилась, в виду несерьезного отношения авторов к делу.

Я в данный момент пишу диплом на тему HTML5+CSS3 = адаптивная верстка. Тоже много переводил и читал, если будут вопросы - обращайтесь.


--------------------
Стремлюсь к мечте и помогаю другим.
Занимаюсь отловом ошибок и несоответствий в вашем коде, а так же помогаю подружиться с валидатором.
Люблю вопросы о макетировании, сетках, юзабилити.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Веб-разработка (HTML5, CSS3, JavaScript, jQuery, Ajax, PHP)
18 qpPeW 3416 12.12.2017, 13:32
автор: qpPeW
Открытая тема (нет новых ответов) Разработка баннеров для интернет-рекламы: html5, flash, gif и jpg
22 twildd 5964 11.12.2017, 19:02
автор: twildd
Открытая тема (нет новых ответов) Верстка HTML5/CSS3: недорого, качественно, быстро, адаптивно.
3 xexnax 971 6.9.2017, 21:58
автор: ManyFiles
Открытая тема (нет новых ответов) Качественная HTML5/CSS3 верстка сайтов.
Вы нашли то, что Вам нужно.
23 julia_verstka 7270 22.8.2017, 12:21
автор: julia_verstka
Открытая тема (нет новых ответов) Нужно создать баннеры в html5
1 Virus_07 544 6.4.2017, 17:46
автор: Concept


 



RSS Текстовая версия Сейчас: 15.12.2017, 14:56
Дизайн