На этой странице:

• Одностраничный документ
  • Простейшая HTML-страничка
  • Структура HTML-кода
  • Как работает браузер
  • Улучшенная HTML-страничка
  • Структура и вид документа
  • Атрибуты тегов
  • Цвет фона и цвет шрифта
  • Оформление текста
  • Кодирование списков
  • Стиль записи кода
• Основы CSS
  • HTML и CSS
  • Стили отдельного элемента
  • Стили отдельного файла
  • Стили сайта и фон элемента
  • CSS-конструирование
  • Позиционирование и z-индекс
• Многостраничный документ
  • Понятие гиперссылки
  • Кодирование переходов
  • Разработка структуры сайта
• Графика
  • Графические Web-форматы
  • Подготовка графики для Web
  • Кодирование картинок
  • Дизайн картинок
• Таблицы
  • Кодирование таблиц

Одностраничный документ

Простейшая HTML-страничка

1. Что такое браузер?
2. Что такое HTML?
3. Кто разработал HTML? Где? В каком году?
4. Приведите примеры объектов документа.
5. При помощи каких конструкций описываются объекты документа на языке HTML?
6. Приведите общий вид записи открывающего тега.
7. Приведите общий вид записи закрывающего тега.
8. Какое назначение имеет имя тега?
9. Для чего служат атрибуты тега?
10. Назовите две формы задания элемента на языке HTML при помощи тегов.
11. В каком регистре нужно записывать имена тегов, имена атрибутов и их значения?
12. Какой символ должен отделять имя тега от списка атрибутов?
13. Каким знаком разделяются между собой атрибуты?
14. Какой символ отделяет имя атрибута от его значения?
15. Можно ли вместо одного пробела-разделителя использовать несколько?
16. Можно ли переносить запись тега в позиции разделителя-пробела на другую строку?

Структура HTML-кода

1. Какой тег должен открывать HTML-программу, а какой закрывать её?
2. Из каких двух частей состоит HTML-программа? Запишите общий вид HTML-программы.
3. Какими тегами задаётся элемент, содержащий головную часть программы? Запишите общий вид головной части HTML-программы.
4. Какими тегами задаётся элемент, содержащий тело программы? Запишите общий вид тела HTML-программы.
5. Какие указания записываются в головной части программы?
6. Для чего нужно указывать кодировку, в которой написана гипертекстовая страница?
7. Что произойдёт, когда браузер будет интерпретировать HTML-код с неверно указанной кодировкой?
8. Как указать кодировку, в которой написана гипертекстовая страница?
9. В каких случаях нельзя указывать кодировку гипертекстовой страницы?
10. Как в HTML-коде задаётся название окна, в котором будет отображаться документ?
11. Почему название окна должно совпадать с заголовком страницы?
12. Для чего используются теги METА c атрибутами description и keywords?
13. Какую роль играют заголовки документа?
14. Каким тегом задаются заголовки?
15. Сколько уровней заголовков поддерживает HTML?
16. Как выделяются заголовки в окне документа?
17. Почему не следует использовать элементы Hn для выделения обычного текста?
18. Каким тегом задаётся горизонтальная линия?
19. Зачем текст разделяется на абзацы?
20. Назовите два приёма, позволяющих зрительно отделить абзацы друг от друга в тексте.
21. Какой приём использует браузер для отделения абзацев друг от друга?
22. Как на HTML задаётся абзац?
23. Что такое элемент уровня блока?
24. Что такое последовательный элемент?
25. Приведите примеры элементов уровня блока.
26. Приведите примеры последовательных элементов.
27. Расскажите алгоритм построения браузером абзаца на экране.
28. Что происходит с элементами на экране, когда пользователь меняет ширину окна документа?
29. Что делает браузер, когда ширина окна уменьшается настолько, что в окне не может целиком уместиться даже одно слово?
30. Как записывать код лесенкой и для чего это нужно?
31. Почему рекомендуется записывать код строчками не длиннее 80 символов?
32. В каком регистре рекомендуется записывать имена тегов, названия атрибутов и их значения? Чем обосновывается эта рекомендация?

Как работает браузер

1. В каком порядке браузер выводит изображения элементов на экран?
2. Почему гипертекстовую страницу нельзя ориентировать на окно фиксированного размера?
3. Если текст абзаца в коде перенесён на новую строку, то будет ли в этом месте он перенесён на новую строку в окне браузера?
4. Когда браузер включает в своем окне горизонтальную прокрутку?
5. Говорят, что гипертекстовые документы являются независимыми от компьютерной платформы и средств видеовывода. Что это означает?

Улучшенная HTML-страничка

