Использование графики в HTML-документах 


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



ЗНАЕТЕ ЛИ ВЫ?

Использование графики в HTML-документах



Содержание

  • Структура HTML-документа
    • Заголовок документа
    • Тело документа
    • Цветовое оформление документа
    • Разделение текста на абзацы
    • Разрыв строки
    • Горизонтальные линии
    • Форматирование гипертекста
      • Логическое форматирование
      • Физическое форматирование
      • Предварительно отформатированный текст
    • Использование графики в HTML-документах
  • Гиперссылки
    • Абсолютный и относительный URL
    • Гиперссылки в пределах одного документа
    • Ссылка на почтовый ящик
  • Списки
    • Нумерованные списки
    • Маркированные списки
    • Список определений
    • Вложенные списки
  • Использование таблиц в HTML
    • Основные атрибуты тега <TABLE>
    • Выравнивание данных в ячейках
    • Объединение ячеек
    • Цвет в таблицах
  • Фреймы
    • Контейнер <FRAMESET>
    • Определение параметров кадров
    • Тег <FRAME>
    • Организация ссылок
  • Мультимедийные возможности HTML
  • Формы в HTML-документах
    • Тегом <FORM> начинается каждая форма. В нем нужно определить два атрибута, указывающих используемый скрипт и метод посылки данных.
    • Работа с тегами форм
    • Тег <TEXTAREA>
    • Тег <SELECT>
    • Тег <INPUT>
    • Тип поля ввода, атрибут TYPE
    • Нестандартное использование элементов форм

HyperText Markup Language (HTML) - язык разметки гипертекста - предназначен для написания гипертекстовых документов, публикуемых в World Wide Web.

Гипертекстовый документ - это текстовый файл, имеющий специальные метки, называемые тегами, которые впоследствии опознаются браузером и используются им для отображения содержимого файла на экране компьютера. С помощью этих меток можно выделять заголовки документа, изменять цвет, размер и начертание букв, вставлять графические изображения и таблицы. Но основным преимуществом гипертекста перед обычным текстом является возможность добавления к содержимому документа гиперссылок - специальных конструкций языка HTML, которые позволяют щелчком мыши перейти к просмотру другого документа.

Существует два способа создания гипертекстовых документов. Можно воспользоваться одним из WYSIWYG HTML-редакторов (например, Netscape Composer, основы работы с котором рассмотрены в разделе "Обработка текста на ЭВМ", Microsoft FrontPage, HotDog, или др.), для работы с которыми не требуется специальных знаний о внутренней структуре создаваемого документа. Этот способ позволяет создавать документы для WWW без знания языка HTML. HTML-редакторы автоматизируют создание гипертекстовых документов, избавляют от рутинной работы. Однако их возможности ограничены, они сильно увеличивают размер получаемого файла и не всегда полученный с их помощью результат соответствует ожиданиям разработчика. Но, безусловно, этот способ незаменим для новичков в деле подготовки гипертекстовых документов.

Альтернативой служит создание и разметка документа при помощи обычного редактора plain-текста (таких, как emacs или NotePad). При этом способе в текст вручную вставляются команды языка HTML. Создавая документы таким способом, вы точно знаете, что делаете.

Как уже отмечалось, HTML-документ содержит символьную информацию. Одна ее часть - собственно текст, т. е. данные, составляющие содержимое документа. Другая - теги (markup tags), называемые также флагами разметки, - специальные конструкции языка HTML, используемые для разметки документа и управляющие его отображением. Именно теги языка HTML определяют, в каком виде будет представлен текст, какие его компоненты будут исполнять роль гипертекстовых ссылок, какие графические или мультимедийные объекты должны быть включены в документ. Графическая и звуковая информация, включаемая в HTML-документ, хранится в отдельных файлах. Программы просмотра HTML-документов (браузеры) интерпретируют флаги разметки и располагают текст и графику на экране соответствующим образом. Для файлов, содержащие HTML-документы, приняты расширения.htm или.html.

Прописные и строчные буквы при записи тегов не различаются. В большинстве случаев теги используются парами. Пара состоит из открывающего (start tag) и закрывающего (end tag) тегов. Синтаксис открывающего тега:

<имя_тега [атрибуты]>

