3. Применение текста и шрифтов на сайтах. Задание параметров текста с использованием тегов и атрибутов тегов html и с использованием свойств css.

Шрифт — набор символов, объединенный одними стилевыми признаками.

HTML

В ранних версиях html использовался тег <font> с параметрами:

• color цвет текста (red, #CC23F5, (1,225,55))

• face для задания гарнитуры шрифтов. Названий шрифтов можно привести несколько, через запятую. В этом случае, если первый указанный шрифт не будет найден, браузер станет использовать следующий по списку запятой (serif, sans-serif, cursive, fantasy, monospace).

• size задает размер шрифта – кегль. (в условных единицах от 1 до 7, px, %, em...)

Пример: <font size="5" color="red" face="Arial">text</font>

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

<strong>(логич.)=<b>(физич.) - жирное начертание

<em>(логич.)=<i>(физич.) - курсивное начертание

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

<u> - подчеркивание

<s> - зачеркивание

<align> - выравнивание (устаревший)

<hr> - черта

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

CSS

font — Универсальный параметр, который позволяет установить одновременно несколько атрибутов стиля шрифта. p { font: bold italic 110% serif; }

font-size — значение, пункты (pt), пикселы (px), проценты (%)

font-family — семейство шрифта

font-style — начертание шрифта (Normal, Italic, Oblique).

font-variant — капитель - строчные буквы делаются прописными уменьшенного размера (Normal, small-caps).

font-weight — насыщенность шрифта(от 100 до 900, bold, bolder, lighter, normal)

line-height — интерлиньяж

letter-spacing — трекинг

word-spacing — пробелы между словами

text-indent — отступ первой строки

text-align (center, right, left, justify, inherit)

text-decoration (blink-мигает, line-throgh-перечеркнут, overline-надчеркнут, underline-подчеркнут, none)

text-transform — управляет преобразованием текста элемента в заглавные или прописные символы

text-shadow — добавляет тень к тексту, а также устанавливает её параметры: цвет тени, смещение относительно надписи и радиус размытия

Если требуется использовать шрифт, который не является стандартным для всех пользователей, то следует использовать правило @font-face. Внутри конструкции @font-face может находиться набор свойств для изменения параметров шрифта (font-family, font-size, font-style и др.), а также ссылка на шрифтовой файл. Например,

@font-face { font-family: Pompadur; /* Имя шрифта */

src: url(fonts/pompadur.ttf); /* Путь к файлу со шрифтом */

}

4. Графические изображения на веб-страницах. Графические форматы gif, jpeg и png, их параметры, характеристики, различия и области применения. Методы оптимизации графики в форматах gif и jpeg.

Тег <img> предназначен для отображения на веб-странице изображений в графическом формате GIF, JPEG или PNG. Этот тег имеет единственный обязательный параметр src, который определяет адрес файла с картинкой.

Например, <img src="URL" alt="альтернативный текст" />

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

GIF (Graphics Interchange Format) — использует 8-битовый цвет и эффективно сжимает сплошные цветные области, при этом сохраняя детали изображения.

Количество цветов в изображении может быть от 2 до 256, но это могут быть любые цвета из 24-битной палитры. Файл в формате GIF может содержать прозрачные участки. Поддерживает покадровую смену изображений, что делает формат популярным для создания баннеров и простой анимации. Использует свободный от потерь метод сжатия.

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

Методы оптимизации можно разделить на следующие типы (исключая оптимизацию анимированных GIFов): уменьшение количества цветов; оптимизация палитры изображения; стилизация изображения; искажение размеров изображения; фрагментарная оптимизация; оптимизация "прозрачных" изображений; использование чересстрочной развертки.

JPEG ((Joint Photographic Experts Group) —поддерживает 24-битовый цвет и сохраняет яркость и оттенки цветов в фотографиях неизменными. Данный формат называют сжатием с потерями, поскольку алгоритм JPEG выборочно отвергает данные. Метод сжатия может внести искажения в рисунок, особенно содержащий текст, мелкие детали или четкие края. Формат JPEG не поддерживает прозрачность. Основная характеристика формата — качество, позволяющее управлять конечным размером файла.

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

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

Оптимизация изображений в формате JPEG сводится к подбору оптимального коэффициента сжатия.

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

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

PNG-8 (Portable Network Graphics) — формат по своему действию аналогичен GIF. Использует 8-битную палитру (256 цветов) в изображении, за что и получил в своем названии цифру восемь. При этом можно выбирать, сколько цветов будет сохраняться в файле — от 2 до 256.В отличие от GIF, не отображает анимацию ни в каком виде.

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

PNG-24 — формат, аналогичный PNG-8, но использующий 24-битную палитру цвета Подобно формату JPEG, сохраняет яркость и оттенки цветов в фотографиях. Подобно GIF и формату PNG-8, сохраняет детали изображения, как, например, в линейных рисунках, логотипах, или иллюстрациях.

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

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