МИНИСТЕРСТВО ОБРАЗОВАНИЯ И НАУКИ РОССИЙСКОЙ ФЕДЕРАЦИИ ФЕДЕРАЛЬНОЕ ГОСУДАРСТВЕННОЕ БЮДЖЕТНОЕ ОБРАЗОВАТЕЛЬНОЕ УЧРЕЖДЕНИЕ ВЫСШЕГО ПРОФЕССИОНАЛЬНОГО ОБРАЗОВАНИЯ МОСКОВСКИЙ ГОСУДАРСТВЕННЫЙ УНИВЕРСИТЕТ ПРИБОРОСТРОЕНИЯ И ИНФОРМАТИКИ

В.Л. Гренков интернет технологии. Методика и практика создания web-страниц и web-сайтов

Учебное пособие

Москва 2014

УДК 004.55

ББК 32

Рекомендовано к изданию в качестве учебного пособия

редакционно-издательским советом МГУПИ

Рецензенты:

к.т.н., доцент Т.А. Степанова

Гренков В.Л.

Интернет технологии. Методика и практика создания web-страниц и web-сайтов: учебное пособие.– М.: МГУПИ, 2014.– 110 с.

Учебное пособие разработано в соответствии с программой дисциплины «Информационные технологии», являющейся одной из базовых в подго­товке бакалавра по направ­лению 201000 «Биотехнические системы и технологии», согласно Государст­венному образовательному стандарту.

Пособие включает в себя цикл практических заданий, предназ­наченных для поэтапного освоения студентами элементов языка гипер­текстовой разметки, инструментария и методики создания web-страниц по ключевым темам.

К каждой теме приведено краткое теоретическое введение и допол­ни­тельные сведения, необходимые для решения поставленных задач. Все практические задания подкрепляется примерами реализации в виде гото­вых текстов, которые предоставляются студентам в электрон­ном виде для подготовки ими web-страниц и их просмотра в браузере. Предлагаемый учебный материал дает возможность каждому студен­ту получить твердые практические навыки использования интернет-технологий при работе в компьютерных сетях.

Материал также может быть полезен студентам других инженерных направлений бакалавриата.

Табл. 2. Ил. 24. Библиограф.:16 назв.

УДК 004.55

ББК 32.

 Гренков В.Л., 2014

 МГУПИ, 2014

ОГЛАВЛЕНИЕ

ВВЕДЕНИЕ ………………………………………………………………………………… 5

1. Освоение основных правил записи гипертекста при создании

простых веб-страниц……………………………………………………………………….. 5

1.1. Документы html и основные теги…………………………………………………….. 5

1.2. Практические задания по теме: задания 1-1…1-10…………………………………. . 9

2. Освоение правил и приемов вставки рисунков и видеороликов в веб-документы……………………………………………………………………………….. . .15

2.1. Атрибуты оформления текста и графики…………………………………………….15

2.2. Практические задания по теме: задания 2-1…2-9………………………………….. 16

3. Практические приемы создания списков в веб-страницах………………………… ….23

3.1. Виды списков, теги и атрибуты их оформления ……………………………………23

3.2. Практические задания по теме: задания 3-1…3-11…………………………… ….. . 24

4. Практические приемы создания таблиц в веб-страницах...……………………… ….27

4.1. Применение и оформление таблиц…………………………………………………...27

4.2. Практические задания по теме: задания 4-1…4-9……………………………………29

5. Создание гиперссылок и связывание веб-страниц………………………………. …...34

5.1. Оформление внешних и внутренних гиперссылок………………………………… 34

5.2. Практические задания по теме: задания 5-1…5-1…………………………………....35

6. Практические приемы создания форм в веб-страницах……………………………… 41

6.1. Назначение и структура форм. Теги и атрибуты формы…………………………… 41

6.2. Практические задания по теме: задания 6-1…6-5……………………………………43

7. Применение таблиц каскадных стилей CSS…………………………………...... ...... ..47

7.1. Стили, их определение и применение. Теги и атрибуты CSS…………………… 47

7.2. Практические задания по теме: задания 7-1…7-8……………………………………51

8. Обработка форм …………………………………………………………………... …….60

8.1. Средства обработки форм. Подготовки файла обработки………………………….60

8.2. Практическое задания по теме: задание 8-1……………………………………….….61

9. Практика создания сайта…………………………………………..…………….............62

9.1. Постановка задачи……………………………………………………………………...62

9.2. Практические задания по теме: задания 9-1…9-4……………………………………64

10. Публикация сайта. Требования к сайту и его поддержка ……………………...........66

10.1. Особенности регистрации и поддержки сайта…………………………………… 66

10.2. Практическое задание по теме: задание 10-1………………………………………..69

Приложение П1. Исходные тексты заданий и решения: тексты html-документов……. 69

П1.1. Тексты к теме 1 (bmt1.txt и bmt1-10) ………………………………………………. 69

