Великий Путь Вебмастера от идеи до интернет бизнеса
Блог Романа Чуешова
Начни зарабатывать на создании сайтов, лендингов, мобильных приложениях и новейших интернет технологиях
Рубрика:Основы HTML

Структура сайта html или как пошагово создать свой собственный небольшой интернет ресурс

Доброго времени суток, читатели и гости блога. С вами снова я, ваш покорный помощник в изучении основ языка гипертекстовой разметки 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>&copy; Автор статьи данного блога</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>.

html5

И наконец, единица языка footer. На жаргоне веб-разработчиков ее иногда называют «подвалом» страницы. Этот тег располагается внизу страницы или разделов. В footer обычно заносится информация об авторстве определенного ресурса, дата создания документа, справочная информация или другие материалы, не требующие особого внимания читателей веб-ресурса.

Инструменты для создания веб-ресурсов

Для разработки интернет-страниц было создано множество программных продуктов. Условно их можно поделить на простые программы-редакторы и на профессионально ориентированные программные продукты.

Для обучения я рекомендую скачать Notepad++. Это удобный текстовый редактор, выложенный в свободный доступ.

В нем предусмотрена подсветка синтаксиса для оптимизации работы пользователя, автоматическое сохранение изменений при закрытии программы, есть возможность открыть сразу несколько документов в отдельных вкладках и самое главное преимущество – автоматическая верификация и валидация.

Отмечу еще одну важную деталь. Сегодня каждая уважающая себя фирма обязана иметь мобильную версию своего сайта (подробнее об этом в следующих публикациях).

На этой ноте я прощаюсь с вами. Не забудьте вступить в ряды подписчиков блога и поделиться ссылочкой с друзьями. Пока-пока!

С уважением, Роман Чуешов


Прочитано: 51 раз
Этот блог уже читают
читай и ты!
Оставить коментарий
:p :-p 8) 8-) :lol: =( :( :-( :8 ;) ;-) :(( :o:
  • Александр

    По поводу того как распознать HTML или HTML 5, знаю одну типа шутку. Нужно просто попробовать открыть сайт в интернет эксплорере. Если сайт не откроется, то это точно HTML 5. :p

    Роман, кстати, а каким образом ты делаешь вывод HTML кода в статья? :p

    29.11.2016 в 01:10
    • Роман

      Для вывода html кода в статьях я использую плагин Wp-syntax, но можно и другой, их полно в инете.

      А в тексте, где надо вставить сам код перехожу в редактор кода «Текст» и обрамляю необходимые строчки кода тегами

      1
      
      ...(здесь строки выводимого кода в статье)...

      .

      30.11.2016 в 22:35