51 Основы разработки Web-страниц

У чреждение образования

«Оршанский государственный техникум

железнодорожного транспорта

Белорусской железной дороги»

Основы разработки Web-страниц

Методические указания по выполнению

лабораторных работ по предмету

«Информатика»

ОРША

Содержание

Содержание 2

Основы разработки Web-страниц 4

1.Общие положения 4

2. Лабораторные работы 6

ЛАБОРАТОРНАЯ РАБОТА № 1 6

Тема: Создание простейших Web-страниц с применением языка HTML. 6

1. Краткая справка. 6

2. Контрольные вопросы. 11

3. Задания и технология выполнения. 11

4. Контрольные задания 13

5. Рекомендуемая литература 13

ЛАБОРАТОРНАЯ РАБОТА № 2 14

Тема: Создание гиперссылок в HTML- документах. 14

1. Краткая справка 14

2. Контрольные вопросы. 16

3. Задания и технология выполнения. 16

4. Контрольные задания 18

5. Рекомендуемая литература 18

ЛАБОРАТОРНАЯ РАБОТА № 3 19

Тема: Создание изображения и использование его на Web-странице. 19

1. Краткая справка 19

2. Контрольные вопросы. 20

3. Задания и технология выполнения. 20

4. Контрольные задания. 23

5. Рекомендуемая литература 23

ЛАБОРАТОРНАЯ РАБОТА № 4 24

Тема: Форматирование текста в HTML документах. 24

1. Краткая справка 24

2. Контрольные вопросы. 27

3. Задания и технология выполнения. 27

4. Контрольные задания 29

5. Рекомендуемая литература 29

ЛАБОРАТОРНАЯ РАБОТА № 5 30

Тема: Создание списков и таблиц средствами языка HTML. 30

1. Краткая справка 30

2. Контрольные вопросы. 31

3. Задания и технология выполнения. 31

4. Контрольные задания 36

5. Рекомендуемая литература 36

ЛАБОРАТОРНАЯ РАБОТА № 6 36

Тема: Создание Web-документа с помощью редактора Microsoft Word . 37

1. Краткая справка 37

2. Контрольные вопросы. 41

3. Задания и технология выполнения. 41

4. Контрольные задания 43

5. Рекомендуемая литература 44

Литература 44

Приложение 1. Общая структура типичного простейшего документа HTML 45

Приложение 2. Теги форматирования текстового потока. 46

Приложение 3. Теги форматирования абзацев: 47

 Приложение 4. Теги списков. 47

Приложение 5. Некоторые важнейшие теги HTML 48

Приложение 6. Создание бегущей текстовой строки 49

 Приложение 7. Список цветов символов HTML 50

Приложение 8. Создание таблиц в HTML 51

Основы разработки Web-страниц

1.Общие положения

К наиболее интенсивно развивающимся и популярным средствам Интернета относится

Всемирная паутина - World Wide Web (WWW - [Волд Вайд Веб]), в которой сосредоточена основная часть информации сети. Данные в паутине представлены в виде связанных между собой документов, которые называются Web-страницами. Каждая Web-страница может содержать текст, рисунки, видео, звукозаписи и прочее. Такие страницы

могут размещаться на компьютерах в любой точке планеты. Компьютер, постоянно подключенный к Всемирной паутине и содержащий Web-страницы и другие файлы, доступные пользователям Интернета, называется сайтом. Компьютер, который предоставляет в Интернете услуги WWW, называется Web-сервером. Web-сервер включает в себя аппаратное обеспечение, операционную систему, Web-страницы и обеспечивает поддержку протокола передачи данных в Интернете TCP/IP.

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

Просмотреть любую Web-страницу можно с помощью специальных программ - браузеров, наиболее популярные из которых - Microsoft Internet Explorer [Майкрософт Интернет Эксплорер] и Netscape Communicator [Нетскейп Коммюникэйтор]. Эти программы по-

зволяют отображать необходимую страницу с помощью ссылки или адреса, возвращать-

ся к уже посещенному документу, сохранять Web-страницу на диске.

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

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

Чтобы опубликовать в Интернете документ, содержащий некоторую информацию, достаточно поместить файл со страницей на сервер, который постоянно подключен к Интернету. Сервер должен поддерживать протокол передачи гипертекста HTTP – Hyper Text Transfer Protocol. Множество таких серверов формируют Всемирную паутину.

Для создания Web-страниц можно воспользоваться специальными программами редактирования документов Всемирной паутины.

Другой способ подготовки Web-страниц заключается в ручном создании кода документов Всемирной паутины на языке HTML - HyperText Markup Language (Язык разметки гипертекста). Данный язык представляет собой довольно простой набор команд, описывающих структуру документа. Язык HTML позволяет выделить в документе отдельные элементы - заголовки, абзацы, таблицы и т.д.

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

