Реклама




Счетчики






Сайт, форум, блог

Создание, поддержка, продвижение

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


Продолжаем колдовать над страничкой, параллельно изучая основные теги языка разметки 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>

4

Теперь попробуйте поменять параметр 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>

5

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

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

Автор: Катерина Баукина



Оставить отзыв