- •Учреждение образования «Гомельский государственный технический университет имени п.О. Сухого»
- •Проектирование и разработка web – сайтов
- •Html. Язык разметки гипертекста
- •1. Глобальные компьютерные сети
- •1.1 Интернет. Основные понятия, принципы функционирования
- •1.2 Адресация в Интернете
- •1.3 Архитектура web-приложений
- •1.4 Современные web - технологии
- •2. Язык гипертекстовой разметки страниц html
- •2.1 Язык гипертекстовой разметки страниц html
- •2.2 Структура html-документа
- •2.2 Задание типа html-документа
- •2.3 Основные элементы заголовка html-документа
- •2.4 Теги форматирования html-документа
- •2.5 Графические объекты html-документа
- •2.6 Задание ссылок
- •2.7 Структурированные данные. Списки
- •2.8 Структурированные данные. Таблицы
- •3. Язык гипертекстовой разметки страниц html. Фреймы
- •4. Язык гипертекстовой разметки страниц html. Формы
- •4.1 Задание формы
- •4.2 Элементы пользовательского интерфейса
- •4.3 Задание кнопок. Тег button
- •4.4 Раскрывающийся список. Тег select
- •4.5 Текстовая область. Тег textarea
- •Css. Каскадные таблицы стилей
- •5. Назначение стилевых таблиц
- •5.1 Встраивание таблиц стилей в html-документ
- •5.2 Типы селекторов
- •5.2.1 Универсальный селектор
- •5.2.2 Селектор типа
- •5.2.3 Селектор класса
- •5.2.4 Селектор идентификатора
- •5.2.5 Селектор атрибутов
- •5.2.6 Селектор псевдоклассов
- •5.2.7 Селекторы псевдоэлементов
- •5.2.8 Составные селекторы. Комбинаторы
- •5.2.9 Селектор потомка
- •5.2.10 Селектор дочерних элементов
- •5.2.11 Селекторcестринского элемента
- •5.2.12 Селектор обобщенных родственных элементов
- •5.3 Иерархия стилей
- •5.4 Единицы измерения
- •5.5 Описание шрифтов
- •5.6 Оформление списков
- •5.7 Задание цвета и фона
- •5.8 Блочная модель документа. Размеры, поля, отступы, границы
- •5.9 Блочная модель документа. Позиционирование, обтекание, управление видимостью
- •1. Вариант
- •2. Вариант
- •3. Вариант
- •6.1 Описание языкаHtml5
- •6.2 Структурные элементыHtml5
- •6.3Html5 и старые браузеры
- •6.4 Пример сайта наHtml5
- •7. Этапу разработки сайта
- •7.1 Этапы верстки веб-страниц
- •7.2 Особенности верстки веб-страниц
- •7.3 Макет сайта. Табличная верстка
- •7.4 Применение таблиц для верстки сайта. Макет из двух колонок
- •Vertical-align: top; /* Вертикальное выравнивание в ячейках */
- •Vertical-align: top; /* Вертикальное выравнивание в ячейках */
- •Vertical-align: top; /* Вертикальное выравнивание в ячейках */
- •7.5 Применение таблиц для верстки сайта. Макет из трех колонок
- •Vertical-align: top; /* Вертикальное выравнивание в ячейках */
- •Vertical-align: top; /* Выравнивание по верхнему краю ячейки */
- •Vertical-align: top; /* Выравнивание по верхнему краю ячейки */
- •7.6 Применение таблиц для создания рамок
- •7.7 Применение таблиц для склейки изображений
- •Литература
- •Содержание
Литература
А. Ломов. HTML, CSS, скрипты: практика создания сайтов. БХВ-Петербург, 2007 – 416с.
А.А. Дуванов. Web-конструирование. HTML. — СПб.: БХВ-Петербург, 2003. — 325 с.
Бен Хеник. HTML и CSS. Путь к совершенству. Питер, 2011 г– 336с.
В. Дронов. HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов. БХВ-Петербург, 2011 – 416с.
В. Мержевич. HTML и CSS на примерах. БХВ-Петербург, 2005 – 448с.
И. Квинт. HTML, XHTML и CSS на 100%. Питер, 2010 – 384с.
Кристофер Шмитт. CSS. Рецепты программирования. БХВ-Петербург, 2011. – 672 с.
М. Дубаков. Создание Web-страниц. Искусство верстки. Новое знание, 2004 – 228с.
Тиге Дж.К. DHTML и CSS для Internet. М.: НТ Пресс, 2005
Э. Кастро. HTML и CSS для создания Web-страниц. НТ Пресс, 2006 – 126с.
http://htmlbook.ru — учебники HTML, CSS
http://www.w3.org – сайт World Wide Web Consortium
http://www.xiper.net– учебникиHTML,CSS, разработка сайтов
Содержание
HTML. Язык разметки гипертекста 4
1. Глобальные компьютерные сети 4
1.1 Интернет. Основные понятия, принципы функционирования 4
1.2 Адресация в Интернете 5
1.3 Архитектура web-приложений 6
1.4 Современные WEB - технологии 8
2. Язык гипертекстовой разметки страниц HTML 10
2.1 Язык гипертекстовой разметки страниц HTML 10
2.2 Структура HTML-документа 12
2.2 Задание типа HTML-документа 13
2.3 Основные элементы заголовка HTML-документа 14
2.4 Теги форматирования HTML-документа 17
2.5 Графические объекты HTML-документа 25
2.6 Задание ссылок 31
2.7 Структурированные данные. Списки 32
2.8 Структурированные данные. Таблицы 36
3. Язык гипертекстовой разметки страниц HTML. Фреймы 43
4. Язык гипертекстовой разметки страниц HTML. Формы 47
4.1 Задание формы 47
4.2 Элементы пользовательского интерфейса 49
4.3 Задание кнопок. Тег BUTTON 55
4.4 Раскрывающийся список. Тег SELECT 56
4.5 Текстовая область. Тег TEXTAREA 58
CSS. Каскадные таблицы стилей 60
5. Назначение стилевых таблиц 60
5.1 Встраивание таблиц стилей в HTML-документ 60
5.2 Типы селекторов 62
5.2.1 Универсальный селектор 62
5.2.2 Селектор типа 63
5.2.3 Селектор класса 63
5.2.4 Селектор идентификатора 64
5.2.5 Селектор атрибутов 65
5.2.6 Селектор псевдоклассов 67
5.2.7 Селекторы псевдоэлементов 68
5.2.8 Составные селекторы. Комбинаторы 69
Таблица 5.1 – Табличка комбинаторов 70
5.2.9 Селектор потомка 70
5.2.10 Селектор дочерних элементов 71
5.2.11 Селектор cестринского элемента 71
5.2.12 Селектор обобщенных родственных элементов 72
5.3 Иерархия стилей 72
5.4 Единицы измерения 73
5.5 Описание шрифтов 77
5.6 Оформление списков 81
5.7 Задание цвета и фона 82
5.8 Блочная модель документа. Размеры, поля, отступы, границы 86
5.9 Блочная модель документа. Позиционирование, обтекание, управление видимостью 90
6. HTML5 101
6.1 Описание языка HTML5 101
6.2 Структурные элементы HTML5 103
6.3 HTML5 и старые браузеры 109
6.4 Пример сайта на HTML5 111
7. Этапу разработки сайта 117
7.1 Этапы верстки веб-страниц 118
7.2 Особенности верстки веб-страниц 121
7.3 Макет сайта. Табличная верстка 124
7.4 Применение таблиц для верстки сайта. Макет из двух колонок 126
7.5 Применение таблиц для верстки сайта. Макет из трех колонок 133
7.6 Применение таблиц для создания рамок 141
7.7 Применение таблиц для склейки изображений 143
Литература 153