1. Текст абзаца в коде записан на 5 строчках. Будет ли этот абзаца на экране браузера также располагаться в 5 строчках?
2. В каких случаях оправдано использование элемента <BR>?
3. В каких случаях использование элемента <BR> не рекомендуется?
4. Почему не рекомендуется записывать на гипертекстовой странице длинные абзацы?
5. Каким ограничением на длину абзаца можно руководствоваться?
6. Приведите примеры парных тегов.
7. Приведите примеры одиночных тегов.
8. Приведите примеры парных тегов, у которых закрывающий тег не является обязательным.
9. Можно ли записывать в головной части HTML-кода элементы, которые отображают на гипертекстовой странице визуальные объекты (текст, графику и т. д.)?
10. Какой элемент в головной части HTML-кода выводит информацию в заголовок окна браузера?
11. Почему заголовок окна должен совпадать с заголовком страницы?
12. Какой элемент служит для вывода заголовков документа?
13. Какой элемент задаёт на экране горизонтальную линию?
14. Каким тегом нужно размечать абзацы?
15. Расскажите алгоритм построения браузером абзаца на экране.
16. Каким образом браузер выделяет на экране текст, записанный в тегах <Hn>...</Hn>?
17. Почему не следует использовать теги <Hn> для выделения обычного текста?
18. Для каких целей используется тег <HR>?

Структура и вид документа

1. С помощью какого элемента можно вывести на экран заголовок документа и как выровнять его в строке?
2. С помощью каких элементов нужно выводить на экран заголовки документа и как выравнивать их в строке?
3. С помощью каких элементов нужно задавать абзацы?
4. Почему не рекомендуется отделять абзацы тегом <BR>?
5. Как нужно разделять текст на абзацы?
6. Почему не рекомендуются длинные абзацы?
7. Почему все абзацы документа рекомендуется выводить с использованием одинаковых приёмов оформления?
8. Какие приёмы оформления можно использовать?
9. Какие цвета текста и фона являются самыми комфортными для чтения?
10. Какой третий цвет можно добавить к основным цветам: чёрному и белому?
11. Как проверить грамматическую правильность текста документа?

Атрибуты тегов

1. Для чего нужны атрибуты тега?
2. Если элемент задаётся парным тегов, то в каком теге записываются атрибуты?
3. Каким символом отделяется список атрибутов от имени тега?
4. Каким символом отделяются атрибуты друг от друга?
5. Приведите пример атрибута, который задаётся одним ключевым словом.
6. Как записываются атрибуты, которые могут иметь разные значения?
7. Приведите пример атрибута с ключевым словом и параметром.
8. В каких случаях значение атрибута можно записывать без прямых (“технических”) кавычек?
9. Какова область действия атрибута?
10. Важен ли порядок следования атрибутов в теге?
11. Какие свойства элементу будет придавать браузер, если для элемента атрибуты не заданы?
12. Каким ещё способом (кроме атрибутов) можно менять свойства элементов?
13. Какое назначение у атрибута style?
14. Укажите возможные атрибуты для элемента HR.
15. Какими атрибутами, и в каком теге можно задать цвет фона и цвет текста?
16. Почему рекомендуется всегда явно указывать цвет фона и шрифта, не полагаясь на режимы умолчания?
17. Каким атрибутом можно задать выравнивание текста в абзаце и заголовке? Какие значения могут быть у этого атрибута?
18. Как, по вашему мнению, поступит браузер, встретив неизвестный ему тег, атрибут или неизвестное значение атрибута?

Цвет фона и цвет шрифта

1. Какими атрибутами, и в каком теге можно задать цвет фона и цвет текста?
2. Почему рекомендуется всегда явно указывать цвета фона и шрифта, не полагаясь на режимы умолчания?
3. Укажите область действия атрибутов указанных в теге <BODY>.
4. Каким образом можно изменить цвет текста в отдельном фрагменте документа?
5. Какие свойства можно задавать при помощи атрибутов тега <FONT>?
6. Почему задавать конкретный шрифт для гипертекстового документа не рекомендуется?
7. Как кодируется цвет по системе RGB?
8. Сколько цветов можно закодировать по системе RGB?
9. Как можно задавать цвет в качестве значения соответствующего атрибута?
10. Перечислите атрибуты, значениями которых является цвет.

Оформление текста

Вопросы дизайна

