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

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

Изначально визуальных средств не было вообще, только текст. Далее задача построения структуры стояла за HTML, а за оформление отвечал браузер, поэтому в разных браузерах страница отображалась по-разному. Но это стало неудобно → придумали CSS.

Консо́рциум Всеми́рной паути́ны (англ. World Wide Web Consortium, W3C) — организация, разрабатывающая и внедряющая технологические стандарты для Всемирной паутины.

Принципы и концепции, утверждённые W3C

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

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

— Интернационализация. Здесь речь идёт, прежде всего, о доступности информации на всех языках мира.

— Патентная политика. Здесь речь идёт о патентовании Рекомендаций W3C таким образом, чтобы их можно было внедрять бесплатно, на основе лицензии W3C Royalty-Free License.

— Мобильная паутина. Этот принцип определяет, что ресурсы Всемирной сети должны быть доступны для мобильных устройств.

Применение текста и шрифтов на сайтах. Задание параметров текста с использованием тегов и атрибутов тегов 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); /* Путь к файлу со шрифтом */

}

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

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