jeena/en.javascript.info
1
0
Fork 0
Code Issues Pull requests Projects Packages Wiki Activity Actions

init

Browse source
This commit is contained in:
Ilya Kantor 2014-10-26 22:10:13 +03:00
parent 06f61d8ce8
commit f301cb744d
2271 changed files with 103162 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

33
02-ui/05-widgets/03-widgets-markup/01-semantic-menu/solution.md Normal file
View file

@ -0,0 +1,33 @@
Несмотря на то, что меню более-менее прилично отображается, эта вёрстка совершенно не семантична.
Ошибки:
<ol>
<li>Во-первых, меню представляет собой *список элементов*, а для списка существует тег `LI`.
**Семантический подход -- это когда теги используются по назначению.** Для элементов списка `<li>`, для адреса `<address>`, для заголовка таблицы `<th>` и т.п.
</li>
<li>Во-вторых, класс `rounded-horizontal-blocks` показывает, что содержимое должно быть *оформлено* как скругленные горизонтальные блоки. Любой класс, отражающий оформление, несемантичен.
**Правильно -- чтобы класс был *смысловым***. Например, `<ul class="menu">` будет говорить о том, что смысл элемента -- "меню".</li>
<li>В-третьих, элемент `.vertical-splitter`. Здесь класс вполне семантичен, этот элемент списка является вертикальным разделителем, так что здесь всё в порядке. Но на этот раз несемантичность -- в содержимом.
**Мы, по возможности, стараемся, чтобы HTML содержал именно информацию, а символ вертикальной черты`|` выполняет чисто оформительскую функцию.**
Поэтому от него следует либо вообще избавиться, либо переместить в CSS при помощи `::before`.</li>
</ol>
И, наконец, это не обязательно и не ошибка, но обычно элементы, которые являются ссылками или кнопками, оформляют в `<a>` или `<button>`.
Вариант ниже -- семантичен:
```html
<ul class="menu">
<li class="item"><a href="#">Главная</a></li>
<li class="vertical-splitter"></li>
<li class="item"><a href="#">Товары</a></li>
<li class="item"><a href="#">Фотографии</a></li>
<li class="item"><a href="#">Контакты</a></li>
</ul>
```
[edit src="solution"]Полное меню со стилями[/edit]

1
02-ui/05-widgets/03-widgets-markup/01-semantic-menu/solution/.plnkr Executable file
View file

@ -0,0 +1 @@
{"name":"menu-semantic","plunk":"3H9dtlru2CjxYJNDl3RQ"}

54
02-ui/05-widgets/03-widgets-markup/01-semantic-menu/solution/index.html Executable file
View file

@ -0,0 +1,54 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style>
.menu {
margin: 0;
padding: 0;
}
.menu li {
list-style: none;
float: left;
padding: 6px;
margin: 0 2px;
}
.menu li.item {
border: 1px solid gray;
border-radius: 10px;
cursor: pointer;
font-size: 90%;
background: #FFF5EE;
}
.menu li.vertical-splitter:before {
content: "|";
}
.menu .item a {
color: black;
text-decoration: none;
}
.menu .item a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<ul class="menu">
<li class="item"><a href="#">Главная</a></li>
<li class="vertical-splitter"></li>
<li class="item"><a href="#">Товары</a></li>
<li class="item"><a href="#">Фотографии</a></li>
<li class="item"><a href="#">Контакты</a></li>
</ul>
</body>
</html>

49
02-ui/05-widgets/03-widgets-markup/01-semantic-menu/task.md Normal file
View file

@ -0,0 +1,49 @@
# Семантическое меню
[importance 5]
Посмотрите на вёрстку горизонтального меню.
```html
<div class="rounded-horizontal-blocks">
<div class="item">Главная</div>
<div class="vertical-splitter">|</div>
<div class="item">Товары</div>
<div class="item">Фотографии</div>
<div class="item">Контакты</div>
</div>
```
```css
/*+ hide="Результат со стилями (показать стили)" */
.rounded-horizontal-blocks .item {
float: left;
padding: 6px;
margin: 0 2px;
border: 1px solid gray;
border-radius: 10px;
cursor: pointer;
font-size: 90%;
background: #FFF5EE;
}
.vertical-splitter {
float: left;
padding: 6px;
margin: 0 2px;
}
.item:hover {
text-decoration: underline;
}
```
[iframe src="task" border=1 height=50 edit link]
Что делает эту вёрстку несемантичной? Найдите 3 ошибки.
Как бы вы сверстали меню правильно?

1
02-ui/05-widgets/03-widgets-markup/01-semantic-menu/task/.plnkr Executable file
View file

@ -0,0 +1 @@
{"name":"menu-semantic-src","plunk":"WniZKDl3PHrw64PBEXdm"}

41
02-ui/05-widgets/03-widgets-markup/01-semantic-menu/task/index.html Executable file
View file

@ -0,0 +1,41 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style>
.rounded-horizontal-blocks .item {
float: left;
padding: 6px;
margin: 0 2px;
border: 1px solid gray;
border-radius: 10px;
cursor: pointer;
font-size: 90%;
background: #FFF5EE;
}
.vertical-splitter {
float: left;
padding: 6px;
margin: 0 2px;
}
.item:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div class="rounded-horizontal-blocks">
<div class="item">Главная</div>
<div class="vertical-splitter">|</div>
<div class="item">Товары</div>
<div class="item">Фотографии</div>
<div class="item">Контакты</div>
</div>
</body>
</html>