Кафедра ИППО

Разработка клиент-серверных приложений

Лекция 3

Для курса 3 групп потока ИКБО-16

По направлению подготовки 09.03.04

Программная инженерия

Москва, 2018
 Кафедра ИППО

Содержание:

1 Историческая справка……………………………………3
2 Основные понятия и термины …………………………..7
3 Инструментарий…………………………………………14
4 Структура документа……………………………………21
 Лекция 3. HTML. Основные понятия

1 Историческая справка
Язык HTML был разработан британским учёным
Тимом Бернерсом-Ли приблизительно в 1986-1991
годах в стенах ЦЕРНа в Женеве в Швейцарии. HTML
создавался как язык для обмена научной и технической
документацией, пригодный для использования людьми,
не являющимися специалистами в области вёрстки.
HTML успешно справлялся с проблемой сложности SGML
(стандартный обобщённый язык разметки) путём определения небольшого
набора структурных и семантических элементов — дескрипторов.

3
 Лекция 3. HTML. Основные понятия

Дескрипторы также часто называют «тегами». С помощью HTML

можно легко создать относительно простой, но красиво оформленный
документ.
Помимо упрощения структуры документа, в HTML внесена
поддержка гипертекста. Мультимедийные возможности были добавлены
позже.
Изначально язык HTML был задуман и создан как средство
структурирования и форматирования документов без их привязки к средствам
воспроизведения (отображения).

4
 Лекция 3. HTML. Основные понятия

В идеале, текст с разметкой HTML должен был без стилистических и

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

5
 Лекция 3. HTML. Основные понятия

С течением времени основная идея платформонезависимости языка

HTML была принесена в жертву современным потребностям в
мультимедийном и графическом оформлении.
Во всемирной паутине HTML-страницы, как правило, передаются
браузерам от сервера по протоколам HTTP или HTTPS, в виде простого текста
или с использованием шифрования.

6
 Лекция 3. HTML. Основные понятия

2 Основные понятия и термины

HTML (от англ. HyperText Markup Language — «язык гипертекстовой
разметки») — стандартизированный язык разметки документов во Всемирной
паутине.
Большинство веб-страниц содержат описание разметки на языке HTML
(или XHTML).
Язык HTML интерпретируется браузерами; полученный в результате
интерпретации форматированный текст отображается на экране монитора
компьютера или мобильного устройства.

7
 Лекция 3. HTML. Основные понятия

HTML-файл или HTML-страница — это обычный текстовый

документ, может быть создан как в обычном текстовом редакторе (Блокнот),
так и в специализированном, с подсветкой кода (Notepad++, Visual Studio
Code и т.п.). HTML-документ имеет расширение .htm или .html.
HTML-документ состоит из дерева HTML-элементов и текста.
Каждый элемент обозначается в исходном документе начальным
(открывающим) и конечным (закрывающим) тегом (за редким исключением).
Элемент — это конструкция языка HTML, или контейнер, содержащий
данные. Web-страница представляет собой набор элементов.

8
 Лекция 3. HTML. Основные понятия

Тег — стартовый и конечный маркеры элемента. Теги определяют

границы действия элементов и отделяют элементы друг от друга. В тексте
HTML-документа теги заключаются в угловые скобки, а конечный тег всегда
снабжается косой чертой: <имя тега>…</имя тега>.
Контент — содержимое тега, находящееся между начальным и
закрывающим тегами.
Одиночные теги не могут хранить в себе содержимого напрямую, оно
прописывается как значение атрибута, например, тег <input

type="button" value="Кнопка"> создаст кнопку с текстом Кнопка

внутри.

9
 Лекция 3. HTML. Основные понятия

Теги могут вкладываться друг в друга, например,

<p><i>Текст</i></p>. При вложении следует соблюдать порядок их

закрытия (принцип «матрёшки»), например, следующая запись будет

