Файл: Основы программирования на языке HTML (О языке html).pdf

Тег <section> - определяет раздел документа (смысловой или «логический»), вроде блока новостей, глав текста, вкладок в диалоговом окне и т.п. Допускается вкладывать в элемент <section> другие элементы <section>.

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

Структурный раздел назвать сложнее. Он обычно связан с его положением на странице («шапка», «подвал», «левая колонка»). Если раздел при анализе подобным образом соответствует последнему описанию - значит он структурный и <section> для него не подходит.

Например:

<section>

Раздел «Карточка Студента» Скорее всего здесь будут такие данные как группа, направление обучения, форма обучения, фотография, телефон, пол и т.д.

</section>

<section>

Раздел «Редактирование профиля» Здесь студент сможет управлять своими личными данными

</section>

Тег <nav> предназначен для создания логического раздела с основной навигацией (сокращение от английского «navigation»). Обычно в <nav> включают ссылки на другие страницы или навигацию по текущей странице.

Пример:

<nav>

Обучение, Библиотека, Вебинары.

</nav>

Не каждая группа ссылок на странице должна быть обёрнута в <nav>. Например, небольшой блок со вспомогательными ссылками в подвале сайта. Такой блок внутри тега <footer> не нужно дополнительно оборачивать в тег <nav>. Также, блок <nav> помимо ссылок может включать абзацы с текстом, заголовки, списки и другое содержание.

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

Тег article определяет независимый раздел. Данный тег, в отличие от <section>, можно убрать из одного места и вставить в другое (на другую страницу сайта или на другой сайт), и смысл и значение содержимого тега при этом останется прежним. Примеры: статья, пост в блоге, сообщение на форуме и так далее.

<article>

Статья про HTML - теги на информационном ресурсе.

</article>

Тег <aside> определяет дополнительное содержание или блок, расположенное сбоку от основного контента и не связанное напрямую с ним. Такие блоки ещё часто называют «сайдбарами» или боковыми панелями.

<aside>

Здесь блок с рекламой на сайте.

</aside>

Тег абзаца <P>. Абзац — отрезок письменной речи, состоящий из одного или нескольких предложений, зачастую объединённых общей мыслью. Это привычное нам определение. Параграф в HTML совсем другой. Параграфы в HTML — это всего лишь неразрывная последовательность фразовых элементов, то есть чисто структурная, а не смысловая сущность. Параграфы существуют даже без тега <p>. Тег <p> позволяет явно выделять параграфы, группируя элементы с фразовым типом содержимого. Это могут быть не только блоки текста, а, например, изображения, ссылки или поля ввода.

Не все теги могут быть включены в <p>. Например, внутри абзаца не могут располагаться крупные структурные теги, заголовки, формы, списки, таблицы. Когда браузер встречает неподходящий тег внутри <p>, он «выбрасывает» этот тег из <p>.

Физический разрыв абзаца может находиться в любом месте исходного текста документа (для удобства его читаемости). Однако браузер разделяет абзацы только при наличии тега <P>. Если не разделить абзацы тегом <P>, то страница будет выглядеть как один большой абзац.

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

Тег <BR> извещает браузер о разрыве строки. Наилучший пример использования данного тега - форматированный адрес или любая другая последовательность строк, где браузер должен отображать их одну под другой. Например:

Виноградов Владислав<BR> ул. Чайковского 39А,<BR> 1 этаж, кабинет 110<BR>

Дополнительный атрибут позволит расширить возможности тега <BR>.

<BR CLEAR=left|right|all>

Данный параметр позволяет не просто выполнить перевод строки, а разместить следующую строку, начиная с чистой левой (left), правой (right) или обоих (all) границ окна браузера. Например, если рядом с текстом слева встречается рисунок, то можно использовать тег <BR> для смещения текста ниже рисунка:

<p> На факультете управления прошла неделя психологии

