Мы переведем нужные вам материалы с иностранного языка.

Колдовство над изображением

22.02.2008 13:18:28
Автор: Катерина Баукина

Продолжаем колдовать над страничкой, параллельно изучая основные теги языка разметки html. В данной статье рассмотрим теги форматирования текста и размещения изображения.

Следующий незнакомый нам тег в нашем примере – это тег <br>.

Этот тег говорит браузеру, что здесь необходимо перейти на другую строчку. То есть это – своеобразный enter, переход на другую строку. Это один из немногих тегов, закрывать которые не надо. Это тег ОДИНОЧНЫЙ.
Другой одиночный тег, который мы рассмотрим – это тег размещения изображения в тексте <img>.
Но все по порядку. Попробуйте в нашем примере добавить несколько тегов <br> подряд.
Сохраните файл блокнота, обновите страницу – оцените результат. Приведите все в исходное положение.

<html>

<head>
<title>Ваша первая страничка</title>
</head>

<body>
<table border="1" cellspacing="10" cellpadding="10">

<tr>
<td>На своей странице вы можете размещать рисунки и фотографии, любые иллюстрации, причем совершенно в разных местах текста. <br><br><br><br><br><br>
<img src="http://" border="1" alt="ваш рисунок" align="left">-cлева<br>
<img src="http://" border="1" alt="ваш рисунок" align="right">-справа<br>
<center>ПО-РАЗНОМУ</center>
</td><td>Так же вы можете совершенно по-разному выделать текст на страничке. <b>Так</b>, <i>Так</i> и даже <b><i><u>вот так</u></i></b>
</td>
</tr>

<tr>
<td>Строя страничку, мы изучим достаточно тегов и их свойств-параметров, чтобы вы смогли чуть-чуть почувствовать себя программистом... А потом вы вполне сможете изучить самостоятельно <a href="http://htmlbook.ru/">html</a> глубже, если у вас возникнет такое желание.
</td><td>Если же что-то будет не получаться - не переживайте, не все получается с первого раза.
</td>
</tr>

</table>
</body>

</html>

Теперь разберемся с тегом размещения изображения. Вы спросите, какое изображение – ведь в тексте сейчас никаких изображений нет. Все верно. Смотрим код.

<img src="http://" border="1" alt="ваш рисунок" align="left">

Параметры создания изображения – это:
src – урл картинки
border – ширина обводки
alt – описание картинки, которое видно, если картинка не найдена, либо у пользователя отключены картинки при просмотре сайтов (например, если он посещает сайт через браузер КПК или работает на дорогом gprs Интернете)
align – положение картинки относительно текста.

В нашем примере урл картинки не задан, поэтому вы видите только границы предполагаемого рисунка и текст его описания. Зададим же урл для рисунка. Вы спросите – как? Ничего сложного. Кликайте на рисунок в браузере, на любую фотографию, любое изображение, которое вам понравилось правой кнопкой – дальше в зависимости от браузера необходимо выбрать СВОЙСТВА и скопировать адрес url  (для Internet Explorer) или КОПИРОВАТЬ ССЫЛКУ НА ИЗОБРАЖЕНИЕ  (Mozilla Firefox) или КОПИРОВАТЬ АДРЕС РИСУНКА (Opera).

Пробуем на примере изображения логотипа компании Web Advance. Открываем сайт http://webadvance.ru  - кликаем по лого вверху сайта и получаем адрес логотипа - http://webadvance.ru/img/logo.gif

Вставляем его в код нашего примера вместо http:// и смотрим результат.

<html>

<head>
<title>Ваша первая страничка</title>
</head>

<body>
<table border="1" cellspacing="10" cellpadding="10">

<tr>
<td>На своей странице вы можете размещать рисунки и фотографии, любые иллюстрации, причем совершенно в разных местах текста. <br>
<img src="http://webadvance.ru/img/logo.gif" border="1" alt="ваш рисунок" align="left">-cлева<br>
<img src="http://webadvance.ru/img/logo.gif" border="1" alt="ваш рисунок" align="right">-справа<br>
<center>ПО-РАЗНОМУ</center>
</td><td>Так же вы можете совершенно по-разному выделать текст на страничке. <b>Так</b>, <i>Так</i> и даже 
<b><i><u>вот так</u></i></b>
</td>
</tr>

