Справочник от Автор24
Информатика

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

Справочник / Лекторий Справочник / Лекционные и методические материалы по информатике / Разработка Web-страниц

Выбери формат для чтения

pdf

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

Файл загружается

Файл загружается

Благодарим за ожидание, осталось немного.

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

txt

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

2. Краткий курс лекций дисциплины Практикум по разработке Web-страниц Проработайте курс лекций за компьютером, разбирая каждую тему и приемы работы в офисных приложениях Содержание дисциплины ЯЗЫК ГИПЕРТЕКСТОВОЙ РАЗМЕТКИ ДОКУМЕНТА HTML.......................2 Лекция 1.Фреймы ...................................................................................................2 Вопросы для самоконтроля ...................................................................................6 Лекция 2. Формы ....................................................................................................8 Вопросы для самоконтроля ................................................................................. 16 Лекция 3. Теги <div> и <span>. Группировка элементов страницы ................ 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-документа с фреймами отличается от обычной структуры. <!DOCTYPEHTMLPUBLIC "-//W3C//DTDHTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <html> <head> <title>Заголовокстраницы</title> <meta http-equiv="Content-Type" content="text/html; chrset=UTF-8"> </head> <frameset rows="100, *"> <frame> <frameset cols="20%, 80%"> <frame> <frame> </frameset> <noframes> <p>ВашWeb-браузернеотображаетфреймы</p> </noframes> </frameset> </html> Каки в обычном HTML-документе, весь код расположен между тегами <html>и </html>, а в разделе headрасполагаются заголовки. Основное отличие документа с фреймами от обычного HTML-документа заключается в том, что у документа с фреймами отсутствует раздел body ,отсутствует содержимое 2 страницы, а присутствуют только теги, служащие для определения фреймовой структуры. Иными словами, документ с фреймами не может содержать раздела bodyи наоборот, обычный HTML-документ не может содержать фреймовую структуру. Кроме того, содержать фреймовую структуру может только документ в формате Frameset. Для объявления формата используется заголовок: <!DOCTYPEHTMLPUBLIC "-//W3C//DTDHTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> Вместо тега <body> применяется парный тег <frameset>, описывающий фреймовую структуру. Каждое отдельное окно описывается тегом <frame>. Если Web-браузер не поддерживает фреймы, то в окне будет отображен текст, расположенный между тегами <noframes> и </noframes>. Описание фреймовой структуры Парный тег <frameset> описывает фреймовую структуру. Внутри тегов <frameset> и </frameset> могут содержаться только теги <frame> или другой набор фреймов, описанный тегами <frameset> и </frameset>. Тег<frameset>имеетследующие параметры:  rowsописывает разбиение на строки: <frameset rows="100, *">  cols описывает разбиение на столбцы: <frameset cols="20%, 80%"> В качестве значений параметров rowsи cols указываются размеры фреймов. Должно быть указано как минимум два значения. Все значения в списке разделяются запятыми. Размеры могут быть указаны в абсолютных единицах (в пикселах) или в процентах: cols=”20%, 80%” Кроме того, в качестве ширины или высоты может быть указана звездочка (*), которая означает, что под фрейм нужно отвести все оставшееся пространство: Rows=”100, *” Описание отдельных областей Тег <frame> описывает одиночный фрейм и не имеет закрывающего тега. Он располагается между тегами <frameset> и </frameset> и имеет следующие параметры:  src определяет URL-адрес документа, который должен быть загружен во фрейм. Может быть указан абсолютный или относительный URL-адрес: <framesrc="navigation_bar.html">  nameзадает уникальное имя фрейма: <frame src="chapter1.html" name="chapter"> 3  scrolling запрещает или разрешает отображение полос прокрутки во фрейме. Этот параметр может принимать следующие значения: o auto – полосы отображаются, только если содержимое не помещается во фрейме (значение по умолчанию): <frame src="chapter1.html" name="chapter" scrolling="auto"> o yes – полосы отображаются в любом случае: <frame src="chapter1.html" name="chapter" scrolling="yes"> o no – полосы не отображаются в любом случае: <frame src="chapter1.html" name="chapter" scrolling="no">  marginwidth задает расстояние в пикселях между границей фрейма и его содержимым по горизонтали: <frame src="chapter1.html" name="chapter" marginwidth="5">  marginheight указывает расстояние в пикселях между границей фрейма и его содержимым по вертикали: <frame src="chapter1.html" name="chapter" marginwidth="5" marginheight="5">  frameborder включает или отключает показ границы между фреймами. Может принимать одно из двух значений: o 1 –граница отображается (по умолчанию): <frame src="chapter1.html" name="chapter" frameborder="1"> o 0- граница не отображается: <frame src="chapter1.html" name="chapter" frameborder="0">  noresize отключает возможность изменения размеров фрейма пользователем. По умолчанию любой пользователь может изменить размер фрейма путем перемещения границы. Добавляется этот параметр так: <frame src="doc1.html" scrolling="no" noresize> Тег <noframes> Если Web-браузер не поддерживает фреймы, то в окне будет отображен текст, расположенный между тегами <frameset> и </frameset>. В противном случае содержимое этих тегов будет проигнорировано. Например: <noframes> <p>ВашWeb-браузернеотображаетфреймы</p> </noframes> Разделение окна Web-браузера на несколько областей Обычно заголовок и панель навигации для всех страниц сайта содержат одну и ту же информацию, а изменяется только основное содержание страниц. С помощью фреймовой структуры можно заголовок поместить в одно окно, панель навигации – во второе, а основное содержание страницы – в третье. Это позволит, оставляя в неизменном состоянии два первых окна, изменять содержание третьего. Внимание! Все создаваемые Вами файлы фреймовой структуры должны находиться в одной папке (или должен быть прописан к ним путь,если это не 4 так). Создадим Web-страницу с такой структурой. Для этого создадим 5 файлов:  header.html – заголовок Web-страницы. Содержимое: <!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"> </head> <body> <h1>Шапкасайта</h1> </body> </html>  Navigation_bar.html – панель навигации. Содержимое: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Панель навигации</title> <meta http-equiv="Content-Type" content="text/html; chrset=UTF-8"> </head> <body> <h3>Содержание</h3> <ul> <li><a href="chapter1.html" target="chapter">Глава 1</a></li> <li><a href="chapter2.html" target="chapter">Глава 2</a></li> </ul> </body> </html>  Chapter1.html – содержание главы 1; <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Глава 1</title> <meta http-equiv="Content-Type" content="text/html; chrset=UTF-8"> </head> <body> <h1>Глава 1</h1> <p>Содержание главы 1</p> </body> </html>  Chapter2.html – содержание главы 2; <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Глава 2</title> <meta http-equiv="Content-Type" content="text/html; chrset=UTF-8"> </head> <body> <h1>Глава 2</h1> <p>Содержание главы 2</p> </body> </html>  Frame_set.html – HTML-документ, описывающий фреймовую структуру. <!DOCTYPEHTMLPUBLIC "-//W3C//DTDHTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <html> <head> 5 <title>Пример использования фреймов</title> <meta http-equiv="Content-Type" content="text/html; chrset=UTF-8"> </head> <frameset rows="100, *"> <frame src="header.html" scrolling="no"> <frameset cols="20%, 80%"> <frame src="Navigation_bar.html"> <frame src="chapter1.html" name="chapter"> </frameset> <noframes> <p>Ваш Web-браузернеотображаетфреймы</p> </noframes> </frameset> </html> Все созданные файлы сохраните в одной папке. Затем в Web-браузере откроем файл Frame_set.html. На появившейся странице мы видим, что окно разделено на три прямоугольные области. В верхней части окна находится шапка сайта. В нижней части окна расположены панель навигации (слева) и основная часть документа (справа). При переходе по ссылкам содержимое основной части меняется, а остальные остаются неизменными. Теперь попробует изменить цвет фона шапки. Для этого необходимо отобразить исходный код Web-страницы. Существуют три способа отображения кода:  по команде Вид, Просмотр HTML-кода (в браузере InternetExplorer);  щелкнуть ПКМ в любом месте окна Web-браузера, в появившемся меню выбрать Просмотр HTML-кода (Исходный код страницы).  Открыть файл, содержащий исходный код, с помощью Блокнота или другого текстового редактора. Если документ содержит фреймы, результаты первых двух действий будут разными. Первый способ отобразит только код структуры Web-страницы, а не исходный код каждого из HTML-документов. Второй способ позволяет отобразить код лишь одного HTML-документа, а от места щелчка зависит, код какогоHTML-документа будет отображен. В нашем случае для отображения исходного кода файла заголовка (header.html)необходимо правой кнопкой мыши щелкнуть внутри области, содержащей заголовок. В появившемся контекстном меню нужно выбрать пункт Просмотр HTML-кода (Исходный код страницы). Заменяемстрочку <body> на <body style=”background-color: pink”> Сохраняем файл и обновляем Web-страницу. В результате цвет фона заголовка изменится с белого на матовый. Вопросы для самоконтроля 1. 2. 3. 4. Что такое фрейм? Назовите основные области применения фреймов? Опишите структуру HTML-документа, содержащего фреймы? В чем заключается описание фреймовой структуры? 6 5. Может ли описание фрейма содержаться в одном файле с основным документом? 6. Что описывает одиночный тег <frame>? Какие параметры он имеет? 7. Для чего используется тег <noframes>? 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

