Структура html-документа

Страницы

Что такое структура сайта

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

Как правило, такую схему изображают графически (блоки, которые связаны стрелочками).

Не путайте внешнюю структуру проекта и внутреннюю. Внешняя представляет собой графический макет с блоками. А внутренняя состоит из категорий и связей страниц и материалов. В данной статье речь пойдет именно о внутреннем строении интернет-ресурса.

Прежде, чем приступать к разработке схемы, определитесь с типом сайта. Проще всего сделать конструкцию «визитки». Для этого нужно всего лишь создать главную страницу, а затем разместить на ней ссылки на основные разделы ресурса.

Если схема интернет-площадки разработана правильно, то:

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

Другие преимущества:

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

Восстановление несохраненных файлов Excel

Резюме

Итак, всё хорошо! Мы сделали несколько больших шагов в этом уроке.

Подумать только, теперь вы знаете основы HTML и CSS. Поскольку мы продолжим и вы потратите больше времени на написание HTML и CSS, вам станет гораздо комфортнее работать с этими двумя языками.

Напомним, что мы рассмотрели следующее:

Разница между HTML и CSS.
Знакомство с элементами HTML, тегами и атрибутами.
Настройка структуры вашей первой веб-страницы.
Знакомство с селекторами CSS, свойствами и значениями.
Работа с селекторами CSS.
Указатель на CSS из HTML.
Важность CSS сброса.

Теперь давайте поближе рассмотрим HTML и познакомимся немного с семантикой.

Блогером

Очень хочу стать не, как мои «предки», космонавтами, а немного другим… Я хочу стать блогером!

Думаю, что это очень интересно и очень-очень современно. Мне нравится смотреть эти маленькие видео в сети. Там они есть на самые разные темы. Обычно ведущий классный. И симпатичный, и модный, и с юмором… Мне нравится, что можно использовать разные компьютерные штуки, шутки, переходы красивые, прикольную музыку. Это не учебник читать! Очень интересно.

И эти видео помогают людям. Там много интересной информации, но она дана в небольшое время. Можно кратко узнать о стране, о каком-нибудь языке, о традициях… Да обо всём! И ты даришь людям своё мнение, естественность в разговоре, в манерах.

И ещё классно, что ты становишься важным для многих людей. Ты придумал видео (может, и по заявке), создал его. И ты можешь это делать сам – тебе даже не нужен оператор, костюмер, сценарист и другие. Сам смонтировал, что тоже мне интересно. И «залил» в интернет. И все смотрят, оставляют комментарии (хвалят), «кидают на стены» друг другу, друзьям просто отсылают. И даже показывают мамам и папам. Обсуждают в кафе. А ты можешь иногда отвечать на вопросы в «комментах», блокировать грубиянов, если такие найдутся. 

И все ждут твоё новое видео, пишут и просят, а ты творишь… Иногда делаешь минутное видео о том, что очень много работы, чтобы народ ждал.

В каждом доме ты становишься своим. Тебя, может быть, узнают уже на улицах. То есть меня узнают! И девчонки хотят со мной познакомиться. И деньги мне идут с рекламы на роликах, а ещё награды за огромное количество просмотров.

Можно ещё брать интервью, но это дольше, конечно. Это нужно приглашать людей в «студию». Лучше просто делать забавные ролики. Я уже пробую – о своём городе хочу, точней, о своей школе запустить видео. 

Главное – не потеряться в сети, а то много блогеров уже.

Что такое HTML?

Язык  HTML  (HyperText Markup Language — язык разметки гипертекста) — это язык для обозначения элементов веб-страницы. Это не язык программирования, поэтому любой может его освоить. Суть языка в том, что нужно исходный текст разметить специальными метками — тегами.

Например, тег параграфа выглядит так:

<p>Пример параграфа</p>

В данном примере мы разметили текст тегом p. В начале стоит открывающий тег <p>, а в конце — закрывающий тег </p>.

Каждый тег обозначается некоторым кодом. Обычно тег начинается знаком «<код параметры>» и заканчивается знаком «</код>». Существуют теги без закрывающего знака.

Стандарт HTML: https://www.w3.org/TR/html52/

В тегах можно указывать параметры. Например, текст, выровненный влево, выглядит так:

<p align=»left»>Пример текста</p>

Пробелы в HTML сокращаются до одного пробела. Переводы строк игнорируются.

Чаще всего используются следующие теги:

<b> — полужирный текст
<i>  — курсив
<br> — перевод строки
<hr> — горизонтальная линия

<a> — ссылка
<pre> — форматированный текст

<ins> — добавленный текст
<del> — удаленный текст

Существует шесть уровней заголовков: с <h1> по <h6>.