неверной: <p><i>Текст</p></i>.
HTML-элементы могут иметь атрибуты (глобальные, применяемые
для всех HTML-элементов, и собственные). Атрибуты прописываются в
открывающем теге элемента и содержат имя и значение, указываемые в
формате: имя атрибута="значение".
Атрибуты позволяют изменять свойства и поведение элемента, для
которого они заданы.
Атрибут — параметр или свойство документа.

10
 Лекция 3. HTML. Основные понятия

Гиперссылка — фрагмент текста, который является указателем на

другой файл или объект. Гиперссылки необходимы для того, чтобы
обеспечить переход от одного документа к другому или из одной части
документа к другой.
Фрейм — область гипертекстового документа со своими полосами
прокрутки.
Код — аналог понятия «текст программы».
Код HTML — гипертекстовый документ в своем изначальном виде,
когда видны все атрибуты и элементы.

11
 Лекция 3. HTML. Основные понятия

WWW (World Wide Web) — «всемирная паутина», распределенная

система доступа к гипертекстовым документам, существующая в Internet.
HTML является основным языком для создания документов в WWW.
Web-cтраница — документ (файл), подготовленный в формате
гипертекста и размещенный в WWW.
Браузер — программа для просмотра Web-страниц.
Сайт — набор Web-страниц, принадлежащих одному владельцу.
URL — адрес некоторого объекта в Internet или файла на локальном
диске.

12
 Лекция 3. HTML. Основные понятия

Браузер просматривает (интерпретирует) HTML-документ,

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

13
 Лекция 3. HTML. Основные понятия

3 Инструментарий
Для эффективной работы не обойтись без необходимых и привычных
инструментов, в том числе и при написании кода HTML. Поэтому для
начальной разработки веб-страниц или даже небольшого сайта понадобятся
следующие программы:
текстовый редактор;
браузер для просмотра результатов;

валидатор (программа для проверки синтаксиса HTML и выявления

ошибок в коде);
графический редактор;

справочник по тегам HTML.

14
 Лекция 3. HTML. Основные понятия

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

параметров разными цветами). Это облегчает поиск нужного элемента,

ускоряет работу разработчика и снижает возникновение ошибок;
работа с вкладками. Сайт представляет собой набор файлов, которые

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

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

15
 Лекция 3. HTML. Основные понятия

Вот некоторые подобные редакторы:

PSPad
http://www.pspad.com/ru/download.php
HtmlReader
http://manticora.ru/download.htm
Notepad++
http://notepad-plus.sourceforge.net/ru/site.htm
EditPlus
http://www.editplus.com

16
 Лекция 3. HTML. Основные понятия

Браузер
Браузер — это программа, предназначенная для просмотра веб-
страниц. На первых порах подойдет любой браузер, но с повышением опыта
и знаний потребуется работать со многими браузерами, чтобы проверять
правильность отображения сайта в них.
Каждый браузер имеет свои уникальные особенности, поэтому для
проверки универсальности кода требуется просматривать и корректировать
код с их учетом.
На сегодняшний день в России наибольшей популярностью
пользуются браузеры: Google Chrome, Firefox Quantum, Яндекс-браузер,
Opera.

17
 Лекция 3. HTML. Основные понятия

Валидатор
Валидация HTML-документа предназначена для выявления ошибок в
синтаксисе веб-страницы и расхождений со спецификацией HTML. Соответственно,
программа или система для такой проверки называется валидатором.
Если есть доступ в Интернет, то следует зайти по адресу http://validator.w3.org
и ввести путь к проверяемому документу или сайту в специальной форме. После
проверки будут показаны возможные ошибки или появится надпись, что документ
прошел валидацию успешно.
Для проверки локального HTML-файла или при отсутствии подключения к
Интернету, предназначена программа Tidy. Некоторые редакторы, например, PSPad,
уже содержат встроенный Tidy, и валидацию документа можно провести без
дополнительных средств.

18
 Лекция 3. HTML. Основные понятия

