Конспект лекции по дисциплине «Разработка Web-страниц», pdf

Загружаем конспект в формате pdf

Это займет всего пару минут! А пока ты можешь прочитать работу в формате Word 👇

Конспект лекции по дисциплине «Разработка Web-страниц», Word формат

2. Краткий курс лекций дисциплины Практикум по разработке Web-страниц Проработайте курс лекций за компьютером, разбирая каждую тему и приемы работы в офисных приложениях Содержание дисциплины ЯЗЫК ГИПЕРТЕКСТОВОЙ РАЗМЕТКИ ДОКУМЕНТА HTML.......................2 Лекция 1.Фреймы ...................................................................................................2 Вопросы для самоконтроля ...................................................................................6 Лекция 2. Формы ....................................................................................................8 Вопросы для самоконтроля ................................................................................. 16 Лекция 3. Теги

и . Группировка элементов страницы ................ 18 Вопросы для самоконтроля ................................................................................. 21 КАСКАДНЫЕ ТАБЛИЦЫ СТИЛЕЙ. ОСНОВЫ CSS. ......................................22 Лекция 1. Форматирование блоков .....................................................................22 Вопросы для самоконтроля ................................................................................. 25 Лекция 2. Управление обтеканием. Атрибуты float и clear ............................... 26 Вопросы для самоконтроля ................................................................................. 27 Лекция 3. Позиционирование объектов Web-страницы ....................................28 Вопросы для самоконтроля ................................................................................. 31 Лекция 4. Позиционирование блока ...................................................................32 Вопросы для самоконтроля ................................................................................. 37 Лекция 5. Колонки одной высоты .......................................................................38 Вопросы для самоконтроля ................................................................................. 45 1 Язык гипертекстовой разметки документа HTML Лекция1.Фреймы Фреймы - это области, которые создаются в одновременного отображения нескольких документов. окне браузера для Области применения фреймов  создание неподвижной или прокручиваемой навигационной панели управления (Такая реализация фреймов удобна тем, что она позволяет посетителю перемещаться по сайту и независимо от его месторасположения постоянно иметь перед глазами панель управления с перечнем всех или основных разделов сайта).  одновременное отображение информации в нескольких местах Webстраницы (используется, когда бывает необходимо видеть одновременно несколько текстовых или иных информационных блоков, расположенных в разных окнах. Это может быть структура книги (главы, разделы, подразделы и соответствующее им содержание), перечень товаров и их разнообразные характеристики и др.).  постоянное визуальное присутствие определенного текстового, графического или иного объекта(Иногда веб-разработчики ставят перед собой задачу размещения конкретного объекта на странице таким образом, чтобы он был хорошо виден посетителям данного Web-сайта независимо от их действий. В качестве таких объектов могут выступать фирменные логотипы, эмблемы, фотографии, рекламные баннеры, навигационные меню, надписи, рубрикаторы и многое другое). Структура HTML-документа, содержащего фреймы Структура HTML-документа с фреймами отличается от обычной структуры. Заголовокстраницы <p>ВашWeb-браузернеотображаетфреймы</p> Каки в обычном HTML-документе, весь код расположен между тегами и , а в разделе headрасполагаются заголовки. Основное отличие документа с фреймами от обычного HTML-документа заключается в том, что у документа с фреймами отсутствует раздел body ,отсутствует содержимое 2 страницы, а присутствуют только теги, служащие для определения фреймовой структуры. Иными словами, документ с фреймами не может содержать раздела bodyи наоборот, обычный HTML-документ не может содержать фреймовую структуру. Кроме того, содержать фреймовую структуру может только документ в формате Frameset. Для объявления формата используется заголовок: Вместо тега применяется парный тег , описывающий фреймовую структуру. Каждое отдельное окно описывается тегом . Если Web-браузер не поддерживает фреймы, то в окне будет отображен текст, расположенный между тегами и . Описание фреймовой структуры Парный тег описывает фреймовую структуру. Внутри тегов и могут содержаться только теги или другой набор фреймов, описанный тегами и . Тегимеетследующие параметры:  rowsописывает разбиение на строки:  cols описывает разбиение на столбцы: В качестве значений параметров rowsи cols указываются размеры фреймов. Должно быть указано как минимум два значения. Все значения в списке разделяются запятыми. Размеры могут быть указаны в абсолютных единицах (в пикселах) или в процентах: cols=”20%, 80%” Кроме того, в качестве ширины или высоты может быть указана звездочка (*), которая означает, что под фрейм нужно отвести все оставшееся пространство: Rows=”100, *” Описание отдельных областей Тег описывает одиночный фрейм и не имеет закрывающего тега. Он располагается между тегами и и имеет следующие параметры:  src определяет URL-адрес документа, который должен быть загружен во фрейм. Может быть указан абсолютный или относительный URL-адрес:  nameзадает уникальное имя фрейма: 3  scrolling запрещает или разрешает отображение полос прокрутки во фрейме. Этот параметр может принимать следующие значения: o auto – полосы отображаются, только если содержимое не помещается во фрейме (значение по умолчанию): o yes – полосы отображаются в любом случае: o no – полосы не отображаются в любом случае:  marginwidth задает расстояние в пикселях между границей фрейма и его содержимым по горизонтали:  marginheight указывает расстояние в пикселях между границей фрейма и его содержимым по вертикали:  frameborder включает или отключает показ границы между фреймами. Может принимать одно из двух значений: o 1 –граница отображается (по умолчанию): o 0- граница не отображается:  noresize отключает возможность изменения размеров фрейма пользователем. По умолчанию любой пользователь может изменить размер фрейма путем перемещения границы. Добавляется этот параметр так: Тег Если Web-браузер не поддерживает фреймы, то в окне будет отображен текст, расположенный между тегами <frameset> и </frameset>. В противном случае содержимое этих тегов будет проигнорировано. Например: <noframes> <p>ВашWeb-браузернеотображаетфреймы</p> Разделение окна Web-браузера на несколько областей Обычно заголовок и панель навигации для всех страниц сайта содержат одну и ту же информацию, а изменяется только основное содержание страниц. С помощью фреймовой структуры можно заголовок поместить в одно окно, панель навигации – во второе, а основное содержание страницы – в третье. Это позволит, оставляя в неизменном состоянии два первых окна, изменять содержание третьего. Внимание! Все создаваемые Вами файлы фреймовой структуры должны находиться в одной папке (или должен быть прописан к ним путь,если это не 4 так). Создадим Web-страницу с такой структурой. Для этого создадим 5 файлов:  header.html – заголовок Web-страницы. Содержимое: Создание фреймовой структуры

Шапкасайта

 Navigation_bar.html – панель навигации. Содержимое: Панель навигации

Содержание

 Chapter1.html – содержание главы 1; Глава 1

Глава 1

Содержание главы 1

 Chapter2.html – содержание главы 2; Глава 2

Глава 2

