Что происходит? Периодически после обновления страницы вот такая фигня, вместо иконок
Разметка и графика (Статей: 6)
В HTML5 введены несколько новых тегов, ниже основной список:
<section>
Тег группирует похожие блоки.
section могут быть вложены друг в друга.
<header>
Содержит заголовок какой либо
секции, таблицы или страницы
<footer>
Подвал. Думаю комы излишни.
<nav>
Блок меню. Думаю тоже не требует объяснений.
<article>
Тут спектр возможностей богатый. Объясню ниже на примере.
<aside>
Можно использовать как сайдбар так и блок с комментариями.
В последних версиях всех браузеров, кроме,
IE эти элементы поддерживаются по умолчанию.
Приступим к примеру:
index.html
Кроме того к этим тегам можно (нужно) применить стили
вот вроде все! спасибо за внимание
Site: Портфолио Сетка
<section>
Тег группирует похожие блоки.
section могут быть вложены друг в друга.
<header>
Содержит заголовок какой либо
секции, таблицы или страницы
<footer>
Подвал. Думаю комы излишни.
<nav>
Блок меню. Думаю тоже не требует объяснений.
<article>
Тут спектр возможностей богатый. Объясню ниже на примере.
<aside>
Можно использовать как сайдбар так и блок с комментариями.
В последних версиях всех браузеров, кроме,
IE эти элементы поддерживаются по умолчанию.
Приступим к примеру:
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>Мой сайт на хтмл5</title>
<style>
footer{display: block} //его нужно обозначить блочным
</style>
</head>
<body>
<header>
тут лого
</header>
<nav>
тут меню
</nav>
<section>
<article>
<header>
Китайцы на луне о_О
</header>
На луне были китайцы, они были на луне
</article>
<article>
<header>
Китайцы прилетели
</header>
Они были на луне и прилетели обратно, на луну.
</article>
</section>
<aside>
Читать про полет китайцев...
</aside>
<footer>
Copyright by China
</footer>
</body>
</html>
Кроме того к этим тегам можно (нужно) применить стили
вот вроде все! спасибо за внимание
Site: Портфолио Сетка
Статью писал для своего сайта, но по некоторым причинам решил все свои статьи перезалить сюда (что бы не утерять)!
Часто случается такое, что заходя на сайт вначале дизайн расположен как-попало, шапка вверху, левый блок ниже шапки, блок с контентом ниже, и т.д!
в 90% случаев это следствие разметки при помощи <table>...</table>.
Что бы такого не было, желательно делать это в блоках)
Так вот, для начала укажем тип документа, и укажем все необходимое для работы со страницей!
Теперь в тело страницы, добавим 4 блока: head, left, right, foot
Мы будем использовать:
Свойство border - для того, что бы показать бордюры блока.
Свойство margin - для отступов между блоками.
Свойство float - для обтекания текста с определенной стороны.
Свойство width - для определение ширины блока.
В итоге у нас должно получится так:
---------------
Планируется еще одна статья, где будет показано как выполнить блочную верстку в 3 колонки
Часто случается такое, что заходя на сайт вначале дизайн расположен как-попало, шапка вверху, левый блок ниже шапки, блок с контентом ниже, и т.д!
в 90% случаев это следствие разметки при помощи <table>...</table>.
Что бы такого не было, желательно делать это в блоках)
Так вот, для начала укажем тип документа, и укажем все необходимое для работы со страницей!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>My Page</title> </head> <body> </body> </html>
Теперь в тело страницы, добавим 4 блока: head, left, right, foot
<div class="head"> Head page </div> <div class="left"> Left main </div> <div class="right"> Right main </div> <div class="foot"> Foot page </div>Теперь можно перейти к css.
Мы будем использовать:
Свойство border - для того, что бы показать бордюры блока.
Свойство margin - для отступов между блоками.
Свойство float - для обтекания текста с определенной стороны.
Свойство width - для определение ширины блока.
/* Левый блок */
.left {
float:left;
width: 100px;
border: 1px solid #ccc;
}
/* Правая сторона */
.right {
border: 1px solid #ccc;
margin-left: 110px;
}
/* Шапка и ноги сайта */
.foot, .head {
border: 1px solid #ccc;
margin: 2px 0px 2px 0px;
}
В итоге у нас должно получится так:
+-----------------------------+ | Head page | +-----------------------------+ | Left main | Right main | +-----------------------------+ | Foot page | +-----------------------------+Вот и все =)
---------------
Планируется еще одна статья, где будет показано как выполнить блочную верстку в 3 колонки
Для тех, кто уже знает что такое дивный дизайн начинаем 1-й урок по созданию сайта в формате div.
Поскольку дивный дизайн состоит не из таблиц, как табличный дизайн, а из слоёв (блоков), то и конструкция всего нашего будущего сайта будет состоять из слоёв:
<div></div>
Тег <div> является парным, поэтому каждый блок должен закрываться, например:
<div>Первый блок</div>
Хорошо, с этим понятно, теперь сделаем HTML-страничку, а кто ещё не умеет этого делать прошу начать изучать азы создания сайтов.
Создайте файл index.html и напечатайте там следующий код:
Откройте страничку в браузере.
По-умолчанию созданный нами слой прозрачный, поэтому мы видим только слова, которые вписали внутри слоя.
Теперь создадим ещё два слоя.
Поскольку дивный дизайн состоит не из таблиц, как табличный дизайн, а из слоёв (блоков), то и конструкция всего нашего будущего сайта будет состоять из слоёв:
<div></div>
Тег <div> является парным, поэтому каждый блок должен закрываться, например:
<div>Первый блок</div>
Хорошо, с этим понятно, теперь сделаем HTML-страничку, а кто ещё не умеет этого делать прошу начать изучать азы создания сайтов.
Создайте файл index.html и напечатайте там следующий код:
<html> <head> <title>Дивный дизайн</title> <meta http-equiv="Content-Type" content="text/html; charset="windows-1251"> </head> <body> <div>Первый блок</div> </body> </html>Это стандартный код хтмл-страницы? в который мы вставили первый слой, он выделен красным цветом.
Откройте страничку в браузере.
По-умолчанию созданный нами слой прозрачный, поэтому мы видим только слова, которые вписали внутри слоя.
Теперь создадим ещё два слоя.
<html> <head> <title>Дивный дизайн</title> <meta http-equiv="Content-Type" content="text/html; charset="windows-1251"> </head> <body> <div>Первый блок</div> <div>Второй блок</div> <div>Третий блок</div> </body> </html>Ну и смотрим как получилось.
Что такое дивный дизайн
Почему дивный? В HTML есть такой тег, поэтому и дизайн стали называть дивным, DIV-ный дизайн отличается от табличного тем, что в данном случае используются слои (блоки), которые располагаются на странице в определённом порядке. Порядок, положение и размеры слоёв задаёт отдельный файл style.css
На первый взгляд не видно отличия от табличного дизайна. В данном случае мы имеем три слоя, между которыми пустое пространство. В табличном дизайне нам пришлось бы делать дополнительные ячейки, чтобы разделить шапку, меню и контент.
1 - основной, вмещает в себе три остальных;
2 - шапка сайта;
3 - меню;
4 - контент;
По сравнению с рисунком выше видно, что блоки независимы в размерах друг от друга, их размеры и положение можно изменять независимо от других блоков (слоёв), чего не скажешь о таблице, где каждая ячейка зависит от рядом стоящей.
Дивный дизайн имеет ряд преимуществ в отличие от табличного:
- дизайн всего сайта можно менять в одном файле .css (размеры, положение, цвета и др.);
- код страницы:
а) не содержит лишних тегов, что облегчает вес файла страницы (кб);
б) легко находить нужные фрагменты страницы;
в) способствует лучшему индексированию поисковыми системами;
Посмотрим на HTML-код страницы с табличным дизайном:
<table width="500" height="295">
В дивном же дизайне они задаются в файле style.css, в таблице стилей. Для кода дивного дизайна привёденного выше файл style.css содержит следующие строки:
float:left - выравнивание слоя по левому краю;
background:#FDE2CC - задание цвета для фона слоя;
margin-top: 10px - отступ сверху 10 пикселей.
Таким образом в дивном дизайне все атрибуты отображения слоёв, текста, изображений, цвет гиперссылок, размеры заглавных букв и других объектов можно задать в одном файле. Если у вас сайт состоит из 100… страниц, и вам вдруг срочно нужно меню сделать на пару пикселей больше, то вы без проблем сделаете это, изменив всего один файл style.css. Для табличного дизайна в таком случае придётся изменить все ваши 100… страниц, на это уйдёт минимум 100… минут.
Как видите DIV-ный дизайн имеет ряд преимуществ, именно поэтому сегодня большинство сайтов строятся именно в таком формате.
Почему дивный? В HTML есть такой тег, поэтому и дизайн стали называть дивным, DIV-ный дизайн отличается от табличного тем, что в данном случае используются слои (блоки), которые располагаются на странице в определённом порядке. Порядок, положение и размеры слоёв задаёт отдельный файл style.css
На первый взгляд не видно отличия от табличного дизайна. В данном случае мы имеем три слоя, между которыми пустое пространство. В табличном дизайне нам пришлось бы делать дополнительные ячейки, чтобы разделить шапку, меню и контент.
1 - основной, вмещает в себе три остальных;
2 - шапка сайта;
3 - меню;
4 - контент;
По сравнению с рисунком выше видно, что блоки независимы в размерах друг от друга, их размеры и положение можно изменять независимо от других блоков (слоёв), чего не скажешь о таблице, где каждая ячейка зависит от рядом стоящей.
Дивный дизайн имеет ряд преимуществ в отличие от табличного:
- дизайн всего сайта можно менять в одном файле .css (размеры, положение, цвета и др.);
- код страницы:
а) не содержит лишних тегов, что облегчает вес файла страницы (кб);
б) легко находить нужные фрагменты страницы;
в) способствует лучшему индексированию поисковыми системами;
Посмотрим на HTML-код страницы с табличным дизайном:
<table border="0" cellpadding="0" cellspacing="0" width="500" height="295"> <tr> <td height="75" valign="top" colspan="3" bgcolor="#FDE2CC">Шапка сайта</td> </tr> <tr> <td height="19" colspan="3"></td> </tr> <tr> <td width="140" valign="top" bgcolor="#EEB6B6">Меню</td> <td width="25"></td> <td valign="top" bgcolor="#B9BBF1">Контент</td> </tr> </table>А теперь посмотрим хтмл-код с дивным дизайном:
<link rel="stylesheet" href="style.css" type="text/css"> <div id="page"> <div id="logo">Шапка сайта</div> <div id="menu">Меню</div> <div id="content">Контент</div> </div>Как видите хтмл-код с дивным дизайном намного проще, а результат ощутим! Но, обратите внимание, что в коде дивного дизайна присутствует строчка:
<link rel="stylesheet" href="style.css" type="text/css">Эта строка говорит о том, что все стили для этой страницы хранятся в файле style.css (таблица стилей). То есть, если в табличном дизайне для таблицы высота и ширина задаются так:
<table width="500" height="295">
В дивном же дизайне они задаются в файле style.css, в таблице стилей. Для кода дивного дизайна привёденного выше файл style.css содержит следующие строки:
/* таблица стилей */ /* задаем размер страницы */ #page { width:500px; height:100% auto; margin: 10px; } /* задаем размещение блоков */ #logo { float:left; width:500px; height:50px; background:#FDE2CC } #menu { float:left; width:150px; height:170px; background:#EEB6B6; margin-top: 10px } #content { float:right; width:340px; height:200px; background:#B9BBF1; margin-top: 10px } Bли если без строчек с пояснениями, то так: #page { width:500px; height:100% auto; margin: 10px; } #logo { float:left; width:500px; height:50px; background:#FDE2CC } #menu { float:left; width:150px; height:170px; background:#EEB6B6; margin-top: 10px } #content { float:right; width:340px; height:200px; background:#B9BBF1; margin-top: 10px } Разберём что значит первая строка: #page { width:500px; height:100% auto; margin: 10px; } #page - идентификатор слоя (блока); { } - в скобках указывают все атрибуты для данного слоя; width:500px - задание ширины слоя; ; - точка с запятой разделяют атрибуты; height:100% auto - задание высоты слоя; margin: 10px - задание отступов со всех сторон.В других строках таблицы стилей использованы:
float:left - выравнивание слоя по левому краю;
background:#FDE2CC - задание цвета для фона слоя;
margin-top: 10px - отступ сверху 10 пикселей.
Таким образом в дивном дизайне все атрибуты отображения слоёв, текста, изображений, цвет гиперссылок, размеры заглавных букв и других объектов можно задать в одном файле. Если у вас сайт состоит из 100… страниц, и вам вдруг срочно нужно меню сделать на пару пикселей больше, то вы без проблем сделаете это, изменив всего один файл style.css. Для табличного дизайна в таком случае придётся изменить все ваши 100… страниц, на это уйдёт минимум 100… минут.
Как видите DIV-ный дизайн имеет ряд преимуществ, именно поэтому сегодня большинство сайтов строятся именно в таком формате.