Хранить свои Web-страницы вы можете в разных местах. Например, некоторые провайдеры предоставляют клиентам свое дисковое пространство для размещения Web-сайтов.

Однако иногда подобные услуги провайдеров являются платными или налагаются жесткие требования на размер или содержание сайта.

Другой вариант хранения Web-страниц обеспечивают серверы бесплатной службы. Та-

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

Список некоторых серверов бесплатной службы:

www.mysiteinc.com

www.tripod.lycos.com/build

www.virtualave.net

www.fortunecity.com

www.hypermart.net

www.geocities.com

www.chat.ru

www.narod.ru

www.i-connect.ru

www.halyava.ru

www.null.ru

www.newmail.ru

Существует несколько способов для передачи файлов сайта в Интернете. Например, вы можете воспользоваться файловым менеджером сервера, на котором собираетесь поместить сайт. Эти серверы для передачи файлов используют протокол HTTP [ЭйчТиТиПи] -один из наборов правил передачи данных во Всемирной паутине. Напомним, что Всемирная паутина объединяет с помощью ссылок миллионы Web-сайтов, использующих

разные операционные системы, поэтому для передачи данных нужны специальные правила - протоколы. Протокол HTTP, например, используется для передачи Web-страниц.

Для передачи файлов на сервер бесплатной службы достаточно зарегистрироваться на нем с помощью браузера и скопировать ваш сайт на сервер средствами его файлового менеджера.

Другой способ передачи файлов сайта в Интернете заключается в использовании протокола FTP [ЭфТиПи]. Данный протокол предназначен не только для передачи файлов с одного компьютера на другой, но и для копирования, перемещения, удаления файлов на удаленном компьютере. С помощью протокола FTP можно передать документацию, фотографии, программы, звуковые записи. Для того, чтобы разместить сайт в Интернете с помощью протокола FTP, необходима специальная программа.

2. Лабораторные работы

Конец формы

ЛАБОРАТОРНАЯ РАБОТА № 1

Тема: Создание простейших Web-страниц с применением языка HTML.

Цель: Получение практических навыков создания простейших Web-страниц.

Техническое обеспечение: PENTIUM

Программное обеспечение: WINDOWS, Microsoft Word, Microsoft Internet Explorer.

Место проведения: Лаборатория ПЭВМ.

Продолжительность занятия: 2 часа.

1. Краткая справка.

Существуют три основных способа создания Web-страниц (или документов HTML):

1. Использование текстового редактора Блокнот, встроенного в Windows, и просмотр результатов с помощью браузера(Браузеры — программы просмотра Web-страниц). 

  Технология этого способа создания Web-страницы такова: В редакторе Блокнот создается файл Web-страницы, который сохраняется с расширением *.html. Затем этот файл загружается и просматривается программой Internet Explorer. Для вызова редактора Блокнот с целью редактирования файла Web-страницы во время ее просмотра в Internet Explorer, используется пункт меню Вид, Источник или В виде HTML. После сохранения файла и выхода из Блокнота для просмотра отредактированной страницы надо нажать клавишу F5 или кнопку "Обновить" в панели инструментов Internet Explorer.     2. Использование специальных редакторов документов HTML, например Hot Metal Light, Hot Dog Professional, MS Front Page, HTMLPad и др.     3. Использование редактора Microsoft Word, где создается текст документа, который затем конвертируется в HTML-формат.

Тег – оформленная единица HTML-кода. Например, <HEAD>, <FONT ...>, <BODY>, <HTML> и так далее. Теги бывают начальными (открывающими) и конечными (закрывающими, начинающимися со знака "/"). Например, вышеуказанным тегам соответствуют закрывающие теги </HEAD>, </FONT>, </BODY>, </HTML>. Элемент – понятие, введенное для удобства. Например, элемент HEAD состоит из двух тегов – открывающего <HEAD> и закрывающего </HEAD>. Следовательно, элемент – более емкое понятие, обозначающее пару тегов и участок документа между тегами, на который распространяется их влияние. Web-страница представляет собой набор элементов.

Независимо от того, как выглядит ваша страница, и какую информацию вы хотите отобразить, существует три тега, которые в соответствии со стандартами HTML должны присутствовать на каждой странице:

• <HTML> - Сообщает браузеру, что документ создан на HTML.

• <HEAD> - Отмечает вводную и заголовочную части HTML-документа.

• <BODY> - Отмечает основной текст и информацию.

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

<HTML> и </HTML>.

Эти тэги сообщают браузеру, что текст между ними следует интерпретировать как HTML-текст. Поскольку документы HTML чисто текстовые, тэг <HTML> говорит о том, что файл написан на языке HTML (Hyper Text Markup Language - Язык гипертекстовой разметки).

