Web-страницы и Web-сайты
Web -страницы. Web-страницы создаются с использованием языка разметки гипертекстовых документов HTML ( Hyper Text Markup Language ). В обычный текстовый документ вставляются управляющие символы (HTML тэги), которые определяют вид Web-страницы при ее просмотре в браузере.
Основными достоинствами Web -страниц являются:- малый информационный объем;
- возможность просмотра в различных операционных системах.
Для создания Web -страниц используются простейшие текстовые редакторы, которые не включают в создаваемый документ управляющие символы форматирования текста самого редактора. В качестве такого редактора в операционной системе Windows или Linux можно использовать стандартное приложение Блокнот .
Создание Web-страниц с использованием HTML-тэгов требует больших усилий, времени и знания синтаксиса языка. Применение специальных инструментальных программных средств ( Web -редакторов) делает работу по созданию Web-сайтов простой и эффективной. Процесс создания и редактирования страниц в Web -редакторах очень нагляден, т.к. производится в режиме WYSIWYG (от англ. «What You See Is What You Get» - « Что видишь , то и получишь »).
Web -сайты. Публикации во Всемирной паутине реализуются в форме Web -сайтов, которые обычно содержат материал по определенной теме или проблеме. Государственные структуры и организации (правительство, дума, школа и т.д.) обычно создают официальные Web -сайты своих организаций, на которых размещают информацию о своей деятельности. Коммерческие фирмы на своих Web -сайтах размещают рекламу товаров или услуг и предлагают их приобрести в Интернет-магазине. Любой пользователь Интернета может создать свой тематический сайт, на котором размещается информация о своих разработках, увлечениях и т.д.
Как журнал состоит из печатных страниц, так и Web -сайт состоит из компьютерных Web -страниц. Сайт должен содержать систему гиперссылок, которая позволяет пользователю перемещаться по Web -страницам.
Прежде чем разместить свой Web-сайт на сервере в Интернет необходимо его тщательно протестировать, т.к. потенциальными посетителями вашего сайта являются десятки миллионов пользователей Интернет.
Для публикации Web-сайта необходимо найти подходящее место на одном из серверов Интернета. Многие провайдеры предоставляют своим клиентам возможность бесплатного размещения Web-сайтов на своих серверах (бесплатный хостинг).
Структура Web-страницы
HTML-код страницы помещается внутрь контейнера <HTML></HTML> . Без этих тэгов браузер не в состоянии определить формат документа и правильно его интерпретировать. Web-страница разделяется на две логические части: заголовок и содержание.
Заголовок Web-страницы заключается в контейнер <HEAD></HEAD> и содержит название документа и справочную информацию о странице (например, тип кодировки), которая используется браузером для ее правильного отображения.
Тэги заключаются в угловые скобки и могут быть одиночными или парными. Парные тэги содержат открывающий и закрывающий тег (такая пара тэгов называется контейнером).
Закрывающий тэг содержит прямой слэш (/) перед обозначением. Тэги могут записываться как прописными, так и строчными буквами.
Web-страница помещается в контейнер <HTML></ HTML > и состоит из двух частей: заголовка и отображаемого в браузере содержания.
Заголовок страницы помещается в контейнер < HEAD ></ HEAD > .
Заголовок содержит название страницы, которое помещается в контейнер < TITLE ></ TITLE > и при просмотре отображается в верхней строке окна браузера.
Отображаемое в браузере содержание страницы помещается в контейнер <BODY></BODY.
Созданную Web-страницу необходимо сохранить в виде файла под именем index.htm . В качестве расширения файла Web-страницы можно также использовать html . Рекомендуется создать для размещения сайта специальную папку и сохранять все файлы разрабатываемого сайта в этой папке.
Необходимо различать имя файла index.htm , под которым Web-страница хранится в файловой системе, и имя Web-страницы «Компьютер», которое высвечивается в верхней строке окна браузера. Имя Web-страницы должно соответствовать ее содержанию, т.к. оно в первую очередь анализируется поисковыми системами.
Необходимо различать имя файла index.htm , под которым Web-страница хранится в файловой системе, и имя Web-страницы «Компьютер», которое высвечивается в верхней строке окна браузера. Имя Web-страницы должно соответствовать ее содержанию, т.к. оно в первую очередь анализируется поисковыми системами.
Форматирование текста на Web -странице
Пока страница выглядит не слишком привлекательно, мелкий шрифт черного цвета на белом фоне. С помощью тэгов можно задать различные параметры форматирования текста.
Заголовки. Размер шрифта заголовков задается парами тэгов от <H1></H1> (самый крупный) до <H6></H6> (самый мелкий).
Шрифт. Некоторые тэги имеют атрибуты, которые являются именем свойства и могут принимать определенные значения. С помощью тэга FONT и его атрибутов можно задать параметры форматирования шрифта. Атрибут FACE позволяет задать гарнитуру шрифта (например, FACE =” Arial ”), атрибут SIZE – размер шрифта (например, SIZE =4 ).
Атрибут COLOR позволяет задавать цвет шрифта (например, COLOR =” blue ” ). Значение атрибута COLOR можно задать либо названием цвета (например, ”red” , ” green ” , ”blue” и т.д.), либо его шестнадцатеричным значением.
Шестнадцатеричное представление цвета использует RGB формат “# RRGGBB ” , где две первые шестнадцатеричные цифры задают интенсивность красного ( red ), две следующие – интенсивность зеленого ( green ) и две последние – интенсивность синего ( blue ) цветов. Минимальная интенсивность цвета задается шестнадцатеричным числом 00 , а максимальная – FF . Например, синий цвет задается значением “#0000 FF ” .
Выравнивание текста. Задать способ выравнивания текста позволяет атрибут ALIGN . Выравнивание по левой границе задается ALIGN =” left ” , выравнивание по правой границе – ALIGN =” right ” выравнивание по центру – ALIGN = ” center ”.
Таким образом, синий цвет заголовка, выровненного по центру, можно задать следующим образом:
<FONT COLOR=”blue”>
<H1> Все о компьютере </H1>
</ FONT >
Горизонтальная линия. Заголовки целесообразно отделять от остального содержания страницы горизонтальной линией с помощью одиночного тэга <HR> .
Абзацы. Разделение текста на абзацы производится с помощью контейнера < P ></ P > . При просмотре в браузере абзацы отделяются друг от друга интервалами. Для каждого абзаца можно задать определенный тип выравнивания и параметры форматирования шрифта.
Вставка изображений в Web -страницы
На Web -страницы можно помещать изображения, хранящиеся в графических файлов трех форматов – GIF , JPG и PNG .
Вставка изображений. Для вставки изображения используется тэг < IMG > с атрибутом SRC , который указывает на место хранения файла на локальном компьютере или в Интернете. Если графический файл находится на локальном компьютере в той же папке, что и файл Web -страницы, то в качестве значения атрибута SRC достаточно указать только имя файла. Например:
< IMG SRC =” computer . gif ”>
Если файл находится в другой папке на данном локальном компьютере, то значением атрибута должно быть полное имя файла, включая путь к нему в иерархической файловой системе. Например:
< IMG SRC =” C :\ computer \ computer . gif ”>
Если файл находится на удаленном сервере в Интернете, то должен быть указан Интернет-адрес этого файла. Например:
< IMG SRC =” http :// www . server . ru / computer . gif ”>
Положение рисунка относительно текста. Расположить рисунок относительно текста различным образом позволяет атрибут ALIGN , который может принимать пять различных значений: TOP (верх), MIDDLE (середина), BOTTOM (низ), LEFT (слева) и RIGHT (справа).
Вставка альтернативного текста. Пользователи иногда, в целях экономии времени, отключают в браузере загрузку графических изображений и читают только тексты. Чтобы не терялся смысл страницы, вместо рисунка должен выводиться альтернативный текст.
Альтернативный текст выводится с помощью атрибута ALT , значением которого является текст, поясняющий, что должен был бы увидеть пользователь на рисунке:
<IMG SRC=”computer.gif” ALT=”Компьютер”>
Гиперссылки на Web-страницах
Гиперссылки. Гиперссылки, размещенные на Web -странице, позволяют загружать в браузер другие Web -страницы, хранящиеся на локальном компьютере или в Интернете. Гиперссылка состоит из двух частей: адреса и указателя ссылки.
Гиперссылка создается с помощью универсального тэга <A> , и его атрибута HREF , указывающего в каком файле хранится загружаемая Web -страница:
< A HREF =”Адрес”>Указатель ссылки</ A >
Если загружаемая в браузер Web -страница размещена на локальном компьютере в той же папке, то вместо адреса указывается просто имя файла, например:
<A HREF=” filename.htm ”> Указатель ссылки </A>
Если загружаемая в браузер Web -страница размещена в Интернете, то в качестве адреса указывается Интернет-адрес, например:
<A HREF=” http://www.server.ru/Web- сайт /filename.htm
«>Указатель ссылки</ A >
Указатель ссылки мы видим при просмотре Web-страницы в браузере. Указателем ссылки может быть текст или рисунок, обычно выделенный синим цветом и подчеркиванием. При указании на него мышью, ее курсор превращается в значок «рука». Щелчок мыши по указателю вызывает переход на Web -страницу, указанную в гиперссылке.
Гиперссылки могут содержать адреса не только Web -страниц, но и адреса других типов файлов. Активизация таких гиперссылок будет приводить:
к просмотру изображения в браузере:
<A HREF=”picture.jpg”> Изображение </A>
к запуску проигрывателя, встроенного в браузер и воспроизведению звукового файла :
<A HREF=”sound.wav”> Звук </A>
к сохранение файла на локальном компьютере, с использованием встроенного в браузер менеджера загрузки файлов :
< A HREF =”Архив. zip ”>Скачать файл</ A >
Гиперссылка на адрес электронной почты. Полезно на начальной странице сайта создать ссылку на адрес электронный почты, по которому посетители могут связаться с администрацией сайта. Для этого необходимо атрибуту ссылки HREF присвоить адрес электронной почты и вставить ее в контейнер <ADDRESS></ADDRESS> , который задает стиль абзаца, принятый для указания адреса:
< ADDRESS >
< A HREF =» mailto : username @ server . ru »> E - mail : username @ server . ru </ A >
</ ADDRESS >
Теперь по щелчку мыши по ссылке адреса электронной почты будет открываться почтовая программа Outlook Express (или другая используемая по умолчанию почтовая программа), где в строке «Кому» будет указан заданный в ссылке адрес.
Списки на Web-страницах
Довольно часто при размещении текста на Web-страницах удобно использовать списки в различных вариантах:
· нумерованные списки, когда элементы списка идентифицируются с помощью чисел;
· маркированные списки, когда элементы списка идентифицируются с помощью специальных символов (маркеров);
· списки определений, позволяют составлять перечни определений в так называемой словарной форме.
Возможно создание и вложенных списков, причем вкладываемый список может по своему типу отличаться от основного.
Нумерованные списки. Нумерованный список располагается внутри контейнера < O L></ O L> , а каждый элемент списка определяется тэгом <LI> . С помощью атрибута TYPE тэга <OL> можно задать тип нумерации: арабские цифры (по умолчанию), « I » (римские цифры), « a » (прописные буквы) и др.:
< OL >
< LI >Системные программы
< LI >Прикладные программы
< LI >Системы программирования
</ OL >
Маркированные списки. Маркированный список располагается внутри контейнера < U L></ U L> , а каждый элемент списка определяется тэгом <LI> . С помощью атрибута TYPE тэга <UL> можно задать вид маркера списка: «disc» (диск), «square» (квадрат) или «circle» (окружность):
< UL TYPE =” square ”>
< LI >текстовые редакторы;
< LI >графические редакторы;
< LI >электронные таблицы;
< LI >системы управления базами данных.
</ UL >
Список терминов. Список терминов располагается внутри контейнера список определений <DL></DL> . Внутри него текст оформляется в виде термина, который выделяется одинарным тэгом <DT> и определения, которое следует за одинарным тэгом <DD> .
Интерактивные формы на Web-страницах
Для того чтобы посетители сайта могли не только просматривать информацию, но и отправлять сведения его администраторам, на страницах сайта размещают интерактивные формы. Формы включают в себя элементы управления различных типов: текстовые поля, раскрывающиеся списки, флажки, переключатели и т.д.
Разместим на странице «Анкета» анкету для посетителей, чтобы выяснить, кто из наших посетителей, с какими целями и с помощью каких программ получает и использует информацию из сети Интернет, а также выясним, какую информацию они хотели бы видеть на нашем сайте.
Вся форма заключается в контейнер <FORM></FORM> . В первую очередь выясним имя посетителя нашего сайта и его электронный адрес, чтобы иметь возможность ответить ему на замечания и поблагодарить за посещение сайта.
Текстовые поля. Для получения этих данных разместим в форме два однострочных текстовых поля для ввода информации.
Текстовые поля создаются с помощью тэга <INPUT> со значением атрибута TYPE=”text” . Атрибут NAME является обязательным и служит для идентификации полученной информации. Значением атрибута SIZE является число, задающее длину поля ввода в символах.
Для того чтобы анкета «читалась», необходимо разделить строки с помощью тэга перевода строки <BR> :
Переключатели. Далее, мы хотим выяснить, к какой группе пользователей относит себя посетитель. Предложим выбрать ему один из нескольких вариантов: учащийся, студент, учитель.
Для этого необходимо создать группу переключателей («радиокнопок»). Создается такая группа с помощью тэга <INPUT> со значением атрибута TYPE=”radio” . Все элементы в группе должны иметь одинаковые значения атрибута NAME. Например , NAME =” group ” .
Еще одним обязательным атрибутом является VALUE , которому присвоим значения ”учащийся”, ”студент” и ”учитель” . Значения атрибута VALUE должны быть уникальными для каждой «радиокнопки», т.к. при ее выборе именно они передаются серверу.
Флажки. Далее, мы хотим узнать, какими сервисами Интернета наш посетитель пользуется наиболее часто. Здесь из предложенного перечня он может выбрать одновременно несколько вариантов, пометив их флажками.
Флажки создаются в тэге <INPUT> со значением атрибута TYPE=”checkbox” . Флажки, объединенные в группу, могут иметь различные значения атрибута NAME. Например , NAME =” box 1”, NAME =” box 2” и т.д.
Еще одним обязательным атрибутом является VALUE, которому присвоим значения ” WWW ”, ”e-mail” и ” FTP ”. Значения атрибута VALUE должны быть уникальными для каждого флажка, т.к. при его выборе именно они передаются серверу.
Поля списков. Теперь выясним, какой из браузеров предпочитает посетитель сайта. Перечень браузеров представим в виде раскрывающегося списка, из которого можно выбрать только один вариант.
Для реализации раскрывающегося списка используется контейнер <SELECT></SELECT> , в котором каждый элемент списка определяется тэгом <OPTION> .
Переключателях, флажках и списках выбранный по умолчанию элемент задается с помощью атрибута SELECTED .
Текстовая область. В заключение, поинтересуемся, что хотел бы видеть посетитель на наших страницах, какую информацию следовало бы в них добавить. Так как мы не можем знать заранее, насколько обширным будет ответ читателя, отведем для него текстовую область с линейкой прокрутки. В такое поле можно ввести достаточно длинный текст.
Создается текстовая область с помощью тэга <TEXTAREA> с обязательными атрибутами: NAME , задающим имя области, ROWS , определяющим число строк, и COLS – число столбцов области.
Отправка данных из формы. Отправка введенной в форму информации осуществляется с помощью щелчка по кнопке.
Кнопка создается с помощью тэга <INPUT> . А трибуту TYPE необходимо присвоить значение ”submit” , а атрибуту VALUE , который задает надпись на кнопке, присвоить значение ”Отправить” .
Щелчком по кнопке Отправить можно отправить данные из формы на определенный адрес электронной почты. Для этого атрибуту ACTION контейнера <FORM> надо присвоить значение адреса электронной почты. Кроме того, в атрибутах METOD и ENCTYPE необходимо указать метод и форму передачи данных :
<FORM ACTION=”mailto:username@server.ru” METHOD=”POST” ENCTYPE=”text/plain”>
Комментариев нет:
Отправить комментарий