- •Тема 5.1: Основы веб-дизайна.
- •Все документы html имеют одну и ту же структуру, определяемую фиксированным набором тегов структуры.
- •Базисные теги языка html.
- •Основные теги заголовка html-программы.
- •Основные атрибуты в теге body.
- •Задание базового шрифта.
- •Создание списков
- •Ссылки в html-документах.
- •Размещение графики. Вставка картинки.
- •Гиперссылка-картинка.
- •Вставка бегущей строки
Задание базового шрифта.
<BASEFONT SIZE =число>
SIZE =число – где число это размер шрифта 1-7 или относительный размер шрифта по отношению к базовому от –6 до +6. По умолчанию базовый шрифт равен 3. Закрывающий тег не используется.
Создание списков
Часто для оформления текста используют списки. Списки – это структуры, которые позволяют упорядочивать информацию на страницах сайтов. Списки бывают:
Упорядоченные или нумерованные для предоставления действий с четко заданной очередностью выполнения.
Неупорядоченные или маркированные для предоставления связанных между собой каким-то образом элементов, игнорируя при этом их иерархию.
Список термин - определение или глоссарий для предоставления двухуровневых видов информации.
Логические списки, определяющие структуры типа меню и каталога файлов.
Тег OL |
тег создания нумерованных списков (нумерация происходит автоматически) |
Тег UL |
тег создания маркированных списков; для пометки элемента списка используются маркеры. |
||||||||||||||||||
Тег LI - определяет элемент списка |
<OL атрибуты> <LI>Элемент списка 1</LI> <LI>Элемент списка 2</LI> ……………………………… <LI>Элемент списка n</LI> </OL>
|
Тег LI - определяет элемент списка |
<UL TYPE = тип маркера > <LI>Элемент списка 1</LI> <LI>Элемент списка 2</LI> ……………………………… <LI>Элемент списка n</LI> </UL>
|
||||||||||||||||||
Атрибуты тега OL: |
Атрибуты тега UL: |
||||||||||||||||||||
TYPE - вид счетчика:
|
Параметр TYPE тега UL определяет внешний вид маркера: DISK, CIRCLE, SQUARE. |
||||||||||||||||||||
START=n - число, с которого начинается отсчет. |
По умолчанию используется маркер вида DISK. |
Создание остальных видов списков остаётся на самостоятельное изучение.
Ссылки в html-документах.
Главное преимущество HTML-документа состоит в возможности включения в документ ссылок на другие документы (гиперссылок). В качестве гиперссылки можно использовать текст или графику. Браузер выделяет (обычно цветом и/или подчеркиванием) слова, являющиеся ссылками. Цвет выделения ссылок устанавливается в теге BODY:
LINK - устанавливает цвет выделения ссылок.
VLINK - устанавливает цвет выделения ссылок, на которых уже побывали.
ALINK - устанавливает цвет активной ссылки.
|
Ссылки позволяют при помощи нажатия кнопки мыши быстро переходить от одного документа к другому не задумываясь, где находится этот документ. |
Гиперссылка – средство навигации в гипертекстовом документе; с помощью гиперссылки пользователь переходит от одного узла (пункта назначения гиперссылки) к другому. Она состоит из 2 связанных фрагментов, которые именуются точками привязки. Точки привязки в зависимости от назначенных атрибутов выполняют 2 функции:
задание пути к объекту - гиперссылка;
указание на фрагмент документа, к которому будет осуществлен переход по гиперссылке - якорь.
Для создания гиперссылки используют парный тег <А>…</А>.
В общем виде точка привязки имеет следующую грамматику: <А атрибуты>[содержимое HTML]</А>
содержимое HTML – текст указатель ссылки и/или изображение.
Возможны гиперссылки:
на удаленный HTML-файл (внешние);
на некоторую точку в этом же документе (внутренние);
на любой файл, не являющийся HTML-документом (внешние).
Адрес документа может быть относительным (имя файла в пределах данного компьютера плюс имя метки в пределах данного файла) или абсолютным (полное имя файла с диска данного компьютера плюс имя метки в пределах данного файла).
Рассмотрим создание различных типов гиперссылок:
Атрибуты тега <А>…</А>.
href |
Задаёт URL-адрес ресурса, на который должен перейти пользователь, щёлкнув по ссылке (атрибут может указывать как на внешние документы, так и на внутренний элемент данного документа). |
|||
Ссылка на внешний документ:
|
||||
|
<А href=”[URL][путь к файлу]”>содержимое HTML</А> Примеры гиперссылок:
|
|||
Ссылка на закладку в том же документе:
|
||||
|
<А href=”#Уникальное имя”>содержимое HTML</А> Примеры гипперссылок
|
|||
Ссылка на закладку во внешнем документе:
|
||||
|
<А href=”[URL][путь к файлу]#Уникальное имя”>содержимое HTML</А> Примеры гипперссылок
|
|||
name |
данный атрибут задаёт якорь (метку или закладку), куда осуществится переход по гиперссылке. Перед именем метки ставится символ #.
|
|||
<А name=”Уникальное имя”>[тело_ссылки]</А> Зарезервированные ссылки: |
||||
Указание электронной почты: <А href=mailto:имя@домен title=”тема_сообщения”> тело_ссылки </А> |
Ссылка на письмо: <А href=mailto:ivan@mtu.ru”>Пишите письма </А> |
|||
Переход к верху данной странице <А href=”имя файла.htm#Top”> Текст (например: Вверх) </А> |
Ссылка на верх страницы: <A href==”new.htm#Top”>Вверх</A> |