Теги, применяемые для форматирования шрифта. Теги физического форматирования HTML текста
ТЕГИ ФОРМАТИРОВАНИЯ ТЕКСТА
На большинстве сайтов информация представлена в форме текста. Даже на сайтах, посвященных музыке, фото или живописи, текст присутствует в виде всякого рода пояснений. А текст мы привыкли видеть оформленным так, чтобы его было удобно читать: с полями, абзацами, заголовками и пр., т.е. отформатированным. Но, дело в том, что если мы поместим в тело HTML-документа прекрасно оформленный текст (например, скопируем готовый документ из Word-a), и посмотрим это творение в окне браузера, то увидим просто набор предложений, довольно неудобных для чтения. Объяснить браузеру, как он должен показывать людям наш текст, нужно при помощи тегов.
Начнем с того, о чем я уже упоминал. Предположим, что у нас есть прекрасно оформленный в каком-либо текстовом редакторе документ, и мы хотим в таком виде его показать. Для этого существует тег-контейнер ...
. Весь текст, помещенный в этот тег, выводится браузером "как есть", со всеми элементами форматирования. Казалось бы, что еще нужно? Но не все так просто. Во-первых, сохраняются только признаки форматирования: пробелы, перенос строки, табуляция и т.д. А если у нас в документе красивые заголовки, выделенные особо значимые куски текста и пр.? И, во-вторых, браузер не сможет оптимизировать преформатированный текст под разрешение экрана нашего читателя, т.к. будет поставлен в жесткие условия тега
..., а это доставит неудобства этому самому читателю. А мы этого не хотим, потому что и писали то все это именно для этого конкретного человека. Так, что одним тегом не обойтись, нужно идти дальше.
Из всех элементов, применяемых для форматирования текста, браузеры безо всяких подсказок понимают только один: пробел. Причем, только один пробел. Поэтому, если Вы хотите написать что-то с красной строки, Вам придется употребить специальный, так называемый, символьный объект или, по другому, эскейп-последовательность: знак неразрывного пробела . Сколько таких последовательностей поставите, столько пробелов сделает браузер. Еще этот знак удобно употреблять в случаях, когда нужно обозначить, что в этом месте рвать строку нежелательно. Браузер ведь сам определяет, в зависимости от разрешения экрана и шрифтов, применяемых хозяином, где заканчивается одна строка и начинается другая. И если, например, фраза "Мой вес 73 кг" будет выглядеть таким образом: "Мой вес 73
кг" - это будет как-то не очень... Поэтому в окне редактора ее стоит написать так "Мой вес 73 кг". Эскейп-последовытельности существуют для всех символов из второй половины ASCII-таблицы, и при желании Вы их найдете в спецификации HTML-4, которую я Вам советовал скачать. Но все нам употреблять не придется, а вот некоторые, например, заменяющие угловые скобки < и > (< и >), иногда приходится.
Тег-контейнер - тег параграфа. Закрывающий элемент не обязателен, но если он отсутствует, браузер не оставляет после абзаца пустую строку. Браузеры выделяют текст, помещенный в этот тег, пустыми строчками. Имеет один параметр: ALIGN= , который может принимать значения:
- LEFT - выравнивание по левому краю,
- CENTER - выравнивание по центру,
- RIGHT - выравнивание по правому краю и
- JUSTIFY - выравнивание по ширине
По умолчанию принимается выравнивание по левому краю. Пример использования этого тега - следующий абзац. Он написан внутри тега :
Тег принудительного перевода строки
. Говорит браузеру, в каком месте необходимо прервать строку и начать новую. Закрывающей части не имеет. Используется, как и тег , для разделения абзацев, но в отличие от него не оставляет пустой строки. Использование этого тега в HTML аналогично использованию клавиши ENTER в Word-e. Имеет один параметр CLEAR, прекращающий обтекание рисунка. О его использовании - в статье о применении графики.
Тег, запрещающий перевод строки -
Теги заголовков -
. Теги контейнеры. Текст, помещенный в них, выводится как заголовок. Имеет параметр выравнивания по горизонтали, аналогичный с тегом
Закрывающая часть обязательна. Примеры:
Заголовок первого уровня.
Заголовок второго уровня с выравниванием по центру.
Заголовок шестого уровня с выравниванием по правому краю.
Тег горизонтальной линии
. Рисует горизонтальную линию. Имеет параметры
- ALIGN - выравнивания со значениями LEFT, RIGHT или CENTER.
- WIDTH - устанавливает длину линии в пикселях или процентах от окна браузера.
- SIZE - устанавливает ширину линии в пикселях.
- NOSHADE - отменяет рельефность линии.
- COLOR - указывает цвет линии в формате RGB или стандартном имени.
Ну, например:
Эта линия нарисована тегом с такими параметрами:
.
Тегов, которые употребляются для форматирования текста, довольно много. Часть из них рекомендовано употреблять в таблицах стилей, другая часть отмечены в спецификации HTML-4.0, как устаревшие и их не рекомендуют применять, т.к. браузеры новых версий могут прекратить их поддержку. Рассмотренных нами достаточно, чтобы оформить документ довольно симпатично. В следующей статье я расскажу о применении тегов форматирования шрифтов, а пока у Вас есть время потренироваться в употреблении того, о чем шла речь в этой статье.
ТЕГИ, ПРИМЕНЯЕМЫЕ ДЛЯ ФОРМАТИРОВАНИЯ ШРИФТА.
Для правильного и симпатичного отображения информации на Вашей страничке Вам потребуется не только правильно расставить абзацы, в нужном месте перевести строку, и пр., но и расставить акценты внутри текста, т.е., что-то выделить жирным шрифтом, что-то написать другим цветом, что-то подчеркнуть и т.д. На все эти случаи в языке HTML существуют соответствующие теги. Рассмотрим некоторые из них, наиболее часто употребляемые. Нет необходимости описывать здесь все теги подряд, т.к. освоив употребление нескольких, Вы без труда сможете пользоваться остальными.
- ... - выделяет текст, помещенный внутрь, жирным шрифтом.
- ... - выделяет текст, помещенный внутрь, наклонным шрифтом.
- ... - выделяет текст, помещенный внутрь, подчеркиванием.
- ... - более крупный шрифт.
- ...
- более мелкий шрифт.
Небольшой комментарий - Для форматирования шрифтов можно применять теги физического форматирования и теги логического форматирования. Их отличие в том, что теги физического форматирования дают браузеру конкретное указание, каким шрифтом печатать текст, а теги логического форматирования указывают ему лишь на то, что текст должен отличаться от обычного в ту или иную сторону. Например, вместо тегов ... и ... можно употребить тег -
, который имеет параметры
FACE - задает тип шрифта,
SIZE - задает размер шрифта,
COLOR - задает цвет шрифта.
Например, эта фраза написана внутри тега: .
Спецификация HTML-4.0 рекомендует употреблять теги логического форматирования, как более лояльные к пользователю. В некоторых случаях употребление тегов физического форматирования может не привести к желаемому результату. Например, в случае с вышеприведенной фразой, браузер покажет ее шрифтом, установленным по умолчанию, если на машине пользователя нет шрифта Comic Sans MS. В редакторе SNK Visual HTML Workshop теги логического форматирования Вы найдете нажав кнопку "Стили", а теги физического форматирования - нажав кнопку "Шрифт". - ... - сильно выделенный текст.
· <РRE>... - уже знакомый нам тег.
· Все, помещенное в него, сохраняет форматирование на уровне
· текста, но выводится моноширинным текстом (Что это такое,
· Вы видите на этом примере).
Этого, наверно, достаточно. Как видите, особого разнообразия не наблюдается (мой браузер, например, показывает текст, помещенный в теги ..., <РRE>..., ... совершенно одинаково), но вполне достаточно, чтобы выполнить страничку в соответствии с Вашим вкусом.
ТЕГИ СПИСКОВ
Для предоставления информации на страницах сайтов в виде списков в языке HTML предусмотрен специальный набор тегов. Они дают возможность составлять:
a. Нумерованые или упорядоченные списки.
b. Компактные или маркированные списки.
c. Списки определений.
d. Списки меню.
a.Нумерованные списки
. Пример применения этого тега у Вас перед глазами.
Тег имеет параметры:
- A - задает маркеры в виде заглавных латинских букв.
- a - задает маркеры в виде строчных латинских букв.
- I - задает маркеры в виде больших римских цифр.
- i - задает маркеры в виде маленьких римских цифр.
- 1 - задает маркеры в виде арабских цифр.
По умолчанию принимается значение 1, т. е. нумерация ведется арабскими цифрами.
- COMPACT - в настоящее время не рекомендуется к употреблению.
- START - позволяет начать нумерацию списка не с единицы. Принимает значение порядкового номера элемента, с которого Вы хотите начать нумерацию.
Синтаксис записи:
В качестве примера составим еще один нумерованный список. HTML-код его выглядит так:
- Летние месяцы года:
- Июнь
- Июль
- Август
На странице сайта это будет выглядеть так:
Летние месяцы года:
VIII. Август
b.Маркированные списки создаются при помощи тега-контейнера . Тег имеет параметры:
- TYPE - задает тип маркера, которым отмечается список. Этот параметр может принимать значения:
- = disc - маркеры отображаются закрашенными кружками.
- = circle - маркеры отображаются не закрашенными кружками.
- = square - маркеры отображаются закрашенными квадратами.
Параметр type можно употреблять как для всего списка, так и для каждого элемента в отдельности.
- Парметр COMPACT - в настоящее время не рекомендуется к употреблению.
Каждый элемент списка внутри этого тега помещается в тег-контейнер
Кроме того есть недокументированная возможность выводить в качестве маркеров выводить всяческие симпатичные штучки.
Замечу попутно, что язак HTML имеет еще множество неизученных возможностей и комбинаций кодов. Так что экспериментируйте, фантазируйте, дерзайте, одним словом - и у Вас могут получиться уникальные вещи!
c.Списки определений
создаются при помощи тега-контейнера . . .
. Внутри контейнера определяемый термин помечается тегом
Здравствуйте, уважаемые друзья! Ну, что вы готовы продолжать изучение нелегкого с первого взгляда языка HTML. Думаю, что «да».
Потому что в итоге, после нескольких уроков по изучению основ построения сайта своими руками, вы начинаете ориентироваться в этом непростом лабиринте знаков, тегов, атрибутов и так далее.
Материал сегодняшней темы я посвятил очень важному элементу оформлению текстов — html теги форматирования текста.
Совсем недавно мы познакомились с тем, как при создании сайта необходимо использовать . Cегодня мы подробно рассмотрим, каким образом нужно проводить форматирование и редактирование текста в html.
HTML форматирование текста, нам обязательно понадобится, именно тогда, когда вы на собственном сайте, постараетесь обратить внимание своих пользователей на какие-либо важные моменты.
Что-то подчеркнуть, выделить, исправить, в конце концов. То есть, вариантов использования html тегов форматирования текстов масса, и в любом случае они вам будут нужны. Вернее, умение пользоваться тегами html.
Напомню вам о том, что такое HTML теги. Теги - это специальные пометки в html разметке документа, которыми обозначается начало и конец элементов html документа.
Элементы html документа могут не содержать никакого текста, в этом случае применяется, например, тег перевода строк
, без указания закрывающего тега. Либо элементы html документа, могут содержать атрибуты, которые указывают на какое-либо свойство текста, например, теги html font, указывают на размеры шрифта.
Сегодня мы с вами рассмотрим основные html теги форматирования текста, при помощи которых производится создание и редактирование текста в html.
Теги форматирования текста в html документе: классификация
HTML теги разделения на абзац и переноса строк
HTML теги абзаца в тексте парные , но закрывающий тег не является обязательным. Для того, чтобы сделать в html новый абзац, достаточно поместить перед началом абзаца
В этом случае абзацы текста будут разделены между собой пустой строкой.
Тег принудительного перевода строк
. После него текст начинается с новой строки.
Посмотрим пример html кода форматирования текста по абзацам и выравнивания по сторонам.
А вот так, этот html документ будет выглядеть в браузере
HTML теги для выделения текста курсивом
Эта группа тегов является парной.
Теги применяются при логическом выделении названий: книги, статьи, цитирование.
Тегами выделяются какие-либо определения. Тегами и , как правило, выделяются наиболее важные фрагменты в тексте.
Пример html кода для выделения текстов курсивом
В браузере наш текст будет выглядеть следующим образом.
Теги, отвечающие за жирный шрифт html
Теги и , также являются парными тегами. Оба тега используются одинаково, но специалисты рекомендуют применять тег .
В html документе это будет выглядеть следующим образом
И, соответственно, в браузере вы увидите текст, выделенный жирным шрифтом.
Теги, отвечающие за подчеркивание текста html
Они как и теги жирного шрифта, являются парными. Теги и , и вновь специалисты рекомендуют для подчеркивания текста использовать один из тегов, а именно:
Пример html кода для подчеркнутого текста
Вот, как выглядит конечный результат в браузере.
HTML теги для создания моноширного шрифта
Напомню вам, что моноширный шрифт - это вид шрифта, у которого все знаки одинаковой ширины.
Для форматирования в html документе моноширного шрифта применяются парные теги: ; и
Рассмотрим форматирование моноширного текста на примере:
И, соответственно в вашем браузере будет наблюдаться следующая картинка
Теги для вывода индексов (верхних и нижних) в тексте
Для вывода различных математических, физических или химических значений и формул, очень часто мы сталкиваемся с необходимостью указания индекса, например, формула воды H 2 O. И, если в редакторе Word нам в помощь панель инструментов, то при составлении текстового html документа потребуются теги форматирования.
Тегами мы выведем индекс шрифтом меньшего размера и ниже уровня строки. Тегами мы выведем индекс шрифтом меньшего размера, наоборот, выше уровня строки.
Например, код:
Вывод на экране браузера
Тег html font и его основные параметры
Теги являются парными и в них заключаются основные параметры html шрифта текста:
Название шрифта: face. Названий может применяться, через запятую, несколько. При этом, если указанный по порядку шрифт не найден на ПК пользователя, браузер осуществляет поиск следующего.
Размер шрифта : size. Указывается от одного до 7-ми в условных единицах. HTML шрифт текста по умолчанию равен 3.
Цвет шрифта в html : color. По умолчанию всегда чёрный. Для ввода цвета шрифта в html документ, существует два варианта:
- По имени (названию) цвета. Например: color=»blaсk» - черный цвет.
- По коду (шестнадцатеричный код цвета). Код начинается с символа «#» и включает в себя шесть цифр, например: #000000 - черный цвет.
Таблица цветов html и кодов, как пример, вот здесь: goo.gl/1i4vZ. Вы можете набрать в поисковике запрос «таблицы цветов html» и выбрать таблицу, которая вам понравится.
Пример применения тега html font
Следующий текст мы видим в окне браузера, и радуемся тому, что у нас всё получилось.
Как совместно использовать html теги форматирования текста
Ну, вот, например, понадобилось вам создать текст жирным красным курсивом . Для этой операции мы должны попробовать применить теги форматирования: strong, font и em.
А как это сделать? Первое важное условие совместного использования тегов форматирования - соблюдение порядка вложенности html тегов. Открытый первым тег, закрывается последним.
Пример последовательности:
- Текст выделяем красным
- Помещаем текст в тег html курсива
- И, наконец, всё заключаем в теги жирного шрифта
В итоге, в окне браузера мы видим то, что сделали
На этом, пожалуй, и закончим работу с основными html тегами форматирования текста html документов. Надеюсь, что вам теперь понятен метод работы с тегами html и этот материал не окажется лишним, при создании вами своего сайта.
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-документах форматируют с помощью соответствующих тегов. В таблице приведены теги, используемые для форматирования символов, и заданный ими эффект.
| Тег HTML | Эффект | Пример |
|---|---|---|
| Текст | Написание текста жирным шрифтом | Текст |
| Текст | Жирное начертание текста | Текст |
| Текст | Написание текста курсивом | Текст |
| Текст | Выделение важных фрагментов текста (текст отображается курсивом) | Текст |
| Текст | Подчёркивание текста | Текст |
| Перечёркивание текста | Текст | |
| Текст | Верхний индекс | 100 м 2 |
| Текст | Нижний индекс | H 2 SO 4 |
Кроме этого можно определять различные параметры шрифта. В частности, с помощью тега ... задают гарнитуру шрифта, размер и цвет шрифта. Этот тег одинарный, действует на весь текст, размещенный внутри контейнера.
- FACE="значение"
- гарнитура шрифта. Если указанной гарнитуры на компьютере пользователя нет, то текст будет оформлен с использованием гарнитуры по умолчанию. В атрибуте FACE
иногда записывают через запятую несколько гарнитур, тогда браузер выбирает гарнитуры по списку: при отсутствии первого использует вторую и т. д. Значение атрибута следует подавать в кавычках.
Пример:Tahoma , Arial Black
Результат:
Tahoma , Arial Black - SIZE="значение"
- размер шрифта (целое число от 1 до 7). Атрибут SIZE
со знаком "минус" (или "плюс") означает, что размер шрифта будет уменьшен (или увеличен) на соответствующую величину относительно заданного по умолчанию. Значение без знака задает абсолютный размер шрифта.
Пример:1 ... 7
Результат:
1 , 2 , 3 , 4 , 5 , 6 , 7 - COLOR="значение"
- цвет шрифта. Как значение цвета можно использовать названия цветов английском языке, такие как red
, green
, blue
и т. п., или шестнадцатеричные значения (записанные в шестнадцатеричной системе счисления), начинающиеся с символа #
и последовательно задают красный, зеленый и синий цвета, которые должны быть смешаны для получения нужного оттенка. Последнее более предпочтительно, т. к. в первом случае выбор оттенка зависит от настроек конкретного браузера клиента! Пример:
Текст , Текст
Результат:
Текст , Текст
Для оформления сайта обычно используют набор цветов, который называют . Он состоит из 216 элементов. Особенностью "безопасных" цветов является то, что они не меняются в случае отображения различными браузерами или на разных мониторах, т. е. эта палитра обеспечивает точную передачу на разных мониторах того, что задумал веб-дизайнер. Если любая из трех составляющих шестнадцатеричного значения отличается от 00 , 33 , 66 , 99 , СС или FF , то цвет не является безопасным. Значения атрибутов SIZE и COLOR можно записывать без кавычек, но лучше всё делать по правилам.
Есть и другие теги, которые можно применять для изменения параметров текста:
- Teкст - увеличение размера шрифта. Размер символов текста увеличивается на единицу относительно текущего уровня.
- Teкст - уменьшение размера шрифта. Размер символов уменьшается на единицу относительно текущего уровня.
Teкст- создание перечеркнутого текста. Текст будут перечеркнуты горизонтальной линией.
<Р> - початок нового абзаца; його прийнято записувати в кінці попереднього. Наступне речення починатиметься з нового, вирівняного до лівого краю абзаца без відступу у першому рядку.
- наступний за цим тегом текст буде наведено у новому рядку без пропуску порожнього рядка.
- буде проведена горизонтальна лінія.
<В> текст - товстий шрифт тексту, що є між тегами. |
<І> текст - шрифт-курсив.
текст - підкреслений шрифт.
текст - нижній індекс, наприклад у Н 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:
Це Web-сторінка Світлани Марущак
Я вчуся на першому курсі на факультеті прикладної математики Державного yHiBepcHTeTy"JIbBiBCbKa політехніка " . Мені 17 років. Мої улюблені предмети: інформатика, математика, англійська мова, історія. Я люблю слухати хорошу музику, читати пригодницькі романи, подорожувати влітку, кататися на гірських лижах взимку, ходити на дискотеку в любу пору року, інколи читати конспекти.
Збережіть файл на диску і перегляньте його за допомогою броузера, клацнувши на його піктограмі. Поекспериментуйте з, тегами форматування тексту і розмірами вікна, в якому демонструється документ. Переконайтеся, що броузер автоматично міняє розташування тексту, щоб його можна було переглядати без горизонтальної смуги прокручування (текстові редактори такого ефекту не дають).
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 ="колір фону". Ефект створюється за допомогою парного тега
Слова "Вас вітає, фірма Деол" будуть пробігати в полосі справа наліво, заходитимуть за край екрану і з"являтимуться знову справа. Такий ефект рекомендують застосовувати до заголовків сторінки.
Ефект відбивання від країв екрана забезпечує параметр BEHAVIOR = "alternate", а зупинити рядок біля лівого краю екрана може значення цього параметра "slide". Значення "right" параметра DIRECTION забезпечить ефект руху у протилежну сторону.
Обмеження кількості проходів, наприклад числом 5, задається параметром LOOP="5". Полосу можна відцентрувати за допомогою параметрів HSPASE і VSPACE. Швидкість руху задає параметр SCROLLAMOUNT="3", де значення вибирають з діапазону від 1 (повільно) до 10 (швидко).
Інші динамічні ефекти створюють за допомогою процедур з використанням мов програмування Visual Basic Script або JavaScript.
Зауваження. Немає єдиного стандарту мови 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. Автоматизація математичних обчислень. Дослідження функцій. Дії з матрицями.
Мета
Уміти розв"язувати найпростіші задачі аналізу: визначати похідні, інтеграли, границі, добутки, суми значень заданої функції; виконувати дії над векторами і матрицями, розв"язувати системи лінійних алгебраїчних рівнянь, визначати власні числа і вектори матриці.
Теоретичні відомості
Програми для автоматизації математичних обчислень (Derive, 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(
приклад SOLVE(#l,x), і спростіть його Simplify ^ арргоХ.
13. Введіть новий вираз - будь-який квадратний тричлен - і
факторизуйте його (розкладіть на множники командою Factor).
14. Перемножте три двочлени вигляду (x+a)(x+b)(x+c),
де
а,Ь,с - деякі числа.
Введіть вираз і застосуйте команду Expand.
15. Уведіть будь-яку функцію двох змінних від х
та у,
наприклад
x 2 s\n(ny),
і визначте її частинні похідні першого та другого
порядків (л - номер варіанта).
16. Обчисліть інтеграл від функції за одною із змінних.
17. Визначте градієнт функції двох змінних у заданій точці.
Введіть вираз СКАВ(<вираз функції або її номер>) і виконайте Simplify.
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).
Похожая информация.
