Заглавная страница
Избранные статьи
Случайная статья
Познавательные статьи
Новые добавления
Обратная связь
FAQ
Написать работу

ТОП 10 на сайте

Приготовление дезинфицирующих растворов различной концентрации

Техника нижней прямой подачи мяча.

Франко-прусская война (причины и последствия)

Организация работы процедурного кабинета

Смысловое и механическое запоминание, их место и роль в усвоении знаний

Коммуникативные барьеры и пути их преодоления

Обработка изделий медицинского назначения многократного применения

Образцы текста публицистического стиля

Четыре типа изменения баланса

Задачи с ответами для Всероссийской олимпиады по праву

Мы поможем в написании ваших работ!

ЗНАЕТЕ ЛИ ВЫ?

Влияние общества на человека

Приготовление дезинфицирующих растворов различной концентрации

Практические работы по географии для 6 класса

Организация работы процедурного кабинета

Изменения в неживой природе осенью

Уборка процедурного кабинета

Сольфеджио. Все правила по сольфеджио

Балочные системы. Определение реакций опор и моментов защемления

Главная Избранные Случайная статья Познавательные Новые добавления Обратная связь FAQ Написать работу

Гипертекстовые ссылки и якоря

↑

⇐ ПредыдущаяСтр 2 из 25Следующая ⇒

Для создания гиперссылок используются теги <A> и </A>. Обязательным является атрибут HREF=. Его значением является адрес URL, на который указывает ссылка. Текст ссылки записывается между тегами <A> и </A>. При просмотре документа в браузере, текст ссылки обычно подчёркивается и отображается синим цветом. Щелчок по ссылке обеспечивает переход по ссылке, заданной адресом URL.

Если Web-страница, на которую указывает ссылка, располагается на другом Web-узле, то значением атрибута HREF= должен быть полный адрес URL документа, включая название протокола и Web-узла. Такие ссылки называют внешними.

Если ссылка указывает на другую страницу того же самого Web-узла, то достаточно указать относительный путь поиска документа. В этом случае создаётся внутренняя ссылка. Использовать внутренние ссылки очень удобно, так как при переносе Web-узла целиком на другой сервер, не требуется вносить изменения в отдельные документы.

Гипертекстовые ссылки могут указывать на определённое место внутри страницы. Нужное место документа отмечается якорем. Якорь использует теги <A> и </A>, но вместо атрибута HREF= для него обязательным является атрибут NAME=. Значением этого атрибута является имя якоря. Оно может состоять только из латинских букв и цифр и не должно содержать пробелов.

Для ссылки на установленный якорь надо указать имя якоря в конце адреса URL после имени документа, отделив его символом #.

Пример 3

<html>

<head>

<title>Ссылки и якоря</title>

</head>

<body>

Новые версии операционной системы и самые свежие драйверы можно найти на Web-узле компнии

<a href="http://www.microsoft.com">Microsoft</a>

<p>А теперь можно перейти к <a href="my.htm">моей личной странице.</a>

<p>О том как связаться с автором, рассказано в <a href="#adress">конце этой страницы.</a>

Здесь располагается основное содержание страницы.<br>

<a name="adress">Адрес электронной почты</a>

</body>

</html>

Рисунки на Web-страницах

Рисунки хранятся в отдельных файлах вне документа HTML. Для размещения рисунков в документе используется одиночный тег <IMG>. Этот тег имеет обязательный атрибут SRC=, значением которого является адрес URL файла изображения, записанный в абсолютной или относительной форме. При просмотре документа браузером рисунок отображается в том месте документа, где расположен тег <IMG>.

По умолчанию браузер отображает рисунок используя его реальные размеры. При необходимости размеры рисунка можно изменить с помощью атрибутов WIDTH и HEIGHT,. значения которых определяют ширину и высоту изображения в пикселях. Браузер использует параметры WIDTH и HEIGHT для определения места рисунка ещё до того, он загружен, поэтому целесообразно использовать эти атрибуты всегда.

Рисунок является текстовым элементом, находящимся внутри какого-либо абзаца. Чтобы рисунок отображался независимо от текста, его включают в отдельный абзац.

Положение изображения, встраиваемого в строку, определяется значением атрибута ALIGN:

§ BOTTOM совмещает нижнюю границу изображения с основанием текстовой строки;

§ MIDDLE совмещает середину изображения с серединой текстовой строки;

§ TOP выравнивает изображение по верхнему срезу текстовой строки.

Для получения изображения, обтекаемого текстом, тег <IMG> записывают в начале абзаца и используют ALIGN=”LEFT” или ALIGN=”RIGHT”. В этом случае рисунок размещается у левой или правой границы окна, а текст выводится рядом на свободном поле. Обычно в режиме обтекания между текстом и рисунком оставляют промежуток. Величина промежутка (в пикселях) определяется по горизонтали значением атрибута HSPACE, а по вертикали – атрибутом VSPACE.

