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

Что такое HTML?

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

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

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

1	<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>

1 2 3 4 5 6

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

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

Страницы

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

Основные термины CSS

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

Селекторы

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

Селекторы, как правило, связаны со значением атрибута, вроде значения id или class или именем элемента, вроде <h1> или <р>.

В CSS селекторы сочетаются с фигурными скобками {}, которые охватывают стили, применяемые к выбранному элементу. Этот селектор нацелен на все элементы <p>.

Свойства

Как только элемент выбран, свойство определяет стили, которые будут к нему применены. Имена свойств идут после селектора, внутри фигурных скобок {} и непосредственно перед двоеточием. Существует множество свойств, которые мы можем использовать, такие как background, color, font-size, height и width и другие часто добавляемые свойства. В следующем коде мы определяем свойства color и font-size, применяемые ко всем элементам <p>.

Значения

Пока мы только выбрали элемент через селектор и определили, какой стиль через свойства мы хотели бы к нему применить. Теперь мы можем задать поведение этого свойства через значение. Значения могут быть определены как текст между двоеточием и точкой с запятой. Ниже мы выбираем все элементы <p> и устанавливаем значение свойства color как orange, а значение свойства font-size как 16 пикселей.

Для проверки, в CSS наш набор правил начинается с селектора, затем сразу же идут фигурные скобки. В этих фигурных скобках располагаются объявления, состоящие из пар свойств и значений. Каждое объявление начинается со свойства, за которым следует двоеточие, значение свойства и, наконец, точка с запятой.

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

Рис. 1.03. Структура синтаксиса CSS включает селектор, свойства и значения

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

§2.3 Порядок подключения каскадных таблиц стилей CSS и Java Script’ов

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

    Т. о. становится реальным для разных страниц применить свои правила оформления — просто подключите к нужной странице корректирующий файл последним.

    В отношении JavaScript правила такие: библиотеки функций и фреймворки, например Jquery или MooTools, подключаются первыми. За ними идут плагины и вызовы необходимых функций с параметрами. Если перепутать порядок подключения, скрипты работать не будут!

    Пример подключения библиотеки Jquery и плагина к ней:

   jquery.js»>
   plagin.js»>

    Дальше мы познакомимся с видами вёрстки.

Тип HTML документа (doctype)

Осталось рассмотреть один тег нашей первой WEB-страницы, который находится в самом начале html-кода: «!doctype html». Данный тег задает версию языка HTML, на котором написана страница, и его версию.

Он необходим, чтобы браузер понимал согласно какому стандарту отображать веб-страницу. Метатегов doctype существует несколько видов, и они различаются в зависимости от версии языка, на котором написан html-код. Так, наш тег !doctype html указывает на версию языка HTML5.

Итак, подведем итоги:

1. Практически все WEB-страницы, представляют из себя текстовый файл. Создать их можно с помощью любого текстового редактора. В данной статье мы научились создавать WEB-страницы при помощи обычного Блокнота.

2. HTML — это язык, который используется для создания web-страниц. HTML — это аббревиатура HyperText Markup Language (язык гипертекстовой разметки).

3. WEB-страницы состоят из html-тегов и их содержимого. Теги состоят из символов и имени внутри них. Имена тегов можно писать как прописными(большими), так и строчными(маленькими) буквами. Между символами и именами тегов, а также внутри имен тегов не допускаются пробелы и переносы строк. Теги бывают парные и одиночные, а также теги могут быть вложенными друг в друга.

4. Открывающий тег + содержимое + закрывающий тег образуют элемент. Бывают также элементы состоящие из одного открывающего тега. В HTML есть блочные элементы и строчные. Блочные элементы всегда выводятся с новой строки и имеют отступ сверху и снизу от соседних элементов. Строчные элементы осуществляют логическое форматирование текста.

5. Открывающие HTML-теги могут содержать атрибуты, которые помещаются между именем тега и символом и отделяются от имени тега пробелом. Если в теге несколько атрибутов, то они отделяются друг от друга пробелами. Атрибуты бывают обязательные и необязательные.

6. Любая WEB-страница должна содержать в себе две секции: секция заголовков head и секция тела body. Эти секции должны находиться внутри тега html. Это основные теги html, без которых не обходится ни одна html-страница.

7. Вначале HTML-кода должен идти метатег doctype, указывающий версию языка.

На этом мы закончим знакомиться с основами html. Чтобы научится применять язык HTML на практике необходимо изучить конкретные теги, их особенности и свойства. Для создания простейших веб-страниц необходимо изучить следующие вопросы:

