Ну вот мы дошли до картинок. На этом уроке вы научитесь вставлять картинки в ваши странички, узнаете атрибуты картинки. А пока я вам скажу чем можно сделать картинку. Для начала вам нужны мозги, руки и можно пользоваться стандартным Microsoft Paint, но это нам не пожходит. Я вам посоветую Adobe Photoshop, т.к. сам им пользуюсь. :) Может вы сами знаете хороший графический редактор. Ну этот выбор вы уже сделаете сами.
Для работы с картинками используется тэг <img>. Чтобы вставить картинку на страничку нужен атрибут src="картинка" тэга <img>. Ну ладно дам сразу пример.
<img src="имя картинки">
Пример: <img src="image.jpg">
Этот пример используется если картинка находится в одной папке с этой страничкой на которой мы вставляем картинку.
<img src="имя папки/имя картинки">
Пример: <img src="images/image.jpg">
Этот пример используется, если картинка находится в папке, которая находится в одной папке с этой страничкой на которой мы вставляем картинку .
<img src="../имя картинки">
Пример: <img src="../image.jpg">
Этот пример используется, если картинка находится в папке, в которой еще одна папка с этой страничкой на которой мы вставляем картинку.
Можно вставить картинку с другого сайта. Пример ниже.
<img src="сайт/имя картинки или сайт/папка/имя картинки">
Пример: <img src="http://www.igorenat.hut.ru/b2.gif или http://www.igorenat.hut.ru/ban/b2.gif">
Этот пример используется, если картинка находится на другом сайте.
А теперь напишите следующий текст в блокноте.
<html>
<head>
<title>Все о работе с картинками. Вставка картинок и их атрибуты.</title>
</head>
<body text="yellow" bgcolor="black" link="#CC0000" vlink="#FFFF00" alink="#008000">
<center><h3>Добро пожаловать!</h3></center>
<h2>Это моя фотогалерея.</h2>
<br><img src="../001.jpg">Эта фотография была сделана на военных действиях в Ираке.
</body>
</html>
Вместо нашей картинки вставьте свою. Сохраните его. Посмотреть пример.
Разберем.
<html> <head> <title>Все о работе с картинками. Вставка картинок и их атрибуты.</title> </head> <body text="yellow" bgcolor="black" link="#CC0000" vlink="#FFFF00" alink="#008000">
это вы уже должны знать <center><h3>Добро пожаловать!</h3></center> <h2>Это моя фотогалерея.</h2> <br><img src="../001.jpg">Эта фотография была сделана на военных действиях в Ираке.
а тут мы вставляем картинку, пишем описание к картинке, а вы уже наверно догадались где находится картинка </body> </html>
Теперь поговорим о атрибутах тэга <img>. У этого тэга есть атрибуты как у тэга <p>(<p align="left/right">), но их немного больше. Вот они.
<img src="картинка" align="left">
Картинка будет слева, а текст справа.
<img src="картинка" align="right">
Картинка будет справа, а текст слева.
<img src="картинка" align="bottom">
Картинка будет внизу.
<img src="картинка" align="middle">
Картинка будет посередине.
<img src="картинка" align="top">
Картинка будет сверху.
Кроме атрибута align есть еще другие атрибуты. Вот они.
<img src="картинка" Vspace="цифра">
Этот атрибут задает расстояние по вертикали между картинкой и текстом. Расстояние в пикселях.
<img src="картинка" Hspace="цифра">
То же самое, что Vspace только Hspace задает расстояние по горизонтали.
<img src="картинка" Width="нирина">
Этот атрибут задает ширину картинки.
<img src="картинка" Height="высота">
Этот высату задает ширину картинки.
<img src="картинка" border="цифра">
Этот атрибут рисует рамку вокруг картинки.
<img src="картинка" Alt="Описание картинки">
Этот атрибут задает описание картинки. Если задать этот атрибут, то при наведении курсора на картинку и держа несколько секунд, то выйдет текст(описание) заданный атрибутом Alt.
Можно задавать сразу несколько атрибутов.
Сразу научу вас вставлять картинку как фон. Для этого у тэга <body> есть атрибут background. Чтобы вставить картинку в фон смотрите ниже.
<body background="картинка">
Пример: <body background="../002.jpg">
Картинка будет как фон странички.
Можно сделать картинку как водяной знак, т.е. при прокрутке скролбара она будет оставаться на месте, а все остальное двигаться.
<html>
<head>
<title>Все о работе с картинками. Вставка картинок и их атрибуты.</title>
</head>
<body background="../002.jpg" bgproperties="fixed" text="yellow" bgcolor="black" link="#CC0000" vlink="#FFFF00" alink="#008000">
<center><h3>Добро пожаловать! Это моя фотогалерея.</h3></center>
<p align="justify">
<img src="../001.jpg" align="left" Hspace="5" alt="Война в Ираке" border="2">
<font color="green" size="5">Эта фотография была сделана на военных действиях в Ираке. Горит нефтяная скважена. Я был против войны в Ираке, но хотел посмотреть на что способны эти две стороны. </font>
</p>
<p> </p><p> </p><p> </p><p> </p><p> </p>
<p> </p><p> </p><p> </p><p> </p><p> </p>
<p> </p><p> </p><p> </p><p> </p><p> </p>
</body>
</html>
Сохраните. Посмотреть пример.
Разберем вместе.
<html> <head> <title>Все о работе с картинками. Вставка картинок и их атрибуты.</title> </head> <body background="../002.jpg" bgproperties="fixed" text="yellow" bgcolor="black" link="#CC0000" vlink="#FFFF00" alink="#008000">
фоном будет картинка как водяной знак, чтобы фоном было апрсто картинка удалите атрибут bgproperties="fixed". <center><h3>Добро пожаловать! Это моя фотогалерея.</h3></center> <p align="justify"> <img src="../001.jpg" align="left" Hspace="5" alt="Война в Ираке" border="2">
вставили картинку. Равняется левому краю, текст справа от картинки на расстоянии 5 пикселей, рамка 2 пикселя. При наведении на картинку мыши появится описание "Война в Ираке". <font color="green" size="5">Эта фотография была сделана на военных действиях в Ираке. Горит нефтяная скважена. Я был против войны в Ираке, но хотел посмотреть на что способны эти две стороны. </font>