Содержание главы 2

 Frame_set.html – HTML-документ, описывающий фреймовую структуру. 5 Пример использования фреймов <p>Ваш Web-браузернеотображаетфреймы</p> Все созданные файлы сохраните в одной папке. Затем в Web-браузере откроем файл Frame_set.html. На появившейся странице мы видим, что окно разделено на три прямоугольные области. В верхней части окна находится шапка сайта. В нижней части окна расположены панель навигации (слева) и основная часть документа (справа). При переходе по ссылкам содержимое основной части меняется, а остальные остаются неизменными. Теперь попробует изменить цвет фона шапки. Для этого необходимо отобразить исходный код Web-страницы. Существуют три способа отображения кода:  по команде Вид, Просмотр HTML-кода (в браузере InternetExplorer);  щелкнуть ПКМ в любом месте окна Web-браузера, в появившемся меню выбрать Просмотр HTML-кода (Исходный код страницы).  Открыть файл, содержащий исходный код, с помощью Блокнота или другого текстового редактора. Если документ содержит фреймы, результаты первых двух действий будут разными. Первый способ отобразит только код структуры Web-страницы, а не исходный код каждого из HTML-документов. Второй способ позволяет отобразить код лишь одного HTML-документа, а от места щелчка зависит, код какогоHTML-документа будет отображен. В нашем случае для отображения исходного кода файла заголовка (header.html)необходимо правой кнопкой мыши щелкнуть внутри области, содержащей заголовок. В появившемся контекстном меню нужно выбрать пункт Просмотр HTML-кода (Исходный код страницы). Заменяемстрочку на Сохраняем файл и обновляем Web-страницу. В результате цвет фона заголовка изменится с белого на матовый. Вопросы для самоконтроля 1. 2. 3. 4. Что такое фрейм? Назовите основные области применения фреймов? Опишите структуру HTML-документа, содержащего фреймы? В чем заключается описание фреймовой структуры? 6 5. Может ли описание фрейма содержаться в одном файле с основным документом? 6. Что описывает одиночный тег ? Какие параметры он имеет? 7. Для чего используется тег ? 8. Опишите принцип разделения окна Web-браузера на несколько областей? 7 Лекция2.Формы Формы в HTML предназначены для обмена данными между пользователем и сервером. Область применения форм не ограничена отправкой данных на сервер, с помощью клиентских скриптов можно получить доступ к любому элементу формы, изменять его и применять по своему усмотрению. Для отправки формы на сервер используется кнопка SUBMIT, такого же эффекта можно добиться, если нажать клавишу Enter в пределах формы. Когда HTML-форма отправляется на сервер, управление данными передается CGI-программе, заданной параметром actionтега form. Аббревиатурой CGI (Common Gateway Interface, общий шлюзовый интерфейс) обозначается протокол, с помощью которого программы взаимодействуют с Web-сервером. С помощью CGI на сервере можно выполнять программы на любом языке программирования и результат их действия выводить в виде веб-страницы. Порядок обработки формы при использовании CGI-интерфейса выглядит следующим образом:  Пользователь заполняет форму на Web-странице и нажимает кнопку с типом submit.  Браузер анализирует URL-адрес CGI-приложения, заданный в параметре ACTION формы и устанавливает соединение с соответствующим Webсервером (в качестве Web-сервера может быть использован, например сервер Apache).  Web-сервер преобразует URL-адрес в путь к файлу на компьютере и определяет, что URL-адрес указывает на CGI-приложение, а не на статический файл.  Web-сервер подготавливает переменные окружения и запускает CGIприложение на выполнение.  Эта программа в соответствии с заданным методом передачи данных на сервер (GET или POST) определяет переменные окружения и считывает данные в виде пар "имя=значение", осуществляя, если необходимо, их перекодировку.  Программа выводит в стандартный выходной поток HTTP-заголовок и результаты обработки данных формы в виде динамически созданного HTML-документа.  Web-сервер передает браузеру полученный документ и закрывает с ним соединение.  Браузер отображает полученные данные на экране в виде Web-страницы. Структура документа с формами 8 Форма добавляется в HTML-документ при помощи парного тега <form>. Внутри тегов <form> и </form> могут располагаться теги <input>, <textarea> и <select>, вставляющие в форму элементы управления (полей ввода данных, кнопок, переключателей и др.): <formaction="file.php"> <input type="text"> <textarea></textarea> <select> <option></option> </select> <input type="file"> <input type="reset"> <inputtype="submit"> </form> Добавление формы в документ Парный тег <form>позволяет добавить форму в HTML-документ. Тег имеет следующие параметры:  actionзадает URL-адрес программы обработки формы. Может задаваться в абсолютной или относительной форме: <form action="file.php"> <form action="http://www.mebik.ru/file.php">  определяет, как будут пересылаться данные от формы до Webсервера. Может принимать два значения – get и post. method o – данные формы пересылаются путем их добавления к URL-адресу после знака “?” в формате get [Имя параметра]=[Значение параметра] Пары параметр=значение отделяются друг от друга символом амперсанда (&). Например: http://www.mebik.ru/file.php?pole1=Login&pole2=Password Все специальные символы, а также буквы, отличные от латинских, кодируются в формате %nn, а пробел заменяется знаком “+”. Например, фраза «каталог сайтов» будет выглядеть так: %EA%E0%F2%E0%EB%EE%E3+%F1%E0%E9%F2%EE%E2 А если эта фраза является значением поля с именем pole1, то строка запроса будет такой: http://www.mebik.ru/file.php?pole1%EA%E0%F2%E0%EB%EE%E3+%F1%E0%E9%F2%EE%E2pole2 =Password В теге <form> значение get для параметра method задается так: <form action="http://www.mebik.ru/file.php" method="GET"> Метод GET применяется, когда объем пересылаемых данных невелик, так как существует предел длины URL-адреса. Длина не может превышать 256 символов: o post- предназначен для пересылки данных большого объема. Файлов и конфиденциальной информации (например, паролей): <formaction="http://www.mysite.ru/file.php" method="POST"> 9 Таким образом, главное отличие методов POST и GET заключается в способе передачи информации. В методе GET параметры передаются через адресную строку, в то время как в методе POST параметры передаются через тело HTTP-запроса и никак не отражаются на виде адресной строки.  enctypeзадает MIME-тип передаваемых данных. Может принимать два зна- чения: o application/x-www-form-urlencoded – применяется по умолчанию: <form action="http://www.mysite.ru/file.php" method="POST" enctype="application/x-www-form-urlencoded"> o multipart/form-data – указывает при пересылке Web-серверу файлов: <form action="http://www.mysite.ru/file.php" method="POST" enctype="multipart/form-data">  name задает имя формы: <form action="file.php" name="form1"> Описание элементов управления Тег <input> позволяет вставить в форму элементы управления, например, текстовое поле, кнопку или флажок. Этот тег имеет следующие параметры:  typeзадает тип элемента. В зависимости от значения этого поля создаются следующие элементы формы: o text– текстовое поле ввода: <inputtype="Тип" name="Имя поля" size="Размер" maxlength="Макс. количество символов"> При создании обычного текстового поля размером size и максимальной допустимой длины maxlength символов, атрибут type принимает значение text. Если указан параметр value, то поле будет содержать отображать value-текст. При создании поля не забывайте указывать имя поля, т.к. этот атрибут является обязательным. <inputtype="text"> o password– текстовое поле для ввода пароля, в котором все вводимы символы заменяются звездочкой: <input type="password" name="parol" size="12" maxlength="6"> o file– поле ввода имени файла с кнопкой Обзор. Позволяет отправить файл на Web-сервер. <input type="file"> o checkbox– поле для установки флажка, который можно установить или сбросить. Флажки checkbox предлагают пользователю ряд вариантов, и разрешают выбор нескольких из них: <input name="Имя переключателя" type="Тип" value="Значение"> Группа флажков состоит из элементов <input>, имеющих одинаковые атрибуты name и type(checkbox). Если вы хотите, чтобы элемент был отмечен по умолчанию, необходимо пометить его как checked. Если элемент выбран, то сценарию поступит строка имя=значение, в противном случае в обработчик 10 формы не придет ничего, т.е. не выбранные флажки вообще никак не проявляют себя в переданном наборе данных. <input name="vid" type="checkbox" value="pink">Розовый o radio– элемент-переключатель. Переключатели radio предлагают пользователю ряд вариантов, но разрешают выбрать только один из них: <input name="Имя переключателя" type="Тип" value="Значение"> Переключатель (radio) имеет атрибуты name, type и value. Атрибут name задает имя переключателя, type задает тип radio, а атрибут value задает значение. Если пользователь выберет переключатель, то сценарию будет передана строка имя=значение. При необходимости можно указать параметр checked, который указывает на то, что переключатель будет иметь фокус (т.е. будет отмечен по умолчанию) при загрузке страницы. Переключатели также можно объединять в группы, для этого они должны иметь одно и тоже имя. <input name="vid " type="radio" value="pink"> Розовый o reset– кнопка, при нажатии которой вся форма очищается. Точнее сказать, все элементы формы получают значения по умолчанию: <input type="Тип" name="Имя кнопки" value="Надпись на кнопке"> Пример: <input type="reset" name="Reset" value="Очистить форму"> o submit– кнопка, при нажатии которой происходит отправка данных, введенных в форму: <input type="Тип" name="Имя кнопки" value="Текст кнопки"> При создании кнопки для отправки формы необходимо указать 2 атрибута: type=”submit”и value=”Текст кнопки”. Атрибут nameнеобходим, если кнопка не одна, а несколько и все они созданы для разных операций, например кнопки "Сохранить", "Удалить", "Редактировать" и т.д. После нажатия на кнопку сценарию передается строка имя=текст кнопки. <input type="submit"> o button– обычная командная кнопка: <input type="button"> Такую кнопку имеет смысл использовать только с прикрепленным к ней скриптом. o hidden- скрытый элемент, значение которого отправляется вместе со всеми данными формы. Элемент не показывается пользователю, но позволяет хранить, например, данные из предыдущей формы (если пользователь последовательно заполняет несколько форм) или уникальное имя пользователя: <input type="hidden">  nameзадает имя элемента управления. Оно должно обязательно указываться латинскими буквами или комбинацией латинских букв и цифр. Имя элемента не должно начинаться с цифры: 11 <input type="text" name="pole1">  disabledзапрещает доступ к элементу формы. При наличии параметра элемент отображается серым цветом: <input type="text" name="pole1" disabled> Остальные параметры специфичны для каждого отдельного элемента. Рассмотрим каждый тип элемента отдельно. Текстовое поле и поле ввода пароля Для текстового поля и поля ввода пароля применяются следующие параметры:  valueзадает текст поля по умолчанию: <input type="text" name="pole1" value="http://">  maxlengthуказывает максимально количество символов, которое может быть введено в поле: <input type="text" name="pole1" value="http://" maxlength="100">  sizeопределяет видимый размер поля ввода: <input type="text" name="pole1" value="http://" maxlength="100" size="20">  readonlyуказывает, что поле доступно только для чтения. При наличии параметра значение поля изменить нельзя: <input type="text" name="pole1" readonly> Кнопки Сброс, Отправить и командная кнопка Для кнопок используется один параметр:  valueзадает текст, отображаемый на кнопке: <inputtype="submit" value="Отправить"> Скрытое поле hidden Для скрытого поля указывается один параметр:  valueопределяет значение скрытого поля: <input type="hidden" name="pole1" value="1"> Поле для установки флажка Для полей-флажков используются следующие параметры:  задает значение, которое будет передано Web-серверу, если флажок отмечен. Если флажок снят, значение не передается. Если параметр не задан, используется значение по умолчанию - on: value <input type="checkbox" name="check1" value="yes">Текст  checkedуказывает, что флажок по умолчанию отмечен: <input type="checkbox" name="check1" value="yes" checked>Текст Элемент-переключатель 12 При описании элемента-переключателя используются такие параметры:  valueуказывает значение, которое будет передано Web-серверу, если переключатель выбран: <inputtype="radio" name="radio1" value="yes">Текст Если ни одно из значений не выбрано, никаких данных передано не будет;  checkedобозначает переключатель, выбранный по умолчанию: <input type="radio" name="radio1" value="yes" checked>Текст Элемент-переключатель может существовать только в составе группы подобных элементов, из которых может быть выбран только один. Для объединения переключателей в группу необходимо установить одинаковое значение параметра name и разное значение параметра value: Укажитевашпол:<br> <input type="radio" name="radio1" value="male" checked>Мужской <input type="radio" name="radio1" value="female">Женский Текстовая область Парный тег текста: <textarea>создает внутри формы поле для ввода многострочного <textarea> Текст по умолчанию </textarea> В окне Web-браузера поле отображается в виде прямоугольной области с полосами прокрутки. Тег имеет следующие параметры:  name– уникальное имя поля: <textarea name="pole2"> Текстпоумолчанию </textarea>  cols– число столбцов видимого текста: <textarea name="pole2" cols="15"> Текстпоумолчанию </textarea>  rows– число строк видимого текста: <textarea name="pole2" cols="15" rows="10"> Текст по умолчанию </textarea> Список с предопределенными значениями Тег <select>создает внутри формы список с возможными значениями: <select> <option>Элемент1</option> <option>Элемент2</option> </select> Тег <select> имеет следующие параметры:  nameзадает уникальное имя списка: <select name="select1">  sizeопределяет число одновременно видимых элементов списка: <select name="select1" size="3"> 13 Поумолчанию size имеетзначение 1;  multipleуказывает, что из списка можно выбрать сразу несколько элементов одновременно. Чтобы получить все значения на сервере после названия списка следует указать квадратные скобки (это признак массива в языке PHP): <select name="select[]" size="3" multiple> Внутри тегов <select> и </select> располагаются теги <option>, с помощью которых описывается каждый элемент списка. Тег <option>имеет следующие параметры:  valueзадает значение, которое будет передано Web-серверу, если пункт списка выбран. Если параметр не задан, посылается текст этого пункта: <select name="select1"> <option value="val1">Элемент1</option> <option>Элемент2</option> </select> Если выбран пункт «Элемент1», то посылается Select1=”val1” Если выбран пункт «Элемент2», то посылается Select1=”Элемент2”  selectedуказывает, какой пункт списка выбран изначально: <selectname="select1"> <option value="val1">Элемент1</option> <option selected>Элемент2</option> <option value="val2">Элемент3</option> </select> С помощью тега <optgroup> можно объединить несколько пунктов в группу. Название группы указывается в параметре label: <selectname="select1"> <optgrouplabel="Отечественные"> <option value="1">ВАЗ</option> <option value="2">ГАЗ</option> <option value="3">Москвич</option> </optgroup> <optgroup label="Зарубежные"> <option value="4">BMW</option> <option value="5">Opel</option> <option value="6">Audi</option> </optgroup> </select> Тег <label> Cпомощью тега <label>, можно указать пояснительную надпись для элемента формы. Тег имеет два параметра:  forпозволяет указать идентификатор элемента, к которому привязана надпись. Точно такой же идентификатор должен быть указан в параметре idэлемента формы: <label for="pass1">Пароль*:</label> 14 <input type="password" name="pass1" id="pass1"> Примечание! Параметр id могут иметь практически все теги. В большинстве случаев он предназначен для доступа к элементу из скрипта. Если элемент формы разместить внутри тега <label>, то надпись будет связана с элементов и без указания параметра for: <label>Пароль*: <input type="password" name="pass1" id="pass1"> </label>  accesskeyзадает клавишу быстрого доступа. При нажатии этой клавиши одновременно с клавишей <alt> элемент окажется в фокусе ввода: <label accesskey="N">Пароль*: <input type="password" name="pass1" id="pass1"> </label> Пример: рассмотрим форму регистрации пользователя. В примере содержаться элементы CSS в разделе style, описывающего декор элементов формы. Не обращаем на него пока никакого внимания. Сохраните полученный пример с именем form.html в своей папке. <!DOCTYPEHTMLPUBLIC "-//W3C//DTDHTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Форма регистрации пользователя</title> <meta http-equiv="Content-Type" content="text/html; chrset=UTF-8"> <styletype="text/css"> body { /* Стиль для всего документа */ font-size: 12pt; /* Размершрифта */ font-family: "Times New Roman","Verdana", sans-serif; /* Название шрифта */ } label { /* Стиль для всех элементов label */ display: inline-block; /* Тип блока */ width: 160px; /* Ширина */ vertical-align: top; /* Вертикальное выравнивание */ } select { /* Стиль для всех списков */ width: 250px; /* Ширина */ border: 1pxsolidblack; /* Определение стиля для границы */ } input.pole{ /* Стиль для элемента input имеющего класс pole */ width: 250px; /* Ширина */ border: 1pxsolidblack; /* Определение стиля для границы */ } textarea { /* Стиль для многострочного текстового поля */ width: 250px; /* Ширина */ height: 100px; /* Высота */ border: 1pxsolidblack; /* Определение стиля для границы */ } formdiv { /* Стиль для всех div, расположенных внутри form */ margin-bottom: 15px; /* Отступ блока снизу */ } </style> </head> <body> <h1 align="center">Регистрация пользователя</h1> <form action="file.php" method="POST" enctype="multipart/form-data"> <div><label for="Name">Имя*:</label> <input type="text" name="Name" id="Name" class="pole"></div> <div><label for="Surname">Фамилия*:</label> <input type="Text" name="Surname" id="Surname" class="pole"></div> <div><label for="Nik">Ник*:</label> <input type="text" name="Nik" id="Nik" class="pole"></div> <div><label for="Parol1">введите пароль*:</label> 15 <input type="password" name="Parol1" id="Parol1" class="pole"></div> <div><label for="Parol2">Подтвердите пароль*:</label> <input type="password" name="Parol2" id="Parol2" class="pole"></div> <div><label for="e-mail">e-mail*:</label> <input type="text" name="e-mail" id="e-mail" class="pole"></div> <div><label for="sex1">Пол*:</label> Муж. <input type="radio" name="sex" id="sex1" value="1"> Жен. <input type="radio" name="sex" id="sex2" value="2"></div> <div><label for="country">Страна*:</label> <select id="country" name="country"> <option value=""></option> <option value="1">Белоруссия</option> <option value="2">Россия</option> <option value="3">Украина</option> </select></div> <div><label for="City">Город*:</label> <input type="text" name="City" id="City" class="pole"></div> <div><label for="Region">Регион*:</label> <input type="text" name="Region" id="Region" class="pole"></div> <div><label for="userfile">Ваше фото:</label> <input type="file" name="userfile" id="userfile"></div> <div><labelfor="rule">С правилами согласен*:</label> <input type="checkbox" name="rule" id="rule" value="yes"></div> <div><label for="comment">Комментарий*:</label> <textarea id="comment" name="comment" cols="15" rows="10"></textarea> </div> <div> <input type="submit" value="Отправить" style="margin-left: 150px;"> </div> </form> </body> </html> Группировка элементов формы Парный тег <fieldset>позволяет сгруппировать элементы формы. Webбраузеры вокруг группы отображают рамку. На линии рамки с помощью тега <legend>можно разместить надпись. Пример: откройте файл form.html и замените блок div: <div><labelfor="sex1">Пол*:</label> Муж. <input type="radio" name="sex" id="sex1" value="1"> Жен. <input type="radio" name="sex" id="sex2" value="2"></div> на: <fieldset> <legend>Пол</legend> Муж. <input type="radio" name="sex" value="1"> Жен. <input type="radio" name="sex" value="2"> </fieldset> Элементы типа radio поместились в рамку. На линии рамки располагается имя группы Пол. Вопросы для самоконтроля 1. Для чего предназначены формы в HTML-документе? 2. Поясните порядок обработки формы при использовании CGI-интерфейса? 3. Опишите структуру документа с формами? 4. Как добавить форму в HTML-документ? <form>? Какие параметры имеет тег 5. Какие элементы управления формы Вы знаете? 16 6. Какие параметры применяются для элементов управления формы: текстовое поле и поле ввода пароля? 7. Какой параметр применяется для кнопок и за что он отвечает? 8. Какие параметры применяются для элементов управления формы: флажок и переключатель? 9. Для чего служит текстовая область, и чем она отличается от текстового поля? 10. Опишите параметры поля со списком? Приведите примеры использования этого поля в форме? 11. Укажите назначение тега <label>в форме? 12. Как осуществить группировку элементов формы? 17 Лекция3. Теги страницы <div> и <span>. Группировка элементов Теги <div>и <span> визуально ничего не делают. Зато они позволяют сгруппировать несколько элементов страницы в один (см. пример ниже). Элемент <div>является блочным элементом и предназначен для выделения фрагмента документа с целью изменения вида содержимого. Как правило, вид блока управляется с помощью стилей. Чтобы не описывать каждый раз стиль внутри тега, можно выделить стиль во внешнюю таблицу стилей, а для тега добавить атрибут class или id с именем селектора. Как и при использовании других блочных элементов, содержимое тега <div>всегда начинается с новой строки. После него также добавляется перенос строки. Тег <div> является парным тегом <div>...</div> и имеет следующие атрибуты:   alignзадает выравнивание содержимого тега <div>. titleдобавляет всплывающую подсказку к содержимому. Пример использования тега <div> <!DOCTYPEHTMLPUBLIC "-//W3C//DTDHTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <style type="text/css"> <title>Тег DIV</title> <style type="text/css"> .block1{ width:200px; background:#ccc; padding:5px; padding-right:20px; border: solid 1px black; float: left; } .block2{ width:200px; background:#fc0; padding:5px; border: solid 1px black; float: left; position: relative; top:40px; left: -70px; } </style> </head> <body> <divclass="block1">А что это вы на меня так смотрите, отец родной? На мне узоров нету и цветы не растут.</div> <divclass="block2">Граждане, храните деньги в сберегательной кассе! Если, конечно, они у вас есть, хм…</div> </body> </html> 18 Тег <span> предназначен для определения строчных элементов документа. В отличие от блочных элементов, таких как <table>, <p> или <div>, с помощью тега <span> можно выделить часть информации внутри других тегов и установить для нее свой стиль. Например, внутри абзаца (тега <p>) можно изменить цвет и размер первой буквы, если добавить начальный и конечный тег <span> и определить для него стиль текста. Чтобы не описывать каждый раз стиль внутри тега, можно выделить стиль во внешнюю таблицу стилей, а для тега добавить атрибут class или id с именем селектора. Синтаксис <span>...</span> Закрывающий тег Обязателен. Пример использования тега <span>: <!DOCTYPEHTMLPUBLIC "-//W3C//DTDHTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <style type="text/css"> <title>Тег SPAN</title> <style> body{ font-family: Arial, sans-serif;/* Рубленыйшрифт */ } .letter{ color: red;/* Красный цвет символов */ font-size:200%;/* Размер шрифта в процентах */ font-family: serif;/* Шрифтсзасечками */ position: relative;/* Относительное позиционирование */ top:5px;/* Сдвиг сверху */ } </style> </head> <body> <p><spanclass="letter">Е</span>сли есть на свете дьявол, то он не козлоногий рогач, а он дракон о трёх головах, и головы эти — хитрость (в книге - трусость), жадность, предательство. И если одна прикусит человека, то две другие доедят его дотла. </p> <p>ГлебЖеглов</p> </body> </html> Данный пример позаимствован с сайта htmlbook.ru Для тегов <div> и <span> доступны универсальные атрибуты и события. Универсальные атрибуты и события Универсальные атрибуты 19 Универсальные атрибуты применяются практически ко всем тегам, поэтому выделены в отдельную группу, чтобы не повторять их для всех тегов. - позволяет получить доступ к элементу с помощью заданного сочетания клавиш с заданной в атрибуте буквой или цифрой. Браузеры при этом используют различные комбинации клавиш. Например, для accesskey="s" работают следующие сочетания. accesskey      Internet Explorer: Alt + S Chrome: Alt + S Opera: Shift + Esc, S Safari: Alt + S Firefox: Shift + Alt + S Обычно элемент при использовании комбинации клавиш получает фокус, но конкретное действие зависит от применяемого тега. К примеру, для <a> произойдет переход по ссылке, для текстовых полей можно вводить текст, для флажков (<input type="checkbox">) будет поставлена галочка и т.д. <aaccesskey="c">...</a> Атрибут accesskey может принимать следующие значения:цифра (0-9) или латинская буква (a-z). Значение по умолчанию: нет. Может быть применен к следующим тегам: <a>, <area>, <button>, <input>, <label>, <legend>, <textarea> contenteditableсообщает, что элемент доступен для редактирования пользовате- лем. contextmenuустанавливает classопределяет контекстное меню для элемента. имя класса, которое позволяет связать тег со стилевым оформлением. dirзадает направление и отображение текста — слева направо или справа на- лево. idуказывает имя стилевого идентификатора. hiddenскрывает содержимое элемента от просмотра. langбраузериспользует значение параметра для правильного отображения некоторых национальных символов. spellcheckуказывает браузеру проверять или нет правописание и грамматику в тексте. styleприменяетсядля определения стиля элемента с помощью правил CSS. tabindexустанавливает порядок получения фокуса при переходе между элементами с помощью клавиши Tab. titleописываетсодержимое элемента в виде всплывающей подсказки. События onblurпотеряфокуса. 20 onchangeизменение onclickщелчок значения элемента формы. левой кнопкой мыши на элементе. ondblclickдвойнойщелчок левой кнопкой мыши на элементе. onfocusполучение фокуса onkeydownклавиша нажата, но не отпущена. onkeypressклавиша нажата и отпущена. onkeyupклавиша отпущена. onloadдокумент загружен. onmousedownнажата левая кнопка мыши. onmousemoveперемещение onmouseoutкурсор покидает элемент. onmouseoverкурсор onmouseupлевая курсора мыши. наводится на элемент. кнопка мыши отпущена. onresetформаочищена. onselectвыделен onsubmitформа текст в поле формы. отправлена onunloadзакрытие окна. Вопросы для самоконтроля 1. Для чего используются теги <div> и <span>? 2. Какие атрибуты имеет тег <div>и для чего они используются? 3. Приведите пример использования тегов <div> и <span>? 4. Для чего используются универсальные атрибуты и события? Приведите примеры? 5. Назовите основные универсальные атрибуты и события? 21 Каскадные таблицы стилей. Основы CSS. Лекция1. Форматирование блоков В языке HTML все элементы можно разделить на два типа: блочные и строчные. Блочные элементы создают визуально самостоятельную структурную единицу - блок. Примером блочных элементов могут быть элементы H1-H6, Р, DIV, которые могут даже отделяются от других абзацными отступами. Строчные элементы не создают визуальной самостоятельной структурной единицы и выводятся линейной строкой. Примеры: элементы I, B, ЕМ и др. Два блочных элемента не могут располагаться в одной строке, а два строчных, могут. Модель представления документов в CSS также использует понятие блоков. Блоки в CSS представляют собой самостоятельную структурную единицу, имеющую форму прямоугольника. Каждый элемент в дереве элементов документа - самостоятельный блок. Из этого следует, что в CSS есть блоки, которые структурно отделены от остальных, а есть строчные блоки, которые могут находиться внутри структурных блоков. Каждый такой блок обязательно имеет информационную часть, или содержимое, которым может быть текст, изображение или другая информация. Эта часть блока называется его контентом или содержимым. Например, для элемента р содержимым блока является текст абзаца. Вокруг области контента могут быть пустые, не занятые содержимым области, называемые полями (padding). При наличии полей определенного размера текст не примыкает вплотную к границам блока.Также блок может иметь отступы (margin), это дополнительное свободное пространство вокруг границы блока.Согласно спецификации CSS, поля, границы и отступы не входят в ширину блока. Таким образом, указывая ширину блока, вы задаете ширину лишь той части блока, которая отведена для содержимого. Непосредственно за полями проходит граница блока (border), которая может иметь определенную толщину и стиль линий. Ширина блока может быть произвольной. Стиль линий различным, а границы могут иметь произвольный цвет. На рисунке приведена обобщенная структура блока в CSS. Поля (margin) Высота блока (height) Отступы (padding) Граница (border) Содержимое блока 22 Ширина блока (width) Структура блока в CSS Все поля, границы и отступы делятся соответственно на верхние, нижние, правые и левые. Для каждого из них можно задать значения независимо от других. Фон для различных областей блока задается следующим образом. Область содержимого: фон задается свойством background элемента, порождающего данный блок.  Поля: фон задается свойством background элемента, порождающего данный блок.  Границы: вид границ определяется свойствами границ элемента, порождающего блок. Фона они не имеют, чаще всего это линии определенного стиля (пунктирная, сплошная и тому подобное, цвета и толщины).  Отступы: область отступов всегда прозрачна, соответственно, сквозь нее может просвечивать фон родительских элементов. Таким образом, отступы как бы наследуют фон от родительского элемента.  Указание типа блока Атрибут display предназначен для указания типа блока. Может принимать следующие значения:  block – блок занимает всю ширину родительского элемента. Значение block по умолчанию имеют теги <div> и <p>;  inline – блок занимает только необходимое для отображения содержимого пространство. Значение inline по умолчанию имеют теги <span>, <b> и др;  inline-block – аналогично inline. Но дополнительно можно задать размеры и другое форматирование, применяемое для блочного элемента. Результат аналогичен встраиванию тега <img>в строку;  none – содержимое блока не отображается. Различные варианты использования атрибута display приведены в следующем примере: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Атрибут display</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <style type="text/css"> div div { border: 2px solid #333 } label { display: inline-block; width: 100px } </style> </head> <body> <h2>Различныетипыблоков</h2> <div> <div style="display: inline">display = inline</div> 23 <div style="display: inline; width: 300px">display = inline</div> <div style="display: inline-block; width: 300px"> display = inline-block </div> <div style="display: block">display = block</div> <divstyle="display: none">Этого блока не видно</div> </div> <h2>Выравнивание элементов формы</h2> <div><label for="login">Логин:</label> <input type="text" name="login" id="login"></div> <div><label for="pass">Пароль:</label> <input type="password" name="pass" id="pass"></div> <h2>Указание типа блока для ссылки</h2> <div> <div style="width: 300px"><a href="link1.html">Обычная ссылка</a></div> <div style="width: 300px"> <a href="link.html" style="display: block">Ссылка занимает всю ширину блока</a> </div> </div> </body> </html>[2] Установка размеров Атрибуты width и height задают ширину и высоту блока: div { width: 100px; height: 100px } Атрибуты min-width и min-height задают минимальные ширину и высоту блока: div { min-width: 100px; min-height: 100px } Атрибуты max-width и max-height задают максимальную ширину и высоту блока: div { max-width: 100px; max-height: 100px } Если размеры не заданы, то блок займет всю ширину родительского элемента, а его высота будет определена по содержимому блока. Если содержимое не помещается в блок заданного размера, то он будет отображаться в соответствии со значением атрибута overflow. Атрибут overflow Атрибут overflow управляет отображением содержания блочного элемента, если оно целиком не помещается и выходит за область заданных размеров. Атрибут overflow имеет следующие параметры: visibleотображаетсявсе содержание элемента, даже за пределами установлен- ной высоты и ширины. hiddenотображается только область внутри элемента, остальное будет обрезано. scrollвсегдадобавляются полосы прокрутки. autoполосыпрокрутки добавляются только при необходимости. Пример: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> 24 <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>overflow</title> <style type="text/css"> .layer { overflow: scroll; /* Добавляемполосыпрокрутки */ width: 300px; /* Ширинаблока */ height: 150px; /* Высотаблока */ padding: 5px; /* Поля вокруг текста */ border: solid 1px black; /* Параметры рамки */ } </style> </head> <body> <div class="layer"> <h2>Доказывать, что ты не верблюд! (кабачок 13 стульев)</h2> <p>-Так, а где второй верблюд? <p>-Как Вы сказали? <p>-Я говорю - где второй верблюд? <p> -Верблюд второй? Откуда второй? Второго не было. <p>-Как это не было? В документе ясно написано: “Направляем в ваш цирк двугорбого верблюда, и с ним - гималайского. Двугорбого я видел. Красавец. А где гималайский? <p>-А Гималайский - это я. <p>-Вы? Что же, вы хотите сказать, что Вы - верблюд? <p>-Ну какой верблюд, что Вы говорите? Это фамилия моя. Здесь же всё у Вас написано:”Посылаем Вам в цирк двугорбого верблюда и с ним… хм, с маленькой буквы написали. Фамилию мою - с маленькой буквы. Смотрите - маленькая “г”. <p>-Да, да, да. Маленькая “ге”, а нужно большое “Ге”. Получается, что Вы верблюд. <p>-Вот так пишут, писаки. Действительно получается. <p>-Плохо получается.</p> </div> </body> </html> Просмотрите результат в Web-браузере. Попробуйте все параметры атрибута overflowи снова просмотрите результат. Вопросы для самоконтроля 1. 2. 3. 4. 5. 6. 7. Что понимается под блочными элементами? Что понимается под строчными элементами? Опишите структуру блока CSS? Что понимается под типом блока? Как задать высоту и ширину блока? Какой атрибут управляет отображением содержания блока? Какие параметры имеет атрибут overflow? 25 Лекция2. Управление обтеканием. Атрибуты float и clear Атрибут float определяет, по какой стороне будет выравниваться элемент, при этом остальные элементы будут обтекать его с других сторон. Когда значение свойства float равно none, элемент выводится на странице как обычно, при этом допускается, что одна строка обтекающего текста может быть на той же линии, что и сам элемент. Атрибут floatможет принимать следующие значения:  left– блок выравнивается по левой стороне, а другие элементы обтекают его справа;  right-  none– блок выравнивается по правой стороне, а другие элементы обтекают его слева; выравнивание отсутствует. Пример: Добавим на страницу заголовок, изображение и текст. Выровняем заголовок по центру, добавим для него внутренние и внешние отступы. Применим к основному тексту документа атрибут float, так чтобы он обтекал изображение. 1. Создайте заготовку html-документа и сохраните его с именем float.html: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Пример обтекания текстом изображения с помощью атрибута float</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <link href="style1.css" type="text/css" rel="stylesheet"> </head> <body> <h1 id="header">Биография Луи де Фюнеса</h1> <img id="image" src="Джо.jpg" alt="Луи де Фюнес" width="300" height="300"> <p>Луи де Фюнес (фр. LouisdeFunès, полное имя Луи Жермен Давид де Фюнес де Галарса, фр. LouisGermainDaviddeFunèsdeGalarza; 31 июля 1914, Курбевуа — 27 января 1983, Нант) — французский киноактёр, комик, режиссёр, сценарист. </p> </body> </html> 2. Создадим еще один файл style1.css, в который вынесем каскадную таблицу стилей. body{ font: 14px Times New Roman; color: #333333; padding: 10px; margin: 0 auto; widht: 900px; background-color: #FDF5E6; } #header{ text-align: center; padding: 40px 20px; margin: 20px auto 15px auto; Определение стиля для всего документа: 14 шрифт, TimesNewRoman, цвет черный, внутренние отступы между границей блока и текстом 10px, отступы между блоком и границей Web-страницы 0, ширина блока 900 px, цвет фона – цвет старого коньяка Определение стиля для заголовка та: выравнивание – по центру, внутренние отступы 40 и 20 px, внешние – 20, auto, 15 и auto px, ширина блока – 550, цвет – чер26 width:550; color:#333333; } #image{ float:right; } ный.1 Определение стиля для изображения: выравнивание изображения по правому краю. Обратите внимание, что в документе float.html, сначала вставляется изображение, потом текст (при обратном порядке необходимо использовать позиционирование). Дело в том, что при использовании атрибута floatблок имеющий этот атрибут (в нашем случае это блок с изображением) поднимается над всей разметкой документа( а все что находилось ниже его становится на его место), но при этом существует такая особенность, что текст, который должен быть загорожен этим блоком начнет его обтекать, а размер блока с текстом останется прежним (вы можете это увидеть, если подключите видимость рамок блоков –см. сноску 7).То есть блоки, находящиеся ниже блока с атрибутом floatимеют право занимать его место, а их контент нет, за исключением тех случаев, когда указан атрибут clear, который разрешает или запрещает обтекание. Атрибут clear Атрибут clearможет принимать следующие значения:  both– запрещает обтекание элементов с атрибутом float;  left– запрещает обтекать элементы со свойством float:left;  right-  none– запрещает обтекать элементы со свойством float:right; отменяет запрет на обтекание, который был установлен с помощью значений both, left и right. Продемонстрируем использование атрибута clearна нашем примере. Для этого нужно будет тому элементу, который идет ниже элемента получившего атрибут float (в нашем примере это блок с текстом под изображением), задать атрибут clear: rightлибо clear:both. Добавьте стиль в тег <p>по образцу: <pstyle="clear:right">ЛуидеФюнес (фр. LouisdeFunès, полноеимяЛуиЖерменДавиддеФюнесдеГаларса, фр. LouisGermainDaviddeFunèsdeGalarza; 31 июля 1914, Курбевуа — 27 января 1983, Нант) — французскийкиноактёр, комик, режиссёр, сценарист. В итоге мы видим, что текст переместился под изображение, а не обтекает его. На самом деле атрибут floatчаще всего используется для блочного тега divи способствует созданию разметки Web-страниц. Вопросы для самоконтроля 1. Для чего предназначен атрибут float? Какие значение он принимает? 2. Для чего предназначен атрибут clear? Какие значение он принимает? 1 Чтобы просмотреть границы блоков, в браузере, например в Firefox, выполните команду Firefox, WebDeveloperExtension, Outline, OutlineBlocklevelelements. 27 Лекция3. Позиционирование Web-страницы объектов Шапка Web-страницы Панель нави вига гации Предположим мы хотим, создать шаблон документа указанный на рисунке 1. Очевидно, что для создания такого шаблона потребуется четыре блока div (пронумеруем их цифрами от 1 до 4). Чтобы определить размер и положение каждого из них, давайте представим, что все теги имеют одинаковую высоту= 90px и ширину =800px (рис. 2). Нижняя часть документа Рис. 1. Структура Web-документа 1 1 2 контент 2 1 2 3 3 4 4 Рис.2 . Разметка webдокумента Рис.3 . Разметка webдокумента 3 4 Рис.4 . Разметка web-документа Уменьшаем ширину блока 2 до, примерно, 150 px. Чтобы блок 3 поднялся вверх и занял место блока 2, необходимо прописать свойство float:left для блока 2. Блок 3 займет место блока 2,а блок 4 займет место блока 3, при этом блок 2 будет виден на экране (рис.4), так как он расположился над всей разметкой документа (см. описание атрибута float).Уменьшив размер блока 3 на 160 px (чтобы сделать еще и отступ от блока 2) и задав ему выравнивание по правому краю, мы получим структуру Web-документа, показанную на рис 1. Шапка Web-страницы меню Панель нави вига гации контент Нижняя часть документа Рис. 5. Структура Web-документа Приведем, пример блочной верстки Web-страницы состоящей из 5 блоков (рис.5): Создайте два документа с именами index.htmlи style.css. Так как далее мы будет создавать сайт об известном актере Франции Луи де Фюнесе, сохраните файл index.htmlв папке Легенда мирового кино Луи де Фюнес, а файл style.cssв папке css. Создайте соответствующее дерево каталогов как показано на рисунке: Рис.6 . Файловая структура документов сайта 28 Откройте в блокноте файл index.htmlи поместите в него теги, описывающие техническую информацию документа, а также подключите в теге linkфайл, который будет содержать cssкод, т.е. style.css. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 "http//.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" Content="text/html; chsrset=utf-8"> <title>Луи де Фюнес - легенда мирового кино </title> <link href="css/style.css" type="text/css" rel="stylesheet"> </head> <body> …. </body> </html> strict //EN" Если посмотреть на рис.5, можно увидеть, что для разметки сайта нам понадобятся 5 блоков div(шапка/header, меню/menu, панель навигации/navigationbar, основное содержимое документа/content, нижняя часть сайта/footer) и шестой для общего блока страницы. Поместите их между парными тегами <body> …</body> <divid="wrapper"> <div id="header">1</div> <div id="menu">2</div> <div id="navigation_bar">3</div> <div id="content">4</div> <div id="footer">5</div> </div> Перейдем в файл style.cssи зададим стиль для каждого из блоков: #wrapper{ width:1000px; outline: 1px solid #cccccc; padding:10px; margin:0 auto; } #header { height: 400px; margin-bottom: 10px; } #menu { height: 30px; margin-bottom: 15px; background-color:pink; } #navigation_bar { width:200px; background-color:#4682B4; float:left; } #content { width: 780px; margin-left: 220px; background-color:#C1FFC1; } #footer { clear:left; margin-top: 15px; background-color:blue; } Общий блок для всей страницы Ширина блока 1000 px Рамка: толщина 1 px, сплошная, цвет серый Внутренние отступы: 10 px Внешние отступы: сверху и снизу=0, справа и слева =авто – на усмотрение Web-браузера Блок «Шапка» Web-страницы Высота блока: 400 px. Внешний отступ снизу: 10 px. Блок «Меню» Web-страницы Высота блока: 30 px. Внешний отступ снизу: 15 px. Цвет фона:розовый. Блок «Панель навигации» Web-страницы Ширина блока: 200 px. Цвет фона: синий. Плавающий элемент обтекаемый слева Основной блок Web-страницы Ширина блока 780 px Внешний отступ: слева 220 px Цвет фона: светло-зеленый Блок нижней части Web-страницы запрещает обтекать блоку navigation_barсправа Внешний отступ: сверху 15 px. Цвет фона: синий Открыв файл index.html мы увидим желаемую разметку сайта, показанную на рисунке 5. 29 Очистка обтекания Одной из первых особенностей плавающих элементов заключается в том, что для них необходимо задавать ширину, чтобы Web-браузер правильно оценивал какое пространство им необходимо занимать. Если не задать ширину плавающему элементу, некоторые Web-браузеры не поймут, по какому принципу имеющийся контент должен обтекать его, кроме того, он будет занимать всю ширину окна. В нашем случае для плавающего элемента navigation_barзадана ширина равная 200 px. Для того чтобы понять,что такое очистка обтекания, необходимо заполнить информацией (скопируйте в каждый из блоков примерно по 2 абзаца) блок navigation_bar и content. Скопируйте ее, например, из файла Биография Луи де Фюнеса.docxнаходящегося в папке Web-дизайн. Откройте файл index.htmlи вставьте информацию в блокиnavigation_barи content: <div id="navigation_bar">Карлос Луи де Фюнес де Галарза родился 31 июля 1914 года близ Парижа в городе Курбевуа. Отец Луи работал в ювелирном магазине, мать хозяйничала в доме. Школьные годы де Фюнес провел дурачась, строя рожи вредным учителям и подшучивая над одноклассниками. Свои клоунские способности он продолжил развивать на театральной коллежской сцене. Шутил он и дома, и в магазине. Без юмора Луи не мог прожить и дня — день такой считался потерянным. К своему совершеннолетию де Фюнес оказался не готовым к строевой службе, о чем свидетельствовал его вес в 55 кг, чем сам Луи был крайне разочарован и смущен. Однако он продолжил учебу в Куломмьерском колледже и даже устроился на работу, правда, все также — смеясь.</div> <div id="content">Тяжелее всего де Фюнесу пришлось в военные годы. Он с честью удерживал за собой место кладовщика на складе, благодаря чему мог нормально питаться и продолжить учебу в театральных школах. В 1942 году Луи женился на начинающей актрисе Жанне Бартоломьи, а в 1944 году на свет появился сын де Фюнеса — Патрик де Фюнес. Тогда, чтобы прокормить жену и ребенка, Луи пришлось искать себе более высокооплачиваемое место. Так он перебирался с одной работы на другую, пока Вторая Мировая война не покинула Париж. В кино де Фюнес дебютировал в 1945 году маленькой, практически незаметной человеческому глазу, ролью в фильме «Барбизонское искушение». Потом его пригласили еще на одну эпизодическую роль в фильме позначительнее, а потом еще на одну, а затем и еще… В общей сложности за шестнадцать с половиной лет актерской деятельности к 1961 году в копилке у де Фюнеса пылилось за сто эпизодических ролей. Они были столь </div> Посмотрите результат в Web-браузере. Мы видим, что блок footerне ушел вниз на свое место, а блок contentне растянулся в высоту вместе с блоком navigation_bar. А не ушел он, потому что блок navigation_bar является блоком плавающим, т.е. он поднимается над разметкой всего Web-документа, а блоки contentи footerзанимают его место. Так происходит со всеми элементами находящимися ниже элемента со свойством float. Далеко не всегда необходимо, чтобы все теги, подчинялись этому правилу. В нашем случае необходимо, чтобы блок contentобтекал навигационную панель, а footerпереместился в нижнюю часть экрана. Для этого воспользуемся правилом очистки обтекания clear. Для таких целей делают следующее. Там, где нужно отменить обтекание, создают пустой блок div, и для него организовывается пустой класс в файле style.css, со свойством clear. В нашем случае оно принимает параметр left (т.е. мы запрещаем блоку footerобтекать navigation_bar справа): .clear { clear: left; } 30 В файле index.html, после блока content создаем div, в котором подключаем описанный нами класс: <div class="clear"></div> Просмотрим результат в Web-браузер, footer переместился в положенное место. Сделаем отступ снизу для блока navigation_bar, чтобы блок footer не прилипал к нему. margin-bottom: 15px; Вопросы для самоконтроля 1. Опишите пример (скажем, установите три блока в один ряд) позиционирования блоков Web-страницы? 2. Опишите пример блочной структуры Web-страницы: шапка, меню, три колонки, сведения об авторе? 3. Как произвести очистку обтекания? 31 Лекция4. Позиционирование блока Технология CSSпозволяет размещать блоки в любом месте Web-страницы. Необходимо всего лишь указать координаты блока. Под блоком понимают не только <div>, но и рисунки, списки, заголовки, параграфы. Для позиционирования блока используют принимать одно из четырех значений:  static–  relative–  absolute–  fixed– атрибут positionОн может статическое позиционирование (значение по умолчанию). Положение элемента в окне Web-браузера определяется его положением в тексте HTML-документа; относительное позиционирование. Координаты отсчитываются относительно позиции, в которуюWeb-браузер поместил бы элемент, будь он статически позиционированным; абсолютное позиционирование. Координаты отсчитываются относительно левого верхнего угла родительского элемента; фиксированное позиционирование. Координаты отсчитываются относительно левого верхнего угла окна Web-браузера. При прокрутке содержимого окна блок не смещается. Для указания привязки предназначены следующие атрибуты:  left– расстояние от левой границы;  top-  right-  bottom- расстояние от верхней границы; расстояние от правой границы; расстояние от нижней границы. Эти атрибуты могут иметь отрицательные значения. Статически позиционированные элементы не имеют атрибутов left, top, right и bottom. Абсолютноеи фиксированное позиционирование В технологии CSS, свойство позиционирования обозначается как Position, а что это позиционирование абсолютное, пишут значение Absolute, а затем с помощью слов top, right, bottom, leftуказывают координаты, которые отсчитываются от границ окна браузера. Окно Web-браузера: 32 top left right bottom Преимущество абсолютного позиционирования заключается в том, что блок с абсолютным позиционирование располагается по заданным координатам, а с того места, где он должен был бы быть он удаляется. Рассмотрим обычный документ с изображением и обтекающим его текстом. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Позиционирование блоков</title> <meta http-equiv="Content-Type" content="text/html; chrset=UTF-8"> <style type="text/css"> .p1{font-family:Times New Roman; font-size:14; color:black} .img1 {float:left; width: 250px; height: 250px;} </style> </head> <body> <img class="img1" src="Джо.jpg" > <h3 align="center">Луи де Фюнес (31 июля 1914 - 28 января 1983)</h3> <pclass="p1">Карлос Луи де Фюнес де Галарза родился 31 июля 1914 года близ Парижа в городе Курбевуа. Отец Луи работал в ювелирном магазине, мать хозяйничала в доме. Школьные годы де Фюнес провел дурачась, строя рожи вредным учителям и подшучивая над одноклассниками. Свои клоунские способности он продолжил развивать на театральной коллежской сцене. Шутил он и дома, и в магазине. Без юмора Луи не мог прожить и дня — день такой считался потерянным. К своему совершеннолетию де Фюнес оказался не готовым к строевой службе, о чем свидетельствовал его вес в 55 кг, чем сам Луи был крайне разочарован и смущен. Однако он продолжил учебу в Куломмьерском колледже и даже устроился на работу, правда, все также — смеясь. … 28 января 1983 года Луи де Фюнес скончался.<br> Клермон (фр. Château de Clermont) — усадьба (шато) с господским домом, построенным между 1643 и 1649 близ коммуны Селье, в департаменте Атлантическая Луара, на расстоянии 27 км (17 миль) от города Нант во Франции. Усадьба принадлежала семье Мопассана, прежде чем стать собственностью актера Луи де Фюнеса, который был последним её обитателем. История … </div> </body> </html> Спозиционируем изображение, для чего создадим класс, и присвоим его 33 изображению: Вразделеstyleзапишите: .pos{width:250 px; height:250px; position:absolute;top:100px;left:300px } а в разделе body присвойте класс .pos тегу img с нашим изображением: <img class="pos" src="Джо.jpg"> Итак, изображение переместилось соответственно по указанным координатам (в расчете от верхнего левого угла родительского элемента. В данном случае, окна Web-браузера), при этом удалилось с прежнего места, где его заполнил существующий текст. Текст не обтекает изображение. Кроме того мы видим, что прокрутке текста страницы изображение перемещается вместе с текстом. Если необходимо зафиксировать блок, чтобы он не прокручивался вместе с основным содержимым, указывают значениеFIXED. Относительное позиционирование При относительном позиционировании, блок смещается, но его прежнее место ничего не заполняет. Обозначается как Position:Relative; Координаты в отличие от абсолютного позиционирования, отсчитываются от прежнего положения блока. Для примера воспользуемся документом с изображением и обтекающим его текстом (без применения абсолютного позиционирования). Теперь применим относительное позиционирование к изображению. В раздел styleдобавьте строчку .pos{width:250 px; height:250px; position:relative;top:200px;left:100px } а в разделе body присвойте класс .pos тегу img с нашим изображением: <img class="pos" src="Джо.jpg"> Получим: 200 px 100 px 34 Последовательность отображения слоев Атрибут z-index устанавливает порядок, в котором свободно позиционированные элементы будут перекрываться друг другом. Элемент с большим значением z-index перекрывает элементы с меньшим значением. Значение у родителя равно нулю. Рассмотрим порядок перекрытия на примере, а также приведем пример блочной верстки с использованием абсолютного позиционирования для панели навигации. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Атрибут z-index</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <style type="text/css"> * { margin: 0; padding: 0 } /* Убираемвсеотступы */ body { font-family: Verdana, Tahoma, sans-serif; font-size: 14px } .header { background-color: silver; padding: 10px; height: 50px; text-align: center; line-height: 50px; } .menu { border: 1px solid black; width: 150px; height: 200px; margin: 0; padding: 5px; position: absolute; left: 10px; top: 80px } .text { border: 1px solid black; padding: 5px; margin: 10px 10px 10px 185px; min-height: 500px } .footer { background-color: silver; padding: 5px; height: 30px; line-height: 30px } .div1 { width: 100px; height: 100px; position: absolute; top: 70px; left: 50px; z-index: 1; background-color: silver } .div2 { width: 100px; height: 100px; position: absolute; top: 120px; left: 100px; z-index: 2; background-color: red } .div3 { width: 100px; height: 100px; position: absolute; top: 170px; left: 150px; z-index: 3; background-color: green } </style> </head> <body> <div class="header"><h2>Заголовок</h2></div> <divclass="text"> <h2>Основное содержимое страницы</h2> <p>Какой-то текст</p> <div style="position: relative; top: 30px"> <div class="div1">z-index = 1</div> <div class="div2">z-index = 2</div> <div class="div3">z-index = 3</div> </div> </div> <divclass="footer">Информация об авторских правах</div> <divclass="menu">Панель навигации с абсолютным позиционированием</div> </body> </html> Управление отображением элемента Атрибут visibility задает видимость элемента в окне Web-браузера. Он может принимать следующие значения:  inherit – если родитель видим, то видим и элемент (значение по умолчанию); 35  visible – элемент отображается независимо от видимости родителя;  hidden – элемент скрывается независимо от видимости родителя. Невидимый элемент все равно занимает место на Web-странице. Для того чтобы скрыть элемент и убрать его с Web-страницы, можно воспользоваться атрибутом display со значением none. Атрибуты могут задавать только начальное поведение элемента. Отобразить же скрытый элемент можно только с помощью языка программирования JavaScript Пример: Скрытие и отображение элементов <!DOCTYPEHTMLPUBLIC "-//W3C//DTDHTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Скрытие и отображение элементов</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <script type="text/javascript"> <!-function ChangeAbz1() { abz = document.getElementById("abz1"); if (abz.style.display=="none") { abz.style.display = "block"; } else { abz.style.display = "none"; } } function ChangeAbz2() { abz = document.getElementById("abz2"); if (abz.style.visibility=="hidden") { abz.style.visibility = "visible"; } else { abz.style.visibility = "hidden"; } } //--> </script> </head> <body> <div><a href="#" onclick="ChangeAbz1(); return false">Щелкнитенассылке, чтобыотобразитьилискрытьабзац</a></div> <p id="abz1" style="display: none; background-color: silver">Скрытый абзац</p> <p>Демонстрация применения атрибута display.</p> <div><ahref="#" onclick="ChangeAbz2(); returnfalse">Щелкните на ссылке, чтобы отобразить или скрыть абзац</a></div> <p id="abz2" style="visibility: hidden; background-color: silver">Скрытый абзац</p> <p>Демонстрация применения атрибута visibility.</p> </body> </html> Итак, первая ссылка демонстрирует применение атрибута display. При щелчке на ссылке отображается скрытый абзац, и все содержимое страницы сдвигается вниз. При повторном щелчке абзац скрывается, и все содержимое страницы сдвигается вверх на место скрытого абзаца. Вторая ссылка демонстрирует применение атрибута visibility. При щелчке на ссылке скрытый абзац отображается, а при повторном щелчке – скрывается. Но в отличие от того, что происходит при изменении атрибута display, в этом 36 случает все остальное содержимое страницы остается на своих первоначальных местах. Вопросы для самоконтроля 1. Какой атрибут используется для позиционирования блоков? 2. Какие значения может принимать атрибут position? 3. Что означает привязка элемента? Какие атрибуты предназначены для привязки? 4. Что понимается под абсолютным позиционированием? 5. Что понимается под фиксированным позиционированием? 6. Назовите преимущество абсолютного позиционирования? 7. Что понимается под относительным позиционированием? 8. Как установить последовательность отображения слоев? 9. Какой атрибут помогает задать видимость элемента в окне Web-браузера? 37 Лекция 5. Колонки одной высоты В нашем примере, после добавления информации, блоки contentи navigation_barстали разной высоты. Этот дефект смотрится некрасиво, особенно когда блоки имеют разную заливку. Исправим его. На сегодняшний день существует множество способов справиться с этим недостатком в том числе, некоторые Web-дизайнеры любят прибегать к написанию java-скриптов. В нашем учебном пособии мы предложим кросс-браузерное CSSрешениепридуманное иностранным Web-дизайнером Мэтью Джеймсом Тэйлором. Описание проблемы представлено им схематично: Из рисунка видно, что основная проблема заключается в том, что высота блока зависит от контента в нем. Первым шагом в решении проблемы создания колонок с равной высотой, станет их разделение на части. То есть каждую колонку мы разделим на отдельный блок, чтобы решать проблему по частям. Кроме того, мы, таким образом, отделим контент от его оформления, фон отделим от самого контента. Плавающий контейнер будет всегда той высоты, которую ему придает контент — печальная истина. Единственный способ решить эту проблему, сделать div равным по высоте любой из существующих колонок с контентом — это «обернуть» в него данные колонки. Как видно на рисунке, три блока заключены в один общий блок. Создайтепапку Колонки одной высоты, а в ней два текстовых документа: columns.htmlи style.css. Введите следующий код в документ columns.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 strict //EN" "http//.w3.org/TR/html4/strict.dtd"> 38 <html> <head> <meta http-equiv="Content-Type" Content="text/html; chsrset=utf-8"> <title>Колонки одной высоты</title> <link href="style.css" type="text/css" rel="stylesheet"> </head> <div id="container1"> <div id="col1">Column 1</div> <div id="col2">Column 2</div> <div id="col3">Column 3</div> </div> Файл style.cssзаполните следующим кодом: Код #container1 { float:left; width:100%; } #col1 { float:left; width:30%; background:red; } #col2 { float:left; width:40%; background:yellow; } #col3 { float:left; width:30%; background:green; } Описание Обертка для трех блоков одинаковой высоты: Обтекание: справа Ширина: 100% Колонка 1 Обтекание: справа Ширина: 30% от всей ширины экрана Цвет фона: красный Колонка 2 Обтекание: справа Ширина: 40% от всей ширины экрана Цвет фона: желтый Колонка 3 Обтекание: справа Ширина: 30% от всей ширины экрана Цвет фона: зеленый Сохраните файлы и запустите документ с расширением html в Web-браузере. На экране отобразятся 3 разноцветные колонки по всей ширине окна. Суть данной разметки и CSS заключается в том, что все блоки и те, которые с контентом (#col1, #col2, #col3), и тот, который их содержит (#container1) должны быть плавающими (иметь свойство float, причем не важно в каком направлении). Если мы не придадим свойство float для всех контейнеров, то контейнер, содержащий в себе блоки с контентом не сможет охватить их, и в итоге высота общего конейнера на самом деле будет равна «0», а не высоте самого высокого блока с контентом. Добавление дополнительных вложенных контейнеров Далее нам следует добавить еще несколько контейнеров в основной контейнер, который содержит в себе блоки с контентом. В итоге, мы должны получить равное количеству блоков с тентом, количество 39 ток». В нашем случае нам нужно добавить еще два вложенных контейнера. А далее мы должны убрать свойство background у блоков с контентом и «передать» его «контейнерам-оберткам». В результате код в HTML-документе изменится следующим образом: <div id="container3"> <div id="container2"> <div id="container1"> <div id="col1">Column 1</div> <div id="col2">Column 2</div> <div id="col3">Column 3</div> </div> </div> </div> А CSS-документ, обратите внимание, что все конейнеры имеют свойство float, а «контейнеры-обертки» имеют ширину 100%. При этом фон имеют только «обертки»: #container3{ float:left; width:100%; background:green; } #container2{ float:left; width:100%; background:yellow; } #container1{ float:left; width:100%; background:red; } #col1{ float:left; width:30%; } #col2{ float:left; width:40%; } #col3{ float:left; width:30%; } Сдвигаем контейнеры с помощью относительного позиционирования Используя относительное позиционирование мы передвинем контейнеры на их новое место. При правильном позиционировании «контейнера-обертки» становится виден лежащий под ним слой, что и создает иллюзию равной высота колонок. DIV с #container2 мы смещаем на 30% влево относительно содержащего его блока, и обнажаем зеленый фон #container3. А DIV с #container1 мы сдвигает на 40% влево относительно содержащего его блока #container2 и обнажаем желтый фон последнего для центральной колонки. Соответственно красная секция остается видимой всего на 30% и формирует красный фон для третьей колонки. 40 В результате CSS-код изменится следующим образом: #container3{ float:left; width:100%; background:green; } #container2{ float:left; width:100%; background:yellow; position:relative; right:30%; } #container1{ float:left; width:100%; background:red; position:relative; right:40%; } #col1{ 41 float:left; width:30%; } #col2{ float:left; width:40%; } #col3{ float:left; width:30%; } Возвращаем колонки с контентом на свои позиции Теперь нам нужно вернуть на место колонки с контентом, которые сместились вместе с содержащим их контейнером. Для этого мы снова применяем относительное позиционирование. И последнее, что нам нужно сделать — это «обрезать» все, что выступает за пределы видимой области, назначив overflow:hidden; самому первому «контейнеру-обертке». В нашем случае это #container3. Смотрим CSS приведённых выше операций: #container3{ float:left; width:100%; background:green; overflow:hidden; position:relative; } #container2{ float:left; width:100%; background:yellow; position:relative; right:30%; 42 } #container1{ float:left; width:100%; background:red; position:relative; right:40%; } #col1{ float:left; width:30%; position:relative; left:70%; } #col2{ float:left; width:40%; position:relative; left:70%; } #col3{ float:left; width:30%; position:relative; left:70%; } В заключении добавимотступы в колонках с контентом. Казалось бы, необходимо добавить отступы с помощью padding, но тогда наша разметка потеряет кроссбраузерность, за счет известного бага Internet Explorer с подсчетом ширины колонок. Создадимвидимость отступов, сделаем наши колонки уже, с учетом величины отступов слева и справа, а потом сдвинем их на нужное число с помощью относительного позиционирования. Возьмем, например,величину отступа равной 2% , следовательно, наша колонка шириной 30% будет равна 26%, а колонка шириной 40% будет равна 36%. Но теперь, когда мы будем возвращать колонки на место с помощью позиционирования, нам нужно помнить, что они стали уже и, соответственно, увеличить процент смещения для каждой колонки. В нашем случае для первой на 2%, а для остальных к смещению предыдущей добавляем еще 4%. 43 В результирующем CSS-коде нам еще нужно добавить для каждой колонки с контентом свойство overflow:hidden;, для того, чтобы в случае, если содержимое превысит допустимую ширину, например картинка слишком широка, наша разметка не развалилась. Это сделано для InternetExplorer, поскольку другие браузеры удержат разметку даже в таком случае. #container3{ float:left; width:100%; background:green; overflow:hidden; position:relative; } #container2{ float:left; width:100%; background:yellow; position:relative; right:30%; } #container1{ float:left; width:100%; background:red; 44 position:relative; right:40%; } #col1{ float:left; width:26%; position:relative; left:72%; overflow:hidden; } #col2{ float:left; width:36%; position:relative; left:76%; overflow:hidden; } #col3{ float:left; width:26%; position:relative; left:80%; overflow:hidden; } Вопросы для самоконтроля 1. Какие способы борьбы с недостатком блочной структуры, «Колонки одной высоты», вы знаете? 2. Расскажите сущность способа установления колонок одной высоты, кроссбраузерное CSS–решение. 3. Как проверить CSS-код на соответствие стандартам? 45 </div> </div> </article> </div> </div> <aside class="lecture-grid__aside aside"> <section class="lecture-authors" data-section="lectureAuthors" aria-label="Авторы лекции"> <div class="lecture-authors__row"> <div class="lecture-authors__heading text text--xl text--bold">Разместил пособие</div> <div class="lecture-authors__author"> <img class="lecture-authors__avatar" src="/assets/img/handbookLectures/defaultAvatar.png" alt="Автор статьи" > <div class="lecture-authors__name text text--m text--bold">RevStankovi</div> <div class="lecture-authors__desc text text--m"> Эксперт по предмету «Информатика» </div> </div> </div> </section> <section class="aside-sharing aside__sharing" aria-labelledby="aside-sharing__headline" data-section="sharing" > <div class="aside-sharing__headline headline headline--4" id="aside-sharing__headline"> Поделись лекцией и получи <mark>скидку 30%</mark> на платформе Автор24 </div> <div class="text text--m"> Заполни поля и прикрепи лекцию. Мы вышлем промокод со скидкой тебе на почту </div> <form class="aside-sharing__form" data-js="sharingForm" action="#" method="POST" > <input class="aside-sharing__input input input--size_s input--gray" type="text" name="title" placeholder="Название лекции" aria-label="Название лекции" required > <input class="aside-sharing__input input input--size_s input--gray" type="email" name="email" placeholder="E-mail для промокода" aria-label="E-mail для промокода" required > <div class="aside-sharing__file-error text text--s" data-js="errorElement" hidden> <span data-js="errorText">Файл слишком большой. Попробуй прикрепить другой или уменьшить размер</span> <button class="aside-sharing__error-close" data-js="buttonCloseError" type="button"> <span class="visually-hidden">Закрыть сообщение ошибке</span> <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"> <path fill-rule="evenodd" clip-rule="evenodd" d="M6.201 4.92923C5.81048 4.53871 5.17731 4.5387 4.78679 4.92923C4.39626 5.31975 4.39626 5.95292 4.78679 6.34344L10.4437 12.0003L4.78683 17.6572C4.39631 18.0477 4.39631 18.6809 4.78683 19.0714C5.17736 19.4619 5.81052 19.4619 6.20104 19.0714L11.8579 13.4145L17.5147 19.0714C17.9052 19.4619 18.5384 19.4619 18.9289 19.0714C19.3194 18.6808 19.3194 18.0477 18.9289 17.6572L13.2721 12.0003L18.929 6.34347C19.3195 5.95295 19.3195 5.31978 18.929 4.92926C18.5384 4.53873 17.9053 4.53873 17.5148 4.92926L11.8579 10.5861L6.201 4.92923Z" fill="currentColor"/> </svg> </button> </div> <div class="aside-sharing__buttons"> <label class="aside-sharing__file-label action-button action-button--size_m action-button--fill-violet action-button--with-icon" data-js="fileLabel" type="button" > <input class="visually-hidden" type="file" name="document" accept=".docx,.doc,.txt,.odt,.pdf,.jpg,.png,.jpeg,.rar,.zip,.pptx,.ppt,.xlsx,.xls" required > <svg width="16" height="17" viewBox="0 0 16 17" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"> <path fill-rule="evenodd" clip-rule="evenodd" d="M12.4712 7.63344L7.16702 12.989C6.13158 14.0228 4.47486 14.0228 3.47282 13.0157C2.4641 12.0086 2.47078 10.3612 3.49954 9.32748L6.37875 6.49964C6.75284 6.12615 7.35407 6.12615 7.7148 6.49297C8.03546 6.8131 8.01542 7.48005 7.82169 7.69347C7.62796 7.90689 5.99797 9.51422 5.99797 9.51422C5.72408 9.78767 5.72408 10.2278 5.99797 10.5013C6.27186 10.7747 6.71276 10.7747 6.98665 10.5013L8.69681 8.81393C9.61201 7.90022 9.61869 6.41961 8.70349 5.50589C7.84173 4.64554 6.46559 4.59885 5.55039 5.36584L2.52422 8.3404C0.954353 9.90772 0.927632 12.4488 2.4975 14.0094C4.06069 15.5701 6.5992 15.5434 8.16906 13.9827L13.4732 8.62052C15.0364 7.05987 15.0765 4.53216 13.52 2.97818C11.9635 1.4242 9.43164 1.46422 7.86177 3.02487L8.85045 4.01194C9.8859 2.97818 11.5359 2.97151 12.5313 3.96526C13.5267 4.959 13.5267 6.60635 12.4845 7.64011" fill="currentColor"/> </svg> <span class="aside-sharing__file-label-text text text--m text--bold">Прикрепить лекцию</span> </label> <button class="aside-sharing__submit action-button action-button--size_m action-button--fill-yellow" data-js="sharingFormSubmit" disabled > <span class="text text--m text--bold">Отправить</span> <span class="button-preloader"><svg aria-hidden="true" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg" > <path d="M75.4 126.63a11.43 11.43 0 0 1-2.1-22.65 40.9 40.9 0 0 0 30.5-30.6 11.4 11.4 0 1 1 22.27 4.87h.02a63.77 63.77 0 0 1-47.8 48.05v-.02a11.38 11.38 0 0 1-2.93.37z" fill="currentColor"/> </svg></span> </button> </div> <div class="aside-sharing__policy accept-policy"> <div class="accept-policy__custom-checkbox"> <input class="accept-policy__native-input" id="aside-sharing__policy-checkbox" name="license" type="checkbox" required > <label class="accept-policy__decor-label" for="aside-sharing__policy-checkbox" > <svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"> <path fill-rule="evenodd" clip-rule="evenodd" d="M13.1121 3.34483C13.612 3.82094 13.6313 4.61216 13.1552 5.11207L6.53572 12.0625L3.34483 8.71207C2.86872 8.21216 2.88802 7.42094 3.38793 6.94483C3.88785 6.46872 4.67907 6.48802 5.15517 6.98793L6.53572 8.4375L11.3448 3.38793C11.8209 2.88802 12.6122 2.86872 13.1121 3.34483Z" fill="currentColor"/> </svg> <span class="visually-hidden">Принять пользовательское соглашение</span> </label> </div> <div class="accept-policy__text accept-policy__text--color_gray text text--s"> Согласен с <a href="https://avtor24.ru/info/confidentiality/" target="_blank" rel="noopener noreferrer"> политикой конфиденциальности </a> и <a href="https://avtor24.ru/info/license/" target="_blank" rel="noopener noreferrer"> пользовательским соглашением </a> </div> </div> </form> <div class="aside-sharing__feedback" data-js="feedback" hidden> <div class="aside-sharing__feedback-text text text--xl text--bold" data-js="feedbackTitle"> Твоя лекция отправлена! Жди скидку на почте. Есть еще материалы? Загрузи прямо сейчас 😍 </div> <button class="action-button action-button--size_m action-button--fill-violet text text--l text--bold" data-js="returnToForm" type="button" > Загрузить еще лекции </button> </div> </section> <section class="kampus-banner-aside aside__kampus-banner-aside kampus-banner-aside--lib" aria-label="Найди решение своей задачи среди 1 000 000 ответов"> <div class="kampus-banner-aside__meta"> <img src="/assets/img/_shared/banner-kampus/kampus-form_decor.png" role="presentation" loading="lazy" > <span class="text text--m"> Статья: Разработка Web-страниц </span> </div> <div class="kampus-banner-aside__headline headline"> Найди решение своей задачи среди 1 000 000 ответов </div> <a class="kampus-banner-aside__link action-button" href="https://fart22.ru/Ts426w/?utm_source=spravochnick&utm_medium=lektoriy&utm_campaign=rightbar&utm_content=form&place=spravochnik_banners_biblioteka" target="_blank" > <span class="text text--bold">Найти решение задачи</span> </a> </section> </aside> </article> <div class="content-wrapper"> <section class="lecture-grid__banner lecture-banner" aria-label="Полезно для написания работы по теме"> <div class="lecture-banner__headline headline headline--2">«Разработка Web-страниц» 👇</div> <div class="lecture-banner__cards"> <section class="lecture-banner__card" aria-label="Готовые работы студентов"> <div class="text text--xl text--bold"> Готовые курсовые работы и рефераты </div> <a class="lecture-banner__card-link action-button action-button--size_m action-button--fill-violet" href="https://avtor24.ru/unreg-order/" onclick="yaCounter12075784.reachGoal('main-block-article-sprav', {main_block: {'click_ready':1}});" target="_blank" > <span class="text text--m text--bold">Купить от 250 ₽</span> </a> </section> <section class="lecture-banner__card" aria-label="Помощь в решении задач от искусственного интеллекта"> <div class="text text--xl text--bold"> Решение задач от ИИ за 2 минуты </div> <a class="lecture-banner__card-link lecture-banner__card-link--blue action-button action-button--with-icon action-button--size_m" href="https://fart22.ru/Ts426w/?utm_source=spravochnick&utm_medium=lektoriy&utm_campaign=central&utm_content=banner_2&place=banners_AI" target="_blank" > <span class="text text--m text--bold">Решить задачу</span> <svg xmlns="http://www.w3.org/2000/svg" width="25" height="24" viewBox="0 0 25 24" aria-hidden="true"> <path fill="currentColor" d="M18.618 8.502c-.098-.098-.296-.295-.394-.295-.099-.099-.296-.099-.395-.099h-.099a.755.755 0 0 0-.493.197c-.099.099-.296.296-.296.395-.099.197-.198.492-.395.69-.296-1.479-.888-2.957-1.875-4.237-.987-1.38-2.368-2.365-3.947-3.054C10.625 2 10.526 2 10.329 2s-.395.099-.493.099a.77.77 0 0 0-.395.394c-.099.098-.099.295-.099.492-.099 2.266-.888 4.434-2.368 6.306C5.69 10.768 5 12.739 5 14.709c0 1.97.79 3.744 2.171 5.123C8.553 21.212 10.428 22 12.5 22h.099c.986 0 1.875-.197 2.763-.493.888-.394 1.776-.886 2.467-1.576.69-.69 1.283-1.478 1.579-2.364a6.945 6.945 0 0 0 .592-2.76c0-4.63-1.382-6.305-1.382-6.305Zm-1.085 8.178a5.59 5.59 0 0 1-1.184 1.773 5.601 5.601 0 0 1-1.777 1.183c-.592.197-1.282.394-1.973.394H12.5a5.453 5.453 0 0 1-3.849-1.577c-.987-.985-1.579-2.364-1.579-3.744 0-1.576.592-3.054 1.58-4.236 1.282-1.675 2.17-3.744 2.565-5.813 1.184.69 2.171 1.774 2.665 2.956.592 1.28.79 2.66.493 4.04 0 .196 0 .393.099.59a.77.77 0 0 0 .394.394c.198.099.395.197.592.197.198 0 .395-.098.593-.197.592-.394 1.184-.886 1.579-1.379.296 1.084.394 2.266.394 3.35-.098.69-.197 1.38-.493 2.069Z"/> </svg> </a> </section> <section class="lecture-banner__card" aria-label="Помощь в решении задач"> <div class="text text--xl text--bold"> Найди решение своей задачи среди 1 000 000 ответов </div> <a class="lecture-banner__card-link lecture-banner__card-link--blue action-button action-button--with-icon action-button--size_m" href="https://fart22.ru/Ts426w/?utm_source=spravochnick&utm_medium=lektoriy&utm_campaign=central&utm_content=banner_2&place=spravochnik_banners_biblioteka" target="_blank" > <span class="text text--m text--bold">Найти</span> <svg xmlns="http://www.w3.org/2000/svg" width="25" height="24" viewBox="0 0 25 24" aria-hidden="true"> <path fill="currentColor" d="M18.618 8.502c-.098-.098-.296-.295-.394-.295-.099-.099-.296-.099-.395-.099h-.099a.755.755 0 0 0-.493.197c-.099.099-.296.296-.296.395-.099.197-.198.492-.395.69-.296-1.479-.888-2.957-1.875-4.237-.987-1.38-2.368-2.365-3.947-3.054C10.625 2 10.526 2 10.329 2s-.395.099-.493.099a.77.77 0 0 0-.395.394c-.099.098-.099.295-.099.492-.099 2.266-.888 4.434-2.368 6.306C5.69 10.768 5 12.739 5 14.709c0 1.97.79 3.744 2.171 5.123C8.553 21.212 10.428 22 12.5 22h.099c.986 0 1.875-.197 2.763-.493.888-.394 1.776-.886 2.467-1.576.69-.69 1.283-1.478 1.579-2.364a6.945 6.945 0 0 0 .592-2.76c0-4.63-1.382-6.305-1.382-6.305Zm-1.085 8.178a5.59 5.59 0 0 1-1.184 1.773 5.601 5.601 0 0 1-1.777 1.183c-.592.197-1.282.394-1.973.394H12.5a5.453 5.453 0 0 1-3.849-1.577c-.987-.985-1.579-2.364-1.579-3.744 0-1.576.592-3.054 1.58-4.236 1.282-1.675 2.17-3.744 2.565-5.813 1.184.69 2.171 1.774 2.665 2.956.592 1.28.79 2.66.493 4.04 0 .196 0 .393.099.59a.77.77 0 0 0 .394.394c.198.099.395.197.592.197.198 0 .395-.098.593-.197.592-.394 1.184-.886 1.579-1.379.296 1.084.394 2.266.394 3.35-.098.69-.197 1.38-.493 2.069Z"/> </svg> </a> </section> </div> </section> <section class="lecture-buttons main__lecture-buttons" aria-label="Сохранить лекцию"> <button class="lecture-buttons__bookmark action-button action-button--with-icon action-button--size_m action-button--fill-violet-light" data-js="bookmarkButton" type="button" > <span class="text text--m text--bold">В закладки</span> <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"> <path d="M20.66 2.09C19.96 1.39 19.02 1 18.03 1H6.73C5.73 1 4.8 1.39 4.1 2.09C3.39 2.79 3 3.73 3 4.73V22.88C3 23.04 3.04 23.2 3.13 23.33C3.21 23.47 3.33 23.58 3.47 23.65C3.59 23.72 3.73 23.75 3.87 23.75C3.89 23.75 3.91 23.75 3.93 23.75C4.09 23.74 4.24 23.69 4.37 23.6L12.37 18.69L20.37 23.59C20.71 23.83 21.2 23.79 21.49 23.49C21.66 23.32 21.75 23.1 21.75 22.87V4.73C21.75 3.74 21.36 2.8 20.66 2.1V2.09ZM20 4.72V21.21L12.88 16.91C12.73 16.81 12.56 16.75 12.38 16.75C12.2 16.75 12.03 16.8 11.89 16.9L4.75 21.21V4.73C4.75 4.2 4.96 3.71 5.33 3.33C5.7 2.96 6.2 2.75 6.73 2.75H18.03C18.55 2.75 19.06 2.96 19.43 3.33C19.8 3.7 20.01 4.21 20.01 4.73L20 4.72Z" fill="currentColor"/> </svg> </button> <button class="action-button action-button--with-icon action-button--size_m action-button--fill-violet-light" data-js="downloadLink" data-file-url="https://spravochnick.ru/lektoriy/getFilePreview/16314587" type="button" > <span class="text text--m text--bold">Скачать, pdf</span> <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"> <path fill-rule="evenodd" clip-rule="evenodd" d="M11.3725 17.77C11.3725 17.77 11.3225 17.73 11.3025 17.7L4.2925 10.71C3.9025 10.32 3.9025 9.69 4.2925 9.3C4.6825 8.91 5.3125 8.91 5.7025 9.3L10.9925 14.59V2C10.9925 1.45 11.4425 1 11.9925 1C12.5425 1 12.9925 1.45 12.9925 2V14.59L18.2825 9.3C18.6725 8.91 19.3025 8.91 19.6925 9.3C20.0825 9.69 20.0825 10.32 19.6925 10.71L12.6925 17.71C12.6925 17.71 12.6425 17.76 12.6225 17.78L12.6025 17.8H12.5925C12.5925 17.8 12.5625 17.83 12.5525 17.84L12.5225 17.86H12.5025L12.4725 17.89L12.4425 17.91H12.4225L12.3925 17.94H12.3625V17.96H12.3425L12.3025 17.98H12.2425L12.2025 18C12.2025 18 12.1725 18 12.1625 18H12.1025C12.0325 18.01 11.9725 18.01 11.9025 18H11.8425C11.8425 18 11.8125 17.99 11.8025 17.99H11.7525V17.97H11.7025L11.6625 17.95H11.6425L11.6125 17.93H11.5825V17.91H11.5625L11.5325 17.89L11.5025 17.87H11.4825L11.4525 17.84C11.4525 17.84 11.4325 17.82 11.4225 17.82H11.4125V17.8L11.3725 17.78V17.77ZM5.0025 20H19.0025C19.5525 20 20.0025 20.45 20.0025 21C20.0025 21.55 19.5525 22 19.0025 22H5.0025C4.4525 22 4.0025 21.55 4.0025 21C4.0025 20.45 4.4525 20 5.0025 20Z" fill="currentColor"/> </svg> </button> </section> </div> <section class="sharing-form" data-section="sharing"> <div class="content-wrapper"> <div class="sharing-form__inner"> <h2 class="sharing-form__headline headline headline--1"> Поделись лекцией и получи промокод на <mark>скидку 30%</mark> на платформе Автор24 </h2> <p class="sharing-form__text text text--xl"> Заполни поля и прикрепи лекцию. Мы вышлем промокод со скидкой тебе на почту </p> <form class="sharing-form__form" name="mainSharingForm" data-js="sharingForm" action="#" method="POST" > <input class="sharing-form__input input input--size_m input--light text text--l" type="text" name="title" placeholder="Название лекции" aria-label="Название лекции" required > <input class="sharing-form__input input input--size_m input--light text text--l" type="email" name="email" placeholder="E-mail для промокода" aria-label="E-mail для промокода" required > <div class="sharing-form__buttons"> <label class="sharing-form__file-label action-button action-button--size_m action-button--fill-pink action-button--with-icon" data-js="fileLabel" type="button" > <input class="visually-hidden" type="file" name="document" accept=".docx,.doc,.txt,.odt,.pdf,.jpg,.png,.jpeg,.rar,.zip,.pptx,.ppt,.xlsx,.xls" required > <svg width="16" height="17" viewBox="0 0 16 17" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"> <path fill-rule="evenodd" clip-rule="evenodd" d="M12.4712 7.63344L7.16702 12.989C6.13158 14.0228 4.47486 14.0228 3.47282 13.0157C2.4641 12.0086 2.47078 10.3612 3.49954 9.32748L6.37875 6.49964C6.75284 6.12615 7.35407 6.12615 7.7148 6.49297C8.03546 6.8131 8.01542 7.48005 7.82169 7.69347C7.62796 7.90689 5.99797 9.51422 5.99797 9.51422C5.72408 9.78767 5.72408 10.2278 5.99797 10.5013C6.27186 10.7747 6.71276 10.7747 6.98665 10.5013L8.69681 8.81393C9.61201 7.90022 9.61869 6.41961 8.70349 5.50589C7.84173 4.64554 6.46559 4.59885 5.55039 5.36584L2.52422 8.3404C0.954353 9.90772 0.927632 12.4488 2.4975 14.0094C4.06069 15.5701 6.5992 15.5434 8.16906 13.9827L13.4732 8.62052C15.0364 7.05987 15.0765 4.53216 13.52 2.97818C11.9635 1.4242 9.43164 1.46422 7.86177 3.02487L8.85045 4.01194C9.8859 2.97818 11.5359 2.97151 12.5313 3.96526C13.5267 4.959 13.5267 6.60635 12.4845 7.64011" fill="currentColor"/> </svg> <span class="sharing-form__file-label-text text text--l text--bold">Прикрепить лекцию</span> </label> <button class="sharing-form__submit action-button action-button--size_m action-button--fill-yellow" data-js="sharingFormSubmit" disabled > <span class="text text--l text--bold">Отправить</span> <span class="button-preloader"><svg aria-hidden="true" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg" > <path d="M75.4 126.63a11.43 11.43 0 0 1-2.1-22.65 40.9 40.9 0 0 0 30.5-30.6 11.4 11.4 0 1 1 22.27 4.87h.02a63.77 63.77 0 0 1-47.8 48.05v-.02a11.38 11.38 0 0 1-2.93.37z" fill="currentColor"/> </svg></span> </button> </div> <div class="sharing-form__policy accept-policy"> <div class="accept-policy__custom-checkbox"> <input class="accept-policy__native-input" id="share-lecture-policy" name="license" type="checkbox" required > <label class="accept-policy__decor-label" for="share-lecture-policy" > <svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"> <path fill-rule="evenodd" clip-rule="evenodd" d="M13.1121 3.34483C13.612 3.82094 13.6313 4.61216 13.1552 5.11207L6.53572 12.0625L3.34483 8.71207C2.86872 8.21216 2.88802 7.42094 3.38793 6.94483C3.88785 6.46872 4.67907 6.48802 5.15517 6.98793L6.53572 8.4375L11.3448 3.38793C11.8209 2.88802 12.6122 2.86872 13.1121 3.34483Z" fill="currentColor"/> </svg> <span class="visually-hidden">Принять пользовательское соглашение</span> </label> </div> <div class="accept-policy__text text text--m"> Согласен с <a href="https://avtor24.ru/info/confidentiality/" target="_blank" rel="noopener noreferrer"> политикой конфиденциальности </a> и <a href="https://avtor24.ru/info/license/" target="_blank" rel="noopener noreferrer"> пользовательским соглашением </a> </div> </div> <div class="sharing-form__file-error text text--m" hidden data-js="errorElement"> <span>🧐</span> <span data-js="errorText">Файл слишком большой. Попробуй прикрепить другой или уменьшить размер</span> <button class="sharing-form__error-close" data-js="buttonCloseError" type="button"> <span class="visually-hidden">Закрыть сообщение ошибке</span> <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"> <path fill-rule="evenodd" clip-rule="evenodd" d="M6.201 4.92923C5.81048 4.53871 5.17731 4.5387 4.78679 4.92923C4.39626 5.31975 4.39626 5.95292 4.78679 6.34344L10.4437 12.0003L4.78683 17.6572C4.39631 18.0477 4.39631 18.6809 4.78683 19.0714C5.17736 19.4619 5.81052 19.4619 6.20104 19.0714L11.8579 13.4145L17.5147 19.0714C17.9052 19.4619 18.5384 19.4619 18.9289 19.0714C19.3194 18.6808 19.3194 18.0477 18.9289 17.6572L13.2721 12.0003L18.929 6.34347C19.3195 5.95295 19.3195 5.31978 18.929 4.92926C18.5384 4.53873 17.9053 4.53873 17.5148 4.92926L11.8579 10.5861L6.201 4.92923Z" fill="currentColor"/> </svg> </button> </div> </form> <div class="sharing-form__feedback" data-js="feedback" hidden> <div class="sharing-form__feedback-text text text--xl text--bold" data-js="feedbackTitle"> Твоя лекция отправлена! Жди скидку на почте. Есть еще материалы? Загрузи прямо сейчас😍 </div> <button class="action-button action-button--size_m action-button--fill-yellow text text--xl text--bold" data-js="returnToForm" type="button" > Загрузить еще лекции </button> </div> </div> </div> </section> <section class="main__block main__block--mt_null another-lectures content-wrapper"> <div class="another-lectures__header"> <h2 class="another-lectures__headline headline headline--1"> Тебе могут подойти лекции </h2> <div class="slider-controls"> <button class="slider-controls__button slider-controls__button--prev" type="button" data-button="prevSlide" > <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"> <path d="M8.86955 12.4906C8.8691 12.2907 8.95043 12.0969 9.09943 11.943L14.0968 6.8091C14.2665 6.63437 14.5103 6.52448 14.7746 6.50362C15.0389 6.48276 15.302 6.55263 15.5061 6.69787C15.7102 6.84311 15.8386 7.05181 15.863 7.27806C15.8873 7.50432 15.8057 7.72959 15.6361 7.90433L11.1584 12.4906L15.4761 17.0768C15.5592 17.1644 15.6212 17.2651 15.6586 17.3732C15.696 17.4813 15.7081 17.5946 15.6941 17.7068C15.6802 17.8189 15.6405 17.9275 15.5774 18.0265C15.5142 18.1254 15.4289 18.2127 15.3262 18.2833C15.2234 18.3617 15.1029 18.421 14.9721 18.4576C14.8413 18.4942 14.703 18.5073 14.566 18.4961C14.4291 18.4848 14.2963 18.4495 14.176 18.3923C14.0557 18.335 13.9505 18.2572 13.867 18.1635L9.03946 13.0296C8.91401 12.8713 8.85419 12.6815 8.86955 12.4906Z" fill="currentColor"/> </svg> </button> <button class="slider-controls__button slider-controls__button--next" type="button" data-button="nextSlide" > <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"> <path d="M15.8648 12.5094C15.8653 12.7093 15.7839 12.9031 15.6349 13.057L10.6375 18.1909C10.4679 18.3656 10.2241 18.4755 9.9598 18.4964C9.69551 18.5172 9.43236 18.4474 9.22825 18.3021C9.02414 18.1569 8.89578 17.9482 8.87142 17.7219C8.84705 17.4957 8.92867 17.2704 9.09832 17.0957L13.576 12.5094L9.25824 7.92315C9.17521 7.83563 9.11321 7.73492 9.0758 7.62682C9.03839 7.51872 9.0263 7.40536 9.04023 7.29324C9.05417 7.18113 9.09384 7.07248 9.15698 6.97353C9.22013 6.87459 9.30549 6.7873 9.40816 6.71669C9.51093 6.63833 9.63149 6.57899 9.7623 6.54237C9.8931 6.50576 10.0313 6.49266 10.1683 6.50391C10.3053 6.51515 10.4381 6.5505 10.5584 6.60772C10.6787 6.66495 10.7839 6.74283 10.8674 6.83648L15.6949 11.9704C15.8204 12.1287 15.8802 12.3185 15.8648 12.5094Z" fill="currentColor"/> </svg> </button> </div> </div> <div class="another-lectures__slider swiper-container" data-js="anotherLecturesSlider"> <div class="swiper-wrapper"> <div class="another-lectures__card swiper-slide"> <div class="another-lectures__card-header"> <a class="another-lectures__card-subject-link text text--xs text--bold text--gray" href="/lektoriy/subject/informacionnye_tehnologii/" target="_blank" > ИНФОРМАЦИОННЫЕ ТЕХНОЛОГИИ </a> <div class="another-lectures__card-type text text--m">#Лекция</div> <h3 class="another-lectures__card-title text text--xl text--bold"> <a class="another-lectures__card-link" href="/lektoriy/veb-programmirovanie/" target="_blank"> Веб-программирование. </a> </h3> </div> </div> <div class="another-lectures__card swiper-slide"> <div class="another-lectures__card-header"> <a class="another-lectures__card-subject-link text text--xs text--bold text--gray" href="/lektoriy/subject/programmirovanie/" target="_blank" > ПРОГРАММИРОВАНИЕ </a> <div class="another-lectures__card-type text text--m">#Лекция</div> <h3 class="another-lectures__card-title text text--xl text--bold"> <a class="another-lectures__card-link" href="/lektoriy/razrabotka-web-prilozheniy/" target="_blank"> Разработка web-приложений </a> </h3> </div> </div> <div class="another-lectures__card swiper-slide"> <div class="another-lectures__card-header"> <a class="another-lectures__card-subject-link text text--xs text--bold text--gray" href="/lektoriy/subject/informatika/" target="_blank" > ИНФОРМАТИКА </a> <div class="another-lectures__card-type text text--m">#Лекция</div> <h3 class="another-lectures__card-title text text--xl text--bold"> <a class="another-lectures__card-link" href="/lektoriy/vvedenie-v-internet-tehnologii-i-kompyuternoe-modelirovanie/" target="_blank"> Введение в интернет технологии и компьютерное моделирование </a> </h3> </div> </div> <div class="another-lectures__card swiper-slide"> <div class="another-lectures__card-header"> <a class="another-lectures__card-subject-link text text--xs text--bold text--gray" href="/lektoriy/subject/informatika/" target="_blank" > ИНФОРМАТИКА </a> <div class="another-lectures__card-type text text--m">#Лекция</div> <h3 class="another-lectures__card-title text text--xl text--bold"> <a class="another-lectures__card-link" href="/lektoriy/upravlenie-it-servisami-predpriyatiyaoxksm/" target="_blank"> Управление IT-сервисами предприятия </a> </h3> </div> </div> <div class="another-lectures__card swiper-slide"> <div class="another-lectures__card-header"> <a class="another-lectures__card-subject-link text text--xs text--bold text--gray" href="/lektoriy/subject/informatika/" target="_blank" > ИНФОРМАТИКА </a> <div class="another-lectures__card-type text text--m">#Лекция</div> <h3 class="another-lectures__card-title text text--xl text--bold"> <a class="another-lectures__card-link" href="/lektoriy/sostav-i-naznachenie-sistemnogo-programmnogo-obespecheniya-vychislitelnoy-tehniki/" target="_blank"> Состав и назначение системного программного обеспечения вычислительной техники </a> </h3> </div> </div> <div class="another-lectures__card swiper-slide"> <div class="another-lectures__card-header"> <a class="another-lectures__card-subject-link text text--xs text--bold text--gray" href="/lektoriy/subject/informatika/" target="_blank" > ИНФОРМАТИКА </a> <div class="another-lectures__card-type text text--m">#Лекция</div> <h3 class="another-lectures__card-title text text--xl text--bold"> <a class="another-lectures__card-link" href="/lektoriy/rabota-s-grafikoy-v-adobe-photoshop-i-flash-cs/" target="_blank"> Работа с графикой в Adobe Photoshop и Flash CS. </a> </h3> </div> </div> <div class="another-lectures__card swiper-slide"> <div class="another-lectures__card-header"> <a class="another-lectures__card-subject-link text text--xs text--bold text--gray" href="/lektoriy/subject/informacionnye_tehnologii/" target="_blank" > ИНФОРМАЦИОННЫЕ ТЕХНОЛОГИИ </a> <div class="another-lectures__card-type text text--m">#Лекция</div> <h3 class="another-lectures__card-title text text--xl text--bold"> <a class="another-lectures__card-link" href="/lektoriy/principy-razrabotki-i-analiza-algoritmov-opredelenie-informacionnoy-tehnologii/" target="_blank"> Принципы разработки и анализа алгоритмов определение информационной технологии </a> </h3> </div> </div> <div class="another-lectures__card swiper-slide"> <div class="another-lectures__card-header"> <a class="another-lectures__card-subject-link text text--xs text--bold text--gray" href="/lektoriy/subject/bazy_dannyh/" target="_blank" > БАЗЫ ДАННЫХ </a> <div class="another-lectures__card-type text text--m">#Лекция</div> <h3 class="another-lectures__card-title text text--xl text--bold"> <a class="another-lectures__card-link" href="/lektoriy/osnovnye-ponyatiya-i-opredeleniya-baz-dannyh-relyacionnaya-model-dannyh-yazyk-sql/" target="_blank"> Основные понятия и определения баз данных. Реляционная модель данных. Язык SQL </a> </h3> </div> </div> <div class="another-lectures__card swiper-slide"> <div class="another-lectures__card-header"> <a class="another-lectures__card-subject-link text text--xs text--bold text--gray" href="/lektoriy/subject/programmirovanie/" target="_blank" > ПРОГРАММИРОВАНИЕ </a> <div class="another-lectures__card-type text text--m">#Лекция</div> <h3 class="another-lectures__card-title text text--xl text--bold"> <a class="another-lectures__card-link" href="/lektoriy/informacionnoe-i-lingvisticheskoe-obespechenie-avtomatizirovannyh-sistem/" target="_blank"> Информационное и лингвистическое обеспечение автоматизированных систем </a> </h3> </div> <div class="another-lectures__author text text--m"> Автор(ы) <b>Г.П. Токмаков</b> </div> </div> <div class="another-lectures__card swiper-slide"> <div class="another-lectures__card-header"> <a class="another-lectures__card-subject-link text text--xs text--bold text--gray" href="/lektoriy/subject/informatika/" target="_blank" > ИНФОРМАТИКА </a> <div class="another-lectures__card-type text text--m">#Лекция</div> <h3 class="another-lectures__card-title text text--xl text--bold"> <a class="another-lectures__card-link" href="/lektoriy/html5/" target="_blank"> HTML5 </a> </h3> </div> </div> </div> </div> <a class="another-lectures__link action-button action-button--size_m action-button--fill-violet-light action-button--with-icon" href="/lektoriy/subject/informatika/" target="_blank" > Смотреть все 462 лекции <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"> <path d="M15.8648 12.5094C15.8653 12.7093 15.7839 12.9031 15.6349 13.057L10.6375 18.1909C10.4679 18.3656 10.2241 18.4755 9.9598 18.4964C9.69551 18.5172 9.43236 18.4474 9.22825 18.3021C9.02414 18.1569 8.89578 17.9482 8.87142 17.7219C8.84705 17.4957 8.92867 17.2704 9.09832 17.0957L13.576 12.5094L9.25824 7.92315C9.17521 7.83563 9.11321 7.73492 9.0758 7.62682C9.03839 7.51872 9.0263 7.40536 9.04023 7.29324C9.05417 7.18113 9.09384 7.07248 9.15698 6.97353C9.22013 6.87459 9.30549 6.7873 9.40816 6.71669C9.51093 6.63833 9.63149 6.57899 9.7623 6.54237C9.8931 6.50576 10.0313 6.49266 10.1683 6.50391C10.3053 6.51515 10.4381 6.5505 10.5584 6.60772C10.6787 6.66495 10.7839 6.74283 10.8674 6.83648L15.6949 11.9704C15.8204 12.1287 15.8802 12.3185 15.8648 12.5094Z" fill="currentColor"/> </svg> </a> </section> <section class="related-subjects main__block content-wrapper"> <h2 class="related-subjects__headline headline headline--3"> Другие технические предметы </h2> <ul class="related-subjects__list" role="list"> <li class="related-subjects__item"> <a class="related-subjects__link text" href="/lektoriy/subject/vysshaya_matematika/" target="_blank" > Высшая математика </a> </li> <li class="related-subjects__item"> <a class="related-subjects__link text" href="/lektoriy/subject/elektronika_elektrotehnika_radiotehnika/" target="_blank" > Электроника, электротехника, радиотехника </a> </li> <li class="related-subjects__item"> <a class="related-subjects__link text" href="/lektoriy/subject/programmirovanie/" target="_blank" > Программирование </a> </li> <li class="related-subjects__item"> <a class="related-subjects__link text" href="/lektoriy/subject/informacionnye_tehnologii/" target="_blank" > Информационные технологии </a> </li> <li class="related-subjects__item"> <a class="related-subjects__link text" href="/lektoriy/subject/informatika/" target="_blank" > Информатика </a> </li> <li class="related-subjects__item"> <a class="related-subjects__link text" href="/lektoriy/subject/fizika/" target="_blank" > Физика </a> </li> <li class="related-subjects__item"> <a class="related-subjects__link text" href="/lektoriy/subject/arhitektura_i_stroitelstvo/" target="_blank" > Архитектура и строительство </a> </li> <li class="related-subjects__item"> <a class="related-subjects__link text" href="/lektoriy/subject/teoriya_veroyatnostey/" target="_blank" > Теория вероятностей </a> </li> <li class="related-subjects__item"> <a class="related-subjects__link text" href="/lektoriy/subject/metrologiya/" target="_blank" > Метрология </a> </li> <li class="related-subjects__item"> <a class="related-subjects__link text" href="/lektoriy/subject/mashinostroenie/" target="_blank" > Машиностроение </a> </li> <li class="related-subjects__item"> <a class="related-subjects__link text" href="/lektoriy/subject/teploenergetika_i_teplotehnika/" target="_blank" > Теплоэнергетика и теплотехника </a> </li> <li class="related-subjects__item"> <a class="related-subjects__link text" href="/lektoriy/subject/avtomatizaciya_tehnologicheskih_processov/" target="_blank" > Автоматизация технологических процессов </a> </li> <li class="related-subjects__item"> <a class="related-subjects__link text" href="/lektoriy/subject/avtomatika_i_upravlenie/" target="_blank" > Автоматика и управление </a> </li> <li class="related-subjects__item"> <a class="related-subjects__link text" href="/lektoriy/subject/gidravlika/" target="_blank" > Гидравлика </a> </li> <li class="related-subjects__item"> <a class="related-subjects__link text" href="/lektoriy/subject/transportnye_sredstva/" target="_blank" > Транспортные средства </a> </li> <li class="related-subjects__item"> <a class="related-subjects__link text" href="/lektoriy/subject/metallurgiya/" target="_blank" > Металлургия </a> </li> <li class="related-subjects__item"> <a class="related-subjects__link text" href="/lektoriy/subject/soprotivlenie_materialov/" target="_blank" > Сопротивление материалов </a> </li> <li class="related-subjects__item"> <a class="related-subjects__link text" href="/lektoriy/subject/tehnologicheskie_mashiny_i_oborudovanie/" target="_blank" > Технологические машины и оборудование </a> </li> <li class="related-subjects__item"> <a class="related-subjects__link text" href="/lektoriy/subject/informacionnaya_bezopasnost/" target="_blank" > Информационная безопасность </a> </li> <li class="related-subjects__item"> <a class="related-subjects__link text" href="/lektoriy/subject/materialovedenie/" target="_blank" > Материаловедение </a> </li> </ul> </section> <section class="banner-dokstandart main__block main__block--mt_null" aria-labelledby="banner-dokstandart__headline" > <div class="content-wrapper"> <div class="banner-dokstandart__inner"> <div class="banner-dokstandart__headline headline headline--2" id="banner-dokstandart__headline"> Попробуй бесплатный инструмент для оформления работы по ГОСТу «ДокСтандарт» </div> <p class="banner-dokstandart__text text text--xl"> Загрузи учебную работу и получи отформатированную версию всего через 30 секунд </p> <a class="banner-dokstandart__link action-button action-button--size_m action-button--fill-violet" href="https://dokstandart.ru" target="_blank" > <span class="text text--xl text--bold">Попробовать</span> </a> </div> </div> </section> <section class="related-guidelines main__block main__block--mt_null"> <div class="content-wrapper"> <h2 class="related-guidelines__headline headline headline--1"> Помощь с написанием учебных работ </h2> <div class="related-guidelines__content"> <div class="related-guidelines__card related-guidelines__card--guidelines"> <div class="related-guidelines__card-headline headline headline--3"> Методические пособия от экспертов Автор24 </div> <ul class="related-guidelines__card-list" role="list"> <li class="related-guidelines__card-list-item"> <a class="related-guidelines__card-list-link" href="/articles/chertezhi/osi_na_chertezhe/" > Оси на чертеже </a> </li> <li class="related-guidelines__card-list-item"> <a class="related-guidelines__card-list-link" href="/articles/otchety_po_praktike/trebovanija_k_otchetu_po_praktike/" > Требования к отчету по практике </a> </li> <li class="related-guidelines__card-list-item"> <a class="related-guidelines__card-list-link" href="/articles/prezentacii/kak_sozdat_prezentaciju/" > Как создать презентацию </a> </li> <li class="related-guidelines__card-list-item"> <a class="related-guidelines__card-list-link" href="/articles/diplomnye_raboty/obrazec_spravki_o_vnedrenii_rezultatov_diploma/" > Образец справки о внедрении результатов диплома </a> </li> </ul> <img src="/assets/img/handbook2022/related-guidelines-1.png" role="presentation" loading="lazy"> </div> <div class="related-guidelines__card related-guidelines__card--help"> <div class="related-guidelines__card-content"> <div class="related-guidelines__card-headline headline headline--3"> Помощь в написании студенческой работы </div> <ul class="related-guidelines__card-list" role="list"> <li class="related-guidelines__card-list-item"> <a class="related-guidelines__card-list-link" href="https://avtor24.ru/kontrolnie-raboty/"> Контрольная работа </a> </li> <li class="related-guidelines__card-list-item"> <a class="related-guidelines__card-list-link" href="https://avtor24.ru/esse/"> Помощь с эссе </a> </li> <li class="related-guidelines__card-list-item"> <a class="related-guidelines__card-list-link" href="https://avtor24.ru/laboratornye_raboty/"> Помощь в решении лабораторной </a> </li> <li class="related-guidelines__card-list-item"> <a class="related-guidelines__card-list-link" href="https://avtor24.ru/otchet-po-praktike/"> Помощь в оформлении отчета по практике </a> </li> </ul> </div> <img src="/assets/img/handbook2022/related-guidelines-2.jpg" role="presentation" loading="lazy"> </div> <div class="related-guidelines__card related-guidelines__card--consulting"> <div class="related-guidelines__card-content"> <div class="related-guidelines__card-headline headline headline--3"> <a class="related-guidelines__card-headline-link" href="https://www.prepod-on.ru/" target="_blank" > Консультация от ведущих экспертов по предметам </a> </div> <p class="related-guidelines__card-text text text--xl"> 80% учащихся школ и ВУЗов, обратившихся к нам за помощью, повысили уровень знаний и улучшили успеваемость </p> </div> <picture> <source srcset="/assets/img/handbookLectures/related-guidelines-3-1440.png" media="(min-width: 1440px)"> <source srcset="/assets/img/handbookLectures/related-guidelines-3-1024.png" media="(min-width: 1024px)"> <source srcset="/assets/img/handbookLectures/related-guidelines-3-768.png" media="(min-width: 768px)"> <source srcset="/assets/img/handbookLectures/related-guidelines-3-320.png" media="(min-width: 320px)"> <img src="/assets/img/handbookLectures/related-guidelines-3-320.png" role="presentation" loading="lazy"> </picture> </div> </div> </div> </section> <section class="telegram-banner" data-section="telegramBanner" aria-labelledby="telegram-banner__headline"> <div class="content-wrapper"> <div class="telegram-banner__inner"> <div class="telegram-banner__content"> <div class="telegram-banner__headline headline headline--2" id="telegram-banner__headline"> Все самое важное и интересное <span>в Telegram</span> </div> <p class="telegram-banner__text text text--l"> Все сервисы Справочника в твоем телефоне! Просто напиши Боту, что ты ищешь и он быстро найдет нужную статью, лекцию или пособие для тебя! </p> <div class="telegram-banner__buttons"> <a class="telegram-banner__link action-button action-button--fill-pink action-button--size_m action-button--with-icon" href="https://t.me/edu24_bot?start=sc-le__et-b" target="_blank" rel="noopener noreferrer" > <span class="text text--l text--bold">Перейти в Telegram Bot</span> <svg width="25" height="24" viewBox="0 0 25 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"> <path fill-rule="evenodd" clip-rule="evenodd" d="M10.215 14.2041L9.88418 18.9505C10.3575 18.9505 10.5625 18.7431 10.8084 18.4941L13.0276 16.3308L17.626 19.7657C18.4694 20.2451 19.0636 19.9926 19.2911 18.9743L22.3095 4.54819L22.3103 4.54734C22.5778 3.27574 21.8595 2.7785 21.0378 3.09044L3.29569 10.0188C2.08483 10.4982 2.10316 11.1867 3.08985 11.4986L7.6258 12.9376L18.1619 6.21333C18.6577 5.87843 19.1086 6.06373 18.7377 6.39863L10.215 14.2041Z" fill="currentColor"/> </svg> </a> <button class="telegram-banner__qr-btn" type="button" data-js="qrModalTrigger"> <span class="text text--l text--bold">Подписаться через qr-код</span> <svg width="25" height="24" viewBox="0 0 25 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"> <path d="M19.7731 7.92188V4.96875H16.82C15.5195 4.96875 15.5172 3 16.82 3H20.1275C20.5555 3.00048 20.9658 3.17072 21.2685 3.47336C21.5711 3.77601 21.7413 4.18634 21.7418 4.61435V7.92188C21.7418 9.22256 19.7731 9.2242 19.7731 7.92188Z" fill="currentColor"/> <path d="M3.36719 7.92188V4.61435C3.36767 4.18634 3.5379 3.77601 3.84055 3.47336C4.14319 3.17072 4.55353 3.00048 4.98154 3H8.28907C9.58949 3 9.59181 4.96875 8.28907 4.96875H5.33594V7.92188C5.33594 9.22256 3.36719 9.2242 3.36719 7.92188Z" fill="currentColor"/> <path d="M20.1275 21.3751H16.82C15.5195 21.3751 15.5172 19.4063 16.82 19.4063H19.7731V16.4532C19.7731 15.1525 21.7418 15.1509 21.7418 16.4532V19.7607C21.7413 20.1887 21.5711 20.599 21.2685 20.9017C20.9658 21.2043 20.5555 21.3746 20.1275 21.3751Z" fill="currentColor"/> <path d="M8.28907 21.375H4.98154C4.55353 21.3745 4.14319 21.2043 3.84055 20.9016C3.5379 20.599 3.36767 20.1887 3.36719 19.7607V16.4531C3.36719 15.1524 5.33594 15.1508 5.33594 16.4531V19.4062H8.28907C9.58949 19.4062 9.59181 21.375 8.28907 21.375Z" fill="currentColor"/> <path d="M20.7574 13.1719H4.35119C3.05076 13.1719 3.04845 11.2031 4.35119 11.2031H20.7574C22.0579 11.2031 22.0602 13.1719 20.7574 13.1719Z" fill="currentColor"/> </svg> </button> </div> </div> </div> </div> </section> </main> <footer class="footer"> <div class="footer__inner content-wrapper"> <div class="footer__logo-box"> <a href="https://spravochnick.ru/"> <img class="footer__logo-img" src="/assets/img/_shared/logos/handbook-v2.svg" alt="Справочник от Автор24" > </a> <button class="footer__button action-button action-button--size_m action-button--fill-violet action-button--with-icon" type="button" data-js="buttonScrollToBanner" > <span class="text text--m text--bold">Telegram Bot</span> <svg width="25" height="24" viewBox="0 0 25 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"> <path fill-rule="evenodd" clip-rule="evenodd" d="M10.215 14.2041L9.88418 18.9505C10.3575 18.9505 10.5625 18.7431 10.8084 18.4941L13.0276 16.3308L17.626 19.7657C18.4694 20.2451 19.0636 19.9926 19.2911 18.9743L22.3095 4.54819L22.3103 4.54734C22.5778 3.27574 21.8595 2.7785 21.0378 3.09044L3.29569 10.0188C2.08483 10.4982 2.10316 11.1867 3.08985 11.4986L7.6258 12.9376L18.1619 6.21333C18.6577 5.87843 19.1086 6.06373 18.7377 6.39863L10.215 14.2041Z" fill="currentColor"/> </svg> </button> </div> <div class="footer__links"> <ul class="footer__links-list"> <li class="footer__links-item"> <a class="footer__link text text--m" href="https://spravochnick.ru/search/" target="_blank" > Научные статьи </a> </li> <li class="footer__links-item"> <a class="footer__link text text--m" href="https://spravochnick.ru/lektoriy/" target="_blank" > Лекторий </a> </li> <li class="footer__links-item"> <a class="footer__link text text--m" href="https://spravochnick.ru/articles/" target="_blank" > Методические указания </a> </li> <li class="footer__links-item"> <a class="footer__link text text--m" href="https://spravochnick.ru/definitions/" target="_blank" > Справочник терминов </a> </li> <li class="footer__links-item"> <a class="footer__link text text--m" href="https://spravochnick.ru/expert/" target="_blank" > Статьи от экспертов </a> </li> </ul> <ul class="footer__links-list"> <li class="footer__links-item"> <a class="footer__link text text--m" href="https://avtor24.ru/s/otzyvy/" target="_blank" > Отзывы об Автор24 </a> </li> <li class="footer__links-item"> <a class="footer__link text text--m" href="https://spravochnick.ru/last_articles/" target="_blank" > Последние статьи </a> </li> <li class="footer__links-item"> <a class="footer__link text text--m" href="https://avtor24.ru/" target="_blank" > Помощь эксперта </a> </li> <li class="footer__links-item"> <a class="footer__link text text--m" href="https://author24referat.ru/" target="_blank" > Справочник рефератов </a> </li> <li class="footer__links-item"> <a class="footer__link text text--m" href="https://kampus.ai/gpt-bot/neiroset-dlia-reseniia-zadac/" target="_blank" rel="noopener" > Нейросеть для решения задач </a> </li> <li class="footer__links-item"> <a class="footer__link text text--m" href="https://kampus.ai/gpt-bot/neiroset-dlia-napisaniia-referata/" target="_blank" rel="noopener" > Нейросеть для написания реферата </a> </li> <li class="footer__links-item"> <a class="footer__link text text--m" href="https://avtor24.ru/repetitor/" target="_blank" rel="noopener" > Поиск репетитора </a> </li> </ul> <ul class="footer__links-list"> <li class="footer__links-item"> <a class="footer__link text text--m" href="https://spravochnick.ru/copyright/" target="_blank" > Для правообладателей </a> </li> <li class="footer__links-item"> <a class="footer__link text text--m" href="https://spravochnick.ru/teachers/" target="_blank" > Работа для преподавателей </a> </li> <li class="footer__links-item"> <a class="footer__link text text--m" href="https://spravochnick.ru/tutors/" target="_blank" > Работа для репетиторов </a> </li> <li class="footer__links-item"> <a class="footer__link text text--m" href="https://avtor24.ru/customer-partners/" target="_blank" > Партнерская программа </a> </li> <li class="footer__links-item"> <a class="footer__link text text--m" href="https://docs.google.com/presentation/d/1xhEIcfe_TWxGbA6gzoMurzvPmIMtlCDC5a7fdpX6CGg/edit#slide=id.g6c06681721_0_379" target="_blank" > Реклама на сайте </a> </li> </ul> </div> </div> </footer> <div class="modal-root full-hidden" role="dialog" aria-labelledby="popup-leave1__headline" aria-modal="true" data-modal="popupLeave" > <div class="modal-root__backdrop"> <div class="popup-leave-1 modal-root__content" data-js="modalContent"> <button class="popup-leave-1__close-btn modal-root__close-btn" type="button" data-js="closeModal" aria-label="Закрыть модальное окно" > <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"> <path fill-rule="evenodd" clip-rule="evenodd" d="M6.201 4.92923C5.81048 4.53871 5.17731 4.5387 4.78679 4.92923C4.39626 5.31975 4.39626 5.95292 4.78679 6.34344L10.4437 12.0003L4.78683 17.6572C4.39631 18.0477 4.39631 18.6809 4.78683 19.0714C5.17736 19.4619 5.81052 19.4619 6.20104 19.0714L11.8579 13.4145L17.5147 19.0714C17.9052 19.4619 18.5384 19.4619 18.9289 19.0714C19.3194 18.6808 19.3194 18.0477 18.9289 17.6572L13.2721 12.0003L18.929 6.34347C19.3195 5.95295 19.3195 5.31978 18.929 4.92926C18.5384 4.53873 17.9053 4.53873 17.5148 4.92926L11.8579 10.5861L6.201 4.92923Z" fill="currentColor"/> </svg> </button> <div class="popup-leave-1__decor" aria-hidden="true"></div> <div class="popup-leave-1__inner"> <div class="popup-leave-1__headline" id="popup-leave1__headline"> А давай сэкономим <br>твое время? <picture> <img class="emoji" src="/assets/images/emoji/winking-face.png" role="presentation"> </picture> </div> <div class="popup-leave-1__text text text--xl"> Дарим <span class="text--bold">500 рублей на первый заказ</span>, а ты выбери эксперта и расслабься <picture> <source srcset="/assets/images/emoji/forefinger_down.webp, /assets/images/emoji/forefinger_down@2x.webp 2x" type="image/webp"> <img class="emoji" src="/assets/images/emoji/forefinger_down.png" role="presentation"> </picture> </div> <form class="popup-leave-1__form" action="https://avtor24.ru/order/unregOrderShortForm/?ref=92bb45caaa88422f" data-js="modalLeaveForm" method="post" novalidate > <input type="hidden" name="refererKey" value="92bb45caaa88422f"> <input class="popup-leave-1__input input input--size_m input--light text text--m" type="text" name="title" maxlength="110" value="" placeholder="Тема работы" aria-label="Тема работы" required > <input class="popup-leave-1__input input input--size_m input--light text text--m" type="email" name="email" placeholder="E-mail" aria-label="E-mail" required > <button class="popup-leave-1__submit action-button action-button--size_l action-button--bold action-button--fill-violet" type="submit" > <span class="text text--bold">Выбрать эксперта и расслабиться</span> </button> </form> </div> </div> </div> </div> <div class="modal-root full-hidden" role="dialog" aria-labelledby="qr-modal__text" aria-modal="true" data-modal="QRModal" > <div class="modal-root__backdrop"> <div class="qr-modal modal-root__content" data-js="modalContent"> <button class="qr-modal__close-btn modal-root__close-btn" type="button" data-js="closeModal" aria-label="Закрыть модальное окно" > <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"> <path fill-rule="evenodd" clip-rule="evenodd" d="M6.201 4.92923C5.81048 4.53871 5.17731 4.5387 4.78679 4.92923C4.39626 5.31975 4.39626 5.95292 4.78679 6.34344L10.4437 12.0003L4.78683 17.6572C4.39631 18.0477 4.39631 18.6809 4.78683 19.0714C5.17736 19.4619 5.81052 19.4619 6.20104 19.0714L11.8579 13.4145L17.5147 19.0714C17.9052 19.4619 18.5384 19.4619 18.9289 19.0714C19.3194 18.6808 19.3194 18.0477 18.9289 17.6572L13.2721 12.0003L18.929 6.34347C19.3195 5.95295 19.3195 5.31978 18.929 4.92926C18.5384 4.53873 17.9053 4.53873 17.5148 4.92926L11.8579 10.5861L6.201 4.92923Z" fill="currentColor"/> </svg> </button> <canvas class="qr-modal__canvas" data-js="qrCodeBox" data-link="https://t.me/edu24_bot?start=sc-le__et-b"></canvas> <p class="qr-modal__text text text--xl" id="qr-modal__text"> Включи камеру на своем телефоне и наведи на Qr-код. <br> Кампус Хаб бот откроется на устройстве </p> </div> </div> </div> <div class="modal-root full-hidden" role="dialog" aria-labelledby="telegram-modal__headline" aria-modal="true" data-modal="telegramModal" > <div class="modal-root__backdrop"> <div class="telegram-modal modal-root__content" data-js="modalContent" data-step="1"> <button class="telegram-modal__close-btn modal-root__close-btn" type="button" data-js="closeModal" aria-label="Закрыть модальное окно" > <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"> <path fill-rule="evenodd" clip-rule="evenodd" d="M6.201 4.92923C5.81048 4.53871 5.17731 4.5387 4.78679 4.92923C4.39626 5.31975 4.39626 5.95292 4.78679 6.34344L10.4437 12.0003L4.78683 17.6572C4.39631 18.0477 4.39631 18.6809 4.78683 19.0714C5.17736 19.4619 5.81052 19.4619 6.20104 19.0714L11.8579 13.4145L17.5147 19.0714C17.9052 19.4619 18.5384 19.4619 18.9289 19.0714C19.3194 18.6808 19.3194 18.0477 18.9289 17.6572L13.2721 12.0003L18.929 6.34347C19.3195 5.95295 19.3195 5.31978 18.929 4.92926C18.5384 4.53873 17.9053 4.53873 17.5148 4.92926L11.8579 10.5861L6.201 4.92923Z" fill="currentColor"/> </svg> </button> <div class="telegram-modal__step-1"> <div class="telegram-modal__headline headline headline--2" id="telegram-modal__headline"> Привет! Рады, что <span>конспект лекций</span> оказался полезен 🤩 </div> <div class="text text--xl"> Для копирования текста подпишись на Telegram bot. Удобный поиск по учебным материалам в твоем телефоне </div> <div class="telegram-modal__buttons"> <a class="telegram-modal__link action-button action-button--fill-violet action-button--size_l" href="https://t.me/edu24_bot?start=lid-3415__sid-5en1djpd3399ekpg6e56q163m5" target="_blank" rel="noopener noreferrer" > <span class="text text--l text--bold"> Подписаться и скачать лекцию </span> </a> <button class="telegram-modal__qr-btn" type="button" data-js="toStep2"> <span class="text text--l text--bold">Подписаться через qr-код</span> <svg width="25" height="24" viewBox="0 0 25 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"> <path d="M19.7731 7.92188V4.96875H16.82C15.5195 4.96875 15.5172 3 16.82 3H20.1275C20.5555 3.00048 20.9658 3.17072 21.2685 3.47336C21.5711 3.77601 21.7413 4.18634 21.7418 4.61435V7.92188C21.7418 9.22256 19.7731 9.2242 19.7731 7.92188Z" fill="currentColor"/> <path d="M3.36719 7.92188V4.61435C3.36767 4.18634 3.5379 3.77601 3.84055 3.47336C4.14319 3.17072 4.55353 3.00048 4.98154 3H8.28907C9.58949 3 9.59181 4.96875 8.28907 4.96875H5.33594V7.92188C5.33594 9.22256 3.36719 9.2242 3.36719 7.92188Z" fill="currentColor"/> <path d="M20.1275 21.3751H16.82C15.5195 21.3751 15.5172 19.4063 16.82 19.4063H19.7731V16.4532C19.7731 15.1525 21.7418 15.1509 21.7418 16.4532V19.7607C21.7413 20.1887 21.5711 20.599 21.2685 20.9017C20.9658 21.2043 20.5555 21.3746 20.1275 21.3751Z" fill="currentColor"/> <path d="M8.28907 21.375H4.98154C4.55353 21.3745 4.14319 21.2043 3.84055 20.9016C3.5379 20.599 3.36767 20.1887 3.36719 19.7607V16.4531C3.36719 15.1524 5.33594 15.1508 5.33594 16.4531V19.4062H8.28907C9.58949 19.4062 9.59181 21.375 8.28907 21.375Z" fill="currentColor"/> <path d="M20.7574 13.1719H4.35119C3.05076 13.1719 3.04845 11.2031 4.35119 11.2031H20.7574C22.0579 11.2031 22.0602 13.1719 20.7574 13.1719Z" fill="currentColor"/> </svg> </button> </div> </div> <div class="telegram-modal__step-2"> <button class="telegram-modal__back-btn action-button action-button--size_l action-button--fill-violet action-button--with-icon" type="button" data-js="toStep1" > <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"> <path fill-rule="evenodd" clip-rule="evenodd" d="M0.23377 11.4468C0.0837698 11.6068 0.00376976 11.7968 0.00376976 11.9968C-0.0162302 12.1868 0.0437698 12.3768 0.17377 12.5368L5.00377 17.6668C5.08377 17.7568 5.19377 17.8368 5.31377 17.8968C5.43377 17.9568 5.56377 17.9868 5.70377 17.9968C5.84377 18.0068 5.98377 17.9968 6.11377 17.9568C6.24377 17.9168 6.36377 17.8568 6.46377 17.7868C6.56377 17.7168 6.65377 17.6268 6.71377 17.5268C6.77377 17.4268 6.81377 17.3168 6.83377 17.2068C6.84377 17.0968 6.83377 16.9768 6.79377 16.8768C6.75377 16.7668 6.69377 16.6668 6.61377 16.5768L3.24377 12.9968H22.5038C23.0538 12.9968 23.5038 12.5468 23.5038 11.9968C23.5038 11.4468 23.0538 10.9968 22.5038 10.9968H3.26377L6.77377 7.40682C6.94377 7.23682 7.02377 7.00682 7.00377 6.77682C6.98377 6.54682 6.85377 6.34682 6.64377 6.19682C6.44377 6.04682 6.17377 5.97682 5.91377 6.00682C5.65377 6.02682 5.40377 6.13682 5.23377 6.31682L0.23377 11.4468Z" fill="currentColor"/> </svg> <span class="text text--xl text--bold">Назад</span> </button> <canvas class="telegram-modal__canvas" data-js="qrCodeBox" data-link="https://t.me/edu24_bot?start=lid-3415__sid-5en1djpd3399ekpg6e56q163m5"></canvas> <div class="telegram-modal__step-2-text text text--xl"> Включи камеру на своем телефоне и наведи на Qr-код. <br> Кампус Хаб бот откроется на устройстве </div> </div> </div> </div> </div> <div class="modal-root full-hidden" role="dialog" aria-labelledby="telegram-modal-load-file__headline" aria-modal="true" data-modal="telegramModalLoadFile" > <div class="modal-root__backdrop"> <div class="telegram-modal modal-root__content" data-js="modalContent" data-step="1"> <button class="telegram-modal__close-btn modal-root__close-btn" type="button" data-js="closeModal" aria-label="Закрыть модальное окно" > <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"> <path fill-rule="evenodd" clip-rule="evenodd" d="M6.201 4.92923C5.81048 4.53871 5.17731 4.5387 4.78679 4.92923C4.39626 5.31975 4.39626 5.95292 4.78679 6.34344L10.4437 12.0003L4.78683 17.6572C4.39631 18.0477 4.39631 18.6809 4.78683 19.0714C5.17736 19.4619 5.81052 19.4619 6.20104 19.0714L11.8579 13.4145L17.5147 19.0714C17.9052 19.4619 18.5384 19.4619 18.9289 19.0714C19.3194 18.6808 19.3194 18.0477 18.9289 17.6572L13.2721 12.0003L18.929 6.34347C19.3195 5.95295 19.3195 5.31978 18.929 4.92926C18.5384 4.53873 17.9053 4.53873 17.5148 4.92926L11.8579 10.5861L6.201 4.92923Z" fill="currentColor"/> </svg> </button> <div class="telegram-modal__step-1"> <div class="telegram-modal__headline headline headline--2" id="telegram-modal-load-file__headline"> Привет! Рады, что <span>конспект лекций</span> оказался полезен 🤩 </div> <div class="text text--xl"> Подписчики нашего Кампус Хаб бота получают лекцию прямо в телеграмм! Просто перейди по ссылке ниже </div> <div class="telegram-modal__buttons"> <a class="telegram-modal__link action-button action-button--fill-violet action-button--size_l" href="https://t.me/edu24_bot?start=lid-3415__sid-5en1djpd3399ekpg6e56q163m5" target="_blank" rel="noopener noreferrer" > <span class="text text--l text--bold"> Скачать лекцию </span> </a> <button class="telegram-modal__qr-btn" type="button" data-js="toStep2"> <span class="text text--l text--bold">Скачать через qr-код</span> <svg width="25" height="24" viewBox="0 0 25 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"> <path d="M19.7731 7.92188V4.96875H16.82C15.5195 4.96875 15.5172 3 16.82 3H20.1275C20.5555 3.00048 20.9658 3.17072 21.2685 3.47336C21.5711 3.77601 21.7413 4.18634 21.7418 4.61435V7.92188C21.7418 9.22256 19.7731 9.2242 19.7731 7.92188Z" fill="currentColor"/> <path d="M3.36719 7.92188V4.61435C3.36767 4.18634 3.5379 3.77601 3.84055 3.47336C4.14319 3.17072 4.55353 3.00048 4.98154 3H8.28907C9.58949 3 9.59181 4.96875 8.28907 4.96875H5.33594V7.92188C5.33594 9.22256 3.36719 9.2242 3.36719 7.92188Z" fill="currentColor"/> <path d="M20.1275 21.3751H16.82C15.5195 21.3751 15.5172 19.4063 16.82 19.4063H19.7731V16.4532C19.7731 15.1525 21.7418 15.1509 21.7418 16.4532V19.7607C21.7413 20.1887 21.5711 20.599 21.2685 20.9017C20.9658 21.2043 20.5555 21.3746 20.1275 21.3751Z" fill="currentColor"/> <path d="M8.28907 21.375H4.98154C4.55353 21.3745 4.14319 21.2043 3.84055 20.9016C3.5379 20.599 3.36767 20.1887 3.36719 19.7607V16.4531C3.36719 15.1524 5.33594 15.1508 5.33594 16.4531V19.4062H8.28907C9.58949 19.4062 9.59181 21.375 8.28907 21.375Z" fill="currentColor"/> <path d="M20.7574 13.1719H4.35119C3.05076 13.1719 3.04845 11.2031 4.35119 11.2031H20.7574C22.0579 11.2031 22.0602 13.1719 20.7574 13.1719Z" fill="currentColor"/> </svg> </button> </div> </div> <div class="telegram-modal__step-2"> <button class="telegram-modal__back-btn action-button action-button--size_l action-button--fill-violet action-button--with-icon" type="button" data-js="toStep1" > <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"> <path fill-rule="evenodd" clip-rule="evenodd" d="M0.23377 11.4468C0.0837698 11.6068 0.00376976 11.7968 0.00376976 11.9968C-0.0162302 12.1868 0.0437698 12.3768 0.17377 12.5368L5.00377 17.6668C5.08377 17.7568 5.19377 17.8368 5.31377 17.8968C5.43377 17.9568 5.56377 17.9868 5.70377 17.9968C5.84377 18.0068 5.98377 17.9968 6.11377 17.9568C6.24377 17.9168 6.36377 17.8568 6.46377 17.7868C6.56377 17.7168 6.65377 17.6268 6.71377 17.5268C6.77377 17.4268 6.81377 17.3168 6.83377 17.2068C6.84377 17.0968 6.83377 16.9768 6.79377 16.8768C6.75377 16.7668 6.69377 16.6668 6.61377 16.5768L3.24377 12.9968H22.5038C23.0538 12.9968 23.5038 12.5468 23.5038 11.9968C23.5038 11.4468 23.0538 10.9968 22.5038 10.9968H3.26377L6.77377 7.40682C6.94377 7.23682 7.02377 7.00682 7.00377 6.77682C6.98377 6.54682 6.85377 6.34682 6.64377 6.19682C6.44377 6.04682 6.17377 5.97682 5.91377 6.00682C5.65377 6.02682 5.40377 6.13682 5.23377 6.31682L0.23377 11.4468Z" fill="currentColor"/> </svg> <span class="text text--xl text--bold">Назад</span> </button> <canvas class="telegram-modal__canvas" data-js="qrCodeBox" data-link="https://t.me/edu24_bot?start=lid-3415__sid-5en1djpd3399ekpg6e56q163m5"></canvas> <div class="telegram-modal__step-2-text text text--xl"> Включи камеру на своем телефоне и наведи на Qr-код. <br> Кампус Хаб бот откроется на устройстве </div> </div> </div> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.16.105/pdf.min.js" integrity="sha512-tqaIiFJopq4lTBmFlWF0MNzzTpDsHyug8tJaaY0VkcH5AR2ANMJlcD+3fIL+RQ4JU3K6edt9OoySKfCCyKgkng==" crossorigin="anonymous" referrerpolicy="no-referrer"> </script> <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.16.105/pdf.worker.min.js" integrity="sha512-P4czHqcxmgci7QIhI48N1GmF+rWm4PGB/GQ8/GZvJC6rgzssgX0meArUqH2WRfeDfurya5HxKd5uYLPDntEZ/Q==" crossorigin="anonymous" referrerpolicy="no-referrer"> </script> <script src="/assets/js/handbookLectures.bundle.js?7380"></script>  <div class="visually-hidden" aria-hidden="true"> <img src="https://https://avtor24.ru//pixel/" height="1" width="1"/> </div>  </body> </html>