В теге <IMG> с помощью атрибута ALT= задаётся альтернативный текст, содержащий описание изображения. Если браузер по той или иной причине не отображает рисунок, то вместо него выводится альтернативный текст.

Изображение, как и текст, можно использовать в качестве ссылки. Для этого тег <IMG> должен быть помещён между тегами <A> и </A>. Рисунок-ссылка отображается в синей рамке.

Изображение можно использовать в качестве фонового рисунка. В этом случае рабочая область окна заполняется повторяющимся рисунком, начиная от верхнего левого угла. Фоновый рисунок задаётся атрибутом BACKGROUND в теге <BODY>.

Пример 4

<html>

<head>

<title>Изображения разного размера</title>

</head>

<body>

</body>

</html>

Пример4.2

<html>

<head>

<title>Пример обтекания рисунка</title>

</head>

<body>

Постепенно (но все равно очень медленно) набирает популярность шина USB. Теперь любой производитель считает своим долгом в любой новой модели включить поддержку этого стандарта. И если не поставлять адаптер USB в любой модели, то уж обязательно включить его опционально. Спешим снять широко бытующее мнение, что подключив к монитору кабель USB вам больше ничего не нужно. Шина USB отнюдь не предназначена для передачи видеосигнала. Она предназначена только для передачи информации о конфигурации монитора, режимах работы, его настройках. Так, если монитор помнит только ограниченное количество настроек видеорежимов (обычно не больше 10-15) то применение USB можете позволить запоминать сколь угодно настроек, так как их будет запоминать не монитор, а ваш компьютер. Так что кроме кабеля USB вам все равно понадобиться обычный и привычный видеокабель.

</p>

</body>

</html>

Управление стилем шрифта

Для задания размера, цвета и начертания шрифта служит тег <FONT>, который должен иметь хотя бы один из трёх возможных атрибутов: SIZE=, COLOR=, FACE=. Установки действуют на текст, заключённый между тегами <FONT> и </FONT>.

Атрибут SIZE= задаёт размер шрифта. Возможны семь заранее заданных размеров шрифта от 1 до 7. Эти значения не соответствуют каким-либо единицам измерения, но чем больше значение, тем крупнее шрифт. По умолчанию используется значение 3.

