Доброго времени суток, читатели и гости блога. С вами снова я, ваш покорный помощник в изучении основ языка гипертекстовой разметки html. В данной статье я хочу затронуть тему структурирования страниц сайтов и поближе познакомить вас с основными тегами языка.
Тема структура сайта html одна из наиболее важных и является фундаментом сайтостроения, после освоения которой вы с легкостью сможете моделировать индивидуальный дизайн для своих страничек и сайтов. Для подробного изучения темы в статье предоставляется не только теоретический материал, а и конкретный пример создания блога. А теперь настало время приступить к обучению!
Выглядит страшно, программируется легко
Для особо непоседливых я начну введение в курс дела сразу с примера. Ниже представлен простой код программы, который я набросал специально для данной статьи. Не стоит переживать. На каждый шаг будет дано детальное объяснение.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 | <!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Моя страница</title>
<style type="text/css">
BODY {
background: #fff1e4;
margin: 0;
}
.layout {
width: 70%;
padding-bottom:30px;
margin: 0 auto 10px;
background: #fff;
}
.content {
height:250px;
margin-right: 350px;
background: #f6cf65;
}
.sidebar {
height:250px;
width: 320px;
float: right;
background: #f6cf65;
}
footer{font-size:18px;}
</style>
</head>
<body>
<div class="layout">
<header>
<h1>Создание структуры сайта при помощи html</h1>
</header>
<menu>
<li>Основные теги языка гипертекстовой разметки</li>
<li>Новые теги, пришедшие с html 5</li>
<li>Пример структурирования страницы</li>
</menu>
<div class="sidebar">
<ul>
<li>Основные теги языка гипертекстовой разметки</li>
<li>Новые теги, пришедшие с html 5</li>
<li>Пример структурирования страницы</li>
</ul>
</div>
<div class="content">
<h1>Статья 1</h1>
<p>
Здесь расположен текст первой статьи.
</p>
<h1>Статья 2</h1>
<p>
Здесь расположен текст второй статьи.
</p>
</div>
<footer>© Автор статьи данного блога</footer>
</div>
</body>
</html> |
Данный код создает страницу блога, которая в свою очередь разбита на заголовок (header), меню (menu), основную панель (layout), в которой расположены панель для контента (content) и боковая панель (sidebar), а также называемый «подвал» (footer).
Начнем разбор полетов с первой строки.
<!DOCTYPE> – это элемент языка, основная задача которого указать тип веб-документа. Таким образом браузер определяет, по какому стандарту стоит отображать страницу, так как на сегодняшний день существует несколько версий html.
Далее расположен тег head, который описывался в прошлой статье, также как и входящие в него элементы meta и title.
Однако стоит обратить внимание на новую единицу языка с названием style. Как вы уже догадались по названию, данный тег задает стиль и корректирует расположение объектов на странице.
Логически могу предположить, что в вашей голове сразу же зародился вопрос: «Что за непонятный код расположен в этой части программы? Он совершенно не похож на html!». А ответ таков: в тег style записывается не html, а css код. Как уже ранее было сказано, это инструмент для форматирования внешнего вида сайтов.
Двигаясь по тексту примера дальше, остановимся на контейнере body. Элемент body отвечает за отображаемый в браузере контент и в данном случае разбит div-ами на части.
Div относится к блочным тегам языка разметки. Его используют для выделения некоторых фрагментов с целью их дальнейшего видоизменения.
Управление блоками осуществляется при помощи каскадных таблиц стилей, т.е. языка css. Веб-страница примера располагает тремя блоками, которые привязаны к стилевому оформлению при помощи атрибутов class.
Таким образом, в коде имеются:
- layout – блок, отвечающий за основную часть страницы,
- sidebar – боковая панель (обычно создается для навигации),
- content – блок, в котором располагаются публикации блога.
В элементе с определением класса sidebar я задаю ненумерованный список, используя при этом элементы <ul> и <li>. В блоке со стилевым классом content – теги заголовка <h1> и параграфа <p>.
А теперь подробнее рассмотрим блок <div class="layout">.
HTML или все-таки HTML 5? Как же распознать?
В div-е со стилевым классом layout помимо других блоков, расположены такие теги, как header, menu и footer. В отличие от других элементов примера, они относятся к платформе html 5.
Так, header – это элемент языка гипертекстовой разметки, обычно создающий шапку страниц сайта или разделов, в которую вносят заголовок. Стоит отметить, что браузер Internet Explorer не поддерживает header включительно до 8 версии, однако отображает его содержимое.
Основная задача тега menu состоит в отображении пунктов меню. Аналогично элементам создания нумерованного и ненумерованного списков, внутри контейнера menu каждый пункт содержания вносится в парный тег <li>.
И наконец, единица языка footer. На жаргоне веб-разработчиков ее иногда называют «подвалом» страницы. Этот тег располагается внизу страницы или разделов. В footer обычно заносится информация об авторстве определенного ресурса, дата создания документа, справочная информация или другие материалы, не требующие особого внимания читателей веб-ресурса.
Инструменты для создания веб-ресурсов
Для разработки интернет-страниц было создано множество программных продуктов. Условно их можно поделить на простые программы-редакторы и на профессионально ориентированные программные продукты.
Для обучения я рекомендую скачать Notepad++. Это удобный текстовый редактор, выложенный в свободный доступ.
В нем предусмотрена подсветка синтаксиса для оптимизации работы пользователя, автоматическое сохранение изменений при закрытии программы, есть возможность открыть сразу несколько документов в отдельных вкладках и самое главное преимущество – автоматическая верификация и валидация.
Отмечу еще одну важную деталь. Сегодня каждая уважающая себя фирма обязана иметь мобильную версию своего сайта (подробнее об этом в следующих публикациях).
На этой ноте я прощаюсь с вами. Не забудьте вступить в ряды подписчиков блога и поделиться ссылочкой с друзьями. Пока-пока!
С уважением, Роман Чуешов
По поводу того как распознать HTML или HTML 5, знаю одну типа шутку. Нужно просто попробовать открыть сайт в интернет эксплорере. Если сайт не откроется, то это точно HTML 5.
Роман, кстати, а каким образом ты делаешь вывод HTML кода в статья?
Для вывода html кода в статьях я использую плагин Wp-syntax, но можно и другой, их полно в инете.
А в тексте, где надо вставить сам код перехожу в редактор кода «Текст» и обрамляю необходимые строчки кода тегами
.