Понятие Web – документа.
Обыкновенный гипертекстовый документ, например энциклопедические страницы, сохраняются на одном диске, а web-страницы одной тематики могут размещаться на компьютерах-серверах в разных концах свет. Если пересылка файлов линиями связи осуществляется быстро, то пользователь может не заметить, что информацию он принимает не со своего компьютера а от серверов сети.
Web-документы сохраняются и пересылаются как текстовые файлы с расширением htm или html. Это обыкновенные файлы, написанные языком HTML. Для отображения таких файлов пользуются специальными программами–броузерами.
Web-документ – это документ, написанный языком HTML, который предназначен для просмотра информации на экране компьютера с помощью броузера.
Web-документ, который мы видим на экране броузера называется Web-страницей. Рекомендовано, чтобы одна страница размещалась на одном-двух экранных страницах, так, чтобы использование вертикального скроллинга было наименьшим. Дополнительную информацию организуют в виде гиперссылок на другие страницы.
Несколько Web-документов на одну тему, располагающиеся на одном компьютере или принадлежащие одному собственнику, составляют Web-узел (Web-сайт).
Web-узлы разрабатывают Web-дизыйтеры для фирм, магазинов, университетов, организаций с целью рекламных услуг, деятельности поиска партнеров для решения своих проблем.
Web-дизайн – это совокупность правил и рекомендаций, которые должны быть выдержаны авторами Web-страниц, для того чтобы они были информационными и имели привлекательный вид.
Правила составления Web-документов:
Одно из самых важных правил Web-дизайна – это правильное разбиение документа на отдельные части и организация связи между ними.
Простой документ должен располагаться на одной-двух экранных страницах, он не должен быть загроможден рисунками (один-два), горизонтальными линиями и гиперссылками.
Текстовые блоки могут быть предъявлены в виде небольших абзацев, таблиц и списков.
По стандарту абзацы на Web-страницах отделяются друг от друга пустой строкой. Абзацы могут быть выровнены по одному из краев или по центру экрана. Web-страница не имеет горизонтального рычага прокрутки. Броузер автоматически масштабирует горизонтальное изображение разных элементов страницы.
Как правило, информацию размещают на белом или сером фоне, хотя фон можно менять или размещать информацию на рисунке.
Нужно стараться, чтобы файлы не имели больших объемов. Объемные файлы долго и тяжело считываются пользователями, поэтому прежде чем вставить в Web-страницу звуковые и видео-сюжеты, нужно подумать о пропускной возможности линии связи..
Язык html
Для создания Web-страниц существует язык HTML (Hyper text Markup Language) – язык для размещения гипертекстовых документов. Можно использовать специальные редакторы, где используются основные конструкции языка и они выносятся на панели инструментов (Netscape Editor, HTML Writer, Hot Dog Professional). Многие современные текстовые, такие как Word редакторы позволяют создавать Web-документ без кодов языка HTML. Они генерируют этот код автоматически. Создание Web-страниц можно в текстовом редакторе NotPad или другой любой, который позволяет создавать файл в текстовом формате, этому файлу необходимо задавать расширение htm или html. Открыть файл и посмотреть результат работы можно в браузере в режиме просмотра.
Команды языка HTML называют тегами или контейнерами. Теги бывают парными и непарными. Теги записывают в квадратных скобках, закрывающийся тег имеет наклонную линию. Парные теги обязательно нужно закрывать, иначе он будет распространяться на последующие действия. Теги имеют свои параметры которые записывают в первом блоке тега через пробел, содержат текст или другие теги.
Тег и его параметры |
Описание |
Общего назначения |
|
<HTML>…</HTML> |
Определение HTML-файла. |
<HEAD>…</HEAD> |
Начало и конец заголовка |
<TITLE>…</TITLE> |
Описывает заголовок документа |
<!-----текст-------> |
Комментарий (текст заголовка), которые не выводится в окне браузера. |
<BODY параметры >…</BODY> BACKGROUND=”путь к файлу” BGCOLOR=”цвет” TEXT=”цвет” SIZE= COLOR=”цвет” LINK=”цвет” VLINK=”цвет” ALINR=”цвет” |
Содержит текст документа. Задает файл как фон Залает цвет фона Задает цвет текста Определяет размер шрифта, толщину рамки, линии в пикселях Определяет цвет рамки, линии и т.д. Устанавливает цвет гиперссылок Меняет цвет гиперссылок после его использования Меняет цвет активизированной гиперссылки |
<FONT параметры FACE=”название шрифта” SIZE=размер COLOR=”цвет”
ALIGN=”тип выравнивания”
</FONT> |
Установка нового шрифта
Установка шрифта, стандарт – Time New Roman Размер шрифта – это число от 1до 7, стандартно – 3 (10 пикселей), можно указать относительный размер, изменяющий стандарт (3) на заданное число, например +2 или –1 Указывется тип выравнивания: по центру, по левому краю, по правому краю. |
Форматирование текста |
|
<B>…</B> |
Жирный текст |
<I>…</I> |
Курсив |
<U>…</U> |
Подчеркивание |
<SUB>…</SUB> |
Нижний индекс |
<SUP>…</SUP> |
Верхний индекс |
<BIG>…</BIG> |
Большой шрифт |
<SMALL>…</SMALL> |
Маленький шрифт |
<EM>…</EM> |
Курсив |
<B><I>…</I></B> |
Жирный курсив |
<P>…</P> |
Определяет абзац текста |
<BR> |
Переход на новую строку |
<HR> |
Размещение горизонтальной линии |
<CENTER>…</CENTER> |
Выравнивание по центру |
<LEFT>…</LEFT> |
Выравнивание по левому краю |
<RIGHT>…</RIGHT> |
Выравнивание по правому краю |
Заголовки |
|
<H1>……</H1> |
Задает заголовки различных форматов (1-6) |
<H6>……</H6> |
|
Работа со списками |
|
<LH>…</LH> |
Формирует списки различных типов Задает заголовок списка |
<UL>.<LI >…</UL> |
Указывает ненумерованный список |
<OL TYPE=”1”> <LI>…</OL> |
Указывает способ нумерации: 1, 2, … |
<OL TYPE=”I”> <LI>…</OL> |
Указывает способ нумерации: a, b, c,… |
<DL> <DT> <DD>…</DL> |
Формирует список пояснений. |
Работа с таблицами |
|
<TABLE параметры>…</TABLE> Параметры: BORDER=3 BGCOLOR=”цвет” BORDERCOLOR=”цвет” WIDTH=300 Могут использоваться параметры выравнивания: ALIGN=”тип выравнивания”
VALIGN |
Создает таблицу Определяет толщину рамки Определяет цвет фона Определяет цвет рамки Определяет ширину таблицы в пикселях или процентах(%)
Выравнивает в зависимости от параметра: left-влево, center-по центру, reght-справа, top-вверх, middle-посередине, botton-снизу Выравнивает по вертикали (top-вверх, middle-посередине, botton-снизу) |
<TC>…</TC> |
Указывает заголовок таблицы |
<TR>…</TR> |
Формирует строку таблицы |
<TH>…</TH> |
Формирует ячейку с заголовком строки или столбца |
<TD>…</TD> |
Формирует текст в ячейке |
Вставка файлов различного формата |
|
<IMG SRC=”адрес файла” ALT=”альтернативный текст” ALIGN=”left” WIDTH=240 HEIGHT=200 BORDER=”толщина рамки”> |
Подключить графический файл (bmp, jpg, gif) Выводит текст, если файл не найден Выравнивание картинки по краю Задает размеры картинки Задает рамку вокруг картинки |
<IMG DYNSRC=”адрес файла” |
Подключает видео-файл. |
Вставка гипперссылки |
|
<A HREF=”адрес файла”><IMG SRC=”адрес файла”></A> |
Гиперссылка. Гиперссылка изображается в виде файла. |
<A HREF=”адрес файла”> Слово </A> |
Гиперссылка. Гиперссылка изображается в виде слова. |
<A NAME=”#TOP”>….</A> … Тело документа … <A HREF= #TOP> В начало </A> |
Гиперссылка на начало страницы (К фразе «В начало») |
<A HREF= #BOTTOM> В конец </A> … Тело документа … <A NAME=”#BOTTON”>….</A> |
Гиперссылка на конец страницы (К фразе «В конец») |
… <A HREF= #знак> Маркер гиперссылки </A> … <A NAME= #знак>….</A> … |
Гиперссылка к указанному месту, где стоит <A NAME= #знак>….</A> |
Для установки цвета фона и текста название цвета указывается соответствующим словом, который берется в кавычки. Основные цвета имеют такие названия:
“Black” – черный “Navy” – темно-синий
“Silver” – серый “Blue” – синий
“Maroon” – малиновый “Purple” – сиреневый
“Red” – красный “Fuchsia” – розовый
“Green” – зеленый “Teal” – бирюзовый
“Lime” – ярко-зеленый “Aqua” – голубой
“Olive” – темно-зеленый “Gray” – темно-серый
“Yellow” – желтый “While” – белый