4. Тег Div. Вставка в html-документ изображений, их свойства и оформление
После каждого задания следует смотреть
результат в браузере и объяснять причину
изменений.
Изображения для практической
работы:
1. Откройте на редактирование html-файл, созданный на прошлом занятии. Добавьте в него теги <img>. Первое изображение вставьте перед первым абзацем (вне абзаца), второе и третье изображения в конце соответственно предпоследнего и последнего абзацев (перед закрывающим тегом</p>).
...
<img src="structure_os.png"width=400height=299alt="Операционная система в структуре ЭВМ">
...
<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>первое изображение и абзац, который является подписью к этом изображению.
<divclass="image">
<img src="structure_os.png"width=400height=299alt="Операционная система в структуре ЭВМ">
<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-документа.
5. Создание и оформление гипертекстовых ссылок
Создайте шесть файлов HTML (structure.html, tehnologies.html, history.html, reference.html, hyperlink.html, philosophers.html), поместите их вместе в один каталог. Содержимое файлов и его оформление смотрите в образце.
В том же каталоге создайте файл index.html, со списком ссылок на ранее созданные файлы. Озаглавьте список заголовком третьего уровня. В браузере проверьте работоспособность ссылок.
Подключите к документу index.html файл style.css, описав в нем стили для списка (присвойте списку определенных класс) и ссылок, таким образом, чтобы меню (группа ссылок) выглядело как ряд вертикальных кнопок.
Примерный результат практической работы
Файл index.html:
<html>
<head><title>Web и гиперссылки</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h3>Web и гиперссылки</h3>
<ul class="menu">
<li><a href="structure.html">Структура Web</a></li>
<li><a href="tehnologies.html">Технологии Web</a></li>
<li><a href="history.html">История Web</a></li>
<li><a href="reference.html">Что такое ссылка</a></li>
<li><a href="hyperlink.html">Гиперссылки</a></li>
<li><a href="philosophers.html">Философы</a></li>
</ul>
</body>
</html>
Файл style.css:
ul.menu{
list-style:none;
width: 180px;
}
ul.menu li {
padding:10px;
border:3px outset #E6E6FA;
margin-bottom: 5px;
}
a {
color: #23594C;
text-decoration: none;
}
ul.menu li:hover {
background-color:#bfbfbf;
}