АДРЕСА ПОИСКОВЫХ СЛУЖБ

Чтоб можно было быстро найти в Интернет нужную информацию, работают специальные поисковые службы.

Приведём некоторые адреса популярных поисковых служб:

· www. yandex. ru

· www. rambler. ru

· www. aport. ru

· www. yahoo. com

Лекция 3. Поисковые системы в Internet

Лекция 4. Язык гипертекстовой разметки HTML

HTML (HyperText Markup Language) – язык, лежащий в основе формирования гипертекстовых документов World Wide Web.

Гипертекстовый документ – документ, содержащий ссылки на другой документ. В гипертекстовый документ встроены специальные коды, управляющие дополнительными элементами: форматирование, иллюстрации, мультимедийные вставки, гиперссылки. Реализовано это через протокол передачи гипертекста HTTP (HyperText Transfer Protocol), систему передающую документы HTML по World Wide Web.

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

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

Microsoft FrontPage Express – редактор Web-страниц. Средство для создания и оформления документов HTML в режиме непосредственного отображения.

Macromedia Flash – программа, предназначеная для создания целого Web-сайта или отдельных компонентов. Во Flash применяется векторная графика, которая связана с компьютером математическими формулами. Программа позволяет применять интерактивные возможности к анимации и графике, создавать интерактивные компоненты интерфейса. Создает код HTML для отображения графики, анимации и компонентов интерфейса. Позволяет исключить необходимость учитывать размер окна броузера, т.к. все компоненты Web-страницы автоматически изменяют свой размер до правильных пропорций. Возможно использовать совместно с любым редактором HTML.

Web-sites со статическими информационными страницами меньше привлекают внимание пользователей. Поэтому Web-дизайнеры пытаются придать своим страницам неотразимый вид, вводя графику и файлы анимационного формата GIF.

GIF (Graphic Interchange Format) – стандартный формат графических файлов WWW.

JPEG (Joint Photographic Experts Group) – графический формат, принятый всеми в качестве стандартного формата при оформлении Web-страниц.

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

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

Структура HTML документа

HTML – документ является текстовый файл с расширениями HTML или HTM.

Для создания HTML – документа можно использовать любой текстовый редактор.

HTML – документ состоит из основного текста документа и тегов разметки.

Тег – термин гипертекста, в переводе с английского обозначает «метка».

<HTML>…</HTML>	тег гипертекстового документа
<HEAD>…</HEAD>	тег заглавия документа
<TITLE>…</TITLE>	тег, использующийся для определения заголовка окна браузера. По названию документа HTML другие обозреватели могут найти информацию. Максимальная длина 40 символов.
<BODY>…</BODY>	тег тела документа
<P>	тег метки параграфа
<HR>	тег горизонтальной линии
<BR>	пустая строка

форматирование заголовков, шрифтов, абзацев

<H1>…</H1>	Главный заголовок или заголовок первого уровня
<H2>…</H2>	Заголовок второго уровня
<H3>…</H3>	Заголовок третьего уровня
<H4>…</H4>	Заголовок четвертого уровня
<H5>…</H5>	Заголовок пятого уровня
<H6>…</H6>	Заголовок шестого уровня
<B>…</B>	Полужирный
<I>…</I>	Курсив
<U>…</U>	Подчеркнутый
<EM>…</EM>	Выделение
<STRONG>…</STRONG>	Усиленное выделение
<TT>…</TT>	Пишущая машинка
<S>…</S>	Вычеркнутый
<SUB>	Подстрочный
<SUP>	Надстрочный
Атрибут ALIGN	Задает выравнивание заголовков и абзацев
Значения атрибута
LEFT	Выравнивание по левому краю
RIGHT	Выравнивание по правому краю
CENTER	Выравнивание по центру
JUSTIFY	Выравнивание по ширине
<FONT>	Задание размера, цвета и гарнитуры шрифта
SIZE=	Задает размер шрифта (от 1 до 7, по умолчанию принимает значение 3)
COLOR=	Задает цвет шрифта (ключевым словом или шестнадцатеричным значением)
FACE=	Задает гарнитуру шрифта

Пример:

<H1 align = “center”> Текст основного заголовка <H1>

<Font size=+1>Дизайн Интернет страниц</Font>

<Font color=«#ff0000»> красный </Font>

<P>шрифт Arial <font face= “Arial”> абвгд </Font>