1. Назовите типографские способы выделения текста.
2. Почему не рекомендуется один и тот же текстовый фрагмент выделять несколькими способами сразу?
3. Назовите исключения из правила “не делать многочисленных выделений одного и того же фрагмента”.
4. Почему не рекомендуется дополнительно выделять гиперссылки?
5. Какой типографский способ выделения текста является самым употребительным?
6. Почему не рекомендуется выделять текстовые фрагменты на страницах сайта цветом и подчёркиванием?
7. Почему не рекомендуется выделять текстовые фрагменты прописными буквами?
8. Какое правило работает при выделении текста в кавычках?
9. Какое правило работает при выделении текста в скобках?
10. Какое правило работает по отношению к знакам препинания, следующим за выделенным фрагментом?
11. Почему не рекомендуется выделять большие массивы текста?
12. Почему важно для выделений использовать теги в соответствии с их логическим назначением?
13. Почему не рекомендуется записывать основной текст страницы с использованием элемента PRE?
14. Почему выравнивание элементов на странице так важно?
15. Назовите четыре способа выравнивания текста по горизонтали.
16. Какой способ выравнивания текста по горизонтали является самым употребительным?
17. Какой недостаток имеет текст с центрированными строчками? В каких случаях можно использовать центрирование текста?
18. Какой недостаток имеет текст со строчками, выровненными справа? В каких случаях можно использовать выравнивание текста по правому краю?
19. Какой недостаток имеет текст со строчками, выровненными по ширине?
20. Какой атрибут можно использовать для выравнивания текста по горизонтали? Перечислите значения этого атрибута. В каких тегах можно использовать этот атрибут?
21. Назовите два способа кодирования специальных символов.
22. Когда в записи текста используется дефис, а когда тире?
23. Как кодируется тире в начале и в середине абзаца?
24. Почему не рекомендуется записывать в качестве кавычек знак дюйма (так называемые “прямые” кавычки)?
25. Какую роль играет неразрывный пробел при кодировании текста?
26. Перечислите типичные случаи использования неразрывного пробела при разметке текста.

Технические вопросы

Опишите средства разметки выделенных фрагментов.

Кодирование списков

1. Что такое список?
2. Что такое маркированный список?
3. Какие виды маркеров предлагает HTML?
4. Что такое нумерованный список?
5. Какие виды нумерации предлагает HTML?
6. Что такое вложенный список?
7. Что такое смешанный список?
8. В каких случаях нужно использовать списки?
9. По какому критерию нужно делать выбор между маркированным и нумерованным списком?
10. Почему не рекомендуется центрировать элементы списков?
11. Какие знаки препинания нужно использовать при записи cписков?

Стиль записи кода

1. Почему важен вид кода программы?
2. Что такое структурная лесенка и как записывать код лесенкой?
3. Почему рекомендуется структурной лесенкой записывать только теги, а большие информационные блоки выравнивать по левой границе окна?
4. Почему рекомендуется записывать название тегов прописными буквами, а названия атрибутов и их значения строчными?
5. Почему рекомендуется не делать в коде длинных строк (более 80 символов)?
6. Почему в записи ссылки на файл важен регистр, в котором эта запись сделана?
7. Почему рекомендуется имена всех файлов гипертекстового проекта записывать в одном регистре?
8. Почему имена файлов гипертекстового проекта рекомендуется записывать в формате 8.3 без русских букв, пробелов и спецсимволов?

Основы CSS

HTML и CSS

1. Кем был придуман HTML? В каком году и где была разработана первая версия?
2. Первая версия предусматривала средства лишь для логической разметки гипертекстового документа. Что это означает?
3. В языке HTML 1.0 были средства только для разметки структуры документа. Как решался вопрос о представлении элементов на устройствах вывода?
4. Какое свойство, заложенное автором в HTML, позволяло сделать гипертекстовые документы независимыми от типа компьютера, операционной системы и устройства вывода?
5. Назовите причину, по которой развитие языка HTML ослабило переносимость гипертекстовых документов на разные компьютеры и платформы, но сделало гипертекстовые страницы более привлекательными.
6. Почему страницы с большим килобайтным весом плохо посещаются в Сети?
7. Назовите негативные стороны дополнения логической части языка HTML физическими тегами, отвечающими за представление информации на устройствах вывода.
8. Почему дизайн сайта, страницы которого написаны на смеси логических и физических тегов, с большим трудом поддаётся модификации?
9. Кто разрабатывал версию HTML 2.0, и в каком году?
10. Когда и кем был разработан язык CSS?
11. Начиная с какой версии HTML стало возможным использовать средства CSS при разработке гипертекстовых страниц? В каком году появилась эта версия HTML?
12. В каком году вышла версия HTML 4.01, завершившая эпоху развития языка HTML?
13. Что представляет собой язык XHTML?
14. Что представляет собой язык XML?
15. Какую задачу решает CSS-код, подключаемый к HTML-коду?
16. Какими тремя способами можно подключать CSS-код к HTML-коду?
17. Почему самым эффективным способом подключения CSS-свойств к страницам сайта является запись CSS-кода в отдельном стилевом файле?
18. Назовите исполнителя CSS-кода.
19. Каким образом браузер узнаёт, что при интерпретации HTML-кода необходимо использовать стилевые указания, помещённые в отдельном CSS-файле?
20. Если указать стилевое свойство в отдельном теге, то будет ли это свойство работать для таких же тегов внутри этого файла?
21. Где нужно записывать стилевые свойства тега, чтобы они работали для всех таких тегов внутри документа?
22. Где нужно записывать стилевые свойства тега, чтобы они работали для всех таких тегов внутри всех документов сайта?

