|
[Назад] [Оглавление] [Далее]
Вставка изображений и гиперссылок на Web-страницы
<img src="../images/risunok.jpg" alt="Рисунок"> - вставка изображения
width, height - ширина и высота изображения
<a href="filename.html">Указатель ссылки</a> - вставка гиперссылки
  - пробел
Гиперссылка на адрес электронной почты
<address>
<a href="mailto:username@server.ru">e-mail:mailto:username@server.ru</a>
</address>
Задание
1. В папку images вашего сайта, например, site_ivanov вставьте файл computer.gif (скачать файл).
2. Создайте 3 пустые Web-страницы
с заголовками: Программы, Словарь и Анкета. Сохраните их в папку вашего
сайта с именами файлов соответственно: software.html, glossary.html и
anketa.html
3. Из папки вашего сайта откройте с помощью текстового редактора KWrite, Gedit
или Блокнот файл index.html
4. Внесите изменения в файл index.html,
чтобы вставить изображение (файл computer.gif) и гиперссылки. Таким
должен быть весь текст:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru">
<head>
<title>Компьютер</title>
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="styles/styles.css" />
</head>
<body>
<h1 class="center">Всё о компьютере</h1>
<hr />
<p><img src="images/computer.gif" alt="Компьютер" width="190" height="128" /></p>
<p class="left">На этом сайте вы сможете получить различную
информацию о компьютере, его программном обеспечении и ценах на
компьютерные комплектующие.</p>
<p class="right">Терминологический словарь познакомит вас с
компьютерными терминами, а также вы сможете заполнить анкету с помощью интерактивной формы.</p>
<p class="center">[<a href="software.html">Программы</a>]
[<a href="glossary.html">Словарь</a>]
[<a href="anketa.html">Анкета</a>]</p>
<address>
<a href="mailto:username@server.ru">e-mail: username@server.ru</a>
</address>
</body>
</html> (Показать)
5. Чтобы текст обтекал изображение, добавьте в файл стилей styles.css строку:
p img {float: right;}
[Назад] [Оглавление] [Далее]
| 