Устные вопросы

Билет 22

Разработка Web-сайтов с использованием языка разметки гипертекста HTML

Web-страницы и Web-сайты

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

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

< HTML >
< HEAD >
< ТITLE >Компьютер< /ТITLE >
< /HEAD >
< BODY >
Компьютер и ПО
< /BODY >
< /HTML >

Созданную Web-страницу необходимо сохранить в виде файла под именем index.htm либо index.html

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

Заголовки.
Размеры шрифтов заголовков задаются парами тэгов от < Н1 >< /Н1 > (самый крупный) до < Н6 >< /Н6 > (самый мелкий).

Шрифт.
С помощью тэга FONT и его атрибутов можно задать параметры форматирования шрифта. Атрибут FACE позволяет задать гарнитуру шрифта (например, FACE="Arial"), атрибут SIZE - размер шрифта (например, SIZE=4).
Атрибут COLOR позволяет задавать цвет шрифта (например, C0L0R="blue"). Значение атрибута COLOR можно задать либо названием цвета (например, "red", "green", "blue" и т. д.), либо его шестнадцатеричным значением.
Шестнадцатеричное представление цвета использует RGB-формат "#RRGGBB", где две первые шестнадцатеричные цифры задают интенсивность красного (red), две следующие - интенсивность зеленого (green) и две последние - интенсивность синего (blue) цвета.

Выравнивание текста.
Задать способ выравнивания текста позволяет атрибут ALIGN. Выравнивание по левой границе задается так: ALlGN="left", выравнивание по правой границе: ALIGN="right", выравнивание по центру: ALIGN= "center".
Таким-образом, синий цвет заголовка, выровненного по центру, можно задать следующим образом:
< FONT COLOR="blue" >
< Н1 ALIGN="center" >Компьютер и ПО< /Н1 >
< /FONT >

Горизонтальная линия.
Заголовки целесообразно отделять от остального содержания страницы горизонтальными линиями с помощью одиночного тэга < HR >.

Абзацы.
Разделение текста на абзацы производится с помощью тэгов < Р >< /Р >. При просмотре в браузере абзацы отделяются друг от друга интервалами. Для каждого абзаца можно задать определенный тип выравнивания и параметры форматирования шрифта.

Домашняя страница сайта.
На домашней странице сайта обычно размещается текст, кратко описывающий его содержание.

Вставка изображений в Web-страницы

На Web-страницы можно помещать изображения, хранящиеся в графических файлах трех форматов - GIF, JPEG и PNG.
Вставка изображений.
Для вставки изображения используется тэг < IMG > с атрибутом SRC, который указывает на место хранения файла на локальном компьютере или в Интернете. Если графический файл находится на локальном компьютере в той же папке, что и файл Web-страницы, то в качестве значения атрибута SRC достаточно указать только имя файла. Например:
< IMG SRC="computer.gif" >
Если файл находится в другой папке на данном локальном компьютере, то значением атрибута должно быть полное имя файла, включая путь к нему в иерархической файловой системе. Например:
< IMG SRC="C:\computer\computer.gif" >
Положение рисунка относительно текста.
Расположить рисунок относительно текста различным образом позволяет атрибут ALIGN, который может принимать пять различных значений: ТОР (верх), MIDDLE (середина), BOTTOM (низ), LEFT (слева) и RIGHT (справа).
< IMG SRC="computer.gif" ALIGN="right" >
Можно вставить текст, который будет появляться при наведении на картинку: < IMG SRC="computer.gif" ALIGN="right" ALT="Компьютер" >

Гиперссылки на Web-страницах
Гиперссылки- это текст при нажатие на который можно перейти на другую страницу. Например:
< А HREF="Адрес">Название ссылки< /А >

< А HREF="f ilename . htm" >Указатель ссылки< /А >
Гипертекст обычно выделенный синим цветом и подчеркиванием, или рисунок, выделенный рамкой. При указании на него мышью, ее курсор превращается в значок "рука". Щелчок мышью по указателю вызывает переход на Web-страницу, указанную в гиперссылке.

Просмотр изображения в браузере:
< А HREF="picture.jpg" >Изображение< /A >

Проигрыватель встроенный в браузер и воспроизведению звукового файла:
< А HREF="sound.wav" >Звук< /A >

Загрузки файлов: (Чтоб скачать файл)
< А HREF="Apxив.ziр" >Скачать файл< /А >

Гиперссылка на адрес электронной почты: (Чтоб отправить письмо на мейл)

< ADDRESS >
< А HREF="mailto:username@server.ru" >E-mail: username@server.ru< /A >
< /ADDRESS >

Списки на Web-страницах
Довольно часто при размещении текста на Web-страницах удобно использовать списки в различных вариантах:

Нумерованные списки.
Нумерованный список заключается в тэг < OL >< /OL >, а каждый элемент списка определяется тэгом < LI >. С помощью атрибута TYPE тэга < OL > можно задать тип нумерации: арабские цифры, "I" (римские цифры), "а" (строчные буквы) и ДР.:
< OL > < LI >Системные программы
< LI >Прикладные программы
< LI >Системы программирования
< /OL >

Маркированные списки.
Маркированный список заключается в тэг < UL >< /UL >, а каждый элемент списка определяется тэгом < LI >. С помощью атрибута TYPE тэга < UL > можно задать вид маркера списка: "disc" (диск), "square" (квадрат) или "circle" (окружность):
< UL TYPE="square" >
< LI >текстовые редакторы;
< LI >графические редакторы;
< LI >электронные таблицы;
< LI >системы управления базами- данных.
< /UL >

Список определений.
Список определений располагается внутри контейнера < DL >/< DL >. Внутри него текст оформляется в виде терминов, которые выделяются одинарными тэгами < DT > и определений, которые следуют за одинарными тэгами < DD >.
< DL >
< DТ >Процессор
< DD >Центральное устройство компьютера, производящее обработку информации в двоичном коде.
< DТ >Оперативная память
< DD >Устройство, в котором хранятся программы и данные.
< /DL >

Сайт создан в системе uCoz