Стили отдельного элемента

1. Для чего предназначен язык CSS?
2. С помощью какого атрибута можно указывать стили для отдельного элемента HTML?
3. Опишите формат стилевого правила.
4. Если стилевое определение содержит несколько правил, то как правила отделяются друг от друга?
5. В каком регистре нужно записывать ключевые слова языка (названия свойств и их значения)?
6. Можно ли использовать в коде пробелы и переходы на новую строку?
7. Ниже приводятся два варианта уменьшения размера шрифта. В первом случае размер шрифта задан в типографских пунктах, во втором — в процентах от текущего размера. Какое стилевое определение вы не стали бы рекомендовать сайтостроителю? Ответ обоснуйте.

Стили отдельного файла

1. Назовите три способа внедрения стилей в HTML-код.
2. На какие элементы распространяется стиль, указанный в открывающем теге элемента?
3. На какие элементы распространяется стиль, указанный для всего файла?
4. На какие элементы распространяется стиль, указанный в отдельном стилевом файле?
5. Одно и то же стилевое правило задано в теге, головной части файла и отдельном стилевом файле (на который имеется ссылка в теге LINK). Которое из правил будет работать?
6. В какой части HTML-кода записываются стилевые определения, относящиеся ко всему файлу?
7. Какой элемент HTML предназначен для стилевых описаний, относящихся ко всему файлу?
8. В каком виде записываются стилевые определения внутри элемента STYLE?
9. Опишите формат записи стилевого определения внутри элемента STYLE.
10. Зачем стилевые описания в элементе STYLE оформляются как комментарий HTML?
11. Что означает принцип наследования стилей?
12. Что понимается под каскадированием стилей?
13. Сформулируйте общее правило каскадирования в терминах общее-частное.
14. Сформулируйте общее правило каскадирования в терминах потомок-родитель.
15. Сформулируйте четыре детальных правила каскадирования.

Стили сайта и фон элемента

1. Почему стили для сайта рекомендуется задавать в отдельном стилевом файле?
2. Какое имя и расширение имени должен иметь файл со стилевыми описаниями?
3. Как браузер узнаёт, что при отображении HTML-кода нужно использовать файл со стилевыми указаниями?
4. Одно и то же стилевое правило задано в теге, головной части файла и отдельном стилевом файле (на который имеется ссылка в теге LINK). Которое из правил будет работать?
5. В каком виде записываются стилевые определения в отдельном файле?
6. Какое стилевое свойство можно использовать для задания цвета фона, фоновой картинки и разных параметров вывода этой картинки?
7. Опишите формат записи свойства background.
8. Как в свойстве background задаётся цвет для фона?
9. Как при помощи свойства background можно запретить перемещение фона при прокрутке элемента?
10. Какие параметры можно использовать для указания режима повторения фоновой картинки?
11. Каким образом можно указывать начальные координаты для вывода фоновой картинки?
12. Как при помощи стилевого свойства background задать ссылку на файл с фоновой картинкой?
13. Как можно задать фоновую картинку для страницы при помощи атрибута тега BODY?
14. Чем отличаются два способа задания фоновой картинки: при помощи стилевого свойства background и атрибута background тега BODY?
15. Какая проблема может возникнуть при построении фонового паркета?
16. Что делать, если по дизайнерскому замыслу страница требует паркетный фон, но текст на нём плохо читается?
17. Какая проблема может возникнуть с фоновой картинкой, которую предполагается повторять на странице только по вертикали?
18. Как можно решить проблему, о которой идёт речь в предыдущем вопросе?
19. Почему необходимо всегда явно задавать на странице цвет фона и цвет текста не полагаясь на режимы умолчания браузера?
20. Почему необходимо задавать цвет фона страницы даже тогда, когда используется фоновая картинка?
21. Почему рекомендуется задавать цвет фона и цвет текста с помощью атрибутов тега BODY даже тогда, когда заданы соответствующие параметры при помощи стилевого свойства background?

