Как рисовать, как пользоваться графическими редакторами мы учиться не будем, но только посоветую вам Adobe Photoshop и Image Styler, т.к. именно это два основных и распространенных графических пакета для создания и редактирования изображений.

Запомни, страница (сайт) не должна представлять из себя супер графического изыска, который весит сотни килобайт, т.к. это долго будет загружаться. Вот, например, эта страница, содержание которой мы тщательно изучаем, весит в картинках не более 6 килобайт (это общий вес всех картинок, а не вес каждой).

Также желатьльно не изощряться с анимированными картинками (они отвлекают внимание от содержания странички).

Итак, как же вставляются картинки в документ:

<img src="my.jpg">

Вместо my.jpg мы можем подставить имя любой картинки (me.gif, main.png). Самое главное понять, что все расположенное между кавычками - ссылка (путь к картинке). Наш пример говорит о том, что картинка лежит в том же каталоге (директории, папке), в которой лежит и наш документ. Если картинка лежит в поддиректории то ссылка на неё будет выглядеть так:

<img src="/my/my.jpg">

Если картинка лежит на уровень выше, а документ находится в поддиректории, то ссылка на неё будет такой:

<img src="../my.jpg">

Если картинка лежит на другом сайте, то путь прописывается полностью:

<img src="http://www.homepage.ru/my/my.jpg">

Для вашего удобства кладите картинку в ту же директорию, что и документ, тогда путаницы будет меньше:)

Если у вас нет на данный момент картинки, то сохраните эту (жми на ссылку) у себя в директории с нашей страничкой. В нашем примере мы используем именно ее (запомните тег img не требует закрывающего тега).

<html>
<head>
<title>Мой первый шаг </title>
</head>
<body text="#336699" bgcolor="#000000">
<center>
<H3>Здравствуйте, это моя первая страница.</H3>
<br>
<font color="#CC0000"> Добро пожаловать!</font> :) </center>
<p align="justify">
<img src="primtocodephoto.gif"> Эта страничка может быть посвящена чему угодно. Но давайте для примера создадим простенькое вступление. Здесь можно рассказать о себе, написать об увлечениях, разместить фотографии <b> и многое другое. </b>
</p>
</body>
</html> (прим.)


Посмотрите, что у нас получилось. Было бы лучше, если бы текст аккуратно располагался сбоку от картинки. Идем дальше, чтобы узнать, как это сделать.

<< BACK | NEXT >>