<h1>Заголовок уровня 1</h1>
<h2>Заголовок уровня 2</h2>
<h3>Заголовок уровня 3</h3>
<h4>Заголовок уровня 4</h4>
<h5>Заголовок уровня 5</h5>
<h6>Заголовок уровня 6</h6>

Результат будет выглядеть так:

Как посмотреть html код страницы

В любом браузере (например, Firefox, Google Chrome, Opera) нажмите правой кнопкой мыши на любом месте на странице сайта и выберите из выпадающего меню «исходный код страницы» или воспользоваться комбинацией CTRL+U. Перед Вами откроется html-код страницы. Каждая страница сайта, которая есть в интернете, имеет свой код.

Наверное, открыв html-код сайта, Вы могли испугаться тому, что многое из написанного кажется непонятным и сложным. Но это всего лишь иллюзия сложности. На самом деле, разметка HTML довольно простая (даже школьники на уроках информатики её осваивают без проблем).

Суммарное число html тегов не так уж и велико (по факту используется лишь 10-15 тегов). Плюс к тому же все страницы одного сайта очень похожи друг на друга (отличия заключаются лишь в контентной части). Давайте сразу рассмотрим простенький пример создания html-страницы, чтобы начать наше изучение.

Использование сброса CSS

Каждый браузер имеет свои собственные стили по умолчанию для различных элементов. То, как Google Chrome отображает заголовки, абзацы, списки и так далее, может отличаться от того, как это делает Internet Explorer. Для обеспечения совместимости с разными браузерами стал широко использоваться сброс CSS.

Сброс CSS берёт все основные элементы HTML с заданным стилем и обеспечивает единый стиль для всех браузеров. Эти сбросы обычно включают в себя удаление размеров, отступов, полей или дополнительные стили понижающие эти значения. Поскольку каскадирование CSS работает сверху вниз (скоро об этом узнаете) — наш сброс должен быть в самом верху нашего стиля. Это гарантирует, что эти стили прочитаются первыми и все разные браузеры станут работать с общей точки отсчёта.

Есть куча разных сбросов CSS доступных для применения, у всех них есть свои сильные стороны. Один из самых популярных от Эрика Мейера, его сброс CSS адаптирован для включения новых элементов HTML5.

Если вы чувствуете себя немного авантюристом, есть также Normalize.css, созданный Николасом Галлахером. Normalize.css фокусируется не на использовании жёсткого сброса для всех основных элементов, но вместо этого на установлении общих стилей для этих элементов. Это требует более глубокого понимания CSS, а также знания того, что вы хотели бы получить от стилей.

Кроссбраузерность и тестирование

Как упоминалось ранее, разные браузеры отображают элементы по-своему

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

Какие браузеры вы хотите поддерживать и в какой степени — это решение вы должны будете сделать на основе того, что лучше для вашего сайта.

Существует несколько вещей, на которые следует обращать внимание при написании CSS. Хорошей новостью является то, что это всё по силам и нужно немного терпения чтобы это освоить

§3.2 Блочная вёрстка

    На сегодняшний день верстать блоками актуально не просто в угоду моде, это показатель профессионализма. Из плюсов можно отметить компактный код, сравнительную простоту вложенности, скорость разработки и правок. Минус — требуется знание CSS.

    Без утайки скажу, что блочная вёрстка позволяет в буквальном смысле слова творить увертюры сколь угодно сложной логики, что благотворно сказывается на SEO. Например, визуально «хлебные крошки» (так называют навигацию, отражающую положение пользователя относительно корня сайта, на данной странице это строка «Главная > Вебмастеру…») можно расположить над контентом, а в коде они будут под ним. Или «приклеить» панель авторизации к верхней рамке браузера, а в коде отправить её в самый конец.

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

Виртуальные гадания онлайн

Виды структуры

Можно выделить несколько типовых структур, которые чаще всего используются при создании ресурсов.

Линейная

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

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

Поэтому все те же малостраничники, визитки и лендинги размещают основной контент на главной странице. На нее же чаще всего они делают акцент при рекламном продвижении.

Сложная линейная

Все та же линейная, но уже с некоторыми дополнительными элементами, отходящими от основной цепочки. Ее еще называют “линейная с ответвлениями”.

Блочная

Все элементы равны между собой. Представляет собой набор нескольких блоков, которые расположены рядом друг с другом.

Со стороны поискового продвижения такой вариант является более выгодным. Перелинковка и равнозначное положение очень хорошо влияет на индексацию.

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

Древовидная

Самый основной вариант, который используется на большинстве проектов. Это иерархическая структура – значит, что каждый элемент может являться составной частью другого. Они разделены по уровням. Самый верхний – главная страница. Далее могут идти рубрики, подрубрики, страницы и записи. Все они распределены по уровням, это и есть иерархия.

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

Шаги

Выглядит страшно, программируется легко

