[МУЗЫКА] Для размещения на странице сайта изображения также потребуется подключение внешнего файла, собственно, файла изображения. Мы сейчас говорим о растровой графике. Тег изображения image является одиночным, он замещается изображением в месте определения тега. Адрес изображения указывается в атрибуте src. В атрибуте alt устанавливается альтернативный изображению текст. Он полезен, например, для поисковых систем или для программ чтения с экрана, которые преобразуют информацию, представленную на странице, в дикторский текст. Рекомендуется явно задавать в стилевом описании или в атрибутах тега изображение его размера. Заданная таким образом ширина и высота изображения уготавливают ему место и позволяют корректно отобразить верстку страницы, даже если изображение еще не загружено. Изображение традиционно размещают в папке Images, расположенной в корне сайта. Если в такой структуре сайта требуется обратиться к изображению из файла стилевых описаний, то сначала следует выйти из папки CSS на уровень вверх, указав в адресе две точки прямой слеш, потом указать папку Images, потом через слеш — вложенный в нее файл изображения, в данном случае raft.jpg. Сейчас на экране вы видите тег изображения, атрибуты которого: первый подсоединяет файл, указывая его расположение на сайте относительно страницы, второй задает альтернативный изображению текст, третий — ширину и высоту изображения. Вы обратили внимание на то, что файл изображения имеет расширение .jpg. В веб-верстке используют три формата растровой графики: .jpg, .gif и .png. На экране вы видите таблицу сопоставления форматов и свойств изображения. Формат .jpg передает огромное количество цветов и используется для описания фотографий. Формат .gif передает 256 цветов, в нем предусмотрена прозрачность частей изображения, возможна анимированная смена картинок внутри одного файла. Этот формат используется для деловой графики и растровой анимации. Формат .png8 передает 256 цветов, в нем заложена прозрачность, он также используется для деловой графики. И формат .png24 воспроизводит более 16 миллионов цветов, поддерживает прозрачность и градиент, используется для фотографических изображений. Вы можете сохранять ваши изображения в требуемом вам формате. Графика для веб-среды должна быть записана в цветовой модели RGB, разрешение изображения должно составлять 72 или 144 точек на дюйм для устройства вывода типа Macintosh, или 96 точек на дюйм для PC. Физический размер изображения в пикселях следует подготавливать в соответствии с разрешением монитора, на котором, вы предполагаете, изображение будет воспроизводиться. Если по вашим подсчетам изображение будет занимать по ширине не больше 960 пикселей, то его следует готовить такого размера. Больший размер изображения увеличивает вес файла и снижает скорость загрузки файла на страницу, не добавляя при этом изображению в качестве. Вы уже знаете, как отобразить на экране линию, точнее рамку — используя свойство border. Как создать пятно — используя свойство background-color. Как задать элементу страницы цвет — используя свойство color и background-color. Вы знаете, как разместить на страницу графическое или фотографическое изображение. Таким образом, вы можете использовать достаточно большое разнообразие композиционных элементов в создании вашей страницы. Давайте сегодня еще в качестве элементов композиции рассмотрим типографические элементы, точнее, две характеристики: кегль и семейство шрифта. Размер шрифта в браузере по умолчанию такой, каким вы его увидели, открыв вашу сегодняшнюю страницу. В таблице отображается текст в стандартном размере шрифта. На экране сейчас вы видите, как можно изменить размер букв в большую или меньшую сторону. Для форматирования кеглей используют свойство font- size. Размер может быть указан в различных единицах измерения. В данном случае использованы относительные единицы rem. Они указывают на то, во сколько раз размер форматируемого шрифта должен быть больше размера шрифта, заданного в браузере по умолчанию. В приведенных примерах записи размер будет в первом случае больше в два раза, во втором — в полтора, в третьем — в два раза меньше размера шрифта по умолчанию. В CSS форматировании учтены три основных семейства шрифта: антиква, гротеск и моноширинный шрифт. Антиква — семейство пластичных шрифтов с засечками. Гротеск — семейство рубленых шрифтов. Моноширинные шрифты характеризуются равной шириной кегельной площадки для всех литер гарнитуры. Антиквенной гарнитуре соответствует значения serif, гротесковой — sans-serif, и моноширинной — monospace. Если таким образом определить в стилевом описании гарнитуру, то браузер отобразит текст в той антиквенной, гротесковой или моноширинной гарнитуре шрифта, которая задана в программном обеспечении вашего компьютера или компьютера пользователя по умолчанию. То есть, указывая одно из перечисленных значений, мы устанавливаем именно семейство, а не конкретную гарнитуру шрифта. То, какими способами возможно задать конкретную гарнитуру, мы рассмотрим в последующих занятиях. Сейчас на экране вы видите пример форматирования шрифта параграфа и шрифта заголовка первого уровня в теге style. Параграфу задана гротесковая гарнитура, несколько увеличенный относительно стандартного кегль шрифта и коралловый цвет. Заголовку задана антиквенная гарнитура. Считается, что гротесковая гарнитура в силу четкости начертания легче считывается с экрана, поэтому для блоков текста используют обычно ее. В коротких и крупных фрагментах, таких как заголовок, допустима любая гарнитура. Некоторые символы шрифта текста, который должен быть выведен на экран, совпадают с символами, которые используются в HTML разметке или ведут себя в соответствии с правилами веб-верстки, а не в соответствии с типографическими правилами набора текста. Для того чтобы решить проблему использования одних и тех же символов для решения разных задач, в веб-верстке применяется специальная кодировка символов для их корректного вывода на экран. Кодировка начинается со знака амперсанда. Например, во избежание перевода строки в середине фразы используют символ неразрывного пробела, который в верстке записывается так: . Подобное обозначение используется для специальных символов. На экране в частности показано изображение тире, под ним обозначение знака авторских прав. Подробнее о специальных символах вы можете прочитать, перейдя по ссылке, указанной на экране.