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



 

Здравствуйте, гость (

| Вход | Регистрация )

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


Добрый вечер, пару дней назад решил вникнуть в 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


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

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

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

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

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


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


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


Хм, но один из веб-разработчиков 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


ну раз есть сомнения относительно вопросов мироздания, надо смотреть в библии header и footer, не так ли? smile.gif
в общем-то, исходя из примеров элементы используются чуть ли не как угодно)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
KRoN
KRoN
Topic Starter сообщение 11.5.2012, 22:08; Ответить: KRoN
Сообщение #6


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

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


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


во времена бурной разработки 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


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

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

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

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


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

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

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

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.


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


Свернуть

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

  Тема Ответов Автор Просмотров Последний ответ
Горячая тема (нет новых ответов) Тема имеет прикрепленные файлыВеб-разработка (HTML5, CSS3, JavaScript, jQuery, Ajax, PHP)
56 qpPeW 44767 19.7.2023, 10:03
автор: qpPeW
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлы4к HTML5 видео плеер для сайта
0 Рио 957 20.1.2020, 12:08
автор: Рио
Открытая тема (нет новых ответов) 1C-Bitrix, JavaScript\jQuery, Верстка HTML5 CSS3
1 byteeightlab 1459 2.7.2019, 7:37
автор: ychervov
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыРазработка баннеров для интернет-рекламы: html5, flash, gif и jpg
24 tolkunovdb 7409 25.2.2019, 15:38
автор: tolkunovdb
Горячая тема (нет новых ответов) Тема имеет прикрепленные файлыРазработка баннеров для интернет-рекламы: html5, flash, gif и jpg
34 twildd 19336 25.2.2019, 15:19
автор: twildd


 



RSS Текстовая версия Сейчас: 29.3.2024, 13:08
Дизайн