Для особо непоседливых я начну введение в курс дела сразу с примера. Ниже представлен простой код программы, который я набросал специально для данной статьи. Не стоит переживать. На каждый шаг будет дано детальное объяснение.

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»>.

Какова идеальная структура сайта?

Прежде чем мы углубимся в детали того, как вы можете оптимизировать структуру своего сайта, давайте сначала разберемся, что нам нужно. Какова идеальная структура сайта?

Фактическая структура сайта тесно связана с типом контента, который предлагает сайт. Если мы хотим разделить типы веб-сайтов на группы, мы получим четыре основные группы:

• Блоги
• Корпоративные сайты
• Новостные сайты
• Сайты коммерческие сайты (продажа товаров или услуг в Интернете)

Идеальная структура сайта блога

Хорошая структура сайта для блога выглядит так:

Помимо домашней страницы и других страниц, таких как о нас, свяжитесь с нами и тому подобных, статьи в блоге должны быть сгруппированы в категории в соответствии с релевантностью.

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

Идеальная структура сайта малого бизнеса / корпоративного сайта.

Основная цель сайта для малого бизнеса или корпоративного сайта — предоставить больше информации о бизнесе, его продуктах, услугах и отделах.

Хорошая структура сайта для корпоративного сайта выглядит следующим образом:

Идеальная структура для новостного сайта.

Новостной сайт, такой как онлайн-журнал, может группировать контент по нескольким категориям в зависимости от типа контента и времени его публикации.

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

Идеальная структура сайта для сайта электронной коммерции

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

Однако в типичном случае хорошая структура может быть следующей:

На самом верху структуры у нас идёт домашняя страница, а затем контент, сгруппированный по нескольким категориям.

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

Другими словами, каждый продукт должен быть доступен с главной страницы менее чем за 3 клика. Это делает индексирование более быстрым и легким для понимания сканерами, а также более удобным для пользователей.

Браузеры

Текстовые документы, содержащие разметку на языке HTML (такие документы традиционно имеют расширение или ), обрабатываются специальными приложениями, которые отображают документ в его форматированном виде. Такие приложения, называемые «браузерами» или «интернет-обозревателями», обычно предоставляют пользователю удобный интерфейс для запроса веб-страниц, их просмотра (и вывода на иные внешние устройства) и, при необходимости, отправки введённых пользователем данных на сервер. Наиболее популярными на сегодняшний день браузерами являются Google Chrome, Mozilla Firefox, Opera, Internet Explorer и Safari (см.: ).

Элементы, предназначенные для создания структуры документа в HTML 4

Создание структуры документа до HTML5 осуществлялось с помощью элементов , , , , и . Каждый из представленных элементов представляет собой заголовок, имеющий определённый ранг (уровень). Уровень заголовка определяется на основании числа, указанного в его наименовании. Т.е. элемент имеет 1 ранг (1 уровень), элемент — 2 ранг (2 уровень), элемент — 3 ранг (3 уровень) и т.д

Ранги определяют важность заголовков и прямым образом влияют на структуру документа

Из всех заголовков, самым важным является заголовок, который образован с помощью элемента (самый высокий ранг). А самым незначительным из всех заголовков является заголовок, который образован с помощью элемента (самый низкий ранг).

Элементы — , кроме придания важности контенту, дополнительно создают ещё неявные разделы на странице, т.е. определяют её структуру

Версии

• HTML 3.0 — 28 марта 1995 года — IETF Internet Draft (до 28 сентября 1995 года);
• HTML 3.2 — 14 января 1997 года;
• HTML 4.0 — 18 декабря 1997 года;
• HTML 4.01 — 24 декабря 1999 года;
• ISO/IEC 15445:2000 (так называемый ISO HTML, основан на HTML 4.01 Strict) — 15 мая 2000 года;
• HTML5 — 28 октября 2014 года;
• HTML 5.1 начал разрабатываться 17 декабря 2012 года. Рекомендован к применению с 1 ноября 2016 года.
• HTML 5.2 был представлен 14 декабря 2017 года.

Официальной спецификации HTML 1.0 не существует. До 1995 года существовало множество неофициальных стандартов HTML. Чтобы стандартная версия отличалась от них, ей сразу присвоили второй номер.

Версия 3 была предложена Консорциумом Всемирной паутины (W3C) в марте 1995 года и обеспечивала много новых возможностей, таких как создание таблиц, «обтекание» изображений текстом и отображение сложных математических формул, поддержка gif формата. Даже при том, что этот стандарт был совместим со второй версией, реализация его была сложна для браузеров того времени. Версия 3.1 официально никогда не предлагалась, и следующей версией стандарта HTML стала 3.2, в которой были опущены многие нововведения версии 3.0, но добавлены нестандартные элементы, поддерживаемые браузерами Netscape Navigator и Mosaic.

