Разработка web -страниц
Министерство образования и науки Российской Федерации
Сибирский государственный аэрокосмический университет
имени академика М. Ф. Решетнева
А. П. Багаева
РАЗРАБОТКА WEB -СТРАНИЦ
Утверждено редакционно-издательским советом
университета в качестве учебного пособия
для студентов экономических специальностей
всех форм обучения
 |
Красноярск 2012
УДК 004.738.5(075.8)
ББК 32.988.02-018я7
Б14
Рецензенты:
кандидат технических наук, доцент Л. В. Ермолаева
(Красноярский государственный торгово-экономический институт);
доктор технических наук, профессор А. Н. Ловчиков
(Сибирский государственный аэрокосмический университет)
Багаева, А. П.
Б14 Разработка web-страниц : учеб. пособие / А. П. Багаева ; Сиб. гос. аэрокосмич. ун-т. – Красноярск, 2012. – 136 с.
ISBN 978-5-86433-526-0
Учебное пособие содержит последовательное изложение процесса создания web-страницы с помощью языка HTML. Теоретический материал подкреплен практическими заданиями. Для каждой главы приведен перечень вариантов для самостоятельной работы.
Рекомендовано для студентов экономического направления, изучающих дисциплины «Информатика и интернет-технологии», «Разработка web-страниц», «Разработка электронного портала», «Интернет-программирование», «Программные средства разработки web-страниц и презентаций». Также может быть рекомендовано для всех студентов других направлений, изучающих интернет-технологии.
УДК 004.738.5(075.8)
ББК 32.988.02-018я7
ISBN 978-5-86433-526-0 © Сибирский государственный аэрокосмический
университет имени академика М. Ф. Решетнева, 2012
© 
Багаева А. П., 2012
ОГЛАВЛЕНИЕ
Предисловие .......................................................................................... 5
1. Первые шаги по созданию web-страницы ..................................... 6
1.1. Структура документа .................................................................. 6
1.2. Форматирование текста ............................................................... 18
1.3. Структурное форматирование .................................................... 23
1.4. Списки .......................................................................................... 25
Практическое задание. Создание web-страницы .................................. 28
Контрольные вопросы и задания .......................................................... 29
Задания для самостоятельной работы ................................................... 30
2. Делаем web-страницу интереснее .................................................... 33
2.1. Гиперссылки ................................................................................. 33
2.2. Графика и мультимедиа на web-странице .................................. 37
Практическое задание. Графика и гиперссылки на web-странице ....... 45
Контрольные вопросы и задания .......................................................... 46
Задания для самостоятельной работы ................................................... 47
3. Основы построения таблиц ............................................................. 49
3.1. Создание и форматирование простой таблицы ......................... 49
3.2. Создание сложных таблиц .......................................................... 59
3.3. Вложенные таблицы .................................................................... 62
3.4. Разметка web-страницы при помощи таблицы .......................... 63
Практическое задание. Создание таблиц .............................................. 66
Контрольные вопросы и задания .......................................................... 68
Задания для самостоятельной работы ................................................... 68
4. Оформление страниц с помощью фреймов ................................... 70
4.1. Создание простых фреймов ........................................................ 70
4.2. Создание вложенных фреймов .................................................... 75
4.3. Взаимодействие фреймов ............................................................ 78
4.4. Плавающие фреймы .................................................................... 82
Практическое задание. Разметка web-страницы с помощью
фреймов ............................................................................................... 84
Контрольные вопросы и задания .......................................................... 85
Задания для самостоятельной работы ................................................... 86
5. Форматирование страницы с использованием
каскадных таблиц стилей ................................................................ 87
5.1. Формирование каскадных таблиц стилей ................................... 88
5.2. Варианты использования CSS .................................................... 92
5.3. Принцип наследования ................................................................ 95
5.4. Обзор свойств CSS ...................................................................... 98
5.5. Слои и позиционирование документов ...................................... 108
Практическое задание. Использование CSS
при форматировании web-страниц .................................................... 112
Контрольные вопросы и задания .......................................................... 114
Задания для самостоятельной работы ................................................... 115
6. Использование формы для создания интерактивности
на web-странице ................................................................................ 117
6.1. Задание формы ............................................................................ 117
6.2. Создание элементов управления ................................................. 119
6.3. Комбинирование форм и таблиц ................................................ 128
Практическое задание. Создание формы .............................................. 129
Контрольные вопросы и задания .......................................................... 131
Задания для самостоятельной работы ................................................... 132
Послесловие ........................................................................................... 133
Библиографический список ................................................................ 134
 |
