[Назад] [Оглавление] [Далее]

Вставка изображений и гиперссылок на Web-страницы

<img src="../images/risunok.jpg" alt="Рисунок"> - вставка изображения
width, height - ширина и высота изображения
<a href="filename.html">Указатель ссылки</a> - вставка гиперссылки
&nbsp - пробел

Гиперссылка на адрес электронной почты

<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;}

[Назад] [Оглавление] [Далее]

Все права защищены. © 2015. Хайманова Т.Я.