<BR CLEAR=left> <img src="https://synergy.ru/assets/upload/news/2019/%D0%9D%D0%B0%20%D1%81%D0%B0%D0%B9%D1%82_%D0%BF%D1%81%D0%B8%D1%85%D0%BE%D0%BB%D0%BE%D0%B3%D0%B8%D1%8F.jpg" align=baseline> фото участников</p>.

Неразрывная строка <NOBR>. Если требуется, чтобы браузер автоматически переносил строку (хотя некоторые браузеры могут по умолчанию не переносить строку), то используются теги <NOBR> и </NOBR>. При использовании браузер не будет переносить строку даже если она выходит за границы экрана; вместо этого браузер позволит горизонтально прокручивать окно. Например: <NOBR> Данная строка является самой длинной строкой документа, которая не допускает какого-либо разбиения, где бы то ни было </NOBR>

Если требуется разбиение любой строки на две, но в строго определённом месте, то используется тег <WBR> в данном месте. Например: <NOBR> Тестируем теги NOBR WBR на практике в разных браузерах: Internet explorer, Mozilla firefox, Google Chrome, <WBR> Microsoft Edge, Opera, и смотрим на полученный результат. Там, где был использован тег WBR должен быть переход на следующую строку. </NOBR>. На данном примере отчётливо видно, что не все функции на практике работают в разных браузерах одинаково. В нашем примере троица Internet explorer, Microsoft edge, Mozilla firefox не перенесла текст в месте с тегом “<WBR>”. Google Chrome и Opera осуществили перенос в обозначенном тегом месте. Однако при просмотре тестовых страниц на мониторе с большим разрешением, где данный текст полностью умещается на экране - ни один из браузеров не осуществил перенос текста в указанном месте кода.

1. Результат в браузерах IE, Edge, Firefox.

2. Результат в браузерах Chrome, Opera.

Код:

<!DOCTYPE html>

<!-- Created on 02.05.2019 21:18:32 -->

<html lang="en">

<head>

<meta charset=utf-8 />

<title>

Тестирование NOBR, WBR

</title>

</head>

<body>

<P>

<NOBR> Тестируем теги NOBR WBR на практике в разных браузерах: Internet explorer, Mozilla firefox, Google Chrome, Microsoft Edge, Opera, и смотрим<WBR> на полученный результат. Там, где был использован тег WBR должен быть переход на следующую строку. </NOBR>

</body>

</html>

Тег <pre> определяет заранее форматированный текст.

Такой текст отображается моноширинным шрифтом (обычно Courier) и со всеми пробелами между словами. По умолчанию, любое количество пробелов идущих в коде подряд, на веб-странице отображается как один. Элемент <pre> позволяет обойти эту особенность и выводить текст со специальным форматированием, как требуется разработчику. Внутри тега <pre> разрешается использовать любые элементы кроме следующих: <big>, <img>, <object>, <small>, <sub> и <sup>.

Цитата <BLOCKQUOTE>. Данный тег предназначен для обозначения в документе цитаты из другого источника. Текст, обозначенный тегом <BLOCKQUOTE>, отступает от левого края документа на 8 пробелов. Например: Нурсултан Назарбаев досрочно сложил полномочия президента Казахстана. Об этом он сообщил сегодня в обращении к народу Казахстана: <P> <BLOCKQUOTE> Дорогие казахстанцы, соотечественники, соратники, члены партии «Нұр Отан»! Сегодня я обращаюсь к вам, как это делал всегда. <BR> Я принял непростое для себя решение – сложить с себя полномочия Президента Республики Казахстан. </BLOCKQUOTE>

«При отображении браузером данный текст будет выглядеть так:

Тег <meta> предоставляет метаданные о HTML документе. Метаданные не отображаются на странице, однако могут обрабатываться программами и служат для хранения информации о документе и для взаимосвязи документа с другими документами и системами.

Обычно мета элементы используются для определения описания страницы, автора документа, поисковых ключевых слов, даты последнего изменения и т. п. Метаданные могут использоваться браузерами (как отображать контент или перезагружать страницу), поисковыми системами (описание, ключевые слова) и другими веб-сервисами. Для задействования метаданных используются теги <meta> с разными атрибутами и их значениями. Вот некоторые из атрибутов: charset, content, http-equiv, name и scheme.