CSS-конструирование

1. Чем элемент отличается от тега?
2. Как можно задавать стилевые правила для конкретного элемента?
3. Как можно задавать стилевые правила для всех элементов с одинаковым именем тега?
4. Каким образом можно задавать разные свойства для элементов с одинаковым именем образующего тега?

5. Можно, например, написать определения двух классов с именами pj и pr:

     
   .pj {text-align:justify}
   .pr {text-align:right}
   

   Для связи стилевых классов с элементами используется атрибут class. Для абзацев, которые нужно выравнивать по ширине, теперь нужно записывать <P class=pj>, а для абзацев с ровным правым краем — <P class=pr>.

6. Как связать стилевое свойство, заданное без привязки к тегу, с конкретным тегом?
7. Как задать стилевое определение, которое будет работать только при определенной комбинации вложенности элементов?
8. Чем отличается элемент уровня блока от последовательного элемента?
9. Каким образом элементы DIV и SPAN отображаются на экране?
10. Какую роль играют в языке CSS элементы DIV и SPAN?
11. Чем элемент DIV отличается от элемента SPAN?
12. Каким образом в языке CSS записываются комментарии?

Позиционирование и z-индекс

1. Что такое позиционирование?
2. При помощи какого свойства можно задавать позиционирование?
3. Какие виды позиционирования предлагает CSS?
4. Почему при использовании позиционирования важно представлять иерархическую структуру элементов на гипертекстовой странице?
5. Какие значения имеются у свойства position и что они означают?
6. Какие свойства позволяют управлять координатами элементов при их позиционировании?
7. Как работает свойство z-index, и какие у него могут быть значения?
8. Как работает свойство float, и какие у него могут быть значения?
9. Как работает свойство clear, и какие у него могут быть значения?

Многостраничный документ

Понятие гиперссылки

1. В чём главное отличие гипертекста от обычного текста?
2. Для какой цели был разработан язык HTML и созданы браузеры?
3. Кто впервые высказал идею машины, которая могла бы по специально закодированным в документе ссылкам автоматически выполнять переходы — предъявлять пользователю документы, на которые настроены ссылки? В каком году была опубликована эта идея?
4. Опишите устройство машины Memex. На какие носители информации была ориентирована машина Memex, и какое устройство предполагалось использовать в качестве средства навигации по ссылкам?
5. Кем был придуман термин “гипертекст”? В каком году этот термин появился в печати? В связи с описанием какой системы, возник этот термин?
6. Кто и в каком году продемонстрировал первую работающую гипертекстовую систему?
7. Какие изобретения были сделаны при работе над гипертекстовой системой NLS?
8. Кто придумал язык SGML и в каком году этот язык получил официальный статус?
9. Что представляет собой язык SGML, для каких целей он был разработан?
10. Кто изобрёл Всемирную паутину (Web-пространство Интернета) и является автором языка HTML? В каких годах появились эти изобретения?
11. Как ведёт себя курсор мыши на гипертекстовой ссылке?
12. Как выделяются гипертекстовые ссылки среди других элементов гипертекстовой страницы?
13. Какие действия нужно выполнить, чтобы загрузить документ, на который настроена гипертекстовая ссылка?
14. Какие кнопки браузера можно использовать для перемещения по маршруту, пройденного по гипертекстовым ссылкам?
15. Чем гиперссылка на другой документ отличается от ссылки на другую часть текущего документа?

Кодирование переходов

1. Что такое идентификатор элемента и для чего он нужен?
2. Как назначить элементу идентификатор?
3. Из каких символов может состоять идентификатор?
4. Как использовать идентификатор для построения стилевого определения?
5. Вася записал стилевое определение:

   #el {color:red}
   

   В HTML-коде Вася так использовал своё определение:
   Какую ошибку допустил Вася?
6. Опишите элемент, который кодирует гипертекстовую ссылку. Как этот элемент отображается на экране и что должен сделать пользователь, чтобы выполнить гипертекстовый переход?
7. Запишите гипертекстовый переход на начало следующий фрагмента HTML-кода:

8. Запишите гипертекстовый переход на начало документа 01.htm, который находится в том же каталоге, что и файл со ссылкой.
9. Запишите гипертекстовый переход на элемент с идентификатором p в файле 01.htm, расположенный в том же каталоге, что и файл со ссылкой.
10. Запишите гипертекстовые переходы.

    

    №	Из файла	В файл	На элемент	Ссылка
    01	index.htm	01.htm	<BODY>	?
    02	index.htm	02.htm	<P id=nb>	?
    03	index.htm	01add.htm	<BODY>	?
    04	02.htm	index.htm	<P id=nb>	?
    05	01add.htm	index.htm	<BODY>	?
    06	01add.htm	0201.htm	<BODY>	?
    07	02.htm	0201.htm	<P id=nb>	?
    08	01.htm	0201.htm	<BODY>	?

