Учебник по Html для начинающих. Простейшее.
Вставка картинок.
Важно: Страница сайта не должна содержать в себе большого количества графических объектов, т.к. при этом она будет иметь очень большой объем. В итоге на низкоскоростном интернет-соединении пользователь уйдет, не дождавшись ее загрузки.
Вставка картинок в документ происходит с помощью следующего тега:
<img src="my.jpg">
Заметьте, он не имеет закрывающего тега.
В кавычках атрибута
src="my.jpg" можно разместить любое имя картинки. И запомните - в кавычках располагается ссылка к картинке (путь к картинке). Наш пример говорит о том, что картинка лежит в том же каталоге (директории, папке), в которой лежит и документ. Если картинка лежит в поддиректории (в папке, которая лежит в корне сайта), то ссылка на неё будет выглядеть так:
<img src="my/my.jpg">
Если картинка лежит на уровень выше, а документ находится в поддиректории, то ссылка на неё будет такой:
<img src="../my.jpg">
Если картинка лежит на другом сайте, то путь прописывается полностью:
<img src="http://www.homepage.ru/my/my.jpg">
Для Вашего удобства закачивайте картинку в ту же папку, что и документ, в котором эта картинка будет вставлена.
Важно: MY.jpg, my.JPG, my.jpg и MY.JPG – это разные имена файлов. Всегда учитывайте регистр.
Если у вас нет на данный момент картинки, то сохраните сохраните эту (resaltphoto.gif) у себя в папке с нашей страницей. В примере используется именно она.
<html>
<head>
<title>Мой первый шаг </title>
</head>
<body text="#336699" bgcolor="#000000">
<div align="center">
<H3>Здравствуйте, это моя первая страница.</H3>
<br>
<font color="#CC0000"> Добро пожаловать!</font> :) </div>
<p align="justify">
<img src="resaltphoto.gif"> Я совсем недавно начал (а) знакомиться с виртуальной жизнью, но мне по давней традиции тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей и знакомых, чтобы они могли посмотреть мои фотографии, почитать обо мне, черкнуть пару строчек в мою гостевую книгу. А может и просто случайный посетитель вдруг захочет познакомиться со мной, и у меня появится <b> еще один виртуальный друг? :)</b>
</p>
</body>
</html> (посмотреть результат)
Посмотрели что получилось? Не важно смотрится. Было бы лучше, если бы текст аккуратно располагался, например, сбоку от картинки. Идем дальше, чтобы узнать, как это сделать.
<<< Страница 8 :Назад | Далее: Страница 10 >>>
