Здравствуйте друзья!
Давайте сегодня вставим в наш сайт изображения и свяжем странички между собой ссылками.
Для вставки изображения используется тэг <img/> с атрибутом src=»здесь указывается путь к изображению»
Пример:
<img src="images/logo.gif"/>
Тэг <img>одиночный — то есть не требует закрывающего </img>.
Атрибут alt — предназначен для альтернативного описания изображения. Посетитель вашего сайта сможет увидеть описание, если у него в браузере отключен показ изображений или он инвалид по зрению и использует специальные средства для работы с компьютером. Мы его также можем увидеть при наведении курсора на изображение. Такую же функцию несёт title — название изображения.
<img src="images/logo.gif" ait="фото" title="описание фото"/>
Для изменения размеров изображений средствами HTML придумали атрибуты height (высота) и width (ширина).
<img src="images/logo.gif" width="350" height="250"/>
Чтобы текст не «наезжал» на изображение указываются атрибуты hspace (горизонтальный отступ) и vspace (отступ по вертикали).
<img src="images/logo.gif" hspace="5" vspace="5"/>
Теперь используя приведённые данные, давайте вставим изображение в наш сайт.
В ту папку, где у вас лежат первые две страницы, скопируйте это изображение:
Создаём новый html-файл и вставляем в него код:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Мой первый сайт.Страничка№3</title>
</head>
<body>
<img align="left" title="logo" src="logo.jpg" alt="Фото для примера." width="240" height="300" hspace="30" vspace="30" border="0" />
<h1 align="center">Привет мир</h1>
<h2>Это мой первый сайт</h2>
<p.>И моя фотография.</p>
<p.>И немного текста для примера. И немного текста для примера. И немного текста для примера. И немного текста для примера.И немного текста для примера.И немного текста для примера.И немного текста для примера.И немного текста для примера.И немного текста для примера.И немного текста для примера.И немного текста для примера.И немного текста для примера. И немного текста для примера. И немного текста для примера.И немного текста для примера.И немного текста для примера.И немного текста для примера.И немного текста для примера.И немного текста для примера.И немного текста для примера.</p>
</body>
</html>
Сохраняем файл как foto.html
Сейчас мы имеем три простейших странички. Их нужно связать между собой.
Но для начала давайте рассмотрим тэги для составления списка.
Тэг <ul></ul> или <ol></ol> устанавливает тип списка — маркированный или нумерованный.
Пример:
<ul type="circle">Строка №1
<li></li>Строка №2
<li></li>Строка №3
<li></li>
</ul>
Результат примера:
- Строка №1
- Строка №2
- Строка №3
Атрибут type указывает, какого вида будет маркер:
Круг — disc.
Окружность — circle.
Квадрат — square.
И для нумерованного списка:
А — A,B,C
a — a,b,c
1 — 1,2,3
i — i,ii,iii
l — l,ll,lll
Значение по умолчанию disc и 1.
Для вставки ссылки служит тэг <a></a>.
Пример ссылки:
<a href="здесь указывается путь к файлу страницы">Текст ссылки</a>
Теперь можно создать менюшку сайта, вставив в строки списка ссылки на наши страницы.
<h2>Меню сайта</h2> <ul type="circle"> <li><a href="index.html">Моя первая страница</a></li> <li><a href="2.html">Страничка №2</a></li> <li><a href="foto.html">Страница с фото</a></li> </ul>
Вставляем этот код на все три странички нашего сайта.
Сохраняем все изменения (Ctrl+S), обновляем страницу в браузере (F5).
Чтобы всё работало, все файлы сайта должны лежать в одной папке.
Я Вас поздравляю! Вы только что создали полноценный сайт на три странички.
Для каких целей он Вам нужен я не знаю, но с уверенностью могу сказать, что положительную оценку по информатике Вы себе заработали.