11. Какой атрибут элемента BODY задаёт цвет неотработанной ссылки?
12. Какой атрибут элемента BODY задаёт цвет активной ссылки?
13. Какой атрибут элемента BODY задаёт цвет отработанной ссылки?
14. Почему важно, чтобы неотработанные, активные и отработанные ссылки были разных цветов?
15. Какими рекомендации существуют по выбору цветов для ссылок? Чем обосновываются эти рекомендации?
16. Почему не рекомендуется выделять элементы подчёркиванием и цветом?
17. Почему не рекомендуется помечать как ссылку большой текст?
18. Почему не рекомендуется выделять ссылки курсивом, жирностью, размером, разрядкой?
19. Почему не следует записывать подряд несколько ссылок?
20. В гипертекстовом горизонтальном меню ссылки записываются подряд. Не противоречит такая запись рекомендации предыдущего вопроса?
21. С помощью какого псевдокласса можно задавать стиль неотработанной ссылки?
22. С помощью какого псевдокласса можно задавать стиль активной ссылки?
23. С помощью какого псевдокласса можно задавать стиль отработанной ссылки?
24. С помощью какого псевдокласса можно задавать стиль ссылки, в момент расположения над ней курсора?
25. Приведите формулу, по которой записываются ссылки на ресурсы Интернета.
26. Запишите ссылку на картинку pic.jpg, которая располагается на ftp-сервере с адресом ftp.botik.ru в каталоге pub.
27. Запишите ссылку на документ products.htm, который расположен в каталоге news/products/ сайта www.canon.ru.
28. Запишите ссылку, по которой можно будет создать электронное письмо с адресом zebra@microsoft.com.

Разработка структуры сайта

1. В каком случае структуру сайта можно признать удачной?
2. Как представляет структуру сайта разработчик?
3. Как представляет структуру сайта пользователь?

4. Почему фрагмент структуры школьного сайта, представленный ниже является неудачным.

   • Учителя
     • Расписание уроков
   • Ученики
     • Расписание факультативов
5. Как можно исправить структуру, приведённую в предыдущем вопросе. Приведите доказательство правильности предложенного варианта.
6. Назовите три базовых структуры, которые наиболее часто используют для построения структуры сайта.
7. Приведите пример многостраничного документа, для которого хорошо подходит линейная структура организации страниц.
8. Приведите пример многостраничного документа, для которого хорошо подходит иерархическая структура организации страниц.
9. В каких случаях рекомендуется использовать для сайта табличную структуру? Приведите пример многостраничного документа, для которого хорошо подходит табличная структура организации страниц.
10. Назовите постоянные элементы сайта, которые должны присутствовать на каждой его странице.
11. Каким визуальным свойством должны обладать постоянные элементы сайта?
12. Каким интерфейсным свойством должен обладать логотип сайта?
13. Где должен располагаться заголовок страницы и как он должен быть связан с заголовком окна?
14. Должен ли присутствовать в меню пункт, относящийся к текущей страницы и должен ли этот пункт быть ссылкой?
15. Почему не рекомендуется один пункт меню записывать в несколько строчек?
16. Почему меню рекомендуется повторять на концах страниц?
17. Что такое “хлебные крошки“ и когда рекомендуется использовать на сайте это средство? В каком месте на странице должны располагаться “хлебные крошки“?
18. Почему на каждой странице сайта рекомендуется оставлять авторскую подпись? В каком виде должна быть выполнена авторская подпись и где она должна располагаться на странице?
19. Что рекомендуется размещать на главной странице сайта?
20. Зачем на сайте нужны внешние ссылки?
21. В каком месте сайта нужно располагать внешние ссылки?
22. Почему внешние ссылки рекомендуется записывать в явном виде?
23. Почему внешние ссылки рекомендуется помещать с комментариями?
24. Почему текст на сайте рекомендуется разбивать на небольшие абзацы?
25. Почему рекомендуется абзацы отделять друг от друга пустыми строками?
26. Почему не рекомендуется центрировать строки основного текста?
27. Как следует поступить, если необходимо вывести текст поверх фона, на котором он плохо читается?
28. Почему нельзя фиксировать размер шрифта?
29. Как вы думаете, для каких элементов сайта допустим шрифт фиксированного размера?
30. Почему не рекомендуется записывать основной текст шрифтом увеличенного размера, выделять его жирностью, курсивом и другими способами?
31. Почему рекомендуется использовать на сайте шрифт по умолчанию?
32. Каким безопасным способом можно задать на сайте рубленый шрифт?
33. Почему текст на сайте нужно структурировать, и какими средствами HTML это можно сделать?
34. Что такое принцип перевёрнутой пирамиды и почему рекомендуется пользоваться этим принципом при подготовке текста для сайта?