Создавая новый HTML-файл, в первую очередь необходимо ввести данную пару тэгов. Для этого наберите <HTML> в самом начале текста. Затем наберите его напарника - </HTML> - в конце. Теперь весь текст, написанный между ними, будет принят браузерам за текст HTML. Вы заметили, что во втором тэге присутствует символ "/"? Правый слэш (/) используется для обозначения закрывающихся тэгов. Большинство HTML-тэгов парные: один открывает (<HTML>), другой закрывает (</HTML>). Их действие распространяется только на тот текст, который находится между ними.

Теги HTML

Тег HTML состоит из следующих друг за другом в определенном порядке элементов:

• левой угловой скобки < (такого же, как "меньше чем" символа)

• необязательного слэша /, который означает, что тег является конечным тегом, закрывающим некоторую структуру. Таким образом, в этом контексте Вы можете читать символ /, как конец...

• имени тега, например TITLE или PRE

• необязательных, если даже тег может иметь их, атрибутов. Тег может быть без атрибутов или сопровождаться одним или несколькими атрибутами, например: ALIGN=CENTER

• правой угловой скобки > (такой же, как символа "больше чем").

Примеры:

<H1>

<H1 ALIGN=LEFT>

Элементы HTML

Большинство, но не все теги HTML спарены так, что за открывающим тегом следует соответствующий закрывающий тег, а между ними содержится текст или другие теги, например:

<H1>Foreword</H1>

В таких случаях два тега и часть документа, отделенная ими, образуют блок, называемый HTML элементом. Некоторые теги, например <HR>, являются элементами HTML сами по себе, и для них соответствующий конечный тег неверен. Далее мы будем называть теги по их именам, опуская обязательные угловые скобки.

Aтрибуты

Для каждого тега определяется множество возможных атрибутов. Большинство тегов допускает один или несколько атрибутов, однако атрибутов может и совсем не быть. Спецификация атрибута состоит, из расположенных в следующем порядке:

• имени атрибута, например WIDTH

• знак равенства (=)

• значения атрибута, которое задается строкой символов, например, "80".

Всегда полезно заключить значение атрибута в кавычки, используя либо одинарные ('80'), либо двойные кавычки ("80"). Строка в кавычках не должна содержать такие же кавычки внутри себя. Так, если дата заключена в двойные кавычки, используйте одинарные кавычки для последующего заключения в кавычки, и наоборот. Предпочтительно использование двойных кавычек, так как для глаза человека бывает трудно отличить одинарные кавычки от символов, подобных символам акцентирования.

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

• символов английского алфавита (A - Z, a - z)

• цифр (0 - 9)

• промежутков времени

• дефисов (-)

Таким образом, WIDTH=80 и ALIGN=CENTER - разрешенное сокращение для WIDTH="80" и ALIGN="CENTER". Ссылка на URL, например, HREF=foo.htm, допустима, однако, когда URL используется с атрибутами, он должен быть заковычен, например HREF="http://www.hut.fi/". Существуют некоторые браузеры, которые допускают отсутствие кавычек или наличие элементов с открывающими кавычками без закрывающих. Однако такую практику лучше не применять.

В пределах значения атрибута теги HTML не воспринимаются. А escape последовательности распознаются и интерпретируются, как символы.

Если значение атрибута такое же, как его имя, может быть использован минимальный синтаксис атрибута. То есть <UL COMPACT="COMPACT"> можно сократить до <UL COMPACT>. Некоторые агенты пользователей (программы просмотра пользователя, браузеры) даже требуют минимизации для некоторых атрибутов (COMPACT, ISMAP, CHECKED, NOWRAP, NOSHADE, NOHREF). Так что лучше использовать минимизированный синтаксис там, где это возможно.

Значения атрибутов должны быть отделены пробелами или незаполненными строками.

Чувствительность к регистру

Что касается имен тегов, атрибутов и большинства значений атрибутов, HTML нечувствителен к регистру. Вы можете, например, написать TITLE, или Title, или title, или даже tItLE, если Вам нравится.Но существуют и чувствительные к регистру конструкции языка, а именно:

• escape последовательности (более официально называемые символьными объектами), которые начинаются знаком & (например, <)

• URL, так как он может содержать наименования файлов, которые являются case чувствительными во многих операционных системах (например, в Unix).

Разделение на строки и использование пробелов и символов табуляции

Когда документ выводится на экран, пробелы и пустые линии не сохраняются, за исключением текста, заключенного в теги PRE (предварительно отформатированный текст). То есть любая последовательность пробелов, символов табуляции и пустых линий эквивалентна единственному пробелу в файле HTML. С другой стороны, пробел в файле HTML может быть представлен с использованием любого количества пробелов или новыми (пустыми) строками.

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

Общая структура типичного простейшего документа HTML:

<HTML>

<HEAD>

<TITLE>Название документа</TITLE>

</HEAD>

<BODY>

Здесь расположен текст самого документа HTML.

</BODY>

</HTML>