П1.2. Тексты к теме 2 (bmt2.txt и bmt2-10). …………………………………………........ 71

П1.3. Тексты к теме 3 (bmt3.txt и bmt3-10). …………………………………………........ 75

П1.4. Тексты к теме 4 (bmt4.txt и bmt4-6). ……………………………………………….. 78

П1.5. Тексты к теме 5 (bmt5.txt и bmt5-8). ………………………………………………. 79

П1.6. Тексты к теме 6 (bmt6.txt и bmt6-6). ………………………………………………. 85

П1.7. Тексты к теме 7 (bmt7.txt и bmt7-4, bmt7-5, bmt7-6, bmt7-7, bmt7-8)………….… 87

П1.8. Тексты к теме 8 (blank_z.html и otvet.html). ……………………………………… 101

П1.9. Текст к теме 9 (default.html). ……………………………………………………… 103

Литература. …………………………………………………….…………………………. 106

ВВЕДЕНИЕ

Современная система обучения в сфере высшего образования под­разу­мевает широкое использование студентами интернет-технологий, то есть различных средств доступа к информационным ресурсам через гло­баль­ную сеть интернет.

В отличие от обычного пользователя современному специалисту полезно иметь осмысленное и несколько более глубокое знание методики подготовки информации для передачи в сети интернет, а также механиз­мов и средств (аппаратных и программных), необходимых для приема, переда­чи, преобразования и интерпретации информации.

В первом приближении для этого необходимо получить представле­ние о компьютерных сетях, о сетевых технологиях, о протоколах передачи дан­ных, о службах и сервисах интернета. В настоящее время любая науч­но-производственная деятельность и бизнес любого рода немыслимы без рекламы в интернете, что требует создания собственного сайта и регистра­ции его в сети интернет.

Первым шагом на пути создания сайтов является приобретение навы­ков создания простейших веб-страниц. Для этого необходимо освоить язык гипертекстовой разметки HTML. Чтобы создать сайт средней сложности, содержащий встроенную базу данных следует дополнительно освоить язы­ки программирования JAVA и PHP и научиться использовать системы управления базами данных СУБД для создания собственных баз данных. Имеется достаточно обширная литература, посвященная перечисленным вопросам, в том числе большое число учебников по изучению языка HTML и созданию сайтов.

Подготовку текстов Web-страниц и сайтов можно выполнить путем набора текстов на HTML- языке в блокноте. Специальные редакторы, например, редактор Dreamweaver, позволяют создавать сайты за чрезвы­чайно короткое время. Тем не менее автор считает, что сначала следует научиться создавать Web-страницы в блокноте,только так можно лучше освоить все элементы языка HTML и особенности его применения. В даль­нейшем можно пользоваться редактором Dreamweaver, в котором боль­шин­ство функций по созданию сайтов автоматизировано. В то же время результат может оказаться далеким от оптимального. Полученные ранее знания и практика работы в блокноте позволят внести соответствую­щие коррективы и довести содержание и оформление сайта до желаемого.

Несмотря на обилие литературы, в частности учебников по созданию Web-страниц и сайтов, ощущается существенный дефицит простого и понят­ного учебного пособия, которое, с одной стороны, доступно для применения, и, с другой – дает полное методичное и поэтапное изложение процесса создания сайта на простых примерах. Данное пособие должно в определенной мере восполнить этот пробел.

В нем имеется набор практических заданий для поэтапного усвоения теории в процессе их выполнения. Помимо заданий к каждому из них име­ется краткое теоретическое введение, а в приложении П1 – тексты HTML-документов как в виде заготовок для дальнейшей доработки, так и в виде готовых решений.

Рекомендуется выполнять задания самостоятельно, а к готовым реше­ниям прибегать дозированно, в основном, для проверки своих резуль­татов. Корректировка HTML- текста при выполнении задания должна сопровож­даться просмотром ее действия в браузере, пока не будет полу­чено прием­лемое решение.

Весь цикл заданий может быть выполнен в форме самостоятельной домашней работы студента. Он состоит из десяти разделов, охватывающих необходимый минимум материала, освоение которого даст каждому сту­ден­­ту умение создавать собственные Web- сайты. Отдельные задания разделов могут отрабатываться на аудиторных практических занятиях. В завершение освоения материала, на последнем этапе, ставится задача со­зда­ния полноценного сайта.

При написании настоящего учебного пособия автор использовал опыт работы со студентами направления бакалаврской подготовки в обла­сти приборостроения. Тематика сайта содержит сведения по современ­ным меди­цинским диагностическим приборам как отечественных, так и зару­бежных производителей.

К данному учебному пособию прилагаются все необходимые файлы, в том числе и файлы всего сайта, которые предоставляются в распоря­же­ние студентов.

1. Освоение основных правил записи гипертекста при создании простых веб-страниц.