Изображения и гиперссылки в HTML

Изображения и гиперссылки в HTML

Доброго времени суток, уважаемые читатели блога Moi-tarakany.ru !

Продолжаем работу над нашим HTML сайтиком. Давайте сегодня вставим в наш сайт изображения и свяжем странички между собой ссылками.

Для вставки изображения используется тег <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="square">
<li>
Строка №1</li>
<li>
Строка №2</li>
<li>
Строка №3</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).
Чтобы всё работало, все файлы сайта должны лежать в одной папке.

Я Вас поздравляю! Вы только что создали полноценный сайт на три странички.

Для каких целей он вам нужен я не знаю, но с уверенностью могу сказать, что положительную оценку по информатике в школе вы себе заработали.

Похожие записи:

Понравилась статья? Расскажи друзьям, автор очень старался:
3 комментария на:
“Изображения и гиперссылки в HTML”
  • Beiledody (1 comments) говорит:

    Я решил начать вести свой блог Продвижение неизбежно не так давно, а именно месяц назад – примерно в середине ноября. Тогда я еще не представлял какие сложности меня ждут. Сейчас я уже изучил основы SEO, SMO, раскрутки и могу смело писать об этом статьи.

  • Eugene (1 comments) говорит:

    Интересная мысль — я запомню. :-):-)

  • Виталий (25 comments) говорит:

    Думаю, стоит добавить и то, что атрибут alt важен и тем, что без него html документ не пройдет валидацию, а также данный атрибут важет для поисковых систем. Кстати, атрибуты width и height, тоже уже не используют. Сейчас все задается в CSS!!!

Добавить комментарий

Перед комментированием ознакомтесь с правилами комментирования
  • Все комментарии проходят ручнуюю модерацию, поэтому большая прозьба - НЕ СПАМИТЬ!!!
  • Подписывайтесь нормальными именами, а не "регистрация в Москве" или "Кондиционеры не дорого".
  • Ссылки на коммерческие сайты будут удалятся.
  • Оставляйте ссылку на главную страницу.
  • Оставляйте комментарии длинной не менее 100 символов. Исключения - диалоги и ответы на заданные вопросы.
Внимание! Один раз в неделю блог прходит проверку на наличие битых ссылок. Если ваш сайт в это время не был доступен, ссылка на него будет удалена!
За собой оставляю право редактировать и удалять комментарии, даже если они удовлетворяют вышепреведённый свод правил.