Документ взят из кэша поисковой машины. Адрес оригинального документа : http://www.schools.keldysh.ru/sch1246/ikt/doc/WEBSITES.DOC
Дата изменения: Sat Dec 17 10:16:17 2011
Дата индексирования: Fri Feb 28 09:01:54 2014
Кодировка: koi8-r
Поисковые слова: п п п п п п п п п п п п п п п п

И.Сильванович

Основы языка HTML.
Создание web-страниц в программе Front Page[1]




1. Понятие об HTML

Информационное пространство Интернет представляет собой совокупность
документов, написанных на специальном языке HTML. Эти документы, называемые
Web-страницами, располагаются на серверах Интернета. Набор страниц,
связанных одной темой, и находящихся, как правило, на одном сервере,
именуется сайтом.
Язык разметки веб-страниц HTML (HyperText Markup Language) - это набор
специальных команд, которые интерпретируются браузером (браузер - программа
для просмотра веб-страниц, например Internet Explorer). Команды языка HTML
указывают браузеру каким образом ему представлять на экране тот или иной
элемент веб-страницы: абзац текста, рисунок и т.п.
Команды в языке HTML называются тегами. Большинство тегов являются
парными, то есть состоят из открывающегося тега и закрывающегося тега.
Открывающийся тег всегда пишется в таких скобках <.>, а закрывающийся - в
таких . Между ними располагается элемент страницы (например абзац
текст), на который накладывается действие данного тега. Пример тега font,
который изменяет шрифт текста:

Мой первый сайт

При отображении данной веб-страницы в браузере текст Мой первый сайт
будет написан шрифтом Arial.
Зная язык HTML можно создавать веб-страницы просто записывая подряд
соответствующие теги (как при написании программы на языках BASIC или
PASCAL). Для этого можно использовать любой текстовый редактор, например
Word. Созданный таким образом код HTML надо будет сохранить в формате
Обычный текст (*.txt). Затем у полученного файла надо переименовать
расширение txt на htm или html.

2. Структура веб-страницы

Всё содержание страницы заключается между тегами и .
Внутри них страница состоит из двух разделов: заголовочная часть .
и основная часть . . Пример страницы:







My Page



Мой первый сайт






Атрибуты заголовочной части:
. windows-1251 - кодировка текста страницы. Для страниц, написанных только
на английском языке - 1252, для страниц на русском и на обоих языках -
1251.
. категории отнести вашу страницу.
. My Page - то, что записано между этими тегами, будет
отображаться в виде заголовка в верней части Explorer'а и как подпись на
кнопке внизу экрана.

3. Программа Front Page. Имена веб-страниц

Как указывалось выше, HTML-код страницы можно написать вручную,
например в программе Word. Более удобно создавать страницу в специальных
программах, например Microsoft Front Page.
В программе Front Page веб-страницу можно представить в четырёх режимах
(вкладки в левом нижнем углу экрана):
. Конструктор - в этом режиме страница конструируется, на неё добавляются
новые элементы, форматируется текст и т.п.
. Код - в этом режиме виден текст страницы на языке HTML, который можно
редактировать.
. С разделением - комбинированный вариант: в верхней части страница
показана в режиме конструктора, в нижней на языке HTML.
. Просмотр - в этом режиме страница будет показана в таком виде, в каком
она отобразится в браузере Internet Explorer.
Сохранение веб-страницы в файл производится командой Файл - Сохранить
как. При формировании имени файла веб-страницы нельзя использовать русские
буквы и различные символы. Не рекомендуется использовать в имени файла
более 8 символов. Заглавные и строчные буквы в именах веб-страниц
различаются. Тип файла, содержащего веб-страницу - htm или html.
Первую страницу сайта, то есть ту, на которую попадает пользователь
после обращения к сайту, традиционно называют index.htm или index.html.

4. Оформление текстовой части веб-страницы

Оформление части текста страницы, после её выделения, производится
способами, аналогичными с программой Word, то есть соответствующими
экранными кнопками для изменения вида шрифта, размера шрифта, его стиля
(курсив, полужирный, с подчёркиванием), цвета шрифта. Не следует
использовать на странице шрифты, отличные от стандартных. Обычно на веб-
страницах используют только следующие шрифты: Times New Roman, Courier,
Arial, Verdana.
Выравнивание текста внутри абзаца производится соответствующими
кнопками.
В коде HTML отдельные абзацы записываются внутри тега

.

. Для
выравнивания абзаца в этот тег следует добавить опцию align=, значениями
которой могут быть следующие варианты: left, right, center и justify..
Пример выравнивания абзаца по обеим границам:



Для изменения межстрочного расстояния внутри абзаца следует выделить
абзац и выполнить команду Формат - Абзац. Затем в разделе Между строк надо
выбрать необходимый межстрочный интервал.
Абзацы на веб-странице всегда отделяются друг от друга некоторым
расстоянием. Если нужно это расстояние изменить, следует выделить текст
нескольких абзацев, выполнить команду Формат - Абзац. Затем в разделе
Интервал надо ввести новое значение расстояния до абзаца (Перед) и после
него (После). Чтобы абзацы не отделялись друг от друга по высоте, оба
значения должны равняться нулю.
Оформление списка перечислений производится командой Формат - Список,
после чего выбирается подходящий стилевой вариант оформления списка.

5. Фон страницы

Фоном страницы может быть равномерное окрашивание в определённый цвет
или конкретный рисунок. Рисунок следует создать предварительно и сохранить
его в ту же папку, где находится веб-страница. Размер рисунка должен быть
небольшим, максимум 150х150 пикселей. Тип рисунка - gif или jpg. Рисунок в
качестве фона будет автоматически размножен по вертикали и по горизонтали.
Для установки фона страницы вначале следует выполнить команду Формат -
Фон. Если фоном должен быть равномерный цвет, то в разделе Цвета - Фон
следует его выбрать из списка. Если фоном должен быть рисунок, то надо
поставить галочку у варианта Фоновый рисунок и указать файл с рисунком,
нажав на кнопку Обзор.
Код HTML, устанавливающий фон веб-страницы, имеет следующий вид:



или



Первый вариант кода устанавливает фон страницы в виде равномерного
окрашивания в определённый цвет (в данном случае - салатовый). Все цвета,
используемые на веб-страницах, записываются в шестнадцатеричном коде, перед
которым указывается знак #. Второй вариант кода делает фоном страницы
рисунок, находящийся в файле graphic1.gif.

6. Гиперссылки

Гиперссылки (в виде текста или рисунка) позволяют переходить на другие
страницы того же сайта или на страницы других сайтов. Страница по ссылке
может открываться в данном окне Explorer'а, в новом окне или во фрейме (об
этом варианте речь пойдёт ниже).
Текст гиперссылки выглядит следующим образом:

Информация о фирме ВЕГА

В этой записи:
. Информация о фирме ВЕГА - текст ссылки, при щелчке на котором откроется
другая страница.
. vega.htm - файл со страницей, которая откроется при щелчке на тексте
ссылки
. _blank - новая страница откроется в новом окне (при варианте _self в
том же окне)
Бывает что файл, на который надо сделать ссылку, расположен в другой
папке. Рассмотрим все возможные случаи. Допустим, что из файла index.htm
надо сделать ссылки на 3 разных файла в разных папках (см рисунок).
[pic]

Ссылки на странице index.htm будет такими:

Информация о фирме ВЕГА-1

Информация о фирме ВЕГА-2

Информация о фирме ВЕГА-3

Для создания гиперссылки в программе Front Page следует:
. выделить кусок текста (или рисунок),
. выполнить команду Вставка - Гиперссылка,
. в разделе Выбор рамки выбрать вариант открытия страницы (Та же рамка - в
том же окне, Новое окно - в новом), нажать кнопку Ок.
. найти файл со страницей, на которую производится переход, и нажать Ок.

7. Рисунки на веб-страницах

Как указывалось выше, рисунки используемые на веб-страницах должны быть
сохранены в форматах jpg (фотографии) и gif (фон и элементы страницы:
кнопки, заголовки-банеры и пр.). Сами рисунки должны находиться в отдельных
файлах; на самой странице есть лишь указание-ссылка на файл с рисунком (в
отличии от документа Word, где в один файл сохраняются и текст и рисунки).
Если рисунок выполняет роль графической гиперссылки, то его размеры не
должны превышать 100х100 пикселей.
Для вставки рисунка на страницу в программе Front Page следует:
. установить курсор в место вставки будущего рисунка
. выполнить команду Вставка - Рисунок - Из файла.
. найти файл с рисунком, выделить его и нажать Ок.
Код HTML рисунка, вставленного на веб-страницу, имеет следующий вид:



В этой записи значение опции src= указывает на файл, в котором
содержится данный рисунок. Опции width и height указывают реальные размеры
рисунка. Значение этих опций можно изменить, но качество рисунка при этом
ухудшится.

8. Таблицы - как вариант форматирования элементов страницы

Таблица с невидимыми границами служит мощным средством форматирования и
нестандартного расположения элементов на веб-странице. Такой способ
позволяет располагать тексты напротив рисунков, тексты в виде узких
столбцов и т.п.
Для создания таблицы в программе Front Page следует:
. установить курсор в место её будущего расположения
. выполнить команду Таблица - Вставить - Таблица.
. задать необходимые параметры и нажать Ок.
Параметры таблицы:
Задать ширину. Если мы выберем вариант В процентах и установим,
например, 50%, то при любых размерах окна браузера таблица по ширине будет
занимать ровно его половину (то есть ширина таблицы будет меняться при
изменении ширины окна браузера). Если мы выберем вариант В точках, и
установим, например 500, то при любых размерах окна ширина таблицы будет
составлять ровно 500 пикселей (то есть ширина таблицы будет неизменна при
изменении ширины окна браузера).
Строк, Столбцов - число строк и столбцов соответственно.
Выравнивание - выравнивание таблицы по краю окна браузера.
Границы: размер - размер (толщина) границы таблицы. Для невидимой
таблицы - 0.
Поле ячеек (Cell padding) - расстояние внутри каждой ячейки таблицы от
её границ до текста (см рисунок).
Интервал ячеек (Cell spacing) - расстояние от границы ячейки до границы
следующей ячейки или до внешней границы таблицы (см рисунок).
[pic]

При желании можно изменить цвет фона как всей таблицы, так и в её
отдельных ячейках. Для изменения цвета фона следует щёлкнуть правой кнопкой
мыши внутри ячейки таблицы и выполнить команду Свойства таблицы либо
Свойства ячейки. Затем в разделе Фон задать необходимый цвет. Фоном таблицы
и её отдельных ячеек может также служить рисунок в формате gif или jpg.
В ячейки таблицы можно вставить текст и рисунки. Выравнивание элементов
внутри ячеек таблицы производят стандартными инструментами выравнивания.

9. Фреймы

Фреймовая страница - это страница, состоящая из нескольких окон, в
которых отображаются разные веб-страницы.
Сама по себе фреймовая страница содержит только данные о том, какие веб-
страницы открываются в его окнах. Каждое окно во фрейме должно иметь
собственное имя и оно не должно совпадать с именем веб-страницы, которая
открывается в этом окне. Перед созданием самой фреймовой страницы следует
вначале создать все веб-страницы, входящие в её состав.
Построение фреймовой страницы рассмотрим на конкретном примере. Пусть
требуется создать фрейм в виде двух окон разделённых вертикально. Фреймовая
страница пусть называется main.htm. В левом окне фрейма должна изначально
открыться страница menu.htm. В правом окне фрейма должна изначально
открыться страница history.htm. Левое окно во фреймовой странице назовём
left, а правое right (см. рисунок).

[pic]

Для создания фрейма main.htm из примера в программе Front Page следует:
. Создать файлы menu.htm и history.htm
. Выполнить команду Файл - Создать - Другие шаблоны страниц, найти вкладку
Страницы рамок и выбрать нужный вариант схемы фрейм-страницы, в данном
случае Оглавление, нажать Ок
. Нажать в левом окне фрейма кнопку Задать начальную страницу и найти в
списке файлов нужную нам страницу, в данном случае menu.htm
. Нажать в правом окне фрейма кнопку Задать начальную страницу и найти в
списке файлов нужную нам страницу, в данном случае history.htm
. Сохранить фрейм-страницу командой Файл - Сохранить как, в данном случае
с именем main.htm
Если щёлкнуть на вкладке Код, то можно увидеть текст фрейм-страницы на
языке HTML:




My Page









Из этой записи видно, что программа Front Page назвала левое окно
фрейма словом contents, а правое main. Нам нужно было назвать эти окна
иначе. Заменим слово contents на left, а main на right соответственно и
сохраним фрейм-страницу ещё раз командой Файл - Сохранить.
Фреймовая структура удобна тем, что все ссылки можно расположить в
одном окне, а страницы, открываемые по этим ссылкам, будут реализовываться
в другом окне того же фрейма. Файл menu.htm, как видно из рисунка, содержит
ссылки. При щелчках на этих ссылках соответствующие им веб-страницы должны
открываться именно в окне right. Для этого в текст каждой ссылки на
странице menu.htm в раздел "target=" следует добавить указание о том, в
каком именно окне фрейма она должна реализоваться. Пример оформления
ссылки:

Информация о фирме ВЕГА-1

10. Свойства фреймовых страниц

Чтобы изменить ширину фреймовой страницы, следует отредактировать
следующий код:



Данный код означает, что граница между окнами во фрейме проходит на
расстоянии 150 пикселей от левой границы экрана, а всю остальную часть
занимает правое окно фрейма. Следует изменить число 150 на другое.
Во время просмотра фрейм-страницы пользователь, при желании, может
двигать мышью границу между окнами фрейма. Чтобы заблокировать эту
операцию, следует добавить в тег (в любой из двух) опцию noresize.
Пример:






Границу между окнами фрейма можно сделать невидимой. Для этого следует
добавить в тег опцию border="0". Пример:







UpDate 2006
-----------------------
[1] На примере версии программы Microsoft Frontpage 2003