Тег Div. Вставка в html-документ изображений, их свойства и оформление

После каждого задания следует смотреть результат в браузере и объяснять причину изменений.

1. Откройте на редактирование html-файл, созданный на прошлом занятии. Добавьте в него теги <img>. Первое изображение вставьте перед первым абзацем (вне абзаца), второе и третье изображения в конце соответственно предпоследнего и последнего абзацев (перед закрывающим тегом </p>).

...<img src="structure_os.png" width=400 height=299 alt="Операционная система в структуре ЭВМ">...<img src="win_s.gif" title="Операционная система Windows XP">... <img src="linux_s.png" title="Операционная система AltLinux">...

2. Опишите общие стилевые свойства тега img в файле *.css (который был создан на прошлом уроке).

img { display: block; margin: auto; padding-top: 10px;}

3. Создайте класс image:

.image { float: right; margin: 10 0 10 10px; /* top right bottom left*/ padding: 10 10 10 10px; border: 1px dotted gray; text-align: center; width: 420px; font-size: smaller; font-family: "Courier"; }

В html-документе обрамите в контейнер <div class="image">...</div> первое изображение и абзац, который является подписью к этом изображению.

<div class="image"><img src="structure_os.png" width=400 height=299 alt="Операционная система в структуре ЭВМ"><p>Схема, иллюстрирующая место операционной системы в многоуровневой структуре компьютера</p></div>

4. Определите для тела документа серый цвет фона.

body { background-color: silver;}

5. Удалите описание стиля для обычного абзаца и заголовка. Вместо него вставьте описание для идентификатора all.

#all { width: 900px; margin: auto; padding: 0 30 0 30px; /* top right bottom left*/ border-left: 4px groove white; border-right: 4px groove white; font-size: 1.2em; background-color: white;}

6. Обрамите в контейнер <div id="all">...</div> все содержимое тела html-документа.

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

1. Создайте шесть файлов HTML (structure.html, tehnologies.html, history.html, reference.html, hyperlink.html, philosophers.html), поместите их вместе в один каталог. Содержимое файлов и его оформление смотрите в образце.

2. В том же каталоге создайте файл index.html, со списком ссылок на ранее созданные файлы. Озаглавьте список заголовком третьего уровня. В браузере проверьте работоспособность ссылок.

3. Подключите к документу index.html файл style.css, описав в нем стили для списка (присвойте списку определенных класс) и ссылок, таким образом, чтобы меню (группа ссылок) выглядело как ряд вертикальных кнопок.