Отображаемое в браузере содержание страницы помещается в контейнер
Структура Web-страницы.Большая часть тэгов образует контейнер, состоящий из открывающего и закрывающего тэгов. Тэги можно набирать как заглавными, так и строчными буквами.
Web-страница помещается в контейнер и.состоит из двух частей: заголовка и отображаемого в браузере содержания.
Заголовок страницы помещается в контейнер . Заголовок содержит название страницы, которое помещается в контейнер и при просмотре отображается в верхней строке окна браузера.
Также в заголовок помещаются не отображаемые при просмотре мета-тэги, задающие кодировку страницы для ее правильного отображения в браузере, а также содержащие описание и ключевые слова страницы, которые в первую очередь просматривают роботы поисковых систем.
Отображаемое в браузере содержание страницы помещается в контейнер .
Работа 1. Основные тэги HTML
Создать Web-страницу, знакомящую с основными тэгами HTML.
- Запустить текстовый редактор Блокнот командой [Пуск - Программы - Стандартные - Блокнот].
- Ввести HTML-код, задающий структуру Web-страницы:
- Ввести команду [Файл - Сохранить]. Файлу Web-страницы присвоить имя ваша_фамилия.htm
- Запустить браузер и открыть созданный файл командой [Файл - Открыть]. В заголовке окна браузера высвечивается название Web-страницы Первое знакомство с тэгами HTML.
- Заголовки.Внести в текст страницы после в пустую строку тэги заголовков различных уровней (размеров).
Заголовки различных уровней:
Заголовок первого уровня
Заголовок второго уровня
Заголовок третьего уровня
Заголовок четвертого уровня
Заголовок пятого уровня
Заголовок шестого уровня
6. Внесение изменений и дополнений в Web-страницу. В процессе создания Web-страницы приходится добавлять новые тэги и просматривать получаемый результат.
7. Активизировать Блокнот с открытой в нем редактируемой Web-страницей. Внести в содержимое страницы необходимые изменения и сохранить новый вариант страницы, выполнив команду меню [Файл - Сохранить].
8. Активизировать браузер с открытым в нем предыдущим вариантом страницы. Щелкнуть по кнопке Обновить. В окне браузера отобразится обновленная Web-страница
Работа 2. Форматирование шрифта.
Внести в текст страницы тэги, определяющие начертание шрифта и горизонтальных разделительных линий. Отделить этот фрагмент от остального текста с помощью горизонтальных разделительных линий. Разделительная линия:
- Запустить текстовый редактор Блокнот командой [Пуск - Программы - Стандартные - Блокнот].
- Открыть файл ваша_фамилия.htm
- Внести в текст страницы тэги, определяющие начертание шрифта и горизонтальных разделительных линий. Отделить этот фрагмент от остального текста с помощью горизонтальных разделительных линий. Разделительная линия:
Жирный
Курсив
Подчеркнутый
Жирный подчеркнутый курсив
Равноширинный
Выделение
Усиленное выделение
4. Списки.Внести в текст страницы тэги, задающие списки нумерованные и ненумерованные, а также списки определений.
- ТЕРМИН 1
- Пояснение к термину 1
- ТЕРМИН 2
- Пояснение к термину 2
- ТЕРМИН 3
- Пояснение к термину 3
5. Внесение изменений и дополнений в Web-страницу. В процессе создания Web-страницы приходится добавлять новые тэги и просматривать получаемый результат.
6. Активизировать Блокнот с открытой в нем редактируемой Web-страницей. Внести в содержимое страницы необходимые изменения и сохранить новый вариант страницы, выполнив команду меню [Файл - Сохранить].
7. Активизировать браузер с открытым в нем предыдущим вариантом страницы. Щелкнуть по кнопке Обновить. В окне браузера отобразится обновленная Web-страница
В итоге в файле имя.htm у вас должно получиться
Заголовок первого уровня
Заголовок второго уровня
Заголовок третьего уровня
Заголовок четвертого уровня
Заголовок пятого уровня
Заголовок шестого уровня
Жирный
Курсив
Подчеркнутый
Жирный подчеркнутый курсив
Равноширинный
Выделение
Усиленное выделение
Работа 3. Цветовые схемы. Шрифты.
1. Запустить текстовый редактор Блокнот командой [Пуск - Программы - Стандартные - Блокнот].
2. Сздать файл index.htm
HTML> (Запусти файл в браузере)
Значение яркости цвета может меняться от минимальной 00 до максимальной FF. В таблице приведены примеры некоторых цветов:
Основную цветовую схему Web-страницы можно задать в тэге с помощью атрибутов:
При использовании текстуры, закрывающей собой всю площадь страницы, применение однотонного фона кажется излишним. Однако рисунки загружаются несколько медленнее, чем текст. Все это время посетители страницы будут видеть цвет фона, заданный атрибутом BGCOLOR. Поэтому для фона указывают цвет, совпадающий с основным тоном фонового рисунка.
Чтобы текст хорошо читался, цвета на странице подбирают контрастирующие по яркости: пастельный фон - темный текст, или темный фон - светлый текст. Нежелательны буквы белого цвета - они могут оказаться невидимыми при печати страницы на принтере.
Для оформления страницы можно использовать следующую цветовую схему: (после
§ 6.4. Разработка Web-сайтов с использованием языка разметки гипертекста HTML
Содержание урока
6.4.2. Структура Web-страницы
6.4.2. Структура Web-страницы
Тэги заключаются в угловые скобки и могут быть одиночными или парными. Парные тэги содержат открывающий и закрывающий тэги (такая пара тэгов называется контейнером). Закрывающий тэг содержит прямой слэш (/) перед обозначением. Тэги могут записываться как прописными, так и строчными буквами.
HTML-код страницы помещается внутрь контейнера . Без этих тэгов браузер не в состоянии определить формат документа и правильно его интерпретировать. Web-страница разделяется на две логические части: заголовок и содержание.
Заголовок Web-страницы заключается в контейнер и содержит название страницы и справочную информацию о странице (например, тип кодировки), которая используется браузером для ее правильного отображения.
Название страницы помещается в контейнер и при просмотре отображается в верхней строке окна браузера.
Отображаемое в браузере содержание страницы помещается в контейнер .
Созданную Web-страницу необходимо сохранить в виде файла с расширением htm. В качестве расширения файла Web-страницы можно также использовать html. Рекомендуется создать для размещения сайта специальную папку и сохранять все файлы разрабатываемого сайта в этой папке.
Необходимо различать имя файла index.htm, под которым Web-страница хранится в файловой системе, и имя Web-страницы, например «Компьютер», которое высвечивается в верхней строке окна браузера.
Имя Web-страницы должно соответствовать ее содержанию, так как оно в первую очередь анализируется поисковыми системами.
Контрольные вопросы
1. Какие тэги (контейнеры) должны присутствовать в HTML-документе обязательно? Какова логическая структура Web-страницы?
Cкачать материалы урока
Структура Web-страницы.Большая часть тэгов образует контейнер, состоящий из открывающего и закрывающего тэгов. Тэги можно набирать как заглавными, так и строчными буквами.
Web-страница помещается в контейнер и.состоит из двух частей: заголовка и отображаемого в браузере содержания.
Заголовок страницы помещается в контейнер . Заголовок содержит название страницы, которое помещается в контейнер и при просмотре отображается в верхней строке окна браузера.
Также в заголовок помещаются не отображаемые при просмотре мета-тэги, задающие кодировку страницы для ее правильного отображения в браузере, а также содержащие описание и ключевые слова страницы, которые в первую очередь просматривают роботы поисковых систем.
Отображаемое в браузере содержание страницы помещается в контейнер .
Практическое задание 1. «Основные тэги HTML». Создать Web-страницу, знакомящую с основными тэгами HTML.
| Cозданиe Web-страницы «Основные тэги HTML» |
1 | Запустить текстовый редактор Блокнот командой [Пуск - Программы - Стандартные - Блокнот]. |
2 | Ввести HTML-код, задающий структуру Web-страницы: |
3 | Ввести команду [Файл - Сохранить]. Файлу Web-страницы присвоить имя index.htm. |
4 | Запустить браузер и открыть созданный файл командой [Файл - Открыть]. В заголовке окна браузера высвечивается название Web-страницы Первое знакомство с тэгами HTML. |
Заголовки.Внести в текст страницы тэги заголовков различных уровней (размеров).
5 | Заголовки различных уровней: Заголовок первого уровняЗаголовок второго уровняЗаголовок третьего уровняЗаголовок четвертого уровняЗаголовок пятого уровняЗаголовок шестого уровня |
Форматирование шрифта. Внести в текст страницы тэги, определяющие начертание шрифта и горизонтальных разделительных линий. Отделить этот фрагмент от остального текста с помощью горизонтальных разделительных линий.
6 | Разделительная линия: Форматирование шрифта: Жирный Курсив Подчеркнутый Жирный подчеркнутый курсив Равноширинный Выделение: Выделение Усиленное выделение |
Списки.Внести в текст страницы тэги, задающие списки нумерованные и ненумерованные, а также списки определений.
Внесение изменений и дополнений в Web-страницу. В процессе создания Web-страницы приходится добавлять новые тэги и просматривать получаемый результат.
Вид Web-страницы задается тэгами, которые заключаются в угловые скобки. Тэги могут быть одиночными или парными, для которых обязательно наличие открывающего и закрывающего тегов (такая пара тэгов называется контейнером). Закрывающий тэг содержит прямой слэш (/) перед обозначением. Тэги могут записываться как прописными, так и строчными буквами.
НТМL-код страницы помещается внутрь контейнера . Без этих тэгов браузер не в состоянии определить формат документа и правильно его интерпретировать. Web-страница разделяется на две логические части: заголовок и содержание.
Заголовок Web-страницы заключается в контейнер и содержит название документа и справочную информацию о странице (например, тип кодировки), которая используется браузером для ее правильного отображения.
Название Web-страницы содержится в контейнере и отображается в строке заголовка браузера при просмотре страницы. Назовем нашу Web-страницу «Компьютер»:
Основное содержание страницы помещается в контейнер и может включать текст, таблицы, бегущие строки, ссылки на графические изображения и звуковые файлы и так далее. Поместим для начала на страницу текст «Все о компьютере»:
Все о компьютере
Созданную Web-страницу необходимо сохранить в виде файла. Принято сохранять титульный файл сайта, то есть тот, который первый загружается в браузер, под именем index.htm. В качестве расширения файла Web-страницы можно также использовать html.
Рекомендуется создать для размещения сайта специальную папку и сохранять все файлы разрабатываемого сайта в этой папке.
Необходимо различать имя файла index.htm, то есть имя, под которым Web-страница хранится в файловой системе, и собственно имя Web-страницы «Компьютер», которая высвечивается в верхней строке окна браузера и в первую очередь анализируется поисковыми системами. Имя Web-страницы должно в максимальной степени соответствовать ее содержанию.
2. В окне приложения блокнот ввести НТМL-код Web-страницы. Сохранить файл под именем index.htm в папке сайта. Загрузить этот файл в окно браузера для просмотра.
Все о компьютере
Форматирование текста. Пока страница выглядит не слишком привлекательно. Мелкий шрифт и черный текст на белом фоне почти не обращают на себя внимания. С помощью НТМL-тэгов можно задать различные параметры форматирования текста.
Размер шрифта для имеющихся в тексте заголовков задается тэгами от (самый крупный) до (самый мелкий). Заголовок страницы целесообразно выделить самым крупным шрифтом:
<Н1>Все о компыотереН1>
Некоторые тэги имеют атрибуты, которые являются именами свойств и могут принимать определенные значения. Так, заголовок по умолчанию выровнен по левому краю страницы, однако принято заголовок размещать по центру. Задать тип выравнивания заголовка для тэга заголовкапозволяет атрибут ALIGN, которому требуется присвоить определенное значение. Выравнивание по правой границе окна реализуется с помощью записи ALIGN ="right", а по центру — ALIGN ="center":
С помощью тэга FONT и его атрибутов можно задать параметры форматирования шрифта любого фрагмента текста. Атрибут FАСЕ позволяет задать гарнитуру шрифта (например, FАСЕ="Arial"), атрибут SIZE — размер шрифта (например, SIZE=4), атрибут СОLОR — цвет шрифта (например, СОLОR="blue").
Таким образом, задать синий цвет заголовка можно с помощью тэга FONT с атрибутом СОLОR:
Заголовок целесообразно отделить от остального содержания страницы горизонтальной линией с помощью одиночного тэга .
Разделение текста на абзацы производится с помощью контейнера . При просмотре в браузере абзацы отделяются друг от друга интервалами. Для каждого абзаца можно задать определенный тип выравнивания.
На титульной странице обычно размещается текст, кратко описывающий содержание сайта. Поместим на титульную страницу текст, разбитый на абзацы с различным выравниванием:
<Р ALIGN ="left">На этом сайте вы сможете получить различную информацию о компьютере, его программном обеспечении и ценах на компьютерные комплектующие.Р>
<Р ALIGN ="right">Терминологический словарь познакомит вас с компьютерными терминами, а также вы сможете заполнить анкету.Р>
Таким образом, если вставить в текст определенную последовательность тэгов, то мы получим Web-страницу, содержащую отцентрированный заголовок синего цвета, выводимый крупным шрифтом и отделенный горизонтальной линией от остального текста.
3. В окне приложения блокнот в контейнер вставить последовательность тэгов и просмотреть результат в браузере:
Все о компьютере
Вставка изображений. На Web-страницы обычно помещают изображения, чтобы сделать их визуально более привлекательными. На Web-страницах могут размещаться графические файлы трех форматов — GIF, JPG и PNG. Если рисунок сохранен в другом формате, то его необходимо предварительно преобразовать в один из вышеуказанных форматов с помощью графического редактора. Для этих целей можно использовать редактор Photo Editor, который входит в пакет Microsoft Office.
На титульной странице создаваемого сайта уместно разместить изображение того объекта, которому посвящен сайт (в нашем случае — компьютера). Многочисленные фотографии компьютеров можно найти, например, на сайтах производителей и продавцов компьютерной техники.
Для вставки изображения используется тэг с атрибутом SRC, который указывает на место хранения файла на локальном компьютере или в Интернете. Если графический файл находится на локальном компьютере в том же каталоге, что и файл Web-страницы, то в качестве значения атрибута SRC достаточно указать только имя файла:
Если файл находится в другом каталоге на данном локальном компьютере, то значением атрибута должно быть полное имя файла. Например:
Если файл находится на удаленном сервере в Интернете, то должен быть указан URL-адрес этого файла. Например:
Иллюстрации на Web-страницах стали неотъемлемым элементом дизайна. Однако пользователи иногда в целях экономии времени отключают в браузере загрузку графических изображений и читают только тексты. Поэтому, чтобы не терялся смысл и функциональность страницы, вместо рисунка должен выводиться поясняющий текст.
Поясняющий текст выводится с помощью атрибута ALT, значением которого является текст, поясняющий, что должен был бы увидеть пользователь на рисунке:
Расположить рисунок относительно текста различными способами позволяет атрибут ALIGN тэга , который может принимать пять различных значений: ТОР (верх), MIDDLE (середина), ВОТТОМ (низ), LEFT (слева) и RIGHT (справа).
Для того чтобы рисунок располагался по правому краю текста, тэг вставки изображения должен принять следующий вид:
5. В окне приложения Блокнот в контейнер вставить перед абзацами текста тэг вставки изображения, просмотреть результат в браузере.
Типовая структура web-страницы, понятие DOM-дерева и работа браузера с ним. Содержание web-документа: доктайп, блок header, блок body. Классификация элементов HTML-сайта по задачам и областям применения.
1. Структура веб-страницы и DOM-модель
2. Основные понятия DOM
3. Теги верхнего уровня: , ,
4. Заголовок. Тэги.
- Open Graph Protocol
- Resource Description Framework
- RSS
- Работа с текстом
- Ссылки
- Рисунки и мультимедиа
- Списки
- Таблицы
- Формы и поля ввода
- Фреймы
- Стили и семантика
- Программирование
- Соединения разных документов ( HTML , CSS и скриптов) в единую структуру;
- Генерации тегов языками программирования и их фреймворками ( Python и Django , JavaScript и Angular );
- Обращения к данным из некоторой базы (реляционной или NoSQL );
- Воздействия Javascript и AJAX-технологии (позволяет динамически подгружать элементы сайта);
- Работы браузера по построению дерева документа.
DOM – модель документа как объекта, создаваемая веб-браузером в памяти вашего устройства на основании того HTML-кода , который был получен от сервера.
Другими словами, непосредственно сам документ в виде HTML браузер не показывают в исходном виде. Сначала идет запрос к серверу, а полученный ответ разбирается для построения дерева страницы или DOM-дерева . Схема такова:
1. Сервер создает HTML-код страницы или отдает его (если это простой статический сайт);
2. Браузер получает код и разбирает на элементы дерева;
3. При необходимости подключается JavaScript , если он используется, чтобы изменить поведение тегов и их содержимого в зависимости от воздействий пользователя;
4. DOM-дерево отображается во вкладке браузера в том виде, который задуман разработчиками.
Подытожим
HTML-код , который пишут программисты – это всего лишь текстовый файл определенного формата, а DOM – результат действий браузера, который создает объекты при парсинге текстовых файлов.
Благодаря W3-консорциуму выработан единый стандарт построения и разбора содержимого веб-страницы. До этого разные браузеры действовали по-своему, что создавало массу неудобств разработчикам. Ознакомиться с актуальным DOM-стандартом можно на официальном сайте.
- Дерево (веб-страница может быть представлена как иерархическое перевернутое дерево, начинающееся с главного элемента и расширяющееся к низу. У каждого объекта дерева есть родитель, который может быть пустым, т.е. null , и дети, если он находится не в самом низу);
- Наследник (любой дочерний элемент узла дерева. Наследник может быть инклюзивным, т.е. не прямым. Пример: у тега есть дочерний элемент , внутри которого содержится элемент , тогда тег это не прямой наследник );
- Предок (если у объекта DOM-дерева есть потомки, то для них он является предком. Здесь также возможна инклюзивность. Из примера выше у тега есть прямой предок – тег , а также инклюзивный родитель – тег );
- Братья / сестры (в стандарте используется термин sibling , что с английского переводится как родной брат или сестра. Так объект подразумевает наличие у него «соседей», стоящих на там же уровне дерева и единого предка, не являющегося пустым);
- События (к объектам дерева можно применять разные события при помощи JavaScript . Они могут срабатывать на действия пользователя или сетевую активность. Так, при наведении мыши, клике, нажатии клавиши или обрыве связи возможно разное поведение всего сайта или его элементов);
- Узел (все элементы DOM-дерева являются узлами, нодами, nodes . Их можно создавать, изменять, вызывать свойства и методы с помощью JS ).
- Объявления стандартаHTML (в нашем случае доктайп свидетельствует об использовании HTML5 );
- Тега(все заключенное между ним будет воспринято как язык разметки);
- Тега заголовков ( , включающего , внутри которого текст);
- Тела страницы, отображаемого пользователю (обозначен тегом ). Здесь мы видим только один HTML-элемент – тег с некоторым текстовым содержимым.
Означенное выше наследование элементов представляется браузером как дерево.
- Узел является родителем для и , а также инклюзивным родителем для, например, и текста Изучаем HTML ;
- Узел имеет наследника, т.е. текст HTML , а также прямого родителя в виде ;
- Узлы и относятся к классу родственников (братья или сестры), так как расположены на одном уровне DOM-дерева и имеют общего предка .
Конечно так делать не нужно, ведь если неправильно оформлять код страниц, то и называть себя веб-разработчиком не стоит. Тем более разные браузеры могут повести себя по-разному.
Помимо информации, демонстрируемой непосредственно посетителю сайта, на нем обязана присутствовать и служебная. Она включает объявление доктайпа, заголовка, перечисление метасведений, ссылок на CSS - и JS-файлы и т.д. Ниже подробнее посмотрим на эту группу тегов и инструментов.
3.1. Переходный / строгий
Как говорилось ранее, доктайп задает стандарт, в котором создана веб-страница, чтобы браузерам было проще распарсить содержимое и построить DOM-дерево . На текущее время можно встретить 3 типа:
1. HTML5:
2. HTML4: < !DOCTYPE . "http://www.w3.org/TR/html4/loose.dtd">
3. XHTML: < !DOCTYPE . "http://www.w3.org/TR/. /xhtml11.dtd">
Самым популярным и функциональным является первый вид ( HTML5 ), но встречаются и остальные.
3.2. Корневые элементы
Помимо объявления стандарта документа, типичная веб-страница включает еще 3 тега:
1. Тэг
Корневой тег, подразумевающий содержимое в качестве HTML-кода . Начинает любой веб-документ и заканчивает его. Может иметь глобальные атрибуты. Также включает в себя при необходимости уникальное свойство xmlns , если ваша страница обязана следовать стандарту XHTML . Из глобальных атрибутов рекомендуется указывать lang , т.е. язык, который применяется для текста сайта.
В примере мы задали в качестве языка документа русский и xml пространство имен. Валидатор не будет ругаться, если вы опустите xmlns свойство, так как оно по умолчанию включается в XHTML .
2. Тэг
Блок кода, в который оборачивается заголовочная часть веб-страниц. Это контейнер с метаданными, т.е. информацией о самом документе, которые напрямую не отображаются в окне браузера. Особыми атрибутами не обладает, но может использовать глобальные при необходимости. Внутри обязательно наличие тега . Может также включать элементы: , , , , , .
3. Тэг
Основная часть кода HTML-страницы , так называемое тело документа. Все оставшиеся теги будут присутствовать здесь. Естественно, в документе может встречаться только один раз. Допустимо применение глобальных и событийных свойств.
3.3. Комментарии
Особый тип данных, который встречается как в заголовочной части документа, так и в его теле. Код никак не обрабатывается браузером напрямую, но достаточно важен для разработчиков, так как позволяет включать пояснения, комментарии, уточнения.
Наличие комментариев в коде – хорошая практика, свидетельствующая о профессионализме верстальщика и его уважении коллег.
Итак, заголовочная часть HTML-документа , оборачиваемая тегом , хоть и не видна пользователю, имеет важное значение. Она существенно расширяет возможности разработчиков и позволяет включать информацию для браузера для верной обработки кода. Охарактеризуем эти элементы.
1. Тэг
Необходим для отображения заголовка страницы. Его видно во вкладке окна. Контент – только текст. Содержимое заголовка важно для SEO , оптимизации поиска роботами вашего сайта. Для каждой страницы возможен только в единственном экземпляре.
Может включать глобальные атрибуты. Должен отражать суть страницы (используется при показе в результатах поиска Яндексом, Google'ом и др.) и не быть очень длинным (так как не поместится во вкладке).
2. Тэг
Применяется для указания информации о каскадных таблицах стилей. Когда этих стилей на сайте не так много, не обязательно их размещать в отдельном файле. Достаточно обернуть в этот тег.
Содержимое страницы модифицируется: все заголовки станут коричневыми, а любой другой текст тела документа будет зеленым. Пока не будем углубляться в CSS свойства, так как мы их еще не проходили.
При необходимости включает атрибуты: media (указывает на тип устройства, для которого предназначаются эти свойства) и type (со значением text/css ).
3. Тэг
Данный тег является одиночным и необходим для указания основного адреса сайта. Все относительные ссылки внутри портала будут отталкиваться от этого корня.
4. Тэг
Является одиночным элементом, но может присутствовать во многих экземплярах в документе. Определяет отношения между текущим файлом и внешними ресурсами. Необходим для указания ссылок на CSS-документы , шрифты, фавикон.
5. Тэг
Также одиночный тег, используемый для указания метаинформации о странице. Эти сведения используются браузером, поисковыми машинами или другими сервисами. Зачастую игнорируется начинающими разработчиками, но в руках умелых специалистов творит чудеса.
6. Тэг
Данный тег применим не только в заголовочной части страницы, но и в любом другом месте (в зависимости от задачи). Содержит JavaScript код или ссылки на js-скрипты .
Когда нужно, чтобы скрипт сработал с самого начала загрузки сайта, то его включают в заголовочную часть. Если же требуется его функционал после полной загрузки страницы, обычно помещается в самом конце тега (есть и другие способы, но о них в теме по JS ).
Первый тег говорит о том, что сайт использует фреймворк jQuery , а во втором случае мы обернули им просто код на языке JavaScript , который выводит в консоли инструментов разработчика в браузере обозначенный текст.
7. Тэг
Не всегда браузеры поддерживают JavaScript (особенно старые версии), либо эта опция отключена. Чтобы не ломать функционал сайта заботятся и о таких посетителях: их либо предупреждают об ограниченных возможностях, либо просят обновить программу, либо убеждают включить опцию поддержки JS .
HTML постоянно развивается и расширяется. Появляются новые потребности и технологии, которые могут использоваться разработчиками для совершенствования работы сайта в разных условиях и средах. Выделяют несколько таких возможностей, о которых расскажем ниже.
5.1. Open Graph протокол
Социальные сети – неотъемлемая часть нынешнего Интернета. Если их игнорировать, то бизнес теряет значительную аудиторию.
Технология Open Graph позволяет внедрять содержимое страницы в ленту социальных сетей. Изначально разработана Facebook, но сейчас поддерживается и активно используется и другими соцсетями.
Здесь мы указали название сериала, тип, ссылку на него, адрес постера и описание. Данный контент можно без проблем разместить в социальной сети, и он отобразится так, как мы задумывали. Ознакомиться подробнее с работой протокола Open Graph можно на официальном сайте.
5.2. Resource Description Framework
Технология RDFa ( Структура описания ресурсов в атрибутах ) позволяет размещать дополнительные метаданные на странице, не обязательно только в заголовочной части. Это рекомендация W3-Консорциума , задуманная для более тонкого указания поисковым машинам идей web-разработчиков.
Ведь важно не просто удовлетворить посетителя ресурса, но и сервис, который находит наш сайт. И чем больше сведений о своем портале мы предоставим (с указанием типов данных, источников, контактной информации, дат), тем релевантней будет аудитория.
В дополнение к тегам может применяться RDFa .
Это минимально возможная структура с использованием RDFa . Мы подключили словарь, чем превратили свойства в термины, а также указали атрибут property="url" для ссылки.
5.3. RSS каналы
Не обязательно посещать десятки сайтов ежедневно, чтобы получить сводку об их обновлениях. RSS ( Really Simple Syndication, «Действительно простое агрегирование» ) – один из способов.
У нас появляется возможность предоставлять свежие данные ресурса и передавать их на тысячи других. RSS использует формат xml , а при помощи браузера или специальных программ эти сводки можно читать.
Сегодня RSS уже не столь популярен (превалируют социальные сети, пуш-уведомления), но вполне актуален.
Полезное для пользователя содержимое web-ресурса располагается внутри тега . Большая часть элементов – его потомки. Они выполняют разные функции: работают с изображениями или видео, форматируют контент, представляют ссылки, изображают таблицы, отрисовывают формы.
6.1. Работа с текстом
Так как огромная часть наполнения сайта – текст, то для работы с ним предусмотрено солидное количество тегов. Они могут носить как стилистический, так и семантический контекст.
1. Тэг
Как следует из именования, внутри тега приводится контактная информация. По умолчанию текст внутри тега выделяется курсивом.
2. Тэг
Делает текст жирным, но не несет семантической нагрузки. Используется для визуального эффекта. Тег является строчным, поэтому текст внутри не переносится на новую строку.
3. Тэг
Для обозначения коротких цитат.
Тут мы применили 2 тега: (абзац, блочный) и (строчный). Текст обрамляется кавычками.
4. Тэг
Используется для выделения аббревиатуры. Можно применять совместно с элементом , когда требуется сообщить, что термин будет расшифрован или ему будет дано определение.
6.2. Ссылки
Понятие HTML включает так называемый гипертекст. Если текст ссылается на другую часть документа или иной ресурс, то его обозначают именно таким термином.
Для обозначения ссылок используется ряд тегов.
- Не посещённая ссылка выделяется синим цветом и подчеркиванием
- Посещенная ссылка – голубого цвета и подчеркнута
- Активная ссылка – красная с подчеркиванием
2. Тэг
Этот тег сам по себе не является ссылкой, но служит оберткой для главного меню сайта (элементы которого уже являются ссылками). Обычно применяется в единственном экземпляре на странице. Относится к блочным тегам.
Читайте также: