Форматирование текста в HTML. Теги физического форматирования HTML текста

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

Тег

Тег отображает текст полужирным шрифтом. В большинстве случаев рекомендуется вместо тега использовать тег логического форматирования . Например:

Это полужирный шрифт.

Рис. 1.2. Примеры физического форматирования текста (браузером Netscape)

Тег

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

Выделение курсивом

Тег

Тег отображает текст моноширинным шрифтом. Для большинства случаев вместо этого тега лучше использовать теги , или . Пример:

Это моноширинный шрифт.

Тег

Тег отображает текст подчеркнутым. Отмененный тег. Вместо него рекомендуется использовать теги или . Например:

Пример подчеркивания текста.

Теги и

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

Пример зачеркнутого текста.

В настоящее время тег поддерживается не всеми браузерами, поэтому пока рекомендуется использовать в сочетании с тегом . А именно, внутрь тега-контейнера можно вложить пару тегов

....

Тег

Тег выводит текст шрифтом большего (чем непомеченная часть текста) размера. Вместо данного элемента лучше использовать или теги заголовков, например,

Шрифт большего размера.

Тег

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

Шрифт меньшего размера.

Тег

Тег сдвигает текст ниже уровня строки и выводит его (если возможно) шрифтом меньшего размера. Удобно использовать для математических индексов. Например:

Пример шрифта для нижнего индекса.

Тег

Тег сдвигает текст выше уровня строки и выводит его (если возможно) шрифтом меньшего размера. Удобно использовать для задания степеней чисел в математике. Например:

Пример шрифта для верхнего индекса.

Тег

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

Тег

Тег-контейнер является аналогом тега уровня блока

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

Браузер Microsoft Internet Explorer дополнительно разрешает использование следующих параметров тега: DIR, DATAFLD, DATAFORMATAS, DATASRC. Описание параметров можно найти во второй части книги.

Рис. 1.3. Использование вложенных тегов форматирования текста

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

Это полужирный шрифт.

Это курсив.

А здесь текст полужирный и курсивный

Тег

Тег указывает параметры шрифта. Он относится к тегам физического форматирования уровня текста.

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

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

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

Или

.

Для тега могут задаваться следующие параметры: FACE, SIZE и COLOR. Заметим, что браузер Netscape допускает также использование двух дополнительных параметров: POINT-SIZE и WEIGHT, описание которых опускаем.

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

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

    Приведем пример использования параметра FACE:

    Назначение шрифтов

    Пример задания названия шрифта.

    На рис. 1.4 показано отображение примера браузером Netscape. В примере в качестве предпочитаемого указывается шрифт Verdana, при его отсутствии будет использован шрифт Arial и т. д.

Рис. 1.4. Отображение примера браузером Netscape

    Этот параметр служит для указания размеров шрифта в условных единицах от 1 до 7. Конкретный размер шрифта зависит от используемой программы просмотра. Принято считать, что размер "нормального" шрифта соответствует значению 3.

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

Размер шрифта указывается как абсолютной величиной (SIZE=2), так и относительной (SIZE=+1). Последний способ часто используется в сочетании с заданием базового размера шрифта с помощью тега .

Примечание

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

Приведем пример, в котором использованы различные способы назначения размеров шрифтов. Отображение примера показано на рис. 1.6.

Рис. 1.5. Окно настройки параметров шрифтов браузера Netscape

Рис. 1.6. Назначение размеров шрифтов

Назначение размеров шрифтов

Шрифт размера 1

Шрифт размера 2

Шрифт размера 3

Шрифт размера 4

Шрифт размера 5

Шрифт размера 6

Шрифт размера 7

    Этот параметр устанавливает цвет шрифта, который может задаваться с помощью стандартных имен или в формате #RRGGBB. Приведем пример документа с разноцветным текстом.

    Выбор цвета шрифта

    Текст зеленого цвета

    Текст красного цвета

Тег

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

Примечание

Тег может появляться также и в разделе документа.

Заметим, что для тега не существует закрывающего тега.

В качестве параметров могут использоваться точно такие же параметры, что и для тега , а именно: FACE, SIZE и COLOR. Назначение и правила записи параметров аналогичны.

Примечание

Браузер Netscape не допускает применение параметра FACE тега .

Приведем пример использования тега .

Назначение размеров шрифтов

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

Шрифт размера 2.

Шрифт размера 4.

Текст после таблицы

В приведенном примере дважды переопределяется размер шрифта, используемого по умолчанию. Изначально он равен 3 (по умолчанию). Затем устанавливается равным 2, далее - 4. Обратите внимание на отображение данного примера (рис. 1.7). Видно, что для таблиц назначение тега не действует. Это характерно для многих браузеров, хотя формально нарушает идею применения тега.

Рис. 1.7. Отображение примера с тегом (браузером Netscape)

Текст внутри ячейки таблицы
27.11.14 88.7K

В html размер шрифта играет важную роль. Он позволяет обратить внимание пользователя на важную информацию, размещенную на странице сайта. Хотя важен не только размер букв, но и их цвет, толщина и даже семейство.

Теги и атрибуты при роботе со шрифтами html

Язык гипертекста обладает большим набором средств для работы со шрифтами. Ведь именно форматирование текста является основной задачей html .

Причиной создания языка HTML стала проблема отображения правил форматирования текста браузерами.


Рассмотрим теги, которые используются для работы со шрифтами в html и их атрибуты. Основным из них является тег . С помощью значений его атрибутов можно задать несколько характеристик шрифта:
  • color – устанавливает цвет текста;
  • size – размер шрифта в условных единицах.

Поддерживается положительное значение атрибута от 1 до 7.

  • face – используется для установки семейства шрифтов текста, которые будут использованы внутри тега . Поддерживается сразу несколько значений перечисленных через запятую.

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


Также в html существует ряд парных тегов, задающих лишь одно правило форматирования. К ним относятся:
  • — задает в html жирный шрифт. Тег по действию аналогичный предыдущему;
  • — размер больше установленного по умолчанию;
  • — меньший размер шрифта;
  • — наклонный текст (курсив ). Аналогичный ему тег ;
  • — текст с подчеркиванием;
  • — зачеркнутый;
  • — отображение текста только в нижнем регистре;
  • — в верхнем регистре.

Обычный текст

Жирный текст

Жирный текст

Больше обычного

Меньше обычного

Курсив

Курсив

С подчеркиванием

Зачеркнутый

Возможности атрибута style

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

1) font-family – свойство устанавливает семейство шрифта. Возможно перечисление нескольких значений.
Изменение шрифта в html на следующее значение произойдет, если предыдущее семейство не установлено в операционной системе пользователя .

Синтаксис написания:

font-family: имя шрифта [, имя шрифта[, ...]]

2) font-size – задается размер от 1 до 7. Это один из основных способов того, как в html можно увеличить шрифт.
Синтаксис написания:

font-size: абсолютный размер | относительный размер | значение | проценты | inherit

Размер шрифта можно также задать:

  • В пикселях;
  • В абсолютном значении (xx-small, x-small, small, medium, large );
  • В процентах;
  • В пунктах (pt ).

Font-size:7

Font-size:24px

Font-size: x-large

Font-size: 200%

Font-size:24pt


3) font-style – устанавливает стиль написания шрифта. Синтаксис:

font-style: normal | italic | oblique | inherit

Значения:

  • normal –нормальное написание;
  • italic – курсив;
  • oblique – шрифт с наклоном вправо;
  • inherit – наследует написание родительского элемента.

Пример того, как поменять шрифт в html с помощью этого свойства:

font-style:inherit

font-style:italic

font-style:normal

font-style:oblique


4) font-variant – переводит все прописные буквы в заглавные. Синтаксис:

font-variant: normal | small-caps | inherit

Пример того, как изменить шрифт в html этим свойством:

font-variant:inherit

font-variant:normal

font-variant:small-caps


5) font-weight – позволяет установить толщину написание текста (насыщенность ). Синтаксис:

font-weight: bold|bolder|lighter|normal|100|200|300|400|500|600|700|800|900

Значения:

  • bold – устанавливает полужирный шрифт html;
  • bolder – жирнее относительно normal;
  • lighter –менее насыщенное относительно normal;
  • normal – нормальное написание;
  • 100-900 – задается толщина шрифта в числовом эквиваленте.

font-weight:bold

font-weight:bolder

font-weight:lighter

font-weight:normal

font-weight:900

font-weight:100

Свойство font и цвет шрифта html

Font является еще одним контейнерным свойством. Внутри себя оно объединило значения нескольких свойств, предназначенных для изменения шрифтов. Синтаксис font :

font: font-size font-family | inherit

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

  • caption – для кнопок;
  • icon – для иконок;
  • menu – меню;
  • message-box –для диалоговых окон;
  • small-caption – для небольших элементов управления;
  • status-bar – шрифт строки состояния.

font:icon

font:caption

font:menu

font:message-box

small-caption

font:status-bar

font:italic 50px bold "Times New Roman", Times, serif

Доброго времени суток, уважаемые подписчики.

Этот урок мы посветим форматированию текста в html . Рассмотрим, какие теги для этого применяются.

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

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

Итак, начнем.

Для того чтобы нам было проще работать, скачаем архив lesson2.zip по прямой ссылке:

Возьмем из высланного Вам архива файл "Лис и лошадь.doc" и откроем его с помощью программы word. Там две сказки известных авторов Братья Гримм.

Затем откроем блокнот и сделаем в нем заголовок как в прошлом уроке или просто скопируем из предыдущего урока.

Верю, что да.

Теперь вернемся в word, скопируем весь наш текст из файла "сказка.doc" и вставим его между тегами нашей заготовки.

Сохраняем нашу заготовку под именем lesson2.html и открываем с помощью браузера (например, opera).

Мы видим, что текст идет без заголовков, без абзацев, без отступов.

Вот теперь и займемся непосредственным форматированием текста в языке HTML.

Для выделения заголовков используются теги

текст

,

текст

и т.д. до
текcт
.

Цифры после буквы H в теге применяются от 1 до 6.

1 – самый крупный заголовок, 6 – самый маленький заголовок.

Давайте теперь найдем в нашем файле названия сказок и заключим их в теги

…

.

XHTML

Лис и лошадь

Лис и кошка

У тега

есть параметр align со значением Left — по левому краю, right — по правому и center — по центру.

Давайте выровняем заголовок по центру. Для этого пропишем:

XHTML

Аналогично и второй заголовок.

Сохраняем и смотрим в браузер.

Заголовки стали по центру.

Для упрощения работы можно одновременно держать открытыми код страницы в блокноте и браузере.

А после изменений в коде файл сохранять, а в браузере нажать кнопку обновить (или F5).

Самостоятельно попробуйте разные значения тега текст . И разные значения align . Выберите любой Вам понравившейся.

Теперь разобьем наш текст на абзацы.

Тег, который это делает —

текст абзаца

.

Для этого находим начало абзацев и ставим там тег

, а в конце абзаца закрываем его

.

Сохраняем исходный файл с кодом (ctrl+s), в браузере жмем кнопку "обновить" и смотрим, что получилось.

У тега

есть параметр align с такими же значениями, что и у тегов — left, right, center . Его работа абсолютно такая же как и у тега .

На абзацы и заголовки текст мы разбили. Теперь идем непосредственно по тексту.

Текст можно сделать жирным. При помощи тега или (кстати, это закрывающиеся теги. Рекомендуется ).

Курсив — или , подчеркнутый , моноширинный или .

Попробуйте заключить разные участки текста в разные теги. И не забывайте их закрывать.

Например:

XHTML

любой текст из сказки ………………………….. …………………………. ……………………..

Для изменения размера, цвета и шрифта отдельного участка текста используйте тег , его параметры:

fаce="arial" – указывает названия шрифта.

size="3" — размер (значения от 1 до 7).

color="******" – цвет шрифта.

****** — определенный код шрифта (например, 000000 – это черный).

Давайте выделим фрагмент текста крупным красным шрифтом. Сделать это можно следующим образом:

XHTML

фрагмент текста сказки

фрагмент текста сказки

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

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

Работу этих тегов, предлагаю рассмотреть самостоятельно, как раз будет для вас полезное упражнение.

Итак, теги:

— подиндексы (H 2 O)

— надиндекс (4 5)

— увеличивает шрифт на 1

— уменьшает шрифт на 1

— цитаты, отображаются курсивом

— программный код отображается моноширинным шрифтом

— выделенный текст отображается курсивом

— выделенный текст отображается жирным шрифтом, рекомендуется вместо

— горизонтальная линия. У этого тэга есть такие параметры, как:

align=center(left, right) -выравнивание, с этим параметром мы знакомы из других тегов

width="число" — длина линии по горизонтали, задается в пикселях или в процентах относительно размеров экрана

size"число" — толщина линии (меньше 100 пикселей, т.е. если задать параметр size=99 , a параметр width=1 , то получим вертикальную линию, только с ограниченной высотой)

color="цвет" -цвет линии

noshade — отменяет рельефность

Давайте отделим наши две сказки линией красного цвета с шириной равной ширине экрана. Для этого перед началом второй сказки напишем:

XHTML

Поэкспериментируйте с набором и значениями параметров этого тега.

Есть еще один интересный тег, но поддерживается он только браузером Internet Explorer. Честно говоря мне его на практике использовать не приходилось.

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

Изменение стилей шрифтов

Изменять стили написания шрифтов в HTML можно далеко не одним способом:

... и ... - выделяют текст полужирным шрифтом.

... и ... - выделяют текст курсивом .

... - выводит текст в верхнем индексе, например E = mc 2 .

... - выводит текст в нижнем индексе, например H 2 SO 4 .

Все эти теги являются встроенными (inline, уровня строки) , то есть не создают переносы строк до и после себя, а располагаются на одной строке. Содержать они могут тоже только встроенные элементы, поэтому их свободно можно вкладывать друг в друга. Самое главное не забывайте о правильной вложенности: тег, открытый раньше - должен быть закрыт позже.

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

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

<тег style="text-decoration:underline">... - подчеркивает текст.

<тег style="text-decoration:overline">... - надчеркивает текст.

<тег style="text-decoration:line-through">... - зачеркивает текст.

Пример изменения стилей шрифтов

Изменение стилей шрифтов

Жирный шрифт.Курсив.

Жирный курсив.

H2 SO4 - формула серной кислоты написанная курсивом.

Подчеркнутый параграф текста.

Обычный текст,

зачеркнутый жирный.

Результат в браузере

Style - это абсолютно обычный атрибут тегов, но относится он к Каскадным таблицам стилей (CS S). В далеком прошлом все функции по структуризации HTML-страницы в целом и по внешнему представлению ее каждого элемента в отдельности (цвет, форма, положение на странице и т.д.) брал на себя язык HTML. Но потом разработчики языка решили разграничить эти функции и создали CSS. Соответственно многие теги или атрибуты тегов стали устаревшими. есть. Общий синтаксис атрибута style следующий:

<тег style="свойство CSS:значение">...

Тег или что делать, когда нет нужных тегов

Тег .... Этот тег тоже является встроенным (inline, уровня строки) и может содержать любые встроенные теги, но главное не это. Сам по себе , без атрибутов, не добавляет никаких изменений ни тексту, ни тегам находящимся внутри него. А создан он был специально для стилей, то есть, по сути, для атрибута style. Именно благодаря этому атрибуту, а вернее его разным значениям, у появляются те или иные свойства.

Использование тега SPAN

Обычный текст без изменений.

Еще обычный текст.

Подчеркнутый.

Зачеркнутый.

Результат в браузере

Меняем имя (гарнитуру) шрифта

Вот список самых распространенных шрифтов, которые практически наверняка есть на компьютере каждого пользователя:

По умолчанию практически все браузеры используют шрифт "Times New Roman", а чтобы его изменить используется все тот же атрибут style, который можно применить внутри любого тега. Общий синтаксис указания следующий:

<тег style="font-family:имя шрифта, семейство">...

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

Чтобы изменить шрифт на всей странице - достаточно указать атрибут style в теге . А если необходимо изменить шрифт для отдельной части текста, то заключите его втег и примените атрибут к нему.

Пример изменения имени шрифтов

Изменение имени шрифтов

Это шрифт Arial, если его нет, то Verdana, а если

и его нет, то любой другой из sans-serif.

Это Comic Sans MS илилюбой cursive.

Этоопять Arial, Verdana илилюбой sans-serif.

А это Courier или любой monospace.

Результат в браузере

Меняем размер шрифта

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

В CSS есть порядка десяти единиц измерения, но мы с вами рассмотрим только три самых популярных - это пункты (pt), пиксели (px) и проценты (%). Итак:

    pt - Пункты. Один пункт равен 1/72 дюйма, а один дюйм - 2.54см. Следовательно, 1pt = 0,03527778см. Это абсолютная величина, так как размер заданный в пунктах не зависит ни от чего.

    px - Пиксели. Измеряется в пикселях монитора компьютера. Пиксель - это самая маленькая точка на мониторе и она является относительной величиной, так как ее размер зависит от текущего разрешения экрана и размера самого монитора.

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

Чтобы указать размер шрифта используется атрибут style и его можно указать внутри любого тега. Общий синтаксис такой:

<тег style="font-size:размер">...

Как и в случае с именами шрифтов, чтобы изменить размер шрифта на всей странице - достаточно указать атрибут style в теге . А если необходимо изменить шрифт для фрагмента текста, то заключите его втег и примените атрибут к нему.

Пример изменения размера шрифтов

Изменение размера шрифта

Этот размер шрифта составляет 90% от размера

в браузере по умолчанию.

Этот размер составляет 90% уже от размера в теге BODY.

Размер шрифта заголовка составляет 120% от размера в BODY.

Это опять 90% от размера в браузере по умолчанию.

Размер этого шрифта 15 пунктов.

Результат в браузере

Если для всего параграфа нужен шрифт Arial с размером в 80%, то надо написать так:

Текст параграфа.

Текст параграфа.

Или вообще вот так.

Текст параграфа.

Первые два варианта в принципе верны, то последний вообще с ошибкой, так как, если помните, в одном теге не может быть двух одинаковых атрибутов. А теперь пора вспомнить, что style - не просто атрибут, а атрибут относящийся к CSS:

Текст параграфа.

Гораздо проще. Самое главное не забывать ставить между соседними стилями точку с запятой (;) и брать все это «хозяйство» в двойные кавычки (" "), иначе применится только первый стиль, а остальные браузер проигнорирует.

Цвет шрифта и цвет знакоместа

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

Нет такого атрибута? Поэтому, как и в предыдущих уроках, мы будем использовать стили (CSS), то есть универсальный атрибут style, который позволит нам менять цвет там, где мы захотим.

Как можно указывать цвет?

