Файл: Основы программирования на языке HTML ( Структура Web-страницы).pdf
Добавлен: 26.06.2023
Просмотров: 59
Скачиваний: 3
Внедрение изображений
Использование изображений позволяет красочно оформлять Web–документы, сочетание текста и графики придает любой страничке приятный вид и наглядность. Для вставки иллюстраций в документ используется дескриптор :
< img src=" имя файла с картинкой" >
и следующих атрибутов этого тага:
ALIGN - атрибут выравнивания
BORDER - ширина рамки
HSPACE - горизонтальный отступ между текстом и картинкой
VSPACE - вертикальный отступ между картинкой и текстом над ней
Пример программы:
< img src="met.gif" border=3 vspace=20 >
Атрибут задает имя файла картинки. Имя файла может указывать на как локальный файл, так и на удаленный файл, для чего следует указать соответствующий URL. Файл может представлять собой статическое изображения и иметь графический формат, понимаемый браузером, либо динамическое изображение, представленное в формате GIF89A. В последнем случае в окне браузера файл будет выведен как анимация.
Атрибут ALT указывает на текст, который будет выводиться в окне браузера вместо изображения, если, например, браузер пользователя не поддерживает графику или же отключена опция загрузки изображений. Этот атрибут не является обязательным, однако его использование считается хорошим стилем при составлении Web–документов. Часто при подготовке страничек с использованием графики случается, что желаемый размер изображения не совпадает с действительным. Например, необходимо поместить картинку на определенной площади с определенным размером. Для этого нужно использовать атрибуты WIDTH и HEIGHT, которые задают требуемые размеры изображения в ширину и высоту соответственно. Например, если необходимо поместить изображение большого размера на площади высотой в 100 и шириной в 200 пикселов, то в тело документа необходимо записать следующее:
Порядок следования этих атрибутов может быть произвольным.
Обилие графики в документе, с одной стороны, улучшает его общий вид, с другой стороны, существенно увеличивает время его загрузки. Чтобы найти компромисс между скоростью загрузки документа и его наглядностью, дизайнеры Web–страниц часто прибегают к такому приему: изображение размещают на страничке в меньшем формате и делают его ссылкой на себя.
Если щелкнуть мышкой на таком изображении, то браузер загрузит его и отобразит в оригинальных размерах.
Изображение–ссылка описывается в документе следующим образом:
Применяются следующий атрибут тага IMG:
< img src ="Имя файла картинки" >
и атрибут ссылки (A HREF) - указывает имя файла, на который мы ссылаемся.
< a href=" Имя файла " >
Также естъ возможностъ указатъ рядом с картинкой и обычную текстовую ссылку.
Пример программы:
< a href="graph.htm" > < img src="met.gif" >
< p > текстовая ссылка < /a >
Интересной возможностью представляется «обтекание» изображение текстом. Это весьма популярный способ оформления Web–страниц. При этом на экране картинка окружена текстом, например, слева и снизу. «Обтекание» текста достигается использованием атрибута ALIGN, который имеет такие параметры, как:
LEFT – текст будет охватывать изображение слева-снизу.
RIGHT – текст обхватывает изображение справа-снизу
TOP – изображение окружено текстом справа-сверху
BOTTOM – изображение окружено текстом справа-снизу
MIDDLE – изображение окружено текстом справа-посредине
Изображения можно использовать и в качестве фона документа. Весь текст и все иллюстрации в документе будут выводиться браузером поверх фонового изображения. Фоновые изображения задаются весьма просто следующим образом:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Фоновое изображение</title>
<style type="text/css">
BODY {
background: url(images/target.gif) no-repeat 30px 20px; /* Параметры фона */
}
</style>
</head>
<body>
<p>...</p>
</body>
</html>
В данном примере графический рисунок target.gif определяется как фон веб-страницы без повторения изображения. Чтобы картинка не прилегала плотно к краям браузера, она смещается на 30 пикселов вправо и на 20 пикселов вниз от своего исходного положения.
Если размер изображения недостаточно большой, чтобы заполнить собою все окно браузера, последний в таком случае просто размножит изображение до полного заполнения окна.
Фреймы
При использовании фреймов окно браузера разбивается на несколько подокон, в каждом из которых можно отображать любые Web–документы, осуществлять их прокрутку независимо от других окон. Хорошо продуманная структура фреймов может существенно облегчить навигацию по документам и улучшить восприятие информации. В качестве примера можно привести электронный вариант книги или журнала, когда в одном окне можно выбирать разделы–ссылки содержания, а в соседнем окне просматривать информацию, непосредственно относящуюся к конкретному разделу из содержания.
Существует два типа фреймовых документов: фрейм–содержащие документы и простые документы. Фрейм–содержащие документы задают структуру самого фрейм–документа, т.е. задают данные о том, как будет разбито окно браузера на подокна. Такие документы содержат ссылки на другие документы. Обычные же документы – это те документы, которые не содержат данные, определяющие фреймы.
Структура фрейм–содержащего документа в общем случае имеет такой вид:
<!DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/fraraeset.dtd">
<html>
<head>
<title>Заголовок страницы</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>
<frameset rows="100, *">
<frame>
<frameset cols="20%, 80%">
<frame>
<frame>
</frameset>
<noframes>
<p>Ваш Web-браузер не отображает фреймы</p>
</noframes>
</frameset>
</html>
Как видно из примера, Как и в обычном HTML-документе, весь код расположен между тегами <html> и </html>, а в разделе head располагаются заголовки. Основное отличие документа с фреймами от обычного HTML-документа— у документа с фреймами отсутствует раздел body, отсутствует содержимое страницы, а присутствуют только теги, служащие для определения фреймовой структуры. Иными словами, документ с фреймами не может содержать раздела body и наоборот, обычный HTML-документ не может содержать фреймовую структуру. Кроме того, содержать фреймовую структуру может только документ в формате Frameset. Для объявления формата используется заголовок:
<!DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/fraraeset.dtd">
Вместо тега <body> применяется парный тег <frameset>, описывающий фреймовую структуру. Каждое отдельное окно описывается тегом <frame>. Если Web-браузер не поддерживает фреймы, то в окне будет отображен текст, расположенный между тегами <noframes> и </noframes>.
Например, вы решили, что на страница будет разделена на два фрейма:
левый - для меню, и правый - для основного текста.
Для этого к тегу <FRAMESET> необходимо добавить атрибут COLS="...,...", который определяет расположение вертикального разделителя.
Цифры внутри кавычек указывают на размеры фреймов относительно страницы. Это может быть процентное соотношение: COLS="50%,50%" (каждый фрейм займёт половину окна), или соотносительное: COLS="100,*" - это значит, что ширина одного из фреймов будет равна 100 пискелей, а размер другого фрейма не задана, но соотносится с размерами окна:
<FRAMESET cols="200,*">
</FRAMESET>
Из кода понятно, что ширина левого фрейма будет - 200 пискелей, а правый фрейм займёт всю оставшуюся часть страницы вне зависимости от разрешения экрана.
Использование дескрипторов и является еще одним признаком хорошего стиля. Между ними задают текст, который будет выведен в окне браузера, не поддерживающего фреймов.
В строке размеров элементы отделяются запятой и могут быть заданы следующем образом:
value% – относительный размер фрейма в процентах. Например: 10%,40%,50% – на первое окно выделяется 10% от общего размера окна броузера, на второе окно – 40%, и на третье – 50% соответственно;
value – абсолютный размер в пикселях. Например: 100,540 – на первый фрейм выделяется область шириной в 100 пикселов, на второй – все оставшееся место (для видеорежима монитора 640х480).
C помощью дескрипторов задается только структура фреймов. Для размещения данных во фреймах используются дескрипторы , не имеющие закрывающего варианта. Количество этих дескрипторов обязательно должно соответствовать количеству фреймов, заданных до этого. Каждый дескриптор указывает на URL некоторого документа, который будет отображен в соответствующем фрейме. Это осуществляется с помощью атрибута SRC=URL_ДОКУМЕНТА. При загрузке фрейм–содержащего документа окно браузера будет разбито на подокна, а затем в них будут загружены документы. Пример использования фреймов можно увидеть на рис.1, где изображено окно браузера, разбитое на два фрейма.
При переходе по ссылке в обычном документе его содержимое полностью исчезает с экрана и заменяется новым содержимым другого документа. При использовании фреймов есть возможность при активации ссылок изменять содержимое окна в текущем фрейме, содержимое окна другого фрейма или всего окна браузера. Это осуществляется с помощью комбинации дескриптора и атрибута TARGET (от англ. target – цель). В общем случае формат этого дескриптора выглядит так:
Текст гипертекстовой ссылки
Параметр ИМЯ_ЦЕЛИ представляет собой зарезервированное слово, начинающееся со знака подчеркивания ‘_’. Вот список наиболее употребительных параметров:
TARGET=_SELF – при переходе по ссылке с таким атрибутом обновляется текущий фрейм. Действует по умолчанию.
TARGET=_TOP – обновляется содержимое окна всего броузера.
TARGET=_BLANK – документ будет открыт в новом окне броузера.
На первый взгляд может показаться, что использование параметров «_TOP» и «_BLANK» равнозначно, так как в обоих случаях старое содержимое окна полностью заменяется содержимым другого документа. Однако в первом случае можно вернуться к предыдущему содержимому окна средствами самого броузера (с помощью кнопки BACK на панели инструментов), а во втором случае способ возврата к содержимому предыдущего документа возлагается на составителя Web–странички или самого пользователя.
Другие элементы языка HTML:
Наряду с наиболее популярными элементами языка HTML существуют и такие, которые хоть и не находят повсеместного применения, все же используются при составлении страничек в WWW.
Если при подготовке публикации (например, подготовка электронных новостей) необходимо на страницу вынести некую цитату, то простым указанием теста с кавычками не обойтись – браузер воспринимает символы кавычек как управляющие, и на экране они отображены не будут. В таком случае необходимо заключить текст-цитату в специальные дескрипторы. Лишь в этом случае браузер выведет текст, заключенный в кавычки. Кроме того символа кавычек существует еще набор символов, которые браузер считает управляющими и для того, чтобы вывести их на экран, необходимо в тело документа вставлять специальные команды. Ниже приводится список команд для наиболее употребительных символов:
Команда >"&&<>> знак пробела. Ранее было замечено, что браузер автоматически осуществляет перенос текста, если строка не помещается на экране. Тем не менее, случается так, что необходимо вывести текст одной строкой без разрыва. Для этого нужно поместить перед строкой текста одиночный дескриптор, который является расширением языка HTML фирмы Netscape. Какой длинной не была бы строка, браузер ее полностью выведет на экран без переноса. Путешествуя по WWW в поисках страничек, посвященных музыке, можно часто найти документы, после загрузки которых на фоне работы браузера начинает играть музыка. Эта интересная возможность, которая хоть и требует продолжительное время для загрузки на медленных соединениях, придает любой музыкальной страничке некоторую привлекательность. Реализуется она таким образом:
Дескриптор используется для работы с музыкальными файлами, атрибут SRC указывает на файл, который будет загружен. Атрибут AUTOSTART указывает браузеру, нужно ли проигрывать данный файл после загрузки или нет. Атрибут HIDDEN также как и атрибут AUTOSTART принимает логическое значение и сообщает браузеру, что на экран нельзя выводить кнопки управления процессом воспроизведения файла. Если же два последних атрибута принимают значения FALSE, то после загрузки музыкального файла браузер выведет на экран кнопки управления воспроизведением, и пользователь в любой момент может проиграть файл, остановить воспроизведение, заново воспроизвести файл.
Также находят свое применение в Web–страничках такие структуры данных, как таблицы. Они помогают в определенных случаях удобно организовать некоторые данные, скажем, некоторую сводку цифр, каких-то расчетов и т. д. На экране такие таблицы выглядят аналогично привычным нам таблицам на бумаге или в приложениях типа Microsoft Excel. Кроме представления табличных данных таблицы можно использовать, например, для оформления: произвольного расположения изображений и текста, на экране. Методы построения таблиц вследствие своего объема и некоторой сложности в данной работе не приводятся.
Те, кто хоть раз пользовался при навигации в World Wide Web для поиска информации поисковыми машинами, обязательно сталкивался с так называемыми формами. Это специфические, хотя и весьма популярные возможности языка HTML. Формы представляют собой поля ввода текста, флажки, радиокнопки, списки и др. формы интерактивного общения с пользователем. Данные, вводимые в формы, отсылаются на Web–сервер для дальнейшей обработки, после чего результаты обработки высылаются назад пользователю. Составление документов с использованием форм является признаком профессионализма дизайнера, так как требует кроме хорошего знания языка HTML также и умение работать с языками сценариев, что является неотъемлемой частью работы с формами. Средства описания форм в документах в данную работу не входят.
Альтернативные средства составления Web–документов
Язык HTML является основным средством организации данных в World Wide Web и пока не существует других языков, которые служили бы ему полной альтернативой. Поэтому говорить о том, в чем этот язык превосходит другие языки или в чем он им уступает, не приходится. Хотя нужно заметить, что свои ограничения в HTML присутствуют.
В последнее время в дизайне Web–документов все чаще используется популярный язык Java, который способен преодолеть ограничения HTML. В связке с HTML язык Java предлагает пользователю средства оформления документов, которые трудно или даже невозможно реализовать с помощью одного лишь HTML. Это, например, создание трехмерной анимации на экране, выполнение апплетов (приложений) на машине пользователя, пересылаемых с сервера. Язык Java предоставляет более гибкие и удобные способы общения с пользователями, например, более развитые формы ввода данных. С помощью этого языка можно внести некоторую динамику в любой Web–документ, например, заставить на экране изображения сменять друг друга с произвольной периодичностью и порядком. Таким образом, Java добавляет больше интерактивности в документах. Но сам Java не позволяет так быстро разрабатывать Web–странички, как это можно сделать с помощью HTML, и требует намного больше времени для изучения.
В заключение можно сказать, что комбинация языков HTML и Java представляет собой мощное средство для построения красочных и профессиональных Web–документов.