Графика

Графические Web-форматы

1. Что входит в “объём гипертекстовой страницы”?
2. Почему разработчики стараются уменьшить объём страниц своего сайта?
3. Почему килобайтный размер картинок, предназначенных для Web стараются уменьшить?
4. Каким образом можно уменьшить килобайтный размер картинок?
5. Какие графические форматы популярны в Web?
6. Как устроен файл с рисунком в формате GIF?
7. Сжимается ли графическая информация при сохранении рисунка в формате GIF?
8. Какое максимальное количество цветов рисунка можно сохранить в формате GIF?
9. Происходит ли потеря качества рисунка при его сохранении в формате GIF?
10. Каким образом можно уменьшить размер графического файла, сохраняя изображение в формате GIF?
11. Как устроен и работает анимированный GIF?
12. Почему не рекомендуется помещать на страницах информационного сайта непрерывно работающую анимацию?
13. Что такое прозрачный GIF, и для каких целей он используется?
14. Как работает чересстрочный GIF?
15. Для каких иллюстраций формат GIF подходит наилучшим образом?
16. Сколько цветов способен сохранить формат JPEG?
17. Как устроен файл с рисунком в формате JPEG?
18. Чем отличается JPEG-сжатие от GIF-сжатия?
19. Что такое прогрессивный JPEG?
20. Можно ли при сохранении графики в формате JPEG указывать прозрачные цвета?
21. Можно ли в формате JPEG записывать множественные картинки, образующие кадры мультипликации?
22. Для каких иллюстраций формат JPEG подходит наилучшим образом?
23. Сколько цветов способен сохранить формат PNG?
24. В чем сходство PNG-сжатие и GIF-сжатия?
25. В чем различие PNG-сжатие от JPEG-сжатия?
26. Когда PNG-формат работает лучше GIF-формата?
27. Когда PNG-формат работает хуже GIF-формата?
28. Когда формат PNG предпочтительнее формата JPEG?
29. Когда формат JPEG предпочтительнее формата PNG?
30. Поддерживает ли PNG чересстрочную развёртку?
31. Можно ли при сохранении графики в формате PNG указывать прозрачные цвета?
32. Для каких Web-иллюстраций формат PNG подходит наилучшим образом?

Подготовка графики для Web

1. Как выполнить кадрирование фотографии?
2. Как скорректировать тон фотографии при помощи инструмента Levels (Уровни)?
3. Как уменьшить размер фотографии?
4. Как сделать рамку для иллюстрации?
5. Как добавить тень на картинку?
6. В каком формате можно сохранить фотографию без потери качества?
7. Как уменьшить килобайтный объём иллюстрации (провести оптимизацию соотношения объём/качество)?
8. Почему рисунок в растровом редакторе нужно конструировать сразу в том геометрическом размере, в котором он должен помещаться на сайт?
9. Почему в векторном редакторе можно конструировать рисунок в любом геометрическом размере?
10. Как можно рисунок, подготовленный в векторном редакторе, разместить на сайте, ведь браузеры “понимают” только растровые форматы GIF, JPEG, PNG?
11. Что такое антиалиасинг? Зачем нужно включать режим антиалиасинга в графическом редакторе?
12. Что такое “неверный антиалиасинг”? Как добиться правильного антиалиасинга?
13. Какими правилами нужно руководствоваться, создавая графический заголовок для сайта?
14. Какими правилами нужно руководствоваться создавая графический логотип для сайта?
15. Как подготовить фоновую полоску для сайта?
16. Как вывести фоновую полоску в окно браузера?

Кодирование картинок

1. Элемент IMG последовательный. Что это означает?
2. Можно ли последовательный элемент выводить как блок?
3. Где расположен файл с картинкой, если иллюстрация задана на странице следующим образом:

   1. <IMG src="img.gif"> 
      

   2. <IMG src="./pic/img.gif"> 
      

   3. <IMG src="../pic/img.gif"> 
      

   4. <IMG src="c:/sidorov/pic/img.gif"> 
      

      Почему такие адреса не нужно использовать?
      
      

   5. <IMG src="http://www.botik.ru/~robot/pic/rulogo.gif"> 
      

