В главе использованы материалы [CAST].
1. Создайте каталог в которой будут находиться все файлы сайта (в операционной системе Windows): выберите диск C:, выберите папку Мои документы, выберите Файл, Создать, Папка, введите gord_site (где вместо gord введите свой логин).
2. Создайте каталог в которой будут находиться все файлы сайта (в операционной системе Linux): в среде KDE выберите /home/student/, выберите Документы, МП, Создать папку, введите имя gord_site (где вместо gord введите свой логин).
3. Создайте файл в формате HTML (в операционной системе Windows): выберите Блокнот, выберите Файл, Сохранить как, в списке Тип файла выберите Обычный текст, в поле Имя файла введите okna.htm (используйте только прописные буквы, не употребляйте пробелы или какие-либо знаки пунктуации, кроме знака подчеркивания), нажмите Сохранить.
4. Создайте файл в формате HTML (Linux): выберите каталог gord_site, М2, МП, Создать текстовый файл, введите имя okna.htm (используйте только прописные буквы, не употребляйте пробелы или какие-либо знаки пунктуации, кроме знака подчеркивания), нажмите Сохранить.
5. Настройте редактор (Linux): выберите редактор KWrite, выберите Настройка, Настроить редактор, выберите Открытие/Сохранение, в списке Кодировка выберите Кириллица (cp 1251), нажмите Ладно.
6. Создайте web-страницу: откройте okna.htm и введите код на языке XHTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Коллекция окон</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> </head> <body> </body> </html>
Что в 1-й строке? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> В теге <DOCTYPE> определен DTD (document type definition - определение типа документа), который задает список элементов и атрибутов, определяющих тип документа и разрешенных в данной версии XML-документа. DTD может присутствовать в том же файле, что и документ, либо содержатся в отдельном DTD-файле.
Что во 2-й строке? <html xmlns="http://www.w3.org/1999/xhtml"> Открывающий тег <html>, обязательный для всех HTML-документов. Его отличие в том, что он содержит атрибут xmlns (XML Name Space - пространство имен языка XML). В этом параметре указывается источник всех тегов. В XML этот параметр необходим, поскольку существует вероятность того, что два языка на основе XML будут использовать один и тот же тег. Если по умолчанию указано пространство имен, то программа, отображающая документ (в данном случае веб-браузер), способна устранить подобные конфликты.
Далее идет заголовочная часть между тегами <head> и </head>.
Затем основная часть между тегами <body> и </body>.
И в конце тег </html>.
Что есть XHTML и чем он отличается от HTML? Стандарт XHTML был разработан, чтобы заменить HTML, - таким образом, отношения между двумя стандартами носят исторический характер. Это принципиально новый подход, который позволяет привести HTML в соответствие языку XML (eXtensible Markup Language - расширяемый язык разметки). XML является мета-языком, то есть набором правил, которые позволяют разрабатывать новые языки, не выходя за рамки общего стандарта. XML - это язык разметки, такой же, как и HTML, - так что их синтаксис очень похож. Пример фрагмента XML-кода: <authornametype="first">Александр</authorname>. Существуют различные вариации XML, например, MathML, язык разметки, используемый математиками для записи математических выражений. XHTML - это вариация языка, которая применяется разработчиками для разметки веб-страниц.
Один из основных принципов спецификации XML заключается в том, что теги описывают содержимое документа, а не его внешний вид. Внешний вид страниц, выполненных в формате XML, определяется отдельным типом кода (например, CSS, XSLT или XSL-FO).
Если говорить кратко, XHTML применяется для описания логической структуры документа: заголовков разного уровня (<h1>, <h2> и т. д.), списков (<ol>, <ul>, <li>), текста в теле документа (<p>), выделяемого текста (<strong>, <em>), ссылок (<a>) и т. п. Для указания правил, по которым браузеры должны отображать информацию, вместо тегов внешнего вида (таких как <font>или <b>) используются каскадные таблицы стилей CSS.
XHTML в основном подобен HTML. Многие теги остались точно такими же:<body>, <head>, <h1>, <p>, <ol>, <a>, <table>, <tr>, <td>, <form> и другие. Фактически, при переходе к XHTML большая часть HTML-кода остается неизменной. Это значительно сокращает необходимое количество изменений.
Но XHTML имеет и ряд отличий от HTML. В последующих упражнениях эти различия будут найдены и соответствующим образом изменены. Вследствие обязательного разделения логической разметки страниц от их внешнего вида, о чем говорилось выше, важно выделить следующие различия:
все теги XHTML и их атрибуты записываются в нижнем регистре. В HTML теги <p> и <P> допустимы в равной степени, и многие разработчики использовали верхний регистр, поскольку это позволяло выделять теги на фоне остального кода. Но язык XHTML построен на основе правил XML, согласно которым все теги должны записываться в нижнем регистре, так что здесь допустим только тег <p>. Атрибуты тегов, например атрибут cellpadding="3" тега <table>, тоже вводится в нижнем регистре;
все XHTML-теги должны быть закрытыми. Например, если на странице применяется тег <h1>, где-то должен быть и закрывающий тег </h1>. Однако у некоторых элементов нет закрывающих тегов. В частности, к таким пустым тегам относятся теги <br>, <img src="xyz.gif">, <hr> и <input>. Помимо этого, в HTML такие теги, как <p> и <li>, могли быть как закрытыми, так и пустыми. В XHTML они должны быть парными, то есть иметь закрывающие теги, в частности, </p> и </li>. Пустые теги закрываются особым образом при помощи следующего синтаксиса: <пустой_тег />. Следовательно, приведенные выше пустые теги должны быть преобразованы таким образом: <br />, <img src="xyz.gif" />, <hr /> и <input />. Пробел и обратная косая черта (обратный слэш) заменяют закрывающий тег;
поскольку существует множество различных версий HTML, разработчики в коде страниц указывают тип документа. Например, Dreamweaver в верхнюю строку большинства документов добавляет следующий код: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">. Эта строка сообщает браузерам о том, какая версия кода (Модификация Transitional стандарта HTML 4.01) и какой язык (скажем, английский) используются в документе. В XHTML применяется другая форма объявления типа документа. Помимо этого, поскольку XHTML соответствует стандартам XML, документ должен содержать и объявление XML;
как говорилось ранее, теги физического форматирования отменены. Вместо этого для управления внешним видом применяются каскадные таблицы стилей.
7. Просмотрите страницу в браузере: выберите Firefox, выберите Файл | Открыть файл, выберите файл okna.htm
8. В каталоге gord_site создайте файл gord_styles.css таблицы стилей: см. 3 или 4.
9. Подключите таблицу стилей: введите в okna.htm следующую строку с тегом link, который может быть помещен в любое место между открывающим и закрывающим тегом head:
<link rel="stylesheet" type="text/css" href="gord_styles.css"/>
Правило каскадных таблиц стилей начинается с указания элементов, которые вы форматируете (например, body) и фигурных скобок, в которых заключается информация о стилях элементов. Сама инструкция по форматированию представляют собой пары в виде параметра (например, background) и значения (например, #edf2ff, так в CSS задается оттенок синего цвета).
10. Создайте цвет фона: откройте файл gord_styles.css и введите код CSS:
body {background: #edf2ff}
11. Просмотрите страницу в браузере: в окне Firefox выберите Файл, Открыть файл, выберите файл okna.htm, должен появиться голубой фон.
12. Существуют заголовки шести уровней: начиная с h1 и заканчивая h6. Добавьте в okna.htm после тега <body> такую строку:
<h1>Коллекция окон</h1>
13. Просмотрите страницу okna.htm в браузере: см. 11.
Браузеры воспринимают заголовок h1 как текст написанный 24 кеглем шрифтом Times черного цвета, и оставляют большие отступы сверху и снизу от заголовка.
Некоторые из параметров CSS являются наследуемыми (inherited). Это например, font-family. Это означает, что они влияют не только на элементы, к которым они применяются (body). Но также на элементы, содержащиеся в данном элементы (h1). Параметр font - family позволяет устанавливать предпочтительные шрифты для отображения данных элементов. Если первый шрифт окажется недоступным на компьютере посетителя, будет совершена попытка использовать второй шрифт и так далее.
14. Установите шрифт: откройте файл gord_styles.css и введите код:
body {background: #EDF2FF;font-family: Verdana, Arial, Helvetica,sans-serif}
15. Измените цвет текста: откройте файл gord_styles.css и введите выделенный код:
body {background: #EDF2FF;font-family: Verdana, Arial,
Helvetica,sans-serif;color:#4D65A0}
16. Просмотрите страницу okna.htm в браузере: см. 11.
17. В файле okna.htm создайте абзац после тега </h1>:
<p>На открытках представлены снятые крупным планом яркие и красочные образцы окон из Енисейска и Красноярска.</p>
18. Просмотрите страницу okna.htm в браузере: см. 11. Текст абзаца унаследует синий цвет и шрифт от body, также как это было в заголовочной части.
Заголовок смотрится лучше, если он расположен близко к абзацу. Параметр margin отвечает за пространство, оставленное между элементами. Для того, чтобы поместить заголовок непосредственно перед абзацем, следующим за ним, установите отступы равным 0. Для того, чтобы сохранять определенное расстояние между абзацами, установите отступ 12.
19. Установите расстояние между элементами: откройте файл gord_styles.css и введите код:
h1 {margin:0}
p {margin-top:0; margin-bottom:12px}
21. Скопируйте в свой каталог gord_website графические файлы (header_logo.gif, curly.jpg, leftcurls.jpg, okno_1.jpg, okno_2.jpg) и каталог little .
Элемент img используется для добавления изображений на страницу. При помощи атрибута src можно указать имя и местонахождение графического файла. Атрибут alt появится в том случае, если изображение не загрузится.
22. Добавьте фотографию на страницу: откройте okna.htm и после тега </p> введите код:
<img src="okno_1.jpg" alt="Окно в Енисейске" width="94" height="150"/>
23. Просмотрите страницу okna.htm в браузере: см. 11.
Всплывающая подсказка появляется в тот момент, когда указатель мыши находится на изображении. Она автоматически исчезает через несколько секунд, поэтому текст должен быть коротким, чтобы бы его можно было прочесть за короткое время.
24. Для того, чтобы создать всплывающую подсказку откройте okna.htm и введите выделенный код атрибута title:
<img src="okno_1.jpg" alt="Окно в Енисейске"
width="94" height="150” title="Енисейские окна: 10 открыток для записей - 50 руб., 10 почтовых открыток - 40 руб." />
25. Просмотрите страницу okna.htm в браузере: см. 11.
Существует шесть уровней заголовков. Заголовки автоматически начинаются с новой строки. Браузеры автоматически делают заголовки больше и жирнее, чем обычный текст, причем для каждого следующего заголовка меньшего уровня применяется меньший шрифт.
26. Добавьте подзаголовок: откройте okna.htm и после тега <img> введите:
<h2>Енисейские окна</h2>
27. Коды специальных символов называемые подстановкой начинаются с амперсанда & и заканчиваются точкой с запятой. Откройте файл okna.htm и введите:
<h2>“Енисейские окна” </h2>
28. Просмотрите страницу okna.htm в браузере: см. 11.
29. Каждый новый абзац начинается с новой строки под заголовком. У него будет тот же формат, что у первого абзаца. Добавьте абзац: откройте okna.htm и после тега </h2> введите:
<p> На Юге и востоке главное в доме - дверь. Окон мало и днем они, как правило,закрыты от жары и солнца. В северной стране России окно стало внешним украшением жилища. Фотограф видит окна снаружи. Как художник он не мог обойти вниманием аккуратное окошко, где наличники гармонично сочетаются с тюлевыми занавесками и комнатными цветами на подоконнике. </p>
30. Измените размер шрифта. Для этого используйте параметр font-size. Параметр line-height задает пространство между строками. Откройте gord_styles.css и введите выделенный код:
p {margin-top:0; margin-bottom:12px; font-size:12px; line-height:1.2}
31. Просмотрите страницу okna.htm в браузере. Все абзацы изменились. Заголовки остались прежними.
32. Параметр float представляет изображение в виде острова, который окружает текст и другие элементы, как вода. Разместите изображение с одной стороны: откройте gord_styles.css и введите код:
img {float:left}
33. Просмотрите страницу okna.htm в браузере: см. 11.
34. Для привлекательности текста сделайте его распложенным не вплотную к фотографии. Для этого добавьте отступ в 10 пикселей с правой стороны от сдвинутых влево изображений: откройте gord_styles.css и введите выделенный код:
img {float:left; padding-right:10px}
35. Просмотрите страницу okna.htm в браузере: см. 11.
36. Установите для заголовков 2 уровня нулевой отступ: откройте gord_styles.css и введите выделенный код:
h1, h2 {margin:0}
37. Просмотрите страницу okna.htm в браузере: см. 11.
38. Чтобы заголовки только 2 уровня имели границу, мы создаем новое правило только для h2. Параметр border имеет три атрибута: ширина (1px), стиль (solid) и цвет. Создайте границу: откройте gord_styles.css и введите код:
h2 {border-top: 1px solid #4D65A0}
39. Просмотрите страницу okna.htm в браузере: см. 11.
40. Создайте новый вид абзаца для размещения информации и продаже открыток. Для этого потребуется атрибут class, чтобы обозначить нужные абзацы. Откройте okna.htm и после цветами на подоконнике . </p> введите:
<p class="sales_info">Номер изделия: 7845-C</p>
41. Изменим параметры форматирования абзацев для продаж. Точка после p говорит о том, что данное правило применяется к тем элементам p для которых атрибут class равен sales_info. Откройте gord_styles.cssи введите код:
p.sales_info {font-style:italic}
42. Просмотрите страницу okna.htm в браузере: см.11.
43. Для того чтобы перейти на следующую строку, нужно поставить тег <br /> в нужное место. Между выражением br и прямым слешем ставится пробел. Откройте okna.htm и введите:
</p> <p class="sales_info">Номер изделия: 7845-C <br />10 открыток для записей - 50 руб., <br />10 почтовых открыток - 40 руб. </p>
44. Просмотрите страницу okna.htm в браузере: см. 11.
Чтобы отобразить небольшой фрагмент текста курсивом следует использовать тег <i> . Для текста большого объема нужно применять параметр font-style. Для выделения части текста жирным начертанием следует заключить его в теги <b>. Для текста большого объема нужно применять параметр font-weight.
45. Откройте okna.htm и введите:
<p> На открытках в разделе <i>Коллекция окон</i> представлены снятые крупным планом яркие и красочные образцы окон из Енисейска и Красноярска. </p> <br />10 открыток для записей - <b>50 руб.</b>, <br />10 почтовых открыток - <b>40 руб</b>.
46. Просмотрите страницу okna.htm в браузере: см. 11.
47. Разбейте страницу на структурные элементы посредством элементов div и затем отформатировать эти блоки как отдельные единицы. Откройте okna.htm и введите выделенный код:
<div class="intro"> <h1>Коллекция окон</h1><p>На открытках в разделе <i>Коллекция окон</i> представлены снятые крупным планом яркие и красочные образцы окон из Енисейска и Красноярска.</p> </div> <div class="postcard"> <img src="okno_1.jpg" alt="Окно в Енисейске" width="94" height="150" title="Енисейские окна: 10 открыток для записей - 50 руб., 10 почтовых открыток - 40 руб." /> <h2>“Енисейские окна”</h2> <p>На Юге и востоке главное в доме - дверь. Окон мало и днем они, как правило, закрыты от жары и солнца. В северной стране России окно стало внешним украшением жилища. Фотограф видит окна снаружи. Как художник он не мог обойти вниманием аккуратное окошко, где наличники гармонично сочетаются с тюлевыми занавесками и комнатными цветами на подоконнике.</p> <p class="sales_info">Номер изделия: 7845-C <br />10 открыток для записей - <b>50 руб.</b>, <br />10 почтовых открыток - <b>40 руб</b>.</p> </div>.
48. Просмотрите страницу okna.htm в браузере: см. 11.
49. Применим таблицы стилей к целому блоку. Добавляем отступ в 15 пикселей со всех сторон блока атрибут class которого равен postcard: откройте gord_styles.css и введите код:
div.postcard {padding:15px}
50. Установите для элементов div параметра clear значение both, так чтобы новый блок класса postcard не начинался до тех пор, пока слева и справа стоят сдвигаемые элементы и не закончится изображение предыдущей открытки. Сделайте обтекание: откройте файл gord_styles.css и введите:
div {clear:both}
51. Добавьте еще одну открытку. Новый блок состоит из тех элементов, что и предыдущий: изображение с заглавием, потом заголовок 2 уровня, абзац, и информация о продажах. Откройте okna.htm и после тега </div> введите:
<div class="postcard"> <img src="okno_2.jpg" alt="Еще окно в Енисейске" width="97" height="150" title="Енисейские окна: 10 открыток для записей - 50 руб., 10 почтовых открыток - 40 руб." /> <h2>“Другие енисейские окна”</h2><p> По окнам в России легко составить представление о жизни обитателей дома. </p> <p class="sales_info">Номер изделия: 7845-C <br />10 открыток для записей - <b>50 руб.</b>, <br />10 почтовых открыток - <b>40 руб</b>. </p></div>
52. Просмотрите страницу okna.htm в браузере: см. 11.
53. Разделим изображения на два класса: четные (odd) и нечетные (even). Откройте okna.htm и введите выделенный код:
<div class="postcard"> <img src="okno_1.jpg" class="odd" alt="Окно в Енисейске" width="94" height="150" title="Енисейские окна: 10 открыток для записей - 50 руб., 10 почтовых открыток - 40 руб." /> <div class="postcard"> <img src="okno_2.jpg" class="even" alt="Еще окно в Енисейске" width="97" height="150" title="Енисейские окна: 10 открыток для записей - 50 руб., 10 почтовых открыток - 40 руб." />
54. Добавляем второе стилевое правило: откройте gord_styles.css и введите:
img.odd {float:left; padding-right:10px}
img.even {float:right; padding-left:10px}
55. Просмотрите страницу okna.htm в браузере: см. 11.
56. Создайте текстовый файл index.htm: см . 3 или 4.
57. Создайте главную страницу: откройте index.htm и введите код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Машины открытки</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> </head> <body> </body> </html>
Определите структуру. Содержание страницы обычно заключается в теги body. Наша body будет разбито на два основных блока: центральную область (main) и навигационную панель (nav_bar).
58. Откройте index.htm и после тега <body> введите:
<div class="main"> </div> <div class="nav_bar"> </div>
59. Подключите таблицу стилей: откройте index.htm и после charset=windows-1251" /> введите:
<link rel="stylesheet" type="text/css" href="gord_styles.css"/>
60. Просмотрите страницу index.htm в браузере: см. 11.
61. Создайте файл таблицы стилей home.css: см. 3 или 4.
62. Подключите новый файл таблиц стилей. Порядок подключения таблиц очень важен. Таблица подключенная позже имеет приоритет перед ранними таблицами стилей. Откройте index.htm и после href="gord_styles.css"/> введите:
<link rel="stylesheet" type="text/css" href="home.css"/>
63. Добавьте изображение: откройте home.css и введите:
body {background: url(curly.jpg)}
64. Просмотрите страницу index.htm в браузере: см. 11.
65. Добавьте логотип: откройте index.htm и после <div class="main"> введите:
<p><img src="header_logo.gif" alt="Машины открытки" width="445" height="77" /></p>
66. Просмотрите страницу index.htm в браузере: см. 11.
67. Добавьте текст на главную страницу: откройте index.htm и после тега height="77" /></p> введите:
<p>Мне всегда хотелось совместить любовь к живописи и любовь к архитектуре. Путешествуя по Сибири, я сделала несколько снимков, которые затем использовала как основу для новой серии почтовых открыток и открыток для записей. Это удивительные русские окна подлинные шедевры. Я надеюсь, что вам понравятся эти снимки.</p>
68. Просмотрите страницу okna.htm в браузере: см. 11.
69. Увеличим размер шрифта. Откройте файл home.css и введите:
p {font-size: 16px}
70. Просмотрите страницу index.htm в браузере: см. 11.
71. Создайте ссылку: откройте index.htm и после понравятся эти снимки.</p> введите:
<p>Вы можете просмотреть каталог открыток <a href="okna.htm">русских окон</a>.</p>
Создайте стили для ссылок. Вместо привычного светло-синего цвета для не посещенных и посещенных ссылок мы используем тот же цвет, что и в основном тексте. Для ссылок, которые выделены при помощи кнопки табуляции (a:focus), на которые указали (a:hover) или по которым кликнули мышью (a:active), мы установим фиолетовый цвет, уберем подчеркивание и сделаем их полужирными.
72. Откройте home.css и введите код:
a:link, a:visited {color:#4D65A0}
a:focus, a:hover, a:active {color:#7A4DA0; text-decoration: none;
font-weight:bold}
73. Просмотрите страницу index.htm в браузере: см. 11.
Браузеры по умолчанию подчеркивают текст ссылок. Изменяя цвет делаем их менее заметными. Когда выбирается наша ссылка она теряет подчеркивание, становится полужирной и меняет цвет на фиолетовый.
74. Создайте графические ссылки. Откройте index.htm и введите:
<p>Или вы можете нажать на одну из картинок внизу, чтобы перейти непосредственно к набору открыток.</p> <p><a href="okna.htm"><img src="little/okno_2.jpg" alt="Окна" width="100" height="133" /></a> <a href="architecture.htm"><img src="little/spiral_lit.jpg" width="100" height="133" alt="Архитектура" /></a> <a href="market.htm"><img src="little/market_lit.jpg" alt="Базары" width="100" height="133" /></a> <a href="festivals.htm"><img src="little/festival_lit.jpg" alt="Фестивали" width="100" height="133" /></a> </p>
75. Просмотрите страницу index.htm в браузере: см. 11.
76. Добавьте атрибут class к каждой из четырех графических ссылок. Откройте index.htm и введите выделенный код:
<p><a href="okna.htm"><img src="little/okno_2.jpg" alt="Окна" width="100" height="133" class="little" /></a> <a href="architecture.htm"><img src="little/spiral_lit.jpg" width="100" height="133" alt="Архитектура" class="little" /></a> <a href="market.htm"><img src="little/market_lit.jpg" alt="Базары" width="100" height="133" class="little" /></a> <a href="festivals.htm"><img src="little/festival_lit.jpg" alt="Фестивали" width="100" height="133" class="little" /></a></p>
77. Создайте правило стиля, которое добавит границу вокруг каждого графического изображения и с нашим синим цветом. Откройте home.css и введите:
img.little {border: 1px solid #4d65A0}
78. Просмотрите страницу index.htm в браузере: см. 11.
79. Добавьте абзац, включающий в себя информацию об авторских правах. Откройте index.htm и введите перед тегом </div>:
<p class="copyright">© Copyright 2007. Все права защищены. Маша.</p>
80. Уменьшите абзац об авторских правах. Атрибут smaller вычисляется в зависимости от элементов которые содержат данный элемент. У нас это элементы div класса main. Откройте home.css и введите:
p.copyright {font-size: smaller; padding-top: 40px}
81. Просмотрите страницу index.htm в браузере: см. 11.
82. Разместите изображение навигационной панели. Откройте index.htm и введите:
<div class="nav_bar"> <p><img src="leftcurls.jpg" alt="" width="75" height="314" /></p> </div>
81. Просмотрите страницу index.htm в браузере: см. 11.
82. Откройте home.css и введите:
div.nav_bar {position: absolute; left: 10px; top: 10px}
83. Переместите блок main: откройте home.css и введите:
div.main {margin-left: 90px}
84. Просмотрите страницу index.htm в браузере: см. 11.
85. Добавьте ссылки в навигационную панель для улучшения навигации в целом и для того, чтобы предоставить альтернативу на случай, если изображения не загрузятся.. Откройте файл index.htm и введите после height="314" /></p>:
<p><a href="okna.htm">Окна</a><br /><a href="architecture.htm">Архитектура</a><br /><a href="market.htm">Базары</a><br /><a href="festivals.htm">Фестивали</a><br />
86. Просмотрите страницу index.htm в браузере: см. 11.
87. Выравните ссылки по правому краю. Откройте home.css и введите выделенный код:
div.nav_bar {position: absolute; left: 10px; top: 10px; text-align:right}
88. Просмотрите страницу index.htm в браузере: см. 11.
89. Уменьшите длину ссылок. Откройте home.css и введите:
div.nav_bar a {font-size: 10px}
90. Просмотрите страницу index.htm в браузере: см. 11.
91. Сделайте основной текст курсивом. Откройте home.css и введите:
div.main p {font-style:italic}
92. Просмотрите страницу index.htm в браузере: см.11.
93. Откройте в браузере образец сайта http://kgau.ru/istiki/study/aleks_site/