• Как создавать заголовки и абзацы в html;
• Как вставить изображение в html;
• Как вставить таблицу на сайт;
• Как создать гиперссылку.

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

На этом у меня все!!! До встречи в следующих постах!

Используйте категории, чтобы сгруппировать связанный контент

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

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

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

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

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

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

• Сделайте SEO оптимизацию категорий
• Когда вы создаете новую категорию, поработайте над ней. Особенно:
• Оптимизируйте название и описание категории.
• Напишите краткое введение.
• Добавить соответствующее изображение (с правильным текстом ALT).
• Оптимизируйте URL категории.
• Убедитесь, что категория включена в карту сайта.
• Добавьте внутренние ссылки, указывающие на страницы вашей категории.

Задания

1. Добавьте в вашу учебную веб-страницу информацию о версии HTML.
2. Добавьте данные о кодировке на вашу веб-страницу.
3. Добавьте в исходный код вашей учебной веб-страницы информацию о себе, как об авторе, в виде комментария.
4. Создайте ещё несколько HTML-файлов для Вашего будущего сайта: page1.html, page2.html, …, pageN.html, contacts.html, подготовьте и добавьте в них тексты. Не обязательно создавать оригинальные тексты и тем более не нужно их генерировать программно. Лучше, например, взять тексты из каких-нибудь старых энциклопедий или других книг (с истёкшими авторскими правами). См. также рерайтинг.

Основные символы

Код	Символ	Смысл
&lt;	<	меньше
&gt;	>	больше
&amp;	&	амперсанд
&nbsp;		неразрывный пробел (на этом пробеле строка не разрывается для переноса)
&sect;	§	параграф
&#8470;	№	номер
&copy;		копирайт (copyright)
&reg;		зарегистрированный товарный знак (registered trademark)
&#153;		товарный знак (trademark)
&deg;	°	градусы
&laquo;	открывающая кавычка в русском языке
&raquo;	закрывающая кавычка в русском языке
&hellip;	…	многоточие
&mdash;	—	тире
&#149;	•	жирная точка
&plusmn;	±	плюс-минус
&minus;	−	минус

Клавиатурные символы ‘ и » в русском языке кавычками не являются. Также неправильно на сайтах заменять №, , , , °C на N, (c), (R), TM, C.

Дефис, тире и минус — три разных знака.

1. Клавиатурный символ — называется дефис и используется внутри слов.
2. Минус шире дефиса. Он используется для записи отрицательных чисел и операции вычитания.
3. Тире ещё шире, чем минус. Оно используется между словами и отбивается пробелами, причём спереди — неразрывным. Для обозначения числовых интервалов тоже используется тире, но пробелами не отбивается.

Более подробно:

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

Символы <, > и & нельзя отобразить в HTML обычным образом, потому что они имеют специальный смысл. Для их отображения всегда используются &lt;, &gt; и &amp; соответственно.

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

1. Любой html документ должен иметь теги

<html> — открывающий тег документа (располагается самым первым), </html> — закрывающий тег документа (должен быть самым последним)

Вообще в html практически все теги состоят из двух элементов: открывающий <ТЕГ> и закрывающий </ТЕГ>.

Теги можно писать с большой буквы, а можно и с маленькой, поскольку браузеры не воспринимают регистры. То есть, если Вы напишите так:

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

2. Любой html документ можно разделить на две части
2.1. Заголовок страницы. Это невидимая для пользователя часть страницы, не является обязательной (однако, для продвижения сайта и оптимизации кода страницы она очень важна). Синтаксис заголовочной части:

Между тегами <head> и </head> располагаются следующие элементы:

• мета теги html (meta)
• заголовок страницы <title> (см. как правильно написать тег <title>)
• подключаемые яваскрипты (JavaScript)
• подключаемые стили (link) и т.д.

Все эти элементы подробно разобраны в специальном уроке по заголовочным тегам »

2.2. Тело страницы (или основная часть). Является видимой для пользователя частью (она располагается в тегах body). Её синтаксис:

<body> — открывающий тег тела страницы. Сразу после него идет то, что видит пользователь: дизайн и контент страницы. Тело и, собственно, весь html-документ должны заканчиваться последовательностью:

Примечание: заголовочные теги обязательно должен располагаться перед телом страницы! Сразу после закрывающего тега </head> должно идти основная часть страницы.

Все теги, которые можно писать в этой части рассмотрены в уроке 3 — самые основные html теги.

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

Следующий урок: Урок 2. Пример создание простой html-страницы

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

Типы структуры сайта в виде схем

1. Линейная

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

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

А значит, привлекать новых посетителей будет затруднительно. Линейная структура больше подходит тем, для кого не принципиально получать трафик из поиска. Пример схемы:

Линейная с ответвлениями 

Этот тип похож на предыдущий вариант. Только здесь можно применять одновременно несколько продуктов. Самый распространенный пример такой схемы – онлайн-библиотека одного автора с его произведениями. Читатель здесь, опять же, будет двигаться от главной страницы. Для SEO-продвижения эта структура сайтов интернета не подходит.

Блочная

В данном случае каждая страница ссылается на несколько других, равнозначных между собой. Эту конструкцию можно использовать для какого-то определенного продукта, размещая отдельные записи с описанием его преимущества/свойства или совокупностей характеристик. Все записи здесь связаны между собой и ссылаются на главную, что позволяет эффективно её продвигать. Однако данный подход крайне специфичен и подходит далеко не для всех интернет-площадок. Пример блочной схемы ресурса:

Древовидная

Универсальная конструкция, которую используют 99 % всех ресурсов. Для каждого направления здесь имеется своя ветка, для каждого товара или услуги – отдельное ответвление. Другими словами, записи объединяются в привычные всем разделы и подразделы

В данном случае внимание посетителей концентрируется не только на главной, но и на разделах (каждая запись раздела ссылается одновременно на главную и на свой раздел, остается лишь настроить «хлебные крошки»)

Древовидная схема в URL:

• site.ru/stylya/ 
• site.ru/stylya/metall.html 
• site.ru/stylya/derevo.html 
• site.ru/stylya/rotang.html 
• site.ru/stylya/plastic.html 
• site.ru/pyfiki/ 
• site.ru/divani/ 
• site.ru/divani/kozha.html 
• site.ru/divani/tkani.html 

Шаги

Обратите внимание на вашу внутреннюю структуру ссылок

Один из способов укрепить структуру вашего сайта — это использовать внутренние ссылки.

Внутренние ссылки — это очень важный аспект SEO по 5 причинам:

1. Это способ увеличить глубину просмотров и увеличить время на сайте
2. Это способ помочь поисковым системам находить больше страниц на вашем сайте.
3. Это способ передать «вес страницы» с сильных страниц на другие страницы и сделать их сильнее
4. Это способ дать поисковым системам подсказки о ценных страницах для веб-сайта
5. Это способ реализации структуры вашего сайта

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

При создании внутренних ссылок учитывайте следующие правила:

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

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

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

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

На практике

Вернёмся назад, где мы в последний раз остановились на нашем сайте конференции и посмотрим, как мы можем добавить немного CSS.

1. Внутри нашей папки styles-conference давайте создадим новую папку с именем assets. В ней мы будет хранить все ресурсы для нашего веб-сайта, такие как стили, изображения, видео и т. д. Для наших стилей пойдём дальше и добавим ещё одну папку stylesheets внутри папки assets.
2. Используя текстовый редактор создадим новый файл с именем main.css и сохраним его в папке stylesheets, которую мы только что создали.

3. Просматривая файл index.html в браузере мы можем видеть, что элементы <h1> и <p> уже содержат стиль по умолчанию. В частности, у них задан уникальный размер шрифта и пространство вокруг них. Используя сброс Эрика Мейера мы можем смягчить эти стили, что позволит каждому из них начинать с одинаковой базы. Для этого загляните на его сайт, скопируйте код и вставьте его в верхней части нашего файла main.css.

4. Наш файл main.css начинает принимать форму, так что подключим его к файлу index.html. Откройте index.html в текстовом редакторе и добавьте элемент <link> в <head>, сразу после элемента <title>.
5. Поскольку мы указываем на стили через элемент <link> добавьте атрибут rel со значением stylesheet.

6. Мы также включим ссылку на наш файл main.css используя атрибут href. Помните, наш файл main.css сохранён в папке stylesheets, который находится внутри папки assets. Таким образом, значение атрибута href, который является путём к нашему файлу main.css, должно быть assets/stylesheets/main.css.

Время для проверки нашей работы и просмотра, как уживаются вместе наши HTML и CSS. Открытие файла index.html (или обновление страницы, если она уже открыта) в браузере должно показать немного другой результат, чем раньше.

Демонстрация и исходный код

Ниже вы можете просмотреть сайт Styles Conference в его нынешнем состоянии, а также скачать исходный код сайта на данный момент.

Просмотр сайта Styles Conference или Скачать исходный код

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

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

Каждый блок со ссылкой и её описанием обрамлён тегом <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> являются блочными. Это необходимо для корректного применения к ним стилей в старых браузерах.

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

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

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

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

Резюме

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

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

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

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

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

Заключение

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

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

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

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

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

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

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

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