Прямые скобки, используемые в описании синтаксиса, означают, что данный элемент может отсутствовать. Имя закрывающего тега отличается от имени открывающего лишь тем, что перед ним ставится наклонная черта:

</имя_тега>

Атрибуты тега записываются в следующем формате:

имя[="значение"]

Кавычки при задании значения аргумента не обязательны и могут быть опущены. Для некоторых атрибутов значение может не указываться. У закрывающего тега атрибутов не бывает.

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

Последовательность символов, составляющая текст, может состоять из пробелов, табуляций, символов перехода на новую строку, символов возврата каретки, букв, знаков препинания, цифр, и специальных символов (например, +, #, $, @), за исключением следующих четырех символов, имеющих в HTML специальный смысл: < (меньше), > (больше), & (амперсенд) и " (двойная кавычка). Если необходимо включить в текст какой-либо из этих символов, то следует закодировать его особой последовательностью символов.

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

Каждая из таких зарезервированных последовательностей начинается символом амперсенда (&) и заканчивается точкой с запятой (;).

Последовательность Символ
< символ <
> символ >
& символ &
" символ " (кавычка)
  неразрывный пробел

Структура HTML-документа

Самым главным из тегов HTML является одноименный тег - <HTML>. Он должен всегда открывать ваш документ, так же, как тег </HTML> должен непременно стоять в последней его строке. Эти теги обозначают, что находящиеся между ними строки представляют единый гипертекстовый документ. Без этих тегов браузер или другая программа просмотра не в состоянии идентифицировать формат документа и правильно его интерпретировать.

Закрывающий тег так же важен, как и открывающий. Если, например, документ включен в электронное письмо, тег </HTML> дает команду программе просмотра прекратить интерпретацию текста, как HTML-кода.

HTML-документ состоит из двух частей: заголовок (head) и тело (body), расположенных в следующем порядке:

<HTML> <HEAD>... </HEAD> <BODY>... </BODY></HTML>

В HTML-документ можно включать комментарии, позволяющие скрыть часть текста от браузера. Все, что заключено между последовательностями символов <!- и ->, при просмотре страницы остается невидимым. Комментарии не могут быть вложенными друг в друга.

Заголовок документа

Включение в документ заголовочной части не является обязательным. Задачей заголовка является представление необходимой информации для браузера и сервера HTTP. Информация, размещенная внутри заголовка документа, обычно не выводится на экран (кроме названия документа).

Заголовок документа открывается тегом <HЕAD>, который обычно следует сразу же за тегом <HTML>. Закрывающий тег </HEAD> показывает конец этого раздела, между ними располагаются остальные теги заголовка документа.

Чаще всего в заголовок документа включают парный тег <TITLE>... </TITLE>, определяющий название документа. Многие программы просмотра используют его как заголовок окна, в котором выводят документ. Программы, индексирующие документы в сети Интернет, используют название для идентификации страницы. Хорошее название должно быть достаточно длинным для того, чтобы можно было корректно указать соответствующую страницу, и в то же время оно должно помещаться в заголовке окна. Название документа вписывается между открывающим и закрывающим тегами.

Тело документа

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

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

Атрибут Назначение
ALINK Определяет цвет активной ссылки
BACKGROUND Указывает на URL-адрес изображения, которое используется в качестве фонового
BGCOLOR Определяет цвет фона документа
LINK Определяет цвет непосещенной ссылки
ТЕХТ Определяет цвет текста
VLINK Определяет цвет посещенной ссылки

Пример

 

<HTML> <HEAD> <TITLE>Моя страничка</TITLE> </HEAD> <BODY TEXT=red BGCOLOR=white> Тело <!- Это комментарий -> документа </BODY> </HTML>

Дальше»

Цветовое оформление документа

Определение цвета составных частей документа - один из первых шагов в его создании. Если этого не сделать, то будут использоваться цвета по умолчанию, определяемые установками браузера. Не существует каких-либо правил создания хорошо сбалансированной цветовой палитры документа. Нужно лишь заботиться о том, чтобы можно было прочитать текст, не испытывая при этом неудобств. При выборе цветовой палитры старайтесь поддерживать высокую контрастность текста и фона и избегайте соседства областей с близкими цветами.

Цвет может быть задан названием (например, green) или шестнадцатеричным числом, определяющим цвет в модели RGB. Эта цветовая модель базируется на определении цвета как композиции трех основных оттенков цвета: красного (Red), зеленого (Green) и синего (Blue). Каждая компонента задается двузначным шестнадцатеричным числом (т. е. изменяется от 00 до FF). Затем эти значения объединяются в одно число, перед которым ставится символ # (большинство современных браузеров может распознать цвет и без указания символа #).

Следует также отметить, что в записи шестнадцатеричного значения цвета можно использовать как большие, так и маленькие латинские буквы, например, запись #00FF00 равнозначна записи #00ff00.

Ниже представлена таблица 16 стандартных цветов вместе с их шестнадцатеричными кодами. Современные браузеры понимают 140 наименований цветов, часть из которых приведена в главе "Динамический HTML".

Цвет Код Цвет Код
black (черный) #000000 silver (серебряный) #C0C0C0
maroon (темно-бордовый) #800000 red (красный) #FF0000
green (зеленый) #008000 lime (известь) #00FF00
olive (оливковый) #808000 yellow (желтый) #FFFF00
navy (темно-синий) #000080 blue (синий) #0000FF
purple (фиолетовый) #800080 fuchsia (фуксия) #FF00FF
teal (сине-зеленый) #008080 aqua (аква) #00FFFF
gray (серый) #808080 white (белый) #FFFFFF

Пример

Чтобы установить синий цвет фона документа нужно для синей составляющей цвета указать максимальное значение, а остальные сделать равными нулю: <BODY BGCOLOR="#0000FF">.

Тот факт, что разработчик Web-страницы ничего не знает о компьютере, на котором этот документ будет просматриваться, накладывает дополнительные ограничения на использование RGB-модели. На некоторых мониторах невозможно отобразить все разнообразие оттенков. Браузеры в этом случае сокращают используемое количество цветов, переназначая их под собственные палитры. Использование разработчиками гипердокументов Web-палитры является в некотором роде гарантией того, что документ будет выглядеть одинаково на различных дисплеях.

Web-палитра распознает по шесть оттенков красного, синего и зеленого цвета, что в результате дает 216 возможных значений цветов (6x6x6=216). Поэтому ее иногда называют "куб 6x6x6". В таблице приведены численные значения цветов из Web-палитры.

Шестнадцатеричные Десятичные Процентные
00 (самый темный)   0 %
    20 %
    40 %
    60 %
CC   80 %
FF(самый светлый)   100 %

Цвета, RGB-компоненты которых входят в Web-палитру, называют Web-надежными цветами. Среди всех цветов, имеющих имена, только 10 цветов входят в Web-палитру: aqua, black, blue, cyan, fuchsia, lime, magenta, red, white и yellow.

Разделение текста на абзацы

Язык HTML предполагает, что автор документа ничего не знает о компьютере своего читателя. Читатель вправе установить любой размер окна и пользоваться любым из имеющихся у него шрифтов. Это означает, что место переноса в строке определяется только программой просмотра и установками конечного пользователя. Символы перевода строки оригинального документа игнорируются, в результате чего текст, отлично смотревшийся в окне вашего редактора, может превратиться в сплошной неудобочитаемый текст в окне программы просмотра.

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

Тег абзаца имеет один атрибут, поддерживаемый большинством браузеров. Это атрибут ALIGN, задающий выравнивание текста в абзаце. Если этот атрибут не задан, то текст выравнивается по левому краю окна браузера. В таблице представлены возможные значения этого атрибута:

Значение Функция
LEFT Выравнивание текста по левой границе окна браузера
CENTER Выравнивание по центру окна браузера
RIGHT Выравнивание по правой границе окна браузера
JUSTIFY Выравнивание текста по ширине окна браузера

Пример

Если вы хотите, чтобы текст абзаца был выровнен по центру, нужно написать следующее: <P ALIGN=CENTER> Текст </P>

Разрыв строки

Иногда требуется "разорвать" текст, перенеся его остаток на новую строку, при этом не выделяя нового абзаца. Для этого используется тег разрыва строки <BR>. Он заставляет программу просмотра выводить стоящие после него символы с новой строки. В отличие от тега абзаца, тег <BR> не добавляет пустую строку. У этого тега нет парного закрывающего тега.

Пример

 

<HTML> <HEAD><TITLE> Иосиф Бродский </TITLE></HEAD><BODY TEXT=black BGCOLOR=white>Откуда к нам пришла зима, <BR> не знаешь ты, никто не знает.<P>Умолкло все. Она сама <BR> холодных губ не разжимает.</BODY></HTML>

Некоторые браузеры интерпретируют несколько стоящих рядом тегов <BR> как один тег, поэтому не стоит использовать его для вставки пустых строк.

Бывают случаи, когда возникает надобность в операции противоположного назначения - запретить перевод строки. Текст, заключенный между тегами <NOBR> и </NOBR>, будет гарантированно располагаться в одной строке без переноса на другую.

Горизонтальные линии

Другим методом разделения документа на части является проведение горизонтальных линий. Они визуально подчеркивают законченность той или иной области страницы. Тег <HR> позволяет провести рельефную горизонтальную линию в окне большинства программ просмотра. Этот тег не требует закрывающего тега. До и после линии автоматически вставляется пустая строка. Атрибуты тега <HR> представлены в таблице.

Атрибут Назначение
ALIGN Выравнивает по краю или центру; имеет значения LEFT, CENTER, RIGHT
WIDTH Устанавливает длину линии в пикселах или процентах от ширины окна браузера; в последнем случае добавляется символ %
SIZE Устанавливает ширину линии в пикселах
NOSHADE Отменяет рельефность линии
COLOR Указывает цвет линии; используется наименование цвета или шестнадцатеричный код

Задания

1. Создайте документ с именем index.html, в заголовке которого поместите свои имя и фамилию и установите белый цвет фона.

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

Дальше»

Форматирование гипертекста

Язык HTML поддерживает как логический (logical), так и физический (physical) стили форматирования содержимого документа. Использование логического форматирования указывает на назначение данного фрагмента текста, а при физическом форматировании досконально задается его внешний вид. По возможности стоит использовать логические стили, так как они позволяют браузеру выбрать наиболее подходящий документу вид. Использование логических стилей также поможет читателю разобраться в структуре документа. Физический стиль используется в основном программами, конвертирующими текстовые файлы, содержащие физическое форматирование, в HTML, так как логическое форматирование документа невозможно выполнить автоматически.

Логическое форматирование

Хотя язык HTML включает теги для достижения различных шрифтовых эффектов (полужирный шрифт, курсив, подчеркнутый шрифт), не все браузеры их поддерживают. Однако все браузеры поддерживают тот или иной способ выделения текста. Поэтому использование логического форматирования текста в любом случае приведет к выделению программой просмотра различных частей текста и выявит структуру документа.

Говоря о логической разметке текста, можно выделить две основные части:

  • выделение заголовков в документе;
  • логическое выделение элементов текста.

Название документа, задаваемое с помощью тега <TITLE>, не выводится на экран как часть документа. Чтобы отобразить название используется один из тегов заголовка. Заголовки в типичном документе разделяются по уровням. Язык HTML позволяет задать шесть уровней заголовков: H1 (заголовок первого уровня), Н2, Н3, H4, Н5 и H6. Заголовок первого уровня имеет обычно больший размер и насыщенность по сравнению с заголовком второго уровня.

Если вы посмотрите на эту главу, то "Логическое форматирование" - заголовок третьего уровня, "Форматирование гипертекста" - второго, а "Основы языка HTML" - первого. На практике заголовки четвертого и далее уровней встречаются лишь в очень больших документах.

Пример

<HTML> <HEAD> <TITLE> Заголовки </TITLE> </HEAD> <BODY BGCOLOR=white> <H1> Заголовок 1 уровня</H1> <H2> Заголовок 2 уровня</H2> <H3> Заголовок 3 уровня</H3> <H4> Заголовок 4 уровня</H4> <H5> Заголовок 5 уровня</H5> <H6> Заголовок 6 уровня</H6> </BODY></HTML<

 

Помните, что если вы забудете поставить закрывающий тег заголовка, вид страницы будет искажен: любой из тегов заголовка автоматически вставляет пустую строку до и после себя.

Теги заголовков поддерживают атрибут ALIGN, действие которого аналогично действию такого же атрибута тега выделения абзаца.

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

Теги Применение Результат
<CITE> </CITE> <CITE> Используется для выделения цитат или названий книг и статей </CITE> Используется для выделения цитат или названий книг и статей
<CODE> </CODE> <CODE> Применяется для вывода небольшого куска программного кода </CODE> Применяется для вывода небольшого куска программного кода
<EM> </EM> <EM> Используется для выделения важных фрагментов текста </EM> Используется для выделения важных фрагментов текста
<KBD> </KBD> <KBD> Выделяет текст, вводимый пользователем с клавиатуры </KBD> Выделяет текст, вводимый пользователем с клавиатуры
<SAMP> </SAMP> <SAMP> Используется для выделения текста примера </SAMP> Используется для выделения текста примера
<STRONG> </STRONG> <STRONG> Используется для выделения очень важных фрагментов текста </STRONG> Используется для выделения очень важных фрагментов текста
<VAR> </VAR> <VAR> Используется для отметки имен переменных <VAR> Используется для отметки имен переменных
<STRIKE> </STRIKE> <STRIKE> Используется для отметки удаленного текста </STRIKE> Используется для отметки удаленного текста

Вы, наверное, обратили внимание на то, что некоторые элементы логической разметки текста дают одинаковый результат. Зачем же тогда нужно такое их разнообразие? Ответ на этот вопрос содержится в названии этой группы тегов. Они предназначены для расстановки логических ударений, выделения логических частей и подчеркивания сути высказываний. Их использование весьма актуально, поскольку, вероятно, в ближайшем будущем станет возможен, например, поиск цитат в Web-пространстве, а, может быть, следующее поколение браузеров научится читать документы вслух. Программы, умеющие распознавать логические ударения, заменят монотонные речевые процессоры сегодняшнего дня.

Для выделения длинных цитат из основного текста в HTML существует тег <BLOCKQUOTE>. Этот элемент является контейнером и может содержать любые форматирующие теги.

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

Физическое форматирование

Одним из отличий HTML-документа от документа, подготовленного на печатной машинке, является возможность форматирования текста. Язык HTML позволяет автору документа выбрать понравившийся ему шрифт, подходящий размер букв, их цвет и начертание. За все эти параметры отображения текста отвечают теги физического форматирования. Они действуют на все символы, стоящие между открывающим и закрывающим тегами.

Теги Применение Результат
<B> </B> <B> Полужирный </B> Полужирный
<I> </I> <I> Курсив </I> Курсив
<U> </U> <U> Подчеркнутый </U> Подчеркнутый
<TT> </TT> <TT> Пишущая машинка </TT> Пишушая машинка
<S> </S> <S> Зачеркнутый </S> Зачеркнутый
<BIG> </BIG> <BIG> Большой </BIG> Большой
<SMALL> </SMALL> <SMALL> Маленький </SMALL> Маленький
<SUP> </SUP> Верхний - x <SUP> индекс </SUP> Верхний - xиндекс
<SUB> </SUB> Нижний - x <SUB> индекс </SUB> Нижний - xиндекс

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

<B><U>жирный и подчеркнутый текст</U></B>

Кроме вышеперечисленных тегов в документе может использоваться тег <FONT>, позволяющий непосредственно задать размер и цвет шрифта. Элемент FONT представляет собой контейнер, т. е. требует как открывающего, так и закрывающего тегов, и сам может использоваться внутри любого другого текстового контейнера.

После стартового тега обязательно указание атрибутов, без которых элемент не оказывает никакого влияния на текст, помещенный в контейнер.

Атрибут FACE позволяет указать тип шрифта, которым программа просмотра выведет ваш текст (если таковым располагает пользователь). Если нужного шрифта нет, программа проигнорирует запрос и будет использовать шрифт, установленный по умолчанию.

Этот атрибут позволяет указать как один, так и несколько шрифтов (через запятую). Весь список будет просмотрен слева направо и первый из имеющихся на машине пользователя будет использован для вывода документа.

Атрибут SIZE служит для указания размера шрифта в условных единицах от 1 до 7. Считается, что размер "нормального" шрифта соответствует числу 3. Размер может быть как абсолютной величиной (SIZE=5), так и относительной (SIZE=+2). Во втором примере текущий размер шрифта увеличивается на 2.

Атрибут COLOR устанавливает цвет шрифта, который может быть задан как в формате RGB, так и указанием имени.

Пример

Текст <FONT COLOR=red> красного цвета </FONT> и <FONT SIZE=7> большого размера </FONT>

 

Предварительно отформатированный текст

Любой фрагмент текста, расположенный между тегами <PRE> и </PRE>, разбивается на строки и абзацы в точном соответствии с тем, как вы его вводили. Обычно при выводе на экран предформатированного (preformatted) текста используется моноширинный шрифт (так называется шрифт печатной машинки). Этот тег можно использовать, например, для печати стихов, в которых взаимное расположение строк задал сам автор, или для изображения "картинки", состоящей из символов. Другим важным применением тега <PRE> является вывод на экран текстов компьютерных программ (на языках Java, C++ и др.), в которых традиционно используют отступы, дополнительные пробелы и пустые строки для выделения структуры исходного кода.

Текст внутри контейнера <PRE> подчиняется действиям тегов <P> и <BR> и поддерживает теги заголовков.

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

Пример

Рассмотрим фрагмент HTML-документа, содержащий предварительно отформатированный текст:

<PRE>Здесь можно ставить <B>сколько</B> угодно <EM>пробелов</EM>, и переносить строки, там, где захочется. <P>Html <S>не</S> сможет <H1>нам</H1> помешать. <PRE>

В окне браузера количество пробелов и разрывы строк будут сохранены, к ним добавятся разрывы строк, вызванные использованием тегов <P>, <BR> и <H1>. Первый из приведенных ниже рисунков соответствует заданию в качестве моноширинного в настройках браузера шрифта Courier (Adobe), а для второго использовался шрифт Fixed (Sony).

 

 

Задания

1. Создайте файл first.html в каталоге public_html. Напишите свои фамилию и имя, используя заголовок первого уровня

2. Установите желтый цвет фона (yellow) этого документа.

3. Разместите в документе три пословицы следующим образом: первая выравнивается по левому краю, пишется полужирным шрифтом красного цвета; вторая - по центру курсивным шрифтом зеленого цвета; третья - по правому краю подчеркнутым шрифтом синего цвета.

4. Включите в документ другие образцы логического и физического форматирования текста.

5. Добавьте в документ фрагмент предварительно отформатированного текста. Как ведет себя такой фрагмент при уменьшении ширины окна браузера?

Дальше»

Пример

Если размер изображения, хранящегося в файле exm2.gif составляет 150 пикселов по ширине и 90 по высоте, то следующая команда приведет к включению в документ деформированного изображения:

<IMG SRC="exm2.gif" WIDTH=10 HEIGHT=100>

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

Язык HTML позволяет задать расположение изображения относительно окружающего его текста. Атрибут ALIGN может принимать следующие значения.

Значение Функция
ТОР Выравнивает одну строку по верху изображения, остальные помещает после рисунка
MIDDLE Выравнивает одну строку по середине изображения, остальные помещает после рисунка
BOTTOM Выравнивает одну строку по низу изображения, остальные помещает после рисунка
LEFT Прижимает обтекаемое текстом изображение к левой стороне окна браузера
RIGHT Прижимает обтекаемое текстом изображение к правой стороне окна браузера

Задания

1. Запустите браузер Netscape, выберите любую картинку и скопируйте ее к себе в директорию public_html (для копирования картинки поставьте курсор мыши на выбранное изображение, нажмите правую кнопку мышки и в появившемся контекстном меню выберите пункт "Сохранить картинку как..." ("Save image as... ), а в окне, задающем список директорий, выберите public_html и введите имя файла).

2. В документ, хранящийся в файле image.html, включите скопированное изображение, при этом рисунок должен иметь рамку шириной 3 пиксела и прижиматься к правому краю, а расстояние вокруг рисунка должно составлять 5 пикселов. Включите альтернативный текст в описание тега IMG.

Дальше»

Бегущая строка в HTML

Бегущую строку можно установить в любом документе, в котором поддерживается HTML. Бегущая строка может нам очень помочь, когда на маленьком участке экрана нужно разместить большой объём информации: многочисленные новости, баннеры, ссылки и пр.

 

Для того, чтобы текст, баннеры, или какие-либо другие элементы отображались в виде бегущей строки, есть специальный парный тег:

<marquee> </marquee>

 

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

 

Атрибут behavior="..." – устанавливает тип движения бегущей строки и имеет следующие значения:

alternate - текст движется слева направо, достигнув края, меняет направление,

scroll - бегущая строка, достигнув края, появляется с противоположной стороны,

slide - бегущая строка останавливается у противоположного края страницы.

 

Атрибут direction="..." – определяет направление движения текста.

Значение down определяет движение текста вниз.

Значение up определяет движение текста вверх.

Значении left бегущая строка движется справа налево.

При right – слева направо.

width="..." - ширина бегущей строки в пикселях или процентах от ширины экрана.

height="..." - высота бегущей строки в пикселях или процентах.

(Если вы делаете бегущую строку в одну строчку, тогда можно высоту не указывать, она сама подбирается под размер букв).

bgcolor="..." - определяет цвет фона бегущей строки.

 

Пример бегущей строки:

<marquee> БЕГУЩИЙ ТЕКСТ </marquee>

 

По умолчанию текст движется справа налево, и будет прокручиваться бесконечное число раз.

 

Пример

<marquee behavior="slide" loop="infinite" width="350" bgcolor="yellow" height="25"style="font-size: 14pt; ">Бегущая строка</marquee>

 

<marquee behavior="alternate" width="350" bgcolor="yellow" height="25" style="font-size: 14pt;">Бегущая строка</marquee>

scrollamount="..." - шаг перемещения в строке в пикселах, на который перемещается текст за заданный интервал времени, т.е. Scrollamount - скорость движения строки.

 

Например:

 

<marquee scrollamount="1" width="350" bgcolor="yellow" height="25">Бегущая

строка</marquee>

 

<marquee scrollamount="5" width="350" bgcolor="yellow" height="25">Бегущая

строка</marquee>

 

<marquee scrollamount="10" width="350" bgcolor="yellow" height="25">Бегущая

строка</marquee>

 

<marquee scrollamount="30" width="350" bgcolor="yellow" height="25">Бегущая

строка</marquee>

scrolldelay="..." - Этот атрибут задаёт временной интервал между шагами бегущей строки в миллисекундах.

 

Например:

 

<marquee scrolldelay="100" width="350" bgcolor="yellow" height="25">Бегущая строка</marquee>

 

<marquee scrolldelay="200" width="350" bgcolor="yellow" height="25">Бегущая строка</marquee>

 

<marquee scrolldelay="300" width="350" bgcolor="yellow" height="25">Бегущая строка</marquee>

 

loop="..." - задаёт число проходов текста бегущей строки. По умолчанию или при указании значения -1 (infinite) броузер будет прокручивать текст бесконечное число раз. Если указать "10" текст проедет десять раз и больше показываться не будет. Только если ещё раз обновить страницу.

 

hspace="..." - Этот атрибут задает поле в пикселах справа и слева от бегущей строки.

 

vspace="..." - Этот атрибут задает отступ в пикселах выше и ниже бегущей строки.

 

Aling= – определяет расположение текста в поле строки.

 

Значение top - определяет расположение текста вверху строки.

Значение bottom - определяет расположение текста внизу строки.

Значении middle - определяет расположение текста посередине строки.

 

Несколько примеров:

Код для бегущей строки: размером 50 пикселей в высоту и 350 пикселей в ширину. Определена бесконечная прокрутка текста, текст перемещается слева направо и имеет жёлтый фон.

<marquee loop="infinite" behavior="altemate" bgcolor="yellow" direction="right" height="50" width="350" style="font-size: 14pt; ">

Пример берущей строки<font size="3" style="font-size: 12pt; ">.

</font></marquee>

 

Код для бегущей строки: размером 50 пикселей в высоту и 550 пикселей в ширину. Определена бесконечная прокрутка текста, текст перемещается от одного края к другому и обратно и имеет фон цвета лайм.

<marquee loop="infinite" behavior="alternate" bgcolor="lime" direction="right" height="50" width="550" style="font-size: 14pt; ">

Пример берущей строки.

</marquee>

 

Если Вам необходимо написать большой текст на маленьком пространстве,

можно использовать бегущую строку.

 

Несколько примеров:

 



Поделиться:


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

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