С помощью атрибута charset указывается кодировка текста HTML-страницы:

<meta charset="название кодировки">

С помощью атрибута name и content можно указывать перечень ключевых слов для поисковых систем:

<meta name="keywords" content="вёрстка, HTML, CSS, курсовая">

А также краткое описание страницы для поисковиков:

<meta name="description" content="Процесс написания курсовой работы">

Лучше всегда указывать кодировку точно. Если этого не делать, браузер может неправильно угадать её, и вместо текста будут отображаться «иероглифы».

Самая распространённая современная кодировка — utf-8. Раньше часто использовали кодировку windows-1251, стандартную кодировку для кириллицы в Windows. Но сейчас это считается плохой практикой.

Теги <meta> должны всегда находиться внутри тега <head>.

Уровни заголовков <Hx>. В документах бывают заголовки разного уровня: Первый уровень заголовков (самый большой) обозначается цифрой 1, второй – 2, используются для разделения текста по структуре: на просто текст, заголовки частей текста, заголовки более высокого уровня, и т.д. Большинство браузеров поддерживает интерпретацию только шести уровней заголовков, определяя каждому из них собственный стиль. Заголовки выше шестого уровня не являются стандартом и могут не поддерживаться браузером. Заголовок самого верхнего уровня имеет число "1". Синтаксис заголовка уровня 1 следующий:

<H1> Заголовок первого уровня </H1>

Заголовки любого другого уровня могут быть обозначены следующим образом:

<Hx> Заголовок x-го уровня </Hx>, x - цифра от 1 до 6, определяющая уровень заголовка.

В пятой версии HTML разрешили использовать собственную, независимую от остального документа, иерархию заголовков в  тегах для создания смысловых разделов. Теперь на странице можно использовать несколько <section> или <article> со своими <h1>, <h2> и <h3>.

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

1.6 Атрибуты тегов

У многих тегов могут быть так называемые атрибуты. Атрибуты – это определенная дополнительная информация. Атрибуты определяются в открывающем теге, а их значения всегда заключаются в кавычки. Например, тег <img> позволяет добавить картинку в разметку. Сам по себе <img> не имеет смысла. Чтобы этот тег был действительно нам полезен, необходимо написать внутри него адрес, ведущий к картинке. Делается это с помощью атрибута src:

<img src="megacampus.jpg">

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

У тега может быть несколько атрибутов. В этом случае они пишутся через пробел:

<тег атрибут1="значение1" атрибут2="значение2">

Дополнительные параметры тега <P>:

<P ALIGN=left|center|right>, позволяют выравнивать абзац по левому краю, центру и правому краю соответственно.

Центрирование элементов документа. Вы можете центрировать все элементы документа в окне браузера. Для этого можно использовать тег <CENTER>.

Все элементы между тегами <CENTER> и </CENTER> будут находиться в центре окна. Тег переформатирования <PRE>. Тег переформатирования, <PRE>, позволяет представлять текст со специфическим форматированием на экране. Предварительно сформатированный текст заканчивается завершающим тегом </PRE>. Внутри предварительно сформатированного текста разрешается использовать:

а) перевод строки

б) символы табуляции (сдвиг на 8 символов вправо)

в) непропорциональный шрифт, устанавливаемый браузером.

Использование тегов, определяющих формат абзаца, таких как <Hx> или <ADDRESS>, будет игнорироваться браузером при помещении их между тегами <PRE> и </PRE>.

2. Списки в HTML.

Тегов для разметки списков в HTML несколько: для упорядоченных списков, неупорядоченных списков и списков описаний. Для неупорядоченного списка нет разницы на каком месте какой элемент списка.

Неупорядоченный список размечается тегом <ul> (сокращение от «unordered list»). Его используют, когда порядок элементов не важен. Например, для разметки перечня ссылок в меню, преимуществ товара, ингредиентов в составе продукта.