Цвет	Код	Название	Цвет	Код	Название
Черный	#000000	Black	Фиолетовый	#FF00FF	Magenta
Белый	#FFFFFF	White	Бирюзовый	#00FFFF	Cyan
Красный	#FF0000	Red	Желтый	#FFFF00	Yellow
Зеленый	#00FF00	Lime	Золотой	#FFD800	Gold
Синий	#0000FF	Blue	Оранжевый	#FFA500	Orange
Серый	#808080	Gray	Коричневый	#A82828	Brown

создание и изменение списков

<UL>…</UL>	Маркированный список
<LI>	Элемент маркированного списка
<OL>…</OL>	Нумерованный список
<LI>	Элемент нумерованного списка
TYPE	Атрибут для изменения нумерованных списков
	арабские цифры
(английский алфавит) A	прописные буквы
(английский алфавит) a	строчные буквы
i	римские буквы
START	Атрибут, для задания номера с которого начинается нумерация элементов списка
VALUE	Атрибут отменяет предыдущий порядок нумерации и устанавливает новый порядковый номер или букву
<DL>…</DL>	Список определений или список с описанием
<DT>	Элемент описания - термин
<DD>	Элемент определения

Например:

Дизайн web-страницы с использованием графики

<BODY BGCOLOR="код_цвета">	Задание цвета фона
<BODY TEXT="код_цвета">	Задание цвета для всего текста
<BODY BACKGROUND="имя_файла">	Заполнение фона картинкой
<IMG SRC="имя_файла">	Изображение переносится на WEB-страницу с сохранением размера.
WIDHT=	Атрибут для задания ширины иллюстрации, измеряется в пикселях
HEIGHT=	Атрибут для задания высоты иллюстрации, измеряется в пикселях
ТОР	Выравнивает текст по верху изображения.
MIDDLE	Выравнивает текст по середине изображения.
BOTTON	Выравнивает текст по низу изображения
align=LEFT	Обтекаемое текстом изображение прижато к левой стороне окна браузера.
align= RIGHT	Обтекаемое текстом изображение прижато к правой стороне окна браузера
VSPACE=	Атрибут для задания верхнего и нижнего поля от иллюстрации до текста
HSPACE=	Атрибут для задания левого и правого поля от иллюстрации до текста
<BR CLEAR>	Отмена обтекания графики текстом

Пример:

<BODY BACKGROUND="графика1.gif"> - файл графика1.gif является фоновой картинкой, находится в текущей папке.

<BODY BACKGROUND="с:\HOME\Картинки\графика1.gif"> - файл графика1.gif является фоновой картинкой, не находится в текущей папке.

гипертекстовые ссылки

<A HREF= «адрес ссылки»> текст ссылки </A>	Текстовая ссылка
<A HREF= «адрес ссылки»> <IMG SRC= «имя графического файла»> </A>	Графическая ссылка
<A NAME= «имя метки»> … </A>	Размещение метки на странице для дальнейшего возврата к данному фрагменту
ALT	подсказка
<A HREF= «#имя метки»> адрес перемещения </A>	Ссылка на метку
<BODY LINK= «ЦВЕТ»>	Цвет текста ссылки
<BODY А LINK= «ЦВЕТ»>	Цвет текста активной ссылки
<BODY V LINK= «ЦВЕТ»>	Цвет текста просмотренной ссылки

Примеры:

<A HREF= «карта.html»> Это текстовая ссылка </A>

Дизайн web-страницы
с использованием карты изображений

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

<MAP NAME = «имя_карты»>	Тег, открывающий карту, содержащий имя_карты
<AREA …>	Определяет область на картинке посредством параметров SHAPE, COORDS.
HREF= «адрес_ссылки»	Строка, определяющая адрес ссылки
SHAPE= «форма_области»	Тег, определяющий форму области:
«DEFAULT»	по умолчанию (обычно прямоугольник)
«RECT»	прямоугольник задаются 4 координаты: верхнего левого и нижнего правого углов
«CIRCLE»	круг задаются 3 координаты: центр и радиус.
«POLYGONE» или «POLY»	многоугольник произвольной формы, задаются координаты каждого угла
COORDS	Координаты области задаются в пикселах, в виде перечня чисел, разделенных запятыми. Отчет начинается с нуля.
</MAP>	Тег, закрывающий карту
<IMG SRC = “имя_графического_файла” USEMAP=”# имя_карты” WIDHT=ширина HEIGHT=высота	Тег, распределяющий ссылки по картинке, вставляющий графическое изображение и реализующий привязку карты к нему, в котором используется атрибут связи с картой
USEMAP	Аргумент, задает расположение схемы распределения

Пример:

</MAP>