Графический редактор
Графический редактор необходим для обработки изображений и их
подготовки для публикации на веб-странице. Самой популярной программой
такого рода является Photoshop, ставший стандартом для обработки
фотографий и создания графических изображений для сайтов. Но в
большинстве случаев мощь Photoshop избыточна, и лучше воспользоваться
чем-нибудь более простым и проворным.
В частности, программа Paint.Net позволяет сделать все необходимые
манипуляции с изображениями, вдобавок бесплатна для использования.
Скачать Paint.Net можно здесь:
http://www.getpaint.net/download.html

19
 Лекция 3. HTML. Основные понятия

Справочник по тегам HTML

Запоминать все теги и их параметры наизусть на первых порах сложно,
поэтому требуется периодически заглядывать в руководство, чтобы уточнить
тот или иной вопрос. Вообще, хороший справочник нужен всем, независимо
от уровня подготовки.
Справочники в Интернете:
http://www.w3.org/TR/html4/index/elements.html
http://htmlbook.ru/html
https://html5book.ru/examples/html-tags.html

20
 Лекция 3. HTML. Основные понятия

4 Структура документа
Язык HTML следует правилам, которые содержатся в файле объявления
типа документа (Document Type Definition, или DTD).
DTD представляет собой XML-документ, определяющий, какие теги,
атрибуты и их значения действительны для конкретного типа HTML. Для
каждой версии HTML есть свой DTD.
Элемент <!DOCTYPE> отвечает за корректное отображение веб-
страницы браузером. <!DOCTYPE> определяет не только версию HTML, но и
соответствующий DTD-файл в Интернете.

21
 Лекция 3. HTML. Основные понятия

Таким образом:
Элемент <!DOCTYPE> предназначен для указания типа текущего
документа — DTD (Document Type Definition);
Элемент <!DOCTYPE> необходим, чтобы браузер понимал, как

следует интерпретировать текущий html-документ, поскольку HTML

существует в нескольких версиях;
<!DOCTYPE> отвечает за корректное отображение html-документа
браузером и должен находиться в первой строке разметки.

22
 Лекция 3. HTML. Основные понятия

<!DOCTYPE html>
<html>
<head>
Техническая информация о документе
<meta charset="UTF-8"> <!-- Кодировка символов
документа -->
<title>Название документа</title>
</head>

<body>
Тело документа
</body>
</html>

Рисунок 1 – Общая структура html-документа

23
 Лекция 3. HTML. Основные понятия

Объектная модель документа

Элементы, находящиеся внутри тега <html>, образуют дерево веб-
документа, так называемую объектную модель документа, DOM
(Document object model). При этом элемент <html> является корневым
элементом.

Рисунок 2 – Дерево веб-документа 24

 Лекция 3. HTML. Основные понятия

Отношения между множественными вложенными элементами

Чтобы разобраться во взаимодействии элементов веб-страницы,
необходимо рассмотреть так называемые «родственные отношения» между
элементами. Отношения между множественными вложенными элементами
подразделяются на родительские, дочерние и сестринские.
Предок — элемент, который заключает в себе другие элементы. На
рисунке 2 предком для всех элементов является <html>. В то же время
элемент <body> является предком для всех содержащихся в нем тегов: <h1>,
<p>, <span>, <nav> и т.д.

Потомок — элемент, расположенный внутри одного или более типов

элементов. Например, <body> является потомком <html> , а элемент <p>
является потомком одновременно для <body> и <html>.

25
 Лекция 3. HTML. Основные понятия

Родительский элемент — элемент, связанный с другими элементами

более низкого уровня, и находящийся на дереве выше их. На рисунке 2
<html> является родительским только для <head> и <body>. Тег <p>
является родительским только для <span>.
Дочерний элемент — элемент, непосредственно подчиненный другому
элементу более высокого уровня. На рисунке 2 только элементы <h1>, <h2>,
<p>, <span>, <nav> являются дочерними по отношению к <body>.

Сестринский элемент — элемент, имеющий общий родительский

элемент с рассматриваемым, так называемые элементы одного уровня. На

рисунке 2 <head> и <body> - элементы одного уровня, так же как и

элементы <h1>, <h2> и <p> являются между собой сестринскими.

26