Заглавная страница Избранные статьи Случайная статья Познавательные статьи Новые добавления Обратная связь КАТЕГОРИИ: АрхеологияБиология Генетика География Информатика История Логика Маркетинг Математика Менеджмент Механика Педагогика Религия Социология Технологии Физика Философия Финансы Химия Экология ТОП 10 на сайте Приготовление дезинфицирующих растворов различной концентрацииТехника нижней прямой подачи мяча. Франко-прусская война (причины и последствия) Организация работы процедурного кабинета Смысловое и механическое запоминание, их место и роль в усвоении знаний Коммуникативные барьеры и пути их преодоления Обработка изделий медицинского назначения многократного применения Образцы текста публицистического стиля Четыре типа изменения баланса Задачи с ответами для Всероссийской олимпиады по праву Мы поможем в написании ваших работ! ЗНАЕТЕ ЛИ ВЫ?
Влияние общества на человека
Приготовление дезинфицирующих растворов различной концентрации Практические работы по географии для 6 класса Организация работы процедурного кабинета Изменения в неживой природе осенью Уборка процедурного кабинета Сольфеджио. Все правила по сольфеджио Балочные системы. Определение реакций опор и моментов защемления |
Тема 4. Создание html-документов
Элементы языка HTML. HTML-документы и Web-страницы. HTML-документы представляют собой файлы с расширением html. Если открыть такой документ при помощи какого-нибудь простого редактора, например, при помощи блокнота и сравнить его с тем, что видно в окне броузера, то будет обнаружено следующее: текст, который виден в окне броузера, присутствует в файле в том же виде, но без форматирования. Кроме того, в файле присутствуют фрагменты текста, заключенные в угловые скобки. При просмотре файла через броузер эти фрагменты в угловых скобках не изображаются, но текст оказывается форматированным. Кроме того на экране видны рисунки или гиперссылки. Тот же эффект, который получается при просмотре HTML‑документа через блокнот, можно получить в броузере Internet Explorer после выполнения цепочки команд меню: Вид / Просмотр HTML кода.
Рис. 4.1. Структура Web-страницы.
HTML‑документ может ссылаться не только на другие HTML- документы, но и на объекты другого формата. Например, он может ссылаться на графические файлы, на звуковые файлы, на видеофайлы, на программы- апплеты и просто на другие программы. Таким образом, структуру Web- страницы можно представить согласно Рис. 4.1. Создание Web-страниц на языке HTMLосуществляется путем составления различными способами текстового файла, в котором с помощью языка разметки гипертекста - HTML (HyperText Markup Language) определяются места и формы выдачи Web-броузером информации на странице. Web-страница – отдельный документ с гипертекстовой информацией, расположенный на сервере, доступный для пользователей сети через службу WWW. Оформляется как совокупность файлов, включающая заглавный HTML-документ и все его внутренние ссылки. Web-страницы размещаются на сервере Internet и должны быть доступны для просмотра и копирования по протоколу HTTP.
Структура языка HTML. HTML –язык гипертекстовой разметки - состоит из операторов (тегов), которые окружают некоторый текстовый или графический объект, определяя его расположение, форму, размеры, цвет, параметры анимации и т.д. Современные средства разработки страниц типа Microsoft FrontPage дают возможность из готовых текстовых и графических объектов с помощью кнопок и команд меню оформить страницы, автоматически расставляя нужные теги.
Однако большинство Web-мастеров используют для своей работы и редакторы, и написание текстов непосредственно на HTML, чаще всего в "Блокноте" (Notepad) из Windows. Документ должен начинаться тегом <HTML> и заканчиваться закрывающим тегом </HTML>. Между ними должны находится теги <HEAD> открывающий и </HEAD> закрывающий с названием и заголовком, а также <BODY> открывающий и </BODY> закрывающий с текстом страницы. Название страницы на латинском языке ограничивается тегами <TITLE> открывающий и </TITLE> закрывающий. Таким образом, страница имеет вид: <HTML> <HEAD> <TITLE> Welcome to my home page </TITLE> </HEAD> <BODY> Содержимое странички </BODY> </HTML> В заголовке страницы между тегами <HEAD> и </HEAD> можно указывать тег <META>. Тег <META> содержит определенную информацию о страничке, на которой он находится. В нем может содержаться информация, предписывающая броузеру просматривать эту web-страницу в той или иной кодировке или загружать через определенное время другую страницу, информация об авторе, о программе, создавшей эту страницу. Кроме того, тег <META> помогает в навигации в Интернете, т.к. большинство поисковых систем обрабатывают информацию, специально вставленную в этот тег. Поэтому рекомендуется использовать этот тег для увеличения посещаемости странички. Тег имеет очень широкую область применения. Наиболее важные аспекты его применения перечислены ниже. В HTML используется набор 8-разрядных однобайтовых символов ISO 8859/1, который также известен как Латинский алфавит № 1(Latin-1). Это набор из 256 символов, который содержит много графических элементов и символов с диакритическими знаками, необходимых для текстов на большинстве европейских языков, в том числе и на английском. Младшие 128 кодов символов ISO 8859/1 практически те же, что и в ASCII, и этот поднабор иногда называют International Reference Version, или ISO-646. На практике из-за ограниченного набора символов клавиатуры и в целях переносимости на другие процессоры и платформы большинство документов HTML содержат знаки только из первой половины кодовой таблицы ASCII. В издательской деятельности часто необходимы многие иные символы, например с диакритическими знаками или преобразованные другим способом, значки валют, торговой марки и копирайта, не входящие в набор ASCII. Кроме того, в языке HTML символы угловых скобок < и > используются как символы, открывающие и закрывающие тег, поэтому они не могут использоваться в тексте (например для отображения математических выражений). Та же проблема и с символами "(кавычка) и &(амперсанд). Для отображения таких символов используются так называемые "escape-последовательности", которые могут использоваться для кодирования символов, не входящих в таблицу ASCII и входящих в команды HTML. В спецификациях HTML эти escape-последовательности называются символьными объектами (character entities).
Escape-последовательность: < > & ". Отображаемый символ: < > & " Специальные символы могут также кодироваться цифровой escape- последовательностью, где число соответствует коду символа ISO 8859. Последовательность: < > & " © ®. Отображаемый символ: < > & " © R Рассмотрим некоторые общие операции, необходимые для подготовки Web страниц. Задание отображения страницы. Связано с проблемой кодовых страниц. Компьютер все "понимает" только в виде чисел. А как написать буквы? Как сопоставить буквы числам? Для этого используются кодовые страницы. Это таблица, в которой по вертикали и горизонтали записаны цифры, а в - ячейках буквы. Компьютер получает цифры, подставляет их в эту таблицу и получает буквы. Проблема заключается в том, что таких таблиц существует множество (особенно много их в России). Наиболее популярными считаются КОИ-8 и Windows-1251. Если web-страничка написана в одной кодировке, а броузер читает ее в другой, то получается полная ЕПСМДЮ (слово "ерунда" в кодировке КОИ-8). Перед публикацией страниц в Интернете необходимо уточнить, какие кодовые страницы поддерживает тот сервер, на котором будет размещена страница. Если создана страница, например в Windows-1251, а нужно КОИ-8, то следует использовать какой-либо редактор (например, FrontPage) и сохранить страницу в нужной кодировке или использовать специальные перекодировочные программы. Для того, чтобы броузер показывал страницу именно в той кодировке, которая нужна, используется тег <META HTTP- EQUIV = "Content -type" CONTENT="text/html; charset=windows-1251"> или charset=KOI-8. Автозагрузка страниц. Существует два метода. Первый перезагружает страницу через определенное время. Второй вызывает другую страницу через определенный интервал. Первый метод часто используется для страниц с автоматически обновляемой информацией (например, виртуальные камеры). Второй - для демонстрации страниц как слайдов, в презентации. Для реализации первого метода используется тег <META HTTP-EQUIV="refresh" CONTENT=x>, где x - количество секунд, по прошествии которых страница будет перезагружена. Этот тег должен использоваться только в заголовке страницы (между тегами <HEAD> и </HEAD>). Для реализации второго метода используется тег <META HTTP-EQUIV="refresh" CONTENT="x url=адрес">, где x - время в секундах, по истечению которого будет загружена страница, расположеная по адресу (например http: // www. loft.lv). Можно на странице, указанной в атрибуте url разместить такой же тег, указывающий на другую страницу и т.д. Это проведет пользователя по всем страницам презентации.
Реклама страницы. Для этого можно использовать два тега <META> со следующими параметрами: <META NAME="description" CONTENT="Описание странички. Это то описание, которое получает пользователь при поиске. Основная информация о страничке">; <META NAME="keywords" CONTENT="Ключевые слова через запятую. Если они совпадут с ключевыми словами, по которым пользователь делает запрос в поисковой системе, то он найдет страницу">.
Форматирование текста. В HTML предусмотрено 6 стандартных размеров шрифта для оформления заголовков. Они устанавливаются при помощи тегов: <H1>Заголовок стиля 1</H1>; <H2>Заголовок стиля 2</H2>; <H3>Заголовок стиля 3</H3>; <H4>Заголовок стиля 3</H4>; <H5>Заголовок стиля 3</H5>; <H6>Заголовок стиля 6</H6>.
Пример 1. <HTML> <HEAD> <TITLE> Первый пример простого документа на языке гипертекстовой разметки </TITLE> </HEAD> <BODY> Стили форматирования в HTML <H1>Стиль заголовка первого уровня. Самый крупный и тяжёлый </H1> <H2>Стиль заголовка второго уровня с меньшими размерами и толщиной шрифта </H2> <H3>Стиль заголовка третьего уровня ещё меньше </H3> <H4> Стиль заголовка четвёртого уровня </H4> <H5> Стиль заголовка пятого уровня </H5> <H6> Стиль заголовка шестого уровня. Самый маленький и светлый из базовых шрифтов </H6> <P>Тег для выделения абзаца. Его можно использовать без завершающего тега, так как новый тег Р по смыслу означает не только начало, но и конец предыдущего абзаца. Грамотно с точки зрения языка HTML и удобно для броузера завершать абзац закрывающим тегом </P> </BODY> </HTML>
Для форматирования абзаца используются теги <P> - создание нового абзаца и <Br> - код пропуска строки или большой отступ. Для выравнивания, видоизменения и выделения текста используются теги <P> с атрибутами ALIGN. Теги <P ALIGN="right">.. </P> выполняют выравнивание по правому краю. При задании выравнивания по правому краю концы строк находятся на одном уровне, а начало на разных. При задании выравнивания по левому краю с помощью тегов<P ALIGN="left">.. </P> начальные элементы строк находятся на одном уровне, а концы на разных. Этот вид выравнивания часто используется при написании эпиграфов или просто для оригинальности. Теги < P ALIGN="center">.. </P> выполняют выранивание по центру.
Форматирование шрифта выполняют теги: <B> </B> - жирный текст; <I> </I> - курсив;<U> </U> - подчеркнутый текст. Вид шрифта - очень важная часть дизайна Web-страниц. Он позволяет придавать тексту определенную выразительность, эмоциональность. Строгие шрифты показывают важность текста, его официальность. Рукописные шрифты придают тексту некоторую красоту, поэтичность и т.д. Существует огромное множество шрифтов, но HTML сейчас только начинает развиваться в области использования шрифтов. В классической версии языка HTML 3.0 эта проблема решена единственным образом - доступны шрифты, установленные в системе пользователя с помощью атрибута FACE= в теге FONT. Сейчас появляются новые технологии. Например, загрузка шрифтов из Интернета или встраивание шрифтов непосредственно в документ. Ещё одной новаторской идеей в этой области является использование графических литер с определенным начертанием вместо текста. После загрузки 2-3 листов, написанных таким методом, почти все буквы оказываются загруженными в кеш броузера, и открытие последующих страниц происходит очень быстро. Для задания размера шрифта используется атрибут SIZE= в теге FONT. Можно задавать базовый размер шрифта тегом <BASEFONT SIZE=x> для использования на всей странице, а в нужных участках текста использовать атрибут SIZE= для задания размера определенного участка. По умолчанию используется тег <BASEFONT SIZE=3>. Заголовок <H1> имеет размер 6. Чтобы сделать шрифт больше, чем <H1>, можно выбрать размер шрифта, равный 7. Основное отличие тега <FONT> от <Hx> заключается в том, что он не разбивает строку. В HTML можно использовать вышеуказанный список шрифтов в теге <FONT>. Можно перечислить в этом списке несколько шрифтов, из которых броузер выберет первый, установленный в системе, и использует его для отображения текста. Например <FONT FACE=" Arial, COMIC SANS MS, Tahoma, AG_Cooper"> текст</FONT>. Размеры символов (1,3,5,7) в тексте указываются тегами: <FONT SIZE="1">, < FONT SIZE="3">, < FONT SIZE="5">, < FONT SIZE="7">. Поместив текст между каким-либо из этих тегов и закрывающим тегом </FONT> получим шрифт нужного размера. Вид шрифта в тексте: <FONT FACE="Times New Roman">ABC</FONT>. <FONT FACE="System">DEF</FONT>. <FONT FACE="Arial">GHI</FONT>. <FONT FACE="Courier">xyz</FONT>. Для задания размера текста существуют и другие теги. Это теги <BIG> </BIG> и <SMALL> </SMALL>. Заключенный между ними текст будет соответственно больше или меньше окружающего текста. Можно использовать все виды красок на странице, применяя тег <FONT> с атрибутом COLOR=. Цвета текста в документе задаются в кодировке RGB - шестью шестнадцатеричными числами или именованными цветами, например: <FONT COLOR="#FF0000"> Красный текст</FONT>. < FONT COLOR ="#CF2CD4">Лиловый текст</FONT> <FONT COLOR ="#0000FF"> Синий текст </FONT> < FONT COLOR="#00FF00"> Зелёный текст</FONT> <FONT COLOR="#808080"> Серый текст</FONT> <FONT COLOR="silver"> Серебряный текст </FONT>
<FONT COLOR="green" SIZE="4"> Зелёный текст с размерами шрифта 4. </FONT> Наименования цветов приведены в Таблице 4.1. Атрибуты тега <BODY> для задания цвета фона документа - BGCOLOR; цвета текста - TEXT; цвета ссылок - LINK; цвета просмотренных ссылок – VLINK; ссылок в момент нажатия на них правой кнопкой – ALINK. Цвета текста, ссылок и фона задаются в кодировке RGB - шестью шестнадцатеричными числами или именованными цветами, например: <BODY BGCOLOR="# FFFF88 " TEXT="# 0000FF " LINK="# FF0000 " VLINK="# CF2CD4 " ALINK="# C033FF "> С помощью атрибута BACKGROUND тега <BODY> можно вставить небольшие рисунки (размножаемые Web-броузером) в формате gif (файл - background.gif) или jpg (файл - background.jpg), т.е. создать графический фон: <BODY BACKGROUND="background.gif"> - размноженный рисунок возникает на заднем плане. Для наилучшего усвоения информации используют различные способы выделения абзацев. Тег списка <DL> (Definition List) позволяет создавать списки определений, т.е. отдельные абзацы с отступом без нумерации или маркеров. В конце определения необходимо поместить закрывающий тег </DL>. Списки состоят из двух частей: определения (DT) и описания (DD). Атрибут title показывает текст в виде всплывающей подсказки.
Таблица 4.1.
Пример 2. <HTML> <BODY> <DL title = «это список»> <DT>HTML <DD>Это язык разметки гипертекста <DT>Броузер <DD> Это программа для просмотра гипертекста в интернете </DL> </BODY> </HTML> В результате такого форматирования получим определения следующего вида. HTML Это язык разметки гипертекста Броузер Это программа для просмотра гипертекста в интернете
Тег <BLOCKQUOTE> создает поля слева и справа от текста. Атрибуты LEFTMARGIN=n, RIGHTMARGIN=n, TOPMARGIN=n, где n - ширина поля в пикселях, указываются в теге <BODY> для задания левого, правого и верхнего полей для всей страницы. Теги <PRE> и </PRE> используются для отображения текста точно так, как он записан в HTML (заранее отформатированного текста). Теги <MULTICOL> и </MULTICOL> выводят текст в несколько колонок (используются только для броузера Netscape 3.0 и выше). Они имеют следующий полный формат: <MULTICOL COLS="x" GUTTER="у"> текст </MULTICOL>, где x - количество столбцов, у - расстояние между столбцами. Размещение текста в одну строку с добавлением в нижней части окна горизонтальной полосы прокрутки выполняется следующим образом Ø поместить текст между тегами <NOBR>; Ø если надо оборвать строку в определенном месте, - поставить там тег <BR>; Ø если надо задать места переноса текста - поставить там тег <WBR>. Для задания отступа перед новым абзацем используется тег <TAB INDENT=n>, где n - число так называемых n-пробелов. Установка пяти подряд расположенных пробелов между буквами А и Я с применением символа неразрушающего пробела -  : А Я Для создания линий используется тег <HR> с атрибутами SIZE=, WIDTH=, ALIGN=, задающими соответственно высоты в пикселях, ширины в пикселах или в процентах от размера окна и выравнивание. Дополнительный атрибут NOSHADE создает линию без рельефности. С помощью этих атрибутов можно создавать очень разнообразные размещения текста. Например, тег <HR NOSHADE SIZE=30 WIDTH="30%" ALIGN=LEFT> создаёт толстую линию на треть страницы, расположенную слева.
Анимация текста Бегущая строка создаётся с помощью тега <MARQUEE>, который позволяет выводить информацию в виде бегущей строки. К сожалению, он работает только в Internet Explorer. Если просмотреть этот тег в другом броузере, то будет видна статичная строчка текста. Для создания бегущей строки необходимо поместить текст между тегами <MARQUEE></MARQUEE> и он "побежит". Существует несколько атрибутов этого тега. Атрибут ALIGN= размещает текст в верхней (TOP), средней (MIDDLE) или нижней (BOTTOM) части бегущей строки. Атрибут BEHAVIOR= управляет движением текста. Если его нет, то текст пробегает справа налево. Если задать BEHAVIOR=SCROLL, то текст будет просто пробегать по экрану. Это значение по умолчанию. Если указать BEHAVIOR = SLIDE, то текст выползает на экран и останавливается. Если использовать параметр ALTERNATE, то текст будет сначала выползать на экран, а потом, отскакивать от боковых стенок, т.е. прыгать. Атрибут BGCOLOR = задает цвет фона бегущей строки. Для указания цвета используются значения кода в шестнадцатеричном формате или названия цвета. Атрибут DIRECTION = указывает направление движения текста. Налево – LEFT, направо – RIGHT. Атрибуты HEIGHT= и WIDTH= задают соответственно толщину и ширину бегущей строки в пикселях или процентах от размера окна. Атрибуты HSPACE= и VSPACE= задают горизонтальные и вертикальные поля вокруг бегущей строки. Атрибут LOOP= задает количество "пробегов" текста. Если бедный текст должен бегать вечно, то не нужно использовать этот атрибут или задать LOOP=INFINITE. Атрибут SCROLLAMOUNT= определяет скорость "пробегания". Задается числами. Число 1 даёт скорость улитки, ползущей по монитору, а при SCROLLAMOUNT=8000 скорость движения настолько велика, что ничего не возможно увидеть. Для правильного задания скорости бегущей строки необходимо использовать вместе с предыдущем атрибутом атрибут SCROLLDELAY=, задающий скорость прорисовки текста в миллисекундах. Мигающий текст можно создать с помощью тегов <BLINK> </BLINK>. Текст, расположенный между ними, должен мигать. Используется для выделения новой информации. Работает, к сожалению, только в броузере Netscape Navigator. Для привлечения внимания посетителя сайта некоторые тексты можно сопровождать фоновой музыкой. Она создаётся с помощью тега <BGSOUND SRC = "имя файла в формате wav, avi, mid" LOOP=x>, где x - число повторений звукового файла. Можно написать LOOP=INFINITE, чтобы файл повторялся вечно.
Вставка рисунков. Вставка рисунка на страницу из файла в формате gif или jpg выполняется тегом <IMG> с атрибутами, перечисленными ниже. <IMG SRC="имя файла или полного пути в Интернете " ALT="текст" ALIGN=расположение WIDTH=ширина HEIGHT =высота >. Атрибут ALT содержит текст, который выводится вместо рисунка, если он не найден с помощью указанного пути. Атрибут ALIGN указывает место расположения изображения и может принимать следующие значения: TOP - последующий текст располагается в верхней части изображения; BOTTOM - последующий текст располагается в нижней части изображения; LEFT - изображение находится в левой части листа, текст обтекает изображение справа; MIDDLE - изображение находится в центре листа, RIGHT - изображение находится в правой части листа, текст обтекает изображение слева. Ширина задаёт ширину изображения в пикселях. Высота задаёт высоту изображения в пикселях. Атрибуты ALT, ALIGN, WIDTH, HEIGHT являются необязательными. Например: <IMG SRC="links.gif" ALT="Links" WIDTH="47" HEIGHT="47">. Обтекание графического объекта текстом можно получить, если выполнить следующие действия. Ø Поместить тег <IMG SRC="/путь/имя файла"> в том месте, где должен быть графический объект Ø Добавить атрибут ALIGN=LEFT, ALIGN=RIGHT или ALIGN=CENTER. Ø Добавить атрибуты: HSPACE= ширина горизонтальных полей и VSPACE= ширина вертикальных полей, отделяющих изображение от текста. Можно создать рамку вокруг рисунка или обрамление таблицы текстом. Остановка в определенном месте обтекания текстом объекта и продолжение текста ниже объекта выполняются с помощью тегов: <BR CLEAR=LEFT> - начиная с ближайшего пустого левого поля. <BR CLEAR=RIGHT> - начиная с ближайшего пустого правого поля. <BR CLEAR=ALL> - текст будет продолжен, когда и левое и правое поля будут пустыми. Рамка вокруг изображения – задается в каком-либо теге с помощью атрибута BORDER=n, где n - ширина рамки в пикселях. В теге <IMG> можно задать рамку вокруг изображения, если это изображение является ссылкой.
Вставка гиперссылок. Текстовые и графические ссылки могут указывать на удалённые разделы в пределах одного большого документа. Для таких ссылок необходимо создать две части: якорь и непосредственно ссылку. Якорь определяет ту точку, в которую организуется переход из места расположения ссылки. Ссылка использует имя якоря вместо имени файла. Задаётся в теге <A HREF=”#Якорь”> </A>. Перед именем якоря указывается специальный символ #. Между открывающим и закрывающим тегами располагается текст ссылки, на котором производится щелчок для перехода по ссылке. В месте расположения якоря ставится открывающий тег <A NAME=” Якорь”>. Между открывающим и закрывающим </A> тегами вводится текст, который будет показан на экране.
Пример 3. <HTML> <HEAD> <TITLE> Ссылки в пределах одного документа </TITLE> </HEAD> <BODY> <CENTER> <H1>Ссылки в пределах одного документа</H1> <P> <OL> <LI><A HREF=”#Малина”>Mалина</A> <LI><A HREF=”#Яблоко”>Яблоко</A> <LI><A HREF=”#Арбуз”>Арбуз</A> <P>Длинный абзац с текстом, после которого расположены пояснения к ссылочным словам </P> <P> <B><A NAME=”Малина”>Малина</A>садовая</B><Br> Это ягода. Она сочная и сладкая. Спелая малина имеет красный цвет <P> <B><A NAME=”Яблоко”>Яблоко</A>осеннее</B><Br> Это фрукт. Осенние яблоки это спелые плоды. Иногда красные, иногда красно-белые, иногда бело-зелёные <P> <B><A NAME=”Арбуз”>Арбуз</A>бахчевой</B><Br> Это тоже ягода, только полосатая и с толстой кожурой. Внутри арбуз красный и водянистый </BODY> </HTML>
Место размещения файла определяется с помощью URL-адреса, который называют путём поиска. Абсолютный путь поиска описывает местоположение файла, начиная с самого высокого уровня. Относительный путь поиска описывает местоположение файла, начиная с того места, в котором находится текущий документ. Ссылка на другую страницу с именем "СatGraph", размещенную по адресу "http://www.cat.lv", будет иметь вид: <A HREF="http://www.cat.lv">CatGraph</A> Ссылка на графический файл "lis.gif", размещенный по адресу "http://www.lis.lv/~cat5", будет иметь вид: <A HREF="http://www.lis.lv/~cat5">Cat5</A> Ссылка на адрес электронной почты "david@lis.lv" будет иметь вид: <A HREF="mailto:david@lis.lv">Напишите мне письмо</A> Если нужно перейти на метку, находящуюся в другом документе, ссылка оформляется следующим образом. <A HREF="имя файла#имя метки"> Название ссылки </A>. Например, <A HREF="index.htm#имя метки">Название ссылки</A>
Рисунки -гиперссылки. Графические ссылки позволяют по щелчку на изображении перейти к другому файлу. Они делают документ более понятным и полезным. Графическая ссылка выделяется рамкой. <A HREF="art.htm"> <IMG SRC="clips.gif" ALT="Здесь расположен рисунок"> </A> <A HREF="http://www.lis.lv/~cat5"> <IMG SRC="lis.gif" ALT="Lis" border="0" width="47" height="47"> </A> Множественные рисунки-гиперссылки реализуются как активные изображения. Активное изображение - это изображение, на котором находятся несколько активных областей (hot spots), каждая из которых ссылается на определенную Web-страницу. Активные изображения представляют собой отличный метод создания красивых и удобных меню. Различают два типа активных изображений: активные изображения, работающие на сервере, и активные изображения, работающие на стороне клиента. Первый тип для своей работы использует cgi-сценарий. Это программа, работающая на сервере. Такие программы выполняют многие процессы на Web-страницах. Например, большинство гостевых книг работают на основе таких программ. Пишутся cgi-скрипты чаще всего на языке Perl. Эти скрипты перестают использоваться, т.к. в настоящее время существуют более совершенные Java-скрипты и другие технологии. Проблема cgi-скриптов заключается в том, что они выполняются на сервере. Это серьезная угроза для безопасности сервера. Кроме того, они требуют определенных ресурсов системы. Большинство системных администраторов не разрешает пользоваться директорией cgi-bin, в которой запускаются эти программы. Выходом из такой проблемы являются многочисленные бесплатные сервисы, предоставляющие возможность использовать наиболее распространенные cgi-скрипты на страницах просто вставляя куски HTML-кода. Понятно, что такой метод не очень удобен и доступен немногим, но его поддерживают почти все броузеры. Второй метод не требует использования сервера вообще, но он работает только в броузерах, поддерживающих HTML3.0 (Internet Explorer, Netscape Navigator 2.0, Mosaic 2.0 и более современные). Создание активных изображений вручную трудоемкий процесс, т.к. требуется задавать много активных областей в координатах. Лучше всего использовать программы, созданные специально для задания активных областей и простого формирования всего активного изображения. Кроме того, такую функцию поддерживают большинство HTML редакторов, например FrontPage или MapEdit.
Списки. Заголовок списка создаётся тегом <LH>, за которым следует текст. Теги <LI> и </LI>обозначают элемент списка. Для создания ненумерованного списка используется тег <OL TYPE=x>. Значение х определяет вид значка маркера. Возможно задание значка маркера одним из трех стандартных видов: <UL TYPE=DISC> <LI>Первая строка <LI>Вторая строка </UL> <UL TYPE=CIRCLE> <LI> Первая строка <LI>Вторая строка </UL> <UL TYPE=SQUARE> <LI> Первая строка <LI>Вторая строка </UL>
<PLAIN> - атрибут для создания ненумерованного списка без маркера.
Задание значка маркера допускается в виде любой картинки: <UL SRC=картинка с изображением маркера > <LI> Первая строка <LI>Вторая строка </UL> Этот атрибут можно задавать в теге <UL>, определив сразу все маркеры списка, а можно использовать разные файлы с расширением gif для разных пунктов списка, помещая атрибут SRC= в каждом теге <LI>. Для использования этого атрибута нужно задать атрибут PLAIN=. Для создания нумерованного списка используется тег <OL TYPE=x>. Значение х = 1, если требуется создать список с нумерацией в виде последовательности арабских цифр, т.е. в формате 1,2,3,4.… Значение х = А создает список вида А,В,С,D.… Значение х = а - список вида а,b,c,d.… Значение х = I - список вида I, II, III, IV…. Значение х = i - список вида i, ii, iii,.…Таким образом, для получения нумерованного списка необходимо написать последовательность тегов: <OL TYPE=1> <LI><FONT SIZE="4">Первая строка </FONT></LI> <LI>< FONT SIZE="4">Вторая строка </FONT></LI> </OL> <OL TYPE=A> <LI><FONT SIZE="4">Первая строка </FONT></LI> <LI><FONT SIZE="4">Вторая строка </FONT></LI> </OL> <OL TYPE=a> <LI><FONT SIZE="4">Первая строка </FONT></LI> <LI><FONT SIZE="4">Вторая строка </FONT></LI> </OL> Для смены порядка нумерации используются атрибуты SKIP=, START= и VALUE= в теге <LI> или <OL>. Атрибут SKIP= пропускает заданное число пунктов нумерации. START= используется для указания места, с которого в заданном типе нумерации (числа, буквы, римские цифры) начать нумеровать список. Атрибут VALUE= присваивает определенный номер данному пункту нумерованного списка. После задания этого атрибута последующие пункты будут нумероваться, начиная с заданного в этом атрибуте номера. Например: <OL TYPE="1" SKIP=2> <LI>Первая строка </LI> <LI>Вторая строка </LI> <LI>3-я строка </LI> <LI>4-я строка </LI> </OL> Если на странице мало места под списки, то удобно использовать атрибут COMPACT=. Он показывает списки в сжатом виде за счет уменьшения межстрочных интервалов, использования меньшего размера шрифта и других методов.
Пример 4. <HTML> <HEAD> <TITLE> Списки </TITLE> </HEAD> <BODY> <P> <H1>Посмотрим, как выглядит упорядоченный список</H1> <P> <H2>Каждое утро я кладу в свой портфель:</H2><Br> <OL TYPE=1 START=1> <LI>Тетради <LI>Книги <LI>Карандаши <LI>Ручку <LI>Линейку <LI>Пакет с завтраком <LI>Кошелёк </OL> </BODY> </HTML>
Таблицы. На данном этапе развития методов форматирования Web-страниц таблицы являются мощнейшим средством компоновки контента. Края таблицы могут быть невидимыми, тогда пользователь даже не понимает, что использованы таблицы. Для создания таблицы используются теги <TABLE> и </TABLE>. Между этими тегами располагаются теги <TR> и </TR>. Они окружают каждую строку таблицы. Если необходимо создать несколько строк в таблице, используется столько же тегов <TR> и </TR>. В каждой строке таблицы обычно отображаются ячейки. Каждая ячейка должна быть окружена тегами <TD> и </TD>. Количество этих тегов в строке определяет количество ячеек. Число ячеек в строках не обязательно должно быть одинаковым. Для создания заголовков столбцов и строк вместо простой строки, создается заголовок и текст его размещается между тегами <TH> и </TH>. Этот текст будет отображен жирным шрифтом и отцентрирован. Разрешается применить некоторые атрибуты. Атрибут NOWRAP. Он используется в тегах <TH> и </TH> или <TD> и </TD> для того, что бы текст помещался в одной строке (ячейка при этом расширяется). Атрибут COLSPAN=x. Если какая-нибудь ячейка должна быть шире вышерасположенных или нижерасположенных, то используется этот тег. Величина х указывает количество объединяемых горизонтальных ячеек. Атрибут ROWSPAN=x. Этот атрибут аналогичен предыдущему, только он объединяет x вертикальных ячеек. Атрибут WIDTH=x. Этот атрибут определяет ширину таблицы, если он задан в теге <TABLE>, ширину группы ячеек или ширину отдельной ячейки, если указан в тегах <TR> и </TR> или <TH> и </TH>. Величина х указывает ширину в пикселях или в процентах. Оптимальным значением является WIDTH=50%. Атрибут UNIT=. Он применяется в теге <TABLE> для определения единицы измерения размеров в таблице. Атрибут принимает следующие значения: UNIT=EN - в en-пробелах, UNIT=RELATIVE - относительные значения в процентах от общей ширины таблицы, UNIT=PIXELS - в пикселях, например <TABLE UNIT=PIXELS WIDTH=200> создает таблицу шириной в 200 пикселей. Атрибут COLSPEC=. Используется с атрибутом UNIT=. Он определяет, сколько места занимает каждый столбец таблицы и тип выравнивания данных. Применяется только в теге <TABLE>. В атрибуте COLSPEC= перечисляются все столбцы. Для каждого задаётся выравнивание одним из пяти типов: L - по левому краю, С - по центру, R - по правому краю, J - по правому и левому краю, D - по десятичной запятой. Размер задаётся в пикселях. Например, тег <TABLE UNIT=PIXELS COLSPEC="L10 C20 R10"> определяет таблицу, в которой первая ячейка имеет ширину в 10 пикселей и выравнивание по левому краю, вторая - 20 пикселей и выравнивание по центру, третья - 10 пикселей, выравнивание по правому краю. Атрибут DP=. Определяет символ, используемый для отделения целой части десятичной дроби. По умолчанию используется тег DP=".", определяющий в качестве разделителя точку. Атрибут DP="," задает запятую. Атрибут CELLPADDING=x. Определяет поле вокруг содержимого ячейки. X - число пикселей. Атрибут ALIGN=. Используется в тегах <TR>, <TD>, <TH>. Он определяет выравнивание содержимого по горизонтали. Значения атрибута могут быть следующими: ALIGN=LEFT - выравнивает содержимое ячейки по левому краю, ALIGN=CENTER - по центру, ALIGN=RIGHT - по правому краю, ALIGN=BLEEDLEFT - предыдущие значения учитывали отступ, заданный атрибутом CELLPADDING. При задании этого атрибута содержимое ячейки прижимается вплотную к левому краю. Атрибут VALIGN=. Сходен с предыдущим, но задает выравнивание по вертикали. Значения: VALIGN=TOP - выравнивание содержимого по верхней границе, VALIGN=MIDDLE - центрирует по вертикали, VALIGN=BOTTOM - выравнивает по нижней границе. Для создания заголовков таблицы существует тег <CAPTION>. Заголовок может быть над таблицей (<CAPTION ALIGN=TOP>), или под таблицей (<CAPTION ALIGN=BOTTOM>). Заголовком может быть текст или графика. Этот тег хорош для создания подписей под рисунками, заключенными в таблицу без границ. Основной частью таблицы являются границы ячеек. Для управления толщиной границ используется атрибут BORDER=x. Можно сделать таблицу вообще без границ, задав атрибут в теге <TABLE BORDER=0>. Читатель страницы даже не будет знать, как получена такая точная компоновка содержимого. Напротив, толстые границы привлекают внимание к таблице. Можно задать красивую толстую рамку вокруг картинки, она будет похожа на настоящую рамку. Для задания толщины промежутков между ячейками используется атрибут CELLSPACING=x. По умолчанию x=2 пикселям. Этот атрибут хорошо использовать вместе с атрибутом BORDER= для задания красивых рамок вокруг изображений. С помощью таблиц можно сделать красивые выпуклые панели с графикой или текстом.
Пример 5. <HTML> <HEAD> <TITLE> Простая таблица </TITLE> </HEAD> <BODY> <TABLEBORDER> <CAPTION ALIGN=TOP>Мои друзья</ CAPTION> <TR> <TH>Имя</TH> <TH>Год рождения</TH> <TH>Курс</TH> </TR> <TR> <TD>Ольга</TD> <TD>1980</TD> <TD>5</TD> </TR> <TR> <TD>Марина</TD> <TD>1982</TD> <TD>3</TD> </TR> <TR> <TD>Игорь</TD> <TD>1982</TD> <TD>4</TD> </TR> </TABLE> </BODY> </HTML>
Фреймовые структуры. Большинство современных броузеров могут показывать в одном окне несколько отдельных страниц. Достигается это разбиением страницы на кадры или фреймы. В каждом кадре может выводиться отдельная страница. Управляя кадрами, можно создать удобный и разнообразный интерфейс. Например, можно слева вывести узкий кадр с оглавлением страницы, справа сверху показать фирменную эмблему и кнопки для перемещения по оглавлению, а внизу все материалы страницы.
|
||||||||||||||||||||||||||||||||||||||||||||||
Последнее изменение этой страницы: 2017-02-05; просмотров: 325; Нарушение авторского права страницы; Мы поможем в написании вашей работы! infopedia.su Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Обратная связь - 18.188.10.246 (0.251 с.) |