Цвета в HTML (и CSS) можно указывать несколькими способами, я покажу вам самые популярные и распространенные:

    Имя цвета - В HTML имеется большой список цветов с именами и для того, чтобы указать цвет, достаточно написать его имя на английском, например: red, green, blue.

    HEX-код цвета - Абсолютно любой цвет можно получить, смешав в разных пропорциях три базовых цвета - красный, зеленый и синий. HEX-код - это три пары шестнадцатеричных значений отвечающих за количество этих цветов в каждом цвете. Перед кодом цвета необходимо поставить знак решетка (#), например: #FF8C00, #CC3300 и так далее.

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

Как изменить цвет текста?

Чтобы изменить цвет текста в любом элементе HTML-страницы надо указать внутри тега атрибут style. Общий синтаксис следующий:

<тег style="color:имя цвета">... - указание цвета текста по имени.

<тег style="color:#HEX-код">... - указание цвета текста по коду.

И как обычно, чтобы изменить цвет текста на всей странице - достаточно указать атрибут style в теге . А если необходимо изменить цвет шрифта для фрагмента текста, то заключите его втег и примените атрибут к нему.

Пример изменения цвета текста

Изменение цвета текста

Красный текст заголовка

Синий текст параграфа.

Зеленыйкурсив.

Красныйтекст.

Результат в браузере

Как изменить цвет фона?

Цвет фона любого элемента страницы меняется также с помощью атрибута style. Общий синтаксис такой:

<тег style="background:имя цвета">... - указание цвета фона по имени.

<тег style="background:#HEX-код">... - указание цвета фона по коду.

Пример изменения цвета фона

Изменение цвета фона

Заголовок.

Параграф.

Жирныйтекст.

Обычныйтекст.

Результат в браузере

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

Теги выравнивания содержимого теста относительно страницы

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

    text-align:center - Выравнивание каждой строки по центру элемента, например параграфа.

    text-align:left - Каждая строка вплотную прижимается к левой стороне элемента (это значение по умолчанию).

    text-align:right - Каждая строка прижимается к правой стороне.

    text-align:justify - Выравнивание сразу по левой и правой сторонам элемента. Объясню. Обычно у элемента, например параграфа, одна сторона текста всегда ровная, а другая - «рваная», так как длины строк получаются немного разными. А когда мы используем значение text-align:justify, то каждая строка равномерно распределяется по ширине. В случае необходимости между словами браузер добавляет дополнительные пробелы, а первое и последнее слово строки всегда прижаты к соответствующим сторонам, поэтому получается ровный с обеих сторон блок.

Пример выравнивания содержимого тегов

Выравнивание содержимого тегов

Заголовокпоцентру.

Текстпараграфаприжимаетсявправо.

Параграфпоцентру.

Результат в браузере

Вообще, горизонтальное выравнивание применяется только к блочным тегам и ячейкам таблицы (о них поговорим позже). Хотя, с другой стороны, даже если вы попытаетесь, то не сможете применить его к встроенным (inline).

Теги, выделяюцие цитаты

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

Тег

или выделяем длинные цитаты

Тег используется в HTML для выделения так называемых «длинных цитат», например одного или нескольких параграфов. Этот тег является блочным и может содержать блочные теги, но не может содержать встроенные. Кроме этого он добавляет такие же как у параграфов внешние поля сверху и снизу, но еще добавляет и боковые поля, благодаря чему происходит визуальное выделение цитируемого текста.

Пример использования тега BLOCKQUOTE

Использование тега BLOCKQUOTE

Для чего нужен тег BLOCKQUOTE? Вот что нам об этом говорит сайт Сеодон.ру:

Очень часто тег BLOCKQUOTE используют не по прямому назначению -

выделение цитируемого текста. А только ради боковых отступов, которые

он создает. В принципе, подобное применение этого тега не противоречит

синтаксису HTML, главное чтобы BLOCKQUOTE содержал блочные теги. Но все

же лучше подобным образом его не использовать, так как BLOCKQUOTE

предназначен именно для выделения длинных цитат.

Результат в браузере

Тег или выделяем небольшие цитаты

А вот тег ... используется для обозначения небольших цитат или слов в переносном смысле. Весь текст, который находится между тегов этого элемента, он ставит в кавычки. Кстати, - это самый обычный встроенный (уровня строки) тег, который может содержать только встроенные теги.

Пример выделения цитат

Выделяем цитаты в тексте

Для изучения языка гораздо важнее свободная любознательность,

чем грозная необходимость. Августин Аврелий.

Чему бы ты ни учился, ты учишься для себя. Петроний.

Результат в браузере

Тег
или принудительный обрыв строки

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

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

Пример использования тега BR

Тег BR, обрывстроки

Цель творчества - самоотдача,
А не шумиха, не успех.

Позорно, ничего не знача,
Выть притчей на устах у всех.

Б. Пастернак.

Результат в браузере

Зачем использовать тег
, если можно просто написать текст в нескольких параграфах, он ведь тогда тоже будет указан на разных строках?» Все это так, но не забывайте, что тег

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

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


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

Спецсимволы HTML

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

То браузер нам его не покажет, а отобразит в параграфе знак плюс-минус:

Спецсимволы HTML можно указывать двумя способами:

    Код символа - В этом случае ставится амперсанд (&), за ним решетка (#), потом идут цифры и в конце ставится точка с запятой (;), как показано выше.

    Мнемоника - Сначала также идет амперсанд, потом пишется ключевое слово и тоже в конце точка с запятой, например: ©

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

Обратите особое внимание на то, что спецсимволы-мнемоники чувствительны к регистру, то есть © и © - не одно и то же.

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

Для чего нужны спецсимволы HTML?

Спецсимволы HTML используются для совершенно разных целей. Я думаю, вы уже догадались, что их применяют, когда нужно вставить на страницу символ, которого нет в стандартной компьютерной клавиатуре. Но это далеко не все. Кроме этого они указываются, когда кодировка страницы не поддерживает какие-то символы в «готовом» виде (к этому мы еще вернемся).

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

Довольно часто спецсимволы используются для отображения на странице HTML-разметки. И правда, ведь если мы захотим отобразить на странице какой-нибудь тег, то просто так у нас это сделать не получится, так как браузер его скроет, посчитав за разметку. Поэтому придется использовать спецсимволы заменяющие угловые скобки тегов (< и >) и кавычки атрибутов (")

Пример использования спецсимволов HTML

Использование спецсимволов HTML

Тег для создания параграфов.

® - Знак зарегистрированной торговой марки.

При написании статьи лучший вариант - это использование

между словами длинного тире и дефиса, а не только дефиса во всех случаях.

Результат в браузере

Создание горизонтальных линий в HTML

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

Как нарисовать горизонтальную линию?

Для создания горизонтальных линий в HTML существует специальный тег

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

Пример рисования горизонтальных линий в HTML

Рисуем горизонтальные линии

Параграф.

Параграф.

Параграф.

Результат в браузере

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

Как изменить цвет, толщину и ширину горизонтальных линий?

В старых версиях HTML у тега

существовали специальные атрибуты, с помощью которых можно было изменить цвет, толщину и ширину горизонтальных линий. Это color, size и width, соответственно. Но в новых версиях от них отказались в пользу Каскадных таблиц стилей (CSS), поэтому, как вы уже догадались, мы опять будем использовать наш любимый атрибут style. Общий синтаксис такой:

- цвет линии (вернее ее фон).

- толщина линии.

- ширина линии.

- а можно указать сразу все параметры, только не забываем про точку с запятой (;).

Цвет можно указывать по его имени на английском или по HEX-коду цвета, перед которым ставится решетка (#).

В CSS существует около десяти единиц измерения, но ширину линии можно указывать только в пикселях (px) и процентах (%), а толщину вообще только в пикселях. Если вы поставите другие единицы измерения, то это не будет ошибкой, но браузеры их просто проигнорируют.

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

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

. В этом случае размеры родителя берутся за 100%. Например, если мы разместим тег
внутри элемента
, то как бы мы ни изменяли размеры окна браузера или разрешение монитора - ширина линии всегда будет составлять половину ширины блока
.

Пример изменения цвета, толщины и ширины горизонтальных линий.

Меняем цвет, толщину и ширину горизонтальных линий.

Результат в браузере

Изменение положения горизонтальных линий

Когда изменяешь ширину горизонтальной линии, то становится хорошо видно, что браузеры всегда располагают ее по центру. Если вы хотите изменить ее положение, то просто используйте внутри

атрибут style со значениями для выравнивания содержимого тегов .

Как убрать рамку вокруг линии?

По умолчанию браузеры рисуют вокруг линий рамки, которые создают эффект трехмерности. Так вот, когда мы не увеличиваем толщину горизонтальных линий, браузеры нам показывают только эти рамки, так как толщина самой линии составляет 0px.

Чтобы убрать рамку вокруг линии, которая чаще только портит внешний вид, мы снова применим атрибут style. А пишется это так:

Группирование элементов

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

Тег

или сгруппированный блок

До сих пор все изученные нами элементы HTML могли содержать только один из типов тегов - либо встроенные (inline, уровня строки), либо блочные (block). А теперь позвольте вам представить тег

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

Пример использования тега DIV

Использование тега DIV

Менюсайта

Дополнительные разделы

Параграф.

Параграф.

Параграф.

Параграф.

Параграф.

Параграф.

Результат в браузере

Тег или сгруппированная строка

Тег ... является встроенным (инлайн) элементом, который может содержать только встроенные теги и использоваться внутри строк текста.

Пример использования тега SPAN

Использование тега SPAN

Обычный текст.

Жирный.

Курсив.

Результат в браузере

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

<Р> - початок нового абзаца; його прийнято записувати в кінці попереднього. Наступне речення починатиметься з нового, вирівняного до лівого краю абзаца без відступу у першому рядку.
- наступний за цим тегом текст буде наведено у ново­му рядку без пропуску порожнього рядка.

- буде проведена горизонтальна лінія.

<В> текст - товстий шрифт тексту, що є між тегами. |


<І> текст - шрифт-курсив.

текст - підкреслений шрифт.

текст - нижній індекс, наприклад у Н 2 О.

текст - верхній індекс, наприклад, 1° вулиця, а 2 .

текст - великий шрифт.

текст - малий шрифт.

<ЕМ> текст - виокремлений курсивом текст (тег І).

<В> <І> текст - товстий курсив. Цей приклад демонструє застосування принципу вкладення тегів.

Окремим типом абзаца є заголовок. Є шість видів заголовків, які відрізняються розмірами символів: Теги

Результат на екрані

Заголовок 1.

Заголовок 2.

Заголовок 3. Заголовок 4. Заголовок 5.

Заголовок 6.

Заголовок за замовчуванням вирівнюється до лівого краю вікна. Якщо вирівнювання заголовка чи іншого елемента на сторінці потрібно задати явно, то використовують теги вирівнювання:

елемент
- вирівнювання до центру;

елемент - вирівнювання до лівого краю;

елемент - вирівнювання до правого краю.

Інформацію можна подати у вигляді таблиці без рамок за допомогою парного тега 

...
. Текст в середині цього тега оформляють засобами табуляції. Броузер такий текст пере-форматовувати не буде. Теги для створення таблиць з рамками тут не розглядатимемо.

"5. Тег задання параметрів шрифта FONT. Щоб задати назву конкретного шрифта, його розмір і колір використовують парний тег FONT з параметрами FACE, SIZE та COLOR, наприклад,

текст

Якщо на комп"ютері клієнта встановлено шрифт Decor, то він буде застосований до даного тексту, інакше броузер застосує шрифт Arbat чи Kudriashov, інакше - деякий свій стандартний шрифт, наприклад, Times New Roman. Розміри символів шрифта можуть бути від 1 до 7. Розмір 3 вважається стандартним, він орієнтовно


відповідає 10 пікселям. Розмір 7 є найбільшим. Число 2 як значення параметра SIZE означає другий розмір шрифта, число +2 означає, що розмір шрифта має бути на дві одиниці більший, ніж стандартний, тобто п"ятий, число -2 означатиме перший розмір шрифта - на дві одиниці менший, ніж стандартний.

Колір тексту буде червоний. Основні кольори мають такі назви:
black - чорний green - зелений

navy - темносиній teal - бірюзовий

silver - сірий lime - яскраво-зелений

blue - синій aqua - блакитний

maroon - малиновий olive - темно-зелений

purple- бузковий gray - темно-сірий

red - червоний yellow - жовтий

fushsia - рожевий white - білий

Завдання 1. Створіть свою особисту Web-сторінку. Викличіть Notepad чи деякий Web-редактор. Введіть текст про себе за на­веденим нижче зразком і збережіть його у файлі filel.htm:

My Web-page

Це Web-сторінка Світлани Марущак

<В>Привіт! Мене звати <В>Світлана

Я вчуся на першому курсі на факультеті прикладної матема­тики Державного yHiBepcHTeTy"JIbBiBCbKa політехніка " . Мені 17 років. Мої улюблені предмети: інформатика, математика, англійська мова, історія. Я люблю слухати хорошу музику, читати пригодницькі романи, подорожувати влітку, катати­ся на гірських лижах взимку, ходити на дискотеку в любу пору року, інколи читати конспекти.

I^HCb тут буде моя фотографія.

MoH адреса: 79054, Львів-54, п.с. 580

Збережіть файл на диску і перегляньте його за допомогою броузера, клацнувши на його піктограмі. Поекспериментуйте з, тегами форматування тексту і розмірами вікна, в якому демонстру­ється документ. Переконайтеся, що броузер автоматично міняє розташування тексту, щоб його можна було переглядати без горизонтальної смуги прокручування (текстові редактори такого ефекту не дають).


6. Створення списків. Є три типи списків: ненумерований, нумерований, означення. Список може мати заголовок, який охоплюють тегами ..., наприклад, <ЬН>Це заголовок списку.

Ненумерований список утворюють за допомогою парного тега " ... і одинарних тегів

  • , наприклад, так: Мої улюблені предмети:

  • інформатика
  • математика
  • англійська мова
  • історія

    інформатика

    Математика

    Англійська мова

    історія

    Нумерований список створюють за допомогою парного тега з необов"язковим параметром TYPE і одинарних тегів

  • , наприклад, так:

    Мої улюблені предмети:

      <ІЛ>Інформатика

      <ІЛ>Англійська мова

      <ІЛ>Історія

      На екрані отримаємо: Мої улюблені предмети:

      1. Інформатика

      2. Англійська мова

      3. Історія

      Значення "і" чи "І" параметра TYPE задає нумерацію римсь­кими малими (і, іі, ііі, iv,...) чи великими (І, II, III, IV, ...) цифрами, а значення "а" чи "А" - латинськими малими (a, b, c, d, ...) чи великими (А, В, С,...) буквами.

      7. Вставляння графічних і відео-файлів. Графічні зображен­ня (фотографії, картинки, піктограми тощо) зберігаються на сер­верах в окремих файлах з розширеннями bmp, jpg, gif та іншими і подаються на екран клієнта за допомогою команди, що задається одинарним тегом з параметрами:


      Обов"язковим є лише перший параметр SRC. Альтернативний текст - це текст, який виводитиметься замість картинки, якщо броузер не може прийняти графічний файл, або якщо режим відображення графіки вимкнено. Параметр ALIGN задає місце роз­ташування картинки на екрані, а параметри WIDTH і HEIGHT її розміри по ширині і висоті в пікселях або відсотках, наприклад, задає ширину картинки 300 пікселів; задає ширину картинки півсторінки у горизонта­льному напрямку.

      Для проведення ліній різної довжини і товщини застосовують параметри WIDTH і SIZE, наприклад, тег

      замість звичайної лінії дає червону полосу товщиною ЗО

      пікселів.

      Справа і зліва від картинки, яку обгортає текст, можна зробити вільний простір: HSPACE = "кількість пікселів". Можна створити вільний простір також над і під рисунком: VSPACE = "кількість

      пікселів".

      За допомогою тега IMG можна вставити також відеофільм, який запускатиметься в момент відкриття Web-сторінки:

      8. Адреси файлів. Для виклику віддалених файлів, тобто файлів, які є на серверах в мережі Internet, адресу записують з зазначеням назви протоколу доступу http і URL-адреси файлу, наприклад, "http://www.polynet.lviv.ua/ourpage.htm".

      Для доступу до файлів на локальному диску використовують протокол доступу file: "filе:///диск:/ шлях до файлу".

      Наприклад, "file:///d:/mycatalog/mypage.htm". Назву прото­колу можна інколи не писати, наприклад, SRC="c:/windows98/

      Якщо графічні чи інші файли є в тому ж каталозі, що основний html-файл, то достатньо зазначити лише назву файлу, наприклад, SRC="myfoto.gif". Якщо файл є в деякому сусідньому каталозі images, то шлях до нього можна подати так: "../images/myfoto. gif". Отже, тег IMG може мати такий конкретний вигляд:

      .


      Завдання 2. Переробіть файл filel.htm, щоб створити списки двох видів і вставити свою фотографію або деяку картинку з Clip Art, наприклад cat.bmp, rabbit.bmp чи іншу. Новий файл назвіть file2.htm. Перегляньте його у броузері.

      9. Вставляння гіперпосилань. Є два види гіперпосилань: 1) на файл; 2) на деяке місце на даній сторінці, а саме: на початок сторінки - top, кінець сторінки - bottom, на деякий позначений текст. Гіперпосилання вставляють за допомогою парного тега <А>... з параметром HREF = "адреса файлу (або слова top чи bottom чи позначений текст)".

      Гіперпосиланням може бути текст або деяке графічне зобра­ження. Розглянемо на прикладі випадок, коли гіперпосиланням є текст. Нехай у реченні "Мене звати Світлана" слово "Світлана" потрібно зробити гіперпосиланням на файл "newinf.htm", що містить додаткові відомості про Світлану (цей файл ще треба створити). Це роблять так:

      Мене звати <А HREF = "newinf.htm"> Світлана.

      На екрані слово Світлана буде підкреслене і зображене іншим кольором. Колір гіперпосилання визначається у тезі BODY пара­метром LINK = "колір". Крім цього корисними є ще два пара­метри: VLINK= "інший колір" - змінює колір гіперпосилання на інший після першого використання; ALINK = "ще інший колір" - змінює колір активізованого користувачем гіперпосилання на ще інший.

      Тепер розглянемо, як деяке графічне зображення зробити гіперпосиланням. Для цього в середині тега <А>... потрібно використати тег IMG. Наприклад, фотографію Світлани, що є у файлі "svitlana.gif", візьмемо в рамку і зробимо з неї гіперпосилан­ня на файл newinf.htm:

      <А HREF = "newinf.htm">

      Клацнувши у Web-сторінці на фотографії Світлани, отримаємо на екрані файл з додатковою інформацією про неї.

      Розглянемо другий тип гіперпосилань - посилання в межах сторінки. Спочатку потрібно позначити місце на сторінці, куди здійснюватиметься перехід. Якщо з деякого місця перехід мїіє виконуватися на початок сторінки, то в місце html-файлу, що від­повідає початку сторінки, вводять тег, який називається якорем:

      <А МАМЕ="#початок"х/А>.

      Аналогічно позначають (кидають якір у) деяке місце в кінці файлу: <А КАМЕ="#кінець"х/А>.


      Будь-яке місце в тексті можна позначити за допомогою тега: <А КАМЕ="#мояпозначка"х/А>.

      Тепер на сторінці розставляють гіперпосилання на створені позначки:

      <А HREF="#no4aTOK (#кінець або #мояпозначка)"> текст гіперпосилання .

      Якщо одна сторінка займає декілька екранів, то в кінці сторінки вартує вставити гіперпосилання для переходу на її початок, наприклад,

      Тепер можна перейти <А HREF="#no4aTOK""> на початок сторінки.

      Завдання 3. Вставте в документ гіперпосилання на інший html-файл (наприклад, filel.htm тощо), а також посилання на початок і кінець документа. Збережіть файл під назвою file3.htm. Перегляньте його броузером.

      10. Вставляння звуку і відеозображення. Важливо пам"ятати,
      що назви звукових файлів мають розширення au, wav, mid, midi, ra,
      а відеофайлів - avi, vivo, mpeg тощо. Щоб вставити звук чи відео,
      достатньо як значення параметра HREF у тезі гіперпосилання
      задати шлях до відповідного звукового чи відеофайлу, який вже є
      на диску, наприклад,

      Тепер <А HREF="mysound.wav"> послухайте мене (150К) .

      Текст послухайте мене (150К) стане гіперпосиланням, клац­нувши на якому можна почути привітання, застереження, деяку інформацію, яка була заздалегідь записана, наприклад, за допо­могою програми Фонограф у файл "mysound.wav" обсягом 150 Кбайт. Оскільки звукові та відеофайли завантажуються довго, рекомендують зазначати у гіперпосиланнях їхні обсяги в кілобайтах.

      Щоб звуковий чи відеоефект повторювався декілька разів, наприклад 2 рази, у тезі <А> використовують параметр LOOP=2.

      Щоб звук з деякого файлу пролунав у момент запуску сторінки, потрібно використати тег . Інший спосіб - використайте тег і, окрім звукового ефекту, отримаєте на екрані магнітофонну панель для регулювання тривалості і сили звуку, припинення чи продовження звучання тощо.

      11. Поняття про динамічні ефекти. Динамічними назива­
      ються ефекти, коли графічні зображення на Web-сторінці зміню­
      ються з часом, елементи сторінки змінюють розміри або навіть
      свій зміст після клацання над ними мишею, текст "біжить" вздовж
      екрана тощо.

      Практикум


      Розглянемо ефект біжучого тексту у полосі, що має висоту HEIGHT ="висота в пікселях" і фон BGCOLOR ="колір фону". Ефект створюється за допомогою парного тега ...:

      Вас вітає фірма Дeoл

      Слова "Вас вітає, фірма Деол" будуть пробігати в полосі справа наліво, заходитимуть за край екрану і з"являтимуться знову справа. Такий ефект рекомендують застосовувати до заголовків сторінки.

      Ефект відбивання від країв екрана забезпечує параметр BEHAVIOR = "alternate", а зупинити рядок біля лівого краю екрана може значення цього параметра "slide". Значення "right" параметра DIRECTION забезпечить ефект руху у протилежну сторону.

      Обмеження кількості проходів, наприклад числом 5, задається параметром LOOP="5". Полосу можна відцентрувати за допомо­гою параметрів HSPASE і VSPACE. Швидкість руху задає параметр SCROLLAMOUNT="3", де значення вибирають з діапазону від 1 (повільно) до 10 (швидко).

      Інші динамічні ефекти створюють за допомогою процедур з використанням мов програмування Visual Basic Script або Java­Script.

      Зауваження. Немає єдиного стандарту мови HTML. Деякі теги чи їхні параметри не діють у всіх броузерах. Деякі теги і параметри для різних броузерів називаються по-різному. Якщо в написанні тега, назви параметра чи в його значенні допущено синтаксичну помилку, то тег чи параметр не діятимуть.

      12. Web-комповзери. Загальна назва програм призначених для автоматизованого створення Web-сторінок без явного застосу­вання користувачем мови HTML - Web-комповзери. Розглянемо можливості комповзера, які має програма MS Word. Щоб створити Web-сторінку чи цілий Web-сайт, потрібно під час створення нового документа перейти на закладку Web-сторінки і скористатися майстром чи створити нову сторінку. У другому випадку алго­ритм дій дизайнерів такий:

      4 командою Формат <=> Фон задають колір фону чи спосіб замальовування (заливки) екрана деякою текстурою з меню;

      4 вводять текст, вибираючи шрифт, його розмір, колір, вирівню­вання тощо;


      Ф створюють списки як у звичайному текстовому редакторі;

      ф вставляють лінії командою Вставити <=> Горизонтальна ЛІНІЯ <=> Вибирають вигляд лінії з меню;

      За допомогою команди Таблиця створюють і форматують таблиці;

      4 використовують команду Вставити для вставляння карти­нок, фотографій, відеофайлів, звуку, гіперпосилань, біжучих рядків тощо;

      Ф записують створений файл на диск і переглядають його броузером.

      Завдання 5. Створити Web-сторінку про себе або про діяль­ність деякої фірми за допомогою програми MS Frontpage або Web-комповзера програми MS Word. Сторінка має містити фон, лінії, список, таблицю, картинки, гіперпосилання на інші сторінки.

      Хід роботи

      Практична робота полягає у виконанні п"яти завдань, описаних в теоретичних відомостях.

      Контрольні запитання

      1. Що таке гіперпосилання?

      2. Що таке гіпертекст?

      3. Що таке Web-документ?

      4. Для чого призначена програма-броузер?

      5. Що таке Web-вузол (Web-сайт)?

      6. Описати структуру простого Web-документа.

      7. Для чого призначена мова HTML?

      8. Що таке тег і які є теги?

      9. Які параметри може мати тег BODY?

      10. Який тег позначає початок нового абзаца?

      11. Які теги позначають товстий, курсивний і підкреслений шрифти?

      12. Які теги призначені для вирівнювання елементів на Web-сторінці?

      13. Яке призначення тега FONT?

      14. Які значення можуть приймати параметри тега FONT?

      15. Які є типи списків?

      16. Як створити ненумерований (маркований) список?

      17. Як створити нумерований список?

      18. Які параметри може мати тег IMG?

      19. Який параметр використовують у тегах для вирівнювання
      елементів сторінки?

      20. Яка особливість пари тегів 

      ...
      і як її можна
      використати?

      21. Як вставити графічне зображення у Web-сторінку?

      22. Як вставити відеофільм у Web-сторінку?


      Author Calculus Differentiate Integrate Limit Product Sum Taylor Declare Expand Factor Help Jump soLve Plot Quit Simplify Window approX

      23. Які параметри може мати тег IMG?

      24. За допомогою якого тега вставляють гіперпосилання?

      25. Яке призначення параметрів LINK, VLINK, ALINK?

      26. Як деяке графічне зображення зробити гіперпосиланням?

      27. Які є види посилань в межах одної Web-сторінки?

      28. Як вставити у Web-документ звук чи відеозображення?

      29. Як запустити звук одночасно з відкриванням сторінки?

      31. Як створити динамічний ефект біжучого тексту?

      32. Які ви знаєте гіпертекстові редактори?

      33. Що таке Web-комповзер?

      34. Як створити рамку навколо картинки?

      35. Які параметри може мати тег ?

      Практичні роботи № 32-33 Тема

      Derive. Автоматизація математичних обчислень. Дослідження функцій. Дії з матрицями.

      Мета

      Уміти розв"язувати найпростіші задачі аналізу: визначати похідні, інтеграли, границі, добутки, суми значень заданої функції; виконувати дії над векторами і матрицями, розв"язу­вати системи лінійних алгебраїчних рівнянь, визначати власні числа і вектори матриці.

      Теоретичні відомості

      Програми для автоматизації математичних обчислень (De­rive, MathCad, MatLab, Maple, Mathematica) дають змогу дослід­жувати функції: визначати похідні різних порядків, означені та неозначені інтеграли, границі, розклад функції у ряд Тейлора; перетворювати вирази: розкладати на множники многочлени, перемножати і спрощувати вирази; будувати графіки функцій; розв"язувати типові задачі лінійної алгебри: виконувати дії над матрицями, визначати власні числа і власні вектори матриці, розв"язувати системи лінійних алгебраїчних рівнянь; визначати аналітичні і наближені розв"язки всіх відомих типів диферен­ціальних рівнянь; розв"язувати задачі теорії ймовірності і матема­тичної статистики та багато іншого.

      Розгляньте екран програми Derive (рис. 61). Внизу екрана є меню, яке визначає можливості програми. Ось переклад основних команд меню, які будемо використовувати:


      Рис.бі. Вікно програми Derive для MS-DOS.

      Ввести вираз;

      Обчислити (група команд):

      Диференціювати;

      - інтегрувати;

      Границя;

      Обчислити добуток;

      Обчислити суму;

      Перемножити;

      Розкласти на множники;

      Надати допомогу;

      Перейти до потрібного виразу;

      Прирівняти до нуля і знайти корені;

      Будувати графік;

      Вийти з програми;

      Обчислити,спростити;

      Робота з вікнами;

      Наближено обчислити.

      Вибір команд (рух курсора вздовж меню) забезпечує клавіша Tab. Для виконання команд достатньо натискати на велику букву, яка є у назві команди. Вихід з команди забезпечує клавіша Esc.

      Принцип розв"язування задач на дослідження функції такий: спочатку вводять команду Author і вираз для функції, а пізніше виконують над ним потрібні команди з меню Calculas тощо. Введені та перетворені вирази і результати з"являтимуться в основному вікні під порядковими номерами.

      Програма має зручну help-допомогу, яку викликають, як завжди, командою Help. З допомоги можна дізнатися, що Derive має багато стандартних математичних функцій: sin, cos, tan, log, abs, sec та інші, зокрема, обернені тригонометричні та гіперболічні (аргументи функцій беруть у круглі дужки); традиційні констан­ти: рі, #е, #і (уявна одиниця), inf (нескінченність); математичні операції: +, -, * (множення, яке можна не писати у виразах), " - піднесення до степеня, ! - факторіал; бібліотеки (часто їх нема в мінімальних конфігураціях) для розв"язування різноманітних задач з курсів диференціальних рівнянь, теорії ймовірності тощо.

      У командах можна задавати конкретний вираз або його номер (наприклад, #5), якщо вираз вводили раніше.

      Вийти з програми можна за допомогою команди Quit з під­твердженням (потрібно ввести Y і натиснути клавішу Enter).

      Хід роботи № 32

      Якщо під час виконання роботи виникатимуть труднощі, звертайтеся до допомоги (Help).

      1. Уведіть вираз е^созпх, де п - номер варіанта, і розглядайте
      його як деяку функцію f(x).

      Застосуйте команду Author і введіть вираз. Всі вирази програма нумерує. Нехай введений вираз має номер 1. Він може мати, наприклад, такий вигляд: exp(5x)cos(5x). Надалі замість виразу можна писати його номер #1. Результати виконання усіх пунктів занотовуйте у звіт.

      2. Обчисліть похідну першого порядку.

      Вибір команди з меню здійснюється за допомогою клавіші Tab. Застосуйте команду Differentiate до виразу #1 і виконайте її вказівки. Натискайте клавішу Tab для переведення курсора в наступне поле команди. Для отримання кінцевого результату не забувайте виконувати команду Simplify над останнім виразом.

      3. Обчисліть похідну другого порядку.

      Застосуйте команду Differentiate до виразу #1 і зазначте, що порядок похідної другий. Виконайте команду Simplify.

      4. Визначте неозначений інтеграл від заданої функції.


      Застосуйте команду Integrate до виразу #1. Межі інтегрування не зазначайте. Виконайте команду Simplify.

      5. Обчисліть означений інтеграл на деякому проміжку.
      Застосуйте команду Integrate до виразу #1, зазначте межі інтегрування
      за допомогою клавіші Tab. Виконайте команду Simplify.

      6. Обчисліть границю функції у деякій точці.
      Застосуйте команду Limit до виразу #1. Simplify.

      7. Розкладіть функцію у ряд Тейлора в околі нуля.
      Застосуйте команду Taylor до #1. Simplify. Для отримання десят­
      кового числового результату не забувайте виконувати команду
      арргоХ.

      8. Обчисліть скінченну суму значень функції, якщо аргумент
      змінюється від 1 до 10 з кроком 1.

      Застосуйте команду Sum до виразу #1.

      9. Обчисліть аналогічний скінченний добуток значень функції.

      10. Протабулюйте функцію у десятьох точках на [а;Ь] з кроком п.
      Це завдання розв"язується методом побудови вектора зі значень
      функції. Для цього командою Author введіть вираз VECTOR
      (<вираз або його номер>, х, a, b, h), в якому задайте довільні
      значення для a, b, h => Simplify. Результат отримаєте в квадратних
      дужках.

      11. Побудуйте графік функції. Підпишіть осі і поексперимен-
      туйте з масштабом.

      Спочатку виконайте налаштовування дисплея командою Display з Options. Натискайте на клавшу Tab для переходу між парамет­рами і на клавішу пропуск, щоб поміняти значення параметрів, вибравши Graphics, High, VGA відповідно. Утворіть два вікна командами Window <=> Split О Vertically & 40. Перейти з одного вікна в інше можна за допомогою клавіші F1. Введіть спочатку вираз х~2, двічі застосуйте команду Plot і переконайтеся, чи отримаєте параболу. Тепер побудуйте графік заданої функції #1.

      12. Розв"яжіть нелінійне рівняння вигляду Цх)-Л (на [а;Ь]).
      Введіть командою Author вираз SOLVE (-«конкретний вираз або
      його номер> = 1,х) або SOLVE( = 1,х,а,Ь), на­
      приклад SOLVE(#l,x), і спростіть його Simplify ^ арргоХ.

      13. Введіть новий вираз - будь-який квадратний тричлен - і
      факторизуйте його (розкладіть на множники командою Factor).

      14. Перемножте три двочлени вигляду (x+a)(x+b)(x+c), де
      а,Ь,с - деякі числа.

      Введіть вираз і застосуйте команду Expand.

      15. Уведіть будь-яку функцію двох змінних від х та у, наприклад
      x 2 s\n(ny), і визначте її частинні похідні першого та другого
      порядків (л - номер варіанта).

      16. Обчисліть інтеграл від функції за одною із змінних.

      17. Визначте градієнт функції двох змінних у заданій точці.

      Введіть вираз СКАВ(<вираз функції або її номер>) і виконайте Sim­plify.

      18. Побудуйте графік функції двох змінних.

      Спочатку введіть вираз х~2-у~2, двічі застосуйте команду Plot і переконайтеся, що ви отримали графік-сідло. Тепер побудуйте графік своєї функції.

      19. Закінчіть роботу. Здайте звіти.

      Хід роботи № 33

      1. Уведіть вектор А з п"ятьма цілочисловими елементами.

      Елементи вектора вводять через кому у квадратних дужках командою меню Author (тобто як вираз #1).

      2. Уведіть вектор В з п"ятьма цілочисловими елементами як
      вираз #2.

      3. Обчисліть суму векторів як вираз #1+#2.

      Тут і надалі для отримання кінцевого результату не забувайте виконувати команду Simplify над виразом.

      4. Обчисліть різницю векторів.

      5. Обчисліть скалярний добуток векторів #1.#2.
      Скалярний добуток позначається крапкою.

      6. Уведіть матрицю С розміру 3x3.
      Наприклад, так: [,,]

      7. Уведіть матрицю D розміру 3x3.

      8. Обчисліть суму матриць С і D.

      9. Обчисліть різницю матриць.

      10. Обчисліть добуток матриць.
      Добуток матриць позначається крапкою.

      11. Визначте слід матриці С.
      Введіть і спростіть вираз TRACE(C).


      Похожая информация.


      Еще на эту тему:

      Скачать Driver Sweeper – программа для удаления драйверов из OC Windows Скачать программу для удаления драйверов карты Скачать Driver Sweeper – программа для удаления драйверов из OC Windows Скачать программу для удаления драйверов карты
      Выкидывает на рабочий стол Sniper Elite V2 Что делать если лагает sniper elite 3 Выкидывает на рабочий стол Sniper Elite V2 Что делать если лагает sniper elite 3
      Поиск похожей фотографии в интернет Поиск похожей фотографии в интернет

      Другие статьи:

      Самые мощные смартфоны Топ 10 самых мощных телефонов Самые мощные смартфоны Топ 10 самых мощных телефонов Современные технологии позволяют уместить в обычном смартфоне мощность и производительность...
      Как удалить страницу и аккаунт в моем мире Как удалить страницу и аккаунт в моем мире Бывает так, что человек пройдя регистрацию понимает, что эта социальная сеть не для него и хочет...
      Как удалить аваст с компьютера если он не удаляется Как удалить аваст с компьютера если он не удаляется Сейчас мы разберем, как удалить Аваст, чтобы после деинсталляции антивируса, на компьютере не...
      Подключение Nokia Lumia к ПК Подключение Nokia Lumia к ПК Статьи и Лайфхаки впервые могло разочаровать всех, кто недавно приобрёл данное мобильное...