4. Объясните работу атрибутов alt и title. Почему атрибут alt необходимо использовать для всех картинок?
5. Какие по содержанию тексты надо записывать в качестве значений атрибутов alt и title?
6. Как записать альтернативный текст для картинки, которая задаёт:
   • декоративную графику;
   • пустую картинку-распорку;
   • рисованный заголовок;
   • маркер списка;
   • горизонтальную линию;
   • навигационную кнопку.
7. Что нужно записывать в качестве значений атрибутов width и height элемента IMG?
8. Почему рекомендуется всегда записывать атрибуты width и height для элемента IMG?
9. Каким атрибутом можно задать рамку для иллюстрации? Почему не следует использовать толстые рамки?
10. Какими атрибутами задаются горизонтальные и вертикальные отступы от картинки?
11. Как можно задать отступ от картинки только с одной стороны, например, справа, выравнивая её по левому краю текста?
12. Отступ какой величины рекомендуется использовать для отделения элементов гипертекстовой страницы?
13. При помощи какого атрибута можно задать выравнивание картинки по отношению к другим элементам страницы? Назовите основные значения этого атрибута.
14. Что происходит с другими элементами страницы, если картинка выровнена по левому (правому) краю?
15. Как прекратить обтекание картинки?
16. Как выровнять картинку по горизонтали без обтекания её другими элементами?
17. Как превратить картинку в гипертекстовую ссылку?
18. Как убрать рамочку у картинки-ссылки?
19. Что такое “хвостатая” ссылка и как избавиться от “хвоста”?

Дизайн картинок

1. В каких случаях для иллюстрации нужна рамка, а в каких нет?
2. Назовите способы, при помощи которых можно получить рамку для иллюстрации на гипертекстовой странице.
3. Зачем нужна подрисуночная надпись?
4. Какими способами можно задать обтекание рисунка?
5. Какими способами можно прекратить обтекание рисунка?
6. По каким причинам может оказаться выгодно разрезать Web-картинку на части?
7. Как добиться плотного прилегания частей картинок друг к другу?
8. Как запретить браузеру переносить части картинок на следующую строку в узких окнах?
9. Как вывести на экран картинку, части которой составляют несколько горизонтальных рядов?
10. Что такое гипертекстовая карта?
11. В каких случаях удобно использовать гипертекстовую карту?
12. В каких случаях использовать гипертекстовую карту не рекомендуется?
13. Как кодируется гипертекстовая карта?
14. Области какой формы можно задавать на гипертекстовой карте?
15. Как подготовить гипертекстовую карту, разрезать изображение на части?

Таблицы

Кодирование таблиц

1. Расскажите, как устроена таблица.
2. Запишите общую структуру кода, задающего таблицу.
3. Объясните назначение атрибутов элемента TABLE и укажите их значения по умолчанию.

   Атрибут	Значение	Описание
   align	left, right, center	?
   width	Число или процент	?
   height	Число или процент	?
   cellpadding	Число	?
   cellspacing	Число	?
   bgcolor	Цвет	?
   background	URL файла	?
   border	Число	?
   bordercolor	Цвет	?

4. Объясните назначение атрибутов элемента TR и укажите их значения по умолчанию.

   Атрибут	Значение	Описание
   align	left, right, center	?
   valign	top, middle, bottom	?
   bgcolor	Цвет	?

5. Объясните назначение атрибутов элемента TD (TH) и укажите их значения по умолчанию.

   Атрибут	Значение	Описание
   align	left, right, center	?
   valign	top, middle, bottom	?
   width	Число или процент	?
   height	Число или процент	?
   bgcolor	Цвет	?
   background	URL файла	?
   nowrap		?
   colspan	Число	?
   rowspan	Число	?

6. Чем отличается обычная ячейка, заданная элементом TD от ячейки-заголовка, заданной элементом TH?
7. Как заставить объекты обтекать таблицу, используя табличные атрибуты?
8. Как заставить объекты обтекать таблицу, используя стилевые свойства?
9. Как прервать обтекание таблицы?
10. Как выровнять таблицу на странице без обтекания?
11. Как задать размеры таблицы и (или) отдельной ячейки? Что произойдёт, если размер содержимого больше заданных размеров? Заданный размер больше размеров текущего окна?
12. Как задать свободное пространство между содержимым и границами ячеек?
13. Как задать свободное пространство между ячейками таблицы?
14. Можно ли в каждой ячейке таблицы задать свой собственный фон?
15. Как браузер форматирует текст внутри табличной ячейки?
16. Как запретить браузеру автоматические переносы строк текста в ячейке?
17. Как объединить несколько ячеек по горизонтали в одну ячейку?
18. Как объединить несколько ячеек по вертикали в одну ячейку?
19. Как задать заголовок таблицы?