 |
HyperText Markup Language (HTML)
|
|
|
|
HyperTextMarkupLanguage (HTML) -- язык разметки гипертекста -- предназначен для написания гипертекстовых документов, публикуемых в WorldWideWeb. Гипертекстовый документ -- это текстовый файл, имеющий специальные метки, называемые тегами, которые впоследствии опознаются браузером и используются им для отображения содержимого файла на экране компьютера. С помощью этих меток можно выделять заголовки документа, изменять цвет, размер и начертание букв, вставлять графические изображения и таблицы. Но основным преимуществом гипертекста перед обычным текстом является возможность добавления к содержимому документа гиперссылок -- специальных конструкций языка HTML. Существует два способа создания гипертекстовых документов. Можно воспользоваться NetscapeComposer, MicrosoftFrontPage, HotDog или др.), для работы с которыми не требуется специальных знаний о внутренней структуре создаваемого документа. Этот способ позволяет создавать документы для WWW без знания языка HTML.
Альтернативой служит создание и разметка документа при помощи обычного редактора plain-текста (NotePad). При этом способе в текст вручную вставляются команды языка HTML. HTML-документ содержит символьную информацию. Одна ее часть - данные, составляющие содержимое документа. Другая -- теги, называемые - специальные конструкции языка HTML, используемые для разметки документа и управляющие его отображением. Графическая и звуковая информация, включаемая в HTML-документ, хранится в отдельных файлах. Для файлов, содержащие HTML-документы, приняты расширения.htm или.html.
10.Синтаксис гипертекстовой разметки. Теги. Атрибуты.
Прописные и строчные буквы при записи тегов не различаются. В большинстве случаев теги используются парами. Пара состоит из открывающего и закрывающего тегов. Имя закрывающего тега отличается от имени открывающего тем, что перед ним ставится наклонная черта:</ тег>
|
|
|
Атрибуты тега записываются в следующем формате:
имя[="значение"]
Кавычки при задании значения аргумента не обязательны. Для некоторых атрибутов значение может не указываться. У закрывающего тега атрибутов не бывает.
Последовательность символов, составляющая текст, может состоять из пробелов, табуляций, символов перехода на новую строку, символов возврата каретки, букв, знаков препинания, цифр, и специальных символов (например, +, #, $, @), за исключением следующих четырех символов, имеющих в HTML специальный смысл: < (меньше), > (больше), & (амперсенд) и " (двойная кавычка). Если необходимо включить в текст какой-либо из этих символов, то следует закодировать его особой последовательностью символов. К специальным символам можно отнести и неразрывный пробел.
Последовательность Символ
< символ <
> символ >
& символ &
" символ " (кавычка)
неразрывный пробел
13.Цветовое оформление документа
Определение цвета составных частей документа -- один из первых шагов в его создании. Если этого не сделать, то будут использоваться цвета по умолчанию, определяемые установками браузера. При выборе цветовой палитры старайтесь поддерживать высокую контрастность текста и фона и избегайте соседства областей с близкими цветами. Цвет может быть задан названием (например, green) или шестнадцатеричным числом, определяющим цвет в модели RGB. Современные браузеры понимают 140 наименований цветов. <BODY BGCOLOR="#0000FF">
Web-палитра распознает по шесть оттенков красного, синего и зеленого цвета, что в результате дает 216 возможных значений цветов (6x6x6=216).
Цвета, RGB-компоненты которых входят в Web-палитру, называют Web-надежными цветами. Среди всех цветов, имеющих имена, только 10 цветов входят в Web-палитру: aqua, black, blue, cyan, fuchsia, lime, magenta, red, white и yellow.
|
|
|
14.Разделение текста на строки, абзацы. Внутристрочное форматирование. Разрыв строки.
При помощи тега <Р>. Разместите его в начало каждого абзаца, и программа просмотра отделит абзацы друг от друга пустой строкой. Использование закрывающего тега </P> необязательно. Несколько стоящих подряд тегов <Р> не дают дополнительного пространства между абзацами. Тег абзаца имеет один атрибут, поддерживаемый большинством браузеров. Это атрибут ALIGN, задающий выравнивание текста в абзаце. Если этот атрибут не задан, то текст выравнивается по левому краю окна браузера.
LEFT CENTER RIGHT
JUSTIFY- Выравнивание текста по ширине окна браузера
<P ALIGN=CENTER> Текст </P>
<span> — позволяет форматировать отдельное слово или фразу прямо внутри строки без переноса на новую строку и обладает идентичными атрибутами. Некоторые браузеры интерпретируют несколько стоящих рядом тегов <BR> как один тег, поэтому не стоит использовать его для вставки пустых строк. Текст, заключенный между тегами <NOBR> и </NOBR>, будет гарантированно располагаться в одной строке без переноса на другую.
15.Логическое форматирование гипертекста
Язык HTML включает теги для достижения различных шрифтовых эффектов (полужирный шрифт, курсив, подчеркнутый шрифт). Говоря о логической разметке текста, можно выделить две основные части: выделение заголовков в документе; логическое выделение элементов текста.
Название документа, задаваемое с помощью тега <TITLE>, не выводится на экран как часть документа. Чтобы отобразить название используется один из тегов заголовка. Заголовки в типичном документе разделяются по уровням. Язык HTML позволяет задать шесть уровней заголовков: H1 (заголовок первого уровня), Н2, Н3, H4, Н5 и H6.
Пример <HTML><HEAD><TITLE> Заголовки </TITLE></HEAD>
<BODY BGCOLOR=white><H1> Заголовок 1 уровня</H1>
<H2> Заголовок 2 уровня</H2></BODY></HTML>
Теги заголовков поддерживают атрибут ALIGN, действие которого аналогично действию такого же атрибута тега выделения абзаца.
<CITE> Используется для выделения цитат
<CODE> Применяется для вывода небольшого куска программного кода
|
|
|
<EM> Используется для выделения важных фрагментов текста
<KBD> Выделяет текст, вводимый пользователем с клавиатуры
<SAMP> Используется для выделения текста примера
<STRONG> Используется для выделения очень важных фрагментов текста
<VAR> Используется для отметки имен переменных
<STRIKE> Используется для отметки удаленного
Использование логической разметки весьма актуально, поскольку, вероятно, в ближайшем будущем станет возможен, например, поиск цитат в Web-пространстве, а, может быть, следующее поколение браузеров научится читать документы вслух.
Для выделения длинных цитат из основного текста в HTML существует тег <BLOCKQUOTE>. Современные браузеры реагируют на элемент <BLOCKQUOTE> смещением текста цитаты вправо. Некоторые текстовые программы просмотра обозначают цитату символами >, располагающимися в крайнем левом столбце экрана.
16.Физическое форматирование
Язык HTML позволяет автору документа выбрать понравившийся ему шрифт, подходящий размер букв, их цвет и начертание. За все эти параметры отображения текста отвечают теги физического форматирования. Они действуют на все символы, стоящие между открывающим и закрывающим тегами.
<B></B>-Полужирный.
<I></I>-курсив.
<U></U>-Подчеркнутый.
<TT></TT>-Пишушая машинка.
<S></S>-Зачеркнутый
<BIG></BIG>-Большой.
<SMALL></SMALL>-Маленький.
<SUP></SUP>-Верхний – индекс.<SUB></SUB>-Нижний – индекс.
Элементы физического форматирования могут быть вложенными друг в друга. Тег <FONT> позволяет непосредственно задать размер и цвет шрифта. Элемент FONT представляет собой контейнер, т. е. требует как открывающего, так и закрывающего тегов, и сам может использоваться внутри любого другого текстового контейнера. После стартового тега обязательно указание атрибутов, без которых элемент не оказывает никакого влияния на текст, помещенный в контейнер. Атрибут FACE позволяет указать тип шрифта. Атрибут SIZE служит для указания размера шрифта в условных единицах от 1 до 7. Считается, что размер "нормального" шрифта соответствует числу 3. Размер может быть как абсолютной величиной (SIZE=5), так и относительной (SIZE=+2). Во втором примере текущий размер шрифта увеличивается на 2. Атрибут COLOR устанавливает цвет шрифта, который может быть задан как в формате RGB, так и указанием имени.
|
|
|
17.Использование графики в HTML-документах
Рисунки и анимация могут сделать HTML-документ более привлекательным и интересным. Они не только украшают страницу, но и помогают лучше передать содержание документа. Для правильного использования графики в HTML-документе необходимо учитывать следующие факторы: многие браузеры поддерживают только графические форматы GIF и JPEG; файлы, содержащие графику, передаются медленно; некоторые пользователи не имеют графических браузеров или намерено отключают загрузку изображений; цветная графика, которая хорошо смотрится на вашем компьютере, может плохо выглядеть на другом.
Тег <IMG> вставляет изображение в документ, как если бы оно было просто одним большим символом. Синтаксис тега:
SRC="файл" Задает URL-адрес изображения (можно указывать как абсолютный, так и относительный URL-адрес.
ALT="текст" Задает альтернативный текст для браузеров, не поддерживающих работу с изображениями
ALIGN="тип" Задает расположение картинки относительно текста, тип может принимать следующие значения: ТОР, MIDDLE, BOTTON, LEFT, RIGHT
BORDER=n Уст толщину обрамления вокруг изобр в пикселах
HEIGHT=n(%) Уст высот изб в пикс или в % от высоты окна браузра
WIDTH=n(%) Уст ширину изобр в пикселах или в процентах
HSPACE=n Задает свободное пространство слева и справа от изображения (в пикселах)
VSPACE=n Задается свободное пространство над и под изображением (в пикселах)
Ширина и высота изображения могут быть заданы не только в пикселах, но и в процентах от размеров окна браузера. Многие компоненты, включаемые в состав Web-страниц (изображения, таблицы, аплеты и т. д.), позволяют задавать размер в относительных единицах (т. е. в процентах).
Графика передается по сети намного медленнее, чем текст, поэтому лучше включать в документ картинки небольшого размера. Если вы задаете размер изображения меньше, чем у исходного, то это приводит только к неоправданному увеличению объема передачи информации по сети. Рациональнее предварительно уменьшить размер изображения с помощью графического редактора. Язык HTML позволяет задать расположение изображения относительно окружающего его текста. Атрибут ALIGN может принимать следующие значения.
ТОР - Выравнивает одну строку по верху изображения, остальные помещает после рисунка
MIDDLE - Выравнивает одну строку по середине изображения, остальные помещает после рисунка
|
|
|
BOTTOM - Выравнивает одну строку по низу изображения, остальные помещает после рисунка
LEFT - Прижимает обтекаемое текстом изображение к левой стороне окна браузера
RIGHT- Прижимает обтекаемое текстом изображение к правой стороне окна браузера
18.Гиперссылки. Абсолютный и относительный URL
Несмотря на то, что в состав HTML-документа входят самые различные компоненты, можно сказать, что гипертекстовые ссылки - основа WWW. Если бы Web-страницы не ссылались друг на друга, содержимое Web превратилось бы в обычный набор файлов, не связанных между собой. Для создания гипертекстовой ссылки используется пара тегов <A>...</A>. Фрагмент текста, изображение или любой другой объект, расположенный между этими тегами, отображается в окне браузера как гипертекстовая ссылка.
Гипертекстовая ссылка формируется с помощью выражения
<A HREF="URL_ресурса">фрагмент документа</A>
HREF здесь является обязательным атрибутом, значение которого и есть URL-адрес запрашиваемого ресурса. Кавычки в задании значения атрибута HREF не обязательны. Текстовые указатели, т. е. фрагменты текста, являющиеся ссылками, не отличаются разнообразием внешнего вида. Для того чтобы создать ссылку на почтовый ящик, напишите: <A HREF=mailto:адрес_e-mail>текст ссылки</A>. После того, как посетитель активизирует эту ссылку, у него на экране появится специальное окно, позволяющее послать письмо по указанному адресу.
19.Списки в HTML. Виды. Общая характеристика.
В настоящее время стандарты HTML поддерживают теги для списков трех различных видов: нумерованных (упорядоченных) и маркированных (неупорядоченных) списков определений. Списки и элементы списков являются блочными элементами. Это означает, что перед ними и после них автоматически добавляются пустые строки. Язык HTML допускает вложенность любых видов списков. Для этого размещают одну пару тегов (стартовый и завершающий) внутри другой. Все имеющиеся списки должны завершаться закрывающим тегом.
+20.Нумерованные списки. Используют, когда важен порядок вывода элементов списка. Браузер автоматически вставляет номера элементов по порядку, в исходном HTML-тексте номера не печатаются. Если количество элементов списка изменится (в результате удаления или добавления новых элементов), то нумерация автоматически обновится.
Весь нумерованный список заключается между парой тегов <OL> и </OL>, а каждый элемент списка расположен между тегами <LI> и </LI> (закрывающий тег </LI> может отсутствовать).
Пример <OL><LI>Программирование</LI></OL>
Тег <OL> может имеет атрибуты TYPE и START:
<OL START=n TYPE=вид_счетчика>
Атрибут TYPE задает вид счетчика, a START -- начальное значение.
A большие латинские буквы (A,B,C...)
a маленькие латинские буквы (a,b,c...)
I большие римские цифры (I,II,III...)
i маленькие римские цифры (i,ii,iii...)
1 арабские цифры (1,2,3...); исп по умолчанию
+21.Маркированный (неупорядоченный) список. браузер автоматически вставляет специальные значки (маркеры), отмечающие каждый элемент списка.Маркированный список начинается стартовым тегом <UL> и завершается тегом </UL>. Каждый элемент списка начинается с тега <LI> и завершается (необязательным) тегом </LI>.
Пример <UL><LI>Программирование</LI><LI>Алго</LI></UL>
Тег <UL> имеет атрибут TYPE, определяющий внешний вид маркера:
disc (круг -- форма по умолчанию), circle (окружность) или square (квадрат).
<UL><LI TYPE=circle> Пр <LI TYPE=disk>Ал<LI TYPE=square> Пр</ul>. Тег <LI> обеспечивает вывод маркера и разделение элементов списка. Если хочется использовать нестандартные маркеры, то тег <LI> не указывается. Тег <BR> обеспечивает переход к следующему элементу списка.
22.Виды верстки веб-страниц. Общая характеристика.
+23.Табличная верстка —метод верстки HTML-документов, при котором в качестве структурной основы для расположения текстовых и графических элементов документа используются таблицы (то есть HTML-тег <table>).
Метод получил широкое распространение во времена предшествовавшие появлению стандарта CSS. Таблицы в HTML могут быть вложенными, что позволяет создавать целые иерархии таблиц.
Использовать таблицы следует только для отображения табличных данных: статистик, расписаний, сравнительных характеристик и пр., а для расположения элементов документа следует использовать CSS. Тем не менее, табличная верстка остается наиболее удобной и простой в освоении, потому многие веб-разработчики продолжают ею пользоваться. Этот метод верстки зарекомендовал себя, как наиболее стабильный и надежный, в то время как блочная верстка сложна в реализации, имеет проблемы с совместимостью с разными браузерами.
До появления CSS оформление веб-страниц осуществлялось непосредственно внутри содержимого документа (табличная верстка). Однако с появлением CSS стало возможным принципиальное разделение содержания и представления документа (блочная верстка). За счёт этого нововведения стало возможным лёгкое применение единого стиля оформления для массы схожих документов, а также быстрое изменение этого оформления. Если дело касается хранения табличных данных, то не возникает сомнений, что таблицы именно для этой цели и предназначены.
+24.Блочная верстка (CSS-верстка) — условное название метода верстки HTML-документов, при котором в качестве структурной основы для расположения текстовых и графических элементов документа используются блоки (<div>).
С развитием возможностей браузеров меняется и сам подход к верстке страниц. В данное время всё более популярным становится метод «блочной» верстки. Веб-стандарты разрабатываются консорциумом W3C, состоящим из экспертов в самых разных областях IT. Именно здесь разработаны языки HTML и управление стилем страниц CSS. Создатели различных браузеров придерживаются этих стандартов для того, чтобы веб-мастера имели возможность создавать сайты, нормально работающие в любом браузере, что, в свою очередь, оптимально для пользователей, п кроме того, привлекает посетителей независимо от их пристрастия к тому или иному браузеру. Блочная верстка родилась вместе с созданием CSS2.
25.Таблицы в HTML. Средства описания таблиц в HTML. <ТR></ТR>.
По мере развития WWW стало ясно, что средств, которые заложены в НТМL, недостаточно для качественного отображения различного типа документов. Недостатком НТМL было отсутствие в его составе средств отображения таблиц. После введения таблиц в HTML у Web-мастеров появился не просто инструмент для размещения текстовых и числовых данных, а мощное средство дизайна для размещения в нужном месте экрана графических образов и текста.
Для описания таблиц используется тег <ТАВLЕ>. Тег <ТАВLЕ>, как и многие другие, автоматически переводит строку до и после таблицы. Создание строки таблицы - тег <ТR>(ТаbleRow), строка таблицы) создает строку таблицы. Весь текст, другие теги и атрибуты, которые требуется поместить в одну строку, должны размещаться между тегами <ТR></ТR>.Определение ячеек таблицы - тег <ТD>.Внутри строки таблицы обычно размещаются ячейки с данными. Каждая ячейка, содержащая текст или изображение, должна быть окружена тегами <ТD></ТD>. Число тегов <ТD></ТD> в строке определяет число ячеек.
26.Заголовки столбцов таблицы - тег <ТН>
Заголовки для столбцов и строк таблицы задаются с помощью тега заголовка <ТН></ТН> (Таblе Неаder). Эти теги подобны <ТD></ТD>. Отличие состоит в том, что текст, заключенный между тегами <ТН></ТН>, автоматически записывается жирным шрифтом и по умолчанию располагается посередине ячейки. Центрирование можно отменить и выровнять текст по левому или правому краю. Если воспользоваться <ТD></ТD> с тегом<В> и атрибутом <АLIGN=center>, текст тоже будет выглядеть как заголовок. Однако следует иметь в виду, что не все браузеры поддерживают в таблицах жирный шрифт, поэтому лучше задавать заголовки таблиц с помощью <ТН>.
27.Использование заголовков таблицы - тег <САРТIОN>
Тег <CAPTION> позволяет создавать заголовки таблицы. По умолчанию заголовки центрируются и размещаются либо над(<САРТION АLIGN=top>), либо под таблицей (<САРТIONALIGN=bottom>). Заголовок может состоять из любого текста и изображений. Текст будет разбит на строки, соответствующие ширине таблицы. Иногда тег <САРТION> используется для подписи под рисунком. Для этого достаточно описать таблицу без границ.
28.Основные атрибуты <table>
BORDER=n Определяет ширину рамки таблицы (в пикселах), например, BORDER=1; значение, равное нулю, означает отсутствие рамки
WIDTH=n Определяет ширину всей таблицы в пикселах, либо в процентах от ширины окна браузера
HEIGHT=n Определяет высоту всей таблицы в пикселах, либо в процентах от высоты окна браузера
ALIGN Задает горизонтальное выравнивание таблицы в окне браузера; имеет значения left, center и right (по умолчанию -- left)
CELLPADDING=n Добавляет свободное пространство между данными внутри ячейки и ее границами; по умолчанию значение равно 2
CELLSPACING=n Добавляет свободное пространство между ячейками внутри всей таблицы; по умолчанию значение равно 2
HSPACE=n Задает области свободного пространства указанной ширины (в пикселах) слева и справа от таблицы
VSPACE=n Задает области свободного пространства заданной высоты (в пикселах) сверху и снизу от таблицы
BGCOLOR=цвет Устанавливает цвет фона всей таблицы
BACKGROUND=URL Указывает фоновое изображение для таблицы, где URL -- адрес источника (имя файла с изображением)
29.Выравнивание данных в ячейках. ALIGN и VALIGN
При помощи атрибутов ALIGN и VALIGN можно по-разному размещать данные относительно границ ячейки. Эти атрибуты используются совместно с тегами <CAPTION>, <TR>, <TH> и<TD> в самых различных комбинациях. Ниже приведены значения атрибутов для перечисленных элементов.
<TR>-Атрибут ALIGN может принимать значения left, center и right (по умолчанию -- left для данных и center для заголовков);
Атрибут VALIGN может иметь значения top, bottom, middle и baseline (по умолчанию -- middle); он регулирует положение данных относительно верхней и нижней границ ячейки и влияет на всю строку, если не отменяется таким же атрибутом в отдельной ячейке. baseline применяется ко всем элементам строки и выравнивает их по базовой линии
<TH>-Атрибут ALIGN может принимать значения left, center и right (по умолчанию -- center)
Атрибут VALIGN может иметь значения top, bottom и middle (по умолчанию -- middle)
<TD>-Атрибут ALIGN может принимать значения left, center и right (по умолчанию -- left)
Атрибут VALIGN может иметь значения top, bottom и middle (по умолчанию -- middle)
<CAPTION>-Атрибут ALIGN может иметь значения top и bottom (по умолчанию -- top); размещает заголовок таблицы сверху или снизу.
30.Объединение ячеек в НТМL.
Смежные ячейки таблицы могут объединяться. Возможно также объединение нескольких строк или создание пустой прямоугольной области.
Для соединения двух смежных ячеек в одном столбце нужно использовать атрибут ROWSPAN тега <TH> или <TD>, например,
<TD ROWSPAN=2>
Для объединения двух смежных ячеек в одной строке нужно использовать атрибут COLSPAN тех же тегов, например,
<TD COLSPAN=2>
В следующей таблице используется объединение столбцов и строк.
<HTML><BODY><TABLE BORDER=1 ALIGN=center>
<TR><TH COLSPAN=3>Заголовок на 3 столбца</TH></TR>
<TR><TH>Заголовок на 1 строку</TH><TD>Ячейка 1</TD>
<TD>Ячейка 2</TD></TR>
<TR><TH ROWSPAN=3>Заголовок на 3 строки</TH>
<TD>Ячейка 3</TD><TD>Ячейка 4</TD></TR>
<TR><TD>Ячейка 5</TD><TD>Ячейка 6</TD></TR>
<TR><TD>Ячейка 7</TD><TD>Ячейка 8</TD></TR>
</TABLE></BODY></HTML>
Если вы хотите создать таблицу с объединениями столбцов и в то же время точно контролировать ширину каждого столбца, необходимо задать ширину по крайней мере одной ячейки в каждом столбце.
31.Общее определение каскадных таблиц стилей CSS. Цель создания CSS
CSS (англ. CascadingStyleSheets — каскадные таблицы стилей) — формальный язык описания внешнего вида документа, написанного с использованием языка разметки.
Преимущественно используется как средство описания, оформления внешнего вида веб-страниц, написанных с помощью языков разметки HTML и XHTML, но может также применяться к любым XML-документам.
CSS используется создателями веб-страниц для задания цветов, шрифтов, расположения отдельных блоков и других аспектов представления внешнего вида этих веб-страниц. Основной целью разработки CSS являлось разделение описания логической структуры веб-страницы (которое производится с помощью HTML или других языков разметки) от описания внешнего вида этой веб-страницы (которое теперь производится с помощью формального языка CSS). Такое разделение может увеличить доступность документа, предоставить большую гибкость и возможность управления его представлением, а также уменьшить сложность и повторяемость в структурном содержимом. Кроме того, CSS позволяет представлять один и тот же документ в различных стилях или методах вывода, таких как экранное представление, печатное представление, чтение голосом (специальным голосовым браузером или программой чтения с экрана), или при выводе устройствами, использующими шрифт Брайля.
32.Способы подключения CSS к документу
Правила CSS пишутся на формальном языке CSS и располагаются в таблицах стилей, то есть таблицы стилей содержат в себе правила CSS. Эти таблицы стилей могут располагаться как в самом веб-документе, внешний вид которого они описывают, так и в отдельных файлах, имеющих формат CSS. (По сути, формат CSS — это обычный текстовый файл. В файле.css не содержится ничего, кроме перечня правил CSS и комментариев к ним.)
То есть, эти таблицы стилей могут быть подключены, внедрены в описываемый ими веб-документ четырьмя различными способами:
-когда таблица стилей находится в отдельном файле, она может быть подключена к веб-документу посредством тега <link>, располагающегося в этом документе между тегами <head> и </head>. (Тег <link> будет иметь атрибут href, имеющий значением адрес этой таблицы стилей). Все правила этой таблицы действуют на протяжении всего документа;
<head>.....<linkrel="stylesheet"type="text/css"href="style.css">
</head>
-когда таблица стилей находится в отдельном файле, она может быть подключена к веб-документу посредством директивы @import, располагающейся в этом документе между тегами <style> и </style> (которые, в свою очередь, располагаются в этом документе между тегами <head> и </head>) сразу после тега <style>, которая также указывает (в своих скобках, после слова url) на адрес этой таблицы стилей. Все правила этой таблицы действуют на протяжении всего документа;
<head>....<styletype="text/css"media="all"> @import url(style.css);
</style></head>
-когда таблица стилей описана в самом документе, она может располагаться в нём между тегами <style> и </style> (которые, в свою очередь, располагаются в этом документе между тегами <head> и </head>). Все правила этой таблицы действуют на протяжении всего документа;
<head>.....<styletype="text/css"> body { color: red; }
</style></head>
-когда таблица стилей описана в самом документе, она может располагаться в нём в теле какого-то отдельного тега (посредством его атрибута style) этого документа. Все правила этой таблицы действуют только на содержимое этого тега.
<pstyle="font-size: 21px; color: green;">Рассказ о том, как вредно красить батареи</p>
В первых двух случаях говорят, что к документу применены внешние таблицы стилей, а во вторых двух случаях — внутренние таблицы стилей.Для добавления CSS к XML-документу, последний должен содержать специальную ссылку на таблицу стилей. Например:
<?xml-stylesheettype="text/css"href="style.css"?>
33.Построение правила CSS. Виды селекторов
Построение правила CSS
В первых трёх случаях подключения таблицы CSS к документу каждое правило CSS из таблицы стилей имеет две основные части — селектор и блок объявлений. Селектор, расположенный в левой части правила, определяет, на какие части документа распространяется правило. Блок объявлений располагается в правой части правила. Он помещается в фигурные скобки, и, в свою очередь, состоит из одного или более объявлений, разделённых знаком «;». Каждое объявление представляет собой сочетание свойства CSS и значения, разделённых знаком «:». Селекторы могут группироваться в одной строке через запятую. В таком случае свойство применяется к каждому из них.
В четвёртом случае подключения таблицы CSS к документу правило CSS (являющееся значением атрибута style тега, на который оно действует) представляет собой перечень объявлений («свойство CSS: значение»), разделённых знаком «;».
Виды селекторов
Селекторы правила CSS могут быть
селекторами элементов;p {font-family: Garamond,serif;}
селекторами классов;.note{color:red;background:yellow;font-weight:bold;}
селекторами идентификаторов;#paragraph1{margin:0;}
селекторами атрибутов; a[href="http://www.somesite.com"]{font-weight:bold;}
селекторами потомков (контекстными селекторами);
div#paragraph1 p.note{color:red;}
селекторами дочерних элементов;p.note> b {color:green;}
селекторами сестринских элементов;h1 + p {font-size:24pt;}
селекторами псевдоклассов;a:active {color:yellow;}
селекторами псевдоэлементов.p:first-letter {font-size:32px;}
Также в CSS существует так называемый универсальный селектор, обозначающий любой элемент, встречающийся в документе. Например, * {color:red;}. Перед любым селектором, задающим класс или идентификатор, можно поставить знак универсального селектора, в результате получится эквивалентное выражение, например,.first {...} и *.first {...} имеют один и тот же смысл.
34.Наследование. Каскадирование. Приоритеты стилей CSS.
Применение CSS к документам HTML основано на принципах наследования и каскадирования. Принцип наследования заключается в том, что свойства CSS, объявленные для элементов-предков, наследуются элементами потомками. Но, естественно, не все свойства CSS наследуются — например, если для тега параграфа p средствами CSS задана рамка, то она не будет наследоваться ни одним тегом, содержащимся в данном теге p, а вот если для параграфа p средствами CSS задан цвет шрифта (например, color:green;), то это свойство будет унаследовано каждым элементом-тегом, находящимся в параграфе.
Принцип каскадирования применяется в случае, когда какому-то элементу HTML одновременно поставлено в соответствие более одного правила CSS, то есть, когда происходит конфликт значений этих правил. Чтобы разрешить такие конфликты вводятся правила приоритета.
Наиболее низким приоритетом обладает стиль браузера;
Следующим по значимости является стиль, заданный пользователем браузера в его настройках;
И наиболее высоким приоритетом обладает стиль, заданный непосредственно автором страницы. И далее, уже в этом авторском стиле приоритеты расставляются следующим образом:
Самым низким приоритетом обладают стили, наследуемые в документе элементом от своих предков;
Более высоким приоритетом обладают стили, заданные во внешних таблицах стилей, подключённых к документу;
Ещё более высоким приоритетом обладают стили, заданные непосредственно селекторами всех десяти видов (см. подраздел «виды селекторов»), содержащимися в контейнерах style данного документа. Нередки случаи, когда к какому-нибудь элементу имеют отношение, задают его вид, несколько таких селекторов. Такие конфликты между ними разрешаются с помощью расчёта специфичности каждого такого селектора и применения этих селекторов к данному элементу в порядке убывания их специфичностей.
И наконец самым высоким приоритетом обладают стили, объявленные автором страницы или пользователем, с помощью сопроводительного слова!important. Если таких свойств несколько, то предпочтение отдаётся в первую очередь стилям, заданным пользователем, а для остальных свойств (которые будут являться задаваемыми автором страницы) потребуется определить их специфичности по принципам, описанным выше, и применять эти свойства в порядке убывания этих их специфичностей.
35. Преимущества и недостатки CSS-вёрстки
До появления CSS оформление веб-страниц осуществлялось исключительно средствами HTML, непосредственно внутри содержимого документа. Однако с появлением CSS стало возможным принципиальное разделение содержания и представления документа. За счёт этого нововведения стало возможным лёгкое применение единого стиля оформления для массы схожих документов, а также быстрое изменение этого оформления.
Преимущества:
Несколько дизайнов страницы для разных устройств просмотра. Например, на экране дизайн будет рассчитан на большую ширину, во время печати меню не будет выводиться, а на КПКи сотовом телефоне меню будет следовать за содержимым.
Уменьшение времени загрузки страниц сайта за счет переноса правил представления данных в отдельный CSS-файл. В этом случае браузер загружает только структуру документа и данные, хранимые на странице, а представление этих данных загружается браузером только один раз и могут быть закешированы.
Простота последующего изменения дизайна. Не нужно править каждую страницу, а лишь изменить CSS-файл.
Дополнительные возможности оформления. Например, с помощью CSS-вёрстки можно сделать блок текста, который остальной текст будет обтекать (например для меню) или сделать так, чтобы меню было всегда видно при прокрутке страницы.
Недостатки:
Различное отображение вёрстки в различных браузерах (особенно устаревших), которые по разному интерпретируют одни и те же данные CSS.
Часто встречающаяся необходимость на практике исправлять не только один CSS-файл, но и теги HTML, которые сложным и ненаглядным способом связаны с селекторами CSS, что иногда сводит на нет простоту применения единых файлов стилей и значительно удлиняет время редактирования и тестирования.
36.Классы элементов. Идентификаторы элементов.
Класс или идентификатор может быть присвоен какому-нибудь элементу (тегу) HTML посредством атрибутов class или id этого элемента (тега):
<div id="first">... </div>
<p class="big">... </p>
Основное отличие между классами элементов и идентификаторами элементов в том, что в документе какой-нибудь класс может быть присвоен сразу нескольким элементам, а идентификатор - только одному. Также отличие в том, что могут существовать множественные классы (когда класс элемента состоит из нескольких слов, разделённых пробелами). Для идентификаторов такое невозможно. Важно отметить следующее отличие идентификатора от класса: идентификаторы широко используются в JavaScript для нахождения уникального элемента в документе. Имена классов и идентификаторов, в отличие от названий тегов и их атрибутов, чувствительны к регистру ввода букв. Свойства классов и идентификаторов задаются с помощью соответствующих селекторов. Причём может быть задано как свойство класса в целом (в таком случае селектор начинается с «.»), или свойство идентификатора самого по себе (в таком случае селектор начинается с «#»), так и свойство какого-нибудь элемента этого класса или с этим идентификатором. В CSS помимо классов, задаваемых автором страницы, существует также ограниченный набор так называемых псевдоклассов, описывающих вид гиперссылок с определённым состоянием в документе, вид элемента, на котором находится фокус ввода, а также вид элементов, являющихся первыми дочерними элементами других элементов. Также в CSS существует четыре так называемых псевдоэлемента: первая буква, первая строка, применение специальных стилей до и после элемента.
37.Подготовка иллюстраций для WEB.GIF. Jpeg.
Оптимизация графики для Web
На данный момент в Web используется два типа растровых файлов: в форматах JPEG и GIF. JPEG-формат хорошо передает цветовые и тоновые раскаты, размытые границы (например, фото). JPEG-файл хорошо масштабируется в броузере. Плохо передает ровные плоскости цвета, в компрессии уступает GIF-формату. При сохранении в JPEG-формате выбирайте качество "medium".
GIF-формат хорошо передет ровные плоскости цвета, жесткие границы (например, векторную графику, логотипы). Имеет максимальную компрессию, допускает прозрачный фон.
Плохо масштабируется в броузере, искажает цветовые и тоновые раскаты. Используйте GIF-формат, если изображение без значительных потерь переводится в 128-цветовую гамму с включенной опцией "dithering". В противном случае лучше сохранять изображение в JPEG-формате. Для экспорта файла в GIF-формат сначала проиндексируйте его цветовую палитру вAdobePhotoshop: 1. Подбирайте минимальное количество цветов вручную. Если исходное изображение Grayscale, перед индексацией переведите его в RGB-гамму. 2. По возможности избегайте включения опции "dithering"- она увеличивает размер файла. Эта опция необходима только если в изображении присутствует цветовой или тоновой раскат (напр. тень). Назначая прозрачный фон, после применения "dithering" убедитесь что фон не стал "клетчатым". 3. В сложных случаях перед индексированием выделите наиболее важные элементы изображения. Цвета внутри выделенной области индексируются корректнее остальных
38. SEO-оптимизация.Основные направления работы.
Поиско́вая оптимиза́ция (англ. search engine optimization, SEO) — комплекс мер для поднятия позиций сайта в результатах выдачи поисковых систем по определенным запросам пользователей. Обычно, чем выше позиция сайта в результатах поиска, тем больше заинтересованных посетителей переходит на него с поисковых систем.
Основные направ<