Атрибут COLOR= определяет цвет шрифта, который может быть задан ключевым словом (например, RED), либо шестнадцатеричным значением в системе RGB (например, #FF0000 – красный).

Атрибут FACE= задаёт вид шрифта. Значением этого атрибута является название одного из шрифтов, установленных на компьютере. Так как заранее неизвестно, какие шрифты установлены на компьютере пользователя, то этот атрибут лучше не использовать.

Чтобы задать значения параметров SIZE=, COLOR=, FACE= для всего документа, используется одиночный тег <BASEFONT>.

Специальная группа тегов служит для изменения начертания шрифта:

<B> и </B> - полужирный,

<I> и </I> - курсив,

<U> и </U> - подчёркнутый,

<S> и </S> - зачёркнутый.

Вместо приведённых выше тегов рекомендуется применять элементы фразы, описывающие функциональные особенности текста. Управление форматированием фраз рассматривается в следующем разделе.

Пример 5

<html>

<head>

<title>Управление стилем шрифта</title>

</head>

<body>

Этот текст использует нестандартный стиль шрифта, заданный по умолчанию.

<p><font face="Times New Roman Cyr" size="-2" color="Green">Этот текст мельче и использует другой шрифт и другой цвет</font>

<p><b>Полужирный шрифт</b> и <i>курсив</i> используют для выделения фрагментов текста.

<p>Использование <u>подчеркивания</u> не рекомендуется, так как подчеркнутый текст легко перепутать со ссылкой.

<p><s>Вычеркивание текста</s> иногда применяют для разметки фрагментов, потерявших актуальность, но по каким-то причинам сохраняемым в документе.

</body>

</html>

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

Язык HTML позволяет создавать списки нескольких типов. Широко используются упорядоченные (нумерованные), неупорядоченные (маркированные) и списки определений.

Для задания упорядоченного списка используются теги <OL> и </OL>, а для создания неупорядоченного списка - <UL> и </UL>. Список заключают между открывающим и закрывающим тегом, причём, элементы списка помещают между тегами <LI> и </LI>. Закрывающий тег </LI> можно опустить.

Теги <OL>, <UL> и <LI> могут содержать атрибут TYPE=, который определяет способ пометки элементов списка. Упорядоченные списки можно нумеровать арабскими цифрами, римскими цифрами и латинскими буквами (в нужном регистре), а элементы неупорядоченного списка можно пометить маркерами в виде чёрного кружка (по умолчанию), белого кружка или квадратика.

Списки могут быть вложенными. Элементы списков могут содержать гиперссылки и теги, используемые для форматирования и оформления фрагментов.

Списки определений начинают с тега <DL> и заканчивают тегом </DL>. Маркеры или нумерацию в этих списках не используют. Список состоит из определяемых терминов и соответствующих определений. Определяемые термины помечают тегом <DT>, а определения - тегом <DD>. Закрывающие теги можно опустить. Определения обычно изображаются на экране с отступом от левого края.

Пример 7

<html>

<head>

<title>Вложенные списки</title>

</head>

<body>

<h1>Устройства компьютера</h1>

<ul>

<li>Внешние</li>

<ol>

<li>Принтер</li>

<li>Сканер</li>

<li>Монитор</li>

</ol>

<li>Внутренние</li>

</ul>

</body>

</html>

Пример 8

<html>

<head>

<title>Списки с форматированием</title>

</head>

<body>

<h1>Компьютерные стандарты</h1>

<dl>

<dt><strong>MIDI (Musical Instrument Digital Interface)</strong>

<dd>Стандарт подключению к компьютеру музыкальных инструментов.

<dt><strong>MPC (Multimedia PC)</strong>

<dd>Стандарт описывающий требования к мультимедийному персональному компьютеру.

<dt><strong>OLE (Object Linking and Embedding)</strong>

<dd>Технология связывания и внедрения объектов, стандарт компании Microsoft.

<dd>Стандарт, по которому элемент оборудования содержит сведения о модели и компании изготовителя и допускает настройку программными средствами.

</dl>

</body>

</html>

Мультимедийные объекты

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

Самый простой способ вставить мультимедийный объект – это использовать тег гиперссылки <A>.

Иногда требуется внедрить мультимедийный файл непосредственно в Web-страницу, чтобы, например, воспроизводить его автоматически. Для этой цели применяется одиночный тег <EMBED>. Этот тег имеет обязательный атрибут SRC=, значение которого задаёт абсолютный или относительный путь поиска соответствующего файла. Разрешено использовать атрибуты WIDTH и HEIGHT, задающие размеры прямоугольной области на экране, отведённой для воспроизведения мультимедийного объекта. Следует иметь в виду, что тег <EMBED> не входит в стандарт языка и поддерживается не всеми браузерами.

Пример 9

<html>

<head>

<title>Мультимедиа в документе 1</title>

</head>

<body>

<p><a href="NOTIFY.WAV">Щелкните здесь, чтобы послушать музыку</a></p>

<a href="htmlib.avi">Щелкните здесь, чтобы просмотреть видеозапись “Htmlib”</a><br><br>

</body>

</html>

Пример 9_2

<html>

<head>

<title>Мультимедиа в документе 2</title>

</head>

</body>

</html>

Создание таблиц

Таблица – это один из наиболее удобных способов представления данных. В создании Web-страниц таблицы играют особую роль, так как позволяют размещать объекты в заданных местах. Язык HTML имеет богатые возможности по созданию таблиц.

Таблица начинается с тега <TABLE> и завершается тегом </TABLE>. Текст внутри таблицы заключается в специальные теги, определяющие элементы таблицы (заголовки, строки, ячейки).

Пара тегов <CAPTION> и </CAPTION> определяет заголовок таблицы. Заголовок выводится над таблицей (по умолчанию) или под таблицей.

Теги <TR> и </TR> используют для задания строк таблицы. Закрывающий тег можно опустить.

Строки таблиц состоят из ячеек. Ячейки помечаются либо тегами <TH>, содержащими заголовки столбцов и строк, либо тегами <TD>, содержащими обычные данные. Эти теги являются парными, но закрывающие можно опустить.

Внутри ячеек могут содержаться любые данные и любые теги HTML, допускаемые в теле документа.

Рамку вокруг таблицы или вокруг нескольких ячеек можно задать с помощью атрибута BORDER=. Значением этого атрибута является толщина рамки в пикселях.

При отображении таблицы на экране происходит автоматический подбор размеров ячеек в соответствии с объёмом размещаемой информации и заданными атрибутами.

Пример 10

<html>

<head>

<title>Таблицы</title>

</head>

<body>

<caption>Основные теги таблицы</caption>

<tr><td><b>Открываюший тег</b><td><b>Закрывающий тег</b>

<td><b>Описание</b>

<tr><td>TABLE<td rowspan="2">Обязателен<td>Начало и конец таблицы

<tr><td>CAPTION<td>Начало и конец заголовка таблицы

<tr><td>TR<td rowspan="2">Не обязателен<td>Начало строки таблицы

<tr><td>TD<td>Начало ячейки таблицы

</table>

</body>

</html>

Фреймы

Язык HTML позволяет разбить рабочую часть окна браузера на несколько частей и вывести в них разные документы. Такие области называют фреймами.

Для создания фреймов используют специальный документ HTML, структура которого отличается от обычной. Такой документ содержит описания фреймов, заключённые между тегами <FRAMESET> и </FRAMESET>. В описании фреймов указывают размеры и порядок размещения областей в окне браузера и задают документы, которые должны загружаться в каждую область.

Тег <FRAMESET> обязательно содержит один из атрибутов COLS= или ROWS=, определяющих способ разбиения окна. При использовании атрибута COLS= окно делится на области вертикальными линиями, а при использовании ROWS= - горизонтальными. Если заданы оба атрибута, то в окне создаётся сетка.

Значения атрибутов COLS= и ROWS= определяют ширину или высоту областей. Параметры для каждого столбца (ряда) задаются через запятую в пикселях или процентах (символ %). В качестве последнего параметра можно использовать символ *, который означает, что под фрейм выделяется всё остающееся свободное пространство.

Между тегами <FRAMESET> и </FRAMESET> располагаются дополнительные теги, указывающие назначение созданных областей. Для этой цели можно использовать вложенные теги <FRAMESET> или одиночные теги <FRAME>.

Тег <FRAME> должен содержать обязательный атрибут SRC=. Дополнительные атрибуты позволяют управлять рамками между отдельными фреймами и некоторыми другими параметрами.

Пример 11

<html>

<head>

<title>Примнение фреймов</title>

</head>

</frameset>

</frameset>

</html>

Формы

Использование форм позволяет сделать документы в полной мере интерактивными. С помощью форм можно получать от пользователей (посетителей Web-страницы) данные.

Под формой в документе HTML понимают совокупность полей. В процессе работы с документом посетитель Web-страницы заполняет и отправляет форму. Поступившие данные в дальнейшем обрабатываются специальными программами.

Форма – это блочный элемент, описываемый парным тегом <FORM>. Теги, задающие поля формы, можно использовать только внутри элемента FORM. Способ обработки формы уточняется атрибутами METHOD, ACTION, ENCTYPE и др.

Атрибут METHOD определяет способ передачи представленных пользователем данных. Он может иметь значение”GET” или “POST”. Если задано ”GET”, то данные будут переданы программе (или сценарию) CGI. В этом случае атрибут ACTION содержит адрес URL программы-обработчика. Значение атрибута “POST” указывает, что данные, введённые пользователем, отправляются по электронной почте и атрибут ACTION в этом случае должен содержать адрес электронной почты с указанием протокола mailto:.

Атрибут ENCTYPE определяет тип MIME для отправки информации по электронной почте. По умолчанию используется значение application/x-www-form-urlencoded, но если форма предназначена для обработки вручную, то лучше использовать тип MIME text/plain.

Внутри элемента формы располагаются поля, которые формируются разными тегами. Ниже приведены теги, наиболее часто используемые для создания полей.

Непарный тег <INPUT> позволяет создавать различные элементы управления, в том числе текстовые поля и командные кнопки.

Парный тег <TEXTAREA> определяет текстовые области.

Парный тег <SELECT> предназначен для создания обычных и раскрывающихся списков. Отдельные пункты списка задаются при помощи тега <OPTION>, который записывается внутри элемента SELECT.

Тег <INPUT> содержит обязательный атрибут TYPE, определяющий тип элемента управления. Наиболее часто используются следующие типы:

TEXT – текстовое поле;

PASSWD – текстовое поле для ввода пароля (информация не отображается);

CHECKBOX – флажок (независимый переключатель);

RADIO – зависимый переключатель (из группы переключателей может быть включе только один);

SUBMIT – кнопка отправки формы;

IMAGE – графическая кнопка отправки;

RESET – кнопка очистки формы.

Все теги, задающие поля формы, должны иметь атрибуты NAME и VALUE. Атрибут NAME определяет имя поля, а атрибут VALUE – значение поля. Для текстового поля и текстовой области атрибут VALUE приобретает значение, соответствующее содержимому поля, введённому пользователем. Для элемента SELECT атрибут VALUE соответствует содержимому выбранного элемента OPTION. Зависимые переключатели, составляющие группу, должны иметь одинаковые значения атрибута NAME и разные значения атрибута VALUE.

По щелчку на кнопке отправки данные из формы передаются в виде пар текущих значений атрибутов NAME и VALUE. Информация о флажке передаётся только в том случае, если он установлен.

⇐ Предыдущая 123 4 5 6 7 8 9 10 Следующая ⇒

Познавательные статьи:

Техника прыжка в длину с разбега

Тактические действия в защите

История Олимпийских игр

История развития права интеллектуальной собственности

Последнее изменение этой страницы: 2016-12-28; просмотров: 520; Нарушение авторского права страницы; Мы поможем в написании вашей работы!

infopedia.su Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Обратная связь - 18.224.31.82 (0.013 с.)