<tr>
<td>Строя страничку, мы изучим достаточно тегов и их свойств-параметров, чтобы вы смогли чуть-чуть почувствовать себя программистом... А потом вы вполне сможете изучить самостоятельно <a href="http://htmlbook.ru/">html</a> глубже, если у вас возникнет такое желание.
</td><td>Если же что-то будет не получаться - не переживайте, не все получается с первого раза.
</td>
</tr>

</table>
</body>

</html>

Теперь попробуйте поменять параметр border – выставить 0 или 3.  Как правило, обводку рисунка не задают, поэтому в коде страницы чаще всего можно встретить border=”0”.

Введем несколько более сложных параметров img, но которые знать контент-менеджеру необходимо.
vspace - отступ от картинки до текста по вертикали
hspace – отступ от картинки до текста по горизонтали

Для этого заменим текст первой ячейки нашего примера:

<html>

<head>
<title>Ваша первая страничка</title>
</head>

<body>
<table border="1" cellspacing="10" cellpadding="10">

<tr>
<td>На своей странице вы можете размещать рисунки и фотографии, любые иллюстрации, причем совершенно в разных местах текста. Сейчас мы изучаем как может располагаться рисунок относительно текста. <br><img src="http://webadvance.ru/img/logo.gif" border="1" hspace="10"  alt="ваш рисунок" align="left">Первый рисунок располагается слева от текста и расстояние по горизонтали от него до текста - 10 пикселей. Параметр, говорящий браузеру, что рисунок надо расположить слева - задан в align как "left", а параметр hspace равен 10, соответственно.

<br><br><br><br>Второй рисунок располагается справа от текста <img src="http://webadvance.ru/img/logo.gif" border="1" vspace="10" alt="ваш рисунок" align="right"> и теперь задан параметр, указывающий браузеру, что изображение надо расположить справа на расстоянии 10 пикселей от текста по вертикали. Соответственно, это сделано в параметре align как "right" и vspace как 10. Параметры vspace и hspace, как правило, используются одновременно. Также можно по-разному размещать текст на странице, используя теги left или center.

<br><br><br><br>
<left>Текст слева<left><br><br>
<center>Центрированный текст</center>

</td><td>Так же вы можете совершенно по-разному выделать текст на страничке. <b>Так</b>, <i>Так</i> и даже <b><i><u>вот так</u></i></b>
</td>
</tr>

<tr>
<td>Строя страничку, мы изучим достаточно тегов и их свойств-параметров, чтобы вы смогли чуть-чуть почувствовать себя программистом... А потом вы вполне сможете изучить самостоятельно <a href="http://htmlbook.ru/">html</a> глубже, если у вас возникнет такое желание.
</td><td>Если же что-то будет не получаться - не переживайте, не все получается с первого раза.
</td>
</tr>

</table>
</body>

</html>

Ниже я цитирую то, что вы только что прочитали на экране:
Первый рисунок располагается слева от текста и расстояние по горизонтали от него до текста - 10 пикселей. Параметр, говорящий браузеру, что рисунок надо расположить слева - задан в align как "left", а параметр hspace равен 10, соответственно.
Второй рисунок располагается справа от текста и теперь задан параметр, указывающий браузеру, что изображение надо расположить справа на расстоянии 10 пикселей от текста по вертикали. Соответственно, это сделано в параметре align как "right" и vspace как 10. Параметры vspace и hspace, как правило, используются одновременно.

Также можно по-разному размещать сам текст на странице, используя теги <left></left> -форматирование текста по левому краю или <center></center> - центрирование текста. Так мы с вами плавно подошли к форматированию текста.

Назад в раздел


sales@webadvance.ru
(495)784-21-06