Рекомендованные лекции

Смотреть все
Информационные технологии

Веб-программирование.

Веб-программирование. Конспект лекций http://4stud.asoiu/web-programming/lectures.php Веб-программирование. Конспект лекций Имеется обновленная версия...

Программирование

Разработка web-приложений

Разработка web-приложений Оглавление Раздел 1. Введение в HTML и CSS. 8 Лекция 1. Введение в HTML. 8 1. История развития HTML 8 2. Принципы гипертекст...

Информатика

Введение в интернет технологии и компьютерное моделирование

ЛЕКЦИЯ № 1 WEB-технологии и компью терное моделирование Краткий учебны й курс 1 Структура учебного курса  Лекция 1. Введение в интернет технологии и ...

Информатика

Управление IT-сервисами предприятия

ОГЛАВЛЕНИЕ 1 Управление ИТ-сервисами предприятия .............................................................................. 6 1.1 Классификация и ...

Информатика

Состав и назначение системного программного обеспечения вычислительной техники

3. Состав и назначение системного программного обеспечения вычислительной техники Это программы общего пользования не связаны с конкретным применением...

Информатика

Работа с графикой в Adobe Photoshop и Flash CS.

ЛЕКЦИЯ № 3 WEB-технологии и компью терное моделирование Краткий учебны й курс 1 Структура учебного курса  Лекция 1. Введение в интернет технологии и ...

Информационные технологии

Принципы разработки и анализа алгоритмов определение информационной технологии

МОСКОВСКИЙ АВИАЦИОННЫЙ ИНСТИТУТ (НАЦИОНАЛЬНЫЙ ИССЛЕДОВАТЕЛЬСКИЙ УНИВЕРСИТЕТ) Факультет радиоэлектроники летательных аппаратов Кафедра № 402 Материал к...

Базы данных

Основные понятия и определения баз данных. Реляционная модель данных. Язык SQL

1. Реляционная модель данных. Язык SQL Основные понятия и определения баз данных База данных – организованная совокупность данных, длительное время хр...

Программирование

Информационное и лингвистическое обеспечение автоматизированных систем

МИНИСТЕРСТВО ОБРАЗОВАНИЯ И НАУКИ РОССИЙСКОЙ ФЕДЕРАЦИИ Федеральное государственное бюджетное образовательное учреждение высшего образования «УЛЬЯНОВСКИ...

Автор лекции

Г.П. Токмаков

Авторы

Информатика

HTML5

Тема 5. HTML5 1.1. Свойства HTML5 Язык HTML5 содержит много новых свойств, что делает HTML значительно более мощным и удобным для создания приложений ...

Смотреть все