В версии HTML 4.0 произошла некоторая «очистка» стандарта. Многие элементы были отмечены как устаревшие и не рекомендованные (англ. deprecated). В частности, тег , используемый для изменения свойств шрифта, был помечен как устаревший (вместо него рекомендуется использовать таблицы стилей CSS).

В 1998 году Консорциум Всемирной паутины начал работу над новым языком разметки, основанным на HTML 4, но соответствующим синтаксису XML. Впоследствии новый язык получил название XHTML. Первая версия XHTML 1.0 одобрена в качестве Рекомендации консорциума Всемирной паутины 26 января 2000 года.

Планируемая версия XHTML 2.0 должна была разорвать совместимость со старыми версиями HTML и XHTML, но 2 июля 2009 года Консорциум Всемирной паутины объявил, что полномочия рабочей группы XHTML2 истекают в конце 2009 года. Таким образом, была приостановлена вся дальнейшая разработка стандарта XHTML 2.0.

Блок со ссылками

Каждый блок со ссылкой и её описанием обрамлён тегом <section>, сама ссылка располагается внутри тега <h1>, который в свою очередь находится внутри <header>. Такая логика может показаться странной — зачем нам <header>, когда на странице он уже есть, и к чему столько тегов <h1>? В HTML5 своя логика построения структуры документа, которая отличается от привычной схемы HTML4. В предыдущей версии HTML иерархия блоков строилась на основе тегов <h1>…<h6>. Соответственно, <h1> задавал заголовок страницы, <h2> и <h3> подзаголовки. Чтобы схема документа строилась правильно, на странице должен быть только один <h1>. Спецификация HTML5 устанавливает алгоритм генерации схемы документа, включающий в себя новые семантические теги. Этот алгоритм говорит, что теги <article> и <section> создают новый раздел. А в HTML5 каждый раздел может содержать собственный тег <h1>.

В стилях устанавливаем цвет ссылок через свойство color, цвет ссылок при наведении на них курсора мыши с помощью псевдокласса :hover и параметры заголовка <h1>.

Теперь собираем вместе все наши разделы и получаем окончательный код главной страницы сайта (пример 6.19).

Пример 6.19. Главная страница

HTML5IECrOpSaFx

Код HTML завершён, но стилевой файл lion.css следует отредактировать с учётом новых тегов и указать, что теги <header>, <section>, <footer>, <aside>, <nav>, <article> являются блочными. Это необходимо для корректного применения к ним стилей в старых браузерах.

Как открыть html файл

Как открыть html файл чтобы посмотреть наглядное отображение страницы. Для этого используем любой браузер: Google Chrome, Opera, Edge, Mozilla Firefox, Safari и другие.

Не зря мы сохраняем файлы с расширением html. Ведь только этот тип документа воспроизводят браузеры. А сам язык HTML — это стандарт разметки страницы для последующего воспроизведения браузерами.

В общем, кликаем по файлу правой кнопкой мыши.

В меню наводим на «Открыть с помощью» и выбираем нужный вариант браузера. Если они не отобразятся, то кликаем на «Выбрать другое приложение». Там уже среди списка выбираем нужную программу для чтения html страниц.

Если же вам нужно отредактировать код, то выбираем подходящие редактор. Рекомендую использовать Notepad++.

Упаковщик упаковщица

HTML теги

Как говорилось ранее, HTML это язык разметки, который использует различные теги для форматирования содержимого документа. Эти теги заключены в угловые скобки <имя тега>. За исключением нескольких тегов, большинство тегов имеют соответствующие им закрывающие теги. Например <html> имеет свой закрывающий тег </html>, а тег <body> в свою очередь, имеет свой закрывающий тег </body> тег и т.д.

Рассмотренный пример HTML-документа использует следующие теги:

Теги могут быть написаны как в верхнем регистре так и в нижнем, но World Wide Web Consortium (W3C) — глобальный консорциум, который занимается поддержкой HTML-стандарта, рекомендует использовать нижний регистр (а в XHTML это требование является обязательным).

Заключение

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

Времена изменились

Конкуренция высока во всех нишах, и с внедрением машинного обучения, мобильного индекса и голосового поиска важно дать поисковым системам больше подсказок по темам (а не только по ключевым словам), по которым вы хотите получить рейтинг. И лучший способ сделать это — иметь четко определенную и надежную структуру сайта

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

Пользователи должны иметь доступ к любой странице сайта по ссылкам на главной странице.

Категории сайта должны быть оптимизированы для SEO и добавлены в меню навигации. Внутренние ссылки должны указывать пользователям и поисковым системам наиболее ценный контент веб-сайта, а также помогать им определить структуру веб-сайта.

И если вы еще не провели аудит структуры вашего сайта, то эту задачу необходимо добавить в начало вашей работы над SEO.

9 января 2020 Сайтостроение