ПРЕДИСЛОВИЕ
Сегодня каждый знает, что такое Интернет и web-страница; эти понятия стали частью повседневной жизни. Web-страницы, или, как их еще называют, электронные документы, связанные между собой, стали носителями информации во Всемирной паутине. Основой всех размещенных в Интернете электронных документов стал язык гипертекстовой разметки HTML.
Многие называют HTML языком программирования. Но это не совсем так, потому что в традиционном понимании HTML является языком структурной разметки электронных документов, который указывает программам просмотра HTML-страниц (браузерам) форму представления описанной в документе информации.
Создателем языка HTML считается Тим Бернерс-Ли. Однако нельзя сказать, что именно он один все и придумал. К открытию подошло все человечество, накопив достаточные знания. Так, например, Ваннер Бущ еще в середине двадцатого столетия объявил миру новое слово «гипертекст», а связать все тексты, произведенные человечеством перекрестными ссылками для создания «документарной вселенной» предложил Тед Нильсон.
Существует множество различных программ для написания HTML-страниц. Их можно разделить на две категории: программы, автоматизирующие вставку тегов, и обыкновенные стандартные текстовые редакторы и процессоры, созданные для любых платформ. Хотя во многих программах web-страницы создаются автоматически, следует обязательно учить язык HTML, чтобы понимать, как строится web-страница. Поэтому в пособии мы будем создавать web-страницу с помощью простейшего текстового редактора.
В пособии подробно, шаг за шагом, рассмотрен процесс создания web-страницы. Так в первой главе рассматривается структура HTML-документа и форматирование текста, представленного на web-странице. Во второй главе приводятся различные возможности размещения графики и мультимедиа, а также создания гиперссылок на web-странице. В третьей главе рассматриваются возможности применения таблиц для удобного размещения информации по странице. Четвертая глава представлена фреймами, которые способны разнообразить вид создаваемых страниц. Таблицы каскадных стилей представлены в пятой главе. Они дают возможность форматировать содержимое страниц, приводя их к единому стилю. И наконец, в шестой главе рассматриваются формы, с помощью которых происходит интерактивное взаимодействие с посетителями страниц.
Можно с уверенностью сказать, что язык HTML является основой всех размещенных в Интернете электронных документов. Он выступает в роли фундамента, на который впоследствии с применением интернет-технологий возводятся надстройки, позволяющие получать поистине фантастические результаты.
 |
1. ПЕРВЫЕ ШАГИ ПО СОЗДАНИЮ
WEB-СТРАНИЦЫ
При изучении материала по созданию web-страницы следует придерживаться определенной последовательности, которая включает в себя сначала формирование макета страницы, а далее – ее информационное наполнение текстом, представленным в определенном формате.
1.1. Структура документа
HTML-документ (программа) представляет собой последовательность блоков, которые содержат программный код.
В отличие от других языков программирования, в HTML команды носят название «теги» (от англ. Tag – отметка). Синтаксис записи <тег>.
Практически все теги, за исключением отдельно оговоренных случаев, – парные: открывающий тег <тег> и закрывающий </тег>.
<тег> обрабатываемое значение </тег>
HTML-документ в упрощенном виде представляет собой следующую схему (рис. 1.1).
HTML-документ
Заголовок документа
Внешний заголовок
Тело документа
Основной код
Рис. 1.1. Схема HTML-документа
HTML-документ – это команда, которая сообщает браузеру о том, что это HTML-документ и является тегом верхнего уровня.
<HTML> Содержимое документа </HTML>