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> - центрирование текста. Так мы с вами плавно подошли к форматированию текста.
Назад в раздел